.scanner-pdf-section { margin: 24px 0 40px; text-align: center; }
.scanner-pdf-section .btn.btn-outline {
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
}
.scanner-pdf-section .btn.btn-outline:hover {
    background: var(--primary-blue);
    color: #fff;
}
.similar-packages-section {
    padding: 20px 0 60px;
}
.contact-whatsapp-cta { margin: 24px 0 32px; display: flex; justify-content: center; }
.contact-whatsapp-cta a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 1px solid var(--primary-blue); border-radius: 8px; padding: 8px 12px; background: transparent; }
.contact-whatsapp-cta .whatsapp-cta-text { font-weight: 600; color: var(--primary-blue); }
.contact-whatsapp-cta a:hover .whatsapp-cta-text { color: var(--primary-blue); }

/* Align WhatsApp CTA left on Contact Page only */
body.page-template-page-contact .contact-whatsapp-cta,
body.page-template-page-contact-php .contact-whatsapp-cta {
    justify-content: flex-start;
}
/*!
Theme Name: scanners
Version: 1.3.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: scanners

scanners 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
	- Header
	- Slider
	- Package Setups
	- Testimonials
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
	- Floating Backgrounds
# WooCommerce
	- Cart Page

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

/* Import Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* CSS Custom Properties (Variables) */
:root {
    --primary-blue: #2b5ab4;
    --container-width: 1200px;
    --white: #ffffff;
    --black: #000000;
    --grey-light: #f5f5f5;
    --grey-medium: #cccccc;
    --grey-dark: #333333;
}

/* Social links (generic) */
.social-links,
.footer-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
/* Contact page phone list */
.contact-phones .contact-phone { margin: 6px 0; }
.contact-phone a { text-decoration: none; font-weight: 600; }

.social-links li,
.footer-socials li {
    margin: 0;
    padding: 0;
}

.social-links a,
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px; /* slightly bigger icons */
    line-height: 1;
    border-radius: 50%;
    text-decoration: none;
}

/* Footer-specific colouring */
/* Simplified 404 page */
.simplified-404 .page-header { text-align: center; margin: 40px 0 10px; }
.simplified-404 .page-title { color: var(--primary-blue); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 10px; }
.simplified-404 .page-subtitle { color: #333; opacity: 0.9; margin: 0 0 14px; }
.simplified-404 .page-cta .button { border: 1px solid var(--primary-blue); color: var(--primary-blue); padding: 8px 16px; border-radius: 50px; text-decoration: none; }
.simplified-404 .page-cta .button:hover { background: var(--primary-blue); color: #fff; }

.site-footer .footer-socials a {
    color: var(--white);
}
.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus {
    color: var(--grey-light);
}

/* WhatsApp icon styles */
/* Keep WhatsApp brand colours intact in CTA */
.footer-whatsapp-cta { margin: 16px 0; }
.footer-whatsapp-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    background: transparent;
}
.footer-whatsapp-cta img { display: inline-block; }
.footer-whatsapp-cta .whatsapp-cta-text { color: var(--white); font-weight: 600; }
.footer-whatsapp-cta a:hover .whatsapp-cta-text { color: var(--grey-light); }

.slide-menu-whatsapp {
    margin-top: 16px;
    display: block;
    width: 100%;
    text-align: right;
    padding: 12px 45px 0 20px; /* match menu link right padding */
}
.slide-menu-whatsapp .slide-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.slide-menu-whatsapp img { display: inline-block; }

/* Footer rows layout */
.site-footer .footer-content {
    display: block;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 30px 20px;
}

.site-footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.site-footer .footer-row-bottom {
    margin-top: 16px;
}

.site-footer .footer-left { text-align: left; }
.site-footer .footer-right { text-align: right; }

@media (max-width: 768px) {
    .site-footer .footer-row { flex-direction: column; align-items: flex-start; }
    .site-footer .footer-right { text-align: left; }
}



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

/* Site Container - Unified container for consistent layout */
.site-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .site-container {
        padding: 0 15px;
    }
}

/* 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, h2, h3, h4, h5, h6 {
    letter-spacing: -0.035em;
    line-height: 1;
}

h1 {
    font-size: 3.7em;
}
h2 {
    font-size: 2.8em;
}
h3 {
    font-size: 2.5em;
}
h4 {
    font-size: 1.85em;
}
h5 {
    font-size: 1.4em;
}
h6 {
    font-size: 1.1em;
}


/* 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
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Poppins', sans-serif;
	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: 3.5em 0;
}

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

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: var(--primary-blue);
}

a:visited {
	color: var(--primary-blue);
}

a:hover,
a:focus,
a:active {
	color: var(--primary-blue);
}

/* Remove default dotted focus outline and replace with consistent focus style */
a:focus {
	outline: none;
}

/* Accessible focus indicator for keyboard users */
:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}

/* Add this new section to override the visited state for slider buttons */
.homepage-slider-wrapper .btn,
.homepage-slider-wrapper .btn:visited {
    color: #fff;  /* Maintain the white color for both normal and visited states */
}

.homepage-slider-wrapper .btn:hover {
    background-color: #fff;
    color: var(--primary-blue);  /* Maintain the hover state as before */
}

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

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

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

/* Site Controls & Navigation
--------------------------------------------- */

/* Site Controls Container - RIGHT SIDE */
.site-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: absolute; /* Float within #page container */
    top: 30px;
    right: 2rem;
    z-index: 1600; /* Highest layer */
}

/* Inline phones (prompt + landline) inside site controls */
.site-controls-phones {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    margin-top: 5px;
}
.site-controls-phones .phone-prompt { font-weight: 600; }
.site-controls-phones .phone-link {
    color: #fff !important;
    text-decoration: none;
}
.site-controls-phones .phone-link:hover,
.site-controls-phones .phone-link:focus { text-decoration: underline; }

/* Left of right-controls */
.site-controls-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    top: 35px;
    right: 148px;
    z-index: 101;
}

/* WhatsApp icon near cart */
.site-controls-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 4px 0;
    width: 24px;
    height: 24px;
}
.site-controls-whatsapp img { display: block; }

/* Mobile adjustments for unified header system */
/* Hide left controls on mobile; show in slide menu */
@media (max-width: 899px) {
    .site-controls-left { display: none !important; }
}

@media (max-width: 768px) {
    .site-header .col-full {
        padding: 0 1rem;
    }
    
    .site-controls {
        gap: 1rem;
        top: 12px;
        right: 12px;
    }
    .site-controls-left {
        gap: .75rem;
        top: 12px;
        right: 110px;
    }
    
    .site-branding img {
        max-height: 40px; /* Smaller logo on mobile */
        width: auto !important; /* Maintain aspect ratio on mobile */
    }
}

/* Header Controls (Legacy - for compatibility) */
.header-controls { display: flex; align-items: center; gap: 1.5rem; }

/* Cart Icon Styling */
.site-header-cart {
    position: relative;
    margin: -3px -3px 0 6px;
    padding: 0;
}

.site-header-cart .cart-contents {
    padding: 0 !important;
    color: #fff !important;
    text-decoration: none;
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
}

/* Add the cart icon using Font Awesome */
.site-header-cart .cart-contents::before {
    content: '\f291';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Cart Count Badge */
.cart-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fff;
    color: var(--primary-blue);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
    z-index: 1;
}

/* Hide the dropdown cart widget */
.site-header-cart .widget_shopping_cart {
    display: none !important;
}

/* Burger Menu Button */
.burger-menu {
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 1600; /* Above slide menu (1500) and nav overlay (1000), below modal (2000) */
}

.burger-menu:hover,
.burger-menu:focus {
    background: none;
    outline: none;
}

/* Burger Menu Lines */
.burger-line {
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
}

/* Burger to Cross Animation */
.burger-menu.active .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Navigation Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1200; /* Mid layer across site */
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Slide Menu */
.slide-menu {
    position: fixed;
    top: 0;
    left: auto;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: var(--primary-blue);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1300; /* Above overlay (1200), below controls (1600) */
    visibility: hidden;
    overflow-y: auto;
    padding: 100px 0px 40px;
    transform: translateX(0);
    opacity: 0;
    /* Curved mask on left edge */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M25,0 C20,25 20,75 25,100 L100,100 L100,0 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M25,0 C20,25 20,75 25,100 L100,100 L100,0 Z' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.slide-menu.is-active {
    right: 0;
    visibility: visible;
    transform: translateX(0);
    opacity: 1;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Navigation Menu */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.nav-menu a {
    display: block;
    padding: 10px 45px 10px 0px;
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    transition: background-color 0.3s ease;
    border-radius: 0px;
    text-align: right;
}

.nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Sub-menu styling */
.nav-menu .sub-menu {
    padding-left: 0;
    padding-right: 20px;
    margin-top: 15px;
    text-align: right;
}

.nav-menu .sub-menu li {
    margin-bottom: 10px;
}

.nav-menu .sub-menu a {
    font-size: 1.1rem;
    padding: 12px 20px;
}

/* Mobile Navigation Adjustments */
@media (max-width: 480px) {
    .slide-menu {
        width: 300px;
        right: -300px;
        padding: 80px 20px 30px;
    }
    
    .nav-menu a {
        font-size: 1.1rem;
        padding: 12px 13px;
    }
}

/* Header
--------------------------------------------- */
.site-header {
    position: relative;
    width: 100%;
    z-index: 100;
    background-color: var(--primary-blue);
    padding: 20px 20px 25px;
    /* Curved mask disabled for simplicity */
    /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,93 L0,0 L100,0 L100,93 C75,88 25,88 0,93 Z' fill='%23000000'/%3E%3C/svg%3E"); */
    /* mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,93 L0,0 L100,0 L100,93 C75,88 25,88 0,93 Z' fill='%23000000'/%3E%3C/svg%3E"); */
    /* -webkit-mask-size: 100% 100%; */
    /* mask-size: 100% 100%; */
    /* -webkit-mask-repeat: no-repeat; */
    /* mask-repeat: no-repeat; */
    /* -webkit-mask-position: bottom; */
    /* mask-position: bottom; */
}

/* Homepage Slider Template: only make header background transparent */
/* Reverted: Homepage Slider uses standard header styles */

/* Adjust logo color for non-homepage */
body:not(.home) .site-header .custom-logo-link img {
    filter: brightness(0) invert(1);
}

/* Cart and burger menu colors are handled in the Site Controls section above */

/* Content spacing adjustment for non-homepage */
body:not(.home) #primary {
    padding-top: 60px;
    margin-top: -60px;
}

/* Remove top padding and add negative margin for scanner post types to tuck under curved header */
body.single-scanners #primary {
    padding-top: 0;
    margin-top: -20px;
}

/* Packages post type header spacing */
/* Removed single-packages overrides to use unified header system site-wide */

/* Ensure navigation elements stay on top for single product pages */
.single-product .site-controls {
    z-index: 1600 !important; /* Force above everything on product pages */
}

.single-product .site-controls-left {
    z-index: 850 !important; /* Match right controls layering on product pages */
}

.single-product .burger-menu {
    z-index: 1600 !important; /* Force above everything on product pages */
}

.single-product .slide-menu {
    z-index: 1500 !important; /* Above nav overlay on product pages */
}

/* ==========================================================================
   UNIFIED HEADER SYSTEM - Single System for All Page Types
   ========================================================================== */

/* 
 * Unified header system that works consistently across:
 * - Homepage, standard pages, single posts
 * - Package pages, scanner pages  
 * - WooCommerce product pages (including configurator)
 * - All other content types
 */

/* Single Product Header - inherit unified header; only ensure masks are off */
.single-product .site-header {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .site-header {
        padding: 20px 15px 35px;
    }

    /* Curved mask disabled - keep unified spacing */

    /* Adjust scanner spacing for mobile */
    body.single-scanners #primary {
        margin-top: -15px;
    }
    
    /* Packages spacing on mobile */
    body.single-packages #primary {
        padding-top: 30px;
    }
    
    /* Removed single-packages mobile overrides to keep unified header */
    
    /* Ensure navigation elements stay on top for single product pages on mobile */
    .single-product .site-controls,
    .single-product .site-controls-left,
    .single-product .burger-menu {
        z-index: 1600 !important; /* Force above everything on product pages mobile */
    }
    
    .single-product .slide-menu {
        z-index: 1500 !important; /* Above nav overlay on product pages mobile */
    }
    
    /* Header configurator text mobile adjustments */
    .header-configurator-text h1 {
        font-size: 1.4rem; /* Smaller on mobile */
    }
    
    /* Single product mobile - keep masks off; inherit sizing from base */
    .single-product .site-header {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Base header styles for all page types */
.site-header {
    position: relative;
    background: var(--primary-blue);
    overflow: hidden;
    z-index: 100;
    min-height: 115px; /* Adjusted header height */
    padding: 15px 0; /* Vertical spacing */
    border-bottom: 1px solid #fff;
}

/* Remove dependency on col-full in header */
.site-header .col-full { display: contents; }

/* Logo/Branding - absolute top-left */
.site-branding {
    position: absolute;
    top: 18px;
    left: 2rem;
    margin: 0;
    z-index: 1600;
}

.site-branding img {
    max-height: 80px; /* Adjusted logo size */
    width: auto !important; /* Maintain natural aspect ratio */
    height: auto !important; /* Let max-height control the size */
}

.custom-logo-link {
    margin: 0;
}

.custom-logo {
    width: auto !important; /* Allow natural aspect ratio */
    height: auto !important; /* Let max-height on img control sizing */
}

/* Cart and burger menu styles consolidated in Site Controls section above */

/* Burger, navigation, and slide menu styles consolidated in Site Controls section above */

/* Package Setups
--------------------------------------------- */
/* Container and Grid Layouts */
.package-setups-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.package-grid {
    flex: 0 0 calc(50% - 1rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0;
}

.package-grid-alternative {
    display: grid;
    gap: 2rem;
    width: 100%;
}

/* Grid Layout Variations */
.setups-count-4 .package-grid-alternative {
    grid-template-columns: repeat(2, 1fr);
}

.setups-count-3 .package-grid-alternative {
    grid-template-columns: repeat(3, 1fr);
}

.setups-count-2 .package-grid-alternative {
    grid-template-columns: repeat(2, 1fr);
}

.setups-count-1 .package-grid-alternative {
    grid-template-columns: 1fr;
}

.setups-count-1 .setup-box {
    aspect-ratio: 1.5;
}

/* Setup Boxes */
.setup-box {
    position: relative;
    aspect-ratio: 0.7;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    height: auto; /* allow aspect-ratio to control height */
    margin: 0;
}

.setup-box:hover {
    transform: translateY(-8px);
}

/* Featured Setup */
.featured-setup {
    flex: 0 0 calc(50% - 1rem);
    display: block;
    background: #fff;
}

/* Setup Images */
.setup-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.setup-box:hover .setup-image {
    transform: scale(1.05);
}

/* Setup Titles */
.setups-title {
    max-width: 1400px;
    margin: 5rem auto;
    padding: 0 2rem;
    text-align: center;
    text-transform: uppercase;
}

.setup-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    margin: 0;
    color: #111111;
    font-size: 1.25rem;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none; /* prevent overlay from causing scroll/hover oddities */
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .package-setups-container {
        flex-direction: column;
    }
    
    .featured-setup {
        aspect-ratio: 0.7;
    }
}

@media (max-width: 768px) {
    .setups-count-3 .package-grid-alternative,
    .setups-count-2 .package-grid-alternative {
        grid-template-columns: 1fr;
    }
    
    .setup-box {
        aspect-ratio: 0.8;
    }
}

@media (max-width: 600px) {
    .package-grid {
        grid-template-columns: 1fr;
    }
    
    .package-setups-container {
        padding: 0 1rem;
        margin: 2rem auto;
    }
}

/* Homepage Slider
--------------------------------------------- */
.homepage-slider-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 100vh; /* Increased to accommodate more content */
    background-color: var(--primary-blue);
    overflow: hidden;
    z-index: 1;

    /* Curved mask enabled for slider only */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,92 L0,0 L100,0 L100,100 C75,85 25,85 0,92 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,92 L0,0 L100,0 L100,100 C75,85 25,85 0,92 Z' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}

.homepage-swiper {
    width: 100%;
    height: 100%;
}

/* =============================================================================
   Package Status Ribbon (e.g., SPECIAL OFFER)
   ============================================================================= */
.pkg-status {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 100px solid var(--primary-blue);
	border-left: 100px solid transparent;
	z-index: 5;
	pointer-events: none;
}
.pkg-status .pkg-status__text {
	position: absolute;
	top: -52px;
	right: 1px;
	color: #ffffff;
	font-weight: 800;
	font-size: 13px;
	line-height: 1.1em;
	letter-spacing: 0.05em;
	text-align: center;
	transform: rotate(45deg);
	transform-origin: top right;
	text-transform: uppercase;
}

/* Prevent hover lift from affecting status ribbon on homepage/packages sections */
.popular-setups-section .setup-box:hover,
.packages-archive-section .setup-box:hover {
	transform: none;
}

/* =============================================================================
   Isotope Filters & Packages Grid
   ============================================================================= */
.packages-isotope-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}
.packages-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.packages-filter-bar .filter-btn {
    appearance: none;
    border: 1px solid #cccccc;
    background: #ffffff;
    color: #111111;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
/* Special Offer filter: light blue default, keep standard hover/active */
.packages-filter-bar .filter-btn--special-offer {
	background: #e6f2ff; /* light variant of primary blue */
	color: var(--primary-blue);
	border-color: var(--primary-blue);
}
.packages-filter-bar .filter-btn:hover {
    background: var(--primary-blue);
    color: #ffffff;
    border-color: var(--primary-blue);
    transform: translateY(-1px);
}
.packages-filter-bar .filter-btn.is-active {
    background: var(--primary-blue);
    color: #ffffff;
    border-color: var(--primary-blue);
}
.packages-isotope-grid {
	overflow: hidden;
	margin: 0; /* gutters handled by Isotope masonry.gutter */
}
/* Subtle section divider for homepage sections */
.section-divider {
	display: block;
	height: 1px;
	border: 0;
	background: #e6f2ff; /* light blue */
	/* align to scanner-range container content width (max 1400px with 2rem side padding) */
	width: calc(100% - 4rem);
	max-width: calc(1400px - 4rem);
	margin: 4rem auto;
}

/* =============================================================================
   Ninja Forms - Global Styles
   ============================================================================= */
.nf-form-layout,
.nf-form-cont,
.nf-form-wrap {
	margin: 0 auto 3rem;
	padding: 0 !important;
	max-width: 800px;
}
/* Ensure inner content doesn’t reintroduce padding */
.nf-form-content {
	padding: 0 !important;
}

/* Field containers and labels */
.nf-form-layout .nf-field-container {
	margin-bottom: 18px;
}
.nf-form-layout .nf-field-label label {
	display: block;
	margin-bottom: 6px;
	color: #111111;
	font-weight: 600;
}

/* Inputs, textareas, selects */
.nf-form-layout input[type="text"],
.nf-form-layout input[type="email"],
.nf-form-layout input[type="tel"],
.nf-form-layout input[type="number"],
.nf-form-layout input[type="url"],
.nf-form-layout input[type="password"],
.nf-form-layout textarea,
.nf-form-layout select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	background: #ffffff;
	color: #111111;
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.nf-form-layout textarea {
	min-height: 140px;
	resize: vertical;
}
.nf-form-layout input:focus,
.nf-form-layout textarea:focus,
.nf-form-layout select:focus {
	outline: none;
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(38, 85, 164, 0.15);
}

/* Checkboxes and radios */
.nf-form-layout input[type="checkbox"],
.nf-form-layout input[type="radio"] {
	accent-color: var(--primary-blue);
}

/* Submit button */
.nf-form-layout .nf-field-container .nf-field-element input[type="button"],
.nf-form-layout .nf-field-container .nf-field-element input[type="submit"],
.nf-form-layout .nf-field-container .submit-wrap input[type="submit"] {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--primary-blue);
	color: #ffffff;
	border: 1px solid var(--primary-blue);
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.nf-form-layout .nf-field-container .nf-field-element input[type="button"]:hover,
.nf-form-layout .nf-field-container .nf-field-element input[type="submit"]:hover,
.nf-form-layout .nf-field-container .submit-wrap input[type="submit"]:hover {
	background: #234a91;
	border-color: #234a91;
	transform: translateY(-1px);
}

/* Messages */
.nf-response-msg,
.nf-error-msg,
.nf-success-msg {
	margin-top: 10px;
	font-size: 0.95rem;
}
.nf-form-fields-required {
	display: none !important;
}
.nf-error-msg {
	color: #b42318; /* accessible red */
}
.nf-success-msg {
	color: var(--primary-blue);
}

/* Error state on fields */
.nf-error .ninja-forms-field,
.nf-error input[type="text"],
.nf-error input[type="email"],
.nf-error input[type="tel"],
.nf-error textarea,
.nf-error select {
	border-color: #b42318 !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

/* Required asterisk */
.nf-form-fields-required,
.nf-field-required {
	color: #6b7280;
	font-size: 0.9rem;
}
.packages-isotope-grid .grid-sizer { width: calc((100% - 4%) / 3); } /* 3 cols = 2 gutters */
.packages-isotope-grid .gutter-sizer { width: 2%; }
.packages-isotope-grid .setup-box {
    display: block;
	width: calc((100% - 4%) / 3); /* match grid-sizer for 3 cols */
	aspect-ratio: 1 / 1;
	margin: 0 0 24px; /* vertical spacing; horizontal handled by gutter */
	transition: opacity 0.3s ease; /* allow Isotope to control transform transition */
	will-change: transform, opacity;
	box-sizing: border-box;
}
.packages-isotope-grid.is-filtering .setup-box {
	/* During filtering, avoid hover transforms interfering with Isotope positioning */
	transition: opacity 0.25s ease;
}
.packages-isotope-grid.is-filtering .setup-box:hover {
	transform: none;
}
.packages-isotope-grid .setup-box:hover {
	/* Disable hover transform inside Isotope grid to prevent layout interference */
	transform: none;
}
@media (max-width: 1024px) {
	.packages-isotope-grid .gutter-sizer { width: 2%; }
	.packages-isotope-grid .grid-sizer { width: calc((100% - 2%) / 2); } /* 2 cols = 1 gutter */
	.packages-isotope-grid .setup-box { width: calc((100% - 2%) / 2); margin: 0 0 20px; }
}
@media (max-width: 640px) {
	.packages-isotope-grid .gutter-sizer { width: 0; }
	.packages-isotope-grid .grid-sizer { width: 100%; }
	.packages-isotope-grid .setup-box { width: 100%; margin: 0 0 16px; }
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Visually nudge homepage slide content upward to account for curved bottom */
@media (min-width: 900px) {
    .homepage-slider-wrapper .slide-content {
        transform: translateY(-24px);
    }
}

.slide-text {
    flex: 0 0 45%;
    color: #fff;
}

.slide-text h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: clamp(1rem, 2vw, 2rem);
    color: #fff;
}

.slide-description {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

.slide-button-wrapper {
    margin-top: 2rem;
}

.slide-button {
    display: inline-block;
    padding: clamp(0.75rem, 1vw, 1.25rem) clamp(1.5rem, 2vw, 2.5rem);
    background: #fff;
    color: var(--primary-blue);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.slide-button:hover {
    transform: translateY(-2px);
}

.slide-image {
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make homepage slider image feel like content-row image */
.homepage-slider-wrapper .slide-image-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Swiper Pagination Styling - Updated */
.homepage-swiper .swiper-pagination,
.testimonial-swiper .swiper-pagination {
    bottom: 2rem !important;
    text-align: right !important;
    padding-right: 2rem !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    gap: 4px !important;
}

.homepage-swiper .swiper-pagination {
    bottom: 5rem !important;
}

.swiper-pagination-bullet {
    width: 20px !important;
    height: 20px !important;
    margin: 0 3px !important;
    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
}

/* Ensure pagination is visible and properly spaced */
.homepage-slider-wrapper .swiper-pagination,
.testimonial-slider-wrapper .swiper-pagination {
    z-index: 10;
    position: absolute !important;
    display: flex !important;
    gap: 1px !important;
    justify-content: flex-end !important;
}

/* Responsive adjustments for pagination */
@media (max-width: 768px) {
    .homepage-swiper .swiper-pagination,
    .testimonial-swiper .swiper-pagination {
        padding-right: 1rem !important;
        bottom: 1.5rem !important;
        gap: 3px !important;
    }

    .swiper-pagination-bullet {
        width: 18px !important;
        height: 18px !important;
        margin: 0 2px !important;
    }

    .homepage-slider-wrapper {
        -webkit-mask-image: none;
        mask-image: none;
        margin-bottom: 50px;
        height: auto; /* allow content to define height on mobile */
    }

    /* Homepage Slider (Mobile): column layout, centred with side padding */
    .slide-content {
        flex-direction: column;
        padding: 20px 15px 64px; /* add bottom padding so pagination clears image */
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        text-align: center; /* ensure title/button centre visually */
    }

    .slide-text {
        width: 100%;
        text-align: center;
        padding: 0 1rem;
        flex: 0 0 auto; /* prevent stretching that pushes image down */
    }

    /* Add spacing below the button on mobile */
    .slide-button-wrapper { margin-bottom: 2rem; }

    .slide-description { display: none; }

    /* Homepage Slider (Mobile): full-width rectangular image, keep desktop treatment */
    .slide-image {
        flex: none;
        width: 100%;
        height: auto;
        border-radius: 0;
        overflow: visible;
        background: none;
        margin: 16px auto 0;
    }
    .homepage-slider-wrapper .slide-image-img {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 12px; /* keep desktop radius */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* keep desktop shadow */
        display: block;
    }

    /* Centre pagination horizontally on mobile */
    .homepage-swiper .swiper-pagination {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding-right: 0 !important; /* override right alignment from desktop */
    }
}


/* Testimonial Slider
--------------------------------------------- */
.testimonial-slider-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-top: 4em;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 60vh;
    min-height: 400px;
    background-color: var(--primary-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 1;
}

.testimonial-swiper {
    width: 100%;
    flex: 1;
    position: relative;
    height: 100%;
}

.swiper-wrapper {
    height: 100%;
}

.testimonial-slide {
    height: 100%;
    display: flex;
    align-items: center;
}

.testimonial-slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-quote {
    font-size: 2rem;
    line-height: 1.4;
    color: #fff;
    font-style: italic;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-author {
    font-size: 1.375rem;
    color: #fff;
    text-align: right;
    align-self: flex-end;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

/* Active slide animations */
.swiper-slide-active .testimonial-quote,
.swiper-slide-active .testimonial-author {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .testimonial-slider-wrapper {
        height: 60vh;
    }

    .testimonial-quote {
        font-size: 1.25rem;
    }

    .testimonial-author {
        font-size: 1.15rem;
    }
}

/* Header Styles
--------------------------------------------- */
.site-header {
    position: relative;
    z-index: 100;
}

.main-navigation {
    position: relative;
    z-index: 999;
}

/* Homepage Headline Styles */
.homepage-headline-section {
    padding: 0rem 0;
    position: absolute;
    top: 17px;
    width: 65%; /* Narrower to avoid logo and burger clickability */
    margin: 0px 17.5%; /* Center the narrower headline */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 998; /* Below navigation overlay and menu */
}

.homepage-headline-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.homepage-headline {
    color: white;
    font-size: 1.35rem;
    font-weight: 400;
    margin: 1rem 0;
    text-align: center;
    line-height: 1.3em;
}

/* Ensure phone links in the homepage headline are always white */
.homepage-headline a,
.homepage-headline a:visited,
.homepage-headline a:hover,
.homepage-headline a:active,
.homepage-headline a:focus {
    color: #fff !important;
    text-decoration: none;
}

/* Fade out headline when navigation is open */
body.menu-open .homepage-headline-section {
    opacity: 0;
}

/* Hide homepage headline on smaller screens */
@media (max-width: 899px) {
    .homepage-headline-section {
        display: none;
    }
}

/* Site Content Container */
#content {
    position: relative;
    z-index: 1;
}

/* Footer Styles
--------------------------------------------- */
.site-footer {
    background-color: var(--primary-blue);
    padding: 2rem 0;
    color: #fff;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-size: 0.9rem;
    max-width: 600px;
}

.footer-navigation {
    margin-left: 2rem;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
}

.footer-menu li {
    margin: 0;
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

.footer-menu a:hover {
    opacity: 0.8;
}

/* Responsive footer adjustments */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .footer-navigation {
        margin-left: 0;
    }

    .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
    }
}

/* Build Visualization Styles */
.build-component-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: white;
}

/* Specific positioning for each component type */
.build-component-image.scanner {
    margin-top: -30px;
    z-index: 3;
}

.build-component-image.computer {
    margin-top: -40px;
    margin-left: 40px;
    z-index: 2;
}

.build-component-image.trolley {
    margin-top: -50px;
    margin-left: -30px;
    z-index: 1;
}

.build-component-image.monitor {
    margin-top: -45px;
    margin-left: 20px;
    z-index: 4;
}

.build-component-image.active {
    opacity: 1;
    transform: translateY(0);
}

/* Container adjustments to accommodate overlapping */
.build-images {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .build-component-image {
        width: 150px;
        height: 150px;
    }
    
    .build-component-image.scanner {
        margin-top: -20px;
    }
    
    .build-component-image.computer {
        margin-top: -30px;
        margin-left: 30px;
    }
    
    .build-component-image.trolley {
        margin-top: -35px;
        margin-left: -20px;
    }
    
    .build-component-image.monitor {
        margin-top: -30px;
        margin-left: 15px;
    }
}

/* Scanner Range Section
--------------------------------------------- */
.scanner-range-container {
    max-width: 1400px;
    margin: 0rem auto 4em;
    padding: 0 2rem;
}

.scanner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.scanner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.scanner-card:hover {
    transform: translateY(-8px);
}

.scanner-image-wrapper {
    width: 80%;
    aspect-ratio: 1;
    margin: 0 auto 1.5rem auto;
    border-radius: 100%;
    border: 1px solid var(--primary-blue);
    overflow: hidden;
}

.scanner-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.scanner-card:hover .scanner-image {
    transform: scale(1.05);
}

.scanner-title {
    color: #111;
    font-size: 1.25rem;
    margin: 0 0 1rem;
    text-align: center;
}

.scanner-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.scanner-button:hover {
    background: #234a91;
}

/* Scanner Range Section - Default (Homepage) Layout */
.scanner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

/* Scanner Range Section - Single Scanner Page Layout (unified to 4 columns) */
.single-scanners .scanner-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .scanner-grid,
    .single-scanners .scanner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .scanner-grid,
    .single-scanners .scanner-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Scanner Showcase Styles */
.scanner-showcase {
    padding: 2.5rem 0;
}

/* Scanner grid uses global flex styles */

.scanner-grid .scanner-card {
	flex: 0 1 calc(25% - 2rem);
	max-width: calc(25% - 2rem);
}

@media (max-width: 1024px) {
	.scanner-grid .scanner-card {
		flex-basis: calc(50% - 2rem);
		max-width: calc(50% - 2rem);
	}
}

@media (max-width: 600px) {
	.scanner-grid .scanner-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* WooCommerce shop uses global scanner-grid flex styles */

/* (card sizing handled by global .scanner-grid .scanner-card rules) */

/* (breakpoints inherit global rules) */

/* (mobile breakpoint inherits global rules) */



.showcase-image-wrapper {
    margin: -60px 0;
}

/* Original Showcase Row Styles */
.showcase-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.showcase-row:last-child {
    margin-bottom: 0;
}

/* Three Column Showcase Layout - Fixed Width Columns with Center Background */
.showcase-row-three-column {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4rem 0;
    min-height: 400px; /* Give space for background image */
}

/* Center Image as Background */
.scanner-showcase.has-center-bg {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 450px;
    position: relative;
}

/* Fixed width columns positioned at edges */
.showcase-row-three-column .showcase-left,
.showcase-row-three-column .showcase-right {
    width: 350px; /* Fixed width for consistent layout */
    flex-shrink: 0; /* Prevent shrinking */
}

.showcase-row-three-column .showcase-left {
    text-align: left;
}

.showcase-row-three-column .showcase-right {
    text-align: right;
}

.showcase-item {
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.showcase-item-inner {
    transition: transform 0.3s ease;
}

.showcase-item:hover .showcase-item-inner {
    transform: translateY(-8px);
}

/* Showcase Text Styles */
.showcase-title {
    color: var(--primary-blue);
    font-size: 3rem;
    font-weight: 100; /* Thin font variation */
    margin: 0 0 1rem;
    line-height: 1.2;
}

.showcase-feature {
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin: 0 0 1rem;
    line-height: 1.35em;
}

.showcase-description {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Original Template Showcase Connecting Lines */
.showcase-item {
    position: relative;
}

.showcase-connecting-line {
    position: absolute;
    border-top: 2px dashed var(--primary-blue);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

/* Top row connecting lines */
.showcase-line-top-1 {
    /* Top left box - diagonal down right */
    width: 400px;
    height: 2px;
    bottom: -250px;
    right: 0px;
    transform: rotate(65deg);
    transform-origin: right;
}

.showcase-line-top-2 {
    /* Top middle box - straight down */
    width: 2px;
    height: 200px;
    bottom: -200px;
    left: 50%;
    border-top: none;
    border-left: 2px dashed var(--primary-blue);
}

.showcase-line-top-3 {
    /* Top right box - diagonal down left */
    width: 400px;
    height: 2px;
    bottom: -250px;
    right: 0px;
    transform: rotate(-65deg);
    transform-origin: left;
}

/* Bottom row connecting lines */
.showcase-line-bottom-4 {
    /* Bottom left box - diagonal up right */
    width: 300px;
    height: 2px;
    top: -200px;
    right: 20px;
    transform: rotate(-65deg);
    transform-origin: right;
}

.showcase-line-bottom-5 {
    /* Bottom middle box - straight up */
    width: 2px;
    height: 200px;
    top: -200px;
    left: 50%;
    border-top: none;
    border-left: 2px dashed var(--primary-blue);
}

.showcase-line-bottom-6 {
    /* Bottom right box - diagonal up left */
    width: 300px;
    height: 2px;
    top: -200px;
    right: -20px;
    transform: rotate(65deg);
    transform-origin: left;
}



/* Responsive adjustments */
@media (max-width: 1024px) {
    .showcase-row-three-column {
        gap: 1.5rem;
    }
    
    .showcase-title {
        font-size: 1.75rem;
    }
    
    .showcase-feature {
        font-size: 1.35rem;
    }

    .scanner-showcase {
        padding: 3rem 0;
    }
    
    .showcase-row {
        gap: 1.5rem;
    }
    
    .showcase-item {
        padding: 1.5rem;
    }
}

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

    .showcase-row-three-column {
        flex-direction: column;
        gap: 2rem;
        min-height: 200px; /* Reduce height on mobile */
    }
    
    /* Hide background image on mobile for better readability */
    .scanner-showcase.has-center-bg {
        background-image: none !important;
    }
    
    .showcase-row-three-column .showcase-left,
    .showcase-row-three-column .showcase-right {
        align-self: center; /* Center both columns on mobile */
        text-align: center; /* Center text content on mobile */
    }
    
    .showcase-title {
        font-size: 1.5rem;
    }

    /* Hide connecting lines on mobile */
    .showcase-connecting-line {
        display: none;
    }
}

@media (max-width: 480px) {
    .scanner-showcase {
        padding: 2rem 0;
    }
    

    
    .showcase-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }
}

/* Scanner Header Styles */
.scanner-header {
    padding: 2rem 0 0rem;
    text-align: center;
}



.scanner-title {
    color: var(--primary-blue);
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 2rem;
}

.scanner-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 4rem;
}

/* Video Section Styles */
.scanner-video-section {
    background-color: #000;
    padding: 4rem 0;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-video-section .site-container {
    max-width: 1800px; /* Override container width for video section */
}

/* YouTube Embed */
.youtube-embed {
    position: relative;
    width: 900px;
    aspect-ratio: 16/9;
    border: 3px solid #fff; /* White border for testing */
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

.youtube-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* MP4 Video */
.mp4-video {
    position: relative;
    width: 900px;
    margin: 0 auto;
}

.mp4-video video {
    width: 100%;
    height: auto;
    border: 3px solid #fff; /* White border for testing */
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .youtube-embed,
    .mp4-video {
        width: 100%;
        max-width: 90vw;
    }
}

@media (max-width: 768px) {
    .scanner-video-section {
        padding: 2rem 1rem;
    }
    
    .youtube-embed,
    .mp4-video {
        width: 100%;
        max-width: 95vw;
    }
    
    .youtube-embed,
    .mp4-video video {
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .scanner-video-section {
        padding: 1.5rem 0.5rem;
    }
    
    .youtube-embed,
    .mp4-video {
        width: 100%;
        max-width: 98vw;
    }
    
    .youtube-embed,
    .mp4-video video {
        border-width: 1px;
        border-radius: 4px;
    }
}

@media (max-width: 768px) {
    .scanner-header .scanner-title-headline-1 {
        font-size: 1.8em;
        margin: -10px 0 10px 0;
    }
    
    .scanner-header .scanner-title-headline-2 {
        font-size: 1.4em;
        margin: 0 0 25px 0;
    }
}

@media (max-width: 480px) {
    .scanner-header .scanner-title-headline-1 {
        font-size: 1.6em;
        margin: -5px 0 10px 0;
    }
    
    .scanner-header .scanner-title-headline-2 {
        font-size: 1.2em;
        margin: 0 0 20px 0;
    }


}

/* Scanner title on single scanner page */
.scanner-header .scanner-title {
    color: var(--primary-blue);
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin: 50px 0 2rem 0;
}

/* Scanner title headlines for Original Template */
.scanner-header .scanner-title-headline-1 {
    font-size: 2em;
    font-weight: 500;
    color: #6c757d;
    margin: -15px 0 15px 0;
    line-height: 1.4;
    font-style: italic;
}

.scanner-header .scanner-title-headline-2 {
    font-size: 1.6em;
    font-weight: 400;
    color: #6c757d;
    margin: 0 0 30px 0;
    line-height: 1.4;
    font-style: italic;
}

/* Scanner titles in the homepage range section */
.scanner-range-container .scanner-title {
    color: #111;
    font-size: 1.1rem;
    margin: 0 0 1rem;
    text-align: center;
}

/* Button Styles
--------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: transparent;
}

/* Primary button - blue outline on light backgrounds */
.btn-primary {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btn-primary:hover {
    background-color: var(--primary-blue);
    color: #fff;
}

/* Light button - white outline on dark/colored backgrounds */
.btn-light {
    border: 1px solid #fff;
    color: #fff;
}

.btn-light:hover {
    background-color: #fff;
    color: var(--primary-blue);
}

/* Ensure visited state does not alter button appearance globally */
.btn:visited { text-decoration: none; }
.btn-primary:link,
.btn-primary:visited { color: var(--primary-blue); border-color: var(--primary-blue); }
.btn-light:link,
.btn-light:visited { color: #fff; border-color: #fff; }
.btn-secondary:link,
.btn-secondary:visited { background: #ffffff; color: var(--primary-blue); border-color: var(--primary-blue); }
.btn-outline:link,
.btn-outline:visited { background: transparent; color: var(--primary-blue); border-color: var(--primary-blue); }

/* Ensure hover wins over visited when link has been visited */
.btn-primary:visited:hover { background-color: var(--primary-blue); color: #fff; }
.btn-light:visited:hover { background-color: #fff; color: var(--primary-blue); }
.btn-secondary:visited:hover { background: var(--primary-blue); color: #ffffff; }
.btn-outline:visited:hover { background: var(--primary-blue); color: #ffffff; }

/* Global Button State Normalisation (LVHA with final hover precedence) */
.btn, .btn:link, .btn:visited { text-decoration: none; }
.btn-primary, .btn-primary:link, .btn-primary:visited { color: var(--primary-blue); border-color: var(--primary-blue); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-blue); color: #fff !important; }
.btn-light, .btn-light:link, .btn-light:visited { color: #fff; border-color: #fff; }
.btn-light:hover, .btn-light:focus { background-color: #fff; color: var(--primary-blue) !important; }
.btn-secondary, .btn-secondary:link, .btn-secondary:visited { background: #ffffff; color: var(--primary-blue); border-color: var(--primary-blue); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--primary-blue); color: #ffffff !important; }
.btn-outline, .btn-outline:link, .btn-outline:visited { background: transparent; color: var(--primary-blue); border-color: var(--primary-blue); }
.btn-outline:hover, .btn-outline:focus { background: var(--primary-blue); color: #ffffff !important; }

/* Floating Circles Background */
.floating-circles-bg {
    position: relative;
}

/* Ensure configurator headers stay consistent with unified system */
.floating-circles-bg.site-header {
    /* Header baseline below overlay/menu */
    position: relative !important;
    z-index: 800 !important;
}

/* Header Configurator Text Styling */
.header-configurator-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 200; /* Above header but below navigation */
    pointer-events: none; /* Don't interfere with logo/burger clicks */
}

/* Deprecated overlay heading for configurator (content now moved into page body) */
.header-configurator-text { display: none !important; }

/* Configurator page title inside options column */
.configurator-page-title { margin: 0 0 20px; text-align: center; }

/* Deprecated: .site-header-phones (replaced by .site-controls-phones) */
.site-header-booking {
    margin-top: 4px;
    font-size: 0.9rem;
}
.site-header-booking a,
.site-header-booking a:link,
.site-header-booking a:visited,
.site-header-booking a:active,
.site-header-booking a:focus {
    color: #fff !important;
    text-decoration: none;
}

/* Make header booking link look like a white-outlined button */
.site-header-booking a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}
.site-header-booking a:hover,
.site-header-booking a:focus {
    background: #fff;
    color: var(--primary-blue) !important;
}

/* WooCommerce Cart/Checkout deposit UI */
.scanners-deposit-label input[type="checkbox"] {
    transform: scale(1.2);
}
.scanners-deposit-strong {
    background: #fff;
    color: var(--primary-blue);
    padding: 2px 6px;
    border-radius: 4px;
}
.scanners-deposit-highlight {
    margin-top: 10px;
    background: rgba(255,255,255,0.15);
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
}
.cart-collaterals .scanners-deposit-highlight {
    background: #e1f0ff;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}
.scanners-deposit-head {
    font-weight: 700;
    margin-bottom: 4px;
}
.scanners-deposit-body {
    line-height: 1.4;
}

/* Big deposit banner */
/* .scanners-deposit-banner and related styles temporarily disabled */

/* Fun reveal: Dim base totals when deposit active */
/* Strike-through for classic checkout only */
body.scanners-deposit-on:not(.is-wc-blocks) .cart_totals .cart-subtotal,
body.scanners-deposit-on:not(.is-wc-blocks) .cart_totals .order-total,
body.scanners-deposit-on:not(.is-wc-blocks) .wc-block-components-totals-item {
    opacity: .5;
    transition: opacity .2s ease;
}
body.scanners-deposit-on:not(.is-wc-blocks) .cart_totals .order-total span,
body.scanners-deposit-on:not(.is-wc-blocks) .cart_totals .cart-subtotal span,
body.scanners-deposit-on:not(.is-wc-blocks) .wc-block-components-totals-item span {
    text-decoration: line-through;
}

/* Do NOT strike-through our explicit Deposit row and VAT row on checkout */
body.scanners-deposit-on .scanners-deposit-pay-today th,
body.scanners-deposit-on .scanners-deposit-pay-today td,
body.scanners-deposit-on .scanners-deposit-pay-today span,
body.scanners-deposit-on .cart_totals .fee td:has(.fee-name:contains('VAT (20%)')) span {
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Checkout: Pay today row styling */
.scanners-deposit-pay-today th,
.scanners-deposit-pay-today td {
    border-top: 2px solid #eee;
    padding-top: 10px;
}
.scanners-deposit-pay-today td strong {
    color: var(--primary-blue);
}

/* WooCommerce cart totals layout overrides - make totals full width */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
    float: none !important;
    width: 100% !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
    float: none !important;
    width: 100% !important;
}
/* Removed legacy .site-header-phones link styles and spacing */
@media (max-width: 899px) {
    .slide-menu-contacts { display: block !important; }
}

/* Slide menu contacts block (hidden by default, toggled on mobile) */
.slide-menu-contacts {
    display: none;
    margin: 16px 0 10px 0;
    padding: 0 45px 20px 20px; /* match menu item right padding (45px) */
    border-top: 1px solid rgba(255,255,255,0.2);
    text-align: right;
}
.slide-menu-contacts .phone-prompt { display: block; margin: 14px 0 6px 0; font-weight: 600; color: #fff; }
.slide-menu-contacts .slide-phones a { color: #fff; text-decoration: none; display:block; margin-top: 6px; }
.slide-menu-contacts .slide-booking a { display:inline-block; margin-top: 10px; padding: 8px 14px; border:1px solid #fff; border-radius: 50px; color:#fff; text-decoration:none; transition: all .3s ease; text-align: center; line-height: 1.2; }
.slide-menu-contacts .slide-booking a:hover, .slide-menu-contacts .slide-booking a:focus { background:#fff; color: var(--primary-blue); }

/* First mobile breakpoint tweaks */
@media (max-width: 480px) {
    .slide-menu-contacts { padding: 0 15px 20px 20px; }
    /* Reinstate button styling for booking link on smallest breakpoint */
    .slide-menu-contacts .slide-booking a {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 14px;
        border: 1px solid #fff;
        border-radius: 50px;
        color: #fff;
        text-decoration: none;
        transition: all .3s ease;
        text-align: center;
        line-height: 1.2;
        background: transparent;
    }
    .slide-menu-contacts .slide-booking a:hover,
    .slide-menu-contacts .slide-booking a:focus {
        background: #fff;
        color: var(--primary-blue);
    }
}

/* Booking hover handled globally above */

/* ==========================================================================
   DEFAULT POST & PAGE LAYOUTS - Borrowed from Package Structure
   NOTE: Excludes WooCommerce pages (checkout, cart, my-account, etc.)
   ========================================================================== */

/* Default Page & Post Header Section - EXCLUDES WooCommerce pages */
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-section {
    padding: 40px 0 60px;
    background: #f8f9fa;
}

/* Container and Grid - EXCLUDES WooCommerce pages */
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 3rem;
    align-items: start;
}

/* Default Image Column */
.default-image-column {
    position: relative;
}

.default-featured-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.default-main-image {
    width: 100%;
    height: auto;
    max-height: 300px; /* Prevent massive images */
    object-fit: cover;
    display: block;
}

/* Default Content Column */
.default-content-column {
    padding: 0;
}

.default-title {
    color: var(--grey-dark);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.default-description {
    color: var(--grey-dark);
    font-size: 1.1rem;
    line-height: 1.7;
}

.default-description p:first-child {
    margin-top: 0;
}

.default-description p:last-child {
    margin-bottom: 0;
}

/* Entry Meta Styling */
.entry-meta {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #666;
}

/* Responsive Design - EXCLUDES WooCommerce pages */
@media (max-width: 768px) {
    body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-container {
        padding: 0 1rem;
    }
    
    body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-header-section {
        padding: 30px 0 40px;
    }
    
    body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-title {
        font-size: 2rem;
    }
    
    body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .default-main-image {
        max-height: 250px;
    }
}

.floating-circles-bg::before {
    content: '';
    position: absolute;
    bottom: -260px;
    right: 0;
    width: 1000px;
    height: 1000px;
    pointer-events: none;
    opacity: 0.08;
    z-index: 1; /* Keep decorative circles behind everything */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='100' cy='50' r='40'/%3E%3Ccircle cx='200' cy='50' r='40'/%3E%3Ccircle cx='300' cy='50' r='40'/%3E%3Ccircle cx='400' cy='50' r='40'/%3E%3Ccircle cx='500' cy='50' r='40'/%3E%3Ccircle cx='150' cy='150' r='35'/%3E%3Ccircle cx='250' cy='150' r='35'/%3E%3Ccircle cx='350' cy='150' r='35'/%3E%3Ccircle cx='450' cy='150' r='35'/%3E%3Ccircle cx='100' cy='250' r='30'/%3E%3Ccircle cx='200' cy='250' r='30'/%3E%3Ccircle cx='300' cy='250' r='30'/%3E%3Ccircle cx='400' cy='250' r='30'/%3E%3Ccircle cx='500' cy='250' r='30'/%3E%3Ccircle cx='150' cy='350' r='25'/%3E%3Ccircle cx='250' cy='350' r='25'/%3E%3Ccircle cx='350' cy='350' r='25'/%3E%3Ccircle cx='450' cy='350' r='25'/%3E%3Ccircle cx='100' cy='450' r='40'/%3E%3Ccircle cx='200' cy='450' r='40'/%3E%3Ccircle cx='300' cy='450' r='40'/%3E%3Ccircle cx='400' cy='450' r='40'/%3E%3Ccircle cx='500' cy='450' r='40'/%3E%3Ccircle cx='150' cy='550' r='35'/%3E%3Ccircle cx='250' cy='550' r='35'/%3E%3Ccircle cx='350' cy='550' r='35'/%3E%3Ccircle cx='450' cy='550' r='35'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    transform-origin: center;
    padding: 220px;
    transform: rotate(135deg);
}

/* Ensure content stays above circles */
.homepage-slider-wrapper .slide-content,
.testimonial-slider-wrapper .testimonial-slide-content {
    position: relative;
    z-index: 2;
}

/* Scanner Content Rows */
.scanner-content-rows {
    background-color: #f4f4f4;
    padding: 4rem 0;
}

.content-row {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    gap: 3rem;
    align-items: center;
}

/* First row (image left) */
.content-row:nth-child(odd) {
    grid-template-columns: 1fr 2fr;
}

/* Second row (text left) */
.content-row:nth-child(even) {
    grid-template-columns: 2fr 1fr;
}

/* Text content styling */
.content-row-text {
    padding: 0 2rem;
}

.content-row-subheading {
    color: #666;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0.5rem 0 1rem 0;
}

/* Image styling */
.content-row-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-row-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .content-row {
        padding: 2rem;
        gap: 2rem;
    }
    
    .content-row-text {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .scanner-content-rows {
        padding: 2rem 0;
    }

    .content-row,
    .content-row:nth-child(odd),
    .content-row:nth-child(even) {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .content-row-text {
        padding: 0;
        order: 2;
    }

    .content-row-image {
        order: 1;
    }
}

/* Package Single Page Styles
--------------------------------------------- */

/* Package Header Section */
.package-header-section {
    padding: 80px 0;
    background: #f8f9fa;
    margin-top: -60px;
}

.package-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.package-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.package-image-column {
    text-align: center;
    align-self: start;
}

.package-featured-image {
    position: relative;
}

.package-main-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.package-content-column {
    padding-left: 2rem;
}

.package-title {
    color: var(--primary-blue);
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    margin-bottom: 4.5rem;
    line-height: 1.2;
}

.package-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 2rem;
}

/* Package Pricing Summary */
.package-pricing-summary {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pricing-comparison {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.original-price,
.package-price-main,
.package-price-only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.original-price {
    border-bottom: 1px solid #eee;
}

.price-label {
    font-size: 1rem;
    color: #666;
    font-weight: 500;
}

.price-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.price-value.original {
    color: #856404;
    text-decoration: line-through;
    opacity: 0.8;
}

.price-value.package {
    color: var(--primary-blue);
    font-size: 1.5rem;
}

.savings-highlight {
    background: #d4edda;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-top: 1rem;
}

.savings-text {
    display: block;
    font-size: 0.9rem;
    color: #155724;
    margin-bottom: 0.5rem;
}

.savings-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #28a745;
    display: block;
}

.savings-percentage {
    font-size: 0.9rem;
    color: #155724;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

/* Package Components Section */
.package-components-section {
    background-color: #fff;
    padding: 4rem 0;
}

.package-components-container {
    margin-top: 2rem;
}

.package-image-column .package-components-container {
    padding: 0;
}

.package-image-column .section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    color: #333;
}

.package-components-circles {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.package-image-column .package-components-circles {
    gap: 1.5rem;
    justify-content: center;
}

/* Package links (All Packages / Custom Configurator) */
.package-links { display: flex; gap: 12px; margin-top: 1.5rem; justify-content: center; }
.package-links a.btn { display: inline-block; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.btn-secondary { background: #ffffff; color: var(--primary-blue); border: 2px solid var(--primary-blue); }
.btn-secondary:hover { background: var(--primary-blue); color: #ffffff; }
.btn-outline { background: transparent; color: var(--primary-blue); border: 2px solid var(--primary-blue); }
.btn-outline:hover { background: var(--primary-blue); color: #ffffff; }

/* Desktop shows the inline links; mobile shows the bottom links */
.package-links-desktop { display: flex; }
.package-links-mobile { display: none; }

@media (max-width: 768px) {
    .package-links-desktop { display: none; }
    .package-links-mobile { display: flex; margin-top: 2rem; }
}

.component-circle-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.component-circle-item:hover {
    transform: translateY(-8px);
}

.component-circle-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
}

.package-image-column .component-circle-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 0.75rem;
}

.component-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.package-image-column .component-circle {
    width: 100px;
    height: 100px;
}

.component-circle-item:hover .component-circle {
    transform: scale(1.05);
}

.component-circle-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    border: 2px dashed #6c757d;
}

.component-placeholder-text {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   INFO ICON SYSTEM - Unified Info Icons for All Templates
   ========================================================================== */

/* 
 * This section handles all info icons throughout the theme.
 * Used by: single-packages.php (component circles), content-single-product.php (configurator options)
 * Default size: 30px for standard contexts, with responsive scaling
 */

/* Base Info Icon Styling */
.info-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.info-icon:hover {
    background: #1e4a8c;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.info-icon:active {
    transform: scale(0.95);
}

/* Context-Specific Positioning */

/* Component Circle Info Icons (Package Pages) */
.component-circle-wrapper .info-icon {
    top: -5px;
    right: -5px;
}

/* Package Image Column - Smaller Icons */
.package-image-column .component-circle-wrapper .info-icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
    top: -3px;
    right: -3px;
}

/* Configurator Option Info Icons */
.config-option .info-icon {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    border: 1px solid #fff;
    background: rgba(43, 90, 180, 0.9);
}

.component-circle-label {
    text-align: center;
}

.component-type {
    display: block;
    font-size: 0.8rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.component-name {
    display: block;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
    max-width: 14ch; /* keep labels compact to avoid pushing circles */
    margin-left: auto;
    margin-right: auto;
    word-break: normal;
    overflow-wrap: anywhere;
}

.package-image-column .component-name {
    font-size: 0.8rem;
}

.package-image-column .component-type {
    font-size: 0.75rem;
}

/* Package Add to Cart Section */
.package-cart-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.package-cart-form {
    position: relative;
}

.package-add-to-cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.2);
}

.package-add-to-cart-btn:hover {
    background: linear-gradient(135deg, #005a87 0%, #003d5c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 124, 186, 0.3);
    color: #fff;
}

.package-add-to-cart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.2);
}

.package-add-to-cart-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.package-add-to-cart-btn .btn-text {
    flex: 1;
    text-align: left;
}

.package-add-to-cart-btn .btn-price {
    font-weight: 700;
    font-size: 1.2rem;
    background: transparent;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
}

.package-add-to-cart-btn .btn-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: inherit;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

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

.package-cart-message {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}

.package-cart-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.package-cart-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Success message button on Packages: blue outline → blue filled on hover */
.package-cart-message.success a.btn,
.package-cart-message.success a.btn:link,
.package-cart-message.success a.btn:visited {
    background: transparent;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}
.package-cart-message.success a.btn:hover,
.package-cart-message.success a.btn:focus,
.package-cart-message.success a.btn:visited:hover {
    background: var(--primary-blue) !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .package-add-to-cart-btn {
        font-size: 1rem;
        padding: 0.9rem 1.2rem;
    }
    
    .package-add-to-cart-btn .btn-price {
        font-size: 1.1rem;
        padding: 0.25rem 0.6rem;
    }
}

/* Components Error State */
.components-error {
    text-align: center;
    padding: 2rem;
    background: #fff3cd;
    border: 1px solid #ffecb5;
    border-radius: 8px;
    margin: 2rem 0;
}

.components-error p {
    color: #856404;
    font-size: 1rem;
    margin: 0;
}

/* ==========================================================================
   MODAL POPUP SYSTEM - Unified System for All Info Popups
   ========================================================================== */

/* 
 * This section handles all modal popups throughout the theme.
 * Used by: single-packages.php, content-single-product.php (configurator)
 * JavaScript handlers: package-info.js, configurator.js
 */

/* Modal Overlay - Always positioned behind the modal */
.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1999; /* Above all navigation elements (1002) but behind modal */
    cursor: pointer; /* Indicates clickable to close */
}

.info-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Main Modal Container */
.info-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2000; /* Above all navigation elements and overlay */
    cursor: default; /* Prevent accidental closes when clicking modal content */
}

.info-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Modal Content Container */
.info-popup-content {
    position: relative;
}

/* Close Button */
.info-popup-close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.info-popup-close:hover {
    background: #c82333;
    transform: scale(1.1);
}

.info-popup-close:active {
    transform: scale(0.95);
}

/* Modal Image */
.info-popup-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modal Typography */
.info-popup-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.info-popup-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 1.5rem;
    text-align: left;
}

.info-popup-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    text-align: center;
}

.info-popup-link {
    display: inline-block;
    color: var(--primary-blue);
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
    transition: color 0.3s ease;
}

.info-popup-link:hover {
    text-decoration: underline;
    color: #1e4a8c;
}

/* Configurator-specific Select Button */
.info-popup-select {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.info-popup-select:hover {
    background: #1e4a8c;
    transform: translateY(-1px);
}

.info-popup-select.deselect-button {
    background: #dc3545;
}

.info-popup-select.deselect-button:hover {
    background: #c82333;
}

/* Body scroll prevention when popup is open */
body.popup-open {
    overflow: hidden;
    padding-right: 0; /* Prevent layout shift on scroll bar removal */
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .info-popup {
        width: 95%;
        padding: 1.5rem;
        max-height: 95vh;
    }
    
    .info-popup-image {
        width: 150px;
        height: 150px;
    }
    
    .info-popup-title {
        font-size: 1.25rem;
    }
    
    .info-popup-close {
        top: -0.5rem;
        right: -0.5rem;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* Section Titles */
.section-title {
    text-align: center;
    color: var(--primary-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Responsive Adjustments for Packages */
@media (max-width: 1024px) {
    .package-header-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .package-title-mobile { display: block; }
}

@media (max-width: 768px) {
    .package-header-section {
        padding: 2rem 0;
        margin-top: -20px;
    }
    .package-header-container {
        padding: 0 1rem;
    }
    .package-title-mobile {
        display: block;
        margin: 0 0 1rem;
        text-align: left;
        padding: 0 1rem;
    }
    .package-content-column .package-title { display: none; }
}

@media (max-width: 480px) {
    .package-header-container,
    .package-components-container {
        padding: 0 1rem;
    }
    
    .package-components-circles {
        flex-direction: column;
        gap: 2rem;
    }
    
    .component-circle-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .component-circle {
        width: 80px;
        height: 80px;
    }
    
    /* Smallest mobile info icon adjustments */
    .component-circle-wrapper .info-icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    
    .package-pricing-summary {
        padding: 1rem;
    }
}

/*--------------------------------------------------------------
# KM Template 1 Styles
--------------------------------------------------------------*/



/* KM Template 1 - Hero Section */
.scanner-km-template-1 .km-hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0 80px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Video Background Styling */
.scanner-km-template-1 .km-hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.scanner-km-template-1 .km-hero-video-background .youtube-background,
.scanner-km-template-1 .km-hero-video-background .hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.scanner-km-template-1 .km-hero-video-background .youtube-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.scanner-km-template-1 .km-hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Hero container now uses .site-container - keeping z-index for video overlay */
.scanner-km-template-1 .km-hero-section .site-container {
    position: relative;
    z-index: 3;
}

.scanner-km-template-1 .km-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Full-width centered text layout when video background is present */
.scanner-km-template-1 .km-hero-section:has(.km-hero-video-background) .km-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    max-width: 1050px;
    margin: 0 auto;
}

/* Hide hero image when video background is present to focus on text */
.scanner-km-template-1 .km-hero-section:has(.km-hero-video-background) .km-hero-image {
    display: none;
}

.scanner-km-template-1 .km-hero-text {
    padding-right: 20px;
}

/* Remove padding when full-width layout is active */
.scanner-km-template-1 .km-hero-section:has(.km-hero-video-background) .km-hero-text {
    padding-right: 0;
    width: 100%;
}

.scanner-km-template-1 .km-hero-headline {
    font-size: 3.5em;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Fallback styling when no video background */
.scanner-km-template-1 .km-hero-section:not(:has(.km-hero-video-background)) .km-hero-headline {
    color: #333;
    text-shadow: none;
}

/* Banner background styling when no video is provided */
.scanner-km-template-1 .km-hero-section.has-banner-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.scanner-km-template-1 .km-hero-section.has-banner-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Ensure text is readable over banner background */
.scanner-km-template-1 .km-hero-section.has-banner-bg .km-hero-headline,
.scanner-km-template-1 .km-hero-section.has-banner-bg .km-hero-headline-1,
.scanner-km-template-1 .km-hero-section.has-banner-bg .km-hero-headline-2,
.scanner-km-template-1 .km-hero-section.has-banner-bg .km-hero-subtext,
.scanner-km-template-1 .km-hero-section.has-banner-bg .km-hero-description {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.scanner-km-template-1 .km-hero-subtext {
    font-size: 1.3em;
    color: #f8f9fa;
    margin-bottom: 25px;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Fallback styling when no video background */
.scanner-km-template-1 .km-hero-section:not(:has(.km-hero-video-background)) .km-hero-subtext {
    color: #666;
    text-shadow: none;
}

.scanner-km-template-1 .km-hero-description {
    font-size: 1.1em;
    color: #fff;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Fallback styling when no video background */
.scanner-km-template-1 .km-hero-section:not(:has(.km-hero-video-background)) .km-hero-description {
    color: #555;
    text-shadow: none;
}

.scanner-km-template-1 .km-hero-image {
    text-align: center;
    position: relative;
    z-index: 3;
}

.scanner-km-template-1 .km-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Hero Headlines in KM Template */
.scanner-km-template-1 .km-hero-headline-1 {
    font-size: 2.2em;
    font-weight: 500;
    color: #fff;
    margin: 20px 0 10px 0;
    line-height: 1.4;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.scanner-km-template-1 .km-hero-headline-2 {
    font-size: 1.8em;
    font-weight: 400;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.4;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Fallback styling when no video background */
.scanner-km-template-1 .km-hero-section:not(:has(.km-hero-video-background)) .km-hero-headline-1 {
    color: #6c757d;
    text-shadow: none;
}

.scanner-km-template-1 .km-hero-section:not(:has(.km-hero-video-background)) .km-hero-headline-2 {
    color: #6c757d;
    text-shadow: none;
}

/* Request Demo Button - Centered */
.scanner-km-template-1 .km-hero-demo-button-centered {
    text-align: center;
    margin-top: 30px;
    z-index: 4;
}

.scanner-km-template-1 .km-hero-demo-button-centered .btn {
    font-size: 1rem;
    padding: 0.9rem 2.2rem;
    font-weight: 600;
    border-width: 2px;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-decoration: none;
}

.scanner-km-template-1 .km-hero-demo-button-centered .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* Demo button respects global button states */

/* KM Template 1 - Features Section */
.scanner-km-template-1 .km-features-section {
    padding: 80px 0;
    background: #fff;
}

/* Features container now uses .site-container */

.scanner-km-template-1 .km-section-title {
    font-size: 2.5em;
    font-weight: 600;
    text-align: center;
    color: #333;
    margin-bottom: 50px;
}

.scanner-km-template-1 .km-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.scanner-km-template-1 .km-feature-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: 10px;
    background: #f8f9fa;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scanner-km-template-1 .km-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.scanner-km-template-1 .km-feature-icon {
    font-size: 3em;
    color: #0073aa;
    margin-bottom: 20px;
}

.scanner-km-template-1 .km-feature-title {
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.scanner-km-template-1 .km-feature-description {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
}



/* KM Template 1 - Specifications Section */
.scanner-km-template-1 .km-specs-section {
    padding: 80px 0;
    background: #fff;
}

/* Specs container now uses .site-container with custom max-width for narrower content */
.scanner-km-template-1 .km-specs-section .site-container {
    max-width: 1000px;
}

.scanner-km-template-1 .km-specs-content {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid #0073aa;
}

.scanner-km-template-1 .km-specs-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.scanner-km-template-1 .km-specs-content th,
.scanner-km-template-1 .km-specs-content td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.scanner-km-template-1 .km-specs-content th {
    background-color: #0073aa;
    color: white;
    font-weight: 600;
}

.scanner-km-template-1 .km-specs-content tr:nth-child(even) {
    background-color: #f2f2f2;
}

.scanner-km-template-1 .km-specs-content ul,
.scanner-km-template-1 .km-specs-content ol {
    padding-left: 20px;
    line-height: 1.6;
}

.scanner-km-template-1 .km-specs-content li {
    margin-bottom: 8px;
}

/* KM Template 1 - Responsive Design */
@media (max-width: 1024px) {
    .scanner-km-template-1 .km-hero-content {
        gap: 40px;
    }
    
    .scanner-km-template-1 .km-hero-headline {
        font-size: 2.8em;
    }
    
    .scanner-km-template-1 .km-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .scanner-km-template-1 .km-hero-headline-1 {
        font-size: 1.9em;
        margin: 15px 0 8px 0;
    }
    
    .scanner-km-template-1 .km-hero-headline-2 {
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    .scanner-km-template-1 .km-hero-section {
        padding: 60px 0;
    }
    
    .scanner-km-template-1 .km-hero-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    /* Video background: maintain full-width centered layout on mobile */
    .scanner-km-template-1 .km-hero-section:has(.km-hero-video-background) .km-hero-content {
        max-width: 90%;
        gap: 0;
    }
    
    .scanner-km-template-1 .km-hero-text {
        padding-right: 0;
    }
    
    .scanner-km-template-1 .km-hero-headline {
        font-size: 2.2em;
    }
    
    .scanner-km-template-1 .km-hero-subtext {
        font-size: 1.1em;
    }

    /* Video background mobile adjustments */
    .scanner-km-template-1 .km-hero-video-background .youtube-background iframe {
        width: 100vw;
        height: 56.25vw;
        min-height: 100%;
        min-width: 177.77vh;
    }
    
    /* Demo button mobile adjustments */
    .scanner-km-template-1 .km-hero-demo-button-centered {
        margin-top: 20px;
    }
    
    .scanner-km-template-1 .km-hero-demo-button-centered .btn {
        font-size: 0.9rem;
        padding: 0.8rem 1.8rem;
    }
    
    .scanner-km-template-1 .km-features-section,
    .scanner-km-template-1 .km-specs-section {
        padding: 50px 0;
    }
    
    .scanner-km-template-1 .km-section-title {
        font-size: 2em;
        margin-bottom: 30px;
    }
    
    .scanner-km-template-1 .km-features-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .scanner-km-template-1 .km-specs-content {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .scanner-km-template-1 .km-hero-headline-1 {
        font-size: 1.7em;
        margin: 12px 0 6px 0;
    }
    
    .scanner-km-template-1 .km-hero-headline-2 {
        font-size: 1.3em;
        margin: 0 0 12px 0;
    }

    .scanner-km-template-1 .km-hero-section {
        padding: 30px 0 40px 0;
    }
    
    .scanner-km-template-1 .km-hero-headline {
        font-size: 1.8em;
    }
    
    .scanner-km-template-1 .km-features-section,
    .scanner-km-template-1 .km-specs-section {
        padding: 40px 0;
    }
    
    .scanner-km-template-1 .km-section-title {
        font-size: 1.6em;
    }
    
    .scanner-km-template-1 .km-feature-item {
        padding: 20px 15px;
    }
    
    .scanner-km-template-1 .km-specs-content {
        padding: 20px;
    }
    
    .scanner-km-template-1 .km-specs-content th,
    .scanner-km-template-1 .km-specs-content td {
        padding: 8px 10px;
        font-size: 0.9em;
    }
}

/* KM Template Showcase Section */
.scanner-km-template-1 .km-showcase-section {
    background: #000;
    padding: 80px 0;
    margin: 0;
    position: relative;
}

/* Showcase container now uses .site-container - keeping position relative for layout */
.scanner-km-template-1 .km-showcase-section .site-container {
    position: relative;
}

.scanner-km-template-1 .km-showcase-two-column {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    position: relative;
    min-height: 0; /* Prevent flex items from growing too large */
}



.scanner-km-template-1 .km-showcase-left {
    flex: 0 0 350px;
    background: white;
    padding: 40px;
    border-radius: 12px;
}

.scanner-km-template-1 .km-showcase-title {
    color: #2c3e50;
    font-size: 2.2em;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

/* Left column description should always be visible */
.scanner-km-template-1 .km-showcase-left .km-showcase-description {
    color: #5a6c7d;
    font-size: 1.1em;
    line-height: 1.75;
    margin: 0;
    opacity: 1 !important;
    transition: none;
}

.scanner-km-template-1 .km-showcase-right {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    background: white;
    padding: 40px;
    border-radius: 12px;
    position: relative;
    overflow: hidden; /* Prevent content from overflowing */
}

/* CTA Box 1 Styling */
.scanner-km-template-1 .km-cta-box-1 {
    background: transparent;
    padding: 0px;
    border-radius: 0;
    border-top: 1px solid #e0e6ed;
    position: relative;
    margin-top: 40px;
    padding-top: 40px;
    text-align: left;
}

.scanner-km-template-1 .km-cta1-title {
    color: #2c3e50;
    font-size: 1.8em;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.scanner-km-template-1 .km-cta1-message {
    color: #5a6c7d;
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.scanner-km-template-1 .km-cta1-button {
    margin: 0 0 25px 0;
}

.scanner-km-template-1 .km-cta1-button .btn {
    font-size: 1rem;
    padding: 0.8rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.scanner-km-template-1 .km-cta1-image {
    margin-top: 20px;
}

.scanner-km-template-1 .km-cta1-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* CTA Box 2 Styling - Text Left, Image Right Layout with Blue Internal Container */
.scanner-cta-box-2 {
    padding: 4rem 0;
    margin: 4rem 0;
}

.scanner-cta-box-2 .cta-box-2-content {
    background: var(--primary-blue);
    border-radius: 20px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    color: white;
    box-shadow: 0 10px 30px rgba(43, 90, 180, 0.3);
}

.scanner-cta-box-2 .cta-box-2-text {
    text-align: left;
}

.scanner-cta-box-2 .cta-box-2-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
}

.scanner-cta-box-2 .cta-box-2-message {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.scanner-cta-box-2 .cta-box-2-message p {
    margin-bottom: 1rem;
}

.scanner-cta-box-2 .cta-box-2-button .btn {
    background: white;
    color: var(--primary-blue);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.scanner-cta-box-2 .cta-box-2-button .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: var(--primary-blue);
    background: #f8f9fa;
}

.scanner-cta-box-2 .cta-box-2-image {
    text-align: center;
    position: relative;
    background: white;
    border-radius: 15px;
    overflow: hidden;
}

.scanner-cta-box-2 .cta-box-2-image img {
    max-width: 100%;
    height: auto;
}

/* Mobile Responsiveness for CTA Box 2 */
@media (max-width: 768px) {
    .scanner-cta-box-2 {
        padding: 2rem 0;
    }
    
    .scanner-cta-box-2 .cta-box-2-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    
    .scanner-cta-box-2 .cta-box-2-text {
        text-align: center;
    }
    
    .scanner-cta-box-2 .cta-box-2-title {
        font-size: 2rem;
    }
}

/* Statement Row 1 Styling - Image positioned to overlap with section above */
/* Statement Image as Background on Showcase Section */
.scanner-km-template-1 .km-showcase-section.has-statement-bg {
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 900px auto;
    position: relative;
}

/* Statement Content within Showcase Section */
.scanner-km-template-1 .km-showcase-section .km-statement-content {
    max-width: 60%;
    margin-top: 80px;
}

.scanner-km-template-1 .km-statement-title {
    color: #f8f9fa;
    font-size: 1.8em;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.scanner-km-template-1 .km-statement-text {
    color: #f8f9fa;
    font-size: 1.1em;
    line-height: 1.75;
    margin: 0;
}

/* Statement Content Responsive */
@media (max-width: 768px) {
    .scanner-km-template-1 .km-showcase-section.has-statement-bg {
        background-image: none !important; /* Hide background image on mobile */
    }
    
    .scanner-km-template-1 .km-showcase-section .km-statement-content {
        max-width: 100%;
        margin-top: 40px;
    }
    
    .scanner-km-template-1 .km-statement-title {
        font-size: 1.5em;
    }
}

/* Showcase Configuration within KM Template */


.scanner-km-template-1 .km-showcase-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
    position: relative;
}

.scanner-km-template-1 .km-showcase-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    flex: 1; /* Allow items to grow/shrink within their container */
    max-width: 300px; /* Set a reasonable max width */
}

.scanner-km-template-1 .km-showcase-item:hover {
    background: #f8f9fa;
    border-color: #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.scanner-km-template-1 .km-showcase-item-inner {
    transition: transform 0.3s ease;
    transform: translateY(10px);
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    z-index: 10;
}

.scanner-km-template-1 .km-showcase-item:hover .km-showcase-item-inner {
    transform: translateY(0);
}

.scanner-km-template-1 .km-showcase-feature {
    font-size: 1.1em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.scanner-km-template-1 .km-showcase-description {
    font-size: 0.9em;
    color: #6c757d;
    line-height: 1.4;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scanner-km-template-1 .km-showcase-item:hover .km-showcase-description {
    opacity: 1;
}

.scanner-km-template-1 .km-showcase-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
    display: block;
    position: relative;
    z-index: 1;
}

/* KM Template Showcase Connecting Lines */

.scanner-km-template-1 .km-showcase-connecting-line {
    position: absolute;
    border-top: 2px dashed var(--primary-blue);
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
}

/* Top row connecting lines */
.scanner-km-template-1 .km-showcase-line-top-1 {
    /* Top left box - diagonal down right */
    width: 245px;
    height: 2px;
    bottom: -154px;
    right: -35px;
    transform: rotate(65deg);
    transform-origin: right;
}

.scanner-km-template-1 .km-showcase-line-top-2 {
    /* Top middle box - straight down */
    width: 2px;
    height: 126px;
    bottom: -126px;
    left: 50%;
    border-top: none;
    border-left: 2px dashed var(--primary-blue);
}

.scanner-km-template-1 .km-showcase-line-top-3 {
    /* Top right box - diagonal down left */
    width: 245px;
    height: 2px;
    bottom: -154px;
    left: -35px;
    transform: rotate(-65deg);
    transform-origin: left;
}

/* Bottom row connecting lines */
.scanner-km-template-1 .km-showcase-line-bottom-4 {
    /* Bottom left box - diagonal up right */
    width: 196px;
    height: 2px;
    top: -126px;
    right: -21px;
    transform: rotate(-65deg);
    transform-origin: right;
}

.scanner-km-template-1 .km-showcase-line-bottom-5 {
    /* Bottom middle box - straight up */
    width: 2px;
    height: 126px;
    top: -126px;
    left: 50%;
    border-top: none;
    border-left: 2px dashed var(--primary-blue);
}

.scanner-km-template-1 .km-showcase-line-bottom-6 {
    /* Bottom right box - diagonal up left */
    width: 196px;
    height: 2px;
    top: -126px;
    left: -21px;
    transform: rotate(65deg);
    transform-origin: left;
}

/* Responsive Design for KM Showcase */
@media (max-width: 1024px) {
    .scanner-km-template-1 .km-showcase-two-column {
        flex-direction: column;
        gap: 40px;
    }
    
    .scanner-km-template-1 .km-showcase-left {
        flex: none;
    }
    
    .scanner-km-template-1 .km-showcase-right {
        min-width: 0;
        overflow: visible; /* Allow content to be visible on smaller screens */
    }
    
    .scanner-km-template-1 .km-showcase-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .scanner-km-template-1 .km-showcase-item {
        max-width: none; /* Remove max-width constraint on tablet */
    }
}

@media (max-width: 768px) {
    .scanner-km-template-1 .km-showcase-section {
        padding: 60px 0;
        margin: 40px 0;
    }
    
    .scanner-km-template-1 .km-showcase-left,
    .scanner-km-template-1 .km-showcase-right {
        padding: 30px;
    }
    
    .scanner-km-template-1 .km-showcase-title {
        font-size: 1.8em;
    }
    
    .scanner-km-template-1 .km-showcase-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .scanner-km-template-1 .km-showcase-item {
        padding: 15px;
    }
    
    /* Hide connecting lines on mobile */
    .scanner-km-template-1 .km-showcase-connecting-line {
        display: none;
    }
}

@media (max-width: 480px) {
    .scanner-km-template-1 .km-showcase-section {
        padding: 40px 0;
        margin: 30px 0;
    }
    
    /* Showcase container mobile padding now handled by .site-container */
    
    .scanner-km-template-1 .km-showcase-left,
    .scanner-km-template-1 .km-showcase-right {
        padding: 20px;
    }
    
    .scanner-km-template-1 .km-showcase-title {
        font-size: 1.6em;
    }
}

/* Scanner Post Type - Mobile Adjustments
---------------------------------------------- */
@media (max-width: 899px) {
    /* Hide complex right-hand showcase column entirely on mobile */
    .scanner-km-template-1 .km-showcase-right { display: none !important; }
    /* Ensure left column spans full width */
    .scanner-km-template-1 .km-showcase-two-column { display: block; }
}

/*--------------------------------------------------------------
# WooCommerce
--------------------------------------------------------------*/

/* Cart Page
--------------------------------------------- */

/* Cart Page Header */
.cart-page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cart-page-header .page-title {
    color: var(--primary-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Empty Cart State */
.cart-empty-state {
    text-align: center;
    padding: 4rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.cart-empty-content {
    margin-bottom: 4rem;
}

.cart-empty-icon {
    margin-bottom: 2rem;
}

.cart-empty-icon svg {
    color: #ccc;
    width: 120px;
    height: 120px;
}

.cart-empty-title {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.cart-empty-message {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cart-empty-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cart-empty-actions .btn {
    padding: 0.75rem 2rem;
    font-weight: 600;
}

/* Ensure Back to Home (btn-light) is visible on white background in empty cart */
.cart-empty-actions .btn-light,
.cart-empty-actions .btn-light:link,
.cart-empty-actions .btn-light:visited {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    background: transparent;
}
.cart-empty-actions .btn-light:hover,
.cart-empty-actions .btn-light:focus,
.cart-empty-actions .btn-light:visited:hover {
    background: var(--primary-blue) !important;
    color: #fff !important;
}

/* Empty Cart now uses existing .popular-setups-section styling */

/* Cart with Items */
.cart-with-items {
    margin-bottom: 3rem;
}

/* Cart Table Styling */
.woocommerce-cart-table__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce-cart-table__table th,
.woocommerce-cart-table__table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.woocommerce-cart-table__table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #eee;
}

.woocommerce-cart-table__table thead th {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Product columns */
.product-remove {
    width: 60px;
    text-align: center;
}

.product-thumbnail {
    width: 100px;
}

.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

.product-name {
    font-weight: 600;
}

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

.product-name a:hover {
    color: var(--primary-blue);
}

.product-price,
.product-subtotal {
    font-weight: 600;
    color: var(--primary-blue);
}

/* Cart item meta font size for components list */
.woocommerce-cart .wc-item-meta li,
.woocommerce-cart .wc-item-meta li p,
.woocommerce-cart .wc-item-meta li span {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Multi Row template: pull rows up under header */
.page-template-page-multi-row .mr-rows {
    margin-top: -60px;
}

.product-quantity input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

/* Remove button */
.remove {
    color: #999;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    display: inline-block;
    line-height: 1;
}

.remove:hover {
    color: #e74c3c;
}

/* Cart Actions */
.actions {
    background: #f8f9fa;
    padding: 1.5rem !important;
}

.coupon {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.coupon label {
    font-weight: 600;
    color: #333;
}

.coupon input[type="text"] {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
}

/* Cart Button Styling */
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions button[name="apply_coupon"],
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .checkout-button,
button[name="update_cart"],
button[name="apply_coupon"] {
    background-color: var(--primary-blue) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 2rem !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.woocommerce-cart .actions button[name="update_cart"]:hover,
.woocommerce-cart .actions button[name="apply_coupon"]:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .checkout-button:hover,
button[name="update_cart"]:hover,
button[name="apply_coupon"]:hover {
    background-color: #1e4a8c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(43, 90, 180, 0.3) !important;
}

/* Cart Collaterals (Totals) */
.cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.cart-totals {
    width: 100%;
    max-width: 400px;
}

/* Responsive Cart */
@media (max-width: 768px) {
    .cart-page-header .page-title {
        font-size: 2rem;
    }
    
    .cart-empty-state {
        padding: 2rem 0;
    }
    
    .cart-empty-icon svg {
        width: 80px;
        height: 80px;
    }
    
    .cart-empty-title {
        font-size: 1.5rem;
    }
    
    .cart-empty-message {
        font-size: 1rem;
    }
    
    .cart-empty-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cart-empty-actions .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .suggestions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Responsive table for mobile */
    .woocommerce-cart-table__table,
    .woocommerce-cart-table__table thead,
    .woocommerce-cart-table__table tbody,
    .woocommerce-cart-table__table th,
    .woocommerce-cart-table__table td,
    .woocommerce-cart-table__table tr {
        display: block;
    }
    
    .woocommerce-cart-table__table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .woocommerce-cart-table__table tr {
        border: 1px solid #ccc;
        margin-bottom: 1rem;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .woocommerce-cart-table__table td {
        border: none;
        position: relative;
        padding-left: 50%;
        background: #fff;
    }
    
    .woocommerce-cart-table__table td:before {
        content: attr(data-title) ": ";
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #333;
    }
    
    .product-remove,
    .product-thumbnail {
        padding-left: 1rem;
    }
    
    .product-remove:before,
    .product-thumbnail:before {
        content: "";
    }
    
    .coupon {
        flex-direction: column;
        align-items: stretch;
    }
    
    .coupon input[type="text"] {
        min-width: auto;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .cart-collaterals {
        justify-content: center;
    }
    
    .cart-totals {
        max-width: none;
    }
}

/* Packages Archive (uniform grid, reused setup-box styling) */
.package-setups-container.archive-all {
	padding: 0 2rem;
}

.packages-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

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

@media (max-width: 600px) {
	.packages-archive-grid { grid-template-columns: 1fr; }
}

/* Packages Archive Intro */
.packages-archive-intro {
	max-width: 900px;
	margin: 0 auto 2rem;
	text-align: center;
	padding: 0 2rem;
}

/* Ensure archive container centres content nicely */
.package-setups-container.archive-all {
	justify-content: center;
    margin-bottom: 4rem;
}

/* Archive layout: flex, three across, centred */
.package-setups-container.archive-all .package-grid-alternative {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

/* Hard override for archive template to avoid grid wins elsewhere */
body.page-template-page-packages-archive .package-setups-container.archive-all .package-grid-alternative {
    display: flex !important;
    padding-bottom: 30px;
}
.page-template-page-product-archive .package-setups-container.archive-all .package-grid-alternative {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
.package-setups-container.archive-all .setup-box {
    flex: 0 1 calc(33.333% - 1.333rem);
    max-width: 380px;
    align-self: stretch;
}
@media (max-width: 1024px) {
    .package-setups-container.archive-all .setup-box {
        flex: 0 1 calc(50% - 1rem);
        max-width: 480px;
    }
}
@media (max-width: 600px) {
    .package-setups-container.archive-all .setup-box {
        flex: 0 1 100%;
        max-width: none;
    }
}

/* Ensure archive section has breathing room above footer */
.packages-archive-section {
    padding-bottom: 80px;
}

.package-setups-container.archive-all .package-grid-alternative {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

@media (max-width: 1024px) {
	.package-setups-container.archive-all .package-grid-alternative { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.package-setups-container.archive-all .package-grid-alternative { grid-template-columns: 1fr; }
}