/* --- FONTS (Myriad Pro Corporate Typeface) --- */
@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MYRIADPRO-REGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MYRIADPRO-SEMIBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MYRIADPRO-BOLD.OTF') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MyriadPro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MYRIADPRO-BOLDIT.OTF') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('assets/fonts/MYRIADPRO-SEMIBOLDIT.OTF') format('opentype');
    font-weight: 600;
    font-style: italic;
}

/* --- GRUNDEINSTELLUNGEN --- */
:root {
    /* Primary Colors */
    --bp-blue-dark: #003867;        /* Official Dark Blue */
    --bp-cyan-icon: #1088d8;        /* Official Logo Cyan (ONLY for logo / select marks) */
    --bp-black: #000000;            /* Official Black */
    --bp-white: #ffffff;
    --bp-grey: #868e93;             /* Official Grey */

    /* Secondary Colors */
    --bp-blue-100: #00527a;         /* Official Blue 100% */
    --bp-blue-60: #6288a7;          /* Official Blue 60% */
    --bp-blue-40: #97b0c2;          /* Official Blue 40% */
    --bp-red: #d10019;              /* Official Red */

    --bp-gray-light: #f1f5f9;
    --bp-gray-blue: #E5EBF0;
    /* Neu für Mobile Button */
    --search-border: #94a4b8;
    --text-color: #333;

    /* Einheitlicher Radius für ALLE Elemente */
    --bp-radius: 6px;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* --- PRODUCT CARD NEW DESIGN --- */
.product-card-new {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    /* Uniform height in grid */
    border: 1px solid transparent;
    /* Prepare for hover border */
    position: relative;
    padding-bottom: 20px;
}

.product-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /* border: 1px solid var(--bp-cyan-icon); Optional blue border on hover */
}

.pcn-image-container {
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    position: relative;
    background: #fff;
    overflow: hidden;
}

.pcn-image-container img {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: contain;
    /* Display completely */
    border-radius: 8px;
    /* Rounded edges */
    transition: transform 0.3s ease;
}

.product-card-new:hover .pcn-image-container img {
    transform: scale(1.05);
}

.pcn-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pcn-top-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.pcn-code {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    text-transform: uppercase;
}

.pcn-title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    /* Regular weight per screenshot */
    color: #222;
    margin-bottom: 4px;
    line-height: 1.3;
}

.pcn-subtitle {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Myriad Pro', 'Myriad', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--text-color);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* --- HEADER STRUKTUR --- */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Background pseudo-element swoops down from top, keeping buttons static in place */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0); /* Default fully visible */
}

/* Translucent homepage state */
header.header-blend {
    position: fixed;
    width: 100%;
}

/* Homepage top state (scrollY = 0 to 50): background is hidden above screen */
header.header-blend::before {
    transform: translateY(-100%);
}

/* Scrolled state: swoop white background down behind static buttons */
header.header-blend.scrolled::before {
    transform: translateY(0) !important;
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-logo .logo-img {
    height: 28px;
    width: auto;
    display: block;
    transition: all 0.4s ease;
}

/* Logo toggling based on transparent vs scrolled/subpage state */
.header-logo .logo-white {
    display: none;
}

.header-logo .logo-black {
    display: block;
}

/* Transparent homepage top state: show white logo, hide black logo */
header.header-blend:not(.scrolled) .header-logo .logo-white {
    display: block;
}

header.header-blend:not(.scrolled) .header-logo .logo-black {
    display: none;
}

/* Zeile 2: Navigation und Aktionen */
.header-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    background: transparent;
    transition: padding 0.4s ease;
}

/* Transparent Header colors for links and icons */
header.header-blend:not(.scrolled) .header-link-item {
    color: var(--bp-white);
}

header.header-blend:not(.scrolled) .header-link-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--bp-white) !important;
}

header.header-blend:not(.scrolled) .menu-toggle-btn {
    color: var(--bp-white);
}

header.header-blend:not(.scrolled) .lang-selector-wrapper .current-lang {
    color: var(--bp-white);
}

header.header-blend:not(.scrolled) .search-container {
    border-color: rgba(255, 255, 255, 0.3);
}

header.header-blend:not(.scrolled) .search-container input {
    background: transparent;
    color: var(--bp-white);
}

header.header-blend:not(.scrolled) .search-container input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

header.header-blend:not(.scrolled) .search-container button {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--bp-white);
}

header.header-blend:not(.scrolled) .search-container button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

header.header-blend:not(.scrolled) .dropdown-menu,
header.header-blend:not(.scrolled) .submenu,
header.header-blend:not(.scrolled) .lang-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

header.header-blend:not(.scrolled) .dropdown-menu li a,
header.header-blend:not(.scrolled) .submenu li a,
header.header-blend:not(.scrolled) .lang-option {
    color: rgba(255, 255, 255, 0.9) !important;
}

header.header-blend:not(.scrolled) .dropdown-menu li a:hover,
header.header-blend:not(.scrolled) .submenu li a:hover,
header.header-blend:not(.scrolled) .lang-option:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--bp-white) !important;
}

/* --- DESKTOP NAVIGATION --- */
@media (min-width: 1025px) {
    .header-nav-bar nav {
        flex: 1;
        margin-left: 50px;
    }
}
.nav-list {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 300; /* Myriad Pro Light weight */
    font-family: 'Myriad Pro', 'Myriad', sans-serif;
}

/* Toggle Button (Initial versteckt auf Desktop) */
.menu-toggle-btn {
    display: none;
    /* Nur sichtbar auf Tablet/Mobile */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--bp-black);
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* Basis-Stil für alle klickbaren Header-Elemente */
.header-link-item {
    padding: 10px 15px;
    border-radius: var(--bp-radius);
    transition: all 0.3s ease;
    cursor: pointer;
    color: var(--bp-black);
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}

.cta-highlight {
    border: 1px solid var(--bp-blue-dark);
}

.header-link-item:hover {
    background-color: var(--bp-blue-dark);
    color: var(--bp-white) !important;
}

.header-link-item:hover i {
    color: var(--bp-white) !important;
}

/* --- DROPDOWN MENÜS (Desktop) --- */
.nav-item-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bp-blue-dark); /* Solid Dark Blue on White header */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 260px; /* Uniform bubble width */
    border-radius: var(--bp-radius);
    padding: 10px 0;
    z-index: 1001;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    transition: background 0.2s;
    font-family: 'Myriad Pro', 'Myriad', sans-serif;
    font-weight: 300; /* Myriad Pro Light weight */
    font-size: 15px; /* Uniform font size */
    color: rgba(255, 255, 255, 0.9); /* Light text for Dark backdrop */
    white-space: nowrap;
    /* Verhindert Zeilenumbruch */
}

.dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bp-white) !important;
}

.nav-item-dropdown:hover .dropdown-menu {
    display: block;
}

/* --- SUCHLEISTE & KONTAKT --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-container {
    display: flex;
    border: 2px solid var(--search-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
    width: auto;
    transition: width 0.3s;
}

.search-container input {
    border: none;
    padding: 10px 20px;
    flex-grow: 1;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    min-width: 100px;
}

.search-container button {
    background-color: var(--bp-blue-dark);
    color: white;
    border: none;
    padding: 10px 22px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- LANGUAGE SELECTOR --- */
.lang-selector-wrapper {
    position: relative;
    margin-left: 15px;
}

.current-lang {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: var(--bp-radius);
    transition: background 0.3s;
}

.current-lang:hover {
    background-color: var(--bp-gray-light);
}

.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bp-blue-dark); /* Solid Dark Blue */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: var(--bp-radius);
    padding: 5px 0;
    min-width: 90px;
    z-index: 1002;
}

.lang-selector-wrapper:hover .lang-dropdown-menu {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: background 0.2s;
}

.lang-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bp-white) !important;
}

.flag-icon {
    width: 20px;
    height: auto;
    margin-right: 8px;
    border-radius: 2px;
}

/* ========================================= */
/* --- MOBILE & TABLET OVERLAY MENU CSS --- */
/* ========================================= */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: var(--bp-white);
    z-index: 2000;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    /* Startet außerhalb des Bildschirms */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Zustand wenn offen */
.mobile-menu-overlay.open {
    transform: translateX(0);
}

/* Header im Overlay (Schließen Button) */
.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    /* X rechts */
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.close-menu-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--bp-black);
    padding: 10px;
}

/* Content Container im Overlay */
.mobile-menu-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Spezielle Mobile Buttons */
.mobile-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: var(--bp-radius);
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

/* Dunkelblaue Buttons (Quiz & Installateur) */
.mobile-btn.dark-blue {
    background-color: var(--bp-blue-dark);
    color: var(--bp-white);
}

.mobile-btn.dark-blue i {
    color: var(--bp-white);
}

/* Graublauer Button (Home) */
.mobile-btn.gray-blue {
    background-color: var(--bp-gray-blue);
    color: var(--bp-blue-dark);
}

/* Accordion Style für Dropdowns */
.accordion-item {
    border-radius: var(--bp-radius);
    background-color: var(--bp-gray-light);
    overflow: hidden;
    margin-bottom: 10px;
}

.accordion-header {
    width: 100%;
    padding: 15px 20px;
    background: var(--bp-gray-light);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--bp-black);
    cursor: pointer;
}

.accordion-content {
    display: none;
    /* Initial zu */
    background-color: var(--bp-white);
    border-top: 1px solid #ddd;
}

.accordion-content.active {
    display: block;
}

.accordion-content a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #555;
}

.accordion-toggle-icon {
    transition: transform 0.3s;
    font-size: 12px;
}

.accordion-header.active .accordion-toggle-icon {
    transform: rotate(180deg);
    /* Pfeil drehen */
}


/* ========================================= */
/* --- MEDIA QUERIES (RESPONSIVE) --- */
/* ========================================= */

/* TABLET MODE (bis 1024px) */
@media (max-width: 1024px) {

    /* Desktop Navigation ausblenden */
    .nav-list {
        display: none;
    }

    /* Menü Button einblenden */
    .menu-toggle-btn {
        display: flex;
    }

    /* Header Nav Layout anpassen */
    .header-nav-bar {
        padding: 10px 10px;
        position: relative;
        justify-content: space-between;
    }

    .header-actions {
        gap: 5px;
    }

    .lang-selector-wrapper {
        margin-left: 0;
    }

    /* Mathematisch zentrierter Logo auf Mobile */
    .header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Overlay Style Tablet: Sidebar */
    .mobile-menu-overlay {
        width: 350px;
        font-family: 'Myriad Pro', 'Myriad', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .mobile-menu-overlay button,
    .mobile-menu-overlay a {
        font-family: inherit;
    }

    /* Collapsible search bar on mobile/tablet */
    .search-container {
        border: none;
        background: transparent;
        width: auto;
        box-shadow: none;
        transition: all 0.3s ease;
    }

    .search-container input {
        width: 0;
        min-width: 0;
        padding: 0;
        border: none;
        opacity: 0;
        visibility: hidden;
        transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    }

    .search-container button {
        background: transparent;
        color: var(--bp-black);
        padding: 10px;
        border-radius: var(--bp-radius);
    }

    header.header-blend:not(.scrolled) .search-container button {
        color: var(--bp-white);
    }

    .search-container.active {
        border: 2px solid var(--search-border);
        border-radius: var(--bp-radius);
        background: var(--bp-white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .search-container.active input {
        width: 210px;
        padding: 8px 12px;
        opacity: 1;
        visibility: visible;
        background: var(--bp-white);
        color: var(--bp-black);
    }

    .search-container.active button {
        background-color: var(--bp-blue-dark);
        color: white;
        padding: 8px 15px;
    }

    /* Hide logo when search is active to prevent overlapping behind it */
    .header-nav-bar:has(.search-container.active) .header-logo {
        opacity: 0;
        visibility: hidden;
    }
}

/* SMARTPHONE MODE (bis 768px) */
@media (max-width: 768px) {

    /* Overlay Style Mobile: Fullscreen */
    .mobile-menu-overlay {
        width: 100%;
    }

    /* Kontakt Button kann auf ganz kleinen Screens evtl. nur Icon sein, 
        aber laut Anforderung bleibt er "Kontakt button rechts" */

    /* Header Logo etwas kleiner */
    .header-logo .logo-img {
        height: 22px;
    }
}

/* Helper Klasse für Menü Text */
.menu-text {
    display: none !important;
}


/* --- SLIDER CSS --- */
.hero-slider {
    width: 100%;
    height: 720px;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.slide img,
.slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 40px;
    font-weight: 100;
    cursor: pointer;
    padding: 20px;
    z-index: 10;
    transition: color 0.3s, transform 0.2s;
}

.slider-arrow:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

.slider-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.sound-toggle-btn {
    position: absolute;
    bottom: 80px;
    right: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.sound-toggle-btn:hover {
    background-color: var(--bp-blue-dark);
    border-color: var(--bp-blue-dark);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .sound-toggle-btn {
        bottom: 60px;
        right: 20px;
    }

    .hero-slider {
        height: 400px;
    }

    /* Slider auf Handy kleiner */
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
    background-color: var(--bp-blue-dark);
    border-color: var(--bp-blue-dark);
    transform: scale(1.2);
}

/* --- RESTLICHES LAYOUT --- */
.promo-section {
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.promo-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
    padding: 0 20px;
}

.promo-row:nth-child(even) {
    flex-direction: row-reverse;
}

.promo-text {
    flex: 1;
}

.promo-text h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--bp-black);
}

.promo-text p {
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.promo-img-placeholder {
    flex: 1;
    height: 400px;
    background-color: #eee;
    border-radius: 8px;
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .promo-row {
        flex-direction: column !important;
        gap: 30px;
        margin-bottom: 40px;
    }

    .promo-img-placeholder {
        width: 100%;
        height: 250px;
    }
}

.promo-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.action-btn {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--bp-blue-dark);
    color: white;
    text-decoration: none;
    border-radius: var(--bp-radius);
    font-weight: 600;
    transition: background 0.3s;
}

.action-btn:hover {
    background-color: #00509e;
}

footer {
    background-color: var(--bp-black);
    color: var(--bp-white);
    padding: 50px 40px;
    font-size: 14px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.footer-col {
    margin-bottom: 20px;
}

.footer-heading {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
    letter-spacing: 0.5px;
}

/* Custom Dropdown for Region Selector */
.region-select-wrapper.custom-dropdown {
    position: relative;
    width: 200px;
    border-bottom: 1px solid #555;
    cursor: pointer;
}

.custom-dropdown-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: white;
    font-size: 14px;
}

.custom-dropdown-options {
    position: absolute;
    bottom: 100%; /* Opens upwards */
    left: 0;
    width: 100%;
    background-color: #000; /* Black background */
    border: 1px solid #333;
    border-radius: var(--bp-radius);
    padding: 5px 0;
    margin: 0;
    list-style: none;
    display: none; /* Hidden by default */
    z-index: 1000;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
}

.custom-dropdown-options li a {
    display: block;
    padding: 10px 15px;
    color: #fff; /* White letters */
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.custom-dropdown-options li a:hover {
    background-color: #222;
}

.custom-dropdown-options li.selected a {
    font-weight: bold;
    background-color: #111;
}

.region-select-wrapper.custom-dropdown.open .custom-dropdown-options {
    display: block;
}

.region-select-arrow {
    font-size: 10px;
    color: white;
}

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

.social-icons a {
    font-size: 18px;
    margin-right: 15px;
}

/* --- PRODUCT CATEGORY PAGE --- */
.category-page-container {
    padding-bottom: 60px;
}

/* Subset Buttons */
.subset-selection {
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 40px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.subset-btn {
    padding: 10px 25px;
    border: 2px solid var(--bp-gray-blue);
    background: white;
    color: var(--bp-black);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
}

.subset-btn.active,
.subset-btn:hover {
    border-color: var(--bp-blue-dark);
    background: var(--bp-blue-dark);
    color: white;
}

.category-extra-text {
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 40px;
    color: #666;
    line-height: 1.6;
}

.product-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

@media (max-width: 768px) {
    .category-intro {
        flex-direction: column;
        padding: 0 20px;
    }

    .intro-title {
        font-size: 28px;
    }

    .subset-selection,
    .category-extra-text,
    .product-grid-container {
        padding: 0 20px;
    }
}

.dropdown-menu li {
    position: relative;
    /* Für die Positionierung des Submenüs */
}

.has-submenu>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.has-submenu>a::after {
    content: '\f054';
    /* FontAwesome Chevron Right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 10px;
}

.submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    /* Rechts daneben erscheinen */
    background-color: var(--bp-blue-dark); /* Solid Dark Blue on White header */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 260px; /* Matching uniform bubble width */
    border-radius: var(--bp-radius);
    padding: 10px 0;
    z-index: 1002;
    margin-left: 2px;
    /* Kleiner Abstand */
}

.has-submenu:hover .submenu {
    display: block;
}

/* Links im Submenü */
.submenu li a {
    display: block;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.9); /* Light text for Dark backdrop */
    font-family: 'Myriad Pro', 'Myriad', sans-serif;
    font-weight: 300; /* Myriad Pro Light weight */
    font-size: 15px; /* Matching uniform font size */
    transition: background 0.2s;
    white-space: nowrap;
}

.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bp-white) !important;
}

/* --- MOBILE NESTED ACCORDION --- */
.nested-accordion-item {
    border-bottom: 1px solid #f0f0f0;
}

.nested-accordion-header {
    width: 100%;
    padding: 12px 20px 12px 30px;
    /* Mehr Padding links für Einrückung */
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
}

.nested-accordion-content {
    display: none;
    background-color: #f9f9f9;
}

.nested-accordion-content a {
    padding-left: 40px;
    /* Noch mehr Einrückung für Links */
    color: #666;
    font-size: 14px;
}

/* Toggle Logic Klasse wird per JS gesetzt (active) */
.nested-accordion-header.active .accordion-toggle-icon {
    transform: rotate(180deg);
}

/* ========================================= */
/* --- ADVISOR / BERATER CSS --- */
/* ========================================= */

.advisor-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.advisor-intro {
    max-width: 800px;
    margin: 20px auto 40px;
    line-height: 1.6;
    color: #555;
    font-size: 16px;
}

.step-container {
    display: none;
    animation: fadeIn 0.5s ease;
}

.step-container.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cards-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.selection-card {
    background: #f4f4f4;
    border: 2px solid transparent;
    border-radius: 8px;
    width: 250px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    box-sizing: border-box;
}

.amp-card {
    width: 190px;
}

.selection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.selection-card.selected {
    border-color: var(--bp-blue-dark);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 56, 104, 0.15);
}

.card-icon {
    font-size: 40px;
    color: #888;
    margin-bottom: 20px;
}

.selection-card.selected .card-icon {
    color: var(--bp-blue-dark);
}

.card-text-large {
    font-size: 24px;
    font-weight: bold;
    color: var(--bp-blue-dark);
    margin-bottom: 10px;
}

.card-subtext {
    font-size: 14px;
    color: #666;
}

/* CAR FORM */
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #f9f9f9;
}

/* BUTTONS */
.btn-primary {
    background-color: var(--bp-blue-dark);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.btn-primary:hover:not(:disabled) {
    background-color: #002545;
}

.btn-outline {
    border: 2px solid var(--bp-blue-dark);
    color: var(--bp-blue-dark);
    padding: 10px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
}

.btn-outline:hover {
    background-color: var(--bp-blue-dark);
    color: white;
}

/* RESULT */
.result-box {
    border: 2px solid #2ecc71;
    /* Green border */
    border-radius: 8px;
    padding: 40px;
    background: #f0fff4;
    /* Light green bg */
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.result-image-wrapper {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.result-product-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.alert-box {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    font-size: 14px;
    border: 1px solid #ffeeba;
}

.extra-product {
    margin-top: 10px;
    font-weight: bold;
    color: var(--bp-blue-dark);
}

/* UTILITIES */
.text-center {
    text-align: center;
}

.text-dark-blue {
    color: var(--bp-blue-dark);
}

.text-gray {
    color: #666;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-40 {
    margin-bottom: 40px;
}


/* PRODUCT CARDS RESULT */
.recommendation-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.rec-group {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bp-cyan-icon);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    position: relative;
    /* Optional: wrapping for grouping */
}

.rec-group.multiple {
    /* For Socket + Cable */
    background: #f9fbfd;
}

.product-card {
    width: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Removed individual border since group has it, 
       but user paint had individual borders? 
       Actually paint had 'Group A' in a big blue rect, 'Group B' in big blue rect.
       Card itself had no border inside group? 
       Let's stick to Group Border being the main visual. 
       Or maybe plain cards. 
       Let's add a subtle border to card too. */
}

.pc-image {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.pc-title {
    font-weight: 600;
    color: var(--bp-blue-dark);
    font-size: 15px;
    line-height: 1.4;
}

.rec-separator,
.rec-plus {
    font-weight: bold;
    font-size: 24px;
    color: #333;
    padding: 0 10px;
}

.btn-learn-more {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid var(--bp-blue-dark);
    border-radius: 4px;
    color: var(--bp-blue-dark);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-learn-more:hover {
    background-color: var(--bp-blue-dark);
    color: white;
}

/* Make groups look like the paint blobs - REFACTORED to individual cards */
.rec-group {
    /* Removed border from group */
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    gap: 15px;
}

.rec-group.multiple {
    background: transparent;
}

.product-card {
    width: 220px;
    /* Slightly wider for 5px border */
    min-height: 320px;
    /* Consistent height */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Space out content */

    border: 5px solid var(--bp-blue-dark);
    /* The requested border */
    border-radius: 25px;
    /* Rounded corners */
    padding: 20px;
    /* Padding so image doesn't cover border */
    background: #fff;
    box-sizing: border-box;
    /* Include border in width */
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.pc-image {
    width: 100%;
    height: 160px;
    /* Fixed height for image area */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Ensure image stays inside */
}

.pc-image img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

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

    .cards-row {
        flex-direction: column;
        align-items: center;
    }

    .selection-card {
        width: 100%;
    }

    .advisor-container {
        padding: 20px 15px;
    }

    .recommendation-wrapper {
        flex-direction: column;
    }

    .rec-group {
        flex-direction: column;
        width: 100%;
    }
}

.nested-accordion-content.active {
    display: block;
}

/* --- PRODUCT CARD NEW DESIGN --- */
.product-card-new {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    /* Uniform height in grid */
    border: 1px solid transparent;
    /* Prepare for hover border */
    position: relative;
    padding-bottom: 20px;
}

.product-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pcn-image-container {
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    position: relative;
    background: #fcfcfc;
    /* Very light gray */
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}

.pcn-image-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card-new:hover .pcn-image-container img {
    transform: translate(-50%, -50%) scale(1.05);
}

.pcn-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
    /* Explicitly align left */
}

/* Flex container for the top row (Code on right) */
.pcn-top-row {
    display: flex;
    justify-content: flex-end;
    /* Push to right */
    width: 100%;
    margin-bottom: 5px;
}

.pcn-code {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pcn-title {
    margin: 0;
    font-size: 16px;
    /* Slightly refined */
    font-weight: 400;
    /* Regular weight per screenshot */
    color: #222;
    margin-bottom: 6px;
    line-height: 1.3;
}

.pcn-subtitle {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    font-weight: 300;
}

/* Specs Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.specs-table th,
.specs-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.specs-table th {
    background-color: var(--bp-gray-light);
    font-weight: 700;
    color: var(--bp-blue-dark);
}

.content-block {
    margin-bottom: 40px;
}

.content-block h2 {
    color: var(--bp-blue-dark);
    margin-bottom: 15px;
}

.product-content-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .product-content-area {
        padding: 0 20px;
    }
}

/* --- DESCRIPTION ZIGZAG LAYOUT --- */
.description-zigzag {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 20px;
}

.zigzag-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.zigzag-row.reverse {
    flex-direction: row-reverse;
}

.zigzag-image {
    flex: 1;
    max-width: 50%;
}

.zigzag-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.zigzag-text {
    flex: 1;
    font-size: 1.15rem;
    /* Slightly bigger font */
    line-height: 1.7;
    color: #444;
}

.zigzag-text strong {
    color: var(--bp-blue-dark);
}

@media (max-width: 768px) {
    .description-zigzag {
        gap: 40px;
    }

    .zigzag-row,
    .zigzag-row.reverse {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .zigzag-image {
        max-width: 100%;
        order: 1;
        /* Picture after text on mobile */
    }

    .zigzag-text {
        order: 0;
        font-size: 1.1rem;
    }
}

/* --- PRODUCT CATEGORY PAGE SLIDER & THUMBNAILS --- */
.category-intro {
    display: flex;
    gap: 40px;
    padding: 60px 40px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.intro-left {
    flex: 1;
}

.intro-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro-title {
    font-size: 48px;
    color: var(--bp-blue-dark);
    margin-bottom: 25px;
}

.intro-description {
    font-size: 18px;
    color: #666;
    margin-bottom: 35px;
    line-height: 1.6;
}

.dealer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    background-color: var(--bp-blue-dark);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 56, 103, 0.22);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dealer-btn:hover {
    background-color: #1a1a1a;
}

.product-slider-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    aspect-ratio: 16 / 9;
}

.product-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.product-slide.active {
    opacity: 1;
    z-index: 2;
}

.product-slide img,
.product-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnails */
.slider-thumbnails-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    justify-content: center;
}

.slider-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: none;
}

.slider-thumbnails::-webkit-scrollbar {
    display: none;
}

.thumb-item {
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.thumb-item img,
.thumb-item video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.thumb-item.active {
    border-color: var(--bp-blue-dark);
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.2);
}

.thumb-arrow {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--bp-blue-dark);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thumb-arrow:hover {
    transform: scale(1.2);
}

/* Response */
@media (max-width: 992px) {
    .category-intro {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .intro-title {
        font-size: 36px;
    }
}

/* Downloads Section */
.downloads-section {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
}

.downloads-section h2 {
    color: var(--bp-blue-dark);
    margin-bottom: 30px;
}

.download-list {
    display: flex;
    flex-direction: column;
}

.download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bp-gray-light);
    text-decoration: none;
    color: var(--bp-blue-dark);
    font-weight: 700;
    margin-bottom: 10px;
    border-radius: var(--bp-radius);
    transition: background 0.2s ease;
}

.download-item:hover {
    background-color: #e0e0e0;
}

.download-icon {
    font-size: 18px;
    color: var(--bp-blue-dark);
}

@media (max-width: 768px) {
    .downloads-section {
        padding: 0 20px;
    }
}

/* --- DEALERS PAGE STYLES --- */

/* Use a full-screen-minus-header layout */
.dealers-container {
    display: flex;
    height: calc(100vh - 135px);
    /* Adjust based on header height approximation */
    overflow: hidden;
    position: relative;
    background-color: #f9f9f9;
}

/* Sidebar */
.dealers-sidebar {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.dealers-search-area {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.search-input-wrapper {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    padding: 12px;
    font-size: 15px;
    outline: none;
}

.search-input-wrapper button {
    background: var(--bp-blue-dark);
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

.dealers-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #fdfdfd;
}

/* Dealer Card */
.dealer-card {
    padding: 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s, border-left 0.2s;
    border-left: 4px solid transparent;
}

.dealer-card:hover {
    background: #f0f4f8;
}

.dealer-card.active {
    background: #ebf5fb;
    border-left-color: var(--bp-cyan-icon);
}

.dealer-card h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #333;
}

.dealer-type {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}

.dealer-type i {
    width: 16px;
    text-align: center;
    margin-right: 4px;
}

.dealer-address {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
}

.dealer-contact {
    font-size: 13px;
    color: var(--bp-blue-dark);
}

.dealer-contact div {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dealer-contact a {
    text-decoration: none;
    color: inherit;
}

.dealer-contact a:hover {
    text-decoration: underline;
}

.dealer-actions {
    display: none;
    /* Show only when active or hovered might be too cluttered, keep cleaner */
    margin-top: 10px;
}

.show-on-map-btn {
    background: none;
    border: 1px solid var(--bp-cyan-icon);
    color: var(--bp-cyan-icon);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.show-on-map-btn:hover {
    background: var(--bp-cyan-icon);
    color: white;
}


/* Map area */
.dealers-map-wrapper {
    flex: 1;
    position: relative;
    background: #e5e3df;
    /* Google Maps default bg color */
}

#map {
    height: 100%;
    width: 100%;
}

/* --- WHATSAPP FLOATING BUTTON --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 50px;
    right: 50px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #1ebc57;
    transform: scale(1.1);
    color: #FFF;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 40px;
        right: 40px;
        font-size: 25px;
    }
}


/* Responsive */
@media (max-width: 768px) {
    .dealers-container {
        flex-direction: column-reverse;
        /* List below map */
        height: auto;
        /* Allow scroll on mobile */
    }

    .dealers-map-wrapper {
        height: 350px;
        /* Fixed height for map on mobile */
        width: 100%;
        flex: none;
    }

    .dealers-sidebar {
        width: 100%;
        height: auto;
        max-height: 500px;
        /* Cap height */
    }
}


/* --- PHASE 1 STYLE IMPROVEMENTS & CMS PRESETS --- */

/* 1. Large Light Typography & Spacing */
h1.myriad-light, .myriad-light {
    font-family: 'Myriad Pro', sans-serif;
    font-weight: 300;
}

.section-spacing {
    padding: 70px 0;
    max-width: 1400px; /* Wider container for premium look */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .section-spacing {
        padding: 50px 20px;
    }
}

/* Immersive Hero Section styles */
.hero-container {
    width: 100%;
    height: 100vh; /* full viewport height */
    min-height: 600px;
    max-height: 900px;
    background-color: #000;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bp-white);
}

/* Hero size variations */
.hero-container.hero-size-full {
    height: 100vh;
    min-height: 600px;
    max-height: 900px;
}

.hero-container.hero-size-medium {
    height: auto;
    aspect-ratio: 21 / 9;
    min-height: 400px;
    max-height: 650px;
}

.hero-container.hero-size-half {
    height: 55vh;
    min-height: 380px;
    max-height: 550px;
}

/* Hide background/contrast overlays if no text is present */
.no-overlay::before,
.no-overlay .hero-overlay {
    background: transparent !important;
    opacity: 0 !important;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45); /* dark overlay for contrast */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
}

.hero-content h1 {
    font-family: 'Myriad Pro', sans-serif;
    font-weight: 300;
    font-size: 66px;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--bp-white);
    letter-spacing: -1px;
}

.hero-content p {
    font-family: 'Myriad Pro', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .hero-container {
        height: 80vh;
    }
    .hero-container.hero-size-full {
        height: 80vh;
        min-height: 450px;
        max-height: none;
    }
    .hero-container.hero-size-medium {
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 300px;
        max-height: none;
    }
    .hero-container.hero-size-half {
        height: 45vh;
        min-height: 280px;
        max-height: none;
    }
    .hero-content h1 {
        font-size: 38px;
    }
    .hero-content p {
        font-size: 16px;
    }
}

/* 2. Modern Reveal Scroll Animations (Static Background Color, Fading Text & Picture) */
.block-container.reveal {
    opacity: 1 !important;
    transform: none !important;
}

.block-container.reveal > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.block-container.reveal.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered entry: image enters slightly after text for premium editorial feel */
.block-container.reveal > .block-image {
    transition-delay: 0.15s;
}

/* Fallback for standalone .reveal elements outside .block-container */
.reveal:not(.block-container) {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal:not(.block-container).visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Layout Presets for Dynamic Content Blocks */
.block-container {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 80px 60px;
    border-radius: var(--bp-radius);
    margin-bottom: 60px;
    overflow: hidden;
}

.block-container.layout-img-left {
    flex-direction: row;
}

.block-container.layout-img-right {
    flex-direction: row-reverse;
}

.block-container.layout-bg-img {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
    padding: 70px 60px;
}

/* Background image overlay */
.block-container.layout-bg-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 56, 103, 0.6); /* Default overlay */
    z-index: 1;
}

.block-container.layout-bg-img.color-preset-dark::before,
.color-preset-dark.layout-bg-img::before {
    background: rgba(0, 56, 103, 0.7) !important;
}

.block-container.layout-bg-img.color-preset-light::before,
.color-preset-light.layout-bg-img::before {
    background: rgba(255, 255, 255, 0.85) !important;
}

.block-container.layout-bg-img.color-preset-accent::before,
.color-preset-accent.layout-bg-img::before {
    background: rgba(241, 245, 249, 0.88) !important;
}

.block-container.layout-bg-img .block-text,
.block-container.layout-bg-img .block-image {
    position: relative;
    z-index: 2;
}

.block-container.layout-bg-img .block-image {
    display: none; /* Hide standard image in full-bleed layout since it is background */
}

.block-text {
    flex: 1.2;
}

.block-text h2, .promo-text h2 {
    font-size: 42px !important;
    line-height: 1.15;
    margin-bottom: 20px;
}

.block-text p, .promo-text p {
    font-size: 19px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px;
}

.nav-list {
    font-size: 18px !important;
}

.header-link-item {
    font-size: 18px !important;
}

.block-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bp-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease;
}

.block-container:hover .block-image img {
    transform: scale(1.02);
}

@media (max-width: 992px) {
    .block-container {
        flex-direction: column !important;
        gap: 40px;
        padding: 40px 20px;
    }
}

/* 4. Brand Color Presets */
/* Preset 1: Light Mode */
.color-preset-light {
    background-color: var(--bp-white);
    color: var(--bp-black);
}
.color-preset-light .block-text h2 {
    color: var(--bp-blue-dark);
}
.color-preset-light .block-text p {
    color: #555;
}

/* Preset 2: Dark Mode */
.color-preset-dark {
    background-color: var(--bp-blue-dark);
    color: var(--bp-white);
}
.color-preset-dark .block-text h2 {
    color: var(--bp-white);
}
.color-preset-dark .block-text p {
    color: rgba(255, 255, 255, 0.85);
}

/* Preset 3: Accent Mode (Grey background) */
.color-preset-accent {
    background-color: #f1f5f9 !important;
    color: var(--bp-blue-dark);
}
.color-preset-accent .block-text h2 {
    color: var(--bp-blue-dark);
}
.color-preset-accent .block-text p {
    color: #4a5568;
}

/* 5. Modern Pill CTA Buttons */
.cta-link-arrow,
.btn-pill-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Myriad Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    background-color: var(--bp-blue-dark) !important;
    padding: 14px 34px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 14px rgba(0, 56, 103, 0.22) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 18px;
    cursor: pointer !important;
    border: none !important;
}

.cta-link-arrow:hover,
.btn-pill-cta:hover {
    background-color: #002545 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 56, 103, 0.3) !important;
}

.cta-link-arrow:active,
.btn-pill-cta:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 56, 103, 0.2) !important;
}

/* Hide raw trailing icon to match clean pill button design */
.cta-link-arrow i,
.btn-pill-cta i {
    display: none !important;
}

/* Color Preset Dark Override */
.color-preset-dark .cta-link-arrow,
.color-preset-dark .btn-pill-cta {
    background-color: #ffffff !important;
    color: var(--bp-blue-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.color-preset-dark .cta-link-arrow:hover,
.color-preset-dark .btn-pill-cta:hover {
    background-color: #f1f5f9 !important;
    color: #002545 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* --- FULL BLEED CONTENT BLOCKS & 50/50 IMAGE LAYOUTS --- */
.full-width-promo {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.full-width-promo .block-container {
    display: flex;
    align-items: center; /* Vertically center text and image column */
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Image block container: covers half of screen width */
.full-width-promo .block-image {
    flex: 1;
    width: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Inset Picture Display Style: Next to block with rounded edges & natural uncropped resolution */
.full-width-promo .block-image.image-style-inset,
.block-image.image-style-inset {
    padding: 36px 40px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

.full-width-promo .block-image.image-style-inset img,
.block-image.image-style-inset img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.full-width-promo .block-container:hover .block-image.image-style-inset img {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
}

/* Edge Picture Display Style: Spans flush to edge (Full Bleed) */
.full-width-promo .block-image.image-style-edge {
    width: 50% !important;
}

.full-width-promo .block-image.image-style-edge img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.5s ease;
}

.full-width-promo .block-container:hover .block-image.image-style-edge img {
    transform: scale(1.03);
}

/* Text block covers exactly half of screen width with premium breathing padding */
.full-width-promo .block-text {
    flex: 1;
    width: 50% !important;
    padding: 56px 8% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Centered layout for full-bleed background images */
.full-width-promo .block-container.layout-bg-img {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 650px !important;
    padding: 70px 60px !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Block Section Outer Wrapper */
.block-section-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flow-root !important;
}

.block-section-wrapper.color-preset-light {
    background-color: var(--bp-white) !important;
}

.block-section-wrapper.color-preset-dark {
    background-color: var(--bp-blue-dark) !important;
}

.block-section-wrapper.color-preset-accent {
    background-color: #f1f5f9 !important;
}

/* Article Card Base & Theme Adaptations */
.article-card {
    background: var(--bp-white);
    border-radius: var(--bp-radius);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    width: 100%;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

.article-card h3 {
    color: var(--bp-black);
}

.article-card p {
    color: var(--bp-grey);
}

.article-card-date {
    color: #94a3b8;
}

/* Dark Mode (.color-preset-dark) Article Showcase */
.color-preset-dark .article-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.color-preset-dark .article-card h3 {
    color: #ffffff !important;
}

.color-preset-dark .article-card p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.color-preset-dark .article-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.color-preset-dark .article-card-date {
    color: rgba(255, 255, 255, 0.6) !important;
}

.color-preset-dark .article-card .cta-link-arrow {
    background-color: #ffffff !important;
    color: var(--bp-blue-dark) !important;
}

.color-preset-dark .article-card .cta-link-arrow:hover {
    background-color: #f1f5f9 !important;
    color: #002545 !important;
}

/* Accent Mode (.color-preset-accent) Article Showcase */
.color-preset-accent .article-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.color-preset-accent .article-card h3 {
    color: var(--bp-blue-dark) !important;
}

.color-preset-accent .article-card p {
    color: #475569 !important;
}

/* Background Image Layout - Contained Banner Card (Centered with Margins & Rounded Edges) */
.full-width-promo .block-container.layout-bg-img.image-style-inset,
.block-container.layout-bg-img.image-style-inset {
    max-width: 1280px !important;
    width: calc(100% - 80px) !important;
    margin: 40px auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: var(--bp-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Background Image Layout - Full Bleed Banner (Edge to Edge Viewport) */
.full-width-promo .block-container.layout-bg-img.image-style-edge,
.block-container.layout-bg-img.image-style-edge {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .full-width-promo .block-container.layout-bg-img.image-style-inset,
    .block-container.layout-bg-img.image-style-inset {
        width: calc(100% - 32px) !important;
        margin: 20px auto !important;
        border-radius: 14px !important;
    }
}

.full-width-promo .block-container.layout-bg-img .block-text {
    flex: none;
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: 0 !important;
}

.full-width-promo .block-container.layout-bg-img .block-image {
    display: none !important;
}

/* --- NO IMAGE PRESET: Text only centered with colored background --- */
.full-width-promo .block-container.layout-no-img {
    justify-content: center;
    align-items: center;
    padding: 84px 40px !important;
    min-height: 400px;
}

.full-width-promo .block-container.layout-no-img .block-image {
    display: none !important;
}

.full-width-promo .block-container.layout-no-img .block-text {
    flex: none;
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: 0 !important;
}

/* Stacking and responsiveness for Tablet and Mobile view */
@media (max-width: 992px) {
    .full-width-promo .block-container {
        flex-direction: column !important;
        min-height: auto !important;
    }
    
    .full-width-promo .block-container.layout-img-right {
        flex-direction: column !important; /* Stack normally on mobile */
    }
    
    .full-width-promo .block-text {
        width: 100% !important;
        padding: 60px 24px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .full-width-promo .block-container.layout-bg-img .block-text,
    .full-width-promo .block-container.layout-no-img .block-text {
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .full-width-promo .block-container.layout-bg-img {
        aspect-ratio: auto !important;
        min-height: 450px !important;
        padding: 60px 24px !important;
        background-size: cover !important;
    }
    
    .full-width-promo .block-image {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .full-width-promo .block-image.image-style-inset {
        padding: 24px 20px !important;
    }

    .full-width-promo .block-image.image-style-inset img {
        max-height: 380px !important;
    }
}

/* ==========================================================================
   PRODUCT SHOWCASE STYLES
   ========================================================================== */

/* Single Product Showcase Slideshow */
.showcase-slideshow-container {
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.showcase-slide {
    pointer-events: none;
    user-select: none;
}
.showcase-dot {
    opacity: 0.8;
}
.showcase-dot:hover {
    background: var(--bp-blue-dark) !important;
}

/* Multiple Products Showcase Track */
.showcase-multiple-slider-container {
    position: relative;
    width: 100%;
}
.showcase-multiple-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 25px;
}
.showcase-multiple-track::-webkit-scrollbar {
    height: 6px;
}
.showcase-multiple-track::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}
.showcase-multiple-track::-webkit-scrollbar-thumb {
    background: var(--bp-blue-dark);
    border-radius: 3px;
}
.showcase-multiple-slide-item {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: 280px;
    scroll-snap-align: start;
    display: flex;
}
.showcase-multiple-slide-item .product-card-new {
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
}
.showcase-multiple-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.showcase-nav-btn {
    transition: background 0.3s, transform 0.2s;
}
.showcase-nav-btn:hover {
    background: #002240 !important;
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .showcase-multiple-slide-item {
        flex: 0 0 75%;
    }
}
@media (max-width: 576px) {
    .showcase-multiple-slide-item {
        flex: 0 0 85%;
    }
}

/* Vertical centering and premium breathing room for Single Showcase block */
.block-container.block-showcase-single {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 480px !important;
}

@media (min-width: 993px) {
    .block-container.block-showcase-single .block-text {
        width: 45% !important;
        flex: 0 0 45% !important;
        padding: 60px 5% !important;
    }
    .block-container.block-showcase-single .block-image {
        width: 55% !important;
        flex: 0 0 55% !important;
    }
}

.block-container.block-showcase-single .block-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 4% !important;
    box-sizing: border-box !important;
}

/* Match the exact product detail slider container style */
.showcase-slideshow-container,
.showcase-single-image-container {
    width: 100% !important;
    max-width: 720px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure the entire product is shown inside the 16:9 box without crop */
.showcase-slideshow-container img,
.showcase-single-image-container img {
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 10px !important;
    display: inline-block !important;
    margin: auto !important;
    transition: transform 0.5s ease !important;
}

.showcase-slideshow-container:hover img,
.showcase-single-image-container:hover img {
    transform: scale(1.03) !important;
}

/* --- 2026 BEST PRACTICE SEARCH SYSTEM STYLES --- */

/* Ensure the header search container can anchor suggestions absolutely and doesn't clip them */
.search-container {
    position: relative;
    overflow: visible !important;
}

.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 56, 103, 0.12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
    border-radius: var(--bp-radius);
    margin-top: 10px;
    z-index: 2000;
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 56, 103, 0.2) transparent;
}

.search-suggestions-dropdown[hidden] {
    display: none !important;
}

.search-suggestions-dropdown::-webkit-scrollbar {
    width: 6px;
}
.search-suggestions-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.search-suggestions-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 56, 103, 0.2);
    border-radius: 3px;
}
.search-suggestions-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 56, 103, 0.4);
}

.search-suggestion-section {
    margin-bottom: 15px;
}
.search-suggestion-section:last-child {
    margin-bottom: 0;
}
.search-suggestion-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bp-grey);
    border-bottom: 1px solid rgba(0, 56, 103, 0.08);
    padding-bottom: 4px;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--bp-black);
    transition: background 0.2s, transform 0.2s;
}
.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
    background: rgba(0, 56, 103, 0.05);
    transform: translateX(4px);
    outline: none;
}

.search-suggestion-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.05);
}

.search-suggestion-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.search-suggestion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-blue-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-subtitle {
    font-size: 11px;
    color: var(--bp-grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-no-results {
    font-size: 13px;
    color: var(--bp-grey);
    text-align: center;
    padding: 15px 0;
}

/* --- SEARCH RESULTS PAGE --- */
.search-tabs-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
}
.search-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e2e8f0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.search-tab-btn {
    background: none;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bp-grey);
    cursor: pointer;
    transition: all 0.3s;
    border-radius: var(--bp-radius) var(--bp-radius) 0 0;
    position: relative;
}
.search-tab-btn:hover {
    color: var(--bp-blue-dark);
    background-color: rgba(0, 56, 103, 0.03);
}
.search-tab-btn.active {
    color: white !important;
    background-color: var(--bp-blue-dark) !important; /* solid dark-blue background on active tab elements */
}
.search-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--bp-blue-dark); /* underline indicator */
}

/* Dynamic Page Results Layout */
.pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.page-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 56, 103, 0.08);
    border-radius: var(--bp-radius);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.page-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 56, 103, 0.06);
    border-color: rgba(0, 56, 103, 0.2);
}
.page-card-icon {
    background: rgba(0, 56, 103, 0.05);
    color: var(--bp-blue-dark);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.page-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bp-blue-dark);
    margin: 0;
    line-height: 1.3;
}
.page-card-desc {
    font-size: 13px;
    color: var(--bp-grey);
    margin: 0;
    line-height: 1.5;
}
.page-card-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-blue-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    transition: gap 0.2s;
}
.page-card:hover .page-card-btn {
    gap: 10px;
}

@media (max-width: 768px) {
    .search-suggestions-dropdown {
        width: calc(100vw - 40px);
        right: -20px;
    }
}

/* ==========================================================================
   FAQ ACCORDION STYLES & COLOR PRESET ADAPTATIONS
   ========================================================================== */

.faq-main-title {
    color: var(--bp-blue-dark);
}

.faq-accordion-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--bp-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-trigger {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    color: var(--bp-blue-dark);
    cursor: pointer;
    outline: none;
    font-family: 'Myriad Pro', sans-serif;
    transition: color 0.3s ease;
}

.faq-trigger:hover {
    color: var(--bp-cyan-icon);
}

.faq-icon {
    transition: transform 0.3s ease;
    font-size: 14px;
    color: var(--bp-grey);
}

.faq-content-box {
    background: #f8fafc;
}

.faq-answer-inner {
    padding: 20px 24px;
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    border-top: 1px solid #f1f5f9;
}

/* Dark Mode (.color-preset-dark) Adaptations */
.color-preset-dark .faq-main-title {
    color: var(--bp-white) !important;
}

.color-preset-dark .faq-accordion-item {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.color-preset-dark .faq-accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.color-preset-dark .faq-trigger {
    color: var(--bp-white) !important;
}

.color-preset-dark .faq-trigger:hover {
    color: #38bdf8 !important;
}

.color-preset-dark .faq-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.color-preset-dark .faq-content-box {
    background: rgba(0, 0, 0, 0.22) !important;
}

.color-preset-dark .faq-answer-inner {
    color: rgba(255, 255, 255, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Accent Mode (.color-preset-accent) Adaptations */
.color-preset-accent .faq-main-title {
    color: var(--bp-blue-dark) !important;
}