/*
Theme Name: Shoptimizer Child Theme
Theme URI:
Description: Child theme of Shoptimizer
Author: WOOFERS
Author URI:
Template: shoptimizer
Version: 1.2.8
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/**
breakpoint: 769 / 993
*/

/*
html, body {
    overflow-x: hidden; 
} 
  


/**
 * Magazijn-indicatie styling
 * Badges op categorie-/productpagina's + groepering op de cartpagina
 *
 * Let op: de kleuren van de badges en groepslabels zelf komen als inline
 * styles uit de PHP-config. Alleen het accentrandje op de cart-rijen staat
 * hieronder hardcoded — voeg je een nieuw magazijn toe in de PHP-config,
 * voeg dan ook hier een regel toe.
 */

/* ---------- Badges (categorie- en productpagina) ---------- */

.vv2smart-warehouse-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 8px;
}

.vv2smart-warehouse-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.8;
	white-space: nowrap;
}

.vv2smart-warehouse-badge strong {
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	font-size: 12px;
}

/* Iets compacter in de productgrid */
ul.products .vv2smart-warehouse-badges {
	justify-content: flex-start;
	margin: 4px 0;
}

ul.products .vv2smart-warehouse-badge {
	font-size: 10px;
	padding: 1px 8px;
}
/**
 * Magazijn-indicatie styling
 * Badges op categorie-/productpagina's + groepering op de cartpagina
 *
 * Let op: de kleuren van de badges en groepslabels zelf komen als inline
 * styles uit de PHP-config. Alleen het accentrandje op de cart-rijen staat
 * hieronder hardcoded — voeg je een nieuw magazijn toe in de PHP-config,
 * voeg dan ook hier een regel toe.
 */

/* ---------- Badges (categorie- en productpagina) ---------- */

.vv2smart-warehouse-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 8px;
}

.vv2smart-warehouse-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.8;
	white-space: nowrap;
}

.vv2smart-warehouse-badge strong {
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	font-size: 12px;
}

/* Iets compacter in de productgrid */
ul.products .vv2smart-warehouse-badges {
	justify-content: flex-start;
	margin: 4px 0;
}

ul.products .vv2smart-warehouse-badge {
	font-size: 10px;
	padding: 1px 8px;
}

/* ---------- Winkelwagen: groepslabel per magazijn (CSS-only) ----------
   Het label verschijnt als aparte regel bovenaan de eerste rij van elke
   magazijngroep, over de volle breedte (boven afbeelding én titel).
   Het label wordt absoluut gepositioneerd; de rij krijgt extra ruimte
   bovenaan zodat het label er netjes in valt.
   Werkt onafhankelijk van het cart-template (geen HTML-injectie nodig). */

.woocommerce-cart-form tr.vv2smart-wh-start {
	position: relative;
}

/* Extra ruimte bovenaan de eerste rij van een groep voor het label */
.woocommerce-cart-form tr.vv2smart-wh-start td {
	padding-top: 42px;
}

.woocommerce-cart-form tr.vv2smart-wh-start td.product-name::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 10px;
	display: inline-block;
	width: max-content;
	padding: 2px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.8;
	white-space: nowrap;
}

.woocommerce-cart-form tr.vv2smart-wh-start.vv2smart-wh-cbstock td.product-name::before {
	content: "Magazijn Cebeo";
	background: #e8f5e9;
	color: #2e7d32;
	border-color: #c8e6c9;
}

.woocommerce-cart-form tr.vv2smart-wh-start.vv2smart-wh-vmstock td.product-name::before {
	content: "Magazijn Van Marcke";
	background: #e8f1fb;
	color: #1a5da6;
	border-color: #cfe0f4;
}

.woocommerce-cart-form tr.vv2smart-wh-start.vv2smart-wh-overig td.product-name::before {
	content: "Overige producten";
	background: #f5f5f5;
	color: #555;
	border-color: #e0e0e0;
}

/* ---------- Winkelwagen: subtiel accentrandje per magazijn-rij ---------- */

.woocommerce-cart-form tr.vv2smart-wh-cbstock td:first-child {
	box-shadow: inset 3px 0 0 #c8e6c9; /* Cebeo — zacht groen */
}

.woocommerce-cart-form tr.vv2smart-wh-vmstock td:first-child {
	box-shadow: inset 3px 0 0 #cfe0f4; /* Van Marcke — zacht blauw */
}

/* ---------- Winkelwagen: gratis-verzendindicator per magazijn ---------- */

.vv2smart-free-shipping {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0 8px;
}

.vv2smart-fs-item {
	flex: 1 1 260px;
	padding: 14px 16px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.vv2smart-fs-head {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.6;
}

.vv2smart-fs-head strong {
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
}

.vv2smart-fs-msg {
	margin: 4px 0 10px;
	font-size: 13px;
	color: #444;
	line-height: 1.4;
}

.vv2smart-fs-msg strong {
	font-weight: 600;
}

/* Voortgangsbalk */
.vv2smart-fs-bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: #eee;
	overflow: hidden;
}

.vv2smart-fs-bar span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 999px;
	transition: width 0.4s ease;
	/* Groei-animatie bij paginalading: van 0 naar de ingestelde breedte */
	transform: scaleX(0);
	transform-origin: left center;
	animation: vv2smart-fs-grow 0.9s ease-out 0.2s forwards;
}

@keyframes vv2smart-fs-grow {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Toegankelijkheid: geen animatie als de gebruiker dat verkiest */
@media (prefers-reduced-motion: reduce) {
	.vv2smart-fs-bar span {
		transform: scaleX(1);
		animation: none;
	}
}

/* Drempel bereikt: subtiele groene bevestiging */
.vv2smart-fs-reached {
	border-color: #c8e6c9;
	background: #f5fbf6;
}

.vv2smart-fs-reached .vv2smart-fs-msg {
	color: #2e7d32;
	font-weight: 600;
}

/* Klein: huidig bedrag van de drempel, onder de balk */
.vv2smart-fs-progress {
	margin-top: 6px;
	font-size: 11px;
	color: #888;
	text-align: right;
}

.vv2smart-fs-progress .woocommerce-Price-amount {
	color: #555;
	font-weight: 600;
}