/* =============================================================
   FarmParts — woocommerce.css
   WooCommerce-specifieke stijlen
   Geladen via functions.php alleen op shop/product pagina's
   ============================================================= */

/* ─────────────────────────────────────────────
   1. SHOP HEADER & ZIJBALK
───────────────────────────────────────────── */
.fp-shop-header {
	background: #f3f4f6;
	border-bottom: 1px solid #e5e7eb;
}

.fp-shop-sidebar {
	position: sticky;
	top: 120px;
	align-self: flex-start;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}
.fp-shop-sidebar::-webkit-scrollbar { width: 4px; }
.fp-shop-sidebar::-webkit-scrollbar-track { background: transparent; }
.fp-shop-sidebar::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}

.fp-filter-block {
	transition: box-shadow 0.15s;
}
.fp-filter-block:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.fp-filter__title {
	color: var(--wp--preset--color--neutral-900) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin: 0 0 0.75rem !important;
	padding-bottom: 8px;
	border-bottom: 1px solid #f3f4f6;
}

/* Categorielijst in filter */
.fp-cat-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fp-cat-filter ul li {
	margin-bottom: 6px;
}
.fp-cat-filter ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--wp--preset--color--neutral-700);
	font-size: 0.875rem;
	padding: 4px 0;
	transition: color 0.15s;
}
.fp-cat-filter ul li a:hover,
.fp-cat-filter ul li.current-cat > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.fp-cat-filter .count {
	background: #f3f4f6;
	border-radius: 20px;
	padding: 1px 7px;
	font-size: 0.7rem;
	color: #9ca3af;
}

/* Prijsfilter slider */
.wc-block-price-filter__range-input-wrapper {
	padding: 8px 0;
}
.wc-block-price-filter__range-input::-webkit-slider-thumb {
	background: var(--wp--preset--color--primary) !important;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}
.wc-block-price-filter__range-input::-moz-range-thumb {
	background: var(--wp--preset--color--primary) !important;
}
.wc-block-price-filter__progress {
	background: var(--wp--preset--color--primary) !important;
}

/* Attribuutfilter (checkboxes) */
.fp-brand-filter .wc-block-attribute-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fp-brand-filter .wc-block-attribute-filter-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.fp-brand-filter label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--neutral-700);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.fp-brand-filter input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
.fp-brand-filter .wc-block-attribute-filter-list-count {
	margin-left: auto;
	background: #f3f4f6;
	border-radius: 20px;
	padding: 1px 7px;
	font-size: 0.7rem;
	color: #9ca3af;
}

/* Actieve filters chips */
.fp-active-filters .wc-block-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fp-active-filters .wc-block-active-filters__list-item-remove {
	background: var(--wp--preset--color--neutral-100);
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	padding: 4px 10px 4px 8px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--neutral-700);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s;
}
.fp-active-filters .wc-block-active-filters__list-item-remove:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #ef4444;
}

/* ─────────────────────────────────────────────
   2. SHOP TOOLBAR
───────────────────────────────────────────── */
.fp-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fp-results-count {
	color: var(--wp--preset--color--neutral-400) !important;
	font-size: 0.875rem !important;
}

.fp-view-toggle__buttons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--neutral-400);
	cursor: pointer;
	transition: all 0.15s;
}
.fp-view-toggle__buttons button:hover,
.fp-view-toggle__buttons button.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Sorteerselectie */
.fp-sort-select select,
.woocommerce-ordering select {
	width: 100%;
	padding: 8px 32px 8px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 0.875rem;
	color: var(--wp--preset--color--neutral-700);
	cursor: pointer;
	transition: border-color 0.15s;
}
.fp-sort-select select:focus,
.woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

/* ─────────────────────────────────────────────
   3. PRODUCTCOLLECTIE GRID
───────────────────────────────────────────── */
.fp-product-collection .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Lijstweergave (JS-geactiveerd via data-view="list") */
.fp-product-collection[data-view="list"] .wc-block-product-template {
	grid-template-columns: 1fr !important;
}
.fp-product-collection[data-view="list"] .fp-product-card {
	flex-direction: row !important;
}
.fp-product-collection[data-view="list"] .fp-product-card__image {
	width: 200px;
	flex-shrink: 0;
	aspect-ratio: 4/3;
}
.fp-product-collection[data-view="list"] .fp-product-card__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}
.fp-product-collection[data-view="list"] .fp-product-card__title {
	flex: 1;
	min-width: 200px;
}

/* ─────────────────────────────────────────────
   4. GEEN RESULTATEN
───────────────────────────────────────────── */
.fp-no-results {
	text-align: center;
}

/* ─────────────────────────────────────────────
   5. SINGLE PRODUCT
───────────────────────────────────────────── */

/* Afbeeldingsgalerij */
.fp-product-gallery .woocommerce-product-gallery {
	position: sticky;
	top: 120px;
}
.fp-product-gallery .woocommerce-product-gallery__image img {
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}
.fp-product-gallery .flex-viewport {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e5e7eb;
}
.fp-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	list-style: none;
	padding: 0;
}
.fp-product-gallery .flex-control-thumbs img {
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s;
	width: 80px;
	height: 60px;
	object-fit: cover;
}
.fp-product-gallery .flex-control-thumbs .flex-active img {
	border-color: var(--wp--preset--color--primary);
}

/* Badge pills */
.fp-product-category-badge,
.fp-product-brand-badge {
	display: inline-block;
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.fp-product-category-badge {
	background: rgba(0,78,161,0.08);
	color: var(--wp--preset--color--secondary);
}
.fp-product-brand-badge {
	background: rgba(0,166,104,0.1);
	color: var(--wp--preset--color--primary);
}

/* Voorraad badge */
.fp-stock-badge .woocommerce-in-stock {
	background: rgba(0,166,104,0.1);
	color: var(--wp--preset--color--primary);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.fp-stock-badge .woocommerce-out-of-stock {
	background: rgba(239,68,68,0.08);
	color: #ef4444;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Meta-balk (SKU / categorie) */
.fp-product-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}
.fp-product-sku {
	font-size: 0.8rem;
}
.fp-product-sku::before {
	content: "SKU: ";
	color: var(--wp--preset--color--neutral-400);
}

/* Prijsblok */
.fp-product-price-block {
	border-left: 4px solid var(--wp--preset--color--primary) !important;
}
.fp-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 800 !important;
	font-size: 2rem !important;
	line-height: 1 !important;
}
.fp-product-price del .woocommerce-Price-amount {
	color: var(--wp--preset--color--neutral-400) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
}
.fp-vat-notice {
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--neutral-400) !important;
	margin: 4px 0 0 !important;
}

/* Add to cart formulier */
.fp-add-to-cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
	width: fit-content;
	margin-bottom: 12px;
}
.fp-add-to-cart .quantity input {
	width: 60px;
	text-align: center;
	border: none;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
	padding: 10px 8px;
	font-size: 1rem;
	font-weight: 600;
	outline: none;
}
.fp-add-to-cart .quantity .qty-minus,
.fp-add-to-cart .quantity .qty-plus {
	background: #f9fafb;
	border: none;
	width: 42px;
	height: 42px;
	cursor: pointer;
	font-size: 1.2rem;
	color: var(--wp--preset--color--neutral-700);
	transition: background 0.15s, color 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fp-add-to-cart .quantity .qty-minus:hover,
.fp-add-to-cart .quantity .qty-plus:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.fp-add-to-cart .single_add_to_cart_button {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 6px !important;
	padding: 14px 32px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
	box-shadow: 0 2px 8px rgba(0,166,104,0.3);
}
.fp-add-to-cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--primary-dark) !important;
	box-shadow: 0 4px 16px rgba(0,166,104,0.4);
	transform: translateY(-1px);
}
.fp-add-to-cart .single_add_to_cart_button:disabled {
	background: #9ca3af !important;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Actieknoppen */
.fp-wishlist-btn:hover,
.fp-compare-btn:hover,
.fp-share-btn:hover {
	background: var(--wp--preset--color--neutral-100) !important;
	border-color: var(--wp--preset--color--neutral-400) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Vertrouwenssignalen */
.fp-trust-signals strong {
	color: var(--wp--preset--color--neutral-900);
}

/* ─────────────────────────────────────────────
   6. PRODUCT TABS
───────────────────────────────────────────── */
.fp-tabs {
	display: flex;
	border-bottom: none;
	gap: 4px;
}
.fp-tab {
	padding: 12px 24px;
	border: none;
	background: rgba(0,0,0,0.08);
	color: var(--wp--preset--color--neutral-700);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	border-radius: 8px 8px 0 0;
	transition: all 0.15s;
}
.fp-tab:hover {
	background: rgba(0,0,0,0.12);
	color: var(--wp--preset--color--neutral-900);
}
.fp-tab--active {
	background: #fff !important;
	color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 -2px 0 var(--wp--preset--color--primary) inset;
}

.fp-tab-panel {
	border-radius: 0 8px 8px 8px;
}

/* Specificatietabel */
.fp-product-specs table {
	width: 100%;
	border-collapse: collapse;
}
.fp-product-specs tr:nth-child(even) td {
	background: #f9fafb;
}
.fp-product-specs td {
	padding: 10px 16px;
	font-size: 0.875rem;
	border-bottom: 1px solid #f3f4f6;
}
.fp-product-specs td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--neutral-700);
	width: 40%;
}

/* Beoordelingen */
.fp-product-reviews .comment-form-rating .stars a {
	color: #f59e0b;
	font-size: 1.25rem;
}
.fp-product-reviews #respond {
	background: #f9fafb;
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 2rem;
}
.fp-product-reviews #respond h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.fp-product-reviews .comment-form input,
.fp-product-reviews .comment-form textarea {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 0.875rem;
	width: 100%;
	transition: border-color 0.15s;
}
.fp-product-reviews .comment-form input:focus,
.fp-product-reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}
.fp-product-reviews .comment-form-submit input {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	padding: 12px 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	width: auto;
}

/* ─────────────────────────────────────────────
   7. WINKELWAGEN & CHECKOUT
───────────────────────────────────────────── */
.wc-block-cart,
.wc-block-checkout {
	font-size: 0.9rem;
}

/* Tabelkoppen */
.woocommerce-cart-form th,
.wc-block-cart-items__header {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--neutral-400);
	font-weight: 700;
	padding: 10px 16px;
	border-bottom: 2px solid #e5e7eb;
}

/* Checkout formuliervelden */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
	border: 1px solid #e5e7eb !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
	font-size: 0.875rem !important;
	transition: border-color 0.15s !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--wp--preset--color--primary) !important;
	outline: none !important;
}

/* Checkout betaalknop */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-button {
	background: var(--wp--preset--color--primary) !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 16px 32px !important;
	width: 100%;
}
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

/* ─────────────────────────────────────────────
   8. GERELATEERDE PRODUCTEN
───────────────────────────────────────────── */
.fp-related-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

/* ─────────────────────────────────────────────
   9. WOO RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.fp-product-collection .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}
	.fp-related-grid .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.fp-shop-body .wp-block-columns {
		flex-direction: column;
	}
	.fp-shop-sidebar {
		position: static;
		max-height: none;
		width: 100%;
	}
	.fp-product-details-col {
		flex-basis: 100% !important;
	}
	.fp-product-gallery-col {
		flex-basis: 100% !important;
	}
	.fp-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.fp-tabs::-webkit-scrollbar { display: none; }
	.fp-tab {
		white-space: nowrap;
		padding: 10px 16px;
		font-size: 0.78rem;
	}
}

@media (max-width: 480px) {
	.fp-product-collection .wc-block-product-template {
		grid-template-columns: 1fr;
	}
	.fp-related-grid .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}
}