/* WooCommerce cart page – coupon form sizing */
.woocommerce-cart .coupon input.input-text,
.woocommerce-cart input#coupon_code {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    border-radius: 30px !important;
    min-width: 220px !important;
}

.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart button[name="apply_coupon"] {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.woocommerce-cart .coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Cart: product quantity input (fix "grey circle") */
.woocommerce-cart .product-quantity .qty,
.woocommerce-cart input.qty {
    width: 72px !important;
    height: 40px !important;
    padding: 4px 8px !important;
    font-size: 15px !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #333 !important;
    display: inline-block !important;
}

/* Mini-Cart: hide popup by default; show only when .sc_layouts_cart_opened is set */
.sc_layouts_cart .sc_layouts_cart_widget {
    display: none !important;
    position: absolute;
    z-index: 200;
    right: -2em;
    top: 4em;
    width: 280px;
    padding: 1em;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    text-align: left;
}

.sc_layouts_cart.sc_layouts_cart_opened .sc_layouts_cart_widget {
    display: block !important;
}

.sc_layouts_cart .sc_layouts_cart_widget_close {
    position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    color: #666;
    z-index: 2;
}

.sc_layouts_cart .sc_layouts_cart_widget_close:hover {
    color: #c0392b;
}

.sc_layouts_cart .sc_layouts_cart_icon,
.sc_layouts_cart .sc_layouts_cart_details {
    cursor: pointer;
}

/* VR Tuning - Vehicle Product Page */

.vrt-single-vehicle {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
}

body.single-vrt_vehicle,
body.single-vrt_vehicle .page_wrap,
body.single-vrt_vehicle .content_wrap,
body.single-vrt_vehicle .content,
body.single-vrt_vehicle #content,
body.post-type-archive-vrt_vehicle,
body.post-type-archive-vrt_vehicle .page_wrap,
body.post-type-archive-vrt_vehicle .content_wrap,
body.post-type-archive-vrt_vehicle .content,
body.post-type-archive-vrt_vehicle #content {
    background: #fff !important;
}

/* ===== "Warum VR Tuning wählen?" Slider (Owl Carousel) ===== */
.vrt-why-section {
    max-width: 1170px;
    margin: 0 auto;
    padding: 60px 20px 70px;
    text-align: center;
}

.vrt-why-section__title {
    font-size: 26px;
    font-weight: 400;
    color: #555;
    letter-spacing: 1px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

html body .vrt-why-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
}

html body .vrt-why-scroll {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 5px !important;
    scrollbar-width: none;
    width: auto !important;
    min-width: 0;
}

html body .vrt-why-scroll::-webkit-scrollbar {
    display: none !important;
}

html body .vrt-why-item {
    flex: 0 0 calc((100% - 60px) / 4) !important;
    min-width: 220px !important;
    max-width: none !important;
    width: auto !important;
    scroll-snap-align: start;
    text-align: center !important;
    padding: 10px !important;
    box-sizing: border-box;
    display: block !important;
}

.vrt-why-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
}

.vrt-why-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vrt-why-item p {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

.vrt-why-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 80px;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #666;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vrt-why-arrow:hover {
    background: #e5e5e5;
    color: #333;
}

@media (max-width: 991px) {
    .vrt-why-item {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 576px) {
    .vrt-why-item {
        flex: 0 0 85%;
    }
    .vrt-why-arrow {
        display: none;
    }
}

/* Owl nav buttons styled like live */
.vrt-why-owl.owl-theme .owl-nav {
    margin: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.vrt-why-owl.owl-theme .owl-nav button.owl-prev,
.vrt-why-owl.owl-theme .owl-nav button.owl-next {
    pointer-events: auto;
    position: absolute;
    width: 44px;
    height: 80px;
    background: #f1f1f1 !important;
    border: 1px solid #e0e0e0 !important;
    color: #666 !important;
    font-size: 26px !important;
    line-height: 80px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.vrt-why-owl.owl-theme .owl-nav button.owl-prev { left: -10px; }
.vrt-why-owl.owl-theme .owl-nav button.owl-next { right: -10px; }

.vrt-why-owl.owl-theme .owl-nav button:hover {
    background: #e5e5e5 !important;
    color: #333 !important;
}

.vrt-why-owl.owl-theme .owl-nav button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vrt-why-owl .owl-stage-outer {
    padding: 10px 0;
}

.vrt-why-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vrt-why-viewport {
    flex: 1;
    overflow: hidden;
}

.vrt-why-track {
    display: flex;
    gap: 20px;
    transition: transform 0.35s ease;
}

.vrt-why-tile {
    flex: 0 0 calc((100% - 60px) / 4);
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.vrt-why-tile img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 18px;
}

.vrt-why-tile h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vrt-why-tile p {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

.vrt-why-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 80px;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 26px;
    color: #666;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vrt-why-nav:hover {
    background: #e5e5e5;
    color: #333;
}

.vrt-why-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .vrt-why-tile {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 576px) {
    .vrt-why-tile {
        flex: 0 0 100%;
    }
    .vrt-why-nav {
        display: none;
    }
    .vrt-why-viewport {
        overflow-x: auto;
    }
}

/* ===== Footer (live-site recreation) ===== */
.vrt-footer-col,
.vrt-footer-col-contact {
    padding: 0 15px;
}

.vrt-footer-heading {
    color: #c0392b !important;
    text-transform: uppercase;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

/* Linked footer headings keep the heading look; underline only on hover */
.vrt-footer-heading a {
    color: inherit !important;
    text-decoration: none !important;
}

.vrt-footer-heading a:hover {
    text-decoration: underline !important;
}

/* Contact-column heading: force the red heading colour even when the
   theme/CF7 context whitens it, and keep the link in the heading style.
   Specificity intentionally beats the white `.vrt-footer-col-contact *`
   rule further down (which is meant for the CF7 form, not the heading). */
body footer.footer_wrap .vrt-footer-col-contact .vrt-footer-heading,
body footer.footer_wrap .vrt-footer-col-contact .vrt-footer-heading a,
body footer.footer_wrap .vrt-footer-col-contact .vrt-footer-heading a:hover {
    color: #c0392b !important;
}

.vrt-footer-heading-mt {
    margin-top: 36px !important;
}

.vrt-footer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    line-height: 2.3;
    font-size: 15px;
}

.vrt-footer-list li::before {
    content: '›';
    color: #c0392b;
    margin-right: 8px;
    font-weight: 700;
}

.vrt-footer-list a {
    color: #fff !important;
    text-decoration: none;
    font-size: 15px;
}

.vrt-footer-list a:hover {
    color: #c0392b !important;
}

.vrt-footer-phone,
.vrt-footer-phone a,
.vrt-footer-phone a:link,
.vrt-footer-phone a:visited,
.vrt-footer-phone a:hover {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.vrt-footer-phone {
    margin: 0 0 20px !important;
}

.vrt-footer-phone i {
    color: #c0392b;
    margin-right: 6px;
}

.vrt-footer-btn {
    display: inline-block;
    padding: 11px 28px;
    background: #c0392b;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    transition: background 0.2s;
}

.vrt-footer-btn:hover {
    background: #a93226;
}

.vrt-footer-white {
    color: #fff !important;
    margin: 0 0 6px !important;
}

.vrt-footer-muted {
    color: #aaa !important;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px !important;
}

.vrt-footer-muted a {
    color: #fff !important;
    text-decoration: underline;
}

.vrt-footer-muted a:hover {
    color: #c0392b !important;
}

.vrt-footer-paymentimg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 4px 0 14px;
}

.vrt-footer-zertifikat {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.vrt-footer-zertifikat > img {
    width: 85px;
    height: auto;
    flex: 0 0 auto;
}

/* CF7 form inside the footer */
.vrt-footer-col-contact .wpcf7-form,
.vrt-footer-col-contact .contact_us_form {
    margin: 0;
}

.vrt-footer-col-contact .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 10px;
}

.vrt-footer-col-contact input.wpcf7-form-control,
.vrt-footer-col-contact textarea.wpcf7-form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 14px 18px;
    font-size: 14px;
    border-radius: 0;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}

.vrt-footer-col-contact input.wpcf7-form-control:focus,
.vrt-footer-col-contact textarea.wpcf7-form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

.vrt-footer-col-contact input::placeholder,
.vrt-footer-col-contact textarea::placeholder {
    color: #888;
}

.vrt-footer-col-contact textarea {
    min-height: 110px;
    resize: vertical;
}

.vrt-footer-col-contact .footer-form-hint {
    color: #888;
    font-size: 11px;
    line-height: 1.5;
    margin: 4px 0 12px;
}

.vrt-footer-col-contact input.wpcf7-submit {
    background: #c0392b;
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.vrt-footer-col-contact input.wpcf7-submit:hover {
    background: #a93226;
}

/* Footer bottom strip */
.vrt-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.vrt-footer-motortuning {
    max-height: 26px;
    opacity: 0.5;
    width: auto;
}

.vrt-footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 18px;
}

.vrt-footer-social a {
    color: #888;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.2s;
}

.vrt-footer-social a:hover {
    color: #fff;
}

.vrt-footer-copyright {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin: 15px 0 0 !important;
}

.vrt-footer-copyright a {
    color: #c0392b;
}

@media (max-width: 768px) {
    .vrt-footer-bottom {
        justify-content: center;
    }
}

/* Dark solid background under the top nav — site-wide */
html body .top_panel.top_panel_custom,
html body .sc_layouts_row.sc_layouts_row_type_narrow {
    background-color: #0e0e0e !important;
    background-image: none !important;
}

/* Sub-menu dropdown also dark to match */
html body .sc_layouts_menu .sub-menu {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

html body .sc_layouts_menu .sub-menu a {
    color: #ddd !important;
}

html body .sc_layouts_menu .sub-menu a:hover {
    background-color: #c0392b !important;
    color: #fff !important;
}

/* Logo at live-site size (original PNG is 204×85) */
html body .elementor-widget-trx_sc_layouts_logo .sc_layouts_logo img.logo_image,
html body .sc_layouts_row.sc_layouts_row_type_narrow .sc_layouts_logo img.logo_image,
html body .sc_layouts_row.sc_layouts_row_fixed_on.sc_layouts_row_type_narrow .sc_layouts_logo img.logo_image,
html body .elementor-element .sc_layouts_logo img.logo_image {
    max-height: 85px !important;
    height: 85px !important;
    width: auto !important;
    max-width: none !important;
}

/* Bigger, more prominent nav links (like live) */
html body .sc_layouts_menu_nav > li > a,
html body .sc_layouts_menu .menu-item > a {
    font-size: 15px !important;
    padding: 22px 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Increase header row padding so logo + nav have breathing space */
html body .sc_layouts_row.sc_layouts_row_type_narrow {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 110px;
}

/* Header: logo + menu in one row (Elementor left column) */
.sc_layouts_row .elementor-column .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 30px;
}

.sc_layouts_row .elementor-widget-trx_sc_layouts_logo,
.sc_layouts_row .elementor-widget-trx_sc_layouts_menu,
.sc_layouts_row .sc_layouts_item {
    width: auto !important;
    flex: 0 0 auto;
}

.sc_layouts_row .sc_layouts_column_align_right .elementor-widget-wrap {
    justify-content: flex-end !important;
}

/* Force dark background on theme header for vrt_vehicle pages */
body.single-vrt_vehicle .top_panel,
body.single-vrt_vehicle .top_panel_custom,
body.single-vrt_vehicle .sc_layouts_row_type_narrow,
body.post-type-archive-vrt_vehicle .top_panel,
body.post-type-archive-vrt_vehicle .top_panel_custom,
body.post-type-archive-vrt_vehicle .sc_layouts_row_type_narrow {
    background-color: #0e0e0e !important;
    background-image: none !important;
}

/* Hide theme hero/page-title banner on vrt_vehicle single + archive */
body.single-vrt_vehicle .sc_layouts_title,
body.single-vrt_vehicle .sc_layouts_title_wrap,
body.single-vrt_vehicle .top_panel_title,
body.single-vrt_vehicle .top_panel_image,
body.single-vrt_vehicle .breadcrumbs_wrap,
body.post-type-archive-vrt_vehicle .sc_layouts_title,
body.post-type-archive-vrt_vehicle .sc_layouts_title_wrap,
body.post-type-archive-vrt_vehicle .top_panel_title,
body.post-type-archive-vrt_vehicle .top_panel_image,
body.post-type-archive-vrt_vehicle .breadcrumbs_wrap {
    display: none !important;
}

/* Remove dark background image that's attached to the top_panel on vehicle pages */
body.single-vrt_vehicle .top_panel_custom.with_bg_image,
body.post-type-archive-vrt_vehicle .top_panel_custom.with_bg_image {
    background-image: none !important;
}

/* Vehicle selector bar at top of detail page */
.vrt-selector-bar-wrap {
    background: #eeeeee;
    border-bottom: 1px solid #dcdcdc;
    padding: 12px 0;
    margin-bottom: 0;
}

.vrt-selector-bar-wrap .vrt-vehicle-selector {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.vrt-selector-bar-wrap .vrt-selector-title,
.vrt-selector-bar-wrap .vrt-selector-notfound {
    display: none;
}

.vrt-selector-bar-wrap .vrt-selector-inner {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: nowrap;
}

.vrt-selector-bar-wrap .vrt-selector-field {
    flex: 0 1 180px;
    min-width: 120px;
}

.vrt-selector-bar-wrap .vrt-selector-field-variant {
    flex: 1 1 auto;
    min-width: 260px;
}

.vrt-selector-bar-wrap .vrt-selector-submit {
    flex: 0 0 auto;
    min-width: auto;
}

.vrt-selector-bar-wrap .vrt-select {
    height: 40px;
    padding: 8px 36px 8px 14px;
    font-size: 13px;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    background-color: #fff;
    color: #333;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
}

.vrt-selector-bar-wrap .vrt-selector-button {
    height: 40px;
    width: 52px;
    padding: 0;
    font-size: 18px;
    background: #c0392b;
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vrt-selector-bar-wrap .vrt-selector-button:hover {
    background: #a93226;
}

@media (max-width: 768px) {
    .vrt-selector-bar-wrap .vrt-selector-inner {
        flex-wrap: wrap;
    }
    .vrt-selector-bar-wrap .vrt-selector-field,
    .vrt-selector-bar-wrap .vrt-selector-field-variant {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    .vrt-selector-bar-wrap .vrt-selector-submit {
        flex: 0 0 auto;
    }
}

.vrt-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Breadcrumb */
.vrt-breadcrumb {
    padding: 15px 0;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
}

.vrt-breadcrumb a {
    color: #999;
    text-decoration: none;
}

.vrt-breadcrumb a:hover {
    color: #c0392b;
}

.vrt-breadcrumb-sep {
    margin: 0 8px;
}

/* Title */
.vrt-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 20px 0 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

/* Content grid */
.vrt-content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-bottom: 40px;
}

.vrt-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* Specs card */
.vrt-specs-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    height: fit-content;
}

.vrt-specs-header {
    background: #555;
    color: #fff;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.vrt-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.vrt-specs-table th,
.vrt-specs-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.vrt-specs-table th {
    text-align: right;
    font-weight: 600;
    color: #333;
    width: 45%;
}

.vrt-specs-table td {
    color: #555;
}

/* Product title - big red centered */
.vrt-product-title {
    font-size: 28px;
    font-weight: 700;
    color: #c0392b;
    text-align: center;
    text-transform: uppercase;
    margin: 50px 0 25px;
    letter-spacing: 0.5px;
}

/* "Andere Produkte" separator */
.vrt-products-separator {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 50px 0 25px;
}

/* Legacy support (older markup) */
.vrt-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #c0392b;
    text-align: center;
    text-transform: uppercase;
    margin: 50px 0 25px;
}

/* Product card */
.vrt-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
}

.vrt-product-card--centered {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.vrt-product-card--centered .vrt-badges {
    justify-content: center;
}

.vrt-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.vrt-product-grid--split {
    grid-template-columns: 1.35fr 1fr;
}

/* Product media */
.vrt-product-media {
    text-align: center;
}

.vrt-badges {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.vrt-badge {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.vrt-product-image img {
    max-width: 380px;
    width: 100%;
    height: auto;
}

.vrt-disclaimer {
    font-size: 11px;
    color: #999;
    margin: 10px 0 20px;
}

/* Features row under product image */
.vrt-features-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.vrt-features-row .vrt-feature {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.vrt-features-row .vrt-feature img {
    max-width: 130px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.vrt-features-row .vrt-feature-value {
    color: #c0392b;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

/* Add-on rows (Bluetooth / TÜV) */
.vrt-addon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
}

.vrt-addon-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    margin: 0;
}

.vrt-addon-row--disabled .vrt-addon-label {
    cursor: not-allowed;
    opacity: 0.7;
}

.vrt-addon-check,
.vrt-addon-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex: 0 0 auto;
}

.vrt-addon-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}

.vrt-addon-name {
    color: #c0392b;
    font-weight: 700;
}

.vrt-addon-stores {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

.vrt-addon-stores img {
    height: 28px;
    width: auto;
    display: block;
}

/* Price box + cart button (side by side) */
.vrt-price-cart-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

.vrt-price-cart-row--centered {
    max-width: 600px;
    margin: 25px auto;
}

.vrt-price-cart-row .vrt-price-box {
    flex: 1;
    margin: 0;
    padding: 15px 20px;
    background: #f5f5f5;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.vrt-price-box {
    margin: 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

.vrt-price-current {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #111;
}

.vrt-price-old {
    display: inline-block;
    font-size: 15px;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
    vertical-align: middle;
}

.vrt-stock {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.vrt-in-stock {
    color: #27ae60;
}

.vrt-out-stock {
    color: #c0392b;
}

/* Add to cart button - green */
.vrt-add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    background: #555;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    letter-spacing: 0.8px;
    width: 100%;
    box-sizing: border-box;
}

.vrt-price-cart-row .vrt-add-to-cart-btn {
    flex: 1;
    border-radius: 0;
    width: auto;
}

.vrt-btn-green {
    background: #27ae60;
}

.vrt-btn-green:hover {
    background: #229954;
}

.vrt-add-to-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.vrt-add-to-cart-btn.added {
    background: #1e8449;
}

/* Performance table */
.vrt-performance-table {
    margin: 20px 0;
}

.vrt-performance-table table {
    width: 100%;
    border-collapse: collapse;
}

.vrt-performance-table th,
.vrt-performance-table td {
    padding: 10px 12px;
    border: 1px solid #eee;
    font-size: 14px;
    text-align: center;
}

.vrt-performance-table thead th {
    background: #555;
    color: #fff;
    font-weight: 600;
}

.vrt-performance-table thead th:first-child {
    background: #555;
}

.vrt-performance-table td:first-child {
    text-align: left;
    background: #f9f9f9;
}

.vrt-tuned-value {
    color: #c0392b;
    font-weight: 700;
}

.vrt-diff-value {
    color: #27ae60;
    font-weight: 700;
}

/* Features */
.vrt-product-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.vrt-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vrt-feature img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.vrt-feature strong {
    font-size: 13px;
    color: #333;
    line-height: 1.3;
}

.vrt-feature-value {
    display: block;
    color: #27ae60;
    font-weight: 700;
    font-size: 16px;
}

/* Why Choose Section */
.vrt-why-choose {
    text-align: center;
    padding: 50px 0;
    border-top: 2px solid #eee;
    margin-top: 40px;
}

.vrt-why-choose h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 40px;
}

.vrt-benefits-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vrt-benefits-viewport {
    flex: 1;
    overflow: hidden;
}

.vrt-benefits-track {
    display: flex;
    gap: 30px;
    transition: transform 0.35s ease;
}

.vrt-benefit {
    flex: 0 0 calc((100% - 90px) / 4);
    text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
}

.vrt-benefit img {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
    object-fit: contain;
}

.vrt-benefit strong {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vrt-benefit p {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

.vrt-slider-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 80px;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: #666;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vrt-slider-nav:hover {
    background: #e5e5e5;
    color: #333;
}

.vrt-slider-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Fallback grid if JS disabled */
.vrt-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* FAQ Section */
.vrt-faq-section {
    padding: 40px 0;
    border-top: 1px solid #eee;
    max-width: 960px;
    margin: 40px auto 0;
}

.vrt-faq-section > h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
}

.vrt-faq-group {
    margin-bottom: 30px;
}

.vrt-single-vehicle .vrt-faq-group-title,
h3.vrt-faq-group-title {
    background: #3a4048;
    color: #fff !important;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

.vrt-faq-item {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    background: #fff;
}

.vrt-faq-question {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #c0392b;
    position: relative;
    transition: background 0.2s;
}

.vrt-faq-question:hover {
    background: #faf3f2;
}

.vrt-faq-question::before {
    content: '\25B8';
    margin-right: 12px;
    font-size: 12px;
    display: inline-block;
    transition: transform 0.3s;
    color: #c0392b;
}

.vrt-faq-item.active .vrt-faq-question::before {
    transform: rotate(90deg);
}

.vrt-faq-answer {
    display: none;
    padding: 0 20px 15px 35px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.vrt-faq-item.active .vrt-faq-answer {
    display: block;
}

/* Cart notification */
.vrt-cart-notice {
    position: fixed;
    top: 50px;
    right: 20px;
    background: #27ae60;
    color: #fff;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
    font-weight: 600;
}

.vrt-cart-notice a {
    color: #fff;
    text-decoration: underline;
    margin-left: 10px;
}

/* Responsive */
@media (max-width: 991px) {
    .vrt-content-grid {
        grid-template-columns: 1fr;
    }

    .vrt-product-grid,
    .vrt-product-grid--split {
        grid-template-columns: 1fr;
    }

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

    .vrt-benefit {
        flex: 0 0 calc((100% - 30px) / 2);
    }

    .vrt-addon-row {
        flex-wrap: wrap;
    }

    .vrt-price-cart-row {
        flex-direction: column;
    }

    .vrt-price-cart-row .vrt-add-to-cart-btn {
        padding: 14px 20px;
    }
}

@media (max-width: 576px) {
    .vrt-page-title {
        font-size: 20px;
    }

    .vrt-product-title {
        font-size: 22px;
    }

    .vrt-price-current {
        font-size: 22px;
    }

    .vrt-benefits-grid {
        grid-template-columns: 1fr;
    }

    .vrt-benefit {
        flex: 0 0 100%;
    }

    .vrt-slider-nav {
        display: none;
    }

    .vrt-benefits-viewport {
        overflow-x: auto;
    }

    .vrt-features-row {
        flex-direction: column;
    }

    .vrt-features-row .vrt-feature {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
    }

    .vrt-features-row .vrt-feature img {
        max-width: 90px;
    }
}

/* ─── Supplier-info collapse panel (Tigris / Pardus) ──────────── */
.vrt-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #2271b1;
    color: #2271b1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.vrt-info-toggle:hover,
.vrt-info-toggle:focus {
    background: #2271b1;
    color: #fff;
    outline: none;
}
.vrt-info-toggle-chevron {
    transition: transform .25s ease;
    display: inline-block;
}
.vrt-info-toggle[aria-expanded="true"] .vrt-info-toggle-chevron {
    transform: rotate(180deg);
}

.vrt-info-panel {
    margin: 16px 0 24px;
    padding: 0;
    border-left: 3px solid #2271b1;
    background: #f6f7f7;
    overflow: hidden;
    /* hidden attr handles initial state; JS toggles via [hidden] removal */
}
.vrt-info-panel[hidden] { display: none; }
.vrt-info-panel .vrt-supplier-info-inner {
    padding: 20px 28px;
}
.vrt-info-panel h3,
.vrt-info-panel h4 {
    margin-top: 18px;
    color: #1d2327;
}
.vrt-info-panel h3:first-child,
.vrt-info-panel h4:first-child { margin-top: 0; }
.vrt-info-panel ul {
    list-style: disc;
    padding-left: 22px;
    margin: 8px 0 14px;
}
.vrt-info-panel li { margin-bottom: 4px; }
.vrt-info-panel p { margin: 8px 0 14px; line-height: 1.55; }

/* =================================================================
   Global footer background — site-wide (Live-Parität)
   Image: /wp-content/uploads/2026/05/site/footer-bg.jpg

   Theme structure:
     <footer class="footer_wrap scheme_dark">
       <div class="vc_row vc_custom_NNNN vc_row-has-fill"> ← OPAQUE #181818 !important
         …
     </footer>

   The inner row has a WPBakery-generated rule
   `.vc_custom_NNNN { background-color: #181818 !important }` that paints
   over anything we put on <footer>. So we set the bg image + overlay
   directly on that inner row instead.
   ================================================================= */

/* Replace the inner row's opaque #181818 with our background image.
   Selector specificity (0,0,4,2) + !important beats the theme's
   (0,0,1,0) + !important. */
/* The photo lives on the <footer> ELEMENT itself (not the inner rows) so it
   spans the injected breadcrumb band AND every footer row as ONE continuous
   image — exactly like the live site, where the breadcrumb sits on the same
   footer photo. The inner rows are forced transparent below so the footer
   photo shows through them. */
body footer.footer_wrap.scheme_dark {
    background-image: url("/wp-content/uploads/2026/05/site/footer-bg.jpg") !important;
    background-color: transparent !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    position: relative;
}

/* Force the inner rows transparent. The theme paints them opaque
   (#181818 / #111 via `.vc_custom_NNNN { background-color … !important }`),
   which would otherwise hide the footer photo set on <footer> above. */
body footer.footer_wrap.scheme_dark > .vc_row.vc_row-has-fill,
body footer.footer_wrap.scheme_dark > .vc_row[class*="vc_custom_"] {
    background-image: none !important;
    background-color: transparent !important;
    position: relative;
}

/* Dark overlay across the WHOLE footer (breadcrumb + rows) so light text
   stays readable against the photo. */
body footer.footer_wrap.scheme_dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
    z-index: 0;
}
/* Lift the footer's direct children (breadcrumb nav + rows) above the overlay. */
body footer.footer_wrap.scheme_dark > * {
    position: relative;
    z-index: 1;
}

/* Remove the theme-default top margin on the footer wrap so the footer
   butts up directly against the preceding content. */
.footer_wrap {
    margin-top: 0 !important;
}

/* Gap between page content and the header above / footer below. The theme
   zeroes the rows' margins (`.wpb_row { margin-bottom: 0 !important }`),
   which otherwise makes the content butt directly against header and footer. */
.page_content_wrap {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Breathing room below the last footer row (copyright/social) so it doesn't
   sit flush against the footer edge / the sticky configurator bar. */
body footer.footer_wrap.scheme_dark {
    padding-bottom: 40px !important;
}

/* Theme sets text color to #5b5b5b (washed-out grey) on the dark footer
   via `.scheme_dark.footer_wrap, .footer_wrap .scheme_dark.vc_row`.
   Force readable white. */
.scheme_dark.footer_wrap,
.footer_wrap .scheme_dark.vc_row,
body footer.footer_wrap.scheme_dark,
body footer.footer_wrap.scheme_dark .vc_row {
    color: #ffffff !important;
}

/* "Nützliche Links" list items and the entire contact column must read
   white. Theme's `.scheme_default a { color: #1e1e1e }` would otherwise
   leave the links dark/red. */
body footer.footer_wrap .vrt-footer-list,
body footer.footer_wrap .vrt-footer-list a,
body footer.footer_wrap .vrt-footer-list a:hover,
body footer.footer_wrap .vrt-footer-col-contact,
body footer.footer_wrap .vrt-footer-col-contact *,
body footer.footer_wrap .vrt-footer-col-contact a,
body footer.footer_wrap .vrt-footer-col-contact a:hover {
    color: #ffffff !important;
}

/* Remove the theme-default bottom margin on the top panel (header area)
   so content can sit flush against the header. */
.top_panel {
    margin-bottom: 0 !important;
}

/* Replace the old Twitter bird with the new X mark (𝕏) across all
   icon systems used by the theme:
   - Font Awesome 4/5/6:  .fa-twitter, .fab.fa-twitter
   - Trx-Addons social widget (header): .icon-x, .icon-twitter,
     wrappers .social_x / .social_twitter
   FontAwesome / Trx icon fonts don't ship an X glyph, so we override
   ::before content with the Unicode mathematical double-struck capital X
   and switch to a system font so the glyph actually renders. */
.fa-twitter,
.fab.fa-twitter,
span.fa.fa-twitter,
i.fa.fa-twitter,
.elementor-icon .fa-twitter,
.icon-x,
.icon-twitter,
.social_x .icon-x,
.social_twitter .icon-twitter,
[class*="social_x"] [class*="icon-x"],
[class*="social_twitter"] [class*="icon-twitter"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
}
.fa-twitter::before,
.fab.fa-twitter::before,
span.fa.fa-twitter::before,
i.fa.fa-twitter::before,
.elementor-icon .fa-twitter::before,
.icon-x::before,
.icon-twitter::before,
.social_x .icon-x::before,
.social_twitter .icon-twitter::before,
[class*="social_x"] [class*="icon-x"]::before,
[class*="social_twitter"] [class*="icon-twitter"]::before {
    content: "𝕏" !important;
    font-family: inherit !important;
}

/* ===== Sticky header =====
   The header row is marked fixed (row_fixed="1") and the theme normally
   pins it via JS on scroll. When that script doesn't fire the menu bar
   scrolls away. This CSS keeps the fixed header row pinned to the top
   without depending on JS. When the theme's JS does kick in it sets an
   inline position:fixed which simply takes precedence over this rule. */
.top_panel .sc_layouts_row_fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}