/* Voertuig-detailpagina Van Panhuis Automotive – premium opmaak van Elementor-template 501.
   Huisstijl gelijk aan de voorraad: zwart, Poppins, merkblauw #1D4DA0, panelen #0e0e10 met dunne rand.
   Desktop/tablet en mobiel hebben in het template eigen specificatie- en prijsblokken; beide worden opgemaakt. */

.elementor-501 {
    --vpa-blue: #1D4DA0;
    --vpa-blue-hover: #2a5fbf;
    --vpa-blue-soft: rgba(29, 77, 160, 0.35);
    --vpa-blue-text: #8fb0ff;
    --vpa-card: #0e0e10;
    --vpa-field: #17171a;
    --vpa-line: rgba(255, 255, 255, 0.08);
    --vpa-muted: #9aa0ab;
    --vpa-text: #d5d8de;
    --vpa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Galerij ---------- */
.elementor-501 .elementor-element-847b08b .swiper,
.elementor-501 .elementor-element-847b08b .swiper-slide-inner,
.elementor-501 .elementor-element-847b08b img.swiper-slide-image {
    border-radius: 16px;
}

.elementor-501 .elementor-element-847b08b .swiper {
    overflow: hidden;
    border: 1px solid var(--vpa-line);
}

.elementor-501 .elementor-element-847b08b img.swiper-slide-image {
    transition: transform 1.2s var(--vpa-ease);
}

.elementor-501 .elementor-element-847b08b .swiper-slide-active:hover img.swiper-slide-image {
    transform: scale(1.03);
}

.elementor-501 .elementor-element-847b08b .elementor-swiper-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(14, 14, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    transition: background-color 0.3s, transform 0.3s var(--vpa-ease);
}

.elementor-501 .elementor-element-847b08b .elementor-swiper-button svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.elementor-501 .elementor-element-847b08b .elementor-swiper-button:hover {
    background: var(--vpa-blue);
    transform: scale(1.06);
}

/* Fotostrip */
.elementor-501 .elementor-element-1cbad290 .jet-woo-product-gallery__image,
.elementor-501 .elementor-element-1cbad290 .jet-woo-product-gallery__image img {
    border-radius: 10px;
    overflow: hidden;
}

.elementor-501 .elementor-element-1cbad290 .jet-woo-product-gallery__image img {
    transition: transform 0.6s var(--vpa-ease), filter 0.6s;
    filter: brightness(0.85);
}

.elementor-501 .elementor-element-1cbad290 .jet-woo-product-gallery__image:hover img {
    transform: scale(1.06);
    filter: brightness(1);
}

.elementor-501 .elementor-element-1cbad290 .jet-woo-product-gallery__image-overlay span {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
}

/* ---------- Infopaneel ---------- */
.elementor-501 .elementor-element-9f1805c {
    background: var(--vpa-card) !important;
    border: 1px solid var(--vpa-line);
    border-radius: 16px;
    padding: 32px !important;
    gap: 0 !important;
    align-self: flex-start;
}

.elementor-501 .elementor-element-9f1805c > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    background: none !important;
}

.elementor-501 .elementor-element-9f1805c .e-con > .e-con,
.elementor-501 .elementor-element-760b801,
.elementor-501 .elementor-element-fe43cb9,
.elementor-501 .elementor-element-cef2f0b,
.elementor-501 .elementor-element-4d69838 {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Merk klein, model groot, uitvoering gedempt */
.elementor-501 .elementor-element-760b801 {
    border-bottom: 1px solid var(--vpa-line) !important;
    padding: 0 0 22px !important;
    gap: 4px !important;
}

.elementor-501 .elementor-element-b270664 .elementor-heading-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4 !important;
    color: var(--vpa-blue-text) !important;
}

.elementor-501 .elementor-element-e4add1d .elementor-heading-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    line-height: 1.1 !important;
    color: #fff !important;
}

.elementor-501 .elementor-element-5d3da76 .elementor-heading-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--vpa-muted) !important;
}

/* Specificaties als tegels (desktop: 2 rijen van 3; mobiel: 1 blok van 6) */
.elementor-501 .elementor-element-756ddb1,
.elementor-501 .elementor-element-f78c520 {
    padding: 0 !important;
}

.elementor-501 .elementor-element-756ddb1 {
    padding-top: 22px !important;
}

/* Het mobiele blok 08fec29 krijgt pas binnen de mobiele media query een display, anders overschrijft het
   de verberg-instelling van Elementor op desktop */
.elementor-501 .elementor-element-fe43cb9,
.elementor-501 .elementor-element-cef2f0b {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

/* Tweede rij: kolommen gelijk aan het aantal tegels (sinds "Datum deel 1a" weg is staan er 2) */
.elementor-501 .elementor-element-cef2f0b {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.elementor-501 .elementor-element-fe43cb9 > .elementor-widget,
.elementor-501 .elementor-element-cef2f0b > .elementor-widget,
.elementor-501 .elementor-element-08fec29 > .elementor-widget {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.elementor-501 .elementor-element-fe43cb9 .autoflow-vehicle-details,
.elementor-501 .elementor-element-cef2f0b .autoflow-vehicle-details,
.elementor-501 .elementor-element-08fec29 .autoflow-vehicle-details {
    height: 100%;
    padding: 12px 14px;
    background: var(--vpa-field);
    border: 1px solid var(--vpa-line);
    border-radius: 10px;
    transition: border-color 0.3s, background-color 0.3s;
}

.elementor-501 .elementor-element-fe43cb9 .autoflow-vehicle-details:hover,
.elementor-501 .elementor-element-cef2f0b .autoflow-vehicle-details:hover,
.elementor-501 .elementor-element-08fec29 .autoflow-vehicle-details:hover {
    border-color: var(--vpa-blue-soft);
}

.elementor-501 .elementor-element-9f1805c .autoflow-vehicle-details-label {
    font-family: "Poppins", sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4 !important;
    color: var(--vpa-muted) !important;
    margin-bottom: 4px;
}

.elementor-501 .elementor-element-fe43cb9 .autoflow-vehicle-details-value,
.elementor-501 .elementor-element-cef2f0b .autoflow-vehicle-details-value,
.elementor-501 .elementor-element-08fec29 .autoflow-vehicle-details-value {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

/* Prijs */
.elementor-501 .elementor-element-a570ed4,
.elementor-501 .elementor-element-6bde138 {
    margin-top: 12px;
    padding: 22px 0 0 !important;
    border-top: 1px solid var(--vpa-line);
}

.elementor-501 .elementor-element-4d69838,
.elementor-501 .elementor-element-f693baa {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
}

.elementor-501 .elementor-element-3d4d92e .autoflow-vehicle-details-value,
.elementor-501 .elementor-element-9f56a1b .autoflow-vehicle-details-value {
    font-family: "Poppins", sans-serif !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    line-height: 1.1 !important;
    color: #fff !important;
}

.elementor-501 .elementor-element-47cc782 .autoflow-vehicle-details-value,
.elementor-501 .elementor-element-30bb0ee .autoflow-vehicle-details-value {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(29, 77, 160, 0.18);
    border: 1px solid var(--vpa-blue-soft);
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #cfdcff !important;
}

/* Knop */
.elementor-501 .elementor-element-785521a {
    padding: 24px 0 0 !important;
}

.elementor-501 .elementor-element-ce60333,
.elementor-501 .elementor-element-ce60333 .elementor-button {
    width: 100% !important;
    margin: 0 !important;
}

.elementor-501 .elementor-element-ce60333 {
    padding: 0 !important;
}

.elementor-501 .elementor-element-ce60333 .elementor-button {
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 56px;
    padding: 0 24px !important;
    background: var(--vpa-blue) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    color: #fff !important;
    box-shadow: 0 10px 30px -10px rgba(29, 77, 160, 0.8);
    transition: background-color 0.3s, transform 0.3s var(--vpa-ease), box-shadow 0.3s;
}

.elementor-501 .elementor-element-ce60333 .elementor-button:hover {
    background: var(--vpa-blue-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(29, 77, 160, 0.9);
}

.elementor-501 .elementor-element-ce60333 .elementor-button-icon {
    transition: transform 0.3s var(--vpa-ease);
}

.elementor-501 .elementor-element-ce60333 .elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
}