/* styles.css */
/* =====================================================
   SYNRGY SOLUTIONS - COMPLETE STYLESHEET
   Inclusief Shop & Loxone specifieke styling
   ===================================================== */

:root {
    --synrgy-bg: #dee8cf;
    --synrgy-text: #000000;
    --synrgy-title: #2677ac;
    --synrgy-accent: #6aa431;
    --synrgy-white: #FFFFFF;
    --synrgy-light: #e8f0dc;
    --loxone-green: #8cc541;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Abel', sans-serif;
    background: var(--synrgy-bg);
    color: var(--synrgy-text);
    line-height: 1.6;
}

main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* =====================================================
   HEADER & NAVIGATION
   ===================================================== */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--synrgy-accent);
    box-shadow: 0 2px 20px rgba(106, 164, 49, 0.15);
}

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

.logo img {
    height: 65px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    color: var(--synrgy-text);
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--synrgy-accent);
    transition: width 0.3s;
}

.nav-links a:hover {
    color: var(--synrgy-title);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.is-active {
    color: var(--synrgy-title);
    font-weight: bold;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 280px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 2px solid var(--synrgy-accent);
    margin-top: 1rem;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    border-bottom: 1px solid var(--synrgy-light);
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--synrgy-text);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.dropdown-menu a::after {
    display: none;
}

.dropdown-menu a:hover {
    background: var(--synrgy-light);
    color: var(--synrgy-title);
    padding-left: 2rem;
}

/* Language Toggle Switch - With NL/EN inside toggle */
.lang-switch-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-switch-container input {
    display: none;
}

.toggle {
    width: 70px;
    height: 32px;
    background-color: hsl(0, 0%, 80%);
    border-radius: 1.7rem;
    padding: 0 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 300ms 300ms;
    position: relative;
}

.toggle__circle {
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    transition: left 500ms ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}

.toggle__text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: 'Abel', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    pointer-events: none;
}

.toggle__text span {
    flex: 1;
    text-align: center;
}

.toggle__text .nl-text {
    color: rgba(255,255,255,0.5);
    transition: color 300ms;
}

.toggle__text .en-text {
    color: rgba(255,255,255,0.5);
    transition: color 300ms;
}

#langCheck:checked + .toggle > .toggle__circle {
    left: calc(100% - 29px);
}

#langCheck:checked + .toggle {
    background-color: var(--synrgy-accent);
}

#langCheck:checked + .toggle .nl-text {
    color: rgba(255,255,255,0.5);
}

#langCheck:checked + .toggle .en-text {
    color: white;
}

#langCheck:not(:checked) + .toggle .nl-text {
    color: white;
}

#langCheck:not(:checked) + .toggle .en-text {
    color: rgba(255,255,255,0.5);
}

.toggle-text {
    display: none; /* Hide external labels */
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--synrgy-text);
    font-size: 1.8rem;
    cursor: pointer;
}

/* =====================================================
   HERO SECTIONS
   ===================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9rem 2rem 4rem;
    background: linear-gradient(135deg, var(--synrgy-bg) 0%, var(--synrgy-light) 100%);
    position: relative;
    width: 100%;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(106, 164, 49, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(38, 119, 172, 0.08) 0%, transparent 50%);
}

.hero-content {
    max-width: 1200px;
    text-align: center;
    position: relative;
    animation: fadeIn 0.8s ease;
}

.hero h1 {
    font-size: 4.5rem;
    font-weight: normal;
    letter-spacing: 5px;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--synrgy-text);
}

.hero h1 .highlight {
    color: var(--synrgy-title);
    font-weight: bold;
}

.hero p {
    font-size: 1.5rem;
    color: var(--synrgy-text);
    margin-bottom: 3rem;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   SHOP SPECIFIC STYLES
   ===================================================== */

/* Shop Header */
.shop-header {
    padding: 140px 2rem 4rem;
    background: linear-gradient(135deg, var(--synrgy-light) 0%, #ffffff 100%);
    text-align: center;
}

.shop-header h1 {
    font-size: 3.5rem;
    color: var(--synrgy-title);
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.shop-header p {
    font-size: 1.3rem;
    color: var(--synrgy-text);
    opacity: 0.8;
}

/* Filter Section */
.filter-section {
    padding: 3rem 2rem;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-buttons {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.filter-btn {
    padding: 0.8rem 2rem;
    background: var(--synrgy-light);
    border: 2px solid transparent;
    color: var(--synrgy-text);
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
    letter-spacing: 1px;
}

.filter-btn:hover {
    background: var(--synrgy-accent);
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--synrgy-accent);
    color: white;
    border-color: var(--synrgy-title);
}

/* Products Grid */
.products-section {
    padding: 4rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 1400px;
    margin: 2rem auto 0;
    gap: 2.5rem;
    padding: 0 2rem;
}

/* Limit to max 4 columns */
@media (min-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 480px;
    border: 1px solid #e8e8e8;
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--synrgy-accent) 0%, var(--loxone-green) 100%);
    border-radius: 0 0 12px 12px;
}


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

.product-image {
    width: 100%;
    height: 320px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
}

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

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

.product-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.product-placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.product-placeholder-text {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--loxone-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    z-index: 2;
}

.product-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    position: relative;
    z-index: 1;
    padding-bottom: 1rem;
}

.product-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
    background: white;
}

.product-category {
    color: var(--synrgy-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.product-name {
    font-size: 1.25rem;
    color: var(--synrgy-title);
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.product-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    flex-grow: 1;
}

.product-price {
    font-size: 1.5rem;
    color: var(--synrgy-text);
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.product-price-note {
    font-size: 0.8rem;
    color: #999;
}

.product-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.qty-selector {
    display: flex;
    align-items: center;
    border: 2px solid var(--synrgy-light);
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
    max-width: 120px;
}

.qty-btn {
    padding: 0.5rem 0.8rem;
    background: var(--synrgy-light);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
    color: var(--synrgy-title);
    min-width: 32px;
}

.qty-btn:hover {
    background: var(--synrgy-accent);
    color: white;
}

.qty-display {
    padding: 0.5rem;
    min-width: 40px;
    text-align: center;
    font-weight: bold;
    border: none;
    background: white;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
}

.add-to-cart-btn {
    padding: 0.8rem 1.5rem;
    background: var(--synrgy-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
    white-space: nowrap;
    flex: 0 0 auto;
}

.add-to-cart-btn:hover {
    background: var(--synrgy-title);
    transform: scale(1.05);
}

.add-to-cart-btn:active {
    transform: scale(0.98);
}
/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    font-size: 1.5rem;
    color: var(--synrgy-title);
}

/* Shopping Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    right: 0;
}

.cart-header {
    padding: 2rem;
    background: var(--synrgy-accent);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-size: 1.8rem;
    letter-spacing: 2px;
}

.cart-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.cart-close:hover {
    transform: rotate(90deg);
}

.cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
}

.cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--synrgy-title);
}

.cart-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--synrgy-light);
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-name {
    font-weight: bold;
    color: var(--synrgy-title);
    margin-bottom: 0.5rem;
}

.cart-item-price {
    color: var(--synrgy-accent);
    font-weight: bold;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cart-item-qty button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--synrgy-accent);
    background: white;
    color: var(--synrgy-accent);
    cursor: pointer;
    transition: all 0.3s;
}

.cart-item-qty button:hover {
    background: var(--synrgy-accent);
    color: white;
}

.cart-item-remove {
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.cart-item-remove:hover {
    transform: scale(1.2);
}

.cart-footer {
    padding: 2rem;
    border-top: 2px solid var(--synrgy-light);
    background: var(--synrgy-bg);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.cart-total-label {
    color: var(--synrgy-title);
    font-weight: bold;
}

.cart-total-price {
    color: var(--synrgy-accent);
    font-weight: bold;
}

.cart-checkout-btn {
    width: 100%;
    padding: 1.2rem;
    background: var(--synrgy-title);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.cart-checkout-btn:hover:not(:disabled) {
    background: var(--synrgy-accent);
    transform: translateY(-2px);
}

.cart-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkout Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 2rem;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
}

.checkout-modal {
    background: white;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.checkout-header {
    padding: 2rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
}

.checkout-header h2 {
    font-size: 2rem;
    letter-spacing: 2px;
    color:white !important;
}

.checkout-body {
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--synrgy-title);
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--synrgy-light);
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--synrgy-accent);
    box-shadow: 0 0 0 3px rgba(106, 164, 49, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

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

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.checkout-summary {
    background: var(--synrgy-light);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.checkout-summary h3 {
    color: var(--synrgy-title);
    margin-bottom: 1rem;
}

.checkout-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-cancel {
    padding: 1rem 2rem;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    background: #5a6268;
}

.btn-submit {
    padding: 1rem 3rem;
    background: var(--synrgy-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.btn-submit:hover {
    background: var(--synrgy-title);
    transform: translateY(-2px);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Confirmation Modal */
.confirmation-header {
    padding: 2rem;
    background: var(--synrgy-accent);
    color: white;
    text-align: center;
    border-radius: 20px 20px 0 0;
}

.confirmation-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.confirmation-body {
    padding: 3rem;
    text-align: center;
}

.close-confirmation-btn {
    width: 100%;
    padding: 1.2rem;
    background: var(--synrgy-title);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.close-confirmation-btn:hover {
    background: var(--synrgy-accent);
}

/* Contact CTA */
.contact-cta {
    padding: 4rem 2rem;
    background: var(--synrgy-title);
    text-align: center;
}

.contact-cta h2 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.contact-cta p {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.contact-btn {
    padding: 1.2rem 3rem;
    background: var(--synrgy-accent);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    display: inline-block;
    transition: all 0.3s;
    font-weight: bold;
}

.contact-btn:hover {
    background: white;
    color: var(--synrgy-title);
    transform: translateY(-3px);
}

/* =====================================================
   LOXONE SPECIFIC STYLES
   ===================================================== */

/* Loxone Hero */
.hero-loxone {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 2rem 4rem;
    background: linear-gradient(135deg, #8cc541 0%, #6aa431 50%, #2677ac 100%);
    position: relative;
    overflow: hidden;
}

.hero-loxone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.1) 0%, transparent 50%);
}

.hero-loxone .hero-content {
    position: relative;
    z-index: 1;
}

.hero-loxone h1 {
    color: white;
    font-size: 4rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-loxone p {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Loxone Sections */
.section {
    padding: 6rem 0;
    width: 100%;
}

.section:nth-child(even) {
    background: white;
}

.section:nth-child(odd) {
    background: var(--synrgy-light);
}

.section-title {
    font-size: 3rem;
    color: var(--synrgy-title);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 3px;
}

/* Miniserver Intro */
.miniserver-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.miniserver-intro h2 {
    color: var(--synrgy-title);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.miniserver-intro p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Benefits Section */
.benefits-highlight {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.benefits-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.stat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.stat-number {
    font-size: 4rem;
    font-weight: bold;
    color: var(--loxone-green);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.2rem;
    color: var(--synrgy-title);
    font-weight: bold;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 3rem auto 0;
    padding: 0 2rem;
}

/* Feature Grid (singular - used in detail pages) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1400px;
    margin: 3rem auto 0;
    padding: 0 2rem;
}

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

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

/* Battery Benefits Grid - 2x2 layout voor thuisbatterij pagina */
.page-thuisbatterij .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

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

/* Slim Laden Grid - 2x2 layout voor "Hoe slim laden werkt" */
.page-slim-laden .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .page-slim-laden .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Energie-audit praktijkvoorbeelden - 3 op een rij */
.page-energie-audit .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

@media (max-width: 1024px) {
    .page-energie-audit .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-energie-audit .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Energie-audit process-steps - 2 bovenaan, 3 onderaan gecentreerd */
.page-energie-audit .process-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}

.page-energie-audit .process-steps .step {
    flex: 0 0 auto;
    width: calc(50% - 1.25rem);
    max-width: 500px;
}

/* Items 3, 4, 5: smaller zodat ze alle 3 op 1 rij passen */
.page-energie-audit .process-steps .step:nth-child(n+3) {
    width: calc(30% - 1.67rem);
    max-width: 380px;
}

@media (max-width: 900px) {
    .page-energie-audit .process-steps .step,
    .page-energie-audit .process-steps .step:nth-child(n+3) {
        width: calc(50% - 1.25rem);
        max-width: none;
    }
}

@media (max-width: 600px) {
    .page-energie-audit .process-steps .step,
    .page-energie-audit .process-steps .step:nth-child(n+3) {
        width: 100%;
    }
}

.feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    color: var(--synrgy-title);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-card p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Applications Grid */
.applications {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.application-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.application-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.application-header {
    background: linear-gradient(135deg, var(--loxone-green) 0%, var(--synrgy-accent) 100%);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.application-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.application-content {
    padding: 2rem;
}

.application-content ul {
    list-style: none;
    padding: 0;
}

.application-content li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.application-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--loxone-green);
    font-weight: bold;
}

/* Software Section */
.software-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.software-item {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s;
}

.software-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.software-item h3 {
    color: var(--synrgy-title);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.software-item p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* CTA Section */
.cta-section {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cta-section h2 {
    font-size: 3rem;
    color: var(--synrgy-title);
    margin-bottom: 2rem;
}

.cta-section p {
    font-size: 1.3rem;
    margin-bottom: 3rem;
}

.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 1.3rem 3.5rem;
    background: var(--synrgy-accent);
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 2px;
    transition: all 0.3s;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(106, 164, 49, 0.3);
}

.cta-button:hover {
    background: var(--synrgy-title);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(38, 119, 172, 0.4);
}

.cta-button-primary {
    background: var(--synrgy-accent);
    color: white;
}

.cta-button-primary:hover {
    background: var(--synrgy-title);
    transform: translateY(-3px);
}

.cta-button-secondary {
    background: white;
    color: var(--synrgy-title);
    border: 3px solid var(--synrgy-title);
}

.cta-button-secondary:hover {
    background: var(--synrgy-title);
    color: white;
}

/* Language Toggle */
.lang-nl, .lang-en {
    display: block;
}

/* Hidden class - but can be overridden by language switching */
.hidden {
    display: none;
}

/* Language elements use inline styles set by JS, which override the hidden class */
.lang-nl[style*="display"], .lang-en[style*="display"] {
    /* Allow inline styles to take precedence */
}

/* =====================================================
   GENERAL SECTIONS (Index page)
   ===================================================== */
section {
    padding: 6rem 0;
    width: 100%;
}

.section-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

h2 {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--synrgy-title);
}

h2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: var(--synrgy-accent);
    margin: 1rem auto 0;
}

/* Services */
.services { background: var(--synrgy-white); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.service-card {
    background: var(--synrgy-bg);
    padding: 3rem;
    border: 3px solid transparent;
    transition: all 0.4s;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--synrgy-accent);
    transition: width 0.4s;
}

.service-card:hover::before { width: 100%; }

.service-card:hover {
    border-color: var(--synrgy-title);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(38, 119, 172, 0.15);
}

.service-icon {
    font-size: 4rem;
    color: var(--synrgy-title);
    margin-bottom: 1.5rem;
    display: block;
}

.service-card h3 {
    font-size: 1.8rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    font-weight: bold;
    color: var(--synrgy-title);
}

.service-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.85;
    color: var(--synrgy-text);
}

/* Process */
.process { background: var(--synrgy-bg); }

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 1200px) {
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .process-steps .step:nth-child(4):nth-last-child(2),
    .process-steps .step:nth-child(5):last-child {
        grid-column: auto;
        max-width: none;
    }
}

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

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

/* Thuisbatterij specific: 3x3 grid (3 kolommen, 2 rijen voor 6 items) */
.page-thuisbatterij .process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.page-thuisbatterij .process-steps .step:nth-child(5):last-child,
.page-thuisbatterij .process-steps .step:nth-child(6):last-child {
    grid-column: auto;
    max-width: none;
}

@media (max-width: 900px) {
    .page-thuisbatterij .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page-thuisbatterij .process-steps {
        grid-template-columns: 1fr;
    }
}

.step {
    background: white;
    padding: 3rem 2rem;
    text-align: center;
    border: 3px solid var(--synrgy-light);
    transition: all 0.3s;
}

.step:hover {
    border-color: var(--synrgy-accent);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(106, 164, 49, 0.2);
}

.step-number {
    width: 90px;
    height: 90px;
    border: 4px solid var(--synrgy-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--synrgy-title);
    margin: 0 auto 1.5rem;
    background: var(--synrgy-bg);
    font-weight: bold;
}

.step h3 {
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--synrgy-title);
}

.step p {
    color: var(--synrgy-text);
    font-size: 1.1rem;
    opacity: 0.85;
}

/* ROI Grid */
.roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

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

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

.roi-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-left: 5px solid var(--synrgy-accent);
    transition: all 0.3s;
}

.roi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(106, 164, 49, 0.2);
}

.roi-card h3 {
    color: var(--synrgy-title);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.roi-details {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.roi-details p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.roi-details .highlight {
    background: var(--synrgy-light);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    color: var(--synrgy-accent);
    font-size: 1.3rem;
}

/* Technologies */
.technologies { background: white; }

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.tech-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--synrgy-bg);
    border: 3px solid transparent;
    min-height: 160px;
    transition: all 0.3s;
}

.tech-item:hover {
    border-color: var(--synrgy-title);
    transform: scale(1.05);
    box-shadow: 0 10px 35px rgba(38, 119, 172, 0.15);
}

.tech-item img {
    max-width: 100%;
    max-height: 85px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.3s;
}

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

/* =====================================================
   IMPROVED CONTACT & FOOTER STYLING v3 - FIXED

   ===================================================== */

/* Contact Section */
section.contact { 
    background: var(--synrgy-white);
    padding: 5rem 0;
}

.contact .contact-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: -1.5rem auto 3rem;
    line-height: 1.7;
}

.contact .contact-container { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Remove old separator line if any */
.contact .contact-container::before {
    display: none !important;
}

/* Contact Form */
.contact .contact-form { 
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--synrgy-bg);
    padding: 2.5rem !important;
    border-radius: 16px;
}

.contact .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact .form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.contact .form-group-full {
    grid-column: 1 / -1;
}

/* Form Inputs */
.contact .form-group input,
.contact .form-group textarea {
    width: 100%;
    padding: 1rem 1rem 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    background: white;
    transition: all 0.3s ease;
    order: 1;
}

.contact .form-group label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #888;
    pointer-events: none;
    transition: all 0.2s ease;
    background: white;
    padding: 0 0.3rem;
    order: 0;
}

.contact .form-group textarea ~ label {
    top: 1.2rem;
    transform: none;
}

/* Float label on focus or when filled */
.contact .form-group input:focus,
.contact .form-group textarea:focus {
    outline: none;
    border-color: var(--synrgy-accent);
}

.contact .form-group input:focus ~ label,
.contact .form-group input:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--synrgy-accent);
    font-weight: 600;
}

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

.contact .form-group textarea:focus ~ label,
.contact .form-group textarea:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--synrgy-accent);
    font-weight: 600;
}

/* Submit Button */
.contact .submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: var(--synrgy-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Abel', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(106, 164, 49, 0.3);
}

.contact .submit-button:hover {
    background: var(--synrgy-title);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(38, 119, 172, 0.3);
}

.contact .submit-button svg {
    transition: transform 0.3s;
}

.contact .submit-button:hover svg {
    transform: translateX(3px);
}

/* Contact Info Stack - Right Side */
.contact .contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    padding-top: 0.5rem;
}

.contact .contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact .contact-info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--synrgy-light) 0%, #d4e4c4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--synrgy-accent);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.contact .contact-info-item:hover .contact-info-icon {
    background: linear-gradient(135deg, var(--synrgy-accent) 0%, var(--synrgy-title) 100%);
    color: white;
    transform: scale(1.05);
}

.contact .contact-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.contact .contact-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.contact .contact-info-text strong {
    color: var(--synrgy-text);
    font-size: 1rem;
    font-weight: 600;
    display: block;
}

.contact .contact-info-text span {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
    display: block;
}

.contact .contact-info-text a {
    color: var(--synrgy-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

.contact .contact-info-text a:hover {
    color: var(--synrgy-title);
}

.contact .contact-info-text em {
    color: var(--synrgy-title);
    font-style: italic;
    font-size: 0.95rem;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
    background: var(--synrgy-title);
    color: white;
    padding: 2.5rem 2rem 1.5rem;
    border-top: 4px solid var(--synrgy-accent);
    width: 100%;
}

footer .footer-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

footer .footer-tagline {
    font-size: 1.15rem;
    opacity: 0.9;
    letter-spacing: 1px;
    margin: 0 0 1.5rem 0;
}

footer .footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

footer .footer-nav a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1px;
    opacity: 0.85;
    transition: all 0.3s;
    position: relative;
}

footer .footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--synrgy-accent);
    transition: width 0.3s;
}

footer .footer-nav a:hover {
    opacity: 1;
}

footer .footer-nav a:hover::after {
    width: 100%;
}

footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

footer .footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.75;
    letter-spacing: 0.5px;
}

footer .footer-vat {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* =====================================================
   CONTACT & FOOTER RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .contact .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .contact .contact-info-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        padding-top: 0;
    }
    
    .contact .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .contact .contact-form {
        padding: 1.5rem !important;
    }
    
    .contact .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact .contact-info-stack {
        grid-template-columns: 1fr;
    }
    
    .contact .submit-button {
        width: 100%;
        justify-content: center;
    }
    
    footer .footer-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    footer .footer-nav a::after {
        display: none;
    }
}

/* =====================================================
   ACCOUNT / AUTH PAGES
   ===================================================== */
.account-btn {
    background: var(--synrgy-title);
    color: white;
    padding: 0.7rem 1.3rem;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.account-btn:hover {
    background: var(--synrgy-accent);
    transform: scale(1.05);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 968px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-top: 3px solid var(--synrgy-accent);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    
    .nav-links.active { display: flex; }
    .mobile-menu-btn { display: block; }
    
    .hero h1, .hero-loxone h1 { font-size: 2.8rem; }
    
    h2 { font-size: 2.2rem; }
    
    .services-grid, .process-steps { grid-template-columns: 1fr; }
    
    .tech-grid { 
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
        gap: 2rem; 
    }
    
    .contact-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .contact-container::before {
        display: none;
    }
    
    .contact-info,
    .contact-form {
        padding: 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .checkout-modal {
        margin: 2rem 1rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .logo img { height: 50px; }
    
    .hero h1 { font-size: 2rem; letter-spacing: 2px; }
    .hero p { font-size: 1.2rem; }
    
    h2 { font-size: 1.8rem; }
    
    .contact-container {
        gap: 3rem;
    }
    
    .contact-info h3 {
        font-size: 1.5rem;
    }
    
    .filter-buttons {
        flex-direction: column;
    }
    
    .filter-btn {
        width: 100%;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-button {
        width: 100%;
    }
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.hidden:not(.lang-nl):not(.lang-en) {
    display: none !important;
}

/* Language hidden elements - can be toggled by JS */
.lang-nl.hidden, .lang-en.hidden {
    display: none;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* =====================================================
   SEARCH FUNCTIONALITY
   ===================================================== */
.search-section {
    padding: 2rem;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 1.2rem 3.5rem 1.2rem 1.5rem;
    border: 2px solid var(--synrgy-light);
    border-radius: 50px;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: var(--synrgy-accent);
    box-shadow: 0 0 0 3px rgba(106, 164, 49, 0.1);
}

.search-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--synrgy-accent);
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--synrgy-light);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: var(--synrgy-text);
    font-size: 1.2rem;
}

.search-clear:hover {
    background: var(--synrgy-accent);
    color: white;
}

.search-clear.active {
    display: flex;
}


/* =====================================================
   MODERN HERO SECTION (Loxone)
   ===================================================== */
.hero-modern {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.hero-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(140, 197, 65, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(38, 119, 172, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text {
    padding: 2rem 0;
}

.hero-badge {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--loxone-green);
    color: white;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(140, 197, 65, 0.3);
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--loxone-dark);
    font-weight: bold;
}

.hero-text h1 .highlight {
    color: var(--loxone-green);
    position: relative;
}

.hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 2.5rem;
}

.hero-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.hero-feature .feature-icon {
    font-size: 2rem;
}

.hero-feature div {
    display: flex;
    flex-direction: column;
}

.hero-feature strong {
    font-size: 1.3rem;
    color: var(--loxone-green);
}

.hero-feature span {
    font-size: 0.9rem;
    color: #6c757d;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-primary {
    padding: 1.2rem 2.5rem;
    background: var(--loxone-green);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(140, 197, 65, 0.3);
    display: inline-block;
}

.btn-primary:hover {
    background: #7ab537;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(140, 197, 65, 0.4);
}

.btn-secondary {
    padding: 1.2rem 2.5rem;
    background: white;
    color: var(--synrgy-title);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s;
    border: 2px solid var(--synrgy-title);
    display: inline-block;
}

.btn-secondary:hover {
    background: var(--synrgy-title);
    color: white;
    transform: translateY(-3px);
}

/* Hero Image Side */
.hero-image {
    position: relative;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

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

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(140, 197, 65, 0.1) 0%, rgba(38, 119, 172, 0.1) 100%);
    z-index: 1;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8cc541 0%, #6aa431 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.placeholder-icon {
    font-size: 8rem;
    margin-bottom: 1rem;
}

.placeholder-text {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Floating Card */
.floating-card {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 2;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.card-icon {
    font-size: 3rem;
}

.card-content {
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.3rem;
}

.card-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--loxone-green);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.card-label {
    font-size: 0.85rem;
    color: #adb5bd;
}

/* =====================================================
   CONDITIONAL CART BUTTON (only on shop.html)
   ===================================================== */
body:not(.page-shop) .cart-btn {
    display: none !important;
}

body.page-shop .cart-btn {
    display: flex !important;
}

/* =====================================================
   RESPONSIVE MODERN HERO
   ===================================================== */
@media (max-width: 968px) {
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-image {
        height: 400px;
    }
    
    .hero-features {
        gap: 1rem;
    }
    
    .hero-feature {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
    }
    
    .floating-card {
        bottom: 20px;
        right: 20px;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    .hero-feature {
        flex: 1 1 100%;
    }
}
/* =====================================================
   SHOP STYLING - ADDED FOR WEBSHOP
   ===================================================== */

.shop-header {
    background: linear-gradient(135deg, var(--synrgy-title), var(--synrgy-accent));
    color: white;
    padding: 4rem 2rem 3rem;
    text-align: center;
    margin-top: 90px;
}

.shop-header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: white;
}

.shop-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

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

.filter-section {
    margin-bottom: 2rem;
}

.filter-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--synrgy-accent);
    background: white;
    color: var(--synrgy-text);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
    font-weight: 500;
}

.filter-btn:hover {
    background: var(--synrgy-light);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--synrgy-accent);
    color: white;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

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

.product-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

/* Checkout Page */
.checkout-container {
    max-width: 1200px;
    margin: 120px auto 3rem;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
}

.checkout-main {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.checkout-sidebar {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 120px;
}

.checkout-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.checkout-section:last-child {
    border-bottom: none;
}

.checkout-section h2 {
    color: var(--synrgy-title);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--synrgy-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Abel', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--synrgy-accent);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.order-item:last-child {
    border-bottom: none;
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #eee;
}

.order-total .amount {
    color: var(--synrgy-accent);
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.payment-method {
    border: 2px solid #ddd;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.payment-method:hover {
    border-color: var(--synrgy-accent);
    transform: translateY(-2px);
}

.payment-method.selected {
    border-color: var(--synrgy-accent);
    background: var(--synrgy-light);
}

.payment-method img {
    height: 40px;
    margin-bottom: 0.5rem;
}

.btn-checkout {
    width: 100%;
    padding: 1rem;
    background: var(--synrgy-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-checkout:hover {
    background: var(--synrgy-title);
    transform: translateY(-2px);
}

.btn-checkout:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.account-section {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.password-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

@media (max-width: 968px) {
.checkout-container {
    grid-template-columns: 1fr;
}

.checkout-sidebar {
    position: relative;
    top: 0;
}

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

.checkout-title {
    color: var(--synrgy-title);
    margin-bottom: 2rem;
}

.form-hint {
    color: #666;
    font-size: 0.9rem;
}

#accountSection {
    display: none;
}

/* ========================================
   NAVIGATION LOGIN/USER MENU & CART - CLEAN STYLE (No Background)
   ======================================== */

/* REMOVE THE HIDE RULE - Cart always visible */
body:not(.page-shop) .cart-btn {
    display: flex !important;
}

/* Cart Button - Clean Text Style (No Background, Underline Hover) */
.cart-btn {
    position: relative;
    background: transparent;
    color: var(--synrgy-text);
    border: none;
    padding: 0.5rem 0;
    cursor: pointer;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--synrgy-accent);
    transition: width 0.3s;
}

.cart-btn:hover {
    color: var(--synrgy-title);
    background: transparent;
    transform: none;
}

.cart-btn:hover::after {
    width: 100%;
}

/* Cart Count Badge - Adjusted for new layout */
.cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background: var(--synrgy-accent);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: none; /* JS will show this when >0 */
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Login Button - Clean Text Style (No Background, Underline Hover) */
.nav-login-btn {
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--synrgy-text);
    padding: 0.5rem 0;
    text-decoration: none;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    position: relative;
    border: none;
    cursor: pointer;
    border-radius: 0;
}

.nav-login-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--synrgy-accent);
    transition: width 0.3s;
}

.nav-login-btn:hover {
    color: var(--synrgy-title);
    background: transparent;
    transform: none;
}

.nav-login-btn:hover::after {
    width: 100%;
}

/* User Dropdown Container */
.nav-user-dropdown {
    position: relative;
    display: inline-block;
}

/* User Button (when logged in) - Clean Text Style (No Background, Underline Hover) */
.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    color: var(--synrgy-text);
    padding: 0.5rem 0;
    text-decoration: none;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    position: relative;
    border: none;
    cursor: pointer;
    border-radius: 0;
}

.nav-user-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--synrgy-accent);
    transition: width 0.3s;
}

.nav-user-btn:hover {
    color: var(--synrgy-title);
    background: transparent;
    transform: none;
}

.nav-user-btn:hover::after {
    width: 100%;
}

.nav-user-btn .dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    transition: transform 0.3s ease;
}

/* Hide the user icon (person emoji) - Icon removed as requested */
.nav-user-icon {
    display: none;
}

/* User dropdown menu - Hidden by default */
.nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

/* Show menu when 'show' class is added */
.nav-user-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-user-menu li {
    margin: 0;
    padding: 0;
}

.nav-user-menu li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    font-family: 'Abel', sans-serif;
}

.nav-user-menu li a:hover {
    background: #f5f5f5;
    color: var(--synrgy-accent);
}

.nav-user-menu li a::after {
    display: none; /* Override nav link underline effect */
}

.nav-user-menu li.divider {
    height: 1px;
    background: #eee;
    margin: 0.5rem 0;
}

/* Logout item special styling */
.nav-user-menu li:last-child a {
    color: #dc3545;
}

.nav-user-menu li:last-child a:hover {
    background: #fff5f5;
    color: #dc3545;
}

/* Cart Sidebar Styles (Unchanged) */
.cart-sidebar {
    position: fixed;
    right: -450px;
    top: 0;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.open {
    right: 0;
}

.cart-header {
    padding: 1.5rem;
    background: var(--synrgy-accent);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: white !important;
}

.cart-close {
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.cart-close:hover {
    opacity: 0.8;
    transform: rotate(90deg);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
    font-size: 1.1rem;
}

.cart-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.cart-footer {
    padding: 1.5rem;
    border-top: 2px solid #eee;
    background: #f9f9f9;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--synrgy-text);
}

.cart-total-price {
    color: var(--synrgy-accent);
}

.cart-checkout-btn {
    width: 100%;
    padding: 1rem;
    background: var(--synrgy-title);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-family: 'Abel', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.cart-checkout-btn:hover {
    background: var(--synrgy-accent);
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .nav-user-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
    }
    
    .nav-user-menu.show {
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 768px) {
    .nav-login-btn,
    .nav-user-dropdown {
        width: 100%;
    }
    
    .nav-login-btn,
    .nav-user-btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .cart-nav-item {
        width: 100%;
    }
    
    .cart-btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .nav-user-menu {
        position: relative;
        top: 0.5rem;
        left: 0;
        transform: none;
        box-shadow: none;
        border: 1px solid #eee;
        width: 100%;
        opacity: 1;
        visibility: visible;
        display: none;
        margin-top: 0.5rem;
    }
    
    .nav-user-menu.show {
        transform: none;
        display: block;
    }
}

/* =====================================================
   SAFARI COMPATIBILITY FIXES - Contact Section
   
   Voeg deze code toe aan het EINDE van je styles.css
   of vervang de bestaande contact-info styling
   ===================================================== */

/* Fix voor Safari: contact-info-item layout */
.contact .contact-info-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 1rem;
    /* Safari gap fallback */
    margin-bottom: 1.8rem;
}

/* Verwijder margin van laatste item */
.contact .contact-info-item:last-child {
    margin-bottom: 0;
}

/* Fix voor Safari: icon box sizing */
.contact .contact-info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    /* Safari fix: expliciet width/height voor flex items */
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50px;
    flex: 0 0 50px;
    background: linear-gradient(135deg, var(--synrgy-light) 0%, #d4e4c4 100%);
    /* Safari gradient fallback */
    background: -webkit-linear-gradient(315deg, var(--synrgy-light) 0%, #d4e4c4 100%);
    background: linear-gradient(135deg, var(--synrgy-light) 0%, #d4e4c4 100%);
    border-radius: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--synrgy-accent);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Fix voor Safari: text container */
.contact .contact-info-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* Safari gap fallback - gebruik margin ipv gap */
    gap: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0; /* Voorkomt overflow */
}

/* Fix voor Safari: spans moeten NIET display:block zijn als ze hidden moeten kunnen zijn */
.contact .contact-info-text span {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    /* Verwijder display:block, laat het inline-block of default */
}

/* Alleen voor de adres spans die WEL block moeten zijn */
.contact .contact-info-text span:not(.lang-nl):not(.lang-en):not(.contact-info-label) {
    display: block;
}

/* Label styling */
.contact .contact-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    font-weight: 600;
    margin-bottom: 0.3rem;
    display: block;
}

/* Strong element */
.contact .contact-info-text strong {
    color: var(--synrgy-text);
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.1rem;
}

/* Links */
.contact .contact-info-text a {
    color: var(--synrgy-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    display: inline-block;
}

/* Em element */
.contact .contact-info-text em {
    color: var(--synrgy-title);
    font-style: italic;
    font-size: 0.95rem;
}

/* Fix voor Safari: form inputs */
.contact .form-group input,
.contact .form-group textarea {
    width: 100%;
    padding: 1rem 1rem 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    /* Safari input styling fix */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Safari textarea fix */
.contact .form-group textarea {
    resize: vertical;
    min-height: 130px;
    /* Safari specific */
    -webkit-overflow-scrolling: touch;
}

/* Fix voor Safari: button */
.contact .submit-button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: var(--synrgy-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Abel', sans-serif;
    font-weight: 600;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(106, 164, 49, 0.3);
    /* Safari button reset */
    -webkit-appearance: none;
}

/* Fix voor Safari: contact-info-stack zonder gap */
.contact .contact-info-stack {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* Verwijder gap, gebruik margin op items */
    gap: 0;
    padding-top: 0.5rem;
}

/* Fix voor Safari: form-row gap fallback */
.contact .form-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5rem;
    /* Safari fallback: margin op children */
}

/* Fix voor Safari: form layout */
.contact .contact-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--synrgy-bg);
    padding: 2.5rem !important;
    border-radius: 16px;
}

/* Fix voor Safari: form-group in row */
.contact .form-row .form-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 calc(50% - 0.75rem);
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 200px;
}

/* Fix: Hidden class moet werken op alle elementen */
.contact .hidden,
.contact span.hidden,
.contact em.hidden,
.contact .lang-en.hidden,
.contact .lang-nl.hidden {
    display: none !important;
}

/* Footer Safari fixes */
footer .footer-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* =====================================================
   FAQ PAGE STYLES
   Voeg deze code toe aan het EINDE van je styles.css
   ===================================================== */

/* FAQ Header */
.faq-header {
    padding: 140px 2rem 4rem;
    background: linear-gradient(135deg, var(--synrgy-light) 0%, #ffffff 100%);
    text-align: center;
}

.faq-header h1 {
    font-size: 3.5rem;
    color: var(--synrgy-title);
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.faq-header p {
    font-size: 1.3rem;
    color: var(--synrgy-text);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* FAQ Container */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* FAQ Category */
.faq-category {
    margin-bottom: 3rem;
}

.faq-category-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
    color: var(--synrgy-title);
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 3px solid var(--synrgy-accent);
}

.faq-category-title::after {
    display: none;
}

.faq-category-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    background: linear-gradient(135deg, var(--synrgy-accent) 0%, var(--synrgy-title) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* FAQ Item */
.faq-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--synrgy-light);
    box-shadow: 0 4px 20px rgba(106, 164, 49, 0.1);
}

/* FAQ Question Button */
.faq-question {
    width: 100%;
    padding: 1.3rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Abel', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--synrgy-text);
    transition: all 0.3s ease;
    gap: 1rem;
}

.faq-question:hover {
    color: var(--synrgy-title);
}

.faq-question.active {
    color: var(--synrgy-title);
    background: var(--synrgy-light);
}

.faq-question > span:first-child {
    flex: 1;
}

/* FAQ Icon */
.faq-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--synrgy-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-question.active .faq-icon {
    background: var(--synrgy-accent);
    color: white;
    transform: rotate(180deg);
}

.faq-icon svg {
    width: 16px;
    height: 16px;
}

/* FAQ Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer.open {
    max-height: 600px;
}

.faq-answer-content {
    padding: 0 1.5rem 1.5rem;
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
}

.faq-answer-content p {
    margin-bottom: 1rem;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

.faq-answer-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.faq-answer-content li {
    margin-bottom: 0.5rem;
}

.faq-answer-content a {
    color: var(--synrgy-accent);
    text-decoration: none;
    font-weight: 600;
}

.faq-answer-content a:hover {
    color: var(--synrgy-title);
    text-decoration: underline;
}

.faq-answer-content strong {
    color: var(--synrgy-text);
}

/* FAQ Contact CTA */
.faq-contact {
    background: var(--synrgy-white);
    padding: 4rem 2rem;
    text-align: center;
}

.faq-contact-box {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--synrgy-title) 0%, #1a5a8a 100%);
    padding: 3rem;
    border-radius: 20px;
    color: white;
}

.faq-contact-box h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.faq-contact-box h3::after {
    display: none;
}

.faq-contact-box p {
    opacity: 0.9;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--synrgy-accent);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.faq-contact-btn:hover {
    background: white;
    color: var(--synrgy-title);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq-header {
        padding: 120px 1.5rem 3rem;
    }
    
    .faq-header h1 {
        font-size: 2.5rem;
    }
    
    .faq-header p {
        font-size: 1.1rem;
    }
    
    .faq-container {
        padding: 2rem 1.5rem;
    }

    .faq-category-title {
        font-size: 1.4rem;
    }
    
    .faq-category-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .faq-question {
        font-size: 1rem;
        padding: 1rem 1.2rem;
    }

    .faq-contact-box {
        padding: 2rem;
    }
    
    .faq-contact-box h3 {
        font-size: 1.5rem;
    }
}
/* =====================================================
   BRAND PAGES SPECIFIC STYLES (Smappee, Meross, Aqara)
   ===================================================== */

/* Common Brand Page Layout */
.page-smappee .hero-modern,
.page-meross .hero-modern,
.page-aqara .hero-modern {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.page-smappee .hero-modern::before,
.page-meross .hero-modern::before,
.page-aqara .hero-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(140, 197, 65, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(38, 119, 172, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Brand-specific body classes for future customization if needed */
.page-smappee,
.page-meross,
.page-aqara {
    /* Uses default SYNRGY colors for consistency */
}

/* Hero Badge Styling (consistent across brands) */
.page-smappee .hero-badge,
.page-meross .hero-badge,
.page-aqara .hero-badge {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--loxone-green);
    color: white;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(140, 197, 65, 0.3);
}

/* Hero Typography */
.page-smappee .hero-text h1,
.page-meross .hero-text h1,
.page-aqara .hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--synrgy-text);
    font-weight: bold;
}

.page-smappee .hero-text h1 .highlight,
.page-meross .hero-text h1 .highlight,
.page-aqara .hero-text h1 .highlight {
    color: var(--synrgy-title);
    position: relative;
}

/* Hero Features */
.page-smappee .hero-features,
.page-meross .hero-features,
.page-aqara .hero-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.page-smappee .hero-feature,
.page-meross .hero-feature,
.page-aqara .hero-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-smappee .hero-feature:hover,
.page-meross .hero-feature:hover,
.page-aqara .hero-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.page-smappee .hero-feature .feature-icon,
.page-meross .hero-feature .feature-icon,
.page-aqara .hero-feature .feature-icon {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-smappee .hero-feature div,
.page-meross .hero-feature div,
.page-aqara .hero-feature div {
    display: flex;
    flex-direction: column;
}

.page-smappee .hero-feature strong,
.page-meross .hero-feature strong,
.page-aqara .hero-feature strong {
    font-size: 1.3rem;
    color: var(--loxone-green);
    line-height: 1.2;
}

.page-smappee .hero-feature span,
.page-meross .hero-feature span,
.page-aqara .hero-feature span {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Hero Image Styling */
.page-smappee .hero-image,
.page-meross .hero-image,
.page-aqara .hero-image {
    position: relative;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.page-smappee .image-overlay,
.page-meross .image-overlay,
.page-aqara .image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(140, 197, 65, 0.1) 0%, rgba(38, 119, 172, 0.1) 100%);
    z-index: 1;
}

.page-smappee .image-placeholder,
.page-meross .image-placeholder,
.page-aqara .image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--loxone-green) 0%, var(--synrgy-accent) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.page-smappee .placeholder-icon,
.page-meross .placeholder-icon,
.page-aqara .placeholder-icon {
    font-size: 8rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.page-smappee .placeholder-text,
.page-meross .placeholder-text,
.page-aqara .placeholder-text {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Floating Card Animation */
.page-smappee .floating-card,
.page-meross .floating-card,
.page-aqara .floating-card {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 2;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.page-smappee .card-icon,
.page-meross .card-icon,
.page-aqara .card-icon {
    font-size: 3rem;
    line-height: 1;
}

.page-smappee .card-content,
.page-meross .card-content,
.page-aqara .card-content {
    display: flex;
    flex-direction: column;
}

.page-smappee .card-title,
.page-meross .card-title,
.page-aqara .card-title {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.page-smappee .card-value,
.page-meross .card-value,
.page-aqara .card-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--loxone-green);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.page-smappee .card-label,
.page-meross .card-label,
.page-aqara .card-label {
    font-size: 0.85rem;
    color: #adb5bd;
}

/* Application Cards Styling (consistent with Loxone) */
.page-smappee .application-header,
.page-meross .application-header,
.page-aqara .application-header {
    background: linear-gradient(135deg, var(--loxone-green) 0%, var(--synrgy-accent) 100%);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.page-smappee .application-header h3,
.page-meross .application-header h3,
.page-aqara .application-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

/* CTA Section Styling */
.page-smappee .cta-section,
.page-meross .cta-section,
.page-aqara .cta-section {
    padding: 6rem 0;
    background: var(--synrgy-title);
    color: white;
    text-align: center;
}

.page-smappee .cta-section h2,
.page-meross .cta-section h2,
.page-aqara .cta-section h2 {
    color: white;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.page-smappee .cta-section p,
.page-meross .cta-section p,
.page-aqara .cta-section p {
    font-size: 1.3rem;
    margin-bottom: 3rem;
    color: rgba(255,255,255,0.9);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Adjustments for Brand Pages */
@media (max-width: 968px) {
    .page-smappee .hero-content-wrapper,
    .page-meross .hero-content-wrapper,
    .page-aqara .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .page-smappee .hero-text h1,
    .page-meross .hero-text h1,
    .page-aqara .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .page-smappee .hero-image,
    .page-meross .hero-image,
    .page-aqara .hero-image {
        height: 400px;
    }
    
    .page-smappee .hero-features,
    .page-meross .hero-features,
    .page-aqara .hero-features {
        gap: 1rem;
    }
    
    .page-smappee .hero-feature,
    .page-meross .hero-feature,
    .page-aqara .hero-feature {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
    }
    
    .page-smappee .floating-card,
    .page-meross .floating-card,
    .page-aqara .floating-card {
        bottom: 20px;
        right: 20px;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .page-smappee .hero-text h1,
    .page-meross .hero-text h1,
    .page-aqara .hero-text h1 {
        font-size: 2rem;
    }
    
    .page-smappee .hero-feature,
    .page-meross .hero-feature,
    .page-aqara .hero-feature {
        flex: 1 1 100%;
    }
    
    .page-smappee .cta-section h2,
    .page-meross .cta-section h2,
    .page-aqara .cta-section h2 {
        font-size: 2.2rem;
    }
}

/* Brand Page Specific Stat Number Colors (using SYNRGY green) */
.page-smappee .stat-number,
.page-meross .stat-number,
.page-aqara .stat-number {
    color: var(--loxone-green);
}

/* Ensure consistent button styling */
.page-smappee .btn-primary,
.page-meross .btn-primary,
.page-aqara .btn-primary {
    background: var(--loxone-green);
    box-shadow: 0 4px 15px rgba(140, 197, 65, 0.3);
}

.page-smappee .btn-primary:hover,
.page-meross .btn-primary:hover,
.page-aqara .btn-primary:hover {
    background: var(--synrgy-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(106, 164, 49, 0.4);
}

.page-smappee .btn-secondary,
.page-meross .btn-secondary,
.page-aqara .btn-secondary {
    border-color: var(--synrgy-title);
    color: var(--synrgy-title);
}

.page-smappee .btn-secondary:hover,
.page-meross .btn-secondary:hover,
.page-aqara .btn-secondary:hover {
    background: var(--synrgy-title);
    color: white;
}

/* Feature List Styling - Matching Loxone Application List Style */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
    text-align: left;
}

.feature-list li {
    padding: 0.6rem 0;
    padding-left: 1.8rem;
    position: relative;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.6rem;
    color: var(--synrgy-accent);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Hover effect for list items */
.feature-list li:hover {
    color: var(--synrgy-text);
    padding-left: 2rem;
}

.feature-list li:hover::before {
    color: var(--synrgy-title);
    transform: scale(1.2);
    transition: all 0.2s ease;
}

/* =====================================================
   COOKIE BANNER
   ===================================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--synrgy-accent);
    z-index: 9999;
    display: none;
    animation: slideUp 0.4s ease-out;
}

.cookie-banner.show {
    display: block;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.cookie-text {
    flex: 1;
    min-width: 300px;
}

.cookie-text h3 {
    color: var(--synrgy-title);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.cookie-text p {
    color: var(--synrgy-text);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.cookie-text a {
    color: var(--synrgy-accent);
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 6px;
    font-family: 'Abel', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}

.cookie-btn-accept {
    background: var(--synrgy-accent);
    color: white;
}

.cookie-btn-accept:hover {
    background: #5a8f28;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(106, 164, 49, 0.3);
}

.cookie-btn-decline {
    background: transparent;
    color: var(--synrgy-text);
    border: 2px solid var(--synrgy-text);
}

.cookie-btn-decline:hover {
    background: var(--synrgy-text);
    color: white;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cookie-buttons {
        width: 100%;
    }
    
    .cookie-btn {
        flex: 1;
    }
}