/* =========================
   NEWS BLOCK (variant)
   ========================= */

/* Basestijl voor news-kaart */
.block-wrap.news-block{
    --news-pad-x: 18px;
    --news-pad-y: 16px;

    background: var(--theme-primary-color);
    color: var(--theme-light);
    padding: 0;
    flex-direction: column;
    overflow: hidden;
}

/* Afbeelding bovenin (edge-to-edge, geen base overlay) */
.block-wrap.news-block > .block-image{
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.block-wrap.news-block > .block-image::before,
.block-wrap.news-block > .block-image::after{ content:none !important; }

.block-wrap.news-block > .block-image .block-icon{
    position: absolute; top:12px; right:12px; z-index:2;
}

/* Content onder image */
.block-wrap.news-block > .block-content{
    position: relative; z-index:2;
    padding: var(--news-pad-y) var(--news-pad-x) calc(var(--news-pad-y) + 2px);
}

/* No-image variant
   — Kies één van de twee: WIT (advies) of BLAUW (zoals je nu had) */

/* (A) WITTE kaart + donkere tekst (meest gebruikelijk) */
.block-wrap.news-block.no-image{
    background:#fff; color:var(--theme-dark);
    border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.block-wrap.news-block.no-image > .block-content{ padding:20px; }
.block-wrap.news-block.no-image .block-title h2{ color:var(--theme-webshop-text); }

/* (B) OF laat ‘m bewust blauw (als je dat écht wilt) */
/* .block-wrap.news-block.no-image{ background:var(--theme-primary-color); color:var(--theme-light); } */

/* Promo varianten—geen base overlay */
.block-wrap.promo > .block-image::before,
.block-wrap.promo > .block-image::after{ content:none !important; }

/* Responsive hoogte image */
@media (max-width: 992px){
    .block-wrap.news-block > .block-image{ min-height:200px; }
}
@media (max-width: 576px){
    .block-wrap.news-block > .block-image{ min-height:180px; }
}

/* Optionele truncation voor content */
.block-wrap.news-block .block-article .article{
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:6; overflow:hidden;
}

/* =========================
   SHOP / PRODUCT CARD
   ========================= */

.block-wrap.shop-block{
    --shop-pad:16px;

    background: var(--theme-secondary-text);
    color: var(--theme-dark);
    border-radius:16px;
    padding: var(--shop-pad);
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    display:flex; flex-direction:column; width:100%;
}

/* Content kolom vult hoogte; prijs/knop naar onder */
.block-wrap.shop-block .block-content{
    display:flex; flex-direction:column; flex:1 1 auto;
}
.block-wrap.shop-block .price-actions{ margin-top:auto; padding-top:1rem; }

/* Guards tegen erfenis-legacy (buttons rechts, geen full-width) */
.shop-block .block-actions{ display:flex !important; }
.shop-block .pc-actions{ margin-left:auto !important; padding:0 !important; }
.shop-block .pc-actions .button.is-icon{
    --btn-h:38px; padding:0 8px; gap:8px;
}
.shop-block .pc-actions .button.is-icon .icon{ line-height:0; display:block; }
.shop-block .pc-actions .button.is-icon .icon svg{ display:block; }

/* Iconblok */
.shop-block .pc-image{ min-height:90px; }
.shop-block .pc-image img,
.shop-block .pc-image svg{ display:block; max-height:70px; width:auto; }

/* Typografie */
.shop-block .block-product-title h3{
    font-size:12px; font-weight:300; line-height:1.1; padding:0;
    color:var(--theme-input-border-focus);
}
.shop-block .pc-sub,
.product-card .pc-sub{
    font-size:18px; font-weight:500; line-height:1.15; margin-bottom:6px;
    color:var(--theme-webshop-text);
}

@media (max-width: 576px){
    .shop-block{ padding-left:20px; padding-right:20px; }
}

/* =========================
   PRICE TABLE
   ========================= */

.table-wrap.table-prices table{
    --table-padding-y:10px;
    --table-padding-x:15px;
    width:100%;
}
.table-wrap.table-prices table th,
.table-wrap.table-prices table td{
    padding: var(--table-padding-y) var(--table-padding-x);
    text-align:left;
}
.table-wrap.table-prices table th:nth-child(n+2),
.table-wrap.table-prices table td:nth-child(n+2){
    text-align:right; padding-right:20px; font-variant-numeric:tabular-nums;
}
.table-wrap.table-prices table td:last-child{ font-weight:400; }
.table-wrap.table-prices table th:first-child,
.table-wrap.table-prices table td:first-child{ padding-left:10px; }
.table-wrap.table-prices table thead th{ border-bottom:2px solid #000; }