/* =====================================================================
 * porto-9-productpagina.css  (9 van 9)
 *
 * Opknapbeurt van de productpagina, 28-08-2026.
 *
 * Uitgangssituatie, gemeten op een BMW-sensor met 9 afbeeldingen en 17
 * OE-nummers:
 *   - van de 203px tussen menu en product was 95px lege ruimte;
 *   - de breadcrumbs stonden 30px naar rechts t.o.v. de content eronder;
 *   - de bestelknop was #72be9c, een verwassen mint dat nergens anders
 *     op de site voorkomt (checkout en mandlade gebruiken #55ba29);
 *   - "In stock Shipped in 1 day SKU 96746" stond als één platte regel;
 *   - Porto staat op tab_style = sticky, dus de drie "tabs" zijn geen
 *     tabs maar drie panelen onder elkaar: 295 + 135 + 994 = 1.424px;
 *   - de kenmerkentabel had twee rijen in een blok van 135px;
 *   - de vervangingstabel herhaalde het merk 17 keer in een aparte kolom.
 * ===================================================================== */

/* --- 1. Ruimte bovenin en uitlijning --------------------------------- */

/* De kruimelbalk stond op padding 0 30px en zijn .items op 1240px, terwijl
   .column.main 1300px is: vandaar de 30px die niet uitlijnde. Nu dezelfde
   maatvoering als .page-main. */
.catalog-product-view .breadcrumbs {
    padding: 0;
}

.catalog-product-view .breadcrumbs .items {
    /* Het thema zet hier een vaste width van 1240px; alleen max-width
       aanpassen helpt dan niet. */
    width: auto;
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px;
    text-transform: none;
}

.catalog-product-view .breadcrumbs .items .item,
.catalog-product-view .breadcrumbs .items .item a {
    font-size: 13px;
}

/* 30px bovenmarge op .page-main plus 30px boven de USP-balk plus 35px
   eronder: samen bijna een schermhoogte voordat het product in beeld kwam. */
.catalog-product-view .page-main {
    /* Het thema zet hier 30px met !important, vandaar dezelfde vlag. */
    margin-top: 12px !important;
}

.catalog-product-view .page-main > .widget.block,
.catalog-product-view .usp-slider {
    /* De widgetwrapper om de USP-balk had margin: 30px 0 35px. */
    margin-top: 0;
    margin-bottom: 16px;
}

.catalog-product-view .usp-slider .owl-item .item {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.catalog-product-view .product.media,
.catalog-product-view .product-info-main {
    margin-top: 18px;
}

/* --- 2. Bestelknop --------------------------------------------------- */

/* Zelfde groen als "Ga naar afrekenen" in de mandlade en "Place Order"
   in de checkout, zodat de koopactie op de hele site één kleur heeft. */
.catalog-product-view .box-tocart .action.primary.tocart,
.catalog-product-view #product-addtocart-button {
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 6px;
    background: #55ba29;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

.catalog-product-view .box-tocart .action.primary.tocart:hover,
.catalog-product-view #product-addtocart-button:hover,
.catalog-product-view #product-addtocart-button:focus {
    background: #4aa523;
    color: #fff;
}

.catalog-product-view #product-addtocart-button:active {
    background: #429120;
}

/* Het aantalveld ernaast even hoog, anders staat de knop te zweven. */
.catalog-product-view .box-tocart .field.qty .control {
    display: flex;
    align-items: stretch;
    height: 52px;
}

/* De knoppen en het invoerveld bleven 40px binnen een control van 52px.
   Alle drie even hoog, met de afronding alleen aan de buitenkanten. */
.catalog-product-view .box-tocart .field.qty .control button,
.catalog-product-view .box-tocart .field.qty input.qty,
.catalog-product-view .box-tocart input.input-text.qty {
    height: 52px;
    min-height: 52px;
    margin: 0;
    border: 1px solid #dbe6ee;
    background: #fff;
    color: #101828;
    font-size: 14px;
    font-weight: 600;
}

.catalog-product-view .box-tocart .field.qty .control button {
    width: 34px;
    padding: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1;
}

.catalog-product-view .box-tocart .field.qty .control button:hover {
    background: #f5f9fc;
    color: #0099d8;
}

.catalog-product-view .box-tocart .field.qty .control span.minus button {
    border-radius: 6px 0 0 6px;
    border-right: 0;
}

.catalog-product-view .box-tocart .field.qty .control span.plus button {
    border-radius: 0 6px 6px 0;
    border-left: 0;
}

.catalog-product-view .box-tocart .field.qty input.qty,
.catalog-product-view .box-tocart input.input-text.qty {
    width: 46px;
    /* Porto zet hier position: relative met top: 2px, waardoor het veld
       twee pixels lager stond dan de min- en plusknop ernaast. */
    top: 0;
    border-radius: 0;
    text-align: center;
}

.catalog-product-view .box-tocart .actions {
    display: flex;
}

.catalog-product-view .box-tocart .actions .action.tocart {
    flex: 1 1 auto;
}

/* --- 3. Voorraad en levertijd ---------------------------------------- */

/* Was: "In stock Shipped in 1 day SKU 96746" als één regel. Nu de
   voorraadstatus als groene pil en het SKU eronder als bijschrift. */
.catalog-product-view .product-info-stock-sku {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 14px 0 0;
}

.catalog-product-view .product-info-stock-sku .amstockstatus-status-container {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #eaf7e4;
    color: #2f7a13;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}

.catalog-product-view .product-info-stock-sku .amstockstatus-status-container i {
    color: #55ba29;
}

/* Amasty zet binnen die container nog een eigen grijze pil (#f2f2f2 met
   padding en radius). Twee pillen in elkaar; de binnenste gaat plat. */
.catalog-product-view .product-info-stock-sku .amstockstatus-status-container .amstockstatus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
}

/* Niet op voorraad krijgt dezelfde vorm, maar dan in rood. */
.catalog-product-view .product-info-stock-sku .amstockstatus-status-container.unavailable,
.catalog-product-view .product-info-stock-sku .stock.unavailable .amstockstatus-status-container {
    background: #fdecea;
    color: #b42318;
}

.catalog-product-view .product-info-stock-sku .product.attribute.sku {
    display: block;
    margin: 0;
    color: #667085;
    font-size: 12.5px;
}

.catalog-product-view .product-info-stock-sku .product.attribute.sku .type {
    font-weight: 600;
}

/* --- 4. USP-blok onder de bestelknop --------------------------------- */

.catalog-product-view .pdp-usp {
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid #dbe6ee;
    border-radius: 12px;
    background: #f7fafc;
}

.catalog-product-view .pdp-usp h2 {
    /* Het thema geeft h2 het handschriftlettertype Shadows Into Light;
       in kapitalen met letterspatiëring werd dat onleesbaar. */
    font-family: inherit;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #667085;
}

.catalog-product-view .pdp-usp ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-product-view .pdp-usp li {
    /* Geen flex hier: de opsomming is "<i> tekst <b>woord</b> tekst" en
       met flex wordt elk tekstdeel een los item, met een gat ertussen.
       Het pictogram staat daarom absoluut en de tekst loopt gewoon door. */
    position: relative;
    display: block;
    margin: 0;
    padding: 5px 0 5px 24px;
    color: #101828;
    font-size: 13.5px;
    line-height: 1.45;
}

.catalog-product-view .pdp-usp li i {
    position: absolute;
    top: 8px;
    left: 0;
    color: #12b76a;
    font-size: 14px;
}

/* De Kiyoh-score staat als eerste in het blok, met een streep eronder
   zodat hij zich onderscheidt van de vaste beloftes eronder. */
.catalog-product-view .pdp-usp .pdp-usp-score {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 24px;
}

/* Zelfde vinkje als de regels eronder, zodat de score gewoon meedoet in
   de checklist in plaats van als los kaartje erboven te staan. */
.catalog-product-view .pdp-usp .pdp-usp-score:before {
    position: absolute;
    top: 8px;
    left: 0;
    color: #12b76a;
    font-size: 14px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f058';
}

.catalog-product-view .pdp-usp .pdp-usp-score section {
    /* De widget had eigen hoogte en marges waardoor deze regel 62px werd
       tegen 30px voor de andere. Alles plat, dan lijnt het vinkje uit. */
    display: block;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #101828;
    font-size: 13.5px;
    line-height: 1.45;
}

.catalog-product-view .pdp-usp .pdp-usp-score section > div,
.catalog-product-view .pdp-usp .pdp-usp-score [data-element="box-information"] > div {
    display: inline;
    margin: 0;
    padding: 0;
    line-height: 1.45;
}

/* Logo en sterren eruit: de score staat als tekst tussen de andere
   beloftes, niet als badge. */
.catalog-product-view .pdp-usp .pdp-usp-score [data-element="box-summary"],
.catalog-product-view .pdp-usp .pdp-usp-score [data-element="link-icon"] {
    display: none;
}

.catalog-product-view .pdp-usp .pdp-usp-score [data-element="box-information"] {
    display: block;
    padding: 0;
    color: #101828;
    font-size: 13.5px;
}

.catalog-product-view .pdp-usp .pdp-usp-score b {
    font-weight: 700;
}

/* --- 5. Galerij ------------------------------------------------------ */

/* Een kader om het beeld in plaats van een losse foto op wit, en
   miniaturen die als knopjes lezen met een duidelijke actieve staat. */
.catalog-product-view .product.media .fotorama__stage {
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.catalog-product-view .product.media .fotorama__nav-wrap {
    margin-top: 12px;
}

.catalog-product-view .product.media .fotorama__nav__frame--thumb .fotorama__thumb {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

/* Fotorama schaalt de miniatuur met object-fit: fill en laat het kader
   de rest wegsnijden, waardoor je van een liggende foto alleen het
   midden zag. Met contain past de hele foto in het kader. */
.catalog-product-view .product.media .fotorama__nav__frame--thumb .fotorama__img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    transform: none;
    left: auto;
    top: auto;
}

/* Kleinere miniaturen: 102px was fors voor negen stuks. */
.catalog-product-view .product.media .fotorama__nav__frame--thumb,
.catalog-product-view .product.media .fotorama__nav__frame--thumb .fotorama__thumb {
    width: 62px !important;
    height: 62px !important;
}

/* Fotorama rekent met content-box: 62px plus twee randen wordt 64px en dat
   past niet in het kader dat de module eromheen zet, waardoor de onderste
   rand wegviel. Met border-box telt de rand mee in die 62px. */
.catalog-product-view .product.media .fotorama__nav__frame--thumb .fotorama__thumb {
    box-sizing: border-box !important;
}

.catalog-product-view .product.media .fotorama__nav__frame--thumb {
    padding-bottom: 10px !important;
}

/* Negen miniaturen van 74px pasten niet in de 637px brede strook, waardoor
   de laatste half wegviel. Bij 62px past de hele reeks. */
.catalog-product-view .product.media .fotorama__nav__shaft {
    max-width: 100%;
}

.catalog-product-view .product.media .fotorama__nav.fotorama__nav--thumbs {
    height: auto !important;
}

.catalog-product-view .product.media .fotorama__nav__frame--thumb:hover .fotorama__thumb {
    border-color: #b6cfe0;
}

.catalog-product-view .product.media .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb {
    border-color: #0099d8;
    box-shadow: 0 0 0 1px #0099d8;
}

/* Porto tekent een eigen randje om de actieve miniatuur; dat botst met
   het bovenstaande. */
.catalog-product-view .product.media .fotorama__active .fotorama__dot,
.catalog-product-view .product.media .fotorama__thumb-border {
    display: none;
}

/* --- 6. De blokken in twee kolommen ---------------------------------
 *
 * Porto staat op tab_style = sticky: de "tabs" zijn kopjes en alle panelen
 * staan open, maar in de DOM komen eerst alle titels en daarna alle inhoud.
 * carparts-ui.js koppelt elke titel aan zijn eigen paneel in een .cp-blok en
 * verdeelt die blokken over twee kolommen.
 *
 * Kolommen in plaats van vaste rasterplekken, omdat lang niet elk product
 * alle blokken heeft: zonder OE-tabel of bijlagen liet het raster een gat
 * achter, met kolommen schuift de rest gewoon door.
 * ------------------------------------------------------------------ */

.catalog-product-view .product.data.items.cp-kolommen {
    display: flex;
    gap: 26px;
    border: 0;
}

/* De clearfix van Magento (::before/::after) telt in een flexrij mee als
   twee lege items. Met gap ertussen schoven de kolommen daardoor 26px naar
   binnen en liepen ze niet meer gelijk met de galerij en het koopblok. */
.catalog-product-view .product.data.items.cp-kolommen:before,
.catalog-product-view .product.data.items.cp-kolommen:after {
    display: none;
}

.catalog-product-view .cp-kolom {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    /* Ruim genoeg dat een kop duidelijk bij het blok eronder hoort en niet
       tegen het blok erboven aan plakt. */
    gap: 34px;
}

/* Op telefoonformaat één kolom. De kolommen zelf verdwijnen uit de opmaak
   (display: contents), zodat de blokken zelf de volgorde bepalen: eerst de
   omschrijving en de specificaties, dan de nummers, bijlagen en vragen. */
@media only screen and (max-width: 991px) {
    .catalog-product-view .product.data.items.cp-kolommen {
        flex-direction: column;
        gap: 26px;
    }

    .catalog-product-view .cp-kolom {
        display: contents;
    }

    .catalog-product-view .cp-blok-description { order: 1; }
    .catalog-product-view .cp-blok-additional { order: 2; }
    .catalog-product-view .cp-blok-sd_tab { order: 3; }
    .catalog-product-view .cp-blok-amfile_attachment { order: 4; }
    .catalog-product-view .cp-blok-faq { order: 5; }
}

/* De titels waren tabknoppen; als kopjes boven hun eigen blok hebben ze
   geen actieve staat of onderrand meer nodig. */
.catalog-product-view .product.data.items .item.title {
    float: none;
    width: auto;
    margin: 0;
    border: 0;
    background: none;
}

.catalog-product-view .product.data.items .item.title > .switch,
.catalog-product-view .product.data.items .item.title.active > .switch {
    /* Porto kleurt de actieve tab bijna zwart en de rest grijs; als kopjes
       boven hun eigen blok horen ze alle drie gelijk te zijn. */
    color: #101828;
    display: block;
    height: auto;
    padding: 0 0 10px;
    border: 0;
    background: none;
    color: #101828;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.catalog-product-view .product.data.items .item.title.active > .switch,
.catalog-product-view .product.data.items .item.title > .switch:hover,
.catalog-product-view .product.data.items .item.title > .switch:focus {
    border: 0;
    background: none;
    color: #101828;
}

.catalog-product-view .product.data.items .item.content {
    float: none;
    width: auto;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
}

/* De kenmerkentabel had twee rijen in een blok van 135px met een eigen
   kop die de tabtitel herhaalde. */
.catalog-product-view #additional > .additional-attributes-wrapper > h2,
.catalog-product-view #additional > h2 {
    display: none;
}

.catalog-product-view #additional .additional-attributes {
    width: 100%;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.catalog-product-view #additional .additional-attributes tr:not(:last-child) th,
.catalog-product-view #additional .additional-attributes tr:not(:last-child) td {
    border-bottom: 1px solid #eef0f3;
}

.catalog-product-view #additional .additional-attributes th,
.catalog-product-view #additional .additional-attributes td {
    padding: 10px 14px;
    border: 0;
    font-size: 13.5px;
    vertical-align: top;
}

.catalog-product-view #additional .additional-attributes th {
    width: 45%;
    background: #f7fafc;
    color: #475569;
    font-weight: 600;
}

.catalog-product-view #additional .additional-attributes td {
    color: #101828;
}

/* --- 7. Vervangingstabel -------------------------------------------- */

/* Blokjes bleken slecht scanbaar; terug naar een tabel, maar dan compact
   met zebrastrepen, een vastgezette kop en het merk in een smalle kolom.
   Bij 17 nummers scheelt de kleinere rijhoogte nog altijd ruim 300px. */
.catalog-product-view #sd_tab .wk-table,
.catalog-product-view #sd_tab table.table {
    width: 100%;
    margin: 0;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13.5px;
}

.catalog-product-view #sd_tab .wk-table thead th,
.catalog-product-view #sd_tab table.table thead th {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #e4e7ec;
    /* Kop en even rijen hadden allebei #eef4f8, waardoor de kopregel
       wegviel tussen de zebrastrepen. */
    background: #d5e3ec;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

.catalog-product-view #sd_tab .wk-table tbody td,
.catalog-product-view #sd_tab table.table tbody td {
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    color: #101828;
    vertical-align: middle;
}

.catalog-product-view #sd_tab .wk-table tbody tr:last-child td,
.catalog-product-view #sd_tab table.table tbody tr:last-child td {
    border-bottom: 0;
}

.catalog-product-view #sd_tab .wk-table tbody tr:nth-child(even) td,
.catalog-product-view #sd_tab table.table tbody tr:nth-child(even) td {
    background: #f5f9fc;
}

/* De tabtitel heet nu "OE / Partnumbers"; de kop "Replacing table" die de
   module er zelf boven zet is daarmee dubbelop. */
.catalog-product-view #sd_tab h5 {
    display: none;
}

.catalog-product-view #sd_tab .wk-table tbody tr:hover td,
.catalog-product-view #sd_tab table.table tbody tr:hover td {
    background: #f2f9fd;
}

/* Merk smal en rustig, het nummer is waar men op zoekt. */
.catalog-product-view #sd_tab .wk-table tbody td:first-child,
.catalog-product-view #sd_tab table.table tbody td:first-child {
    width: 140px;
    color: #667085;
    font-size: 12.5px;
}

.catalog-product-view #sd_tab .wk-table tbody td:last-child,
.catalog-product-view #sd_tab table.table tbody td:last-child {
    font-weight: 600;
}

/* --- 7b. Achtergrondvlakken ----------------------------------------- */

/* De onderste helft was één lange witte lap. De OE-nummers en de FAQ
   krijgen een eigen vlak zodat de secties uit elkaar te houden zijn. */
.catalog-product-view #sd_tab {
    /* Geen vlak met marge eromheen: de tabel heeft zijn eigen kader en mag
       de volle breedte van de kolom hebben, gelijk met het blok erboven. */
    padding: 0;
    border-radius: 0;
    background: none;
}

.catalog-product-view .product.data.items #tab-label-sd_tab > .switch {
    padding-bottom: 4px;
}

/* --- 7c. Veelgestelde vragen ---------------------------------------- */

.catalog-product-view .lau-faq-section {
    margin-top: 8px;
    padding: 24px;
    border-radius: 12px;
    background: #f7fafc;
}

.catalog-product-view .lau-faq-section > h2,
.catalog-product-view .lau-faq-section > h3 {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #101828;
}

.catalog-product-view .lau-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 8px;
    padding: 14px 16px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: #101828;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.catalog-product-view .lau-faq-toggle:hover,
.catalog-product-view .lau-faq-toggle:hover span,
.catalog-product-view .lau-faq-toggle:hover .lau-faq-icon {
    /* De module zet bij hover witte tekst op blauw. Ik had alleen de
       achtergrond overschreven, waardoor er witte tekst op wit overbleef. */
    border-color: #b6cfe0;
    background: #f2f9fd;
    color: #101828;
}

.catalog-product-view .lau-faq-toggle[aria-expanded="true"],
.catalog-product-view .lau-faq-toggle.active {
    border-color: #0099d8;
}

.catalog-product-view .lau-faq-section .lau-faq-content,
.catalog-product-view .lau-faq-section .lau-faq-answer {
    padding: 0 16px 14px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.6;
}

/* --- 8. Mobiel ------------------------------------------------------- */

@media only screen and (max-width: 991px) {
    .catalog-product-view .product.data.items .item.content {
        margin-bottom: 20px;
    }

    .catalog-product-view .product.data.items .item.title > .switch {
        font-size: 16px;
    }

    .catalog-product-view .box-tocart .action.primary.tocart,
    .catalog-product-view #product-addtocart-button {
        width: 100%;
    }
}

/* Porto onderstreept de actieve tab met 2px via
   `.product.info.detailed:not(.vertical) … .item.title.active > .switch`.
   Dat is zwaarder dan mijn selector hierboven, dus dezelfde ketenlengte. */
.catalog-product-view .product.info.detailed .product.data.items .item.title > .switch,
.catalog-product-view .product.info.detailed .product.data.items .item.title.active > .switch {
    border-bottom: 0;
    /* Porto kleurt de actieve kop bijna zwart en de rest grijs, via dezelfde
       zware selector. Alle drie gelijk. */
    color: #101828;
}

/* Porto zet bij hover een rand om de kop (border-color #222529). Als kopjes
   boven hun eigen blok hoort daar niets te gebeuren. */
.catalog-product-view .product.data.items .item.title:hover,
.catalog-product-view .product.info.detailed .product.data.items .item.title:hover {
    border: 0;
    border-color: transparent;
    background: none;
}

/* --- 9. Details als eigen blok, FAQ naast de OE-tabel ----------------- */

/* De omschrijving stond als losse tekst tussen twee omkaderde blokken en
   oogde daardoor onaf. Zelfde kaart als de specificaties ernaast. */
.catalog-product-view #description {
    padding: 18px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
}

.catalog-product-view #description .product.description {
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

.catalog-product-view #description .product.description p {
    margin: 0 0 10px;
}

.catalog-product-view #description .product.description p:last-child {
    margin-bottom: 0;
}

/* De specificatietabel krijgt hetzelfde kader, zodat de twee kolommen
   naast elkaar even zwaar wegen. */
.catalog-product-view #additional {
    padding: 18px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
}

.catalog-product-view #additional .additional-attributes {
    border: 0;
    border-radius: 0;
}



/* Het SKU dat carparts-ui.js naar de specificaties verplaatst. */
.catalog-product-view #additional .additional-attributes .cp-sku-rij th,
.catalog-product-view #additional .additional-attributes .cp-sku-rij td {
    font-variant-numeric: tabular-nums;
}

/* --- 10. Etalage: hele foto tonen, vaste bandbreedte in hoogte -------
 *
 * Fotorama schaalt de hoofdafbeelding op tot de kolombreedte en snijdt de
 * rest weg. Bij een liggende foto van 404x245 werd dat 637x386 in een
 * etalage van 283px: ruim vijftig pixels boven én onder buiten beeld.
 * Bovendien verschilde de hoogte per product, waardoor de linkerkolom nu
 * eens veel korter en dan weer veel langer was dan het blok ernaast.
 *
 * Met contain past de hele foto in het kader, en een min/max-hoogte houdt
 * de etalage bij elk product in dezelfde orde van grootte als de
 * rechterkolom. min/max winnen van de hoogte die Fotorama inline zet.
 * ------------------------------------------------------------------ */

.catalog-product-view .product.media .fotorama__stage {
    /* Eén vaste hoogte in plaats van een bereik: alleen dan staan de
       miniaturen op elke productpagina op dezelfde plek. De foto zelf
       wordt door object-fit: contain vanzelf verticaal gecentreerd. */
    min-height: 520px;
    max-height: 520px;
}

.catalog-product-view .product.media .fotorama__stage__frame {
    min-height: 520px;
    max-height: 520px;
}

.catalog-product-view .product.media .fotorama__stage .fotorama__img,
.catalog-product-view .product.media .fotorama__stage__frame .fotorama__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 18px;
    object-fit: contain;
    transform: none;
}

/* --- 12. Scheiding tussen koopzone en verdieping --------------------
 *
 * Alles stond tegen elkaar aan: de bestelknop, de beloftes en meteen
 * daaronder de specificaties. Een lijn over de contentbreedte met flink
 * wat lucht eromheen markeert waar het kiezen ophoudt en het nalezen
 * begint, en geeft de koopzone rust.
 * ------------------------------------------------------------------ */

.catalog-product-view .product.info.detailed {
    position: relative;
    margin-top: 40px;
    padding-top: 36px;
    padding-bottom: 40px;
}

/* PROEF 28-08-2026: de hele verdiepingssectie op een lichte band over de
   volle sitebreedte. Geen breakout van het element zelf -- dat zou de
   kolombreedtes omgooien -- maar een vlak erachter. Terugdraaien is dit
   blok verwijderen; de rest van de opmaak staat er los van. */
.catalog-product-view .product.info.detailed:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * (100vw - 100%) / 2);
    z-index: -1;
    width: 100vw;
    border-top: 1px solid #e4e7ec;
    background: #f5f8fb;
}

/* .column.main houdt 40px onderpadding aan; die bleef wit onder de band
   staan. De band loopt nu door tot aan de footer. */
.catalog-product-view .column.main {
    padding-bottom: 0;
}

/* Op de getinte band moeten de kaarten juist wit zijn om op te vallen;
   de vragenlijst had dezelfde tint als de band. */
.catalog-product-view .lau-faq-section {
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

/* De kop staat nu buiten het kaartje, als rasteronderdeel naast
   "OE / Partnumbers"; carparts-ui.js verplaatst hem daarheen. */
/* Zelfde onderpadding als de kop van de OE-tabel, anders staat de tekst
   vier pixels lager dan die ernaast. */
.catalog-product-view .cp-faq-kop {
    margin: 0;
    padding: 0 0 10px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #101828;
}

.catalog-product-view .lau-faq-section > .lau-faq-title {
    display: none;
}

/* --- 13. OE-tabel scrollbaar bij veel nummers ------------------------
 *
 * Sommige onderdelen hebben tientallen OE-nummers; die lijst duwde de
 * rest van de pagina ver naar beneden. Een maximum van 440px (ongeveer
 * twaalf regels) houdt het blok hanteerbaar. Bij kortere lijsten gebeurt
 * er niets, want max-height grijpt alleen in als het nodig is.
 * ------------------------------------------------------------------ */

.catalog-product-view #sd_tab {
    max-height: 440px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
}

/* De tabel had zelf een kader; dat zit nu om het scrollvlak heen. De
   overflow: hidden die daarbij hoorde moet ook weg: daarmee werd de tabel
   zelf het scrollvlak en plakte de kopregel aan de bovenkant van de tabel
   in plaats van aan de bovenkant van het zichtbare blok. */
.catalog-product-view #sd_tab .wk-table,
.catalog-product-view #sd_tab table.table {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

/* Kopregel blijft staan tijdens het scrollen, anders weet je halverwege
   niet meer welke kolom het merk is en welke het nummer. */
.catalog-product-view #sd_tab .wk-table thead th,
.catalog-product-view #sd_tab table.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Een smalle, rustige scrollbalk in plaats van de systeembalk. */
.catalog-product-view #sd_tab::-webkit-scrollbar {
    width: 10px;
}

.catalog-product-view #sd_tab::-webkit-scrollbar-track {
    background: #f5f9fc;
    border-radius: 0 10px 10px 0;
}

.catalog-product-view #sd_tab::-webkit-scrollbar-thumb {
    border: 3px solid #f5f9fc;
    border-radius: 10px;
    background: #c3d4e0;
}

.catalog-product-view #sd_tab::-webkit-scrollbar-thumb:hover {
    background: #a8bfd0;
}

/* Magento's .product-social-links > * {display:inline-block} maakte het
   x-magento-init script van Amasty_Cart zichtbaar als JSON-tekst */
.product-social-links > script {
    display: none !important;
}


/* --- 13. Blokken: kop strak boven zijn eigen kaart ------------------- */

/* De titels waren tabknoppen met eigen binnenruimte; als kopje boven een
   kaart moeten ze links gelijk lopen met die kaart. De onderlinge afstand
   komt van de kolom (gap), niet meer van marges per blok. */
.catalog-product-view .product.data.items .item.title {
    padding: 0;
}

.catalog-product-view .product.data.items .item.content {
    margin: 0;
}

/* --- 14. Bijlagen in dezelfde kaart als de specificaties ------------- */

/* De downloads stonden als kale linklijst onder de kolommen. Ze horen bij
   de naslag, dus krijgen ze dezelfde kaart als de specificatietabel en een
   plek direct onder dat blok. */
.catalog-product-view #amfile_attachment {
    padding: 6px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
}

.catalog-product-view #amfile_attachment > h2,
.catalog-product-view #amfile_attachment .amfile-title {
    display: none;
}

.catalog-product-view #amfile_attachment ul,
.catalog-product-view #amfile_attachment ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-product-view #amfile_attachment li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 0;
    font-size: 13.5px;
}

.catalog-product-view #amfile_attachment li:not(:last-child) {
    border-bottom: 1px solid #eef1f5;
}

.catalog-product-view #amfile_attachment a {
    color: #175cd3;
    font-weight: 600;
    word-break: break-word;
}

.catalog-product-view #amfile_attachment a:hover {
    text-decoration: underline;
}

/* --- 15. Mobiel: foto lager, bestelknop altijd bereikbaar ------------ */

@media only screen and (max-width: 767px) {
    /* 520px etalagehoogte is op een telefoon bijna een heel scherm, en bij
       een liggende foto is het grootste deel daarvan wit. */
    .catalog-product-view .product.media .fotorama__stage,
    .catalog-product-view .product.media .fotorama__stage__frame {
        /* Het kader moet mee omlaag: bleef dat op 520px staan, dan stond de
           foto gecentreerd in een kader dat twee keer zo hoog is als de
           etalage en zag je op een telefoon alleen de bovenste helft. */
        /* !important omdat Fotorama de hoogte ook inline kan zetten. */
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .catalog-product-view .product.media .fotorama__nav.fotorama__nav--thumbs {
        margin-top: 8px;
    }
}

/* De balk die verschijnt zodra de echte bestelknop uit beeld is. De knop in
   de balk klikt die echte knop aan, zodat alle winkelwagenlogica (Amasty,
   voorraadcontrole) gewoon zijn werk doet. */
.cp-sticky-cart {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4e7ec;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.12);
}

.cp-sticky-cart.cp-zichtbaar {
    display: flex;
}

.cp-sticky-prijs {
    flex: 0 0 auto;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
}

.cp-sticky-cart .cp-sticky-knop {
    flex: 1 1 auto;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #55ba29;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.cp-sticky-cart .cp-sticky-knop:hover,
.cp-sticky-cart .cp-sticky-knop:focus {
    background: #4aa423;
    color: #fff;
}

/* Alleen op telefoon- en tabletformaat; op desktop staat de bestelknop
   altijd binnen bereik. */
@media only screen and (min-width: 992px) {
    .cp-sticky-cart.cp-zichtbaar {
        display: none;
    }
}

/* Blokken zonder inhoud (bijvoorbeeld de OE-tab van een product zonder
   nummers) worden hierin geparkeerd; Porto forceert `display: block` op de
   panelen zelf, dus dit moet met !important. */
.catalog-product-view .product.data.items .cp-verborgen {
    display: none !important;
}

/* De WhatsApp-knop zweeft rechtsonder en viel over de bestelknop in de
   balk. Zolang de balk in beeld is, schuift hij erboven. */
body.cp-balk-zichtbaar #ldbdigital-whatsapp-widget {
    /* De widget zet zijn eigen positie met !important. */
    bottom: 84px !important;
}

/* Hetzelfde voor het omhoog-pijltje van Porto en de cookieknop linksonder. */
body.cp-balk-zichtbaar #totop,
body.cp-balk-zichtbaar .cookie-toggle {
    bottom: 84px !important;
}

/* Staat de winkelmandlade of een venster open, dan hoort de balk weg: hij
   dekte anders de knop "Go to Checkout" in de lade af. */
.cp-sticky-cart.cp-verborgen,
body._has-modal .cp-sticky-cart,
html.nav-open .cp-sticky-cart {
    display: none;
}

/* Diezelfde knop wordt ook door de zwevende WhatsApp- en cookieknop
   overlapt; zolang de lade open staat gaan die weg. */
body.cp-lade-open #ldbdigital-whatsapp-widget,
body.cp-lade-open .cookie-toggle {
    display: none !important;
}

/* De balk ligt over de pagina heen; onderaan zou hij het laatste stuk van
   de voettekst afdekken. */
@media only screen and (max-width: 991px) {
    body.cp-balk-zichtbaar .page-wrapper {
        padding-bottom: 72px;
    }
}

/* De kopjes hielden op telefoonformaat het pijltje van de accordeon, maar
   alle panelen staan altijd open -- er valt niets uit te klappen. */
@media only screen and (max-width: 991px) {
    .catalog-product-view .product.data.items .item.title > .switch:after {
        display: none;
    }
}

/* --- 16. Productnaam boven de foto op telefoonformaat ----------------
 *
 * carparts-ui.js hangt de titel dan vóór de galerij; hier alleen de
 * ruimte eromheen. Boven 767px blijft alles zoals het was.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 767px) {
    /* .column.main is op telefoonformaat een flexkolom waarin de galerij
       `order: -1` heeft; zonder een lagere order zou de titel er alsnog
       onder belanden, hoe vroeg hij in de DOM ook staat. */
    .catalog-product-view .column.main > .page-title-wrapper.product {
        order: -2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 14px;
        padding: 0;
    }

    /* Het merklogo zit in dezelfde wikkel en verhuist dus mee; naast de
       naam in plaats van er los onder. */
    .catalog-product-view .column.main > .page-title-wrapper.product .amshopby-option-link {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Het blauw en het gewicht komen van een regel die op
       `.product-info-main` staat; buiten dat blok moeten ze hier opnieuw. */
    .catalog-product-view .column.main > .page-title-wrapper.product .page-title {
        margin: 0;
        color: #2f99d8;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.3;
    }

    /* De galerij had een marge die bij een titel erboven dubbel voelde. */
    .catalog-product-view .column.main > .page-title-wrapper.product + .product.media {
        margin-top: 0;
    }
}