/* =====================================================================
 * porto-6-prijzen-productcards.css  (6 van 6)
 *
 * Onderdeel van de laatste CSS-laag, opgesplitst uit porto-custom.css.
 * De bestanden worden in nummervolgorde ingeladen door
 * Magento_Theme::html/porto-custom-css.phtml.
 *
 * LET OP: de nummers zijn de laadvolgorde, niet zomaar een indeling.
 * Een echte thematische hergroepering is uitgeprobeerd en verworpen: op
 * zes plekken zouden regels dan van winnaar wisselen (o.a. SEARCH vs
 * HEADERS en Cust service vs Aanpassingen top header). Verplaats dus
 * niets tussen deze bestanden zonder de cascade opnieuw na te rekenen.
 *
 * Inhoud:
 *   Prices en de productkaarten (spacing, inner wrapper, productnaam, prijs).
 * ===================================================================== */

/* Prices */

@media (min-width: 768px) {
        .product-options-bottom .price-box .price-including-tax+.price-excluding-tax .price, .product-info-price .price-box .price-including-tax+.price-excluding-tax .price {
            font-size: 17px;
            line-height: 24px;
            font-weight: 400;
        }
    }

.product-options-bottom .price-box .price-container .price, .product-info-price .price-box .price-container .price {
    font-family: inherit;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #222529;
  }  
    
    
.product-info-main .product-info-stock-sku .stock {
    font-weight: 600;
    padding-left: 0;
}


.footer-middle>.container {
    position: relative;
    padding-top: 1rem;
    }
    
.wk-table {
    border: 1px solid #e1e1e1;
    margin-top: 20px;
}
.wk-table thead tr th {
    border-left: 1px solid #ededed;
    background-color: #2f99d8;
    color: white;
}


@media (max-width: 767px) {
    .panel.header .switcher {
        margin: 5px 10px 0px 0px !important;
        padding: 2px 0px !important;
        display: flex !important;
        position: static !important;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        background: #f5f7fa;
    } 
	.page-header .switcher strong>img, .page-footer .switcher strong>img {
    	margin-bottom: 3px;
    	margin-right: 3px;
    	vertical-align: middle;
    	max-width: 20px;
    	width: 15px;
	}
	.page-header .switcher .options ul.dropdown a>img, .page-footer .switcher .options ul.dropdown a>img {
  	  margin-bottom: 3px;
    	margin-right: 3px;
    	vertical-align: middle;
    	width: 20px;
	}
	.page-header .switcher .options ul.dropdown a, .page-footer .switcher .options ul.dropdown a {
    	display: block;
   		color: #777;
    	padding: 4px 7px;
    	font-size: 1em;
    	line-height: 25px;
    	border-bottom: 1px solid #e3e3e3;
   	 	font-weight: 400;
	}
	.widget, .footer .widget {
 		margin-top: 0.875rem;
	}
}

@media (min-width: 1320px) {
    .navigation, .page-header .header.panel, .header.content, .footer.content, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container, .page-main, .sw-megamenu.navigation li.level0.fullwidth > .submenu, .container {
        max-width: 1320px;
    }
}

.filter-options-item {
    padding: 10px !important;
}

.product-item-info.type3 .product.name, .product-item-info.type5 .product.name, .product-item-info.type6 .product.name {
    padding-right: 5px;
}

.products-grid.divider-line .product-item-info.type6 .product-item-inner {
    display: none;
}

.product-item-photo:hover:not(.porto-tb-featured-image) {
    box-shadow: none !important;
}

.product-item-photo:hover:not(.porto-tb-featured-image),
.product-item-info:hover .product-item-photo:not(.porto-tb-featured-image) {
    box-shadow: none !important;
}

.product-item-info .product-item-details .price-box {
margin-top:1rem;
margin-left:5px;
}

/* ── Spacing tussen cards ── */
ol.product-items {
    gap: 10px !important;
}

/* Deze regels waren geschreven voor de productgrid, maar de selector
   `li.item.product.product-item` raakt diezelfde opmaak overal waar dat
   stukje markup voorkomt -- ook de regels in de winkelmandlade, die
   daardoor geen padding kregen en een afwijkende radius hielden. Alle
   productkaarten op de site staan in .products-grid (categorie 36,
   homepage 18, elders geen), dus daarmee is de regel precies genoeg.
   Gecontroleerd op 28-08-2026. */
/* ── Product card ── */
.products-grid li.item.product.product-item {
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 calc(25% - 7.5px) !important;
    max-width: calc(25% - 7.5px) !important;
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
    .products-grid li.item.product.product-item {
        flex: 0 0 calc(33.333% - 6.667px) !important;
        max-width: calc(33.333% - 6.667px) !important;
    }
}

/* Mobiel */
@media (max-width: 575px) {
    .products-grid li.item.product.product-item {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
}

/* ── Inner wrapper ── */
.products-grid li.item.product.product-item .product {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 5px !important;
    width: 100% !important;
}

.products-grid li.item.product.product-item .product-item-details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ── Productnaam: vaste hoogte van 3 regels, afkappen met ... ── */
.products-grid li.item.product.product-item .product-item-name {
    flex: none !important;
    height: calc(3 * 19.6px) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 0 !important;
}

/* ── Prijs altijd op vaste positie onderaan ── */
.products-grid li.item.product.product-item .product-item-pricing {
    margin-top: auto !important;
    padding-top: 10px !important;
}

/* Teruggezet op 28-08-2026: dit leek dood omdat de Magento-reviewmodule uit
   staat, maar .rating-summary wordt ook door de Kiyoh-widget gebruikt voor de
   sterren in de topbalk. De twee oorspronkelijke blokken zijn hier samengevoegd. */
.rating-summary .rating-result > span:before {
    color: #ffc600 !important;
    text-align: left;
}