/* ================================
   BREADCRUMB
   ================================ */
.breadcrumb {
    background: var(--color-light-gray);
    padding: 20px 32px;
    border-bottom: 1px solid var(--color-border-gray);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.breadcrumb a {
    color: var(--color-navy);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-kleur);
}

.breadcrumb a:hover {
    color: var(--color-red);
}

.breadcrumb i {
    color: var(--color-text-gray);
    font-size: 10px;
}

.breadcrumb span {
    color: var(--color-text-gray);
    font-weight: 600;
}

/* ================================
   MACHINE
   ================================
   De pagina van een gebruikte machine. Het zwaartepunt ligt op het
   typeplaatje: elke heftruck draagt er een, en bij een tweedehands machine
   is dat plaatje de identiteit. Daarom is het hier geen tabel onderaan maar
   het donkerste, hardste object op een verder rustige witte pagina.

   Twee schreefloze snitten uit dezelfde familie: IBM Plex Sans Condensed voor
   de typeaanduiding, IBM Plex Mono voor alles wat gestempelde data is. Mono
   heeft cijfers van gelijke breedte, en daardoor staan bouwjaren, urenstanden
   en serienummers netjes onder elkaar. De lopende tekst blijft de systeemletter
   van de rest van de site; niet elke regel hoeft een webfont te laden. */



.machine {
    padding: 56px 32px 88px;
}

/* ---- Naam ---- */
.machine-naam {
    display: block;
    margin: 0 0 40px;
    line-height: 1;
}

.machine-merk {
    display: block;
    font-family: var(--mono-data);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-navy);
    opacity: 0.6;
    margin-bottom: 10px;
}

.machine-model {
    display: block;
    font-family: var(--cond);
    font-size: clamp(40px, 7vw, 76px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-navy);
    text-wrap: balance;
}

/* ---- Raster ---- */
.machine-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* ---- Beeld ---- */
.beeld-hoofd {
    background: var(--color-light-gray);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beeld-hoofd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lege staat voor een machine waarvan nog geen foto is. Navy in plaats van
   een grijs vlak met een kapot-afbeeldingicoon: dit moet lezen als een
   mededeling, niet als een storing. */
.beeld-leeg {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 36px 34px;
    background: var(--color-plaat);
    border: none;
    text-align: left;
}

.beeld-leeg-label {
    margin: 0;
    font-family: var(--mono-data);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

.beeld-leeg-tekst {
    margin: 0;
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.beeld-leeg-bel {
    font-family: var(--cond);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 2px;
}

.beeld-leeg-bel:hover {
    color: var(--color-cyan);
}

.loading-placeholder {
    font-family: var(--mono-data);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
    display: flex;
    align-items: center;
    gap: 10px;
}

.beeld-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.gallery-item {
    padding: 0;
    border: 1px solid var(--color-border-gray);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-light-gray);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.gallery-item:hover {
    border-color: var(--color-cyan);
}

.gallery-item:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 2px;
    border-color: var(--color-cyan);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================
   TYPEPLAATJE
   ================================
   Geen nagebootst metaal: geen verlopen, geen schroefjes, geen relief. Wat
   het plaatje tot een plaatje maakt is de strakke rechthoek zonder ronding,
   de ingelegde hairline en de vier hoekmerken. De rest van de site houdt
   zijn ronde hoeken, juist daardoor valt dit ene object op. */
.plaat {
    /* Helderder dan de hairline eromheen: de hoek is het punt waar het oog
       vaststelt dat er geen ronding zit. */
    --hoekmerk: rgba(255, 255, 255, 0.5);
    position: relative;
    margin: 0 0 32px;
    padding: 26px 28px 28px;
    background: var(--color-plaat);
    border-radius: 0;
    color: var(--color-white);
}

/* De ingelegde lijn, zoals de gegraveerde rand op een echt plaatje */
.plaat::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

/* De vier hoekmerken. Deze stonden wel in de toelichting hierboven maar waren
   nooit gebouwd, en daardoor droeg de hairline de hele vergelijking alleen.
   Zonder deze merken leest een rechthoek zonder ronding naast een foto met
   ronde hoeken als een vergissing in plaats van als een plaatje.
   
   Acht verlopen: per hoek een liggend en een staand streepje, precies op de
   hairline zodat ze de hoek aanzetten in plaats van ernaast te liggen. */
.plaat::after {
    content: '';
    position: absolute;
    inset: 9px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk)),
        linear-gradient(var(--hoekmerk), var(--hoekmerk));
    background-size:
        15px 1px, 1px 15px,
        15px 1px, 1px 15px,
        15px 1px, 1px 15px,
        15px 1px, 1px 15px;
    background-position:
        left top,     left top,
        right top,    right top,
        left bottom,  left bottom,
        right bottom, right bottom;
}

.plaat-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.plaat-kop-label,
.plaat-veld dt {
    font-family: var(--mono-data);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

.plaat-kop-waarde {
    font-family: var(--mono-data);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-white);
}

.plaat-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 0;
}

.plaat-veld dt {
    margin-bottom: 6px;
}

.plaat-veld dd {
    margin: 0;
    font-family: var(--mono-data);
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-white);
    overflow-wrap: anywhere;
}

/* De keuringsdatum over de volle breedte: het is het enige harde bewijs dat
   deze machine is nagekeken, en in een halve cel viel er een gat naast. */
.plaat-veld-vol {
    grid-column: 1 / -1;
}

/* Het serienummer krijgt de hele breedte en een eigen regel erboven. Bij een
   gebruikte machine is dat het nummer waaraan hij te herkennen is, en het
   open tonen zegt dat er niets te verbergen valt aan de herkomst. */
.plaat-veld-breed {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.plaat-veld-breed dd {
    font-size: 21px;
    letter-spacing: 0.02em;
}

.plaat-veld-leeg dd {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
}

/* Waarden zetten zich met een korte stempel neer zodra de gegevens binnen
   zijn. Eén beweging op de hele pagina, verder niets. */
@keyframes stempel {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

.plaat-veld {
    animation: stempel 0.16s ease-out both;
}

.plaat-veld:nth-child(2) { animation-delay: 0.04s; }
.plaat-veld:nth-child(3) { animation-delay: 0.08s; }
.plaat-veld:nth-child(4) { animation-delay: 0.12s; }
.plaat-veld:nth-child(5) { animation-delay: 0.16s; }

/* ---- Prijs ---- */
.prijs {
    margin-bottom: 28px;
}

.prijs-label {
    display: block;
    font-family: var(--mono-data);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
    margin-bottom: 8px;
}

.prijs-waarde {
    margin: 0;
    font-family: var(--cond);
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 700;
    line-height: 1;
    color: var(--color-red-tekst);
    font-variant-numeric: tabular-nums;
}

.prijs-btw {
    display: inline-block;
    margin-left: 10px;
    font-family: var(--mono-data);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-gray);
    vertical-align: 0.35em;
}

.prijs-voet {
    margin: 10px 0 0;
    font-family: var(--mono-data);
    font-size: 12px;
    color: var(--color-text-gray);
}

.prijs-voet .voorraad::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    vertical-align: 1px;
    background: var(--color-cyan);
}

/* ---- Acties ----
   De knopstijlen staan in style.css, zodat de machinepagina en de rest van de
   site niet uit elkaar kunnen lopen. Hier alleen de plaatsing. */
.acties {
    display: grid;
    gap: 10px;
}

.acties .knop {
    padding: 17px 24px;
}

/* ---- Wat wij hierbij leveren ---- */
.levering {
    margin-top: 64px;
    padding-top: 36px;
    border-top: 1px solid var(--color-border-gray);
}

.levering-kop {
    font-family: var(--cond);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 20px;
}

.levering-tekst {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-gray);
}

.levering-tekst p {
    max-width: 68ch;
}

.levering-tekst p {
    margin: 0 0 0.8rem;
}

.levering-tekst p:last-child {
    margin-bottom: 0;
}

.product-desc-list {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .product-desc-list {
        columns: 2;
        column-gap: 56px;
    }

    .product-desc-list li {
        break-inside: avoid;
    }
}

.product-desc-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 0.5rem;
}

/* Een liggend streepje in plaats van een bolletje: zo zet S&S de regels zelf
   in Powerall, en het leest als een paklijst in plaats van als reclame. */
.product-desc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 12px;
    height: 1px;
    background: var(--color-red);
}

/* ================================
   AANVRAAG
   ================================
   Het formulier staat op de pagina en niet in een modal: dat werkt ook zonder
   javascript, heeft geen focusval nodig, en de bezoeker kan de machinegegevens
   erboven blijven zien terwijl hij invult. */
.aanvraag {
    padding: 56px 32px 64px;
    background: var(--color-light-gray);
    border-top: 1px solid var(--color-border-gray);
}

.aanvraag-kop {
    font-family: var(--cond);
    font-size: var(--tt-l);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 10px;
}

.aanvraag-intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-gray);
    margin: 0 0 28px;
    max-width: 60ch;
}

.aanvraag-label {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan-tekst);
    margin: 0 0 10px;
}

.aanvraag-form {
    max-width: 720px;
}

.aanvraag-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 24px;
}

.aanvraag-veld {
    margin: 0 0 18px;
}

.aanvraag-veld label {
    display: block;
    font-family: var(--mono-data);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: 6px;
}

.aanvraag-veld label span {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-medium-gray);
}

.aanvraag-veld input,
.aanvraag-veld textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: 16px;   /* 16px voorkomt dat iOS bij focus inzoomt */
    color: var(--color-dark-gray);
}

.aanvraag-veld textarea {
    resize: vertical;
    min-height: 110px;
}

/* Een zichtbare rand bij focus, niet alleen een schaduw: wie met het
   toetsenbord werkt moet kunnen zien waar hij is. */
.aanvraag-veld input:focus-visible,
.aanvraag-veld textarea:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 2px;
    border-color: var(--color-navy);
}

.aanvraag-hint {
    margin: -6px 0 20px;
    font-size: 14px;
    color: var(--color-text-gray);
}

.aanvraag-versturen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin: 26px 0 0;
    font-size: 15px;
    color: var(--color-text-gray);
}

/* Onzichtbaar voor mensen, wel invulbaar voor een bot. Niet display:none,
   want sommige bots slaan verborgen velden juist over. */
.aanvraag-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aanvraag-bevestiging {
    border-left: 3px solid var(--color-cyan);
    padding-left: 22px;
    max-width: 60ch;
}

.aanvraag-bevestiging p:last-child {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-gray);
    margin: 0;
}

.aanvraag-fout {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-left: 3px solid var(--color-red);
    background: var(--color-white);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-gray);
    max-width: 60ch;
}

@media (max-width: 700px) {
    .aanvraag {
        padding: 40px 20px 48px;
    }
}

/* ---- Smaller ---- */
@media (max-width: 900px) {
    .machine {
        padding: 40px 20px 64px;
    }

    .machine-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .machine-naam {
        margin-bottom: 28px;
    }
}

@media (max-width: 420px) {
    .plaat {
        padding: 22px 20px 24px;
    }

    .plaat-velden {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .plaat-veld-breed {
        padding-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plaat-veld {
        animation: none;
    }
}


/* ================================
   RELATED PRODUCTS
   ================================ */
.related-products {
    background: var(--color-light-gray);
    padding: 80px 32px;
}

#related-hexon #svm-canvas {
    min-height: 400px;
}

/* High-end kaart-styling (.sns-card etc.) staat in style.css,
   zodat ook de aanbod-pagina hem gebruikt */

/* De modal en het formulier dat erin stond zijn uit de pagina gehaald (zie
   product.js); de stijlen ervoor stonden hier nog, met keyframes die nergens
   waren gedefinieerd. Weg. */

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

@media (max-width: 768px) {
    .product-details {
        padding: 60px 20px;
    }

    .product-title {
        font-size: 32px;
    }

    .product-image-main {
        min-height: 300px;
    }

    .product-image-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-meta {
        grid-template-columns: 1fr;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .product-cta {
        flex-direction: column;
    }

    .product-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .modal-content {
        width: 92%;
        margin: 10% auto;
        padding: 24px;
    }

    .product-meta {
        grid-template-columns: 1fr;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .product-cta {
        flex-direction: column;
    }

    .modal-content {
        width: 95%;
        margin: 20% auto;
        padding: 30px;
    }
}