/**
 * Deals Display — publieke opmaak.
 *
 * Alles zit achter .dd-catalog en gebruikt eigen variabelen, zodat het niet
 * botst met je thema. Wil je kleuren aanpassen: overschrijf de variabelen
 * hieronder in je eigen CSS, dan blijft de rest ongemoeid.
 */

.dd-catalog {
    --dd-accent: #f97316;   /* knoppen, zoals je huidige oranje */
    --dd-price: #dc2626;    /* prijs en kortingslabel */
    --dd-text: #1d2327;
    --dd-muted: #6b7280;
    --dd-border: #e5e7eb;
    --dd-bg-soft: #f9fafb;
    --dd-radius: 10px;
    --dd-gap: 20px;

    color: var(--dd-text);
}

.dd-catalog *,
.dd-catalog *::before,
.dd-catalog *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- Filters */

.dd-filters {
    background: var(--dd-bg-soft);
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.dd-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.dd-filters__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 160px;
    min-width: 0;
}

.dd-filters__field--search {
    flex: 2 1 240px;
}

.dd-filters__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dd-muted);
}

.dd-filters input[type="search"],
.dd-filters input[type="number"],
.dd-filters select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--dd-border);
    border-radius: 7px;
    background: #fff;
    font-size: 15px;
    line-height: 1.3;
    color: var(--dd-text);
}

.dd-filters__price {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dd-filters__price input {
    min-width: 0;
}

.dd-filters__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.dd-filters__reset {
    font-size: 14px;
    color: var(--dd-muted);
    text-decoration: underline;
}

/* --------------------------------------------------------------- Toolbar */

.dd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dd-toolbar__count {
    margin: 0;
    font-size: 15px;
    color: var(--dd-muted);
}

.dd-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dd-muted);
}

.dd-toolbar__sort select {
    padding: 7px 10px;
    border: 1px solid var(--dd-border);
    border-radius: 7px;
    background: #fff;
    font-size: 14px;
    color: var(--dd-text);
    max-width: 220px;
}

/* ------------------------------------------------------------------ Grid */

.dd-grid {
    display: grid;
    gap: var(--dd-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
    .dd-grid--3,
    .dd-grid--4,
    .dd-grid--5,
    .dd-grid--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .dd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dd-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dd-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Kaart */

.dd-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}

.dd-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.dd-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #fff;
    padding: 14px;
}

.dd-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.dd-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--dd-price);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 5px;
    z-index: 1;
}

.dd-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    flex: 1;
}

.dd-card__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;

    /* Maximaal drie regels, zodat de kaarten even hoog blijven. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dd-card__title a {
    color: inherit;
    text-decoration: none;
}

.dd-card__title a:hover {
    text-decoration: underline;
}

.dd-card__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}

.dd-card__from {
    font-size: 13px;
    color: var(--dd-muted);
}

.dd-card__price {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
}

.dd-card__saving {
    font-size: 12px;
    color: #15803d;
    flex-basis: 100%;
}

.dd-card__shops {
    margin: 0;
    font-size: 13px;
    color: var(--dd-muted);
}

/* --------------------------------------------------------------- Knoppen */

.dd-btn {
    display: inline-block;
    padding: 10px 16px;
    border: 0;
    border-radius: 7px;
    background: var(--dd-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.dd-btn:hover,
.dd-btn:focus {
    filter: brightness(1.08);
    color: #fff;
}

.dd-btn--deal {
    width: 100%;
}

/* ------------------------------------------------------------ Paginering */

.dd-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

.dd-pagination__link {
    display: inline-block;
    min-width: 40px;
    padding: 8px 11px;
    border: 1px solid var(--dd-border);
    border-radius: 7px;
    background: #fff;
    color: var(--dd-text);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.dd-pagination__link:hover {
    border-color: var(--dd-accent);
    color: var(--dd-accent);
}

.dd-pagination__link.is-current {
    background: var(--dd-accent);
    border-color: var(--dd-accent);
    color: #fff;
    font-weight: 700;
}

.dd-pagination__gap {
    padding: 0 4px;
    color: var(--dd-muted);
}

/* ------------------------------------------------------------------ Leeg */

.dd-empty {
    padding: 28px;
    border: 1px dashed var(--dd-border);
    border-radius: var(--dd-radius);
    text-align: center;
    color: var(--dd-muted);
}

/* ------------------------------------------------------ Winkelvergelijking */

.dd-card__compare {
    border-top: 1px solid var(--dd-border);
    padding-top: 8px;
}

.dd-card__compare > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--dd-accent);
    list-style: none;
    padding: 2px 0;
}

.dd-card__compare > summary::-webkit-details-marker {
    display: none;
}

.dd-card__compare > summary::after {
    content: " ▾";
    font-size: 11px;
}

.dd-card__compare[open] > summary::after {
    content: " ▴";
}

table.dd-offers {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 13px;
}

.dd-offers th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--dd-muted);
    font-weight: 600;
    padding: 4px 6px 4px 0;
    border-bottom: 1px solid var(--dd-border);
}

.dd-offers td {
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid var(--dd-border);
    vertical-align: middle;
}

.dd-offers tbody tr:last-child td {
    border-bottom: 0;
}

.dd-offers tbody tr:first-child .dd-offers__price {
    color: #15803d;
}

.dd-offers__price {
    font-weight: 700;
    white-space: nowrap;
}

.dd-offers__discount {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dd-accent);
}

.dd-offers__buy {
    text-align: right;
    white-space: nowrap;
}

.dd-offers__buy a {
    color: var(--dd-accent);
    font-weight: 600;
    text-decoration: none;
}

.dd-offers__buy a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------- Productpagina */

.dd-product__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.dd-breadcrumb {
    font-size: 13px;
    color: var(--dd-muted);
    margin-bottom: 18px;
}

.dd-breadcrumb a {
    color: var(--dd-muted);
    text-decoration: none;
}

.dd-breadcrumb a:hover {
    text-decoration: underline;
}

.dd-breadcrumb span {
    margin: 0 5px;
}

.dd-product__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
}

@media (min-width: 780px) {
    .dd-product__top {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        align-items: start;
    }
}

.dd-product__media {
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    padding: 24px;
    text-align: center;
}

.dd-product__media img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.dd-product__title {
    margin: 0 0 8px;
    font-size: 27px;
    line-height: 1.25;
}

.dd-product__meta {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--dd-muted);
}

/* Eén zin onder de titel: waar de bezoeker is, en wat hij hier vindt. */
.dd-product__lead {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5057;
}

.dd-product__meta span + span::before {
    content: "·";
    margin: 0 7px;
}

.dd-product__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.dd-product__price strong {
    font-size: 33px;
    line-height: 1.1;
}

.dd-product__from,
.dd-product__at {
    font-size: 14px;
    color: var(--dd-muted);
}

.dd-product__saving {
    margin: 0 0 18px;
    font-size: 14px;
    color: #15803d;
}

.dd-btn--large {
    padding: 14px 26px;
    font-size: 17px;
}

.dd-btn--small {
    padding: 6px 12px;
    font-size: 13px;
}

.dd-product__disclaimer {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--dd-muted);
}

.dd-product__offers h2 {
    font-size: 20px;
    margin: 0 0 14px;
}

table.dd-offers--full {
    font-size: 15px;
}

.dd-offers--full th,
.dd-offers--full td {
    padding: 11px 10px 11px 0;
}

.dd-offers--full tr.is-best td {
    background: #f0fdf4;
}

.dd-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #15803d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.dd-muted {
    color: var(--dd-muted);
}

/* ------------------------------------------------ Prijzen op de kaart */

.dd-card__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.dd-card__old {
    font-size: 15px;
    color: var(--dd-muted);
    text-decoration: line-through;
}

.dd-card__price {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dd-price);
}

.dd-card__badge {
    top: 10px;
    left: auto;
    right: 10px;
}

/* ------------------------------------------------------- Weergaveknoppen */

.dd-toolbar__tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dd-viewswitch {
    display: inline-flex;
    border: 1px solid var(--dd-border);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.dd-viewswitch__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dd-muted);
}

.dd-viewswitch__btn + .dd-viewswitch__btn {
    border-left: 1px solid var(--dd-border);
}

.dd-viewswitch__btn svg {
    fill: currentColor;
}

.dd-viewswitch__btn:hover {
    background: var(--dd-bg-soft);
    color: var(--dd-text);
}

.dd-viewswitch__btn.is-active {
    background: var(--dd-text);
    color: #fff;
}

/* Op smalle schermen is er geen ruimte voor de keuze; daar is de lijst
   sowieso de prettigste weergave. */
@media (max-width: 560px) {
    .dd-viewswitch { display: none; }
}

/* ----------------------------------------------------- Lijstweergave
   Zelfde HTML als het raster: alleen de opmaak verandert. Daardoor schakelt
   de bezoeker onmiddellijk om, zonder de pagina opnieuw te laden. */

.dd-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    overflow: hidden;
}

.dd-grid[data-view="list"] .dd-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--dd-border);
    border-radius: 0;
    padding: 12px 14px;
    transition: background .15s ease;
}

.dd-grid[data-view="list"] .dd-card:last-child {
    border-bottom: 0;
}

.dd-grid[data-view="list"] .dd-card:hover {
    box-shadow: none;
    transform: none;
    background: var(--dd-bg-soft);
}

.dd-grid[data-view="list"] .dd-card__media {
    aspect-ratio: 1 / 1;
    padding: 0;
}

.dd-grid[data-view="list"] .dd-card__badge {
    top: -4px;
    right: -6px;
    font-size: 11px;
    padding: 3px 6px;
}

.dd-grid[data-view="list"] .dd-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0;
}

.dd-grid[data-view="list"] .dd-card__title {
    -webkit-line-clamp: 2;
    font-size: 16px;
}

.dd-grid[data-view="list"] .dd-card__pricing {
    margin-top: 2px;
}

.dd-grid[data-view="list"] .dd-card__compare {
    border-top: 0;
    padding-top: 0;
}

.dd-grid[data-view="list"] .dd-btn--deal {
    width: auto;
    justify-self: start;
    padding: 8px 16px;
    font-size: 14px;
}

/* Op ruimere schermen krijgt de rij een echte kolomindeling:
   tekst links, prijs rechts uitgelijnd — zoals je van een
   vergelijkingssite verwacht. */
@media (min-width: 760px) {
    .dd-grid[data-view="list"] .dd-card {
        grid-template-columns: 80px minmax(0, 1fr) 200px 130px;
        gap: 18px;
    }

    .dd-grid[data-view="list"] .dd-card__body {
        display: contents;
    }

    .dd-grid[data-view="list"] .dd-card__title,
    .dd-grid[data-view="list"] .dd-card__shops,
    .dd-grid[data-view="list"] .dd-card__compare {
        grid-column: 2;
    }

    .dd-grid[data-view="list"] .dd-card__pricing {
        grid-column: 3;
        grid-row: 1 / span 3;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
        margin: 0;
    }

    .dd-grid[data-view="list"] .dd-btn--deal {
        grid-column: 4;
        grid-row: 1 / span 3;
        align-self: center;
        justify-self: end;
    }
}

/* --------------------------------------------------- Kortingsfilter */

.dd-filters__field--discount {
    flex: 0 1 150px;
}

/* =====================================================================
   Correcties tegenover het thema.

   Blocksy stijlt links, knoppen en tabelkoppen op zijn eigen manier. Die
   regels wonnen het van de onze, waardoor knoptekst oranje op oranje werd
   en tabelkoppen een blauwe balk kregen. Alles hieronder staat daarom
   nadrukkelijk binnen .dd-catalog, zodat het zwaarder weegt dan het thema
   zonder dat we !important nodig hebben.
   ===================================================================== */

.dd-catalog a.dd-btn,
.dd-catalog a.dd-btn:link,
.dd-catalog a.dd-btn:visited,
.dd-catalog a.dd-btn:hover,
.dd-catalog a.dd-btn:focus {
    color: #fff;
    text-decoration: none;
}

.dd-catalog table.dd-offers {
    background: transparent;
    border: 0;
}

.dd-catalog table.dd-offers thead th {
    background: transparent;
    color: var(--dd-muted);
    border: 0;
    border-bottom: 1px solid var(--dd-border);
}

.dd-catalog table.dd-offers tbody td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dd-border);
    color: var(--dd-text);
}

.dd-catalog table.dd-offers tbody tr.is-best td {
    background: #f0fdf4;
}

.dd-catalog table.dd-offers tbody tr:last-child td {
    border-bottom: 0;
}

.dd-catalog .dd-offers__buy a:not(.dd-btn) {
    color: var(--dd-accent);
    text-decoration: none;
}

/* Alleen het bedrag zelf groot, niet de winkelnaam die eronder in
   dezelfde regel staat. */
.dd-product__price strong {
    font-size: inherit;
}

.dd-product__price .dd-product__amount {
    font-size: 33px;
    line-height: 1.1;
    color: var(--dd-price);
}

.dd-product__at,
.dd-product__at strong {
    font-size: 14px;
    color: var(--dd-muted);
}

.dd-product__at strong {
    color: var(--dd-text);
}

/* =====================================================================
   HERZIENING — compacte lijst, filters links, productpagina boven de vouw.
   Deze regels staan achteraan en overschrijven bewust het oudere blok
   hierboven. Zo blijft de geschiedenis leesbaar zonder dubbele bestanden.
   ===================================================================== */

/* ------------------------------------------------- Indeling met sidebar */

.dd-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
}

@media (min-width: 900px) {
    .dd-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }
    .dd-layout--nofilters { grid-template-columns: minmax(0, 1fr); }

}

.dd-filters {
    background: var(--dd-bg-soft);
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    padding: 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dd-filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dd-filters__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dd-filters__group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dd-filters__submit { width: 100%; padding: 9px 14px; font-size: 14px; }

/* Op mobiel staan de filters boven de resultaten, uitklapbaar zodat ze
   geen halve scherm innemen. */
@media (max-width: 899px) {
    .dd-filters { padding: 12px; }
    .dd-filters__group { flex-direction: row; align-items: center; gap: 10px; }
    .dd-filters__label { flex: 0 0 92px; }
    .dd-filters input, .dd-filters select { flex: 1; }

    /* Standaard dicht: pas open na een tik op de knop hieronder. */
    .dd-filters { display: none; }
    .dd-filters.is-open { display: flex; }
}

/* Knop om het filterblok in/uit te klappen. Enkel op mobiel zichtbaar; op
   een breder scherm staan de filters altijd gewoon open in de zijkolom. */
.dd-filters__toggle {
    display: none;
}

@media (max-width: 899px) {
    .dd-filters__toggle {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 11px 14px;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid var(--dd-border);
        border-radius: var(--dd-radius);
        color: var(--dd-text);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .dd-filters__toggle-icon {
        flex: 0 0 auto;
        color: var(--dd-accent);
    }

    .dd-filters__toggle-label {
        flex: 1;
        text-align: left;
    }

    .dd-filters__toggle-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: var(--dd-accent);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    .dd-filters__toggle-chevron {
        flex: 0 0 auto;
        color: var(--dd-text);
        transition: transform .15s ease;
    }

    .dd-filters__toggle[aria-expanded="true"] .dd-filters__toggle-chevron {
        transform: rotate(180deg);
    }
}

/* ------------------------------------------------------------ Toolbar */

.dd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dd-border);
}

.dd-toolbar__count { font-size: 14px; }
.dd-toolbar__sort { font-size: 13px; }
.dd-toolbar__sort select { padding: 5px 8px; font-size: 13px; max-width: 190px; }
.dd-viewswitch__btn { width: 30px; height: 30px; }

/* ------------------------------------------- Compacte lijst (standaard) */

.dd-grid[data-view="list"] {
    display: block;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    overflow: hidden;
}

.dd-grid[data-view="list"] .dd-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas:
        "media body"
        "media price";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--dd-border);
    border-radius: 0;
}

.dd-grid[data-view="list"] .dd-card:last-child { border-bottom: 0; }
.dd-grid[data-view="list"] .dd-card:hover { background: var(--dd-bg-soft); box-shadow: none; transform: none; }

.dd-grid[data-view="list"] .dd-card__media {
    grid-area: media;
    aspect-ratio: 1 / 1;
    padding: 0;
}

.dd-grid[data-view="list"] .dd-card__badge {
    top: -3px; right: -5px; left: auto;
    font-size: 10px; padding: 2px 5px;
}

.dd-grid[data-view="list"] .dd-card__body {
    grid-area: body;
    display: block;
    padding: 0;
}

.dd-grid[data-view="list"] .dd-card__title {
    font-size: 15px;
    line-height: 1.3;
    -webkit-line-clamp: 1;
    margin: 0;
}

.dd-grid[data-view="list"] .dd-card__shops {
    font-size: 12px;
    margin: 1px 0 0;
}

.dd-grid[data-view="list"] .dd-card__compare { display: none; }

.dd-grid[data-view="list"] .dd-card__pricing {
    grid-area: price;
    margin: 0;
    gap: 6px;
}

.dd-grid[data-view="list"] .dd-card__price { font-size: 17px; }
.dd-grid[data-view="list"] .dd-card__old { font-size: 13px; }
.dd-grid[data-view="list"] .dd-btn--deal { display: none; }

/* Vanaf tablet: alles op één regel, prijs rechts uitgelijnd. */
@media (min-width: 700px) {
    .dd-grid[data-view="list"] .dd-card {
        grid-template-columns: 56px minmax(0, 1fr) 150px 104px;
        grid-template-areas: "media body price action";
        align-items: center;
        padding: 8px 14px;
    }

    .dd-grid[data-view="list"] .dd-card__pricing {
        grid-area: price;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        text-align: right;
    }

    .dd-grid[data-view="list"] .dd-card__price { font-size: 18px; }
    .dd-grid[data-view="list"] .dd-card__from { font-size: 11px; }

    .dd-grid[data-view="list"] .dd-btn--deal {
        display: inline-block;
        grid-area: action;
        justify-self: end;
        width: auto;
        padding: 7px 14px;
        font-size: 13px;
    }
}

/* -------------------------------------------------- Productpagina v2 */

.dd-product__inner { max-width: 1160px; padding: 18px 20px 60px; }

.dd-product__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
}

@media (min-width: 860px) {
    .dd-product__layout {
        /* Bewust een smalle fotokolom: een grote foto duwt de
           prijsvergelijking onder de vouw, en daar komt de bezoeker voor. */
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
    }
    .dd-product__media { position: sticky; top: 20px; }
}

.dd-product__media {
    position: relative;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    padding: 16px;
    text-align: center;
}

.dd-product__media img { max-width: 100%; height: auto; max-height: 300px; object-fit: contain; }

.dd-product__badge {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--dd-price);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
}

.dd-product__title { margin: 0 0 4px; font-size: 25px; line-height: 1.2; }
.dd-product__meta { margin: 0 0 10px; font-size: 13px; color: var(--dd-muted); }
.dd-product__lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #4a5057; }
.dd-product__subtitle { font-size: 17px; margin: 26px 0 10px; }

/* Beste aanbieding: prijs en knop naast elkaar, meteen in beeld. */
.dd-best {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--dd-border);
    border-left: 4px solid #15803d;
    border-radius: var(--dd-radius);
    background: #f6fdf8;
}

.dd-best__figures { display: flex; flex-direction: column; gap: 1px; }
.dd-best__label { font-size: 12px; color: var(--dd-muted); text-transform: uppercase; letter-spacing: .04em; }
.dd-best__price { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--dd-price); }
.dd-best__shop { font-size: 13px; color: var(--dd-muted); }
.dd-best__cta { white-space: nowrap; }

.dd-product__spread { margin: 8px 0 0; font-size: 13px; color: #15803d; }

.dd-trust {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--dd-muted);
}

.dd-trust li::before { content: "✓"; color: #15803d; font-weight: 700; margin-right: 5px; }

/* -------------------------------------------- Winkellijst op de productpagina */

.dd-offers-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); overflow: hidden; }

.dd-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dd-border);
    background: #fff;
}

.dd-offer:last-child { border-bottom: 0; }
.dd-offer:hover { background: var(--dd-bg-soft); }
.dd-offer--best { background: #f6fdf8; }

.dd-offer__name { font-weight: 600; font-size: 15px; }
.dd-offer__time { display: block; font-size: 11px; color: var(--dd-muted); margin-top: 1px; }

.dd-offer__price { text-align: right; white-space: nowrap; }
.dd-offer__amount { font-size: 17px; font-weight: 700; }
.dd-offer--best .dd-offer__amount { color: var(--dd-price); }
.dd-offer__extra { display: block; font-size: 11px; color: var(--dd-muted); }
.dd-offer__discount { display: block; font-size: 11px; font-weight: 600; color: var(--dd-price); }
.dd-offer__cta { padding: 7px 14px; font-size: 13px; }

/* ------------------------------------------------ Meeschuivende balk (mobiel) */

.dd-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: #fff;
    border-top: 1px solid var(--dd-border);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, .09);
}

.dd-stickybar__info { display: flex; flex-direction: column; line-height: 1.15; }
.dd-stickybar__price { font-size: 19px; font-weight: 800; color: var(--dd-price); }
.dd-stickybar__shop { font-size: 12px; color: var(--dd-muted); }

@media (max-width: 859px) {
    .dd-stickybar { display: flex; }
    .dd-product__inner { padding-bottom: 90px; }
}

.dd-product__related { margin-top: 34px; }

/* Omschrijving uit de feed -------------------------------------------- */
.dd-product__about { margin-top: 30px; }
.dd-product__description {
    /* Volle breedte. Er stond een leesbreedte van 68 tekens op — de klassieke
       vuistregel — maar op deze pagina staat de omschrijving als enige blok
       op zijn eigen rij, en dan oogt een halve kolom tekst met een lege helft
       ernaast eerder onaf dan rustig. */
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
    color: #33383d;
}
.dd-product__description p { margin: 0 0 12px; }
.dd-product__description p:last-child { margin-bottom: 0; }
.dd-product__source { margin: 10px 0 0; font-size: 12px; color: #767c84; }


/* =====================================================================
   KAART v3 — vier vaste onderdelen: media, body, prijs, knop.

   De knop stond eerder ín het tekstblok, waardoor hij nooit in de rechter
   kolom van de rij geplaatst kon worden. Nu zijn alle vier rechtstreekse
   kinderen van de kaart, en kan de rij ze echt naast elkaar zetten.
   ===================================================================== */

.dd-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 14px;
}

.dd-card__body { display: block; padding: 0 14px; }
.dd-card__pricing { position: relative; padding: 0 14px; margin-top: auto; }
.dd-card__action { padding: 0 14px; }

.dd-card__media { margin-bottom: 4px; }
.dd-card__title { margin: 0 0 3px; }

/* -------------------------------------------------- Lijst: knop rechts */

.dd-grid[data-view="list"] .dd-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
        "media body"
        "media price"
        "action action";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 10px 12px;
}

.dd-grid[data-view="list"] .dd-card__media   { grid-area: media; margin: 0; }
.dd-grid[data-view="list"] .dd-card__body    { grid-area: body; padding: 0; }
.dd-grid[data-view="list"] .dd-card__pricing { grid-area: price; padding: 0; margin: 0; }
.dd-grid[data-view="list"] .dd-card__action  { grid-area: action; padding: 0; }
.dd-grid[data-view="list"] .dd-btn--deal     { display: inline-block; width: 100%; }

@media (min-width: 700px) {
    .dd-grid[data-view="list"] .dd-card {
        grid-template-columns: 54px minmax(0, 1fr) 160px 118px;
        grid-template-areas: "media body price action";
        row-gap: 0;
        column-gap: 16px;
        padding: 9px 14px;
    }

    .dd-grid[data-view="list"] .dd-card__pricing {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        text-align: right;
    }

    .dd-grid[data-view="list"] .dd-btn--deal {
        width: auto;
        min-width: 104px;
        justify-self: end;
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ------------------------------------------ Overzicht bij zweven op de prijs */

.dd-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 268px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--dd-border);
    border-radius: 9px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
    text-align: left;
}

/* Onzichtbare brug, zodat de muis niet "valt" tussen prijs en overzicht. */
.dd-pop::before {
    content: "";
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}

/* Alleen zweven over het bedrag zelf opent het overzicht. De rij is in het
   raster zo breed als de kaart: zweven "ergens daar" liet het venster
   openspringen terwijl de muis helemaal niet bij de prijs was. */
.dd-card__pricing .dd-prijs:hover ~ .dd-pop,
.dd-card__pricing:focus-within .dd-pop,
.dd-pop:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dd-card__pricing:has(.dd-pop) .dd-prijs {
    cursor: help;
}

/* Wie met de muis naar "Bekijk prijzen" onderweg is, mag het venster niet
   over zich heen krijgen: het opent pas als de muis even op de prijs blijft
   rusten, en sluit meteen weer als hij weg is. */
.dd-card__pricing .dd-prijs:hover ~ .dd-pop,
.dd-card__pricing:focus-within .dd-pop {
    transition-delay: .3s;
}

.dd-pop:hover {
    transition-delay: 0s;
}

/* In de lijstweergave staat de knop vlak naast de prijs: het venster klapt
   daar naar links open, dus nooit over de knop. */
.dd-catalog .dd-grid[data-view="list"] .dd-pop {
    top: -8px;
    right: calc(100% + 10px);
}

.dd-catalog .dd-grid[data-view="list"] .dd-pop::before {
    top: 0; bottom: 0; left: auto; right: -10px; width: 10px; height: auto;
}

/* Nog niet gebouwd (script is er niet of nog niet): geen lege ballon tonen. */
.dd-catalog .dd-pop[data-dd-pop] { display: none !important; }

.dd-pop__title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dd-muted);
}

.dd-pop__list { list-style: none; margin: 0; padding: 0; }

.dd-pop__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--dd-border);
}

.dd-pop__list li:last-child { border-bottom: 0; }
.dd-pop__shop { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pop__price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.dd-pop__list li.is-best .dd-pop__price { color: var(--dd-price); }

.dd-catalog .dd-pop__btn {
    padding: 4px 9px;
    border-radius: 5px;
    background: var(--dd-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dd-pop__more { display: inline-block; margin-top: 7px; font-size: 12px; }

/* Op aanraakschermen heeft zweven geen zin; daar volstaat de knop. */
@media (hover: none) {
    .dd-pop { display: none; }
}

/* ------------------------------------------------- Oordeel uit de historiek */

.dd-verdict {
    display: inline-block;
    margin: 3px 0 0;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    cursor: help;
}

.dd-verdict--lowest-ever   { background: #15803d; color: #fff; }
.dd-verdict--lowest-30     { background: #dcfce7; color: #14532d; }
.dd-verdict--below-average { background: #ecfdf5; color: #15803d; }
.dd-verdict--above-average { background: #fef3c7; color: #92400e; }

.dd-verdict--big {
    display: block;
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 7px;
}

.dd-verdict__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: .85;
}

/* ---------------------------------------------- Oordeel met uitleg erbij

   WAAROM DIT ER NAAST STAAT
   .dd-verdict blijft bestaan voor wie de sjablonen nog niet heeft
   bijgewerkt; alles wat door DD_Prijsoordeel wordt getekend gebruikt
   .dd-oordeel. Zo kan een halve upload nooit een kale kaart opleveren.

   HET VINKJE
   Alleen bij "laagste ooit" en "laagste in 30 dagen" — dus alleen daar
   waar wij zelf hebben vastgesteld dat het de laagste prijs is. Zou het
   overal staan, dan betekende het niets meer.

   DE BALLON
   Geen title-attribuut: Safari op iPhone toont dat helemaal niet. Dit is
   CSS-only en gaat open bij zweven, bij focus én bij aanraken (tabindex
   maakt het element focusbaar). Geen JavaScript, dus geen extra verzoek
   en geen vertraging op een raster van 24 kaarten.                        */

.dd-oordeel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
}

.dd-oordeel--lowest-ever   { background: #15803d; color: #fff; }
.dd-oordeel--lowest-30     { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.dd-oordeel--below-average { background: #ecfdf5; color: #15803d; }
.dd-oordeel--above-average { background: #fef3c7; color: #92400e; }

.dd-oordeel__vink {
    font-size: 12px;
    line-height: 1;
}

.dd-oordeel--gemeten { padding-left: 6px; }

/* De ballon zelf. */
.dd-oordeel__ballon {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: max-content;
    max-width: 280px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #1d2327;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}

.dd-oordeel__ballon a { color: #93c5fd; text-decoration: underline; }

.dd-oordeel:hover .dd-oordeel__ballon,
.dd-oordeel:focus .dd-oordeel__ballon,
.dd-oordeel:focus-within .dd-oordeel__ballon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dd-oordeel:focus { outline: 2px solid #2271b1; outline-offset: 2px; }

/* Groot, op de productpagina. */
.dd-oordeel__blok { margin: 10px 0 0; }

.dd-oordeel--groot {
    margin: 0;
    padding: 7px 13px;
    font-size: 14px;
    border-radius: 999px;
}

.dd-oordeel--groot .dd-oordeel__vink { font-size: 15px; }

.dd-oordeel--groot .dd-oordeel__ballon {
    max-width: 340px;
    font-size: 13px;
}

.dd-oordeel__meting {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #50575e;
}

/* Op een smal scherm past een ballon van 280 px niet naast de linkerrand
   van een kaart in de tweede kolom; dan hangt hij aan de rechterkant. */
@media (max-width: 520px) {
    .dd-oordeel__ballon {
        left: auto;
        right: 0;
        max-width: min(280px, calc(100vw - 40px));
    }
}

/* =====================================================================
   Kortingslabel — moet binnen de kaart blijven.

   Het stond met een negatieve marge tegen de rand, waardoor het door de
   afgeronde hoek werd afgeknipt. Nu netjes binnen de foto, in beide
   weergaven, en boven alles wat eronder ligt.
   ===================================================================== */

.dd-card__media { position: relative; overflow: visible; }

.dd-catalog .dd-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 3;
}

.dd-grid[data-view="list"] .dd-card__badge {
    top: 2px;
    right: 2px;
    font-size: 10px;
    padding: 2px 4px;
}

/* ------------------------------------------------------- Kortingsbarometer

   Het meterje dat op een winkel-, merk- of categoriepagina staat, en de
   grote versie op /kortingsbarometer/. Eén opmaak voor allebei; alleen de
   breedte van de SVG verschilt.

   De kleur is stoplicht, maar omgekeerd aan wat je bij een index gewend
   bent: hoog betekent hier veel korting, dus groen. De bandnaam staat er
   altijd bij, zodat het ook zonder kleur te lezen is.                     */

.dd-baro {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--dd-border);
    border-radius: 12px;
    background: #fff;
}

.dd-baro__meter { flex: none; line-height: 0; }
.dd-baro__meter svg { display: block; max-width: 100%; height: auto; }

.dd-baro__tekst { flex: 1 1 260px; min-width: 0; }

.dd-baro__kop {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dd-muted);
}

.dd-baro__band {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.dd-baro__band--groot { font-size: 26px; }

.dd-baro__cijfer {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dd-muted);
    font-variant-numeric: tabular-nums;
}

.dd-baro__advies {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.55;
    color: #2c3338;
}

.dd-baro__tweede { margin: 0 0 8px; font-size: 14px; color: #3c434a; }

.dd-baro__voet {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dd-muted);
}

.dd-baro--groot { padding: 22px 24px; gap: 26px; }

.dd-baro__voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dd-baro__voet a:hover { color: #2271b1; }

/* ---------------------------------------------------- Naast de kop, niet eronder

   Op een winkel- of merkpagina staat de meter als tweede kolom in de kop,
   naast het logo en de tekst. Daar is ruimte zat, en zo hoeft de bezoeker
   niet te scrollen voor het cijfer. Onder de 900 pixels valt hij vanzelf
   onder de tekst, want dan is er geen tweede kolom meer.                   */

.dd-shop__head .dd-baro {
    flex: 0 1 330px;
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    gap: 12px;
}

.dd-shop__head .dd-baro__band { font-size: 18px; }
.dd-shop__head .dd-baro__advies { font-size: 13.5px; line-height: 1.5; }
.dd-shop__head .dd-baro__voet { font-size: 11.5px; }

@media (max-width: 900px) {
    .dd-shop__head { flex-wrap: wrap; }
    .dd-shop__head .dd-baro {
        flex: 1 1 100%;
        padding-top: 14px;
        border-top: 1px solid var(--dd-border);
        border-radius: 0;
    }
}

/* De balken per categorie. */

.dd-baro__balken { list-style: none; margin: 0; padding: 0; }

.dd-baro__balk {
    display: grid;
    grid-template-columns: minmax(96px, 190px) 1fr 44px;
    align-items: center;
    gap: 12px;
    margin: 0 0 7px;
    font-size: 14px;
}

.dd-baro__balknaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-baro__balknaam a { text-decoration: none; }
.dd-baro__balknaam a:hover { text-decoration: underline; }

.dd-baro__balkspoor {
    height: 12px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
}

.dd-baro__balkvul { display: block; height: 100%; border-radius: 999px; }

.dd-baro__balkcijfer {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .dd-baro { gap: 12px; }
    .dd-baro__balk { grid-template-columns: minmax(80px, 130px) 1fr 38px; font-size: 13px; }
}

/* ------------------------------------------------------------ Prijsgrafiek */

/* De interactieve versie (DD_Price_Chart + prijsgrafiek.js).

   De oude .dd-chart-regels blijven eronder staan zolang niet elke
   installatie de nieuwe bestanden heeft; ze bijten elkaar niet.        */

.dd-grafiek { margin-top: 32px; }

.dd-grafiek__kop { margin-bottom: 12px; }

.dd-grafiek__intro {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dd-muted);
}

.dd-grafiek__legende {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 10px;
    font-size: 13px;
    color: #3c434a;
}

.dd-grafiek__merk { display: inline-flex; align-items: center; gap: 7px; }

.dd-grafiek__merk::before {
    content: "";
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #2563eb;
}

.dd-grafiek__merk--avg::before {
    height: 0;
    border-top: 2px dashed #94a3b8;
    background: none;
}

/* Productpagina: minimum groen, gemiddelde blauw, allebei vol; de
   referentielijn gestippeld groen. Kleuren gelijk aan DD_Price_Chart::KLEUR_*. */
.dd-grafiek--prijs .dd-grafiek__merk--min::before { background: #16a34a; }

.dd-grafiek--prijs .dd-grafiek__merk--avg::before {
    height: 3px;
    border-top: 0;
    background: #0369a1;
}

.dd-grafiek__merk--laagste::before {
    height: 0;
    border-top: 2px dashed #15803d;
    background: none;
}

.dd-grafiek__kaart {
    position: relative;
    border: 1px solid var(--dd-border);
    border-radius: 12px;
    background: #fff;
    padding: 10px 10px 4px;
}

.dd-grafiek__canvas {
    display: block;
    width: 100%;
    cursor: crosshair;
    touch-action: pan-y;
    outline: none;
}

.dd-grafiek__canvas svg { display: block; width: 100%; height: auto; }

/* De statische versie krijgt een vaste hoogte; de getekende versie
   bepaalt haar eigen hoogte via het viewBox-kader.                    */
.dd-grafiek__canvas > svg[preserveAspectRatio="none"] { height: 210px; }

.dd-grafiek__canvas:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 3px;
    border-radius: 8px;
}

.dd-grafiek__tip {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 168px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #1d2327;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

.dd-grafiek__tipdag {
    font-weight: 700;
    padding-bottom: 3px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.dd-grafiek__tiprij { display: flex; align-items: center; gap: 7px; }
.dd-grafiek__tiprij i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dd-grafiek__tiprij b { margin-left: auto; font-variant-numeric: tabular-nums; }

.dd-grafiek__brush { margin-top: 2px; cursor: grab; touch-action: none; }
.dd-grafiek__brush:active { cursor: grabbing; }
.dd-grafiek__brush svg { display: block; width: 100%; height: auto; }
.dd-grafiek__greep { cursor: ew-resize; }

.dd-grafiek__periodes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.dd-grafiek__periodelabel {
    margin-right: 4px;
    font-size: 13px;
    color: var(--dd-muted);
}

/* Het thema geeft elke knop een eigen hoogte en regelafstand; die moeten
   we hier expliciet terugzetten, anders worden deze pillen bijna vijftig
   pixels hoog terwijl er dertien pixels tekst in staat.                  */
.dd-grafiek .dd-grafiek__periodes .dd-grafiek__knop {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    height: auto;
    padding: 5px 13px;
    border: 1px solid var(--dd-border);
    border-radius: 999px;
    background: #fff;
    color: #3c434a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.dd-grafiek .dd-grafiek__periodes .dd-grafiek__knop:hover { border-color: #2563eb; color: #2563eb; background: #fff; }

.dd-grafiek .dd-grafiek__periodes .dd-grafiek__knop.is-actief,
.dd-grafiek .dd-grafiek__periodes .dd-grafiek__knop.is-actief:hover {
    background: #1d2327;
    border-color: #1d2327;
    color: #fff;
}

.dd-grafiek__hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--dd-muted);
}

.dd-grafiek__nu { margin: 12px 0 0; font-size: 14px; }

.dd-grafiek__vlag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #15803d;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* De cijfers achter de grafiek.

   Het thema kleurt <th> wit omdat het een donkere kopbalk verwacht. Op
   een transparante achtergrond is die kop dan onzichtbaar — vandaar dat
   hier elke kleur, uitlijning en rand expliciet staat.                  */

.dd-grafiek__tabel { margin-top: 14px; font-size: 13px; }

.dd-grafiek__tabel summary {
    cursor: pointer;
    color: var(--dd-muted);
    font-weight: 600;
}

.dd-grafiek__tabel summary::marker { color: var(--dd-border); }

.dd-catalog .dd-grafiek__cijfers {
    width: auto;
    min-width: min(100%, 420px);
    margin: 12px 0 0;
    border: 1px solid var(--dd-border);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13px;
}

.dd-catalog .dd-grafiek__cijfers caption {
    caption-side: bottom;
    padding: 8px 2px 0;
    color: var(--dd-muted);
    font-size: 12px;
    text-align: left;
}

.dd-catalog .dd-grafiek__cijfers thead th {
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--dd-border);
    background: #f6f7f9;
    color: #50575e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.dd-catalog .dd-grafiek__cijfers tbody th,
.dd-catalog .dd-grafiek__cijfers tbody td {
    padding: 7px 14px;
    border: 0;
    border-top: 1px solid #f0f1f3;
    background: transparent;
    color: #2c3338;
    text-align: left;
    white-space: nowrap;
}

.dd-catalog .dd-grafiek__cijfers tbody tr:first-child th,
.dd-catalog .dd-grafiek__cijfers tbody tr:first-child td { border-top: 0; }

.dd-catalog .dd-grafiek__cijfers tbody th {
    font-weight: 600;
    text-transform: capitalize;
}

.dd-catalog .dd-grafiek__cijfers tbody tr:hover th,
.dd-catalog .dd-grafiek__cijfers tbody tr:hover td { background: #fafbfc; }

.dd-catalog .dd-grafiek__cijfers .dd-grafiek__getal {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dd-catalog .dd-grafiek__cijfers td.dd-grafiek__getal--laag { font-weight: 700; color: #15803d; }
.dd-catalog .dd-grafiek__cijfers td.dd-grafiek__getal--zacht { color: var(--dd-muted); }

/* Op een aanraakscherm is slepen om te zoomen onhandig naast scrollen;
   daar doen de periodeknoppen het werk.                                */
@media (hover: none) {
    .dd-grafiek__hint { display: none; }
    .dd-grafiek__canvas { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
    .dd-grafiek__knop { transition: none; }
}


.dd-chart { margin-top: 30px; }

.dd-chart__intro { margin: 0 0 10px; font-size: 13px; color: var(--dd-muted); }

.dd-chart__canvas {
    position: relative;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    padding: 8px;
}

.dd-chart__canvas svg { display: block; width: 100%; height: 210px; }

.dd-chart__tip {
    position: absolute;
    top: 6px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #1d2327;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.dd-chart__now { margin: 10px 0 0; font-size: 14px; }

.dd-chart__flag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

.dd-chart__flag--good { background: #15803d; color: #fff; }

.dd-chart__pending {
    margin: 26px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--dd-border);
    border-radius: var(--dd-radius);
    font-size: 13px;
    color: var(--dd-muted);
}

.dd-chart__table { margin-top: 10px; font-size: 13px; }
.dd-chart__table summary { cursor: pointer; color: var(--dd-muted); }
.dd-catalog .dd-chart__table table { width: auto; margin-top: 8px; border-collapse: collapse; }
.dd-catalog .dd-chart__table th,
.dd-catalog .dd-chart__table td {
    padding: 5px 14px 5px 0;
    border: 0;
    border-bottom: 1px solid var(--dd-border);
    text-align: left;
    background: transparent;
}

/* =====================================================================
   Kortingslabel — definitief binnen de kaart.

   Het label stond nog met een negatieve marge over de rand van de foto.
   De kaart knipt af bij de afgeronde hoek, dus je zag alleen "-2" in
   plaats van "-25%". Deze regel wint van alle eerdere varianten en geldt
   voor beide weergaven, ook in het blok met verwante producten.
   ===================================================================== */

.dd-catalog .dd-card .dd-card__media { position: relative; }

.dd-catalog .dd-grid .dd-card .dd-card__badge,
.dd-catalog .dd-grid[data-view="list"] .dd-card .dd-card__badge,
.dd-catalog .dd-grid[data-view="grid"] .dd-card .dd-card__badge {
    position: absolute;
    inset: auto 6px auto auto;   /* boven-rechts, altijd binnen de foto */
    top: 6px;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    max-width: calc(100% - 12px);
    white-space: nowrap;
    text-decoration: none;
    z-index: 3;
}

.dd-catalog .dd-grid[data-view="list"] .dd-card .dd-card__badge {
    top: 4px;
    right: 4px;
    font-size: 10px;
    padding: 2px 5px;
}

/* =====================================================================
   Prijsoverzicht bij zweven — mag nergens tegen een rand lopen.

   De lijst had overflow:hidden voor zijn afgeronde hoeken, en knipte
   daardoor het overzicht af. De hoeken zetten we nu op de eerste en
   laatste rij zelf, zodat het overzicht vrij over de volgende rij heen
   mag hangen. De rij waar je op staat komt bovenaan te liggen.
   ===================================================================== */

.dd-catalog .dd-grid,
.dd-catalog .dd-grid[data-view="list"],
.dd-catalog .dd-grid .dd-card,
.dd-catalog .dd-grid .dd-card__pricing {
    overflow: visible;
}

.dd-catalog .dd-grid[data-view="list"] .dd-card:first-child {
    border-top-left-radius: var(--dd-radius);
    border-top-right-radius: var(--dd-radius);
}

.dd-catalog .dd-grid[data-view="list"] .dd-card:last-child {
    border-bottom-left-radius: var(--dd-radius);
    border-bottom-right-radius: var(--dd-radius);
}

/* De foto blijft wél netjes binnen zijn kader. */
.dd-catalog .dd-card__media img { border-radius: 6px; }

/* Stapelvolgorde: zonder dit verdwijnt het overzicht onder de rij eronder. */
.dd-catalog .dd-grid .dd-card { position: relative; z-index: 0; }

.dd-catalog .dd-grid .dd-card:hover,
.dd-catalog .dd-grid .dd-card:focus-within {
    z-index: 60;
}

.dd-catalog .dd-card__pricing { position: relative; }

.dd-catalog .dd-pop {
    z-index: 80;
    /* Bij de onderste rijen naar boven klappen kan niet met CSS alleen;
       daarom is het overzicht compact genoeg om altijd te passen. */
    max-height: 320px;
    overflow-y: auto;
}

/* =====================================================================
   De echte oorzaak van het uitbrekende label én de te brede foto.

   .dd-card__media heeft padding en breedte 100%. Zonder border-box telt
   die padding erbij op, dus werd het kader 28px breder dan de kaart. De
   foto stak eruit en het kortinglabel — dat rechts van dát kader hangt —
   dus ook. Met overflow:hidden op de kaart zag je dat niet; sinds het
   prijsoverzicht eruit mag hangen, wél.

   Eén regel lost beide op: binnen de catalogus telt padding mee in de
   breedte, zoals overal elders op het web gebruikelijk is.
   ===================================================================== */

.dd-catalog,
.dd-catalog *,
.dd-catalog *::before,
.dd-catalog *::after {
    box-sizing: border-box;
}

/* De foto blijft hoe dan ook binnen zijn kader. */
.dd-catalog .dd-card__media {
    overflow: hidden;
    border-radius: var(--dd-radius) var(--dd-radius) 0 0;
}

.dd-catalog .dd-grid[data-view="list"] .dd-card__media {
    border-radius: 6px;
}

.dd-catalog .dd-card__media img {
    max-width: 100%;
    max-height: 100%;
}

/* =====================================================================
   Merkfilter — aanvinken en de lijst ververst zichzelf.
   ===================================================================== */

.dd-catalog .dd-filters__group--brands { position: relative; }

.dd-catalog .dd-brandsearch {
    width: 100%;
    margin-bottom: 7px;
    padding: 6px 9px;
    font-size: 13px;
    border: 1px solid var(--dd-border);
    border-radius: 6px;
}

.dd-catalog .dd-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 232px;
    overflow-y: auto;
}

.dd-catalog .dd-checklist__item.is-extra { display: none; }
.dd-catalog .dd-filters__group--brands.is-open .dd-checklist__item.is-extra { display: block; }

.dd-catalog .dd-checklist__item label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    border-radius: 5px;
}

.dd-catalog .dd-checklist__item label:hover { background: var(--dd-bg-soft); }

.dd-catalog .dd-checklist__item input { margin: 0; }

.dd-catalog .dd-checklist__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-catalog .dd-checklist__count {
    font-size: 12px;
    color: var(--dd-muted);
    font-variant-numeric: tabular-nums;
}

.dd-catalog .dd-checklist__more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dd-accent);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

/* Verversen: even rustig laten zien dat er iets gebeurt, zonder gespring. */
.dd-catalog.is-loading .dd-main {
    opacity: .55;
    transition: opacity .12s ease;
    pointer-events: none;
}

/* Zonder JavaScript blijft de knop "Toon resultaten" nodig; mét JavaScript
   is hij overbodig omdat elke wijziging meteen doorwerkt. */
.dd-catalog .dd-filters__submit { margin-top: 4px; }

/* =====================================================================
   Productgalerij: grote foto met pijltjes, miniaturen eronder, lightbox.
   ===================================================================== */

.dd-product .dd-gallery__stage {
    position: relative;
    background: #fff;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-product .dd-gallery__main {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    padding: 10px;
}

.dd-product .dd-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dd-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    font-size: 22px;
    line-height: 1;
    color: var(--dd-text);
    cursor: pointer;
    padding: 0 0 3px;
}

.dd-product .has-gallery .dd-gallery__nav { display: flex; }
.dd-product .dd-gallery__nav:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.dd-product .dd-gallery__nav--prev { left: 8px; }
.dd-product .dd-gallery__nav--next { right: 8px; }

.dd-product .dd-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.dd-product .dd-gallery__thumb {
    padding: 3px;
    border: 1px solid var(--dd-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.dd-product .dd-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.dd-product .dd-gallery__thumb.is-active {
    border-color: var(--dd-accent);
    box-shadow: 0 0 0 1px var(--dd-accent);
}

/* ------------------------------------------------------------ Lightbox */

body.dd-noscroll { overflow: hidden; }

.dd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(17, 24, 39, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dd-lightbox__dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: min(1180px, 100%);
    height: min(780px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.dd-lightbox--simple .dd-lightbox__dialog { grid-template-columns: minmax(0, 1fr); }

.dd-lightbox__bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.dd-lightbox__count {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dd-lightbox__close {
    width: 40px;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.dd-lightbox__close:hover { background: #f3f4f6; }

.dd-lightbox__media {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    min-width: 0;
}

.dd-lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 18px 64px;
}

.dd-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.dd-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.dd-lightbox__nav--prev { left: 12px; }
.dd-lightbox__nav--next { right: 12px; }
.dd-lightbox__nav:hover { background: #f3f4f6; }

.dd-lightbox__thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.dd-lightbox__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 56px;
    padding: 3px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.dd-lightbox__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dd-lightbox__thumb.is-active { border-color: var(--dd-accent); }

/* Infokolom */
.dd-lightbox__info {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 20px 22px 24px;
    border-left: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Onderdelen krimpen niet: de kolom scrolt, in plaats van de lijst plat te drukken. */
.dd-lightbox__info > * { flex-shrink: 0; }

.dd-lightbox__brand {
    align-self: flex-start;
    background: #eef2f7;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dd-lightbox__title { margin: 0; font-size: 20px; line-height: 1.25; }
.dd-lightbox__ean { font-size: 12px; color: #6b7280; }

.dd-lightbox__buy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 10px;
    background: #f0fdf4;
}

.dd-lightbox__kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4b5563; }
.dd-lightbox__priceline { display: flex; align-items: center; gap: 10px; }
.dd-lightbox__price { font-size: 30px; font-weight: 800; line-height: 1.1; color: #b91c1c; }
.dd-lightbox__discount { background: #dc2626; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 700; }
.dd-lightbox__old { font-size: 13px; color: #6b7280; text-decoration: line-through; }
.dd-lightbox__saving { font-size: 13px; color: #15803d; }

.dd-lightbox__cta {
    display: block;
    text-align: center;
    background: var(--dd-accent, #ea7a1f);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    padding: 13px 16px;
    margin-top: 4px;
}

.dd-lightbox__cta:hover { filter: brightness(.95); }

.dd-lightbox__verdict {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f4f6;
    font-size: 13px;
}

.dd-lightbox__verdict--lowest-ever,
.dd-lightbox__verdict--lowest-30,
.dd-lightbox__verdict--below-average { background: #ecfdf5; color: #14532d; }
.dd-lightbox__verdict--above-average { background: #fef3c7; color: #92400e; }

.dd-lightbox__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dd-lightbox__checks li { position: relative; padding-left: 24px; }
.dd-lightbox__checks li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }

.dd-lightbox__sub { margin: 8px 0 0; font-size: 16px; }
.dd-lightbox__offers { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }

.dd-lightbox__offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
}

.dd-lightbox__offer:first-child { border-top: 0; }
.dd-lightbox__offer.is-best { background: #f0fdf4; }
.dd-lightbox__offer-shop { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.dd-lightbox__offer-shop small,
.dd-lightbox__offer-price small { font-size: 11px; color: #6b7280; }
.dd-lightbox__offer-price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; }
.dd-lightbox__tag { align-self: flex-start; width: fit-content; background: #15803d; color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; }

.dd-lightbox__offer-cta {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #111827 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 7px 12px;
}

.dd-lightbox__sticky { display: none; }

/* Telefoon en smalle tablet: één kolom, de hele lightbox scrollt mee. */
@media (max-width: 860px) {
    .dd-lightbox { padding: 0; }

    .dd-lightbox__dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dd-lightbox__bar {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
        padding: 10px 14px;
    }

    .dd-lightbox__stage { height: min(62vw, 380px); padding: 10px 14px; }
    .dd-lightbox__nav { width: 38px; height: 38px; font-size: 22px; }
    .dd-lightbox__nav--prev { left: 6px; }
    .dd-lightbox__nav--next { right: 6px; }
    .dd-lightbox__thumbs { padding: 6px 14px 12px; }
    .dd-lightbox__thumb { width: 60px; height: 48px; }

    .dd-lightbox__info {
        border-left: 0;
        border-top: 1px solid #e5e7eb;
        overflow: visible;
        padding: 16px 14px 96px;
    }

    .dd-lightbox__buy .dd-lightbox__cta { display: none; }

    .dd-lightbox__sticky {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
    }

    .dd-lightbox__sticky-price { font-size: 22px; font-weight: 800; color: #b91c1c; white-space: nowrap; }
    .dd-lightbox__sticky .dd-lightbox__cta { flex: 1; margin-top: 0; padding: 12px 10px; }
}

/* =====================================================================
   Winkelpagina: zelfde opbouw als een categoriepagina, met een kop erboven.
   ===================================================================== */

.dd-shop__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--dd-border);
    margin-bottom: 18px;
}

/* Logo's zijn liggend (3:1), dus ook het vak. */
.dd-shop__logo {
    width: 180px;
    height: 60px;
    box-sizing: content-box;
    object-fit: contain;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    padding: 8px;
    flex: none;
}

.dd-shop__title {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
}

.dd-shop__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
    color: var(--dd-muted);
}

.dd-shop__stats strong { color: var(--dd-text); }

.dd-shop__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
    max-width: 70ch;
}

.dd-shop__text p { margin: 0 0 8px; }

@media (max-width: 640px) {
    .dd-shop__head { gap: 12px; }
    .dd-shop__logo { width: 120px; height: 40px; }
    .dd-shop__title { font-size: 21px; }
}

/* =====================================================================
   Kopafbeelding van een categorie: volledig tonen, niet bijsnijden.

   Je thema zet die afbeelding in een kader van 16:9 met "cover", en dan
   wordt een breed logo (Philips is 1728 bij 345) tot een fragment
   uitvergroot. Voor een fotobanner klopt dat, voor een logo of een
   productfoto niet — en dat zijn precies de afbeeldingen die hier staan.

   Hier staat wél !important, en dat is met opzet: de afbeelding krijgt van
   het blok een inline stijl mee (object-fit: cover; aspect-ratio: 16/9), en
   een inline stijl wint van elke gewone regel. Dit is de enige manier om er
   overheen te gaan zonder dat blok zelf aan te passen.
   ===================================================================== */

.ct-dynamic-media.category-img,
.category-img {
    background: #fff;
}

.ct-dynamic-media.category-img img[src],
.category-img img[src] {
    object-fit: contain !important;
    padding: 6px;
}

/* =====================================================================
   Winkelpagina even breed als een categoriepagina.

   Daar zorgt de blokindeling van je thema voor een maximum van 1290px met
   automatische marges. Een winkelpagina heeft die indeling niet, dus doen
   we hier hetzelfde. Wijzig je de breedte in je thema, dan zet je die hier
   één keer in de variabele — de rest volgt.
   ===================================================================== */

.dd-shop-page {
    --dd-page-width: 1290px;
}

.dd-shop-page .dd-catalog {
    max-width: var(--dd-page-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1360px) {
    .dd-shop-page .dd-catalog {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Merkpagina: doorverwijzingen naar je eigen "merk + categorie"-pagina's. */
.dd-brand__pages {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--dd-muted);
}

.dd-brand__pages a { color: var(--dd-accent); }

/* =====================================================================
   Merkenoverzicht (/merk/), zelfde tegels als je winkeloverzicht.
   ===================================================================== */

.dd-brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 4px 0 24px;
}

.dd-brands__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;
    text-decoration: none;
    color: var(--dd-text);
    transition: box-shadow .18s ease, transform .18s ease;
}

.dd-brands__item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.dd-brands__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 74px;
    flex: none;   /* vaste hoogte: een later toegevoegd beeld verschuift niets */
}

.dd-brands__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dd-brands__letter {
    font-size: 30px;
    font-weight: 800;
    color: var(--dd-muted);
}

.dd-brands__name {
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    line-height: 1.25;
}

.dd-brands__count {
    font-size: 12px;
    color: var(--dd-muted);
}

/* =====================================================================
   Productpagina: één oranje knop, de rest rustig.

   Oranje is op deze pagina het signaal "hier klik je". Staat dat op vijf
   plekken tegelijk, dan betekent het niets meer. Alleen de grote knop bij
   de beste prijs en de balk onderaan op mobiel blijven oranje; de knoppen
   in de winkellijst worden een rustige omlijning die pas invult als je
   erover gaat.
   ===================================================================== */

/* Eén oranje knop per pagina — de rest is grijs.
   
   Oranje is hier het signaal "hier klik je". De knoppen in de winkellijst
   staan nu in een rustig grijs met donkere tekst: nog altijd duidelijk een
   knop, maar je oog gaat eerst naar de grote knop bij de beste prijs.

   Met !important, en dat is bewust: er staan hierboven al regels die van je
   thema moesten winnen (a.dd-btn:link met witte tekst), en die zouden hier
   weer de bovenhand krijgen. Dit is het enige punt in het bestand waar de
   kleur van een knop bewust omgekeerd wordt. */

.dd-product .dd-offers-list a.dd-btn,
.dd-product .dd-offers-list a.dd-btn:link,
.dd-product .dd-offers-list a.dd-btn:visited {
    background: #f1f2f4 !important;
    color: #1d2327 !important;
    border: 1px solid #dcdfe3 !important;
    font-weight: 600;
    box-shadow: none !important;
}

.dd-product .dd-offers-list a.dd-btn:hover,
.dd-product .dd-offers-list a.dd-btn:focus,
.dd-product .dd-offers-list a.dd-btn:focus-visible {
    background: #e4e6ea !important;
    border-color: #c9ced6 !important;
    color: #1d2327 !important;
}

/* De goedkoopste rij mag iets steviger ogen dan de rest — nog steeds grijs. */
.dd-product .dd-offers-list li:first-child a.dd-btn,
.dd-product .dd-offers-list li.is-best a.dd-btn {
    border-color: #b7bec7 !important;
}

/* Het merk onder de titel is een link, maar geen blikvanger. */
.dd-product .dd-product__meta a,
.dd-product .dd-product__meta a:link,
.dd-product .dd-product__meta a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--dd-border);
}

.dd-product .dd-product__meta a:hover {
    border-bottom-color: var(--dd-text);
}

/* Merklinks voor in de voettekst. */
.dd-brandlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.dd-brandlinks__link,
.dd-brandlinks__all {
    color: inherit;
    text-decoration: none;
    opacity: .85;
}

.dd-brandlinks__link:hover,
.dd-brandlinks__all:hover { opacity: 1; text-decoration: underline; }

.dd-brandlinks__all { font-weight: 700; }

/* Zoekveld boven het merkenoverzicht. */
.dd-brandsearch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.dd-brandfilter {
    flex: 1 1 auto;
    max-width: 340px;
    padding: 9px 12px;
    font-size: 15px;
    border: 1px solid var(--dd-border);
    border-radius: 8px;
    background: #fff;
}

.dd-brandfilter:focus {
    outline: 2px solid var(--dd-accent);
    outline-offset: 1px;
}

.dd-brandfilter__count {
    font-size: 13px;
    color: var(--dd-muted);
    font-variant-numeric: tabular-nums;
}

.dd-brands__none { margin-top: 4px; }


/* =====================================================================
   Verbergen moet ook echt verbergen.

   Een element met display:flex of display:grid negeert het hidden-attribuut,
   want die display-regel wint. Daardoor bleef het merkenoverzicht alles tonen
   terwijl je aan het typen was.
   ===================================================================== */

.dd-brands__item[hidden],
.dd-catalog [hidden],
.dd-brands__none[hidden] {
    display: none !important;
}

/* =====================================================================
 * Zoeken met suggesties
 * ================================================================== */
.dd-search { position: relative; max-width: 620px; text-align: left; }
.dd-search__field { display: flex; gap: 8px; }
.dd-search__input {
    flex: 1; min-width: 0; padding: 13px 16px; font-size: 16px;
    border: 1px solid #d5d8dc; border-radius: 10px; background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.dd-search__input:focus {
    outline: none; border-color: #e8590c;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
}
.dd-search__btn {
    padding: 13px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
    border: 0; border-radius: 10px; background: #e8590c; color: #fff;
}
.dd-search__btn:hover { background: #d24f06; }

/* De suggesties lezen als een lijst: altijd links uitgelijnd, ook als het
   blok eromheen gecentreerd staat. */
.dd-search__panel, .dd-search__panel * { text-align: left; }
.dd-search__panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 68vh; overflow-y: auto;
    background: #fff; border: 1px solid #e4e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    padding: 6px;
}
.dd-search__panel[hidden] { display: none !important; }

.dd-search__group { padding: 4px 0; }
.dd-search__group + .dd-search__group { border-top: 1px solid #f0f2f4; }
.dd-search__kop {
    display: block; padding: 8px 10px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #8a9099;
}

.dd-search__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: #23272b;
}
.dd-search__item:hover, .dd-search__item:focus { background: #f6f7f9; outline: none; }
.dd-search__item--plat { justify-content: space-between; }

.dd-search__thumb {
    width: 44px; height: 44px; flex: 0 0 44px;
    object-fit: contain; background: #fff;
    border: 1px solid #eef0f2; border-radius: 6px;
}
.dd-search__thumb--leeg { background: #f2f4f6; }

.dd-search__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dd-search__label {
    font-size: 14px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-search__meta { font-size: 12px; color: #6b7178; margin-top: 2px; }
.dd-search__count { font-size: 12px; color: #8a9099; }

.dd-search__badge {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 4px;
    background: #d63638; color: #fff; font-size: 12px; font-weight: 700;
}

.dd-search__alles {
    display: block; margin-top: 4px; padding: 10px;
    text-align: center; font-size: 13px; font-weight: 600;
    color: #e8590c; text-decoration: none; border-radius: 8px;
}
.dd-search__alles:hover, .dd-search__alles:focus { background: #fff4ed; outline: none; }
.dd-search__leeg { margin: 0; padding: 16px; text-align: center; color: #6b7178; font-size: 14px; }

@media (max-width: 600px) {
    .dd-search__btn { padding: 13px 16px; }
    .dd-search__thumb { width: 38px; height: 38px; flex-basis: 38px; }
}

/* =====================================================================
 * Prijsalert
 * ================================================================== */
.dd-alert { position: relative; margin: 22px 0 6px; }
.dd-alert__bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid #e4e7eb; border-radius: 10px;
    background: #fbfcfd;
}
.dd-alert__vraag { font-size: 15px; color: #33383d; }
.dd-alert__toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid #d5d8dc; border-radius: 8px; background: #fff; color: #23272b;
}
.dd-alert__toggle:hover { border-color: #b9bec4; background: #f6f7f9; }

.dd-alert__panel {
    position: relative; margin-top: 10px; padding: 16px 18px;
    border: 1px solid #e4e7eb; border-radius: 10px; background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}
.dd-alert__panel[hidden] { display: none !important; }
.dd-alert__intro { margin: 0 0 12px; font-size: 14px; color: #33383d; }

/* Volgorde die klopt met wat je doet: bedrag, adres, keuze, pas dan de knop.
   De knop staat als laatste, zodat je er niet op duwt voor je klaar bent. */
.dd-alert__form {
    display: grid; gap: 12px 14px;
    grid-template-columns: 150px minmax(220px, 1fr);
    align-items: end;
}
.dd-alert__veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #5b6169; }
.dd-alert__veld--breed { grid-column: 2; }
.dd-alert__nieuwsbrief { grid-column: 1 / -1; }
.dd-alert__submit { grid-column: 1 / -1; justify-self: start; }
.dd-alert__veld input {
    padding: 9px 11px; font-size: 15px;
    border: 1px solid #d5d8dc; border-radius: 7px; background: #fff;
}
.dd-alert__veld input[type="number"] { width: 100%; }
.dd-alert__submit {
    padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 0; border-radius: 7px; background: #e8590c; color: #fff;
}
.dd-alert__submit:hover { background: #d24f06; }
.dd-alert__submit[disabled] { opacity: .6; cursor: default; }

.dd-alert__message { margin: 10px 0 0; font-size: 14px; }
.dd-alert__message.is-ok { color: #008a20; }
.dd-alert__message.is-fout { color: #d63638; }
.dd-alert__klein { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #767c84; }

.dd-alert__sluit {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: #8a9099;
}
.dd-alert__sluit:hover { color: #23272b; }

.dd-alert-notice {
    margin: 0 0 16px; padding: 12px 14px; border-radius: 8px;
    font-size: 14px; background: #eef6ee; border: 1px solid #cfe6cf; color: #1f5c2e;
}
.dd-alert-notice--info { background: #eef2f7; border-color: #d5dee9; color: #234; }

@media (max-width: 600px) {
    .dd-alert__form { grid-template-columns: 1fr; }
    .dd-alert__veld--breed { grid-column: 1; }
    .dd-alert__submit { justify-self: stretch; text-align: center; }
}

/* =====================================================================
 * Productaanvraag
 * ================================================================== */
.dd-request {
    margin: 26px 0; padding: 20px 22px;
    border: 1px solid #e4e7eb; border-radius: 12px; background: #fbfcfd;
    text-align: left;
}
.dd-request__titel { margin: 0 0 6px; font-size: 19px; }
.dd-request__tekst { margin: 0 0 14px; font-size: 14px; color: #5b6169; max-width: 62ch; }
.dd-request__form {
    display: grid; gap: 12px 14px;
    grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr);
    align-items: end;
}
.dd-request__nieuwsbrief { grid-column: 1 / -1; }
.dd-request__submit { grid-column: 1 / -1; justify-self: start; }
.dd-request__veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #5b6169; }
.dd-request__veld em { font-style: normal; color: #a0a6ad; }
.dd-request__veld--breed { grid-column: 1 / -1; }
.dd-request__veld input {
    padding: 10px 12px; font-size: 15px;
    border: 1px solid #d5d8dc; border-radius: 8px; background: #fff;
}
.dd-request__veld input:focus {
    outline: none; border-color: #e8590c; box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
}
.dd-request__submit {
    padding: 11px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
    border: 0; border-radius: 8px; background: #e8590c; color: #fff;
}
.dd-request__submit:hover { background: #d24f06; }
.dd-request__submit[disabled] { opacity: .6; cursor: default; }
.dd-request__message { margin: 12px 0 0; font-size: 14px; }
.dd-request__message.is-ok { color: #008a20; }
.dd-request__message.is-fout { color: #d63638; }
.dd-request__klein { margin: 10px 0 0; font-size: 12px; color: #767c84; }

@media (max-width: 600px) {
    .dd-request__form { grid-template-columns: 1fr; }
    .dd-request__submit { justify-self: stretch; text-align: center; }
}

/* =====================================================================
 * Specificatietabel
 * ================================================================== */
.dd-product__specs { margin-top: 30px; }
.dd-specs {
    width: 100%; max-width: 720px; border-collapse: collapse;
    font-size: 14px; line-height: 1.5;
}
.dd-specs tr { border-bottom: 1px solid #eef0f2; }
.dd-specs tr:nth-child(odd) { background: #fbfcfd; }
.dd-specs th {
    width: 38%; padding: 9px 12px; text-align: left;
    font-weight: 600; color: #5b6169; vertical-align: top;
}
.dd-specs td { padding: 9px 12px; color: #23272b; }

@media (max-width: 600px) {
    .dd-specs th { width: 45%; padding: 8px 10px; }
    .dd-specs td { padding: 8px 10px; }
}

/* Nieuwsbriefvinkje bij de alert en de aanvraag */
.dd-alert__nieuwsbrief, .dd-request__nieuwsbrief {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid #e4e7eb; border-radius: 8px;
    background: #fbfcfd; font-size: 13px; line-height: 1.45;
    color: #4a4f55; cursor: pointer;
}
.dd-alert__nieuwsbrief:hover, .dd-request__nieuwsbrief:hover { border-color: #cfd4d9; }
.dd-alert__nieuwsbrief input, .dd-request__nieuwsbrief input {
    flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; cursor: pointer;
}

/* Korte verwijzing naar de aanvraagpagina */
.dd-request-line {
    margin: 14px 0; font-size: 14px; color: #6b7178;
}
.dd-request-line a { color: #e8590c; text-decoration: underline; }
.dd-request-line a:hover { color: #d24f06; }

/* =====================================================================
 * Prijsdalingen
 * ================================================================== */
.dd-drops__intro { margin: 0 0 16px; font-size: 15px; color: #5b6169; }
.dd-drops { list-style: none; margin: 0; padding: 0; border: 1px solid #e4e7eb; border-radius: 12px; overflow: hidden; }
.dd-drops__item + .dd-drops__item { border-top: 1px solid #eef0f2; }
.dd-drops__link {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; text-decoration: none; color: #23272b; background: #fff;
}
.dd-drops__link:hover { background: #fbfcfd; }
.dd-drops__img {
    width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain;
    border: 1px solid #eef0f2; border-radius: 8px; background: #fff;
}
.dd-drops__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dd-drops__titel { font-size: 15px; line-height: 1.35; }
.dd-drops__meta { font-size: 12px; color: #767c84; }
.dd-drops__prijs { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; }
.dd-drops__was { font-size: 12px; color: #8a9099; text-decoration: line-through; }
.dd-drops__nu { font-size: 17px; font-weight: 700; }
.dd-drops__badge {
    flex: 0 0 auto; padding: 4px 9px; border-radius: 6px;
    background: #d63638; color: #fff; font-size: 13px; font-weight: 700;
}
@media (max-width: 600px) {
    .dd-drops__link { flex-wrap: wrap; gap: 10px; }
    .dd-drops__body { flex: 1 1 100%; order: 2; }
    .dd-drops__prijs { order: 3; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
    .dd-drops__badge { order: 4; }
}

/* =====================================================================
 * Categorie-overzicht op /c/
 * ================================================================== */
.dd-catindex {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.dd-catindex__blok {
    padding: 0 0 16px; background: #fff; overflow: hidden;
    border: 1px solid #e4e7eb; border-radius: 12px;
}
.dd-catindex__blok > *:not(.dd-catindex__foto) { padding-left: 18px; padding-right: 18px; }

/* De uitgelichte afbeelding van de hoofdcategorie, bovenaan het blok. */
.dd-catindex__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f6f7f9; }
.dd-catindex__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.dd-catindex__blok:hover .dd-catindex__foto img { transform: scale(1.03); }
.dd-catindex__titel { margin: 14px 0 10px; font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.dd-catindex__titel a { text-decoration: none; color: #23272b; }
.dd-catindex__titel a:hover { color: #e8590c; }
.dd-catindex__lijst { list-style: none; margin: 0; padding: 0; }
.dd-catindex__lijst li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 5px 0; border-top: 1px solid #f2f4f6; font-size: 14px;
}
.dd-catindex__lijst a { text-decoration: none; color: #33383d; }
.dd-catindex__lijst a:hover { color: #e8590c; text-decoration: underline; }
.dd-catindex__aantal { font-size: 12px; color: #8a9099; }
.dd-catindex__meer { font-size: 13px; color: #e8590c; }

/* Populaire categorieën (tegels) */
.dd-poptiles {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.dd-poptile {
    display: flex; flex-direction: column;
    text-decoration: none; color: #23272b;
    background: #fff; border: 1px solid #e4e7eb; border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dd-poptile:hover {
    border-color: #e8590c; transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* De foto zit tegen de hoekjes aan: volle breedte, bovenaan, vaste verhouding. */
.dd-poptile__media {
    display: block; width: 100%; aspect-ratio: 16 / 10;
    background: #f3f4f6; overflow: hidden;
}
.dd-poptile__media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.dd-poptile__naam {
    display: block; padding: 10px 10px 12px;
    font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3;
}

@media (max-width: 600px) {
    .dd-poptiles { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .dd-poptile__naam { padding: 8px 8px 10px; font-size: 13px; }
}


/* ---------------------------------------------------------------------
 * De kop van een categoriepagina: foto links, tekst rechts.
 *
 * Geen kader rond het geheel — alleen de foto krijgt dezelfde afgeronde
 * hoeken als de tegels eronder, zodat de pagina één geheel wordt.
 * ------------------------------------------------------------------ */

.tax-artikel-categorie .entry-content > .wp-block-columns:first-of-type {
    align-items: center;
    gap: 32px;
    margin-bottom: 28px;
}

.tax-artikel-categorie figure.ct-dynamic-media.category-img,
.tax-artikel-categorie figure.category-img {
    margin: 0;
    line-height: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

/* Belangrijk: de foto moet het kader helemaal vullen.
 *
 * Met object-fit: contain (en een randje padding) staat de foto als een
 * postzegel in het kader: de afgeronde hoeken zitten dan om lege ruimte
 * heen, terwijl de foto zelf zijn eigen vierkante hoeken houdt. Je ziet
 * dus niets van die afronding. Met cover valt de foto samen met het
 * kader en worden de hoeken écht rond. */
.tax-artikel-categorie figure.ct-dynamic-media.category-img img,
.tax-artikel-categorie figure.category-img img,
.tax-artikel-categorie figure.ct-dynamic-media.category-img img[src],
.tax-artikel-categorie figure.category-img img[src] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 22px;
}

@media (max-width: 800px) {
    .tax-artikel-categorie .entry-content > .wp-block-columns:first-of-type {
        gap: 18px;
        margin-bottom: 20px;
    }
    .tax-artikel-categorie figure.ct-dynamic-media.category-img,
    .tax-artikel-categorie figure.category-img,
    .tax-artikel-categorie figure.ct-dynamic-media.category-img img,
    .tax-artikel-categorie figure.category-img img {
        border-radius: 16px;
    }
}


/* Veelgestelde vragen op de productpagina. Alles staat open: de tekst moet
   gelezen kunnen worden zonder eerst te klikken. */
.dd-faq { display: grid; gap: 16px; }
.dd-faq__item { padding: 0; }
.dd-faq__vraag {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #23272b;
}
.dd-faq__antwoord {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5057;
}

@media (max-width: 600px) {
    .dd-faq { gap: 14px; }
    .dd-faq__vraag { font-size: 15px; }
}


/* ---------------------------------------------------------------------
 * Galerij op een klein scherm.
 *
 * Een vierkante foto van schermbreedte duwt de prijs en de knop onder de
 * vouw. Coolblue lost dat op met een lagere fotokader en een rij kleine
 * miniaturen; dat doen we hier ook.
 * ------------------------------------------------------------------ */

@media (max-width: 720px) {
    .dd-product .dd-gallery__stage {
        aspect-ratio: auto;
        height: 42vh;
        max-height: 340px;
        min-height: 220px;
    }

    .dd-product .dd-gallery__main { padding: 6px; }

    .dd-product .dd-gallery__nav {
        width: 30px;
        height: 30px;
        font-size: 19px;
    }

    /* Miniaturen naast elkaar, horizontaal scrollbaar in plaats van een
       raster dat drie rijen hoog wordt. */
    .dd-product .dd-gallery__thumbs {
        display: flex;
        gap: 6px;
        margin-top: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dd-product .dd-gallery__thumbs::-webkit-scrollbar { display: none; }

    .dd-product .dd-gallery__thumb {
        flex: 0 0 48px;
        width: 48px;
    }
}


/* Plus- en minpunten. */
.dd-pros { display: grid; gap: 8px 28px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .dd-pros { grid-template-columns: 1fr 1fr; } }
.dd-pros__lijst { margin: 0; padding: 0; list-style: none; }
.dd-pros__lijst li {
    position: relative; padding: 4px 0 4px 26px;
    font-size: 14px; line-height: 1.5; color: #33383d;
}
.dd-pros__lijst li::before {
    position: absolute; left: 0; top: 3px;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    border-radius: 50%; font-size: 12px; font-weight: 700;
}
.dd-pros__lijst--plus li::before { content: "+"; background: #e6f4ea; color: #1d7a3e; }
.dd-pros__lijst--min li::before { content: "\2212"; background: #fdeceb; color: #b32d2e; }
.dd-pros__uitleg { margin: 12px 0 0; font-size: 12px; color: #8a9099; }

/* Varianten van hetzelfde model. */
.dd-varianten { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dd-varianten a {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px; border: 1px solid #e4e7eb; border-radius: 999px;
    text-decoration: none; color: #23272b; font-size: 14px;
    transition: border-color .15s ease;
}
.dd-varianten a:hover { border-color: #e8590c; }
.dd-varianten__naam { font-weight: 600; }
.dd-varianten__prijs { color: #767c84; font-size: 13px; }


/* Levertijd en verzendkosten per winkel: informatie, geen blikvanger. */
.dd-offer__levering {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 8px;
    background: #f1f3f5;
    color: #5c626a;
    font-size: 12px;
    white-space: nowrap;
}


/* Beoordelingen. */
.dd-rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dd-rating__cijfer { font-size: 30px; font-weight: 700; color: #23272b; line-height: 1; }
.dd-rating__op { font-size: 15px; color: #8a9099; }
.dd-rating__bron { margin-left: 8px; font-size: 13px; color: #767c84; }
.dd-rating__winkels { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dd-rating__winkels li { font-size: 13px; color: #4a5057; }
.dd-rating__winkels span { color: #8a9099; }

.dd-reviews { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 14px; }
.dd-reviews__item { padding: 14px 16px; border: 1px solid #e4e7eb; border-radius: 12px; background: #fff; }
.dd-reviews__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dd-reviews__score {
    padding: 1px 9px; border-radius: 9px; background: #e6f4ea; color: #1d7a3e;
    font-size: 12px; font-weight: 700;
}
.dd-reviews__tekst { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #33383d; }
.dd-reviews__van { margin: 0; font-size: 12px; color: #8a9099; }

.dd-review__form { margin-top: 6px; }
.dd-review__form > summary {
    cursor: pointer; font-size: 14px; font-weight: 600; color: #e8590c;
    list-style: none; padding: 8px 0;
}
.dd-review__form > summary::-webkit-details-marker { display: none; }
.dd-review__form form { margin-top: 10px; max-width: 620px; }
.dd-review__form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #4a5057; }
.dd-review__form input[type="text"],
.dd-review__form input[type="email"],
.dd-review__form textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #d5d9de; border-radius: 9px;
    font-size: 14px; font-family: inherit;
}
.dd-review__sterren { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.dd-review__sterren label { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; margin: 0; }
.dd-review__rij { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .dd-review__rij { grid-template-columns: 1fr 1fr; } }
.dd-review__klein { margin-left: 10px; font-size: 12px; color: #8a9099; }
.dd-review__melding {
    padding: 10px 14px; border-radius: 10px; background: #e6f4ea; color: #1d7a3e;
    font-size: 14px; margin: 0 0 14px;
}
.dd-review__melding.is-fout { background: #fdeceb; color: #b32d2e; }


/* Filterblok met specificaties. */
.dd-facets { display: grid; gap: 20px; }
.dd-facet__titel { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #23272b; }
.dd-facet__lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dd-facet__lijst label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #33383d; cursor: pointer;
}
.dd-facet__aantal { margin-left: auto; font-size: 12px; color: #8a9099; }
.dd-facet__toggle {
    margin-top: 6px; padding: 0; border: 0; background: none;
    color: #e8590c; font-size: 13px; cursor: pointer;
}
.dd-facets__wissen { margin: 0; font-size: 13px; }

/* =====================================================================
 * Vergelijken
 *
 * Het vinkje op de productkaart en de balk die onderaan verschijnt zodra je
 * er één aanvinkt. Staan hier en niet inline, want ze horen op élke pagina
 * waar productkaarten getoond worden. De opmaak van de vergelijkpagina zelf
 * staat in DD_Compare::css() — die wordt maar op één adres geladen.
 * ================================================================== */

.dd-card { position: relative; }

/* Het vinkje staat in de actiebalk naast de knop, niet meer over de foto.
   Daar botste het op de kortingsbadge en op de titel in lijstweergave, en
   verscheen het bovendien pas bij zweven — waardoor niemand wist dat
   vergelijken bestond. */
.dd-card__vergelijk {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 8px;
    background: #fff; border: 1px solid var(--dd-border);
    font-size: 13px; line-height: 1; color: #5b6673;
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.dd-card__vergelijk:hover { border-color: #b9c2cc; color: #1d2327; }
.dd-card__vergelijk input { margin: 0; }

.dd-card__action { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.dd-card__action .dd-btn--deal { flex: 1 1 auto; }

.dd-card.is-vergelijk { box-shadow: 0 0 0 2px #e8590c; }
.dd-card.is-vergelijk .dd-card__vergelijk { border-color: #e8590c; color: #e8590c; }

/* Op de productpagina staat hij onder de titel, als losse knop. */
.dd-product__vergelijk { margin: 0 0 14px; }

.dd-vgbalk {
    position: fixed; z-index: 9000;
    right: 16px; bottom: 16px; left: 16px;
    display: none; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px;
    background: #fff; border: 1px solid var(--dd-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.dd-vgbalk.is-open { display: flex; }

.dd-vgbalk__items { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 1 auto; min-width: 0; }

.dd-vgbalk__chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 230px; padding: 5px 6px 5px 10px;
    border-radius: 999px; background: #f4f6f8;
    font-size: 12px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dd-vgbalk__weg {
    flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
    border: 0; border-radius: 50%; background: #e2e6eb;
    color: #5b6673; font-size: 13px; line-height: 16px; cursor: pointer;
}

.dd-vgbalk__weg:hover { background: #d3d9e0; color: #1d2327; }

.dd-vgbalk__acties { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.dd-vgbalk__wis {
    padding: 0; border: 0; background: none;
    color: #5b6673; font-size: 13px; cursor: pointer; text-decoration: underline;
}

.dd-vgbalk__ga {
    padding: 10px 16px; border-radius: 8px;
    background: #e8590c; color: #fff; font-size: 14px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}

.dd-vgbalk__ga:hover { background: #d24f06; color: #fff; }
.dd-vgbalk__ga.is-uit { background: #cfd5dc; color: #fff; cursor: default; pointer-events: none; }

@media (max-width: 600px) {
    .dd-vgbalk { right: 8px; bottom: 8px; left: 8px; padding: 9px 10px; }
    .dd-vgbalk__chip { max-width: 130px; }
    .dd-vgbalk__acties { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* =====================================================================
   AFBEELDINGSGROOTTE — GROOT WAAR JE KIEST, KLEIN WAAR JE VERGELIJKT

   DE VRAAG
   "Al die e-commerce sites zetten die afbeeldingen op desktop groter. Bij
   ons is de focus natuurlijk ook de prijs? Tweakers zet ze dan wel weer
   kleiner?"

   HET ANTWOORD ZIT NIET IN HET SOORT SITE, MAAR IN DE TAAK
   Een webshop verkoopt ontdekking: je weet nog niet wélke airfryer, dus de
   foto ís het product. Tweakers verkoopt een beslissing: je weet al welke
   kaart je wil en zoekt de laagste prijs. Daar is de foto herkenning, geen
   argument — en elke pixel beeld kost een pixel data.

   Wij doen allebei, maar niet op dezelfde pagina. Vandaar drie maten:

     - Categorierasters  →  groter. Daar wordt gekozen.
     - Productpagina     →  groot, maar één taak: "is dit hetzelfde
                            apparaat dat ik op Google zag?"
     - Vergelijkingen    →  klein. Daar concurreert beeld met het getal
                            waar iemand voor kwam. (Staat al goed: 130px.)
   ===================================================================== */

/*
 * VIERKANT IN PLAATS VAN 4:3
 *
 * Dit is de goedkoopste winst van de drie. Productfoto's van webshops staan
 * vrijwel altijd vierkant op wit; in een 4:3-kader snijden we links en rechts
 * lucht weg en houden we een kleiner product over. Vierkant kost dezelfde
 * kaartbreedte en geeft ongeveer een derde meer productoppervlak.
 *
 * De lijstweergave stond al op 1/1 — die klopte dus al.
 */
.dd-catalog .dd-card__media {
    aspect-ratio: 1 / 1;
    padding: 10px;
}

/*
 * En op mobiel juist niet groter.
 *
 * Op een telefoon staat één kaart per rij en duwt een vierkante foto de prijs
 * onder de vouw. Daar is het scrollen zelf de ontdekking, dus mag het kader
 * platter. Dit is precies de plek waar "doe het overal groter" fout gaat.
 */
@media (max-width: 600px) {
    .dd-catalog .dd-grid:not([data-view="list"]) .dd-card__media {
        aspect-ratio: 4 / 3;
    }
}

/*
 * DE PRODUCTPAGINA
 *
 * 300px was krap voor de enige visuele taak die daar ligt: bevestigen dat dit
 * hetzelfde apparaat is. Coolblue en bol zitten rond de 450-500px. De grens
 * gaat alleen omhoog waar er ook echt ruimte is — onder de 900px blijft hij
 * staan, want daar deelt de foto de hoogte met de prijs.
 */
@media (min-width: 900px) {
    .dd-product__media img { max-height: 460px; }
}

/* =====================================================================
   DE ADVIESPRIJS ALS ZIN

   Twee keer geprobeerd als los doorstreept bedrag naast de prijs, twee keer
   te verwarrend: van welke winkel is dat dan? Nu staat het er als hele zin,
   met de winkelnaam erin — "Nu afgeprijsd bij Bol, eerder kostte dit artikel
   € 142" — en valt er niets meer te koppelen.

   De streep staat op de `del` én op de tekst erin, zodat een browser die de
   streep niet doortrekt naar een inline-blok geen geldig ogende prijs
   overhoudt.
   ===================================================================== */

.dd-catalog .dd-best__was {
    font-size: 13px;
    color: var(--dd-muted);
    max-width: 46ch;
}

.dd-catalog .dd-best__was del {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

/* =====================================================================
   DE FOTOKOLOM OP DE PRODUCTPAGINA — DE ECHTE OORZAAK

   Ik had de max-height van de foto van 300 naar 460 gezet en gezegd dat hij
   daarmee groter zou worden. Dat was hij niet, en terecht: de hoogte was
   nooit de grens. De fotokolom is 280px breed, dus een vierkante productfoto
   wordt hoogstens 280 min de binnenmarge — de max-height komt er niet eens
   aan te pas.

   Wat hier moet gebeuren is dus de kólom breder maken, en alleen op schermen
   die dat kunnen missen. De vergelijkingstabel houdt daaronder nog altijd
   ruim 600px, en dat is meer dan ze nodig heeft.

   De oude opmerking bij die 280px ("een grote foto duwt de prijsvergelijking
   onder de vouw") klopte toen de kolommen onder elkaar stonden. Zodra ze
   naast elkaar staan, duwt een bredere foto niets naar beneden — hij vult
   ruimte die anders leeg blijft.
   ===================================================================== */

@media (min-width: 1000px) {
    .dd-catalog .dd-product__layout {
        grid-template-columns: 380px minmax(0, 1fr);
    }
}

@media (min-width: 1240px) {
    .dd-catalog .dd-product__layout {
        grid-template-columns: 460px minmax(0, 1fr);
        gap: 40px;
    }
}

/*
 * En dan mag de foto die ruimte ook echt vullen. Zonder deze regel houdt
 * `max-height` hem alsnog tegen zodra de kolom breder is dan 460.
 */
@media (min-width: 1000px) {
    .dd-catalog .dd-product__media img { max-height: 440px; }
}

/* =====================================================================
   DE BOLLETJES ONDER DE KAARTFOTO

   Zichtbaar zonder dat je hoeft te ontdekken dat ze er zijn: uit het
   onderzoek naar productrasters blijkt dat aanwijzingen die pas bij zweven
   verschijnen op een aanraakscherm nooit gevonden worden. Ze staan er dus
   altijd, klein en grijs, en worden pas donker als er iets te kiezen valt.
   ===================================================================== */

.dd-catalog .dd-card__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: auto;
}

.dd-catalog .dd-card__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c9ccd0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.dd-catalog .dd-card__dot:hover,
.dd-catalog .dd-card__dot:focus-visible {
    background: #6b7177;
    transform: scale(1.25);
}

.dd-catalog .dd-card__dot.is-active { background: #1d2327; }

/*
 * Op een aanraakscherm mag het doel groter zijn dan het bolletje zelf: een
 * vingertop is ongeveer 9 mm, een bolletje van 7 pixels is dat niet.
 */
@media (hover: none) {
    .dd-catalog .dd-card__dots { gap: 10px; bottom: 4px; }
    .dd-catalog .dd-card__dot { width: 9px; height: 9px; }
}

/* =====================================================================
   DE DRIE VINKJES ONDER ELKAAR

   Ze stonden op één regel met `flex-wrap`, en dat gaat mis zodra de kolom
   smaller wordt: dan breekt er eentje af en krijg je twee vinkjes boven en
   één eronder. Dat leest als een lijstje dat halverwege van gedachten
   verandert.

   Onder elkaar is het een opsomming, en dat is wat het is: drie losse
   geruststellingen die niets met elkaar te maken hebben behalve dat ze alle
   drie waar zijn. Ze staan vlak boven de prijsvergelijking, precies waar
   iemand nog even wil weten of dit klopt voor hij verder kijkt.
   ===================================================================== */

.dd-catalog .dd-trust {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
}

/* Mobiel: lijsten met merken en kenmerken onder hun titel, over de volle
   breedte. In de rij-indeling van hierboven (titel links, veld rechts) bleef
   voor de lijst zelf zo'n 130 pixels over en werden de namen afgekapt tot
   één letter ("S...", "H.."). */
@media (max-width: 899px) {
    .dd-catalog .dd-filters__group--brands {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .dd-catalog .dd-filters__group--brands .dd-filters__label { flex: none; }

    .dd-catalog .dd-filters__group--brands .dd-checklist,
    .dd-catalog .dd-filters__group--brands .dd-brandsearch { width: 100%; flex: none; }

    .dd-catalog .dd-checklist { max-height: 260px; }
}