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





   VHWN Cars Core Stylesheet





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











/* 1. CSS Theme Variables Override (for custom block dark mode styling) */





:root {





    --vhwn-gold: #C8A962;





    --vhwn-gold-hover: #B89A4F;





}











/* Dark Mode Overrides for FSE Block Styles */





html[data-theme="dark"],





.dark-mode {





    --wp--preset--color--base: #111111 !important;





    --wp--preset--color--neutral: #1a1a1a !important;





    --wp--preset--color--contrast: #FFFFFF !important;





    --wp--preset--color--muted: #9CA3AF !important;





    --wp--preset--color--border: #2D3748 !important;





}











/* Smooth transition for theme switching */





body {





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;





}











/* 2. Theme Toggle Switch */





.vhwn-theme-toggle {





    background: transparent;





    border: none;





    cursor: pointer;





    padding: 5px;





    display: inline-flex;





    align-items: center;





    justify-content: center;





    outline: none;





}











.vhwn-theme-toggle-track {





    width: 60px;





    height: 30px;





    background-color: var(--wp--preset--color--border);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 30px;





    position: relative;





    display: flex;





    align-items: center;





    justify-content: space-between;





    padding: 0 6px;





    transition: background-color 0.3s ease;





}











.vhwn-theme-toggle-sun,





.vhwn-theme-toggle-moon {





    font-size: 14px;





    user-select: none;





    line-height: 1;





}











.vhwn-theme-toggle-thumb {





    width: 24px;





    height: 24px;





    background-color: var(--vhwn-gold);





    border-radius: 50%;





    position: absolute;





    top: 2px;





    left: 2px;





    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);





    box-shadow: 0 2px 4px rgba(0,0,0,0.15);





}











.vhwn-theme-toggle.active .vhwn-theme-toggle-thumb {





    transform: translateX(30px);





    background-color: #FFFFFF;





}











/* 3. Floating WhatsApp Button */





.vhwn-whatsapp-float {





    position: fixed;





    bottom: 30px;





    right: 30px;





    background-color: #25D366;





    color: #FFFFFF !important;





    padding: 12px 20px;





    border-radius: 50px;





    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);





    z-index: 9999;





    display: flex;





    align-items: center;





    gap: 10px;





    font-family: inherit;





    font-size: 14px;





    font-weight: 600;





    text-decoration: none !important;





    animation: vhwn-pulse 3s infinite ease-in-out;





    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;





}











@keyframes vhwn-pulse {





    0% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }





    50% { box-shadow: 0 4px 22px rgba(37, 211, 102, 0.75); transform: scale(1.03); }





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





}











.vhwn-whatsapp-float:hover {





    transform: scale(1.08) translateY(-3px) !important;





    background-color: #20BA5A;





}











/* Header Action Button */





.vhwn-header-btn {





    background-color: var(--vhwn-gold);





    color: #FFFFFF !important;





    font-size: 0.8125rem;





    font-weight: 600;





    letter-spacing: 0.05em;





    text-transform: uppercase;





    padding: 8px 18px;





    border-radius: 4px;





    text-decoration: none !important;





    display: inline-flex;





    align-items: center;





    justify-content: center;





    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;





}











.vhwn-header-btn:hover {





    background-color: var(--vhwn-gold-hover);





    transform: translateY(-1px);





    box-shadow: 0 4px 12px rgba(200, 169, 98, 0.3);





}











/* Trust Bar Styling */





.vhwn-trust-bar {





    display: flex;





    flex-wrap: wrap;





    justify-content: center;





    gap: 16px 28px;





}











.vhwn-trust-item {





    font-size: 0.875rem;





    font-weight: 500;





    color: var(--wp--preset--color--contrast);





    display: flex;





    align-items: center;





    opacity: 0.9;





}











@media (max-width: 768px) {





    .vhwn-whatsapp-float {





        bottom: 20px;





        right: 20px;





        padding: 10px 16px;





        font-size: 13px;





    }





}











/* 4. Pricing Configurator */





.vhwn-configurator {





    margin: 40px auto;





    max-width: 1280px;





}











/* Size Selector Grid */





.vhwn-size-selector {





    display: grid;





    grid-template-columns: repeat(3, 1fr);





    gap: 20px;





    margin-bottom: 50px;





}











.vhwn-size-btn {





    background-color: var(--wp--preset--color--neutral);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 4px;





    padding: 24px 16px;





    cursor: pointer;





    text-align: center;





    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;





    outline: none;





    color: var(--wp--preset--color--contrast);





}











.vhwn-size-btn:hover {





    border-color: var(--vhwn-gold);





    transform: translateY(-2px);





}











.vhwn-size-btn.active {





    border-color: var(--vhwn-gold);





    background-color: var(--wp--preset--color--base);





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);





}











.vhwn-size-icon {





    font-size: 32px;





    margin-bottom: 12px;





}











.vhwn-size-name {





    font-size: 18px;





    font-weight: 600;





    margin-bottom: 6px;





    text-transform: uppercase;





    letter-spacing: 0.05em;





}











.vhwn-size-desc {





    font-size: 13px;





    color: var(--wp--preset--color--muted);





    line-height: 1.4;





}











/* Pricing Cards Grid */





.vhwn-pricing-cards {





    display: grid;





    grid-template-columns: repeat(4, 1fr);





    gap: 24px;





    margin-bottom: 30px;





}











.vhwn-price-card {





    background-color: var(--wp--preset--color--neutral);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 4px;





    padding: 30px 24px;





    display: flex;





    flex-direction: column;





    position: relative;





    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;





}











.vhwn-price-card:hover {





    transform: translateY(-5px);





    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);





}











.vhwn-card-badge {





    align-self: flex-start;





    background-color: var(--wp--preset--color--border);





    color: var(--wp--preset--color--contrast);





    font-size: 11px;





    font-weight: 600;





    text-transform: uppercase;





    padding: 4px 10px;





    border-radius: 2px;





    margin-bottom: 16px;





    letter-spacing: 0.05em;





}











.vhwn-price-card h3 {





    margin: 0 0 12px 0;





    font-size: 20px;





    font-weight: 600;





}











.vhwn-price-amount {





    font-size: 28px;





    font-weight: 700;





    color: var(--vhwn-gold);





    margin-bottom: 16px;





}











.price-val {





    transition: opacity 0.15s ease-in-out;





}











.vhwn-price-card p {





    font-size: 14px;





    color: var(--wp--preset--color--muted);





    margin: 0 0 24px 0;





    line-height: 1.5;





}











.vhwn-price-card ul {





    list-style: none;





    padding: 0;





    margin: 0 0 30px 0;





    font-size: 14px;





    line-height: 1.6;





}











.vhwn-price-card ul li {





    margin-bottom: 10px;





    position: relative;





    padding-left: 20px;





}











.vhwn-price-card ul li::before {





    content: "✓";





    color: var(--vhwn-gold);





    position: absolute;





    left: 0;





    font-weight: 700;





}











/* Call to Action Button */





.vhwn-config-cta {





    display: block;





    text-align: center;





    background-color: var(--wp--preset--color--contrast);





    color: var(--wp--preset--color--base) !important;





    text-transform: uppercase;





    font-size: 12px;





    font-weight: 600;





    padding: 12px 20px;





    text-decoration: none !important;





    letter-spacing: 0.05em;





    margin-top: auto;





    transition: background-color 0.3s ease, color 0.3s ease;





    border-radius: 2px;





}











.vhwn-config-cta:hover {





    background-color: var(--vhwn-gold);





    color: var(--wp--preset--color--base) !important;





}











/* Highlighted (Popular) Card */





.vhwn-price-card.popular {





    border-color: var(--vhwn-gold);





    box-shadow: 0 4px 25px rgba(200, 169, 98, 0.1);





}











.vhwn-price-card.popular .vhwn-card-badge {





    background-color: var(--vhwn-gold);





    color: #FFFFFF;





}











.vhwn-price-card.popular .vhwn-config-cta {





    background-color: var(--vhwn-gold);





    color: #FFFFFF !important;





}











.vhwn-price-card.popular .vhwn-config-cta:hover {





    background-color: var(--vhwn-gold-hover);





}











.vhwn-config-disclaimer {





    font-size: 12px;





    color: var(--wp--preset--color--muted);





    line-height: 1.5;





    margin-top: 30px;





}











/* Responsive Configurator */





@media (max-width: 1024px) {





    .vhwn-pricing-cards {





        grid-template-columns: repeat(2, 1fr);





    }





}











@media (max-width: 768px) {





    .vhwn-size-selector {





        grid-template-columns: 1fr;





        gap: 12px;





    }





    





    .vhwn-size-btn {





        padding: 16px;





    }





    





    .vhwn-pricing-cards {





        grid-template-columns: 1fr;





        gap: 20px;





    }





}











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





   Dark Background Readable Text Fix (Ensure text remains readable inside dark groups)





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





.has-dark-background-color {





    --wp--preset--color--base: #FFFFFF !important;





    --wp--preset--color--contrast: #FFFFFF !important;





    color: #FFFFFF !important;





}











.has-dark-background-color h1:not(.has-accent-color),





.has-dark-background-color h2:not(.has-accent-color),





.has-dark-background-color h3:not(.has-accent-color),





.has-dark-background-color h4:not(.has-accent-color),





.has-dark-background-color p:not(.has-accent-color),





.has-dark-background-color li:not(.has-accent-color),





.has-dark-background-color span:not(.has-accent-color),





.has-dark-background-color a:not(.wp-block-button__link):not(.has-accent-color) {





    color: #FFFFFF !important;





}











/* Hero / Dark Background CTA Button Overrides */





.has-dark-background-color .wp-block-button:not(.has-neutral-background-color) .wp-block-button__link {





    background-color: var(--vhwn-gold) !important;





    color: #111111 !important;





    border: 1px solid var(--vhwn-gold) !important;





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;





}











.has-dark-background-color .wp-block-button:not(.has-neutral-background-color) .wp-block-button__link:hover {





    background-color: transparent !important;





    color: var(--vhwn-gold) !important;





    border-color: var(--vhwn-gold) !important;





}











/* Secondary CTA Buttons (using class has-neutral-background-color in block editor) */





.has-dark-background-color .wp-block-button.has-neutral-background-color,





.has-dark-background-color .wp-block-button.has-neutral-background-color .wp-block-button__link {





    background-color: transparent !important;





    background: transparent !important;





}











.has-dark-background-color .wp-block-button.has-neutral-background-color .wp-block-button__link {





    color: #FFFFFF !important;





    border: 1px solid #FFFFFF !important;





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;





}











.has-dark-background-color .wp-block-button.has-neutral-background-color .wp-block-button__link:hover {





    background-color: #FFFFFF !important;





    color: #111111 !important;





    border-color: #FFFFFF !important;





}











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





   5. Clickable Services Cards & Equal Height





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





.wp-block-columns,





.wp-block-columns.wp-block-columns-is-layout-flex,





.wp-block-columns.wp-block-columns-is-layout-grid {





    align-items: stretch !important;





}











.wp-block-column.vhwn-clickable-card {





    display: flex !important;





    flex-direction: column !important;





    height: auto !important;





    min-height: 320px !important;





    align-self: stretch !important;





    flex-grow: 1 !important;





    cursor: pointer;





    border: 1px solid var(--wp--preset--color--border) !important;





    border-radius: 4px !important;





    box-sizing: border-box !important;





    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;





}











/* Push the "Lees meer" link to the absolute bottom of the card */





.vhwn-clickable-card > p:last-child {





    margin-top: auto !important;





    margin-bottom: 0 !important;





}











.vhwn-clickable-card:hover {





    transform: translateY(-5px);





    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;





    border-color: var(--vhwn-gold) !important;





}











/* In dark mode, lighter shadow */





html[data-theme="dark"] .vhwn-clickable-card:hover,





.dark-mode .vhwn-clickable-card:hover {





    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.03) !important;





    border: 1px solid var(--vhwn-gold) !important;





}











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





   6. Cookie Consent Banner





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





.vhwn-cookie-banner {





    position: fixed;





    bottom: -200px; /* Start hidden */





    left: 0;





    right: 0;





    background-color: #111111;





    color: #FFFFFF;





    border-top: 2px solid var(--vhwn-gold);





    padding: 20px 40px;





    z-index: 100000;





    display: flex;





    justify-content: space-between;





    align-items: center;





    gap: 30px;





    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.4);





    transition: bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);





    font-family: inherit;





}











.vhwn-cookie-banner.show {





    bottom: 0;





}











.vhwn-cookie-text {





    font-size: 13px;





    line-height: 1.5;





    flex-grow: 1;





}











.vhwn-cookie-text a {





    color: var(--vhwn-gold) !important;





    text-decoration: underline !important;





}











.vhwn-cookie-text a:hover {





    color: var(--vhwn-gold-hover) !important;





}











.vhwn-cookie-buttons {





    display: flex;





    gap: 15px;





    flex-shrink: 0;





}











.vhwn-cookie-btn {





    border-radius: 2px;





    font-size: 11px;





    font-weight: 600;





    text-transform: uppercase;





    letter-spacing: 0.05em;





    padding: 10px 20px;





    cursor: pointer;





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;





    outline: none;





}











.vhwn-cookie-btn.accept {





    background-color: var(--vhwn-gold);





    color: #FFFFFF;





    border: 1px solid var(--vhwn-gold);





}











.vhwn-cookie-btn.accept:hover {





    background-color: var(--vhwn-gold-hover);





    border-color: var(--vhwn-gold-hover);





}











.vhwn-cookie-btn.decline {





    background-color: transparent;





    color: #9CA3AF;





    border: 1px solid #4B5563;





}











.vhwn-cookie-btn.decline:hover {





    color: #FFFFFF;





    border-color: #9CA3AF;





}











@media (max-width: 768px) {





    .vhwn-cookie-banner {





        flex-direction: column;





        align-items: stretch;





        padding: 20px;





        gap: 15px;





        text-align: center;





    }





    





    .vhwn-cookie-buttons {





        justify-content: center;





    }





}











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





   7. Fluent Forms Premium Styling (VHWN Cars Detailing Intake Form)





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





.fluentform_wrapper_3 {





    background-color: var(--wp--preset--color--neutral) !important;





    padding: 30px !important;





    border-radius: 4px !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    transition: background-color 0.3s ease, border-color 0.3s ease !important;





}











.fluentform_wrapper_3 label {





    color: var(--wp--preset--color--contrast) !important;





    font-weight: 600 !important;





    font-size: 14px !important;





    letter-spacing: 0.02em !important;





    margin-bottom: 6px !important;





}











.fluentform_wrapper_3 .ff-el-form-control {





    background-color: var(--wp--preset--color--base) !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    color: var(--wp--preset--color--contrast) !important;





    border-radius: 4px !important;





    padding: 12px 16px !important;





    font-size: 14px !important;





    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;





}











.fluentform_wrapper_3 .ff-el-form-control:focus {





    border-color: var(--vhwn-gold) !important;





    box-shadow: 0 0 0 3px rgba(200, 169, 98, 0.15) !important;





    outline: none !important;





}











.fluentform_wrapper_3 select.ff-el-form-control {





    appearance: none !important;





    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;





    background-repeat: no-repeat !important;





    background-position: right 16px center !important;





    background-size: 16px !important;





    padding-right: 40px !important;





}











.fluentform_wrapper_3 textarea.ff-el-form-control {





    min-height: 120px !important;





    resize: vertical !important;





}











/* Submit Button Override */





.fluentform_wrapper_3 button.ff-btn-submit {





    background-color: var(--vhwn-gold) !important;





    color: #111111 !important;





    border: 1px solid var(--vhwn-gold) !important;





    padding: 14px 30px !important;





    font-size: 13px !important;





    font-weight: 600 !important;





    text-transform: uppercase !important;





    letter-spacing: 0.05em !important;





    border-radius: 4px !important;





    cursor: pointer !important;





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;





    width: auto !important;





    display: inline-block !important;





}











.fluentform_wrapper_3 button.ff-btn-submit:hover {





    background-color: transparent !important;





    color: var(--vhwn-gold) !important;





    border-color: var(--vhwn-gold) !important;





}











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





   8. Homepage Hero Image & Text Readability Enhancements





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





.vhwn-hero-group {





    position: relative !important;





    isolation: isolate !important;





    overflow: hidden !important;





    background-color: #000000 !important; /* Premium deep black base */





    background-attachment: fixed !important; /* Smooth parallax effect */





}











/* Elevate text and buttons above the dark overlay */





.vhwn-hero-group > * {





    position: relative !important;





    z-index: 2 !important;





}











/* Cinematic dual-gradient overlay */





.vhwn-hero-group::before {





    content: "" !important;





    position: absolute !important;





    top: 0 !important;





    left: 0 !important;





    right: 0 !important;





    bottom: 0 !important;





    /* Soft dark vertical vignette and horizontal gradient fade to ensure readability */





    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 100%),





                linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%) !important;





    z-index: 1 !important;





    pointer-events: none !important;





}











/* Text readability enhancements with smooth drop shadows */





.vhwn-hero-group h1,





.vhwn-hero-group p {





    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;





}











/* Small uppercase accent text glow for subtle premium touch */





.vhwn-hero-group p.has-accent-color {





    text-shadow: 0 2px 8px rgba(200, 169, 98, 0.2) !important;





}











/* Responsive adjustments */





@media (max-width: 768px) {





    .vhwn-hero-group {





        background-attachment: scroll !important; /* Disable parallax on mobile for smooth performance */





    }





    .vhwn-hero-group::before {





        /* Slightly darker on mobile since mobile screens are smaller and ambient light varies */





        background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.8) 100%) !important;





    }





}











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





   9. Sticky Header (Fixed top navigation menu bar with glassmorphism)





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





header.wp-block-template-part {





    position: sticky;





    top: 0;





    z-index: 9999;





    background-color: rgba(255, 255, 255, 0.85) !important;





    backdrop-filter: blur(12px);





    -webkit-backdrop-filter: blur(12px);





    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);





    border-bottom: 1px solid var(--wp--preset--color--border) !important;





}











html[data-theme="dark"] header.wp-block-template-part,





.dark-mode header.wp-block-template-part {





    background-color: rgba(17, 17, 17, 0.85) !important;





    border-bottom: 1px solid var(--wp--preset--color--border) !important;





}











/* Adjust top position for logged-in users with WordPress Admin Bar */





.admin-bar header.wp-block-template-part {





    top: 32px;





}











@media screen and (max-width: 782px) {





    .admin-bar header.wp-block-template-part {





        top: 46px;





    }





}











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





   10. Contact Form 7 Premium Styling & Layout





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





.wpcf7 {





    background-color: var(--wp--preset--color--neutral) !important;





    padding: 30px !important;





    border-radius: 4px !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    transition: background-color 0.3s ease, border-color 0.3s ease !important;





}











.wpcf7 label {





    color: var(--wp--preset--color--contrast) !important;





    font-weight: 600 !important;





    font-size: 14px !important;





    letter-spacing: 0.02em !important;





    margin-bottom: 6px !important;





    display: block;





}











.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {





    background-color: #141414 ;





    border: 1px solid var(--wp--preset--color--border) !important;





    color: var(--wp--preset--color--contrast) !important;





    border-radius: 4px !important;





    padding: 12px 16px !important;





    font-size: 14px !important;





    width: 100% !important;





    box-sizing: border-box !important;





    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;





}











.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {





    border-color: var(--vhwn-gold) !important;





    box-shadow: 0 0 0 3px rgba(200, 169, 98, 0.15) !important;





    outline: none !important;





}











.wpcf7 select.wpcf7-form-control {





    appearance: none !important;





    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;





    background-repeat: no-repeat !important;





    background-position: right 16px center !important;





    background-size: 16px !important;





    padding-right: 40px !important;





}











.wpcf7 textarea.wpcf7-form-control {





    min-height: 120px !important;





    resize: vertical !important;





}











/* Submit Button Override */





.wpcf7 input.wpcf7-submit {





    background-color: var(--vhwn-gold) !important;





    color: #111111 !important;





    border: 1px solid var(--vhwn-gold) !important;





    padding: 14px 30px !important;





    font-size: 13px !important;





    font-weight: 600 !important;





    text-transform: uppercase !important;





    letter-spacing: 0.05em !important;





    border-radius: 4px !important;





    cursor: pointer !important;





    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;





    width: auto !important;





    display: inline-block !important;





}











.wpcf7 input.wpcf7-submit:hover {





    background-color: transparent !important;





    color: var(--vhwn-gold) !important;





    border-color: var(--vhwn-gold) !important;





}











/* Grid Layout for Form Fields on Desktop */





.vhwn-cf7-grid {





    display: grid;





    grid-template-columns: repeat(2, 1fr);





    gap: 20px;





    margin-bottom: 10px;





}











@media (max-width: 768px) {





    .vhwn-cf7-grid {





        grid-template-columns: 1fr;





        gap: 15px;





    }





}











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





   11. Dark/Light Mode Logo Switch





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





/* By default (Light Mode), hide the dark-mode logo */





.vhwn-logo-dark-container {





    display: none !important;





}





.vhwn-logo-light-container {





    display: block !important;





}











/* In Dark Mode, hide the light logo and show the dark logo */





html[data-theme="dark"] .vhwn-logo-light-container,





.dark-mode .vhwn-logo-light-container {





    display: none !important;





}





html[data-theme="dark"] .vhwn-logo-dark-container,





.dark-mode .vhwn-logo-dark-container {





    display: block !important;





}











.wp-block-image.vhwn-logo-light-container img,





.wp-block-image.vhwn-logo-dark-container img {





    width: 300px !important;





    height: auto !important;





}











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





   13. Multi-Step Booking Wizard Styles





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











/* Centering and limiting the booking container width */





.vhwn-booking-wizard-container {





    max-width: 1000px;





    margin: 40px auto;





    background-color: var(--wp--preset--color--neutral);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 8px;





    padding: 40px;





    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);





    box-sizing: border-box;





}











/* Restricting Simply Schedule Appointments width */





.ssa_booking_iframe,





.ssa-booking-container {





    max-width: 800px !important;





    margin: 0 auto !important;





    border-radius: 8px !important;





    overflow: hidden !important;





}











/* Progress Step Indicator Bar */





.vhwn-wizard-steps {





    display: flex;





    justify-content: space-between;





    margin-bottom: 40px;





    border-bottom: 2px solid var(--wp--preset--color--border);





    padding-bottom: 20px;





    gap: 15px;





}











.vhwn-wizard-step {





    font-weight: 600;





    font-size: 14px;





    color: var(--wp--preset--color--muted);





    transition: color 0.3s ease;





    text-transform: uppercase;





    letter-spacing: 0.05em;





}











.vhwn-wizard-step.active {





    color: var(--vhwn-gold);





}











/* Wizard Panels Visibility */





.vhwn-wizard-panel {





    display: none;





}











.vhwn-wizard-panel.active {





    display: block;





}











.vhwn-wizard-panel h2 {





    font-size: 24px;





    margin-top: 0;





    margin-bottom: 24px;





    text-align: center;





}











.vhwn-wizard-panel > p {





    text-align: center;





    color: var(--wp--preset--color--muted);





    margin-bottom: 30px;





}











/* Grids for cards */





.vhwn-wizard-grid-3 {





    display: grid;





    grid-template-columns: repeat(3, 1fr);





    gap: 20px;





    margin-bottom: 30px;





}











.vhwn-wizard-grid-2 {





    display: grid;





    grid-template-columns: repeat(2, 1fr);





    gap: 20px;





    margin-bottom: 30px;





}











/* Individual Selection Cards */





.vhwn-wizard-card {





    background-color: var(--wp--preset--color--base);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 6px;





    padding: 24px;





    cursor: pointer;





    text-align: center;





    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;





    box-sizing: border-box;





}











.vhwn-wizard-card:hover {





    border-color: var(--vhwn-gold);





    transform: translateY(-3px);





    box-shadow: 0 4px 15px rgba(200, 169, 98, 0.1);





}











.vhwn-wizard-card.selected {





    border-color: var(--vhwn-gold);





    box-shadow: 0 0 0 2px var(--vhwn-gold);





    background-color: rgba(200, 169, 98, 0.05) !important;





}











.vhwn-wizard-card .card-icon {





    font-size: 36px;





    margin-bottom: 12px;





}











.vhwn-wizard-card h3 {





    margin: 12px 0 8px 0;





    font-size: 18px;





    font-weight: 600;





}











.vhwn-wizard-card p {





    margin: 0;





    font-size: 13px;





    color: var(--wp--preset--color--muted);





    line-height: 1.5;





}











.package-price {





    font-size: 22px !important;





    font-weight: 700;





    color: var(--vhwn-gold);





    margin: 8px 0 16px 0 !important;





}











/* Add-ons List Styling */





.vhwn-wizard-list {





    display: flex;





    flex-direction: column;





    gap: 15px;





    margin-bottom: 30px;





}











.vhwn-wizard-list-item {





    background-color: var(--wp--preset--color--base);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 6px;





    padding: 18px 24px;





    cursor: pointer;





    display: flex;





    align-items: flex-start;





    gap: 15px;





    transition: border-color 0.3s ease, background-color 0.3s ease;





    box-sizing: border-box;





}











.vhwn-wizard-list-item:hover {





    border-color: var(--vhwn-gold);





}











.vhwn-wizard-list-item.selected {





    border-color: var(--vhwn-gold);





    background-color: rgba(200, 169, 98, 0.05) !important;





}











.vhwn-wizard-list-item input[type="checkbox"] {





    margin-top: 4px;





    cursor: pointer;





    accent-color: var(--vhwn-gold);





    transform: scale(1.2);





}











.vhwn-wizard-list-item label {





    cursor: pointer;





    font-size: 14px;





    font-weight: 600;





    width: 100%;





}











.vhwn-wizard-list-item label p {





    margin: 6px 0 0 0;





    font-size: 12px;





    color: var(--wp--preset--color--muted);





    font-weight: 400;





    line-height: 1.4;





}











/* Wizard Navigation Bar */





.vhwn-wizard-nav {





    display: flex;





    justify-content: space-between;





    margin-top: 30px;





    border-top: 1px solid var(--wp--preset--color--border);





    padding-top: 24px;





}











.vhwn-wizard-nav button:disabled {





    opacity: 0.5;





    cursor: not-allowed;





    transform: none !important;





    box-shadow: none !important;





}











/* Summary Box Styling */





.vhwn-booking-summary {





    background-color: var(--wp--preset--color--base);





    border: 1px solid var(--wp--preset--color--border);





    border-radius: 6px;





    padding: 24px;





    margin-bottom: 40px;





    box-sizing: border-box;





}











.vhwn-booking-summary h3 {





    margin: 0 0 16px 0;





    font-size: 16px;





    text-transform: uppercase;





    letter-spacing: 0.05em;





    color: var(--vhwn-gold);





    font-weight: 700;





}











.vhwn-booking-summary p {





    margin: 0 0 10px 0;





    font-size: 14px;





    line-height: 1.5;





}











.vhwn-booking-summary p:last-child {





    margin-bottom: 0;





}











.vhwn-summary-total {





    font-size: 18px !important;





    border-top: 1px solid var(--wp--preset--color--border);





    padding-top: 16px;





    margin-top: 16px !important;





}











.vhwn-summary-total strong {





    color: var(--wp--preset--color--contrast);





}











/* Responsive Styles for Mobile Wizard */





@media (max-width: 768px) {





    .vhwn-booking-wizard-container {





        padding: 24px 16px;





        margin: 20px auto;





    }





    





    .vhwn-wizard-steps {





        flex-direction: column;





        gap: 10px;





        border-bottom: none;





        padding-bottom: 0;





    }





    





    .vhwn-wizard-step {





        padding: 10px;





        background-color: var(--wp--preset--color--base);





        border: 1px solid var(--wp--preset--color--border);





        border-radius: 4px;





        text-align: center;





        font-size: 12px;





    }





    





    .vhwn-wizard-step.active {





        border-color: var(--vhwn-gold);





        background-color: rgba(200, 169, 98, 0.05);





    }





    





    .vhwn-wizard-grid-3,





    .vhwn-wizard-grid-2 {





        grid-template-columns: 1fr;





        gap: 15px;





    }





    





    .vhwn-wizard-card {





        padding: 20px 16px;





    }





    





    .vhwn-wizard-list-item {





        padding: 14px 16px;





    }





}

















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





   12. Premium Visual enhancements for All Pages





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











/* Global Button Styling for Premium Look */





.wp-block-button__link,





.wp-element-button,





.wpcf7-submit {





    font-weight: 600 !important;





    letter-spacing: 0.05em !important;





    text-transform: uppercase !important;





    font-size: 13px !important;





    padding: 12px 28px !important;





    border-radius: 4px !important;





    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;





}











.wp-block-button__link:hover,





.wp-element-button:hover,





.wpcf7-submit:hover {





    transform: translateY(-2px);





    box-shadow: 0 4px 12px rgba(200, 169, 98, 0.15) !important;





}











/* Navigation Hover Underline Effect */





.wp-block-navigation .wp-block-navigation-item a {





    position: relative;





    padding: 8px 0;





    transition: color 0.3s ease;





}











.wp-block-navigation .wp-block-navigation-item a::after {





    content: '';





    position: absolute;





    bottom: 0;





    left: 0;





    width: 100%;





    height: 2px;





    background-color: var(--vhwn-gold);





    transform: scaleX(0);





    transform-origin: right;





    transition: transform 0.3s ease;





}











.wp-block-navigation .wp-block-navigation-item a:hover::after,





.wp-block-navigation .wp-block-navigation-item.current-menu-item a::after {





    transform: scaleX(1);





    transform-origin: left;





}











.wp-block-navigation .wp-block-navigation-item a:hover {





    color: var(--vhwn-gold) !important;





}











/* Micro-animations Configurator */





.vhwn-size-btn:hover .vhwn-size-icon {





    transform: scale(1.15) translateY(-2px);





}





.vhwn-size-icon {





    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);





    display: inline-block;





}











/* Native Details Accordions for FAQ page */





details {





    background-color: var(--wp--preset--color--neutral) !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    border-radius: 4px;





    margin-bottom: 16px;





    padding: 16px 20px;





    transition: border-color 0.3s ease, box-shadow 0.3s ease;





}





details[open] {





    border-color: var(--vhwn-gold) !important;





    box-shadow: 0 4px 12px rgba(200, 169, 98, 0.08);





}





summary {





    font-weight: 600;





    font-size: 16px;





    cursor: pointer;





    list-style: none; /* Hide default arrow */





    display: flex;





    justify-content: space-between;





    align-items: center;





    color: #ffffff;





}





summary::-webkit-details-marker {





    display: none; /* Hide Chrome arrow */





}





summary::after {





    content: '+';





    color: var(--vhwn-gold);





    font-size: 20px;





    font-weight: 400;





    transition: transform 0.3s ease;





}





details[open] summary::after {





    content: '−';





    transform: rotate(180deg);





}





details p {





    margin-top: 12px;





    margin-bottom: 0;





    color: var(--wp--preset--color--muted);





    line-height: 1.6;





}











/* Style services overview rows as sleek horizontal cards on /diensten/ */





.page-id-7 .wp-block-columns.alignwide {





    background-color: var(--wp--preset--color--neutral) !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    border-radius: 8px !important;





    padding: 32px !important;





    margin-bottom: 24px !important;





    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);





    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;





}





.page-id-7 .wp-block-columns.alignwide:hover {





    transform: translateY(-4px);





    border-color: var(--vhwn-gold) !important;





    box-shadow: 0 8px 24px rgba(200, 169, 98, 0.08);





}





.page-id-7 hr.wp-block-separator {





    display: none !important;





}











/* Style columns inside Werkwijze groups as steps cards */





#detailing .wp-block-column,





#polishing .wp-block-column,





#sales .wp-block-column,





#customization .wp-block-column,





#accessories .wp-block-column {





    background-color: var(--wp--preset--color--base) !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    border-radius: 4px !important;





    padding: 24px !important;





    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);





    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;





}





html[data-theme="dark"] #detailing .wp-block-column,





html[data-theme="dark"] #polishing .wp-block-column,





html[data-theme="dark"] #sales .wp-block-column,





html[data-theme="dark"] #customization .wp-block-column,





html[data-theme="dark"] #accessories .wp-block-column,





.dark-mode #detailing .wp-block-column,





.dark-mode #polishing .wp-block-column,





.dark-mode #sales .wp-block-column,





.dark-mode #customization .wp-block-column,





.dark-mode #accessories .wp-block-column {





    background-color: var(--wp--preset--color--neutral) !important;





}





#detailing .wp-block-column:hover,





#polishing .wp-block-column:hover,





#sales .wp-block-column:hover,





#customization .wp-block-column:hover,





#accessories .wp-block-column:hover {





    transform: translateY(-4px);





    border-color: var(--vhwn-gold) !important;





    box-shadow: 0 8px 24px rgba(200, 169, 98, 0.08);





}











/* Checkmark list styling */





.vhwn-checkmark-list {





    list-style: none !important;





    padding-left: 0 !important;





    margin-bottom: 24px !important;





}





.vhwn-checkmark-list li {





    position: relative;





    padding-left: 24px;





    margin-bottom: 8px;





    font-size: 14px;





    color: var(--wp--preset--color--muted);





}





.vhwn-checkmark-list li::before {





    content: '✓';





    position: absolute;





    left: 0;





    color: var(--vhwn-gold);





    font-weight: 700;





}











/* Quote Block Styling */





.vhwn-premium-quote {





    border-left: none !important;





    padding: 0 !important;





    position: relative;





    max-width: 700px;





    margin: 40px auto 0 !important;





}





.vhwn-premium-quote p {





    font-size: 24px !important;





    font-style: italic;





    line-height: 1.6 !important;





    color: #ffffff !important;





    font-family: var(--wp--preset--font-family--heading) !important;





    margin-bottom: 12px !important;





}





.vhwn-premium-quote cite {





    font-size: 14px !important;





    font-weight: 600;





    text-transform: uppercase;





    letter-spacing: 0.15em;





    color: var(--vhwn-gold) !important;





}





.vhwn-premium-quote::before {





    content: '“';





    position: absolute;





    top: -40px;





    left: 50%;





    transform: translateX(-50%);





    font-size: 90px;





    color: rgba(200, 169, 98, 0.15);





    font-family: Georgia, serif;





}











/* Custom Premium Scrollbar */





::-webkit-scrollbar {





    width: 10px;





    height: 10px;





}





::-webkit-scrollbar-track {





    background: var(--wp--preset--color--base);





}





::-webkit-scrollbar-thumb {





    background: var(--wp--preset--color--border);





    border-radius: 5px;





    border: 2px solid var(--wp--preset--color--base);





}





::-webkit-scrollbar-thumb:hover {





    background: var(--vhwn-gold);





}











/* Smooth Scroll Behavior */





html {





    scroll-behavior: smooth;





}











/* Footer Link Hovers */





footer.wp-block-template-part a {





    transition: color 0.3s ease;





}





footer.wp-block-template-part a:hover {





    color: var(--vhwn-gold) !important;





    text-decoration: none !important;





}











/* Simply Schedule Appointments Booking Widget Overrides */





.ssa-booking-container {





    font-family: 'Outfit', sans-serif !important;





    background-color: var(--wp--preset--color--neutral) !important;





    border: 1px solid var(--wp--preset--color--border) !important;





    border-radius: 8px !important;





    padding: 24px !important;





    color: #FFFFFF !important;





}





.ssa-booking-container * {





    font-family: 'Outfit', sans-serif !important;





}





.ssa-booking-container .v-btn {





    text-transform: uppercase !important;





    font-weight: 600 !important;





    letter-spacing: 0.05em !important;





    border-radius: 4px !important;





}





.ssa-booking-container .ssa-form-field-label {





    font-weight: 600 !important;





    color: #FFFFFF !important;





}





.ssa-booking-container .theme--light.v-icon {





    color: var(--vhwn-gold) !important;





}





.ssa-booking-container .v-picker__title,





.ssa-booking-container .v-date-picker-header {





    background-color: var(--wp--preset--color--base) !important;





}





.ssa-booking-container .v-btn--active {





    background-color: var(--vhwn-gold) !important;





    color: #111111 !important;





}











/* 15. CTA Spacing & Footer Gap Fixes */





.site-main .has-dark-background-color.alignfull .wp-block-group,





.wp-site-blocks > main .has-dark-background-color.alignfull .wp-block-group {





    display: flex !important;





    flex-direction: column !important;





    align-items: center !important;





    justify-content: center !important;





    text-align: center !important;





    width: 100% !important;





    max-width: 800px !important;





    margin-left: auto !important;





    margin-right: auto !important;





}











.site-main .has-dark-background-color.alignfull h2,





.site-main .has-dark-background-color.alignfull .wp-block-heading,





.wp-site-blocks > main .has-dark-background-color.alignfull h2,





.wp-site-blocks > main .has-dark-background-color.alignfull .wp-block-heading {





    text-align: center !important;





    margin-bottom: 20px !important;





    width: 100% !important;





}











.site-main .has-dark-background-color.alignfull p,





.wp-site-blocks > main .has-dark-background-color.alignfull p {





    text-align: center !important;





    margin-bottom: 30px !important;





    max-width: 600px !important;





    margin-left: auto !important;





    margin-right: auto !important;





}











.site-main .has-dark-background-color.alignfull .wp-block-buttons,





.wp-site-blocks > main .has-dark-background-color.alignfull .wp-block-buttons {





    justify-content: center !important;





    width: 100% !important;





}











/* Remove spacing between content and footer to eliminate white line gap */





.wp-site-blocks > footer.wp-block-template-part,





.wp-site-blocks > footer {





    margin-block-start: 0 !important;





    margin-top: 0 !important;





}











.wp-site-blocks > main,





.wp-site-blocks > .site-main {





    margin-block-end: 0 !important;





    margin-bottom: 0 !important;





}











/* 16. Mobile Fullscreen Navigation Overlay Styles */





@media (max-width: 768px) {





    /* Prevent background scrolling when menu is open */





    body:has(.is-menu-open) {





        overflow: hidden !important;





    }











    /* If the header contains an open menu, disable sticky positioning and backdrop-filter to break stacking context constraints */





    header.wp-block-template-part:has(.is-menu-open) {





        position: static !important;





        backdrop-filter: none !important;





        -webkit-backdrop-filter: none !important;





        background: transparent !important;





        z-index: 999999 !important;





    }











    /* Hide default header elements outside our custom mobile container */





    .wp-block-group.is-nowrap.is-layout-flex > .wc-block-mini-cart:not(.vhwn-mobile-header-extra .wc-block-mini-cart),





    .wp-block-group.is-nowrap.is-layout-flex > p:has(.vhwn-theme-toggle),





    .wp-block-group.is-nowrap.is-layout-flex > .vhwn-theme-toggle {





        display: none !important;





    }











    /* Move hamburger menu button to the right */





    .wp-block-navigation__responsive-container-open {





        margin-left: auto !important;





    }











    /* Mobile Menu Fullscreen Overlay Layout */





    .wp-block-navigation__responsive-container.is-menu-open {





        display: flex !important;





        position: fixed !important;





        top: 0 !important;





        left: 0 !important;





        width: 100vw !important;





        height: 100vh !important;





        z-index: 999999 !important;





        background-color: #111111 !important; /* solid premium dark background */





        color: #FFFFFF !important;





        align-items: center !important;





        justify-content: center !important;





        padding: 40px 20px !important;





        box-sizing: border-box !important;





    }











    /* Close button positioning at top right of viewport */





    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {





        position: absolute !important;





        top: 30px !important;





        right: 30px !important;





        z-index: 1000000 !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {





        display: flex !important;





        flex-direction: column !important;





        align-items: center !important;





        justify-content: center !important;





        width: 100% !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {





        display: flex !important;





        flex-direction: column !important;





        align-items: center !important;





        justify-content: center !important;





        gap: 24px !important;





        text-align: center !important;





        margin-bottom: 30px !important;





        padding: 0 !important;





    }











    /* Mobile overlay links design */





    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container li a {





        font-size: 1.5rem !important;





        font-weight: 600 !important;





        text-transform: uppercase !important;





        letter-spacing: 0.05em !important;





    }











    /* Custom mobile elements wrapper inside overlay */





    .vhwn-mobile-header-extra {





        display: flex !important;





        align-items: center !important;





        justify-content: center !important;





        gap: 30px !important;





        margin-top: 40px !important;





        padding-top: 30px !important;





        border-top: 1px solid var(--wp--preset--color--border) !important;





        width: 80% !important;





        max-width: 300px !important;





    }











    /* Ensure cart and toggle are inline-flex inside our custom container */





    .vhwn-mobile-header-extra .wc-block-mini-cart,





    .vhwn-mobile-header-extra .vhwn-theme-toggle {





        display: inline-flex !important;





    }





}

















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





   17. Premium Booking Wizard v2.0





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











/* --- Container reset --- */





.vhwn-booking-wizard-container {





    max-width: 960px !important;





    margin: 40px auto 120px !important;





    background: transparent !important;





    border: none !important;





    box-shadow: none !important;





    padding: 0 !important;





    box-sizing: border-box;





    position: relative;





}











/* --- Panel override (ensure old CSS doesn't interfere) --- */





.vhwn-booking-wizard-container .vhwn-wizard-panel {





    display: none !important;





    animation: none;





}





.vhwn-booking-wizard-container .vhwn-wizard-panel.active {





    display: block !important;





    animation: wizardPanelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);





}





@keyframes wizardPanelIn {





    from { opacity: 0; transform: translateY(16px); }





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





}











/* ---- Floating Price Bar ---- */





.vhwn-price-bar {





    position: fixed;





    bottom: 0; left: 0; right: 0;





    background: #0d0d0d;





    color: #fff;





    z-index: 9990;





    display: none;





    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);





    border-top: 1px solid rgba(200,169,98,0.2);





}





.vhwn-price-bar.visible { display: block; }





.vhwn-price-bar-inner {





    max-width: 960px;





    margin: 0 auto;





    display: flex;





    align-items: center;





    justify-content: space-between;





    gap: 20px;





    padding: 12px 24px;





}





.vhwn-price-bar-items {





    font-size: 0.775rem;





    color: #888;





    flex: 1;





    overflow: hidden;





    white-space: nowrap;





    text-overflow: ellipsis;





}





.vhwn-price-bar-right {





    display: flex;





    align-items: center;





    gap: 10px;





    flex-shrink: 0;





    white-space: nowrap;





}





.price-bar-label {





    font-size: 0.7rem;





    color: #666;





    text-transform: uppercase;





    letter-spacing: 0.07em;





}





.price-bar-amount {





    font-size: 1.35rem;





    font-weight: 800;





    color: #C8A962;





    letter-spacing: -0.02em;





}











/* ---- Step Nav Header ---- */





.vhwn-wizard-nav-header {





    padding: 28px 20px 20px;





    overflow-x: auto;





    -webkit-overflow-scrolling: touch;





}





.vhwn-wizard-steps-nav {





    display: flex;





    align-items: center;





    justify-content: center;





    min-width: 340px;





}





.vhwn-step-item {





    display: flex;





    flex-direction: column;





    align-items: center;





    gap: 6px;





    flex-shrink: 0;





    transition: all 0.3s ease;





}





.vhwn-step-circle {





    width: 38px;





    height: 38px;





    border-radius: 50%;





    background: #e5e7eb;





    color: #9ca3af;





    display: flex;





    align-items: center;





    justify-content: center;





    font-size: 0.85rem;





    font-weight: 700;





    position: relative;





    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;





}





.vhwn-step-item.active .vhwn-step-circle {





    background: #C8A962;





    color: #111;





    box-shadow: 0 0 0 4px rgba(200,169,98,0.2);





}





.vhwn-step-item.completed .vhwn-step-circle {





    background: #C8A962;





    color: #111;





}





.step-num {





    position: absolute;





    transition: opacity 0.2s;





}





.step-check {





    position: absolute;





    width: 16px;





    height: 16px;





    opacity: 0;





    transition: opacity 0.25s ease;





    stroke: #111;





}





.vhwn-step-item.completed .step-num  { opacity: 0; }





.vhwn-step-item.completed .step-check { opacity: 1; }





.vhwn-step-label {





    font-size: 0.65rem;





    text-transform: uppercase;





    letter-spacing: 0.06em;





    color: #9ca3af;





    font-weight: 600;





    transition: color 0.3s ease;





}





.vhwn-step-item.active .vhwn-step-label,





.vhwn-step-item.completed .vhwn-step-label {





    color: #C8A962;





}





.vhwn-step-connector {





    flex: 1;





    height: 2px;





    background: #e5e7eb;





    max-width: 56px;





    margin: 0 6px 22px;





    overflow: hidden;





    border-radius: 2px;





}





.connector-fill {





    height: 100%;





    width: 0%;





    background: #C8A962;





    transition: width 0.45s ease;





}











/* ---- Panel Inner ---- */





.vhwn-panel-inner {





    max-width: 800px;





    margin: 0 auto;





    padding: 0 20px 48px;





}





.vhwn-panel-header {





    text-align: center;





    margin-bottom: 36px;





}





.panel-step-badge {





    display: inline-block;





    background: rgba(200,169,98,0.12);





    color: #C8A962;





    font-size: 0.7rem;





    font-weight: 700;





    letter-spacing: 0.1em;





    text-transform: uppercase;





    padding: 4px 14px;





    border-radius: 20px;





    border: 1px solid rgba(200,169,98,0.25);





    margin-bottom: 14px;





}





.vhwn-panel-header h2 {





    font-size: clamp(1.4rem, 3vw, 2rem) !important;





    margin: 0 0 10px !important;





    text-align: center !important;





    padding: 0 !important;





}





.vhwn-panel-header > p {





    color: #6b7280;





    font-size: 0.95rem;





    margin: 0;





    text-align: center !important;





}





.optional-label {





    font-size: 0.75em;





    font-weight: 400;





    color: #9ca3af;





}











/* ---- STEP 1: Size Cards ---- */





.vhwn-size-grid {





    display: flex;





    flex-direction: column;





    gap: 14px;





    max-width: 580px;





    margin: 0 auto;





}





.vhwn-size-card {





    display: flex;





    align-items: center;





    gap: 18px;





    padding: 18px 22px;





    border: 2px solid #e5e7eb;





    border-radius: 14px;





    cursor: pointer;





    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;





    background: var(--wp--preset--color--base, #fff);





    position: relative;





    overflow: hidden;





    -webkit-user-select: none;





    user-select: none;





}





.vhwn-size-card:hover {





    border-color: #C8A962;





    transform: translateY(-2px);





    box-shadow: 0 6px 20px rgba(200,169,98,0.13);





}





.vhwn-size-card.selected {





    border-color: #C8A962;





    background: rgba(200,169,98,0.05) !important;





    box-shadow: 0 4px 16px rgba(200,169,98,0.18);





}





.vhwn-size-card.confirming {





    animation: cardPulse 0.55s ease;





}





@keyframes cardPulse {





    0%   { transform: scale(1); }





    30%  { transform: scale(1.025); border-color: #C8A962; }





    70%  { background: rgba(200,169,98,0.12); }





    100% { transform: scale(1); }





}





.size-card-icon {





    font-size: 2.6rem;





    line-height: 1;





    flex-shrink: 0;





}





.size-card-body { flex: 1; }





.size-card-body h3 {





    margin: 0 0 3px !important;





    font-size: 1.05rem !important;





    font-weight: 700 !important;





    padding: 0 !important;





    text-align: left !important;





}





.size-examples {





    font-size: 0.78rem;





    color: #9ca3af;





    margin: 0 0 8px !important;





    line-height: 1.4;





}





.size-bars {





    display: flex;





    gap: 5px;





}





.size-bars .bar {





    width: 26px;





    height: 5px;





    border-radius: 3px;





    background: #e5e7eb;





    transition: background 0.3s;





}





.size-bars .bar.filled { background: #C8A962; }





.size-card-check {





    width: 26px; height: 26px;





    border-radius: 50%;





    border: 2px solid #e5e7eb;





    display: flex;





    align-items: center;





    justify-content: center;





    flex-shrink: 0;





    transition: all 0.22s ease;





}





.size-card-check svg { width: 14px; height: 14px; stroke: transparent; transition: stroke 0.2s; }





.vhwn-size-card.selected .size-card-check { background: #C8A962; border-color: #C8A962; }





.vhwn-size-card.selected .size-card-check svg { stroke: #111; }











/* ---- STEP 2: Package Cards ---- */





.vhwn-packages-grid {





    display: grid;





    grid-template-columns: repeat(2, 1fr);





    gap: 18px;





    margin-bottom: 28px;





}





@media (max-width: 580px) {





    .vhwn-packages-grid { grid-template-columns: 1fr; }





}





.vhwn-pkg-card {





    border: 2px solid #e5e7eb;





    border-radius: 16px;





    overflow: hidden;





    cursor: pointer;





    transition: all 0.25s ease;





    background: var(--wp--preset--color--base, #fff);





    display: flex;





    flex-direction: column;





    -webkit-user-select: none;





    user-select: none;





}





.vhwn-pkg-card:hover {





    border-color: #C8A962;





    transform: translateY(-4px);





    box-shadow: 0 10px 28px rgba(200,169,98,0.15);





}





.vhwn-pkg-card.selected {





    border-color: #C8A962;





    background: rgba(200,169,98,0.04) !important;





    box-shadow: 0 6px 20px rgba(200,169,98,0.2);





}





.vhwn-pkg-card.popular { border-color: rgba(200,169,98,0.45); }





.vhwn-pkg-card.confirming { animation: cardPulse 0.55s ease; }





.pkg-badge-row { padding: 0 16px; min-height: 32px; }





.pkg-badge {





    display: inline-block;





    font-size: 0.7rem;





    font-weight: 700;





    padding: 4px 10px;





    border-radius: 0 0 8px 8px;





    letter-spacing: 0.04em;





}





.popular-badge { background: #C8A962; color: #111; }





.polish-badge  { background: rgba(200,169,98,0.13); color: #C8A962; border: 1px solid rgba(200,169,98,0.3); }





.empty-badge   { visibility: hidden; }





.pkg-card-body { padding: 14px 18px; flex: 1; }





.pkg-card-body h3 {





    font-size: 1.1rem !important;





    font-weight: 700 !important;





    margin: 0 0 8px !important;





    padding: 0 !important;





    text-align: left !important;





}





.pkg-price-wrap {





    display: flex;





    align-items: baseline;





    gap: 4px;





    margin-bottom: 8px;





}





.pkg-price-from { font-size: 0.78rem; color: #9ca3af; }





.pkg-price-amount {





    font-size: 1.65rem !important;





    font-weight: 800;





    color: #C8A962;





    letter-spacing: -0.025em;





    margin: 0 !important;





}





.pkg-desc {





    font-size: 0.8rem;





    color: #6b7280;





    margin: 0 0 12px !important;





    line-height: 1.5;





}





.pkg-features-list {





    list-style: none !important;





    padding: 0 !important;





    margin: 0 !important;





    display: flex;





    flex-direction: column;





    gap: 5px;





}





.pkg-features-list li {





    font-size: 0.78rem;





    padding-left: 18px;





    position: relative;





    color: inherit;





}





.pkg-features-list li::before {





    content: '✓';





    position: absolute;





    left: 0;





    color: #C8A962;





    font-weight: 700;





}





.pkg-card-footer {





    padding: 12px 18px;





    border-top: 1px solid #f0f0f0;





    display: flex;





    align-items: center;





    justify-content: space-between;





}





.pkg-select-label {





    font-size: 0.72rem;





    font-weight: 700;





    color: #9ca3af;





    text-transform: uppercase;





    letter-spacing: 0.06em;





    transition: color 0.2s;





}





.vhwn-pkg-card:hover .pkg-select-label,





.vhwn-pkg-card.selected .pkg-select-label { color: #C8A962; }





.pkg-card-check {





    width: 22px; height: 22px;





    border-radius: 50%;





    border: 2px solid #e5e7eb;





    display: flex; align-items: center; justify-content: center;





    transition: all 0.2s;





}





.pkg-card-check svg { width: 12px; height: 12px; stroke: transparent; transition: stroke 0.2s; }





.vhwn-pkg-card.selected .pkg-card-check { background: #C8A962; border-color: #C8A962; }





.vhwn-pkg-card.selected .pkg-card-check svg { stroke: #111; }











/* ---- STEP 3: Polish Sub-step ---- */





.vhwn-polish-choice {





    display: grid;





    grid-template-columns: 1fr 1fr;





    gap: 18px;





    max-width: 640px;





    margin: 0 auto 28px;





}





@media (max-width: 500px) { .vhwn-polish-choice { grid-template-columns: 1fr; } }





.vhwn-polish-card {





    border: 2px solid #e5e7eb;





    border-radius: 16px;





    padding: 26px 22px;





    cursor: pointer;





    transition: all 0.25s ease;





    background: var(--wp--preset--color--base, #fff);





    text-align: center;





    position: relative;





    -webkit-user-select: none;





    user-select: none;





}





.vhwn-polish-card.yes-card { border-color: rgba(200,169,98,0.35); }





.vhwn-polish-card:hover {





    border-color: #C8A962;





    transform: translateY(-3px);





    box-shadow: 0 10px 26px rgba(200,169,98,0.14);





}





.vhwn-polish-card.selected {





    border-color: #C8A962;





    background: rgba(200,169,98,0.06) !important;





    box-shadow: 0 6px 18px rgba(200,169,98,0.2);





}





.vhwn-polish-card.confirming { animation: cardPulse 0.55s ease; }





.polish-icon { font-size: 2.4rem; margin-bottom: 10px; line-height: 1; }





.polish-body h3 { font-size: 1rem !important; font-weight: 700 !important; margin: 0 0 7px !important; padding: 0 !important; text-align: center !important; }





.polish-price-line { font-size: 0.875rem; color: #C8A962; font-weight: 700; margin: 0 0 7px !important; }





.polish-desc { font-size: 0.78rem; color: #6b7280; margin: 0 !important; line-height: 1.5; }





.polish-card-check {





    position: absolute; top: 12px; right: 12px;





    width: 22px; height: 22px; border-radius: 50%;





    border: 2px solid #e5e7eb;





    display: flex; align-items: center; justify-content: center;





    transition: all 0.2s;





}





.polish-card-check svg { width: 12px; height: 12px; stroke: transparent; transition: stroke 0.2s; }





.vhwn-polish-card.selected .polish-card-check { background: #C8A962; border-color: #C8A962; }





.vhwn-polish-card.selected .polish-card-check svg { stroke: #111; }











/* ---- STEP 4: Add-on Rows ---- */





.vhwn-addons-list {





    display: flex;





    flex-direction: column;





    gap: 12px;





    max-width: 640px;





    margin: 0 auto 28px;





}





.vhwn-addon-row {





    display: flex;





    align-items: flex-start;





    gap: 16px;





    padding: 16px 20px;





    border: 2px solid #e5e7eb;





    border-radius: 12px;





    cursor: pointer;





    transition: all 0.22s ease;





    background: var(--wp--preset--color--base, #fff);





    -webkit-user-select: none;





    user-select: none;





}





.vhwn-addon-row:hover { border-color: #C8A962; box-shadow: 0 4px 14px rgba(200,169,98,0.1); }





.vhwn-addon-row.selected { border-color: #C8A962; background: rgba(200,169,98,0.04) !important; }





.addon-toggle-wrap { flex-shrink: 0; padding-top: 2px; }





.addon-checkbox { display: none; }





.addon-toggle-track {





    display: block;





    width: 46px; height: 26px;





    background: #e5e7eb;





    border-radius: 13px;





    position: relative;





    transition: background 0.22s ease;





    cursor: pointer;





    flex-shrink: 0;





}





.addon-toggle-track::after {





    content: '';





    position: absolute;





    width: 20px; height: 20px;





    background: #fff;





    border-radius: 50%;





    top: 3px; left: 3px;





    transition: transform 0.22s ease;





    box-shadow: 0 1px 5px rgba(0,0,0,0.18);





}





.addon-checkbox:checked + .addon-toggle-track { background: #C8A962; }





.addon-checkbox:checked + .addon-toggle-track::after { transform: translateX(20px); }





.addon-text { flex: 1; min-width: 0; }





.addon-title-row {





    display: flex;





    align-items: center;





    justify-content: space-between;





    gap: 10px;





    flex-wrap: wrap;





    margin-bottom: 4px;





}





.addon-name { font-weight: 700; font-size: 0.9rem; }





.addon-price-display { font-size: 0.875rem; color: #C8A962; font-weight: 700; white-space: nowrap; }





.addon-desc { font-size: 0.775rem; color: #6b7280; margin: 0; line-height: 1.45; }











/* ---- STEP 5: Summary Box ---- */





.vhwn-booking-wizard-container .vhwn-booking-summary {





    background: rgba(200,169,98,0.06) !important;





    border: 1px solid rgba(200,169,98,0.28) !important;





    border-radius: 12px !important;





    padding: 20px 24px !important;





    margin-bottom: 24px !important;





    max-width: 640px;





    margin-left: auto;





    margin-right: auto;





}





.vhwn-summary-grid { display: flex; flex-direction: column; gap: 9px; }





.summary-row { display: flex; gap: 12px; font-size: 0.875rem; }





.summary-key { font-weight: 700; min-width: 110px; flex-shrink: 0; }





.summary-val { color: #6b7280; }





.summary-addons { display: flex; flex-wrap: wrap; gap: 6px; }





.summary-tag {





    display: inline-flex; align-items: center; gap: 5px;





    background: rgba(200,169,98,0.13);





    border: 1px solid rgba(200,169,98,0.28);





    border-radius: 5px;





    padding: 2px 8px;





    font-size: 0.76rem;





    font-weight: 600;





}





.summary-tag-price { color: #C8A962; font-weight: 700; }





.summary-total-row {





    display: flex;





    align-items: center;





    justify-content: space-between;





    border-top: 1px solid rgba(200,169,98,0.28);





    padding-top: 12px;





    margin-top: 4px;





}





.summary-total-label { font-weight: 700; font-size: 0.875rem; }





.summary-total-amount { font-size: 1.5rem; font-weight: 800; color: #C8A962; letter-spacing: -0.02em; }











/* ---- Panel Nav Buttons ---- */





.vhwn-wizard-panel-nav {





    display: flex;





    align-items: center;





    justify-content: space-between;





    max-width: 640px;





    margin: 4px auto 0;





    padding-top: 8px;





}





.vhwn-btn-back {





    background: transparent !important;





    border: 2px solid #e5e7eb !important;





    color: #6b7280 !important;





    padding: 10px 22px !important;





    border-radius: 8px !important;





    cursor: pointer !important;





    font-size: 0.825rem !important;





    font-weight: 600 !important;





    letter-spacing: 0.02em !important;





    transition: all 0.2s !important;





    text-transform: none !important;





    box-shadow: none !important;





}





.vhwn-btn-back:hover { border-color: #C8A962 !important; color: #C8A962 !important; transform: none !important; }





.vhwn-btn-next {





    background: #C8A962 !important;





    border: none !important;





    color: #111 !important;





    padding: 12px 28px !important;





    border-radius: 8px !important;





    cursor: pointer !important;





    font-size: 0.8rem !important;





    font-weight: 800 !important;





    text-transform: uppercase !important;





    letter-spacing: 0.07em !important;





    transition: all 0.22s !important;





}





.vhwn-btn-next:hover {





    background: #b89a4f !important;





    transform: translateY(-1px) !important;





    box-shadow: 0 5px 14px rgba(200,169,98,0.4) !important;





}











/* ---- Dark Mode Support ---- */





html[data-theme="dark"] .vhwn-size-card,





.dark-mode .vhwn-size-card,





html[data-theme="dark"] .vhwn-pkg-card,





.dark-mode .vhwn-pkg-card,





html[data-theme="dark"] .vhwn-polish-card,





.dark-mode .vhwn-polish-card,





html[data-theme="dark"] .vhwn-addon-row,





.dark-mode .vhwn-addon-row {





    background: #1c1c1e !important;





    border-color: #2d2d2d;





}





html[data-theme="dark"] .vhwn-size-card:hover,





.dark-mode .vhwn-size-card:hover,





html[data-theme="dark"] .vhwn-pkg-card:hover,





.dark-mode .vhwn-pkg-card:hover,





html[data-theme="dark"] .vhwn-polish-card:hover,





.dark-mode .vhwn-polish-card:hover,





html[data-theme="dark"] .vhwn-addon-row:hover,





.dark-mode .vhwn-addon-row:hover { border-color: #C8A962; }





html[data-theme="dark"] .vhwn-step-circle,





.dark-mode .vhwn-step-circle { background: #2d2d2d; color: #888; }





html[data-theme="dark"] .vhwn-step-connector,





.dark-mode .vhwn-step-connector { background: #2d2d2d; }





html[data-theme="dark"] .pkg-card-footer,





.dark-mode .pkg-card-footer { border-color: #2d2d2d; }





html[data-theme="dark"] .addon-toggle-track,





.dark-mode .addon-toggle-track { background: #3d3d3d; }





html[data-theme="dark"] .vhwn-booking-wizard-container .vhwn-booking-summary,





.dark-mode .vhwn-booking-wizard-container .vhwn-booking-summary { background: rgba(200,169,98,0.08) !important; }





html[data-theme="dark"] .size-bars .bar,





.dark-mode .size-bars .bar { background: #2d2d2d; }





html[data-theme="dark"] .vhwn-step-label,





.dark-mode .vhwn-step-label { color: #555; }





html[data-theme="dark"] .vhwn-panel-header > p,





.dark-mode .vhwn-panel-header > p { color: #888; }





html[data-theme="dark"] .size-examples,





html[data-theme="dark"] .pkg-desc,





html[data-theme="dark"] .polish-desc,





html[data-theme="dark"] .addon-desc,





.dark-mode .size-examples,





.dark-mode .pkg-desc,





.dark-mode .polish-desc,





.dark-mode .addon-desc { color: #888; }











/* ---- Calendar wrapper ---- */





.vhwn-booking-calendar-wrapper {





    max-width: 640px;





    margin: 0 auto;





}











/* ---- Mobile adjustments ---- */





@media (max-width: 640px) {





    .vhwn-booking-wizard-container { margin: 20px auto 100px !important; }





    .vhwn-panel-inner { padding: 0 12px 40px !important; }





    .vhwn-wizard-nav-header { padding: 20px 12px 14px !important; }





    .vhwn-step-label { display: none; }





    .vhwn-step-connector { max-width: 32px !important; }





    .size-card-icon { font-size: 2rem !important; }





    .pkg-price-amount { font-size: 1.35rem !important; }





    .vhwn-price-bar-items { display: none; }





    .price-bar-amount { font-size: 1.1rem; }





}

















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





   18. Services Cards Background Images





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





.vhwn-clickable-card {





    position: relative !important;





    overflow: hidden !important;





    z-index: 1 !important;





    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;





}











.vhwn-clickable-card::before {





    content: "" !important;





    position: absolute !important;





    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;





    background-size: cover !important;





    background-position: center !important;





    background-repeat: no-repeat !important;





    opacity: 0.08 !important; /* Premium subtle opacity for high readability */





    z-index: -1 !important;





    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;





}











/* Hover effect */





.vhwn-clickable-card:hover {





    transform: translateY(-4px) !important;





    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;





}











.vhwn-clickable-card:hover::before {





    opacity: 0.16 !important;





    transform: scale(1.06) !important;





}











/* Assign images using URLs */





.vhwn-clickable-card.card-detailing::before {





    background-image: url('https://cars.vhwn.nl/wp-content/uploads/2026/07/card_detailing_bg.webp') !important;





}





.vhwn-clickable-card.card-polishing::before {





    background-image: url('https://cars.vhwn.nl/wp-content/uploads/2026/07/card_polishing_bg.webp') !important;





}





.vhwn-clickable-card.card-sales::before {





    background-image: url('https://cars.vhwn.nl/wp-content/uploads/2026/07/card_sales_bg.webp') !important;





}





.vhwn-clickable-card.card-customization::before {





    background-image: url('https://cars.vhwn.nl/wp-content/uploads/2026/07/card_customization_bg.webp') !important;





}





.vhwn-clickable-card.card-3dprint::before {





    background-image: url('https://cars.vhwn.nl/wp-content/uploads/2026/07/card_3dprint_bg.webp') !important;





}











/* Dark mode adjustment for visibility/contrast */





html[data-theme="dark"] .vhwn-clickable-card::before,





.dark-mode .vhwn-clickable-card::before {





    opacity: 0.12 !important;





}





html[data-theme="dark"] .vhwn-clickable-card:hover::before,





.dark-mode .vhwn-clickable-card:hover::before {





    opacity: 0.22 !important;





}

















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





   19. Homepage Before-After Results Showcase Grid





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





.vhwn-before-after-section {





    max-width: 960px !important;





    margin: 60px auto !important;





    padding: 0 24px !important;





    box-sizing: border-box;





}











.vhwn-before-after-section h2 {





    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;





    margin-bottom: 8px !important;





}











.vhwn-before-after-section p {





    margin-bottom: 32px !important;





}











.vhwn-before-after-grid {





    display: grid !important;





    grid-template-columns: repeat(2, 1fr) !important;





    gap: 30px !important;





    width: 100% !important;





    max-width: 960px !important;





    margin: 40px auto 0 !important;





    padding: 0 !important;





    box-sizing: border-box;





}











/* Force clean block-alignment and eliminate Gutenberg layout shifts */





.vhwn-before-after-grid > * {





    margin: 0 !important;





    padding: 0 !important;





    width: 100% !important;





    max-width: 100% !important;





}











.vhwn-ba-card {





    display: flex !important;





    flex-direction: column !important;





    box-sizing: border-box;





    width: 100% !important;





}











.vhwn-ba-slider {





    position: relative !important;





    width: 100% !important;





    aspect-ratio: 1/1 !important; /* Square images */





    overflow: hidden !important;





    border-radius: 12px !important;





    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;





    border: 1px solid var(--wp--preset--color--border, #e5e7eb) !important;





    box-sizing: border-box;





    touch-action: none; /* Disable native scrolling on touch for dragging */





    -webkit-user-select: none;





    user-select: none;





    background: #111;





    cursor: ew-resize !important;





}











.vhwn-ba-slider img {





    position: absolute !important;





    top: 0 !important;





    left: 0 !important;





    width: 100% !important;





    height: 100% !important;





    object-fit: cover !important;





    pointer-events: none !important;





}











/* Before image is shown on the right side */





.vhwn-ba-slider .img-before {





    z-index: 1 !important;





}











/* After image is clipped and shown on the left side */





.vhwn-ba-slider .img-after {





    z-index: 2 !important;





    clip-path: polygon(0 0, var(--exposure, 50%) 0, var(--exposure, 50%) 100%, 0 100%) !important;





}











/* Slider Handle styling: simple clean gold line */





.vhwn-ba-handle {





    position: absolute !important;





    top: 0 !important;





    bottom: 0 !important;





    width: 3px !important;





    background: #C8A962 !important; /* Gold line */





    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important;





    z-index: 3 !important;





    transform: translateX(-50%) !important;





    pointer-events: none !important;





}











.vhwn-ba-caption {





    margin-top: 12px !important;





    font-size: 0.825rem !important;





    font-weight: 700 !important;





    color: var(--wp--preset--color--contrast, #111) !important;





    text-transform: uppercase !important;





    letter-spacing: 0.05em !important;





    text-align: center !important;





}











/* Dark mode adjustments */





html[data-theme="dark"] .vhwn-ba-slider,





.dark-mode .vhwn-ba-slider {





    border-color: #2d2d2d !important;





}











/* Responsive Grid columns */





@media (max-width: 768px) {





    .vhwn-before-after-section {





        margin: 40px auto !important;





    }





    .vhwn-before-after-grid {





        grid-template-columns: 1fr !important;





        gap: 24px !important;





    }





}











/* Wiggling transition classes (temporary animation on load) */





.vhwn-ba-handle.vhwn-ba-wiggling {





    transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;





}





.vhwn-ba-slider.vhwn-ba-wiggling .img-after {





    transition: clip-path 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;





}











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





   20. Remove Whitespace Between Header Menu & Hero / Page Top Banners





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





.wp-site-blocks > header {





    margin-bottom: 0 !important;





}











.wp-site-blocks > main,





.wp-site-blocks > header + main,





main#wp--skip-link--target {





    margin-top: 0 !important;





    padding-top: 0 !important;





}











.entry-content,





.wp-block-post-content {





    margin-top: 0 !important;





    padding-top: 0 !important;





}











.entry-content > *:first-child,





.wp-block-post-content > *:first-child,





main > *:first-child {





    margin-top: 0 !important;





}











.vhwn-hero-group,





.entry-content > .alignfull:first-child,





.wp-block-post-content > .alignfull:first-child {





    margin-top: 0 !important;





}











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





   21. Interactive Service Wizard, Kennisbank & Cadeaubonnen Styles





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





.vhwn-wizard-container {





    max-width: 960px;





    margin: 40px auto;





    padding: 36px 28px;





    background: var(--wp--preset--color--neutral, #1a1a1a);





    border: 1px solid var(--wp--preset--color--border, #2d3748);





    border-radius: 12px;





    box-shadow: 0 10px 30px rgba(0,0,0,0.15);





}











.vhwn-wizard-header h2 {





    font-size: 1.85rem;





    font-weight: 700;





    margin-bottom: 8px;





}











.vhwn-wizard-header p {





    color: var(--wp--preset--color--muted, #9CA3AF);





    margin-bottom: 30px;





}











.vhwn-wizard-grid {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));





    gap: 20px;





    margin-top: 24px;





}











.vhwn-wizard-card {





    background: var(--wp--preset--color--base, #111);





    border: 1px solid var(--wp--preset--color--border, #2D3748);





    border-radius: 10px;





    padding: 24px 20px;





    text-align: left;





    cursor: pointer;





    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;





    color: inherit;





}











.vhwn-wizard-card:hover {





    transform: translateY(-4px);





    border-color: var(--vhwn-gold, #C8A962);





    box-shadow: 0 8px 24px rgba(200, 169, 98, 0.2);





}











.vhwn-wizard-icon {





    font-size: 2rem;





    margin-bottom: 12px;





}











.vhwn-wizard-card h4 {





    font-size: 1.1rem;





    font-weight: 600;





    margin-bottom: 8px;





}











.vhwn-wizard-card p {





    font-size: 0.875rem;





    color: var(--wp--preset--color--muted, #9CA3AF);





    margin: 0;





    line-height: 1.4;





}











.vhwn-wizard-back,





.vhwn-wizard-back-step2 {





    background: transparent;





    border: none;





    color: var(--vhwn-gold, #C8A962);





    font-weight: 600;





    font-size: 0.9rem;





    cursor: pointer;





    padding: 0;





    margin-bottom: 20px;





    display: inline-flex;





    align-items: center;





}











.vhwn-step-subtitle {





    font-size: 1.5rem;





    font-weight: 700;





    margin-bottom: 24px;





}











.vhwn-wizard-qgroup h4 {





    font-size: 1rem;





    font-weight: 600;





    margin-bottom: 12px;





}











.vhwn-wizard-options {





    display: flex;





    flex-direction: column;





    gap: 10px;





}











.vhwn-wizard-opt {





    background: var(--wp--preset--color--base, #111);





    border: 1px solid var(--wp--preset--color--border, #2D3748);





    border-radius: 6px;





    padding: 14px 18px;





    text-align: left;





    color: inherit;





    font-size: 0.95rem;





    cursor: pointer;





    transition: background 0.2s ease, border-color 0.2s ease;





}











.vhwn-wizard-opt.active,





.vhwn-wizard-opt:hover {





    background: var(--vhwn-gold, #C8A962);





    color: #FFFFFF !important;





    border-color: var(--vhwn-gold, #C8A962);





}











.vhwn-wizard-submit-btn,





.vhwn-result-btn {





    background: var(--vhwn-gold, #C8A962);





    color: #FFFFFF !important;





    font-weight: 600;





    font-size: 1rem;





    padding: 14px 28px;





    border-radius: 6px;





    border: none;





    cursor: pointer;





    margin-top: 28px;





    display: inline-block;





    text-decoration: none !important;





    transition: background-color 0.2s ease, transform 0.2s ease;





}











.vhwn-wizard-submit-btn:hover,





.vhwn-result-btn:hover {





    background: var(--vhwn-gold-hover, #B89A4F);





    transform: translateY(-2px);





}











.vhwn-wizard-result-card {





    background: var(--wp--preset--color--base, #111);





    border: 2px solid var(--vhwn-gold, #C8A962);





    border-radius: 12px;





    padding: 32px 28px;





    position: relative;





}











.vhwn-result-badge {





    position: absolute;





    top: -14px;





    right: 24px;





    background: var(--vhwn-gold, #C8A962);





    color: #FFFFFF;





    font-size: 0.75rem;





    font-weight: 700;





    text-transform: uppercase;





    letter-spacing: 0.08em;





    padding: 4px 14px;





    border-radius: 20px;





}











.vhwn-result-details {





    margin: 20px 0;





    padding: 16px;





    background: rgba(200, 169, 98, 0.08);





    border-left: 4px solid var(--vhwn-gold, #C8A962);





    border-radius: 4px;





    font-size: 0.9rem;





}











.vhwn-kennisbank-grid {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));





    gap: 28px;





    margin-top: 30px;





}











.vhwn-kennisbank-card {





    background: var(--wp--preset--color--neutral, #1a1a1a);





    border: 1px solid var(--wp--preset--color--border, #2d3748);





    border-radius: 10px;





    padding: 24px;





    display: flex;





    flex-direction: column;





    justify-content: space-between;





    transition: transform 0.25s ease, border-color 0.25s ease;





}











.vhwn-kennisbank-card:hover {





    transform: translateY(-4px);





    border-color: var(--vhwn-gold, #C8A962);





}











.vhwn-kb-tag {





    display: inline-block;





    background: rgba(200, 169, 98, 0.15);





    color: var(--vhwn-gold, #C8A962);





    font-size: 0.75rem;





    font-weight: 700;





    text-transform: uppercase;





    padding: 4px 10px;





    border-radius: 4px;





    margin-bottom: 12px;





}











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





   22. Dropdown Menu Styling Overrides & Header Spacing





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





.wp-block-navigation .has-child .wp-block-navigation__submenu-container {





    background-color: var(--wp--preset--color--base, #111111) !important;





    border: 1px solid var(--wp--preset--color--border, #2D3748) !important;





    border-radius: 8px !important;





    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;





    padding: 8px 0 !important;





}











.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {





    padding: 10px 20px !important;





    font-size: 0.85rem !important;





    font-weight: 500 !important;





    white-space: nowrap !important;





    transition: background-color 0.2s ease, color 0.2s ease !important;





}











.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {





    background-color: rgba(200, 169, 98, 0.12) !important;





    color: var(--vhwn-gold, #C8A962) !important;





}











/* Ensure Logo has plenty of space and never gets squished */





.vhwn-logo-light-container img,





.vhwn-logo-dark-container img {





    max-height: 44px !important;





    width: auto !important;





    object-fit: contain !important;





}











/* Prevent ALL Top-Level Menu Items from Text Wrapping onto 2 lines */





.wp-block-navigation .wp-block-navigation-item__content,





.wp-block-navigation .wp-block-navigation-item__label,





.wp-block-navigation-item {





    white-space: nowrap !important;





    word-break: keep-all !important;





}











/* Floating Theme Toggle (Bottom-Left Symmetrical Position) */





.vhwn-theme-toggle-float-container {





    position: fixed;





    bottom: 30px;





    left: 30px;





    z-index: 9999;





}











.vhwn-theme-toggle-float-btn {





    background: var(--wp--preset--color--neutral, #1a1a1a) !important;





    border: 1px solid var(--wp--preset--color--border, #2d3748) !important;





    border-radius: 50px !important;





    padding: 6px 12px !important;





    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;





    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease !important;





}











.vhwn-theme-toggle-float-btn:hover {





    transform: scale(1.08) translateY(-2px) !important;





    border-color: var(--vhwn-gold, #C8A962) !important;





}











@media (max-width: 768px) {





    .vhwn-theme-toggle-float-container {





        bottom: 20px;





        left: 20px;





    }





}



































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





   VHWN DUAL BRAND HERO & OCCASIONS SHOWCASE (VHWN Cars & Detailing)





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











.vhwn-dual-hero {





    position: relative;





    padding: 60px 20px 80px;





    background: radial-gradient(circle at 50% 0%, #1c1c1c 0%, #111111 100%);





    color: #ffffff;





    border-bottom: 1px solid rgba(200, 169, 98, 0.2);





    overflow: hidden;





    margin-bottom: 50px;





}











.vhwn-hero-header {





    text-align: center;





    max-width: 900px;





    margin: 0 auto 50px;





}











.vhwn-hero-badge {





    display: inline-block;





    padding: 6px 16px;





    background: rgba(200, 169, 98, 0.12);





    border: 1px solid rgba(200, 169, 98, 0.4);





    color: #C8A962;





    border-radius: 30px;





    font-size: 13px;





    font-weight: 600;





    text-transform: uppercase;





    letter-spacing: 1px;





    margin-bottom: 20px;





}











.vhwn-hero-title {





    font-size: clamp(32px, 5vw, 54px);





    font-weight: 800;





    line-height: 1.15;





    margin-bottom: 16px;





    color: #ffffff;





}











.vhwn-gold {





    color: #C8A962;





    background: linear-gradient(135deg, #dfc78d 0%, #C8A962 50%, #9a7e3d 100%);





    -webkit-background-clip: text;





    -webkit-text-fill-color: transparent;





}











.vhwn-hero-subtitle {





    font-size: clamp(16px, 2vw, 19px);





    color: #a0a0a0;





    line-height: 1.6;





    max-width: 760px;





    margin: 0 auto;





}











/* Split Cards */





.vhwn-split-cards {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));





    gap: 30px;





    max-width: 1200px;





    margin: 0 auto 50px;





}











.vhwn-split-card {





    background: rgba(25, 25, 25, 0.75);





    backdrop-filter: blur(12px);





    -webkit-backdrop-filter: blur(12px);





    border: 1px solid rgba(255, 255, 255, 0.08);





    border-radius: 18px;





    padding: 40px 32px;





    cursor: pointer;





    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);





    display: flex;





    flex-direction: column;





    position: relative;





    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);





}











.vhwn-split-card:hover {





    transform: translateY(-8px);





    border-color: rgba(200, 169, 98, 0.5);





    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(200, 169, 98, 0.15);





}











.vhwn-card-tag {





    align-self: flex-start;





    font-size: 11px;





    font-weight: 700;





    text-transform: uppercase;





    letter-spacing: 1.5px;





    padding: 4px 12px;





    border-radius: 6px;





    margin-bottom: 18px;





    background: rgba(255, 255, 255, 0.07);





    color: #d1d5db;





}











.vhwn-card-cars .vhwn-card-tag {





    background: rgba(200, 169, 98, 0.15);





    color: #C8A962;





}











.vhwn-card-icon {





    font-size: 40px;





    margin-bottom: 15px;





}











.vhwn-split-card h2 {





    font-size: 28px;





    font-weight: 700;





    margin-bottom: 8px;





    color: #ffffff;





}











.vhwn-card-location {





    font-size: 13px;





    color: #C8A962;





    font-weight: 600;





    margin-bottom: 18px;





}











.vhwn-card-desc {





    font-size: 15px;





    color: #9ca3af;





    line-height: 1.6;





    margin-bottom: 24px;





}











.vhwn-card-usps {





    list-style: none;





    padding: 0;





    margin: 0 0 30px;





    font-size: 14px;





    color: #e5e7eb;





}











.vhwn-card-usps li {





    margin-bottom: 10px;





    display: flex;





    align-items: center;





    gap: 8px;





}











.vhwn-card-footer {





    margin-top: auto;





}











/* Hero Trust Bar */





.vhwn-hero-quick-trust {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));





    gap: 20px;





    max-width: 1000px;





    margin: 0 auto;





    padding-top: 30px;





    border-top: 1px solid rgba(255, 255, 255, 0.08);





}











.vhwn-trust-item {





    display: flex;





    align-items: center;





    gap: 12px;





}











.trust-icon {





    font-size: 26px;





}











.vhwn-trust-item strong {





    display: block;





    font-size: 14px;





    color: #ffffff;





}











.vhwn-trust-item small {





    color: #888;





    font-size: 12px;





}











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





   OCCASIONS GRID & CAR CARDS





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











.vhwn-occasions-wrapper {





    max-width: 1240px;





    margin: 0 auto 50px;





    padding: 0 20px;





}











.vhwn-occasions-grid {





    display: grid;





    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));





    gap: 30px;





}











.vhwn-car-card {





    background: #181818;





    border: 1px solid rgba(255, 255, 255, 0.08);





    border-radius: 14px;





    overflow: hidden;





    transition: all 0.3s ease;





    display: flex;





    flex-direction: column;





}











.vhwn-car-card:hover {





    transform: translateY(-6px);





    border-color: rgba(200, 169, 98, 0.4);





    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);





}











.vhwn-car-card-img-wrap {





    position: relative;





    width: 100%;





    height: 230px;





    overflow: hidden;





    background: #222;





}











.vhwn-car-img {





    width: 100%;





    height: 100%;





    object-fit: cover;





    transition: transform 0.5s ease;





}











.vhwn-car-card:hover .vhwn-car-img {





    transform: scale(1.05);





}











.vhwn-car-badge {





    position: absolute;





    top: 14px;





    left: 14px;





    padding: 5px 12px;





    border-radius: 20px;





    font-size: 11px;





    font-weight: 700;





    text-transform: uppercase;





    letter-spacing: 0.5px;





    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);





}











.badge-new { background: #C8A962; color: #111; }





.badge-stock { background: #1b5e20; color: #fff; }





.badge-reserved { background: #e65100; color: #fff; }





.badge-sold { background: #b71c1c; color: #fff; }











.vhwn-car-card-price {





    position: absolute;





    bottom: 12px;





    right: 12px;





    background: rgba(17, 17, 17, 0.88);





    backdrop-filter: blur(8px);





    padding: 6px 14px;





    border-radius: 8px;





    border: 1px solid rgba(200, 169, 98, 0.4);





    text-align: right;





}











.price-val {





    font-size: 18px;





    font-weight: 800;





    color: #C8A962;





    display: block;





}











.price-type {





    font-size: 10px;





    color: #999;





    text-transform: uppercase;





    display: block;





}











.vhwn-car-card-body {





    padding: 24px;





    display: flex;





    flex-direction: column;





    flex-grow: 1;





}











.vhwn-car-title {





    font-size: 19px;





    font-weight: 700;





    margin: 0 0 16px;





    line-height: 1.3;





}











.vhwn-car-title a {





    color: #ffffff;





    text-decoration: none;





    transition: color 0.2s;





}











.vhwn-car-title a:hover {





    color: #C8A962;





}











.vhwn-car-specs {





    display: grid;





    grid-template-columns: repeat(2, 1fr);





    gap: 10px;





    padding: 12px 14px;





    background: rgba(255, 255, 255, 0.03);





    border-radius: 8px;





    margin-bottom: 16px;





}











.spec-item {





    font-size: 13px;





    color: #ccc;





    display: flex;





    align-items: center;





    gap: 6px;





}











.spec-icon {





    font-size: 14px;





}











.vhwn-car-tags {





    display: flex;





    flex-wrap: wrap;





    gap: 6px;





    margin-bottom: 20px;





}











.car-tag {





    font-size: 11px;





    background: rgba(255, 255, 255, 0.06);





    color: #aaa;





    padding: 3px 8px;





    border-radius: 4px;





}











.tag-more {





    color: #C8A962;





    background: rgba(200, 169, 98, 0.1);





}











.vhwn-car-actions {





    display: grid;





    grid-template-columns: 1fr 1fr;





    gap: 10px;





    margin-top: auto;





}











/* Button styles */





.vhwn-btn {





    display: inline-flex;





    align-items: center;





    justify-content: center;





    padding: 12px 20px;





    border-radius: 8px;





    font-weight: 600;





    font-size: 14px;





    text-decoration: none !important;





    transition: all 0.25s ease;





    cursor: pointer;





    text-align: center;





}











.vhwn-btn-gold {





    background: #C8A962;





    color: #111111 !important;





    border: 1px solid #C8A962;





}











.vhwn-btn-gold:hover {





    background: #dfc78d;





    transform: translateY(-2px);





    box-shadow: 0 4px 14px rgba(200, 169, 98, 0.4);





}











.vhwn-btn-outline {





    background: transparent;





    color: #ffffff !important;





    border: 1px solid rgba(255, 255, 255, 0.3);





}











.vhwn-btn-outline:hover {





    border-color: #C8A962;





    color: #C8A962 !important;





    background: rgba(200, 169, 98, 0.08);





}











.vhwn-btn-secondary {





    background: #252525;





    color: #ffffff !important;





    border: 1px solid #333;





}











.vhwn-btn-secondary:hover {





    background: #333;





    border-color: #555;





}











.vhwn-btn-wa {





    background: #25D366;





    color: #ffffff !important;





    border: 1px solid #25D366;





}











.vhwn-btn-wa:hover {





    background: #20ba59;





    transform: translateY(-2px);





    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);





}











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





   SINGLE CAR VIEW





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











.vhwn-single-car-wrapper {





    max-width: 1200px;





    margin: 40px auto 60px;





    padding: 0 20px;





}











.vhwn-single-car-summary {





    background: #181818;





    border: 1px solid rgba(200, 169, 98, 0.25);





    border-radius: 16px;





    padding: 30px;





    margin-bottom: 40px;





    display: flex;





    flex-wrap: wrap;





    align-items: center;





    justify-content: space-between;





    gap: 20px;





}











.vhwn-single-badge-row {





    display: flex;





    align-items: center;





    gap: 12px;





}











.vhwn-badge-status {





    background: #C8A962;





    color: #111;





    font-weight: 700;





    padding: 6px 14px;





    border-radius: 20px;





    font-size: 13px;





    text-transform: uppercase;





}











.vhwn-location-badge {





    color: #aaa;





    font-size: 13px;





}











.single-price {





    font-size: 32px;





    font-weight: 800;





    color: #C8A962;





    display: block;





}











.single-label {





    font-size: 12px;





    color: #888;





}











.vhwn-single-cta-group {





    display: flex;





    flex-wrap: wrap;





    gap: 12px;





}











.vhwn-single-car-details-grid {





    display: grid;





    grid-template-columns: 2fr 1fr;





    gap: 40px;





}











@media (max-width: 860px) {





    .vhwn-single-car-details-grid {





        grid-template-columns: 1fr;





    }





}











.vhwn-specs-table {





    width: 100%;





    border-collapse: collapse;





    margin-bottom: 30px;





    background: #181818;





    border-radius: 10px;





    overflow: hidden;





}











.vhwn-specs-table th, .vhwn-specs-table td {





    padding: 12px 18px;





    border-bottom: 1px solid #282828;





    font-size: 14px;





}











.vhwn-specs-table th {





    color: #888;





    text-align: left;





    width: 35%;





    font-weight: 600;





}











.vhwn-specs-table td {





    color: #ffffff;





    font-weight: 500;





}











.vhwn-options-list {





    display: flex;





    flex-wrap: wrap;





    gap: 10px;





    margin-bottom: 35px;





}











.vhwn-option-pill {





    background: rgba(200, 169, 98, 0.1);





    border: 1px solid rgba(200, 169, 98, 0.3);





    color: #e5e7eb;





    padding: 6px 14px;





    border-radius: 20px;





    font-size: 13px;





}











.vhwn-sidebar-card {





    background: #181818;





    border: 1px solid rgba(255, 255, 255, 0.08);





    border-radius: 14px;





    padding: 25px;





    position: sticky;





    top: 30px;





}











.vhwn-sidebar-card h4 {





    margin-top: 0;





    color: #C8A962;





    font-size: 18px;





}











.vhwn-check-list {





    list-style: none;





    padding: 0;





    margin: 0;





}











.vhwn-check-list li {





    margin-bottom: 14px;





    font-size: 14px;





    color: #ccc;





    line-height: 1.5;





}











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





   FULLSCREEN DIAGONAL SPLIT HERO (VHWN CARS vs VHWN DETAILING)





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











.vhwn-diagonal-split-hero {





    position: relative;





    width: 100%;





    height: 85vh;





    min-height: 600px;





    max-height: 850px;





    display: flex;





    overflow: hidden;





    background: #0d0d0d;





    border-bottom: 2px solid rgba(200, 169, 98, 0.3);





}











.vhwn-diag-panel {





    position: relative;





    flex: 1;





    height: 100%;





    display: flex;





    align-items: center;





    justify-content: center;





    padding: 60px 40px;





    cursor: pointer;





    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);





    overflow: hidden;





    z-index: 1;





}











/* Left panel: Cars */





.vhwn-diag-cars {





    background: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=85') center/cover no-repeat;





    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);





    margin-right: -5%;





}











/* Right panel: Detailing */





.vhwn-diag-detailing {





    background: url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&w=1600&q=85') center/cover no-repeat;





    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);





    margin-left: -5%;





}











/* Hover expansion */





.vhwn-diag-cars:hover {





    flex: 1.4;





    z-index: 2;





}











.vhwn-diag-detailing:hover {





    flex: 1.4;





    z-index: 2;





}











.vhwn-diag-bg-overlay {





    position: absolute;





    inset: 0;





    background: linear-gradient(135deg, rgba(10, 10, 10, 0.88) 0%, rgba(17, 17, 17, 0.72) 100%);





    transition: background 0.4s ease;





}











.vhwn-diag-cars:hover .vhwn-diag-bg-overlay {





    background: linear-gradient(135deg, rgba(10, 10, 10, 0.75) 0%, rgba(200, 169, 98, 0.2) 100%);





}











.vhwn-diag-detailing:hover .vhwn-diag-bg-overlay {





    background: linear-gradient(135deg, rgba(200, 169, 98, 0.2) 0%, rgba(10, 10, 10, 0.75) 100%);





}











.vhwn-diag-content {





    position: relative;





    z-index: 3;





    max-width: 480px;





    text-align: center;





    transition: transform 0.4s ease;





}











.vhwn-diag-panel:hover .vhwn-diag-content {





    transform: scale(1.04);





}











.vhwn-diag-badge {





    display: inline-flex;





    align-items: center;





    gap: 8px;





    padding: 6px 16px;





    background: rgba(17, 17, 17, 0.85);





    border: 1px solid #C8A962;





    border-radius: 30px;





    color: #C8A962;





    font-size: 13px;





    font-weight: 800;





    letter-spacing: 1.5px;





    text-transform: uppercase;





    margin-bottom: 20px;





    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);





}











.vhwn-diag-title {





    font-size: clamp(30px, 4vw, 48px);





    font-weight: 800;





    color: #ffffff;





    line-height: 1.15;





    margin-bottom: 12px;





}











.vhwn-diag-location {





    font-size: 14px;





    color: #C8A962;





    font-weight: 600;





    margin-bottom: 16px;





}











.vhwn-diag-desc {





    font-size: 15px;





    color: #d1d5db;





    line-height: 1.6;





    margin-bottom: 26px;





}











.vhwn-diag-center-badge {





    position: absolute;





    top: 50%;





    left: 50%;





    transform: translate(-50%, -50%);





    z-index: 10;





    pointer-events: none;





    background: #111111;





    border: 2px solid #C8A962;





    border-radius: 30px;





    padding: 8px 18px;





    box-shadow: 0 0 25px rgba(200, 169, 98, 0.4);





}











.vhwn-diag-center-badge span {





    font-size: 11px;





    font-weight: 800;





    color: #C8A962;





    letter-spacing: 2px;





    text-transform: uppercase;





}











/* Mobile responsive for diagonal hero */





@media (max-width: 860px) {





    .vhwn-diagonal-split-hero {





        flex-direction: column;





        height: auto;





        min-height: auto;





        max-height: none;





    }





    .vhwn-diag-panel {





        clip-path: none !important;





        margin: 0 !important;





        padding: 60px 24px;





        min-height: 380px;





    }





    .vhwn-diag-center-badge {





        display: none;





    }





}











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





   DEDICATED CARS HERO SECTION (WITH VIDEO BACKGROUND)





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











.vhwn-hero-video-section {





    position: relative;





    width: 100%;





    min-height: 540px;





    display: flex;





    align-items: center;





    justify-content: center;





    overflow: hidden;





    background: #000;





    padding: 80px 20px;





    border-bottom: 1px solid rgba(255, 255, 255, 0.08);





}











.vhwn-hero-video-bg {





    position: absolute;





    top: 50%;





    left: 50%;





    min-width: 100%;





    min-height: 100%;





    width: auto;





    height: auto;





    transform: translate(-50%, -50%);





    object-fit: cover;





    z-index: 1;





    opacity: 0.45;





}











.vhwn-hero-video-overlay {





    position: absolute;





    inset: 0;





    background: radial-gradient(circle at 50% 50%, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.92) 100%);





    z-index: 2;





}











.vhwn-hero-video-content {





    position: relative;





    z-index: 3;





    max-width: 900px;





    text-align: center;





    color: #ffffff;





}











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





   DEDICATED DETAILING HERO SECTION





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











.vhwn-hero-detailing-section {





    position: relative;





    width: 100%;





    min-height: 520px;





    display: flex;





    align-items: center;





    justify-content: center;





    background: radial-gradient(circle at 50% 20%, #201a0f 0%, #0d0d0d 100%);





    padding: 80px 20px;





    border-bottom: 1px solid rgba(200, 169, 98, 0.2);





    border-top: 1px solid rgba(255, 255, 255, 0.08);





    overflow: hidden;





}











.vhwn-hero-detailing-content {





    position: relative;





    z-index: 3;





    max-width: 900px;





    text-align: center;





    color: #ffffff;





}











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





   HEADER 2-BRAND LOGO SWITCHER





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











.vhwn-brand-switcher {





    display: inline-flex;





    align-items: center;





    gap: 8px;





    background: rgba(255, 255, 255, 0.05);





    border: 1px solid rgba(255, 255, 255, 0.12);





    border-radius: 8px;





    padding: 4px 6px;





}











.vhwn-brand-btn {





    display: inline-flex;





    align-items: center;





    gap: 6px;





    padding: 6px 12px;





    border-radius: 6px;





    font-size: 13px;





    font-weight: 700;





    text-decoration: none !important;





    color: #ffffff;





    transition: all 0.2s ease;





}











.vhwn-brand-btn:hover, .vhwn-brand-btn.active {





    background: #C8A962;





    color: #111111 !important;





}











.vhwn-brand-divider {





    color: rgba(255, 255, 255, 0.2);





    font-size: 14px;





}











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





   THEME TOGGLE SWITCH & LIGHT/DARK MODE ENHANCEMENTS (PIXEL PERFECT)





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











/* 1. Theme Toggle Button Container */





.vhwn-theme-toggle {





    background: transparent !important;





    border: none !important;





    cursor: pointer !important;





    padding: 2px !important;





    display: inline-flex !important;





    align-items: center !important;





    justify-content: center !important;





    outline: none !important;





    vertical-align: middle !important;





    box-shadow: none !important;





}











/* Track: exactly 60px wide, 30px high, box-sizing border-box */





.vhwn-theme-toggle-track {





    width: 60px !important;





    height: 30px !important;





    background-color: #2D3748 !important;





    border: 1px solid #4A5568 !important;





    border-radius: 30px !important;





    position: relative !important;





    display: flex !important;





    align-items: center !important;





    justify-content: space-between !important;





    padding: 0 7px !important;





    box-sizing: border-box !important;





    transition: background-color 0.3s ease, border-color 0.3s ease !important;





}











html[data-theme="light"] .vhwn-theme-toggle-track {





    background-color: #E2E8F0 !important;





    border-color: #CBD5E1 !important;





}











.vhwn-theme-toggle-sun,





.vhwn-theme-toggle-moon {





    font-size: 13px !important;





    user-select: none !important;





    line-height: 1 !important;





    z-index: 1 !important;





}











/* Thumb: 24px wide, positioned at top 2px, left 2px.





   When active, translateX(30px) places it at 2px + 30px = 32px.





   32px + 24px = 56px. Track is 60px (58px inner). Exactly 2px from right edge! */





.vhwn-theme-toggle-thumb {





    width: 24px !important;





    height: 24px !important;





    background-color: #C8A962 !important;





    border-radius: 50% !important;





    position: absolute !important;





    top: 2px !important;





    left: 2px !important;





    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;





    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;





    z-index: 2 !important;





}











.vhwn-theme-toggle.active .vhwn-theme-toggle-thumb,





html[data-theme="dark"] .vhwn-theme-toggle-thumb {





    transform: translateX(30px) !important;





    background-color: #FFFFFF !important;





}











html[data-theme="light"] .vhwn-theme-toggle .vhwn-theme-toggle-thumb {





    transform: translateX(0px) !important;





    background-color: #C8A962 !important;





}











/* 2. Header 2-Brand Switcher - High Visibility in Light & Dark Mode */





.vhwn-brand-switcher {





    display: inline-flex !important;





    align-items: center !important;





    gap: 4px !important;





    background: #f1f3f5 !important;





    border: 1px solid #e2e8f0 !important;





    border-radius: 8px !important;





    padding: 3px 5px !important;





    transition: background 0.3s ease, border-color 0.3s ease !important;





}











html[data-theme="dark"] .vhwn-brand-switcher {





    background: rgba(255, 255, 255, 0.07) !important;





    border-color: rgba(255, 255, 255, 0.15) !important;





}











.vhwn-brand-btn {





    display: inline-flex !important;





    align-items: center !important;





    gap: 6px !important;





    padding: 6px 12px !important;





    border-radius: 6px !important;





    font-size: 13px !important;





    font-weight: 700 !important;





    text-decoration: none !important;





    color: #111111 !important;





    transition: all 0.2s ease !important;





}











.vhwn-brand-btn svg {





    fill: currentColor !important;





}











html[data-theme="dark"] .vhwn-brand-btn {





    color: #ffffff !important;





}











.vhwn-brand-btn:hover {





    background: #C8A962 !important;





    color: #111111 !important;





}











.vhwn-brand-divider {





    color: #9ca3af !important;





    font-size: 13px !important;





    opacity: 0.7 !important;





}











/* 3. Occasion Cards in Light Mode */





html[data-theme="light"] .vhwn-car-card {





    background: #ffffff !important;





    border: 1px solid #e5e7eb !important;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;





}











html[data-theme="light"] .vhwn-car-title a {





    color: #111111 !important;





}











html[data-theme="light"] .spec-item {





    background: #f8f9fa !important;





    color: #374151 !important;





    border: 1px solid #e5e7eb !important;





}











html[data-theme="light"] .car-tag {





    background: #f3f4f6 !important;





    color: #4b5563 !important;





}











/* 4. Smooth theme transition */





html, body, header, .vhwn-brand-switcher, .vhwn-car-card, .spec-item {





    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;





}











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





   BUTTON & CARD ALIGNMENT GLOBAL FIX (BOX-SIZING & FLUSH LAYOUT)





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











*, *::before, *::after {





    box-sizing: border-box;





}











.vhwn-btn {





    display: inline-flex !important;





    align-items: center !important;





    justify-content: center !important;





    box-sizing: border-box !important;





    max-width: 100% !important;





    padding: 12px 20px !important;





    border-radius: 8px !important;





    font-weight: 600 !important;





    font-size: 14px !important;





    line-height: 1.3 !important;





    text-decoration: none !important;





    transition: all 0.25s ease !important;





    cursor: pointer !important;





    text-align: center !important;





}











/* Card Column Alignment */





.wp-block-column {





    box-sizing: border-box !important;





}











.wp-block-column > .vhwn-btn,





.wp-block-column > a.vhwn-btn {





    margin-top: auto !important;





    width: 100% !important;





    box-sizing: border-box !important;





}











.vhwn-car-card-body {





    display: flex;





    flex-direction: column;





    flex: 1;





}











.vhwn-car-actions {





    display: grid;





    grid-template-columns: 1fr 1fr;





    gap: 10px;





    margin-top: auto;





    width: 100%;





    box-sizing: border-box;





}











.vhwn-car-actions .vhwn-btn {





    width: 100% !important;





    padding: 10px 12px !important;





    font-size: 13px !important;





}











/* Valuation / Sales Step Cards */





.vhwn-sale-option-card {





    background: #181818;





    border: 1px solid rgba(255,255,255,0.08);





    border-radius: 16px;





    padding: 30px;





    display: flex;





    flex-direction: column;





    height: 100%;





    box-sizing: border-box;





    transition: transform 0.3s ease, border-color 0.3s ease;





}











html[data-theme="light"] .vhwn-sale-option-card {





    background: #ffffff;





    border: 1px solid #e5e7eb;





    box-shadow: 0 4px 20px rgba(0,0,0,0.05);





}











.vhwn-sale-option-card.featured {





    border-color: #C8A962;





    background: radial-gradient(circle at 50% 0%, rgba(200,169,98,0.1) 0%, #181818 100%);





}











html[data-theme="light"] .vhwn-sale-option-card.featured {





    background: radial-gradient(circle at 50% 0%, rgba(200,169,98,0.12) 0%, #ffffff 100%);





}











.vhwn-sale-option-card:hover {





    transform: translateY(-4px);





}











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





   SINGLE OCCASION SPACING & LIGHT/DARK READABILITY FIX





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











.single-vhwn_occasion main.wp-block-group,





.post-type-archive-vhwn_occasion main.wp-block-group {





    padding-top: 55px !important;





}











.single-vhwn_occasion h1.wp-block-post-title {





    margin-top: 25px !important;





    margin-bottom: 25px !important;





    font-weight: 800 !important;





    line-height: 1.25 !important;





}











/* Single Car Wrapper Spacing */





.vhwn-single-car-wrapper {





    max-width: 1200px !important;





    margin: 10px auto 60px !important;





    padding: 0 !important;





}











/* Option Pills - High Contrast & Crisp Readability */





.vhwn-options-list {





    display: flex !important;





    flex-wrap: wrap !important;





    gap: 10px !important;





    margin-bottom: 35px !important;





}











.vhwn-option-pill {





    display: inline-flex !important;





    align-items: center !important;





    gap: 6px !important;





    background: #fdf8eb !important;





    border: 1px solid #e0ce9a !important;





    color: #1a1a1a !important;





    font-weight: 600 !important;





    padding: 7px 16px !important;





    border-radius: 20px !important;





    font-size: 13.5px !important;





    line-height: 1.4 !important;





    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;





    transition: all 0.2s ease !important;





}











html[data-theme="dark"] .vhwn-option-pill {





    background: rgba(200, 169, 98, 0.12) !important;





    border-color: rgba(200, 169, 98, 0.35) !important;





    color: #f3f4f6 !important;





    box-shadow: none !important;





}











/* Light Mode Card & Summary Adaptations */





html[data-theme="light"] .vhwn-single-car-summary {





    background: #ffffff !important;





    border: 1px solid #e5e7eb !important;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;





}











html[data-theme="light"] .single-price {





    color: #A37E2C !important;





}











html[data-theme="light"] .single-label {





    color: #6b7280 !important;





}











html[data-theme="light"] .vhwn-location-badge {





    background: #f3f4f6 !important;





    color: #374151 !important;





    border: 1px solid #e5e7eb !important;





}











html[data-theme="light"] .vhwn-specs-table {





    background: #ffffff !important;





    border: 1px solid #e5e7eb !important;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;





}











html[data-theme="light"] .vhwn-specs-table th {





    background: #f9fafb !important;





    color: #4b5563 !important;





    border-bottom: 1px solid #e5e7eb !important;





}











html[data-theme="light"] .vhwn-specs-table td {





    background: #ffffff !important;





    color: #111111 !important;





    border-bottom: 1px solid #e5e7eb !important;





}











html[data-theme="light"] .vhwn-sidebar-card {





    background: #ffffff !important;





    border: 1px solid #e5e7eb !important;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;





}











html[data-theme="light"] .vhwn-sidebar-card h4 {





    color: #A37E2C !important;





}











html[data-theme="light"] .vhwn-check-list li {





    color: #4b5563 !important;





}











html[data-theme="light"] .vhwn-check-list strong {





    color: #111111 !important;





}











html[data-theme="light"] .vhwn-car-description-content {





    color: #374151 !important;





}











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





   FULLSCREEN 3D DUAL-VIDEO SPLIT PORTAL (VHWN CARS vs VHWN DETAILING)





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











.vhwn-portal-wrapper {





    position: relative;





    width: 100%;





    height: calc(100vh - 75px);





    min-height: 620px;





    max-height: 950px;





    display: flex;





    overflow: hidden;





    background: #000000;





    perspective: 1200px;





    border-bottom: 2px solid rgba(200, 169, 98, 0.4);





    margin-top: -25px; /* Offset header margin on homepage */





}











.vhwn-portal-card {





    position: relative;





    flex: 1;





    height: 100%;





    display: flex;





    align-items: center;





    justify-content: center;





    padding: 60px 40px;





    cursor: pointer;





    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);





    overflow: hidden;





    z-index: 1;





    transform-style: preserve-3d;





}











/* Left side: Cars */





.vhwn-portal-cars {





    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);





    margin-right: -5%;





}











/* Right side: Detailing */





.vhwn-portal-detailing {





    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);





    margin-left: -5%;





}











/* Hover expansion */





.vhwn-portal-cars:hover {





    flex: 1.35;





    z-index: 3;





}











.vhwn-portal-detailing:hover {





    flex: 1.35;





    z-index: 3;





}











/* Video Background */





.vhwn-portal-video {





    position: absolute;





    top: 50%;





    left: 50%;





    min-width: 100%;





    min-height: 100%;





    width: auto;





    height: auto;





    transform: translate(-50%, -50%) scale(1.05);





    object-fit: cover;





    z-index: 1;





    opacity: 0.65;





    transition: transform 0.6s ease, opacity 0.4s ease;





}











.vhwn-portal-card:hover .vhwn-portal-video {





    transform: translate(-50%, -50%) scale(1.12);





    opacity: 0.85;





}











/* Gradients Overlays */





.vhwn-portal-overlay {





    position: absolute;





    inset: 0;





    background: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.9) 100%);





    z-index: 2;





    transition: background 0.5s ease;





}











.vhwn-portal-cars:hover .vhwn-portal-overlay {





    background: radial-gradient(circle at 50% 50%, rgba(200, 169, 98, 0.15) 0%, rgba(10, 10, 10, 0.75) 100%);





}











.vhwn-portal-detailing:hover .vhwn-portal-overlay {





    background: radial-gradient(circle at 50% 50%, rgba(200, 169, 98, 0.15) 0%, rgba(10, 10, 10, 0.75) 100%);





}











/* 3D Inner Content Card */





.vhwn-portal-inner {





    position: relative;





    z-index: 4;





    max-width: 480px;





    text-align: center;





    transition: transform 0.15s ease-out;





    transform-style: preserve-3d;





    pointer-events: none;





}











.vhwn-portal-btn-wrap {





    pointer-events: auto;





}











.vhwn-portal-badge {





    display: inline-flex;





    align-items: center;





    gap: 8px;





    padding: 7px 18px;





    background: rgba(17, 17, 17, 0.88);





    border: 1px solid #C8A962;





    border-radius: 30px;





    color: #C8A962;





    font-size: 13px;





    font-weight: 800;





    letter-spacing: 1.5px;





    text-transform: uppercase;





    margin-bottom: 20px;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);





}











.vhwn-portal-title {





    font-size: clamp(28px, 3.8vw, 46px);





    font-weight: 800;





    color: #ffffff;





    line-height: 1.15;





    margin-bottom: 12px;





    text-shadow: 0 2px 10px rgba(0,0,0,0.8);





}











.vhwn-portal-location {





    font-size: 14px;





    color: #C8A962;





    font-weight: 600;





    margin-bottom: 16px;





}











.vhwn-portal-desc {





    font-size: 15px;





    color: #d1d5db;





    line-height: 1.6;





    margin-bottom: 26px;





    text-shadow: 0 1px 6px rgba(0,0,0,0.8);





}











/* Center Badge */





.vhwn-portal-center-badge {





    position: absolute;





    top: 50%;





    left: 50%;





    transform: translate(-50%, -50%);





    z-index: 10;





    pointer-events: none;





    background: #111111;





    border: 2px solid #C8A962;





    border-radius: 30px;





    padding: 8px 20px;





    box-shadow: 0 0 30px rgba(200, 169, 98, 0.5);





}











.vhwn-portal-center-badge span {





    font-size: 11px;





    font-weight: 800;





    color: #C8A962;





    letter-spacing: 2px;





    text-transform: uppercase;





}











/* Mobile Responsive */





@media (max-width: 860px) {





    .vhwn-portal-wrapper {





        flex-direction: column;





        height: auto;





        min-height: auto;





        max-height: none;





        margin-top: 0;





    }





    .vhwn-portal-card {





        clip-path: none !important;





        margin: 0 !important;





        padding: 70px 24px;





        min-height: 420px;





    }





    .vhwn-portal-center-badge {





        display: none;





    }





}











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





   100% TRUE FULL-WIDTH BREAKOUTS FOR PORTAL & HERO VIDEO SECTIONS





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











html, body {





    overflow-x: hidden !important;





    width: 100% !important;





    margin: 0 !important;





    padding: 0 !important;





}











/* 1. Fullscreen 3D Portal - 100% True Edge-to-Edge Viewport */





.vhwn-portal-wrapper {





    width: 100vw !important;





    max-width: 100vw !important;





    position: relative !important;





    left: 50% !important;





    right: 50% !important;





    margin-left: -50vw !important;





    margin-right: -50vw !important;





    margin-top: -25px !important;





    margin-bottom: 0 !important;





    height: calc(100vh - 72px) !important;





    min-height: 640px !important;





    max-height: 1080px !important;





    box-sizing: border-box !important;





    overflow: hidden !important;





    display: flex !important;





    background: #000000 !important;





    perspective: 1200px !important;





    border-bottom: 2px solid rgba(200, 169, 98, 0.4) !important;





}











/* 2. Full-Width Video Hero Sections for /cars/ and /detailing/ */





.vhwn-hero-video-section {





    width: 100vw !important;





    max-width: 100vw !important;





    position: relative !important;





    left: 50% !important;





    right: 50% !important;





    margin-left: -50vw !important;





    margin-right: -50vw !important;





    margin-top: -25px !important;





    margin-bottom: 60px !important;





    min-height: 580px !important;





    box-sizing: border-box !important;





    display: flex !important;





    align-items: center !important;





    justify-content: center !important;





    overflow: hidden !important;





    background: #000000 !important;





    padding: 90px 20px !important;





    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;





}











.vhwn-hero-video-bg {





    position: absolute !important;





    top: 50% !important;





    left: 50% !important;





    min-width: 100% !important;





    min-height: 100% !important;





    width: 100% !important;





    height: 100% !important;





    transform: translate(-50%, -50%) !important;





    object-fit: cover !important;





    z-index: 1 !important;





    opacity: 0.55 !important;





}











.vhwn-hero-video-overlay {





    position: absolute !important;





    inset: 0 !important;





    background: radial-gradient(circle at 50% 50%, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.92) 100%) !important;





    z-index: 2 !important;





}











.vhwn-hero-video-content {





    position: relative !important;





    z-index: 3 !important;





    max-width: 920px !important;





    text-align: center !important;





    color: #ffffff !important;





    padding: 0 15px !important;





}











.vhwn-hero-badge {





    display: inline-flex !important;





    align-items: center !important;





    gap: 8px !important;





    padding: 6px 16px !important;





    background: rgba(17, 17, 17, 0.85) !important;





    border: 1px solid #C8A962 !important;





    border-radius: 30px !important;





    color: #C8A962 !important;





    font-size: 13px !important;





    font-weight: 800 !important;





    letter-spacing: 1.5px !important;





    text-transform: uppercase !important;





    margin-bottom: 20px !important;





    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;





}











/* Mobile Adjustments for Portal & Video Heroes */





@media (max-width: 860px) {





    .vhwn-portal-wrapper {





        flex-direction: column !important;





        height: auto !important;





        min-height: auto !important;





        max-height: none !important;





        margin-top: 0 !important;





    }





    





    .vhwn-portal-card {





        clip-path: none !important;





        margin: 0 !important;





        padding: 70px 24px !important;





        min-height: 440px !important;





    }





    





    .vhwn-hero-video-section {





        margin-top: 0 !important;





        min-height: 480px !important;





        padding: 60px 15px !important;





    }





}











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





   ENHANCED VIDEO HERO VISIBILITY & TEXT LEGIBILITY (CARS & DETAILING)





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











.vhwn-hero-video-bg {





    opacity: 0.85 !important;





    filter: brightness(0.95) contrast(1.05) !important;





}











.vhwn-hero-video-overlay {





    background: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.65) 100%) !important;





}











.vhwn-hero-video-content h1 {





    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95), 0 1px 6px rgba(0, 0, 0, 0.9) !important;





}











.vhwn-hero-video-content p {





    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;





}











.vhwn-hero-badge {





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;





    backdrop-filter: blur(8px) !important;





}











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





   MAXIMUM VIDEO CLARITY & ULTRA-LIGHT OVERLAY





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











.vhwn-hero-video-bg {





    opacity: 0.98 !important;





    filter: brightness(1.0) contrast(1.05) !important;





}











.vhwn-hero-video-overlay {





    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.38) 100%) !important;





}











.vhwn-hero-video-content h1 {





    text-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0,0,0,1) !important;





}











.vhwn-hero-video-content p {





    text-shadow: 0 3px 14px rgba(0, 0, 0, 1), 0 1px 5px rgba(0, 0, 0, 0.95) !important;





}











/* 3D Split Portal Video Clarity */





.vhwn-portal-video {





    opacity: 0.90 !important;





}











.vhwn-portal-card:hover .vhwn-portal-video {





    opacity: 1.0 !important;





}











.vhwn-portal-overlay {





    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%) !important;





}











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





   ADVANCED MOBILE & RESPONSIVE PERFECTION (HEADER, PORTAL & HEROES)





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











/* 1. Header Mobile Optimization */





@media (max-width: 768px) {





    .vhwn-main-header {





        padding: 8px 12px !important;





        margin-bottom: 0 !important;





    }











    .vhwn-main-header > .wp-block-group {





        display: flex !important;





        flex-direction: row !important;





        align-items: center !important;





        justify-content: space-between !important;





        flex-wrap: nowrap !important;





        gap: 8px !important;





        width: 100% !important;





    }











    .vhwn-brand-switcher {





        padding: 4px 8px !important;





        gap: 6px !important;





        border-radius: 20px !important;





    }











    .vhwn-brand-btn {





        font-size: 11px !important;





        padding: 3px 6px !important;





        gap: 4px !important;





        letter-spacing: 0.5px !important;





    }











    .vhwn-brand-btn svg {





        width: 13px !important;





        height: 13px !important;





    }











    .vhwn-brand-divider {





        font-size: 10px !important;





    }











    /* Hide redundant desktop button on mobile header to prevent overlap */





    .vhwn-main-header .wp-block-buttons {





        display: none !important;





    }











    .wp-block-navigation__responsive-container-open {





        padding: 4px 8px !important;





        margin: 0 !important;





    }





}











/* 2. Homepage 3D Video Split Portal: Portrait (Top/Bottom) vs Landscape (Left/Right) */





@media (max-width: 860px) and (orientation: portrait), (max-width: 768px) {





    .vhwn-portal-wrapper {





        flex-direction: column !important;





        height: calc(100vh - 65px) !important;





        min-height: 560px !important;





        max-height: none !important;





        margin-top: 0 !important;





    }











    .vhwn-portal-card {





        clip-path: none !important;





        margin: 0 !important;





        width: 100% !important;





        height: 50% !important;





        flex: 1 1 50% !important;





        padding: 20px 15px !important;





        min-height: 270px !important;





        display: flex !important;





        align-items: center !important;





        justify-content: center !important;





    }











    .vhwn-portal-cars {





        border-bottom: 1px solid rgba(200, 169, 98, 0.4) !important;





    }











    .vhwn-portal-detailing {





        border-top: 1px solid rgba(200, 169, 98, 0.4) !important;





    }











    .vhwn-portal-inner {





        max-width: 340px !important;





    }











    .vhwn-portal-badge {





        padding: 4px 12px !important;





        font-size: 10.5px !important;





        margin-bottom: 8px !important;





        letter-spacing: 1px !important;





    }











    .vhwn-portal-title {





        font-size: 21px !important;





        margin-bottom: 4px !important;





        line-height: 1.2 !important;





    }











    .vhwn-portal-location {





        font-size: 11.5px !important;





        margin-bottom: 8px !important;





    }











    .vhwn-portal-desc {





        display: none !important; /* Keep mobile split screen neat and concise */





    }











    .vhwn-portal-btn-wrap .vhwn-btn {





        padding: 8px 18px !important;





        font-size: 12.5px !important;





    }











    .vhwn-portal-center-badge {





        display: none !important;





    }





}











/* Landscape Mode for Tablets & Mobile: Left / Right Split */





@media (max-width: 860px) and (orientation: landscape) {





    .vhwn-portal-wrapper {





        flex-direction: row !important;





        height: 100vh !important;





        min-height: 380px !important;





    }











    .vhwn-portal-card {





        padding: 20px 15px !important;





    }











    .vhwn-portal-cars {





        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%) !important;





    }











    .vhwn-portal-detailing {





        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%) !important;





    }











    .vhwn-portal-title {





        font-size: 19px !important;





    }











    .vhwn-portal-desc {





        display: none !important;





    }





}











/* 3. Mobile Hero Video Sections (/cars/ & /detailing/) */





@media (max-width: 768px) {





    .vhwn-hero-video-section {





        min-height: 480px !important;





        padding: 45px 15px 40px !important;





        margin-top: 0 !important;





    }











    .vhwn-hero-badge {





        font-size: 10.5px !important;





        padding: 4px 12px !important;





        margin-bottom: 12px !important;





        letter-spacing: 0.8px !important;





        white-space: normal !important;





        line-height: 1.3 !important;





        text-align: center !important;





    }











    .vhwn-hero-title {





        font-size: clamp(26px, 7vw, 36px) !important;





        line-height: 1.2 !important;





        margin-bottom: 12px !important;





    }











    .vhwn-hero-desc {





        font-size: 13.5px !important;





        line-height: 1.5 !important;





        margin-bottom: 20px !important;





    }











    .vhwn-hero-btns {





        display: flex !important;





        flex-direction: column !important;





        gap: 10px !important;





        width: 100% !important;





        max-width: 300px !important;





        margin: 0 auto !important;





    }











    .vhwn-hero-btns .vhwn-btn {





        width: 100% !important;





        box-sizing: border-box !important;





        padding: 11px 18px !important;





        font-size: 13.5px !important;





        text-align: center !important;





    }





}











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





   REFINED LUXURY HEADER & MOBILE MENU DRAWER (ZERO OVERLAP, PERFECT SPACING)





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











/* Enforce Permanent Dark Palette */





:root, html, body {





    background-color: #0d0d0d !important;





    color: #ffffff !important;





}











/* Hide any remaining theme toggle buttons */





.vhwn-theme-toggle,





#theme-toggle-btn,





.vhwn-theme-toggle-float-container {





    display: none !important;





    visibility: hidden !important;





    opacity: 0 !important;





    pointer-events: none !important;





}











/* Header Container */





.vhwn-main-header {





    background: #0f0f0f !important;





    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;





    position: relative !important;





    z-index: 1000 !important;





    padding: 12px 20px !important;





}











.vhwn-header-inner-row {





    display: flex !important;





    flex-direction: row !important;





    align-items: center !important;





    justify-content: space-between !important;





    width: 100% !important;





    flex-wrap: nowrap !important;





}











/* Brand Switcher Pill */





.vhwn-brand-switcher {





    display: inline-flex !important;





    align-items: center !important;





    background: #181818 !important;





    border: 1px solid rgba(200, 169, 98, 0.4) !important;





    border-radius: 30px !important;





    padding: 6px 14px !important;





    gap: 10px !important;





    flex-shrink: 0 !important;





    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;





}











.vhwn-brand-btn {





    display: inline-flex !important;





    align-items: center !important;





    gap: 6px !important;





    color: #ffffff !important;





    font-size: 12.5px !important;





    font-weight: 700 !important;





    text-decoration: none !important;





    letter-spacing: 0.5px !important;





    transition: color 0.2s ease !important;





}











.vhwn-brand-btn:hover {





    color: #C8A962 !important;





}











.vhwn-brand-divider {





    color: rgba(200, 169, 98, 0.4) !important;





    font-size: 11px !important;





}











/* Navigation Group (Desktop) */





.vhwn-nav-group {





    display: flex !important;





    align-items: center !important;





    gap: 20px !important;





}











.vhwn-nav-group .wp-block-navigation-item a {





    color: #ffffff !important;





    font-size: 14px !important;





    font-weight: 600 !important;





    text-decoration: none !important;





    transition: color 0.2s ease !important;





}











.vhwn-nav-group .wp-block-navigation-item a:hover {





    color: #C8A962 !important;





}











/* Mobile Adjustments (<= 860px) */





@media (max-width: 860px) {





    .vhwn-main-header {





        padding: 10px 14px !important;





        margin-bottom: 0 !important;





    }











    .vhwn-brand-switcher {





        padding: 4px 10px !important;





        gap: 6px !important;





        border-radius: 20px !important;





    }











    .vhwn-brand-btn {





        font-size: 11px !important;





        gap: 4px !important;





        padding: 2px 4px !important;





    }











    .vhwn-brand-btn svg {





        width: 13px !important;





        height: 13px !important;





    }











    /* Hide desktop CTA button on mobile header row so there is zero clutter */





    .vhwn-header-cta-btn {





        display: none !important;





    }











    /* Hamburger Toggle Button */





    .wp-block-navigation__responsive-container-open {





        background: transparent !important;





        border: none !important;





        color: #ffffff !important;





        padding: 6px !important;





        margin: 0 !important;





        display: flex !important;





        align-items: center !important;





        justify-content: center !important;





        cursor: pointer !important;





    }











    .wp-block-navigation__responsive-container-open svg {





        width: 26px !important;





        height: 26px !important;





        fill: #ffffff !important;





    }











    /* Fullscreen Mobile Drawer Menu */





    .wp-block-navigation__responsive-container.is-menu-open {





        background: rgba(13, 13, 13, 0.98) !important;





        backdrop-filter: blur(20px) !important;





        position: fixed !important;





        inset: 0 !important;





        width: 100vw !important;





        height: 100vh !important;





        display: flex !important;





        flex-direction: column !important;





        align-items: center !important;





        justify-content: center !important;





        z-index: 99999 !important;





        padding: 60px 20px 40px !important;





        box-sizing: border-box !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {





        width: 100% !important;





        max-width: 320px !important;





        text-align: center !important;





        display: flex !important;





        flex-direction: column !important;





        align-items: center !important;





        justify-content: center !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {





        display: flex !important;





        flex-direction: column !important;





        gap: 22px !important;





        align-items: center !important;





        justify-content: center !important;





        width: 100% !important;





        margin: 0 0 35px 0 !important;





        padding: 0 !important;





        list-style: none !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {





        font-size: 20px !important;





        font-weight: 700 !important;





        color: #ffffff !important;





        text-decoration: none !important;





        letter-spacing: 0.5px !important;





        display: inline-block !important;





        padding: 6px 12px !important;





        transition: color 0.2s ease, transform 0.2s ease !important;





    }











    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {





        color: #C8A962 !important;





        transform: scale(1.05) !important;





    }











    /* Close Button inside Drawer */





    .wp-block-navigation__responsive-container-close {





        position: absolute !important;





        top: 18px !important;





        right: 18px !important;





        color: #C8A962 !important;





        background: rgba(255, 255, 255, 0.08) !important;





        border-radius: 50% !important;





        width: 44px !important;





        height: 44px !important;





        display: flex !important;





        align-items: center !important;





        justify-content: center !important;





        cursor: pointer !important;





        border: 1px solid rgba(200, 169, 98, 0.3) !important;





    }











    .wp-block-navigation__responsive-container-close svg {





        fill: #C8A962 !important;





        width: 22px !important;





        height: 22px !important;





    }





}











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





   DESKTOP HEADER 1-LINE STRICT ALIGNMENT & POLISH





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











/* Fullwidth Header Row */





.vhwn-main-header {





    max-width: 100% !important;





    width: 100% !important;





    padding: 12px 30px !important;





    box-sizing: border-box !important;





    background: #0f0f0f !important;





    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;





}











.vhwn-header-inner-row {





    display: flex !important;





    flex-direction: row !important;





    align-items: center !important;





    justify-content: space-between !important;





    flex-wrap: nowrap !important;





    width: 100% !important;





    max-width: 1440px !important;





    margin: 0 auto !important;





    gap: 20px !important;





}











.vhwn-brand-switcher {





    flex-shrink: 0 !important;





    white-space: nowrap !important;





}











.vhwn-nav-group {





    display: flex !important;





    flex-direction: row !important;





    align-items: center !important;





    justify-content: flex-end !important;





    flex-wrap: nowrap !important;





    gap: 18px !important;





    flex-shrink: 0 !important;





}











/* Force Navigation items into a single horizontal row on Desktop */





@media (min-width: 861px) {





    .vhwn-main-header nav.wp-block-navigation,





    .vhwn-main-header .wp-block-navigation__responsive-container,





    .vhwn-main-header .wp-block-navigation__responsive-container-content,





    .vhwn-main-header ul.wp-block-navigation__container {





        display: flex !important;





        flex-direction: row !important;





        align-items: center !important;





        flex-wrap: nowrap !important;





        gap: 18px !important;





        margin: 0 !important;





        padding: 0 !important;





        list-style: none !important;





        white-space: nowrap !important;





    }











    .vhwn-main-header .wp-block-navigation-item {





        white-space: nowrap !important;





        flex-shrink: 0 !important;





        display: inline-flex !important;





        align-items: center !important;





    }











    .vhwn-main-header .wp-block-navigation-item a {





        font-size: 13px !important;





        font-weight: 700 !important;





        letter-spacing: 0.5px !important;





        text-transform: uppercase !important;





        color: #e5e7eb !important;





        white-space: nowrap !important;





        padding: 4px 4px !important;





        transition: color 0.2s ease !important;





    }











    .vhwn-main-header .wp-block-navigation-item a:hover {





        color: #C8A962 !important;





    }











    .vhwn-header-cta-btn {





        display: block !important;





        flex-shrink: 0 !important;





        white-space: nowrap !important;





        margin-left: 6px !important;





    }











    .vhwn-header-cta-btn a {





        background-color: #C8A962 !important;





        color: #111111 !important;





        font-size: 13px !important;





        font-weight: 700 !important;





        padding: 9px 18px !important;





        border-radius: 6px !important;





        white-space: nowrap !important;





        display: inline-block !important;





    }





}











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





   GLOBAL BUTTON ENHANCEMENT: SPACING, ICONS & CRISP TYPOGRAPHY





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











.vhwn-btn {





    display: inline-flex !important;





    align-items: center !important;





    justify-content: center !important;





    gap: 8px !important;





    font-weight: 700 !important;





    font-size: 14.5px !important;





    padding: 13px 24px !important;





    border-radius: 8px !important;





    text-decoration: none !important;





    box-sizing: border-box !important;





    max-width: 100% !important;





    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;





    letter-spacing: 0.3px !important;





    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;





    cursor: pointer !important;





}











.vhwn-btn svg {





    flex-shrink: 0 !important;





    display: inline-block !important;





}











.vhwn-btn-gold {





    background: #C8A962 !important;





    color: #111111 !important;





    border: 1px solid #C8A962 !important;





}











.vhwn-btn-gold:hover {





    background: #d4b874 !important;





    color: #000000 !important;





    transform: translateY(-2px) !important;





    box-shadow: 0 6px 20px rgba(200, 169, 98, 0.4) !important;





}











.vhwn-btn-outline {





    background: rgba(255, 255, 255, 0.08) !important;





    color: #ffffff !important;





    border: 1px solid rgba(255, 255, 255, 0.25) !important;





    backdrop-filter: blur(8px) !important;





}











.vhwn-btn-outline:hover {





    background: rgba(255, 255, 255, 0.16) !important;





    border-color: #C8A962 !important;





    color: #C8A962 !important;





    transform: translateY(-2px) !important;





    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;





}











.vhwn-btn-wa {





    background: #25D366 !important;





    color: #ffffff !important;





    border: 1px solid #25D366 !important;





}











.vhwn-btn-wa:hover {





    background: #20ba59 !important;





    color: #ffffff !important;





    transform: translateY(-2px) !important;





    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;





}











.vhwn-btn-secondary {





    background: #222222 !important;





    color: #ffffff !important;





    border: 1px solid #383838 !important;





}











.vhwn-btn-secondary:hover {





    background: #2d2d2d !important;





    border-color: #C8A962 !important;





    color: #C8A962 !important;





    transform: translateY(-2px) !important;





}











/* Hero Button Container */





.vhwn-hero-btns {





    display: flex !important;





    justify-content: center !important;





    align-items: center !important;





    gap: 16px !important;





    flex-wrap: wrap !important;





    margin-top: 10px !important;





}











/* Mobile Button Stacking with generous breathing room */





@media (max-width: 768px) {





    .vhwn-hero-btns {





        display: flex !important;





        flex-direction: column !important;





        gap: 14px !important;





        width: 100% !important;





        max-width: 320px !important;





        margin: 10px auto 0 !important;





    }











    .vhwn-hero-btns .vhwn-btn {





        width: 100% !important;





        padding: 13px 20px !important;





        font-size: 14.5px !important;





        border-radius: 8px !important;





    }





}











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





   VHWN AUTO INKOOP & TAXATIE FORMULIER STYLING





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











.vhwn-purchase-form-container {





    max-width: 900px;





    margin: 0 auto 50px;





    padding: 0 15px;





}











.vhwn-form-section {





    background: #141414;





    border: 1px solid rgba(255, 255, 255, 0.08);





    border-radius: 14px;





    padding: 28px 24px;





    margin-bottom: 25px;





    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);





}











.vhwn-form-section-title {





    font-size: 20px;





    font-weight: 800;





    color: #ffffff;





    margin-top: 0;





    margin-bottom: 20px;





    display: flex;





    align-items: center;





    border-bottom: 1px solid rgba(255, 255, 255, 0.06);





    padding-bottom: 12px;





}











.vhwn-step-num {





    background: #C8A962;





    color: #111111;





    border-radius: 50%;





    width: 26px;





    height: 26px;





    display: inline-flex;





    align-items: center;





    justify-content: center;





    font-weight: 800;





    font-size: 13px;





    margin-right: 10px;





    flex-shrink: 0;





}











.vhwn-form-grid-2 {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));





    gap: 18px;





}











.vhwn-form-grid-3 {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));





    gap: 18px;





}











.vhwn-form-group {





    display: flex;





    flex-direction: column;





    gap: 6px;





}











.vhwn-form-group label {





    font-size: 13.5px;





    font-weight: 700;





    color: #e5e7eb;





}











.vhwn-form-group label .req {





    color: #C8A962;





}











.vhwn-input {





    background: #1c1c1c;





    border: 1px solid rgba(255, 255, 255, 0.12);





    border-radius: 8px;





    color: #ffffff;





    font-size: 14.5px;





    padding: 12px 14px;





    width: 100%;





    box-sizing: border-box;





    transition: border-color 0.2s ease, box-shadow 0.2s ease;





}











.vhwn-input:focus {





    border-color: #C8A962;





    outline: none;





    box-shadow: 0 0 0 3px rgba(200, 169, 98, 0.18);





}











.vhwn-textarea {





    resize: vertical;





    min-height: 80px;





    line-height: 1.5;





}











/* License Plate Visual Box */





.vhwn-license-plate-wrap {





    display: inline-flex;





    align-items: center;





    background: #f7d117;





    border: 2px solid #000000;





    border-radius: 6px;





    overflow: hidden;





    width: 100%;





    max-width: 240px;





    box-shadow: 0 2px 6px rgba(0,0,0,0.3);





}











.vhwn-license-plate-wrap .nl-badge {





    background: #003399;





    color: #ffffff;





    padding: 10px 7px;





    font-weight: 900;





    font-size: 11px;





    letter-spacing: 0.5px;





}











.vhwn-license-input {





    background: #f7d117 !important;





    color: #000000 !important;





    border: none !important;





    font-size: 17px !important;





    font-weight: 900 !important;





    letter-spacing: 2px !important;





    text-transform: uppercase !important;





    text-align: center !important;





    width: 100% !important;





    padding: 8px 6px !important;





    box-shadow: none !important;





}











/* Photo Upload Grid (7 Slots) */





.vhwn-photo-grid {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));





    gap: 12px;





}











.vhwn-photo-slot {





    background: #181818;





    border: 2px dashed rgba(255, 255, 255, 0.15);





    border-radius: 10px;





    padding: 14px 8px;





    text-align: center;





    cursor: pointer;





    position: relative;





    transition: all 0.2s ease;





}











.vhwn-photo-slot:hover {





    border-color: #C8A962;





    background: rgba(200, 169, 98, 0.05);





}











.vhwn-photo-slot label {





    display: flex;





    flex-direction: column;





    align-items: center;





    gap: 4px;





    cursor: pointer;





    pointer-events: none;





}











.vhwn-photo-slot .slot-icon {





    font-size: 22px;





    margin-bottom: 2px;





}











.vhwn-photo-slot .slot-title {





    font-size: 11.5px;





    font-weight: 700;





    color: #ffffff;





    line-height: 1.2;





}











.vhwn-photo-slot .slot-status {





    font-size: 10.5px;





    color: #888;





    margin-top: 2px;





}











.vhwn-photo-slot input[type="file"] {





    position: absolute;





    inset: 0;





    opacity: 0;





    width: 100%;





    height: 100%;





    cursor: pointer;





}











/* Success & Error Cards */





.vhwn-form-success-card {





    background: #141414;





    border: 2px solid #25D366;





    border-radius: 16px;





    padding: 45px 30px;





    text-align: center;





    box-shadow: 0 4px 30px rgba(37, 211, 102, 0.15);





}











.vhwn-form-success-card h2 {





    font-size: 26px;





    color: #ffffff;





    margin: 15px 0 10px;





}











.vhwn-form-errors-box {





    background: rgba(220, 38, 38, 0.12);





    border: 1px solid #dc2626;





    border-radius: 10px;





    padding: 16px 20px;





    color: #fca5a5;





    margin-bottom: 25px;





    font-size: 14px;





}











.vhwn-form-errors-box ul {





    margin: 6px 0 0 18px;





    padding: 0;





}











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





   CONSISTENT GOLD HEADER ACCENT & HERO BADGE SPACING ACROSS ALL PAGES





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











/* 1. Consistent Header Bottom Border (Refined Champagne Gold Accent) */





.vhwn-main-header {





    background: #0f0f0f !important;





    border-bottom: 1px solid rgba(200, 169, 98, 0.35) !important;





    position: relative !important;





    z-index: 1000 !important;





    padding: 12px 30px !important;





    margin-bottom: 0 !important;





}











/* 2. Consistent Luxury Hero Badge Across All Pages */





.vhwn-hero-badge {





    display: inline-flex !important;





    align-items: center !important;





    justify-content: center !important;





    gap: 8px !important;





    padding: 7px 18px !important;





    background: rgba(200, 169, 98, 0.12) !important;





    border: 1px solid rgba(200, 169, 98, 0.5) !important;





    border-radius: 30px !important;





    color: #C8A962 !important;





    font-size: 12.5px !important;





    font-weight: 800 !important;





    letter-spacing: 1.2px !important;





    text-transform: uppercase !important;





    margin-top: 15px !important;





    margin-bottom: 18px !important;





    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;





    line-height: 1.4 !important;





}











/* 3. Page Top Spacing for non-video pages */





.vhwn-page-header-wrap {





    padding-top: 35px !important;





    padding-bottom: 30px !important;





    text-align: center !important;





    max-width: 850px !important;





    margin: 0 auto !important;





}











@media (max-width: 860px) {





    .vhwn-main-header {





        padding: 10px 16px !important;





        border-bottom: 1px solid rgba(200, 169, 98, 0.35) !important;





    }





    





    .vhwn-hero-badge {





        font-size: 11px !important;





        padding: 5px 14px !important;





        margin-top: 10px !important;





        margin-bottom: 14px !important;





    }





}











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





   SALE TYPE SELECTION (CONSIGNATIE VS INKOOP) & INTERACTIVE TOOLTIP





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











.vhwn-tooltip-container {





    position: relative;





    display: inline-flex;





    align-items: center;





}











.vhwn-info-badge {





    width: 20px;





    height: 20px;





    border-radius: 50%;





    background: #C8A962;





    color: #111111;





    font-weight: 900;





    font-size: 12px;





    display: inline-flex;





    align-items: center;





    justify-content: center;





    cursor: pointer;





    box-shadow: 0 2px 6px rgba(0,0,0,0.3);





    transition: transform 0.2s ease;





}











.vhwn-info-badge:hover {





    transform: scale(1.15);





}











.vhwn-tooltip-box {





    position: absolute;





    bottom: calc(100% + 10px);





    left: 0;





    width: 310px;





    background: #1e1e1e;





    border: 1px solid #C8A962;





    border-radius: 10px;





    padding: 14px 16px;





    color: #e5e7eb;





    font-size: 12.5px;





    line-height: 1.55;





    z-index: 9999;





    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);





    display: none;





}











.vhwn-tooltip-box.is-open {





    display: block !important;





    animation: vhwnFadeIn 0.2s ease-out;





}











.vhwn-tooltip-box .tooltip-header {





    display: flex;





    justify-content: space-between;





    align-items: center;





    color: #C8A962;





    font-size: 13px;





    border-bottom: 1px solid rgba(200, 169, 98, 0.3);





    padding-bottom: 6px;





    margin-bottom: 8px;





}











.vhwn-tooltip-box .tooltip-close {





    cursor: pointer;





    font-size: 18px;





    color: #aaa;





    line-height: 1;





}











.vhwn-tooltip-box .tooltip-close:hover {





    color: #fff;





}











/* Sale Type Radio Tiles */





.vhwn-sale-type-grid {





    display: grid;





    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));





    gap: 14px;





    margin-top: 6px;





}











.vhwn-sale-type-card {





    background: #181818;





    border: 2px solid rgba(255, 255, 255, 0.12);





    border-radius: 12px;





    padding: 16px 18px;





    cursor: pointer;





    position: relative;





    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);





    display: flex;





    flex-direction: column;





}











.vhwn-sale-type-card input[type='radio'] {





    position: absolute;





    opacity: 0;





    pointer-events: none;





}











.vhwn-sale-type-card:hover {





    border-color: rgba(200, 169, 98, 0.6);





    background: rgba(200, 169, 98, 0.04);





}











.vhwn-sale-type-card.is-active {





    border-color: #C8A962 !important;





    background: rgba(200, 169, 98, 0.1) !important;





    box-shadow: 0 4px 18px rgba(200, 169, 98, 0.2) !important;





}











.vhwn-sale-type-card .card-badge {





    display: inline-block;





    background: #2a2a2a;





    color: #ddd;





    font-size: 10px;





    font-weight: 700;





    text-transform: uppercase;





    letter-spacing: 0.5px;





    padding: 2px 8px;





    border-radius: 6px;





    margin-bottom: 6px;





    align-self: flex-start;





}











.vhwn-sale-type-card .card-badge.gold {





    background: #C8A962;





    color: #111;





}











.vhwn-sale-type-card .card-title {





    font-size: 15.5px;





    font-weight: 800;





    color: #ffffff;





    margin-bottom: 4px;





}











.vhwn-sale-type-card .card-desc {





    font-size: 12.5px;





    color: #aaa;





    line-height: 1.45;





}

















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





   VHWN BRAND SWITCHER & LOGO TYPOGRAPHY (BOLD + BLUE DOT + SUBTITLE)





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





.vhwn-brand-switcher {





    display: inline-flex !important;





    align-items: center !important;





    background: #141416 !important;





    border: 1px solid rgba(200, 169, 98, 0.45) !important;





    border-radius: 30px !important;





    padding: 4px 8px !important;





    gap: 6px !important;





    flex-shrink: 0 !important;





    white-space: nowrap !important;





    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45), 0 0 1px rgba(200, 169, 98, 0.4) !important;





    transition: all 0.25s ease !important;





}











.vhwn-brand-switcher:hover {





    border-color: rgba(200, 169, 98, 0.75) !important;





    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 8px rgba(200, 169, 98, 0.3) !important;





}











.vhwn-brand-btn {





    display: inline-flex !important;





    align-items: center !important;





    gap: 7px !important;





    color: #ffffff !important;





    text-decoration: none !important;





    padding: 6px 12px !important;





    border-radius: 20px !important;





    transition: all 0.2s ease !important;





    line-height: 1 !important;





}











.vhwn-brand-btn svg {





    color: #C8A962 !important;





    fill: currentColor !important;





    flex-shrink: 0 !important;





    transition: transform 0.2s ease, color 0.2s ease !important;





}











.vhwn-brand-btn:hover {





    background: rgba(255, 255, 255, 0.08) !important;





    color: #ffffff !important;





}











.vhwn-brand-btn:hover svg {





    transform: scale(1.1) !important;





    color: #dfbe74 !important;





}











.vhwn-logo-text {





    display: inline-flex !important;





    align-items: baseline !important;





    font-size: 13.5px !important;





    letter-spacing: 0.3px !important;





}











.vhwn-logo-main {





    font-weight: 800 !important;





    color: #ffffff !important;





    letter-spacing: 0.5px !important;





}











.vhwn-logo-dot {





    color: #0080FF !important;





    font-weight: 900 !important;





    font-size: 18px !important;





    line-height: 0 !important;





    margin: 0 1.5px !important;





    display: inline-block !important;





    text-shadow: 0 0 8px rgba(0, 128, 255, 0.65) !important;





}











.vhwn-logo-sub {





    font-weight: 500 !important;





    color: #E2E8F0 !important;





    letter-spacing: 0.3px !important;





}











.vhwn-brand-divider {





    color: rgba(200, 169, 98, 0.4) !important;





    font-size: 12px !important;





    opacity: 0.8 !important;





    user-select: none !important;





}











/* Light mode support */





html[data-theme="light"] .vhwn-brand-switcher {





    background: #ffffff !important;





    border: 1px solid rgba(200, 169, 98, 0.6) !important;





    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;





}











html[data-theme="light"] .vhwn-brand-btn {





    color: #1a1a1a !important;





}











html[data-theme="light"] .vhwn-logo-main {





    color: #111827 !important;





}











html[data-theme="light"] .vhwn-logo-sub {





    color: #4b5563 !important;





}











html[data-theme="light"] .vhwn-brand-btn:hover {





    background: rgba(200, 169, 98, 0.12) !important;





}











/* Mobile responsive adjustments */





@media (max-width: 860px) {





    .vhwn-brand-switcher {





        padding: 4px 8px !important;





        gap: 4px !important;





    }











    .vhwn-brand-btn {





        padding: 4px 8px !important;





        gap: 5px !important;





    }











    .vhwn-logo-text {





        font-size: 12px !important;





    }











    .vhwn-logo-dot {





        font-size: 15px !important;





    }











    .vhwn-brand-btn svg {





        width: 13px !important;





        height: 13px !important;





    }





}















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




   INTERACTIVE PRICING CONFIGURATOR V2 (PREMIUM LUXURY DARK & LIGHT)




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




.vhwn-configurator {




    max-width: 1280px;




    margin: 0 auto;




    padding: 10px 0 30px;




}









.vhwn-config-header-text {




    text-align: center;




    margin-bottom: 25px;




}









.vhwn-config-step-pill {




    display: inline-block;




    background: rgba(200, 169, 98, 0.15);




    border: 1px solid rgba(200, 169, 98, 0.4);




    color: #C8A962;




    font-size: 13px;




    font-weight: 700;




    text-transform: uppercase;




    letter-spacing: 1px;




    padding: 6px 18px;




    border-radius: 20px;




}









.vhwn-config-subtitle {




    color: #9ca3af;




    font-size: 14.5px;




    margin-top: 10px;




}









/* Size Selector Grid */




.vhwn-size-selector {




    display: grid;




    grid-template-columns: repeat(3, 1fr);




    gap: 16px;




    margin-bottom: 35px;




}









.vhwn-size-btn {




    background: #181818;




    border: 2px solid rgba(255, 255, 255, 0.08);




    border-radius: 14px;




    padding: 22px 18px;




    text-align: center;




    cursor: pointer;




    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);




    color: #ffffff;




    display: flex;




    flex-direction: column;




    align-items: center;




    gap: 8px;




    position: relative;




    outline: none;




}









.vhwn-size-btn:hover {




    border-color: rgba(200, 169, 98, 0.5);




    transform: translateY(-2px);




    background: #202022;




}









.vhwn-size-btn.active {




    background: rgba(200, 169, 98, 0.08);




    border-color: #C8A962;




    box-shadow: 0 0 20px rgba(200, 169, 98, 0.25);




}









.vhwn-size-icon {




    color: #C8A962;




    margin-bottom: 2px;




}









.vhwn-size-name {




    font-size: 16px;




    font-weight: 800;




    color: #ffffff;




}









.vhwn-size-desc {




    font-size: 12.5px;




    color: #9ca3af;




    line-height: 1.4;




}









/* Pricing Cards Grid */




.vhwn-pricing-cards {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));




    gap: 20px;




    margin-bottom: 40px;




}









.vhwn-price-card {




    background: #181818;




    border: 1px solid rgba(255, 255, 255, 0.08);




    border-radius: 14px;




    padding: 26px 22px;




    display: flex;




    flex-direction: column;




    position: relative;




    transition: all 0.25s ease;




}









.vhwn-price-card:hover {




    transform: translateY(-3px);




    border-color: rgba(200, 169, 98, 0.4);




    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);




}









.vhwn-price-card.popular {




    border: 2px solid #C8A962;




    background: linear-gradient(180deg, rgba(200, 169, 98, 0.06) 0%, #181818 100%);




    box-shadow: 0 4px 25px rgba(200, 169, 98, 0.15);




}









.vhwn-card-badge {




    align-self: flex-start;




    font-size: 11px;




    font-weight: 700;




    color: #C8A962;




    background: rgba(200, 169, 98, 0.12);




    padding: 3px 10px;




    border-radius: 12px;




    text-transform: uppercase;




    letter-spacing: 0.8px;




    margin-bottom: 12px;




}









.vhwn-price-card.popular .vhwn-card-badge {




    background: #C8A962;




    color: #111111;




}









.vhwn-price-card h3 {




    font-size: 19px;




    font-weight: 800;




    color: #ffffff;




    margin: 0 0 10px;




    line-height: 1.3;




}









.vhwn-price-amount {




    font-size: 32px;




    font-weight: 900;




    color: #C8A962;




    margin-bottom: 12px;




    display: flex;




    align-items: baseline;




    gap: 2px;




}









.price-prefix {




    font-size: 15px;




    color: #9ca3af;




    font-weight: 500;




    margin-right: 2px;




}









.price-val {




    transition: opacity 0.15s ease, transform 0.15s ease;




    display: inline-block;




}









.price-suffix {




    font-size: 20px;




    color: #C8A962;




}









.vhwn-price-card p {




    font-size: 13px;




    color: #9ca3af;




    line-height: 1.5;




    margin-bottom: 18px;




}









.vhwn-card-features {




    list-style: none;




    padding: 0;




    margin: 0 0 25px;




    font-size: 13px;




    color: #d1d5db;




    line-height: 1.6;




    flex-grow: 1;




}









.vhwn-card-features li {




    margin-bottom: 8px;




    display: flex;




    align-items: flex-start;




    gap: 6px;




}









.vhwn-card-ctas {




    margin-top: auto;




    display: flex;




    flex-direction: column;




    gap: 10px;




    text-align: center;




}









.vhwn-config-contact-link {




    font-size: 12px;




    color: #9ca3af;




    text-decoration: underline;




    transition: color 0.2s;




}









.vhwn-config-contact-link:hover {




    color: #C8A962;




}









/* Add-ons Grid */




.vhwn-config-addons-wrap {




    background: #141416;




    border: 1px solid rgba(255, 255, 255, 0.08);




    border-radius: 16px;




    padding: 28px 24px;




    margin-bottom: 35px;




}









.vhwn-addons-title {




    margin-top: 0;




    margin-bottom: 20px;




    display: flex;




    flex-direction: column;




    gap: 4px;




}









.vhwn-addons-title span {




    font-size: 19px;




    font-weight: 800;




    color: #C8A962;




}









.vhwn-addons-title small {




    font-size: 13px;




    color: #9ca3af;




    font-weight: normal;




}









.vhwn-addons-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));




    gap: 16px;




}









.vhwn-addon-item {




    background: #1b1b1e;




    border: 1px solid rgba(255, 255, 255, 0.05);




    border-radius: 10px;




    padding: 16px;




}









.vhwn-addon-header {




    display: flex;




    justify-content: space-between;




    align-items: center;




    margin-bottom: 6px;




}









.vhwn-addon-header strong {




    font-size: 14px;




    color: #ffffff;




}









.vhwn-addon-price {




    font-size: 13px;




    font-weight: 700;




    color: #C8A962;




}









.vhwn-addon-item p {




    margin: 0;




    font-size: 12.5px;




    color: #9ca3af;




    line-height: 1.4;




}









/* Footer info badges */




.vhwn-config-footer-info {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));




    gap: 18px;




}









.vhwn-info-badge-item {




    background: rgba(200, 169, 98, 0.06);




    border-left: 3px solid #C8A962;




    border-radius: 8px;




    padding: 16px 20px;




    display: flex;




    gap: 14px;




    align-items: flex-start;




}









.vhwn-info-icon {




    font-size: 20px;




    flex-shrink: 0;




}









.vhwn-info-badge-item strong {




    display: block;




    color: #C8A962;




    font-size: 14px;




    margin-bottom: 4px;




}









.vhwn-info-badge-item span {




    color: #d1d5db;




    font-size: 13px;




    line-height: 1.5;




}









/* Responsive adjustments */




@media (max-width: 860px) {




    .vhwn-size-selector {




        grid-template-columns: 1fr;




    }









    .vhwn-pricing-cards {




        grid-template-columns: 1fr;




    }









    .vhwn-addons-grid {




        grid-template-columns: 1fr;




    }




}












/* Occasion Card Image Clickable & Zoom Effect */



.vhwn-car-card-img-wrap {



    display: block !important;



    position: relative !important;



    overflow: hidden !important;



    cursor: pointer !important;



    text-decoration: none !important;



    border-radius: 12px 12px 0 0 !important;



}







.vhwn-car-card-img-wrap .vhwn-car-img {



    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;



    display: block !important;



    width: 100% !important;



}







.vhwn-car-card:hover .vhwn-car-img,



.vhwn-car-card-img-wrap:hover .vhwn-car-img {



    transform: scale(1.05) !important;



}









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


   MOBILE HEADER CLEARANCE & OCCASION TITLE FIX


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


.single-vhwn_occasion main,


.single-vhwn_occasion main.wp-block-group,


.vhwn-single-occasion-main {


    padding-top: 85px !important;


}





.single-vhwn_occasion h1.wp-block-post-title,


.single-vhwn_occasion .wp-block-post-title,


.vhwn-single-occasion-main .wp-block-post-title {


    margin-top: 20px !important;


    margin-bottom: 25px !important;


    font-size: clamp(22px, 4vw, 36px) !important;


    line-height: 1.3 !important;


    word-break: break-word !important;


    position: relative !important;


    z-index: 1 !important;


}





@media (max-width: 860px) {


    .single-vhwn_occasion main,


    .single-vhwn_occasion main.wp-block-group,


    .vhwn-single-occasion-main {


        padding-top: 95px !important;


        padding-left: 16px !important;


        padding-right: 16px !important;


    }





    .single-vhwn_occasion h1.wp-block-post-title,


    .single-vhwn_occasion .wp-block-post-title,


    .vhwn-single-occasion-main .wp-block-post-title {


        margin-top: 15px !important;


        margin-bottom: 20px !important;


        font-size: 23px !important;


        line-height: 1.3 !important;


    }





    .vhwn-single-car-summary {


        padding: 22px 16px !important;


        margin-bottom: 30px !important;


    }





    .vhwn-single-price-box .single-price {


        font-size: 32px !important;


    }





    .vhwn-single-cta-group .vhwn-btn {


        width: 100% !important;


        text-align: center !important;


    }


}






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

   PERFECT TITLE & HEADER POSITIONING FIX (MOBILE & DESKTOP & ADMIN BAR)

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



/* Admin Bar sticky offset */

body.admin-bar header.wp-block-template-part {

    top: 32px !important;

}



@media (max-width: 782px) {

    body.admin-bar header.wp-block-template-part {

        top: 46px !important;

    }

}



/* Single Occasion Main Container */

body.single-vhwn_occasion main,

body.single-vhwn_occasion main#wp--skip-link--target,

body.single-vhwn_occasion .vhwn-single-occasion-main,

.single-vhwn_occasion main#wp--skip-link--target,

.single-vhwn_occasion .vhwn-single-occasion-main {

    padding-top: 35px !important;

    margin-top: 0 !important;

    display: block !important;

}



/* Single Occasion Title Spacing */

body.single-vhwn_occasion h1.wp-block-post-title,

body.single-vhwn_occasion .wp-block-post-title,

body.single-vhwn_occasion .vhwn-occasion-title,

.single-vhwn_occasion main > h1.wp-block-post-title,

.single-vhwn_occasion main > *:first-child,

.single-vhwn_occasion .vhwn-single-occasion-main > *:first-child {

    margin-top: 25px !important;

    margin-bottom: 25px !important;

    padding-top: 15px !important;

    padding-bottom: 5px !important;

    font-size: clamp(22px, 4vw, 34px) !important;

    line-height: 1.3 !important;

    display: block !important;

    clear: both !important;

    position: relative !important;

    z-index: 1 !important;

    word-break: break-word !important;

}



@media (max-width: 860px) {

    body.single-vhwn_occasion main,

    body.single-vhwn_occasion main#wp--skip-link--target,

    body.single-vhwn_occasion .vhwn-single-occasion-main,

    .single-vhwn_occasion main#wp--skip-link--target,

    .single-vhwn_occasion .vhwn-single-occasion-main {

        padding-top: 25px !important;

        padding-left: 16px !important;

        padding-right: 16px !important;

    }



    body.single-vhwn_occasion h1.wp-block-post-title,

    body.single-vhwn_occasion .wp-block-post-title,

    body.single-vhwn_occasion .vhwn-occasion-title,

    .single-vhwn_occasion main > h1.wp-block-post-title,

    .single-vhwn_occasion main > *:first-child,

    .single-vhwn_occasion .vhwn-single-occasion-main > *:first-child {

        margin-top: 25px !important;

        margin-bottom: 18px !important;

        padding-top: 15px !important;

        font-size: 23px !important;

        line-height: 1.3 !important;

    }

}
























/* ==========================================================================
   GLOBAL BALANCED HEADER CLEARANCE & LAYOUT ARCHITECTURE
   ========================================================================== */

/* 1. Global Sticky Header Navigation Bar */
header.wp-block-template-part,
.wp-site-blocks > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background-color: #0f0f0f !important;
    border-bottom: 1px solid rgba(200, 169, 98, 0.35) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 0 !important;
}

/* WP Admin Bar Sticky Offsets */
body.admin-bar header.wp-block-template-part,
body.admin-bar .wp-site-blocks > header {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar header.wp-block-template-part,
    body.admin-bar .wp-site-blocks > header {
        top: 46px !important;
    }
}

/* 2. Standard Main Container Reset */
.wp-site-blocks > main,
main.wp-block-group,
main#wp--skip-link--target,
main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Top Padding for Content & Archive Pages */
.vhwn-occasions-archive-main,
.vhwn-single-occasion-main,
.post-type-archive-vhwn_occasion main,
.single-vhwn_occasion main,
.page-template-default:not(.page-id-242):not(.page-id-243):not(.home) main {
    padding-top: 85px !important;
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
}

body.admin-bar .vhwn-occasions-archive-main,
body.admin-bar .vhwn-single-occasion-main,
body.admin-bar .post-type-archive-vhwn_occasion main,
body.admin-bar .single-vhwn_occasion main {
    padding-top: 115px !important;
}

@media (max-width: 860px) {
    .vhwn-occasions-archive-main,
    .vhwn-single-occasion-main,
    .post-type-archive-vhwn_occasion main,
    .single-vhwn_occasion main,
    .page-template-default:not(.page-id-242):not(.page-id-243):not(.home) main {
        padding-top: 80px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 0 !important;
    }

    body.admin-bar .vhwn-occasions-archive-main,
    body.admin-bar .vhwn-single-occasion-main,
    body.admin-bar .post-type-archive-vhwn_occasion main,
    body.admin-bar .single-vhwn_occasion main {
        padding-top: 115px !important;
    }
}

/* 4. Hero Section Spacing on Archive/Content Pages */
.vhwn-archive-hero {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 1 !important;
}

.vhwn-archive-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

@media (max-width: 860px) {
    .vhwn-archive-hero {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .vhwn-archive-hero h1 {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* 5. Full-bleed Hero Banners on /cars/, /detailing/, and Home (flush with header, 0px gap) */
.home main,
.page-id-242 main,
.page-id-243 main,
.page-template-front-page main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.vhwn-hero-video-section,
.vhwn-hero-group,
.vhwn-hero-section {
    margin-top: 0 !important;
    padding: 70px 20px 60px !important;
    box-sizing: border-box !important;
}

@media (max-width: 860px) {
    .vhwn-hero-video-section,
    .vhwn-hero-group,
    .vhwn-hero-section {
        margin-top: 0 !important;
        padding: 42px 16px 36px !important;
        min-height: auto !important;
    }

    .vhwn-hero-badge {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        display: inline-flex !important;
    }
}

/* 6. Occasion Card Structure & 3-Button Integrity */
.vhwn-occasions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 28px !important;
    margin-bottom: 50px !important;
}

.vhwn-occasions-grid > p,
.vhwn-occasions-wrapper > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

.vhwn-car-card {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.vhwn-car-card p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

.vhwn-car-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(200, 169, 98, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.vhwn-car-card-img-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #111111 !important;
    text-decoration: none !important;
}

.vhwn-car-card-img-wrap img.vhwn-car-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.vhwn-car-card:hover .vhwn-car-card-img-wrap img.vhwn-car-img {
    transform: scale(1.05) !important;
}

.vhwn-car-card-price {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background: rgba(17, 17, 17, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    line-height: 1.2 !important;
    z-index: 2 !important;
}

.vhwn-car-card-price .price-val {
    color: #C8A962 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

.vhwn-car-card-price .price-type {
    color: #9ca3af !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.vhwn-car-card-body {
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.vhwn-car-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 14px !important;
}

.vhwn-car-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.vhwn-car-title a:hover {
    color: #C8A962 !important;
}

.vhwn-car-specs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 12px !important;
    margin-bottom: 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
}

.vhwn-car-actions {
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.vhwn-car-actions .vhwn-btn-view {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    display: block !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    background: #252525 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.vhwn-car-actions .vhwn-btn-view:hover {
    background: #333333 !important;
    border-color: #555555 !important;
}

.vhwn-car-actions .vhwn-btn-wa,
.vhwn-car-actions .vhwn-btn-call {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.vhwn-car-actions .vhwn-btn-wa {
    background: #25D366 !important;
    color: #ffffff !important;
    border: 1px solid #25D366 !important;
}

.vhwn-car-actions .vhwn-btn-wa:hover {
    background: #20ba59 !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
    transform: translateY(-1px) !important;
}

.vhwn-car-actions .vhwn-btn-call {
    background: #C8A962 !important;
    color: #0d0d0d !important;
    border: 1px solid #C8A962 !important;
}

.vhwn-car-actions .vhwn-btn-call:hover {
    background: #d4b872 !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(200, 169, 98, 0.3) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 500px) {
    .vhwn-occasions-grid {
        grid-template-columns: 1fr !important;
    }
    
    .vhwn-car-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .vhwn-car-actions .vhwn-btn-view {
        grid-column: 1 !important;
    }
}


/* ==========================================================================
   MOBILE NAVIGATION FULLSCREEN MODAL - ABSOLUTE CENTERING
   ========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(13, 13, 13, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 60px 20px 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.has-modal-open ul.wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 20px !important;
    text-align: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
    font-size: 19px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    text-align: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    margin: 0 auto !important;
    width: auto !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content:hover {
    color: #C8A962 !important;
    transform: scale(1.05) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 1000000 !important;
    color: #C8A962 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid rgba(200, 169, 98, 0.3) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close svg {
    fill: #C8A962 !important;
    width: 22px !important;
    height: 22px !important;
}


/* ==========================================================================
   ENHANCED PRICING CONFIGURATOR STYLES
   ========================================================================== */
.vhwn-configurator {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 0 30px;
    box-sizing: border-box;
}

.vhwn-size-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}

.vhwn-size-btn {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vhwn-size-btn:hover {
    border-color: rgba(200, 169, 98, 0.5);
    background: #202020;
    transform: translateY(-2px);
}

.vhwn-size-btn.active {
    background: #1f1d17;
    border-color: #C8A962;
    box-shadow: 0 0 20px rgba(200, 169, 98, 0.2);
}

.vhwn-size-icon {
    font-size: 28px;
    line-height: 1;
}

.vhwn-size-name {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}

.vhwn-size-btn.active .vhwn-size-name {
    color: #C8A962;
}

.vhwn-size-desc {
    font-size: 12px;
    color: #888888;
    line-height: 1.4;
}

.vhwn-pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.vhwn-price-card {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.25s ease;
}

.vhwn-price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 98, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.vhwn-price-card.popular {
    border-color: rgba(200, 169, 98, 0.6);
    background: linear-gradient(180deg, #1d1a14 0%, #181818 100%);
    box-shadow: 0 0 25px rgba(200, 169, 98, 0.15);
}

.vhwn-card-badge {
    align-self: flex-start;
    background: rgba(200, 169, 98, 0.15);
    border: 1px solid rgba(200, 169, 98, 0.35);
    color: #C8A962;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.vhwn-price-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.vhwn-price-amount {
    font-size: 24px;
    font-weight: 800;
    color: #C8A962;
    margin-bottom: 12px;
}

.vhwn-price-amount span.price-val {
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: inline-block;
}

.vhwn-price-card p {
    font-size: 13px;
    color: #999999;
    line-height: 1.5;
    margin-bottom: 16px;
}

.vhwn-price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vhwn-price-card ul li {
    font-size: 12.5px;
    color: #cccccc;
    position: relative;
    padding-left: 18px;
    line-height: 1.4;
}

.vhwn-price-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #C8A962;
    font-weight: 700;
}

.vhwn-config-cta {
    display: block;
    text-align: center;
    background: #C8A962;
    color: #0d0d0d !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 11px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.vhwn-config-cta:hover {
    background: #d4b872;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 169, 98, 0.3);
}

.vhwn-config-disclaimer {
    font-size: 12.5px;
    color: #777777;
    text-align: center;
    max-width: 820px;
    margin: 25px auto 0;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .vhwn-pricing-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .vhwn-size-selector {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .vhwn-pricing-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ==========================================================================
   BOOKING WIZARD & ANTI-SPAM FORM STYLING
   ========================================================================== */
.vhwn-wizard {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

.vhwn-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 45px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.vhwn-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.vhwn-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e1e1e;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

.vhwn-step-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.vhwn-step-item.active .vhwn-step-num {
    background: #1f1d17;
    border-color: #C8A962;
    color: #C8A962;
    box-shadow: 0 0 15px rgba(200, 169, 98, 0.3);
}

.vhwn-step-item.active .vhwn-step-name {
    color: #C8A962;
}

.vhwn-step-item.completed .vhwn-step-num {
    background: #C8A962;
    border-color: #C8A962;
    color: #0d0d0d;
}

.vhwn-step-item.completed .vhwn-step-name {
    color: #ffffff;
}

.vhwn-step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 10px;
    margin-bottom: 24px;
    position: relative;
}

.vhwn-step-connector .connector-fill {
    height: 100%;
    background: #C8A962;
    width: 0%;
    transition: width 0.4s ease;
}

.vhwn-wizard-title {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin-bottom: 8px;
}

.vhwn-wizard-subtitle {
    font-size: 15px;
    color: #aaaaaa;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 35px;
    line-height: 1.5;
}

/* Grids */
.vhwn-size-grid,
.vhwn-polish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.vhwn-polish-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.vhwn-pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.vhwn-size-card,
.vhwn-pkg-card,
.vhwn-polish-card {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 26px 20px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.vhwn-size-card:hover,
.vhwn-pkg-card:hover,
.vhwn-polish-card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 169, 98, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.vhwn-size-card.selected,
.vhwn-pkg-card.selected,
.vhwn-polish-card.selected {
    border-color: #C8A962;
    background: #1f1d17;
    box-shadow: 0 0 20px rgba(200, 169, 98, 0.2);
}

.vhwn-size-card .card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.vhwn-size-card h3,
.vhwn-pkg-card h3,
.vhwn-polish-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.vhwn-size-card p,
.vhwn-pkg-card p,
.vhwn-polish-card p {
    font-size: 13px;
    color: #999999;
    line-height: 1.5;
    margin: 0;
}

.pkg-badge,
.polish-badge {
    align-self: center;
    background: rgba(200, 169, 98, 0.15);
    border: 1px solid rgba(200, 169, 98, 0.35);
    color: #C8A962;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.pkg-price-amount,
.polish-price {
    font-size: 22px;
    font-weight: 800;
    color: #C8A962;
    margin-bottom: 10px;
}

/* Addons List */
.vhwn-addons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto 30px;
}

.vhwn-addon-row {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vhwn-addon-row:hover {
    border-color: rgba(200, 169, 98, 0.4);
    background: #202020;
}

.vhwn-addon-row.selected {
    border-color: #C8A962;
    background: #1f1d17;
}

.vhwn-addon-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #C8A962;
    cursor: pointer;
}

.addon-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.addon-info strong {
    font-size: 15px;
    color: #ffffff;
}

.addon-info small {
    font-size: 12.5px;
    color: #888888;
}

.addon-price-display {
    font-size: 15px;
    font-weight: 700;
    color: #C8A962;
    white-space: nowrap;
}

/* Summary Box */
#booking-summary-box {
    background: #181818;
    border: 1px solid rgba(200, 169, 98, 0.35);
    border-radius: 14px;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.vhwn-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px;
    color: #cccccc;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-key {
    font-weight: 600;
    color: #888888;
}

.summary-val {
    font-weight: 700;
    color: #ffffff;
}

.summary-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200, 169, 98, 0.12);
    border: 1px solid rgba(200, 169, 98, 0.3);
    color: #C8A962;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 6px;
}

.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 6px;
}

.summary-total-label {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.summary-total-amount {
    font-size: 24px;
    font-weight: 800;
    color: #C8A962;
}

/* CF7 Quiz field */
.vhwn-quiz-field {
    width: 100% !important;
    max-width: 200px !important;
    background: #111111 !important;
    border: 1px solid rgba(200, 169, 98, 0.4) !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.vhwn-quiz-field:focus {
    border-color: #C8A962 !important;
    box-shadow: 0 0 10px rgba(200, 169, 98, 0.3) !important;
    outline: none !important;
}

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

@media (max-width: 600px) {
    .vhwn-size-grid,
    .vhwn-pkg-grid,
    .vhwn-polish-grid {
        grid-template-columns: 1fr;
    }
    .vhwn-step-name {
        display: none;
    }
}



/* ==========================================================================
   PERFECT CONTACT FORM 7 & BOOKING WIZARD DARK LUXURY STYLING
   ========================================================================== */
/* Form Container & Layout */
.wpcf7 {
    max-width: 100% !important;
}

.wpcf7-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.vhwn-cf7-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .vhwn-cf7-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

.wpcf7-form p {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.wpcf7-form label {
    display: block !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e5e7eb !important;
    text-align: left !important;
    margin-bottom: 6px !important;
}

.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
}

/* Form Inputs, Selects & Textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 .vhwn-quiz-field {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 13px 16px !important;
    font-size: 14.5px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.wpcf7 .vhwn-quiz-field:focus {
    border-color: #C8A962 !important;
    background: #181818 !important;
    box-shadow: 0 0 12px rgba(200, 169, 98, 0.25) !important;
}

/* Styled Custom Select Dropdown Arrow */
.wpcf7 select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

.wpcf7 select option {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.wpcf7 textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.wpcf7-submit,
.wpcf7 input[type="submit"] {
    background: #C8A962 !important;
    color: #0d0d0d !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    display: inline-block !important;
}

.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
    background: #d4b872 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(200, 169, 98, 0.35) !important;
}

.wpcf7-not-valid-tip {
    color: #ef4444 !important;
    font-size: 12.5px !important;
    margin-top: 4px !important;
    text-align: left !important;
}

.wpcf7-response-output {
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin: 15px 0 0 0 !important;
    font-size: 14px !important;
    border: 1px solid rgba(200, 169, 98, 0.4) !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* ==========================================================================
   WIZARD PRO LAYOUT & EQUAL HEIGHT CARDS
   ========================================================================== */
.vhwn-wizard {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 10px 0 30px !important;
    box-sizing: border-box !important;
}

.vhwn-wizard-panel {
    min-height: 420px;
}

.vhwn-size-grid,
.vhwn-pkg-grid,
.vhwn-polish-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
    align-items: stretch !important;
}

.vhwn-pkg-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.vhwn-polish-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vhwn-size-card,
.vhwn-pkg-card,
.vhwn-polish-card {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 26px 20px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.22s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.vhwn-size-card:hover,
.vhwn-pkg-card:hover,
.vhwn-polish-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(200, 169, 98, 0.4) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.vhwn-size-card.selected,
.vhwn-pkg-card.selected,
.vhwn-polish-card.selected {
    border-color: #C8A962 !important;
    background: #1f1d17 !important;
    box-shadow: 0 0 20px rgba(200, 169, 98, 0.25) !important;
}

.vhwn-size-card.selected::after,
.vhwn-pkg-card.selected::after,
.vhwn-polish-card.selected::after {
    content: "✓ Gekozen";
    position: absolute;
    top: 10px;
    right: 12px;
    background: #C8A962;
    color: #0d0d0d;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

.vhwn-size-card .card-icon {
    font-size: 34px !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}

.vhwn-size-card h3,
.vhwn-pkg-card h3,
.vhwn-polish-card h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
}

.vhwn-size-card p,
.vhwn-polish-card p {
    font-size: 13px !important;
    color: #999999 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.pkg-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.pkg-feature-list li {
    font-size: 12.5px !important;
    color: #cccccc !important;
    position: relative !important;
    padding-left: 16px !important;
    line-height: 1.4 !important;
}

.pkg-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #C8A962;
    font-weight: 700;
}

.vhwn-summary-card {
    background: #181818 !important;
    border: 1px solid rgba(200, 169, 98, 0.35) !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

.vhwn-wizard-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 25px !important;
}

/* Floating Price Bar */
.vhwn-price-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(200, 169, 98, 0.3) !important;
    padding: 12px 24px !important;
    z-index: 9999 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
}

.vhwn-price-bar.visible {
    transform: translateY(0) !important;
}

.price-bar-content {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.price-bar-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.price-bar-label {
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.price-bar-items {
    font-size: 14px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.price-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.price-bar-total {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #C8A962 !important;
}

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

@media (max-width: 640px) {
    .vhwn-size-grid,
    .vhwn-pkg-grid,
    .vhwn-polish-grid {
        grid-template-columns: 1fr !important;
    }
    .price-bar-content {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    .price-bar-info {
        flex-direction: column !important;
        gap: 4px !important;
    }
}



/* ==========================================================================
   ULTRA-AUTHORITATIVE DARK LUXURY STYLES FOR CONTACT FORM & SELECTS
   ========================================================================== */
html body .wpcf7,
html body .wpcf7-form {
    width: 100% !important;
}

html body .wpcf7-form p {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

html body .wpcf7-form label {
    display: block !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e5e7eb !important;
    text-align: left !important;
    margin-bottom: 6px !important;
}

html body .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
}

html body .wpcf7-form input[type="text"],
html body .wpcf7-form input[type="email"],
html body .wpcf7-form input[type="tel"],
html body .wpcf7-form input[type="number"],
html body .wpcf7-form input.wpcf7-text,
html body .wpcf7-form select,
html body .wpcf7-form select.wpcf7-select,
html body .wpcf7-form textarea,
html body .wpcf7-form textarea.wpcf7-textarea,
html body .wpcf7-form .vhwn-quiz-field {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

html body .wpcf7-form input::placeholder,
html body .wpcf7-form textarea::placeholder {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
    opacity: 1 !important;
}

html body .wpcf7-form input[type="text"]:focus,
html body .wpcf7-form input[type="email"]:focus,
html body .wpcf7-form input[type="tel"]:focus,
html body .wpcf7-form select:focus,
html body .wpcf7-form textarea:focus,
html body .wpcf7-form .vhwn-quiz-field:focus {
    border-color: #C8A962 !important;
    background: #181818 !important;
    background-color: #181818 !important;
    box-shadow: 0 0 12px rgba(200, 169, 98, 0.3) !important;
}

html body .wpcf7-form select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .wpcf7-form select option {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 12px !important;
}

html body .wpcf7-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

html body .wpcf7-submit,
html body .wpcf7-form input[type="submit"] {
    background: #C8A962 !important;
    color: #0d0d0d !important;
    -webkit-text-fill-color: #0d0d0d !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    display: inline-block !important;
}

html body .wpcf7-submit:hover,
html body .wpcf7-form input[type="submit"]:hover {
    background: #d4b872 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(200, 169, 98, 0.35) !important;
}

/* WIZARD CURSOR & CARD INTERACTIONS */
.vhwn-size-card,
.vhwn-pkg-card,
.vhwn-polish-card,
.vhwn-addon-row,
.vhwn-step-item {
    cursor: pointer !important;
    user-select: none !important;
}

/* AIRTIGHT DARK CONTACT FORM & BOOKING WIZARD INPUT STYLING */
.wpcf7 form.wpcf7-form,
.wpcf7 {
    color: #ffffff !important;
}

.wpcf7 label {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit),
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    background-color: #141414 !important;
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):hover,
.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 input[type="number"]:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
    border-color: rgba(200, 169, 98, 0.5) !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    background-color: #1c1c1c !important;
    background: #1c1c1c !important;
    border-color: #C8A962 !important;
    box-shadow: 0 0 0 3px rgba(200, 169, 98, 0.25) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    outline: none !important;
}

.wpcf7 select option {
    background-color: #141414 !important;
    color: #ffffff !important;
}

.wpcf7 .wpcf7-submit {
    background: linear-gradient(135deg, #C8A962 0%, #A6873C 100%) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: inline-block !important;
    width: 100% !important;
}

.wpcf7 .wpcf7-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(200, 169, 98, 0.35) !important;
}

.wpcf7-response-output {
    border-radius: 6px !important;
    margin: 15px 0 0 0 !important;
    padding: 12px 18px !important;
}


/* ENHANCED INTERACTIVE WIZARD CARDS & STEP TRANSITIONS */
.vhwn-wizard {
    position: relative;
    z-index: 10;
}

.vhwn-size-card,
.vhwn-pkg-card,
.vhwn-polish-card,
.vhwn-addon-row,
.vhwn-step-item {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.vhwn-size-card:hover,
.vhwn-pkg-card:hover,
.vhwn-polish-card:hover {
    border-color: rgba(200, 169, 98, 0.6) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.vhwn-size-card.selected,
.vhwn-pkg-card.selected,
.vhwn-polish-card.selected {
    border-color: #C8A962 !important;
    background: #1c1c1c !important;
    box-shadow: 0 0 0 2px #C8A962, 0 10px 30px rgba(200, 169, 98, 0.2) !important;
}

.vhwn-wizard-panel {
    display: none;
}

.vhwn-wizard-panel.active {
    display: block !important;
    animation: wizardFadeIn 0.25s ease-in-out;
}

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


/* UNIFIED BOTTOM BAR NAVIGATION STYLING */
.vhwn-wizard {
    padding-bottom: 90px !important;
}

.vhwn-price-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(14, 14, 14, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(200, 169, 98, 0.35) !important;
    padding: 14px 24px !important;
    z-index: 99999 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6) !important;
    display: block !important;
}

.price-bar-content {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.price-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
}

.price-bar-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.price-bar-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #999999 !important;
}

.price-bar-items {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.price-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-shrink: 0 !important;
}

.price-bar-total {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #C8A962 !important;
    letter-spacing: -0.01em !important;
}

#price-bar-back-btn {
    background: #222222 !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#price-bar-back-btn:hover {
    background: #333333 !important;
    border-color: #C8A962 !important;
    color: #ffffff !important;
}

#price-bar-next-btn {
    background: linear-gradient(135deg, #C8A962 0%, #A6873C 100%) !important;
    color: #000000 !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(200, 169, 98, 0.3) !important;
    transition: all 0.2s ease !important;
}

#price-bar-next-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(200, 169, 98, 0.45) !important;
}

@keyframes wizardShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (max-width: 640px) {
    .vhwn-price-bar {
        padding: 10px 14px !important;
    }
    .price-bar-label { display: none !important; }
    .price-bar-items { font-size: 12px !important; }
    .price-bar-total { font-size: 16px !important; }
    #price-bar-back-btn { padding: 8px 12px !important; font-size: 12px !important; }
    #price-bar-next-btn { padding: 8px 14px !important; font-size: 12px !important; }
}


/* ==========================================================================
   VHWN OCCASION ADVERTENTIE - LUXURY DARK SINGLE LAYOUT
   ========================================================================== */
.vhwn-ad-container {
    max-width: 1240px;
    margin: 0 auto;
}

.vhwn-back-btn {
    color: #C8A962 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform 0.2s ease !important;
}
.vhwn-back-btn:hover {
    transform: translateX(-4px) !important;
    color: #ffffff !important;
}

.vhwn-ad-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 35px !important;
    align-items: start !important;
    margin-bottom: 35px !important;
}

.vhwn-gallery-wrapper {
    position: relative;
}

.vhwn-main-img-box {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.vhwn-main-img-box img {
    width: 100% !important;
    height: 480px !important;
    object-fit: cover !important;
    display: block !important;
}

.vhwn-status-pill {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.vhwn-thumb-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 12px 2px 6px !important;
}

.vhwn-thumb-item-img {
    width: 80px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.vhwn-thumb-item-img:hover {
    opacity: 0.9 !important;
}

.vhwn-thumb-item-img.active {
    opacity: 1 !important;
    border-color: #C8A962 !important;
    transform: scale(1.04) !important;
}

.vhwn-summary-wrapper {
    background: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.vhwn-ad-title {
    color: #ffffff !important;
    font-size: clamp(20px, 2.5vw, 26px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
}

.vhwn-plate-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFCC00 !important;
    color: #000000 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    border: 1.5px solid #000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.vhwn-plate-badge .nl-flag {
    background: #003399 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    margin-right: 6px !important;
}

.vhwn-price-banner {
    background: rgba(200, 169, 98, 0.1) !important;
    border: 1px solid rgba(200, 169, 98, 0.3) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 22px !important;
}

.vhwn-price-banner .price-title {
    font-size: 11.5px !important;
    color: #999999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: block !important;
}

.vhwn-price-banner .price-val {
    color: #C8A962 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.vhwn-price-banner .price-label-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #eeeeee !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 15px !important;
}

.vhwn-key-tiles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}

.vhwn-tile {
    background: #202020 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    padding: 10px 8px !important;
    text-align: center !important;
}

.vhwn-tile span {
    display: block !important;
    font-size: 10.5px !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 3px !important;
}

.vhwn-tile strong {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.vhwn-cta-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.vhwn-ad-section {
    background: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-top: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.section-heading {
    color: #C8A962 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 18px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 12px !important;
}

.vhwn-options-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 12px !important;
}

.vhwn-opt-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #e0e0e0 !important;
    font-size: 14px !important;
}

.vhwn-opt-item .opt-check {
    color: #C8A962 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.vhwn-desc-body {
    color: #cccccc !important;
    line-height: 1.75 !important;
    font-size: 15px !important;
}

.vhwn-desc-body p {
    margin-bottom: 14px !important;
}

.vhwn-desc-body ul {
    margin: 14px 0 18px 20px !important;
    padding: 0 !important;
}

.vhwn-desc-body li {
    margin-bottom: 6px !important;
    color: #ddd !important;
}

.vhwn-specs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px 30px !important;
}

.vhwn-spec-row {
    display: flex !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 8px !important;
}

.vhwn-spec-row .spec-name {
    color: #888888 !important;
    font-size: 13.5px !important;
}

.vhwn-spec-row .spec-value {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

.vhwn-showroom-card {
    background: #141414 !important;
    border: 1px solid rgba(200, 169, 98, 0.3) !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    margin-top: 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.showroom-title {
    color: #C8A962 !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.showroom-link {
    color: #aaaaaa !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
}

@media (max-width: 900px) {
    .vhwn-ad-hero-grid {
        grid-template-columns: 1fr !important;
    }
    .vhwn-main-img-box img {
        height: 340px !important;
    }
}




/* === LUXURY SINGLE OCCASION TEMPLATE CSS === */
.vhwn-single-occasion-main {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vhwn-ad-container {
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.vhwn-ad-topbar {
    margin-bottom: 24px !important;
}

.vhwn-back-btn {
    color: #C8A962 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}
.vhwn-back-btn:hover {
    transform: translateX(-4px) !important;
    color: #ffffff !important;
}

/* 2-Column Hero Flex Layout */
.vhwn-ad-hero-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    align-items: flex-start !important;
    margin-bottom: 35px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vhwn-gallery-wrapper {
    flex: 1 1 58% !important;
    min-width: 0 !important;
    max-width: 58% !important;
    position: relative !important;
}

.vhwn-summary-wrapper {
    flex: 1 1 42% !important;
    min-width: 0 !important;
    max-width: 42% !important;
    background: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Photo Box */
.vhwn-main-img-box {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 480px !important;
    cursor: zoom-in !important;
    user-select: none !important;
    touch-action: pan-y !important;
}

.vhwn-main-img-box img#vhwn_main_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.15s ease !important;
}

.vhwn-main-img-box.empty-gallery {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #777777 !important;
    font-size: 15px !important;
    cursor: default !important;
}

/* Zoom Hint Button */
.vhwn-zoom-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
}
.vhwn-zoom-btn:hover {
    background: #C8A962 !important;
    color: #000000 !important;
    transform: scale(1.08) !important;
}

/* PC Nav Arrows on Main Photo */
.vhwn-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    z-index: 10 !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}
.vhwn-nav-prev {
    left: 14px !important;
}
.vhwn-nav-next {
    right: 14px !important;
}
.vhwn-nav-arrow:hover {
    opacity: 1 !important;
    background: #C8A962 !important;
    color: #000000 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* Photo Counter Badge */
.vhwn-photo-counter {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(8px) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
}

/* Status Pill with CSS Glowing Dot */
.vhwn-status-pill {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    line-height: 1 !important;
    backdrop-filter: blur(8px) !important;
}

.vhwn-status-pill .status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.vhwn-status-pill.status-nieuw {
    background: rgba(13, 71, 161, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(144, 202, 249, 0.4) !important;
}
.vhwn-status-pill.status-nieuw .status-dot {
    background: #64b5f6 !important;
    box-shadow: 0 0 8px #64b5f6 !important;
}

.vhwn-status-pill.status-voorraad {
    background: rgba(20, 90, 30, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(165, 214, 167, 0.4) !important;
}
.vhwn-status-pill.status-voorraad .status-dot {
    background: #4ade80 !important;
    box-shadow: 0 0 8px #4ade80 !important;
}

.vhwn-status-pill.status-gereserveerd {
    background: rgba(217, 119, 6, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(254, 215, 170, 0.4) !important;
}
.vhwn-status-pill.status-gereserveerd .status-dot {
    background: #fbbf24 !important;
    box-shadow: 0 0 8px #fbbf24 !important;
}

.vhwn-status-pill.status-verkocht {
    background: rgba(185, 28, 28, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(254, 202, 202, 0.4) !important;
}
.vhwn-status-pill.status-verkocht .status-dot {
    background: #f87171 !important;
    box-shadow: 0 0 8px #f87171 !important;
}

/* Thumbnail Gallery Strip */
.vhwn-thumb-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 12px 2px 6px !important;
    scrollbar-width: thin !important;
}
.vhwn-thumb-strip::-webkit-scrollbar {
    height: 6px !important;
}
.vhwn-thumb-strip::-webkit-scrollbar-thumb {
    background: #333333 !important;
    border-radius: 4px !important;
}

.vhwn-thumb-item-img {
    width: 84px !important;
    height: 62px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    opacity: 0.55 !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.vhwn-thumb-item-img:hover {
    opacity: 0.9 !important;
}

.vhwn-thumb-item-img.active {
    opacity: 1 !important;
    border-color: #C8A962 !important;
    transform: scale(1.03) !important;
}

/* Title & Plate */
.vhwn-ad-title {
    color: #ffffff !important;
    font-size: clamp(20px, 2.2vw, 25px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
}

.vhwn-ad-plate-row {
    margin-bottom: 18px !important;
}

.vhwn-plate-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFCC00 !important;
    color: #000000 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    border: 1.5px solid #000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.vhwn-plate-badge .nl-flag {
    background: #003399 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    margin-right: 6px !important;
}

/* Price Banner */
.vhwn-price-banner {
    background: rgba(200, 169, 98, 0.1) !important;
    border: 1px solid rgba(200, 169, 98, 0.3) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 22px !important;
}

.vhwn-price-banner .price-title {
    font-size: 11px !important;
    color: #999999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.vhwn-price-banner .price-val {
    color: #C8A962 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}

.vhwn-price-banner .price-label-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #eeeeee !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 15px !important;
}

/* 6 Key Spec Tiles */
.vhwn-key-tiles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}

.vhwn-tile {
    background: #1f1f1f !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    padding: 10px 8px !important;
    text-align: center !important;
}

.vhwn-tile span {
    display: block !important;
    font-size: 10px !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 3px !important;
}

.vhwn-tile strong {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Call to Action Buttons */
.vhwn-cta-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.vhwn-cta-subgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.vhwn-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 18px !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.vhwn-btn-wa {
    background: #25D366 !important;
    color: #ffffff !important;
}
.vhwn-btn-wa:hover {
    background: #20bd5a !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.vhwn-btn-call {
    background: #222222 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.vhwn-btn-call:hover {
    background: #2c2c2c !important;
    border-color: #C8A962 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.vhwn-btn-inruil {
    background: rgba(200, 169, 98, 0.12) !important;
    color: #C8A962 !important;
    border: 1px solid rgba(200, 169, 98, 0.4) !important;
}
.vhwn-btn-inruil:hover {
    background: rgba(200, 169, 98, 0.22) !important;
    transform: translateY(-2px) !important;
    color: #C8A962 !important;
}

/* Sections: Options, Description, Specs */
.vhwn-ad-section {
    background: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-top: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

.section-heading {
    color: #C8A962 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 18px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.vhwn-options-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 12px !important;
}

.vhwn-opt-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #e0e0e0 !important;
    font-size: 14px !important;
}

.vhwn-opt-item .opt-check {
    color: #C8A962 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.vhwn-desc-body {
    color: #cccccc !important;
    line-height: 1.75 !important;
    font-size: 15px !important;
}

.vhwn-desc-body p {
    margin-bottom: 14px !important;
}

.vhwn-desc-body ul {
    margin: 14px 0 18px 20px !important;
    padding: 0 !important;
}

.vhwn-desc-body li {
    margin-bottom: 6px !important;
    color: #ddd !important;
}

.vhwn-specs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px 30px !important;
}

.vhwn-spec-row {
    display: flex !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 8px !important;
}

.vhwn-spec-row .spec-name {
    color: #888888 !important;
    font-size: 13.5px !important;
}

.vhwn-spec-row .spec-value {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

.vhwn-showroom-card {
    background: #141414 !important;
    border: 1px solid rgba(200, 169, 98, 0.3) !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    margin-top: 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.showroom-title {
    color: #C8A962 !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.showroom-link {
    color: #aaaaaa !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
}

/* === FULLSCREEN LIGHTBOX MODAL === */
/* Hidden by default with display: none !important */
.vhwn-lightbox-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 9999999 !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    user-select: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Only visible when .is-active is added by JS */
.vhwn-lightbox-overlay.is-active {
    display: flex !important;
}

.vhwn-lightbox-topbar {
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(10, 10, 10, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.vhwn-lightbox-counter {
    color: #C8A962 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
}

.vhwn-lightbox-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    max-width: 60% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

.vhwn-lightbox-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vhwn-lb-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.vhwn-lb-btn:hover {
    background: #C8A962 !important;
    color: #000000 !important;
    border-color: #C8A962 !important;
}
.vhwn-lb-btn.vhwn-lb-close:hover {
    background: #e53935 !important;
    color: #ffffff !important;
    border-color: #e53935 !important;
}

.vhwn-lightbox-stage {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: calc(100vh - 160px) !important;
    padding: 10px 80px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
}

.vhwn-lb-img-container {
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
}

.vhwn-lb-img-container img#vhwn_lb_img {
    max-width: calc(100vw - 180px) !important;
    max-height: calc(100vh - 170px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9) !important;
    margin: auto !important;
    display: block !important;
    transition: opacity 0.15s ease !important;
}

.vhwn-lb-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    z-index: 20 !important;
    transition: all 0.2s ease !important;
}
.vhwn-lb-prev {
    left: 20px !important;
}
.vhwn-lb-next {
    right: 20px !important;
}
.vhwn-lb-arrow:hover {
    background: #C8A962 !important;
    color: #000000 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.vhwn-lightbox-thumbs {
    padding: 12px 20px 16px !important;
    background: rgba(10, 10, 10, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.vhwn-lb-thumb {
    width: 60px !important;
    height: 45px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    opacity: 0.45 !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.vhwn-lb-thumb:hover {
    opacity: 0.8 !important;
}
.vhwn-lb-thumb.active {
    opacity: 1 !important;
    border-color: #C8A962 !important;
    transform: scale(1.05) !important;
}

@media (max-width: 900px) {
    .vhwn-ad-hero-grid {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .vhwn-gallery-wrapper,
    .vhwn-summary-wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .vhwn-main-img-box {
        aspect-ratio: 16 / 11 !important;
        max-height: 380px !important;
    }
    .vhwn-lightbox-stage {
        padding: 10px 12px !important;
        height: calc(100vh - 140px) !important;
    }
    .vhwn-lb-img-container img#vhwn_lb_img {
        max-width: 96vw !important;
        max-height: calc(100vh - 150px) !important;
    }
    .vhwn-lb-arrow {
        width: 42px !important;
        height: 42px !important;
    }
    .vhwn-lb-prev {
        left: 8px !important;
    }
    .vhwn-lb-next {
        right: 8px !important;
    }
    .vhwn-lightbox-title {
        display: none !important;
    }
}