/* ==================================================
   HOUSE OF OLIVE SHOP — categorie- en shoppagina
   Stap 2: productgrid + filter-sidebar (YITH / Flatsome)
   ==================================================
   Uitgangspunten:
   - #sidebar-shop en #main zijn de standaard Flatsome-ids voor de shoplayout.
   - .product-small.box / .col-inner / .box-image zijn Flatsome's eigen
     productkaart-klassen; .woocommerce-loop-product__title, .price en
     .add_to_cart_button zijn de originele WooCommerce-klassen die Flatsome
     hierbinnen hergebruikt.
   - De filterwidgets (YITH) hergebruiken de standaard WordPress-widgetopbouw
     (.widget, .widget-title, lijsten met checkboxes). Mocht YITH bij jou net
     iets andere klassen uitvoeren, stuur een screenshot van de broncode dan
     verfijn ik onderstaande selectors exact.
================================================== */

/* ---------- Algemene sectie-opbouw ---------- */

body.hoo-shop-archive .shop-container,
body.hoo-shop-archive #main {
	padding-bottom: 0 !important;
}

body.hoo-shop-archive ul.products {
	margin-top: 0;
}

/* Resultaatteller + sorteren, boven de grid */

body.hoo-shop-archive .woocommerce-result-count,
body.hoo-shop-archive .woocommerce-ordering {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

body.hoo-shop-archive .woocommerce-ordering select {
	min-width: 176px;
	padding: 11px 34px 11px 13px;
	border: 1px solid var(--line);
	border-radius: 0;
	background-color: transparent;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
}

body.hoo-shop-archive .woocommerce-result-count {
	margin-bottom: 30px;
}

/* ---------- Filter-sidebar (#sidebar-shop) ---------- */

body.hoo-shop-archive #sidebar-shop {
	position: sticky;
	top: 128px;
}

body.hoo-shop-archive #sidebar-shop .widget-area,
body.hoo-shop-archive #sidebar-shop .widget {
	margin: 0 0 22px;
}

body.hoo-shop-archive #sidebar-shop .widget-title,
body.hoo-shop-archive #sidebar-shop .widget > h3,
body.hoo-shop-archive #sidebar-shop .widget > h4 {
	display: flex;
	justify-content: space-between;
	margin: 0 0 17px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==================================================
   YITH filter-preset — op basis van de werkelijke HTML
   (.yith-wcan-filters / .yith-wcan-filter / .filter-title / .filter-items)
================================================== */

body.hoo-shop-archive .yith-wcan-filters {
	background: transparent;
}

body.hoo-shop-archive .yith-wcan-filter {
	padding-block: 22px;
	border-bottom: 1px solid var(--line);
}

body.hoo-shop-archive .yith-wcan-filter:first-child {
	padding-top: 0;
}

/* Titels ("Productcategorie", "Filter by price", "Order by") normaal, sans-serif, zoals de rest van de site */

body.hoo-shop-archive .yith-wcan-filter .filter-title {
	margin: 0 0 17px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Checkbox-lijst (categorieën, attributen) */

body.hoo-shop-archive .yith-wcan-filter ul.filter-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hoo-shop-archive .yith-wcan-filter li.filter-item {
	margin-top: 11px;
}

body.hoo-shop-archive .yith-wcan-filter li.filter-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

body.hoo-shop-archive .yith-wcan-filter li.filter-item input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
	flex: 0 0 15px;
	accent-color: var(--olive-green);
}

body.hoo-shop-archive .yith-wcan-filter li.filter-item .term-label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 12px;
	font-style: normal;
	text-decoration: none;
}

body.hoo-shop-archive .yith-wcan-filter li.filter-item:hover .term-label,
body.hoo-shop-archive .yith-wcan-filter li.filter-item input:checked ~ .term-label {
	color: var(--olive-black);
}

body.hoo-shop-archive .yith-wcan-filter .term-label .item-count {
	color: rgba(111, 112, 103, 0.62);
	font-size: 10px;
}

/* Prijsslider (ion.rangeSlider, klasse .irs) — het standaard rood/bordeaux vervangen door het merkpalet */

body.hoo-shop-archive .yith-wcan-filter .price-slider {
	padding-top: 6px;
}

body.hoo-shop-archive .irs--round .irs-line {
	background: var(--line);
}

body.hoo-shop-archive .irs--round .irs-bar {
	background: var(--olive-gold) !important;
	border-color: var(--olive-gold) !important;
}

body.hoo-shop-archive .irs--round .irs-handle {
	width: 15px;
	height: 15px;
	top: 22px;
	border: 0 !important;
	background: var(--olive-green) !important;
	box-shadow: none;
}

body.hoo-shop-archive .irs--round .irs-handle i:first-child {
	background: transparent;
}

body.hoo-shop-archive .irs--round .irs-from,
body.hoo-shop-archive .irs--round .irs-to,
body.hoo-shop-archive .irs--round .irs-single {
	background: var(--olive-black) !important;
	color: var(--linen) !important;
	font-family: var(--sans);
	font-size: 10px;
}

body.hoo-shop-archive .irs--round .irs-from::before,
body.hoo-shop-archive .irs--round .irs-to::before,
body.hoo-shop-archive .irs--round .irs-single::before {
	border-top-color: var(--olive-black) !important;
}

body.hoo-shop-archive .yith-wcan-filter .price-slider-min,
body.hoo-shop-archive .yith-wcan-filter .price-slider-max {
	width: 70px;
	margin-top: 14px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
}

/* Sorteren (aangepaste dropdown die YITH van de <select> maakt) */

body.hoo-shop-archive .yith-wcan-dropdown .dropdown-label {
	padding: 10px 12px;
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
	font-style: normal;
}

body.hoo-shop-archive .yith-wcan-dropdown .dropdown-wrapper {
	border: 1px solid var(--line);
	font-family: var(--sans);
}

/* Reset-knop / "wis filters" */

body.hoo-shop-archive .yith-wcan-reset-navigation,
body.hoo-shop-archive .reset_layered_nav_button {
	display: inline-block;
	margin-top: 6px;
	color: var(--olive-black);
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-transform: uppercase;
}

/* De productkaart-styling (.product-small) staat vanaf nu in assets/css/product-card.css,
   want die kaarten verschijnen ook bij "Gerelateerde producten" op de productpagina —
   dat bestand wordt daarom op archief- én productpagina's geladen, hier niet meer nodig. */

/* ---------- Mobiel: vertrouw op Flatsome's eigen Off-Canvas filterinstelling ---------- */
/* Zie Appearance → Customize → WooCommerce → Product Catalog → "Off Canvas".   */
/* Onderstaande zorgt alleen dat de kleuren van de knop bij het merk passen.    */

@media screen and (max-width: 850px) {
	body.hoo-shop-archive .sidebar-toggle,
	body.hoo-shop-archive .off-canvas-sidebar-toggle {
		border-color: var(--olive-black) !important;
		color: var(--olive-black) !important;
		font-family: var(--sans) !important;
		font-size: 9px !important;
		font-weight: 700 !important;
		letter-spacing: 0.1em !important;
		text-transform: uppercase !important;
	}
}