/* ==========================================================================
   Hex WooCommerce Bundle — Frontend Builder
   Mobile-first, plugin-scoped, no theme conflict.
   ========================================================================== */

:root {
	--hex-gap:      16px;
	--hex-border:   #d4d4d4;
	--hex-muted:    #767676;
	--hex-accent:   #b30000;
	--hex-accent-h: #8a0000;
	--hex-danger:   #cc0000;
	--hex-radius:   4px;
	--hex-font:     inherit;
}
div#product-sidebar {
    display: none !important;
}

.price-wrapper {
    display: none;
}
/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.hex-wcb-builder {
	display: flex;
	flex-direction: column;
	gap: var(--hex-gap);
	margin: 1rem 0;
	font-family: var(--hex-font);
	font-size: 0.95rem;
	line-height: 1.5;
	color: inherit;
	box-sizing: border-box;
}

.hex-wcb-builder *,
.hex-wcb-builder *::before,
.hex-wcb-builder *::after {
	box-sizing: inherit;
}

/* ── "Vanaf €x,xx per persoon" ──────────────────────────────────────────────── */
.hex-wcb-from-price {
	margin: 0;
	font-size: 0.9rem;
	color: var(--hex-muted);
}

.hex-wcb-from-price strong.hex-wcb-from-price-val {
	color: inherit;
}

/* ── "Stel je pakket samen:" title ──────────────────────────────────────────── */
.hex-wcb-configurator-title {
	margin: 0 0 4px;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hex-muted);
}

/* ── Step block ─────────────────────────────────────────────────────────────── */
.hex-wcb-step {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-wcb-step-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: default;
}

.hex-wcb-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #bd191d;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1;
}

.hex-wcb-step-hint {
	margin: 0;
	font-size: 0.78rem;
	color: var(--hex-muted);
}

.hex-wcb-step-hint--toggle {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-wcb-why-step-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 0.78rem;
	color: var(--hex-accent);
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hex-wcb-why-step-btn:hover {
	color: var(--hex-accent-hover, #900);
}

.hex-wcb-why-step-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.hex-wcb-why-step-btn[aria-expanded="true"] .hex-wcb-why-step-chevron {
	transform: rotate(180deg);
}

.hex-wcb-why-step-body {
	display: block;
	font-size: 0.78rem;
	color: var(--hex-muted);
	background: #f9f9f9;
	border-left: 3px solid var(--hex-accent);
	padding: 6px 10px;
	border-radius: 0 4px 4px 0;
	line-height: 1.5;
}

/* ── Field wrap ─────────────────────────────────────────────────────────────── */
.hex-wcb-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ── Select ─────────────────────────────────────────────────────────────────── */
.hex-wcb-select {
	display: block !important;
	width: 100% !important;
	padding: 10px 36px 10px 12px !important;
	border: 1px solid var(--hex-border) !important;
	border-radius: var(--hex-radius) !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23767676'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	font-size: 0.93rem !important;
	font-family: var(--hex-font) !important;
	color: inherit !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
	transition: border-color 0.15s !important;
	margin: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	outline: none !important;
}

.hex-wcb-select:focus {
	border-color: #555 !important;
	outline: 2px solid rgba(0,0,0,0.08) !important;
	outline-offset: 1px !important;
}

.hex-wcb-select.has-error {
	border-color: var(--hex-danger) !important;
}

/* ── Field error ────────────────────────────────────────────────────────────── */
.hex-wcb-field-error {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.8rem !important;
	color: var(--hex-danger) !important;
	font-weight: 500 !important;
}

.hex-wcb-field-error[hidden] {
	display: none !important;
}

/* ── Persons step ───────────────────────────────────────────────────────────── */
.hex-wcb-step--persons {
	border-top: 1px solid var(--hex-border);
	padding-top: var(--hex-gap);
	margin-top: 4px;
}

.hex-wcb-step-label--nnum {
	font-weight: 600;
	font-size: 0.95rem;
}

/* ── Stepper — hoge specificiteit via .hex-wcb-builder prefix ───────────────── */
.hex-wcb-builder .hex-wcb-stepper {
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-orient: horizontal !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: row !important;
	flex-direction: row !important;
	-ms-flex-wrap: nowrap !important;
	flex-wrap: nowrap !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	border: 1px solid var(--hex-border) !important;
	border-radius: var(--hex-radius) !important;
	overflow: visible !important;
	background: transparent !important;
	width: -webkit-fit-content !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	max-width: 160px !important;
	gap: 0 !important;
}

.hex-wcb-builder .hex-wcb-stepper-btn {
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	-ms-flex-negative: 0 !important;
	flex-shrink: 0 !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	border: 1px solid var(--hex-border) !important;
	background: #f5f5f5 !important;
	font-size: 1.25rem !important;
	font-weight: 300 !important;
	color: #1a1a1a !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	-webkit-transition: background 0.1s !important;
	transition: background 0.1s !important;
	border-radius: var(--hex-radius) 0 0 var(--hex-radius) !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	vertical-align: middle !important;
	float: none !important;
}

.hex-wcb-builder .hex-wcb-stepper-btn:last-of-type {
	border-radius: 0 var(--hex-radius) var(--hex-radius) 0 !important;
	border-left: none !important;
}

.hex-wcb-builder .hex-wcb-stepper-btn:first-of-type {
	border-right: none !important;
}

.hex-wcb-builder .hex-wcb-stepper-btn:hover {
	background: #e8e8e8 !important;
	color: #1a1a1a !important;
}

.hex-wcb-builder .hex-wcb-stepper-btn:active {
	background: #ddd !important;
}

.hex-wcb-builder .hex-wcb-stepper-val {
	display: inline-block !important;
	width: 52px !important;
	min-width: 52px !important;
	max-width: 52px !important;
	text-align: center !important;
	border: 1px solid var(--hex-border) !important;
	border-left: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	background: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 40px !important;
	line-height: 40px !important;
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline: none !important;
	float: none !important;
	vertical-align: middle !important;
}

.hex-wcb-builder .hex-wcb-stepper-val::-webkit-inner-spin-button,
.hex-wcb-builder .hex-wcb-stepper-val::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	display: none !important;
}

/* ── Card dropdown wrapper ───────────────────────────────────────────────────── */

.hex-wcb-card-dropdown {
	position: relative;
	width: 100%;
}

/* Statische hoofdproduct-kaart (bundles uitgeschakeld) – zelfde visuele stijl als trigger */
.hex-wcb-builder .hex-wcb-hoofdproduct-card {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 14px 8px 10px !important;
	border: 2px solid var(--hex-accent) !important;
	border-radius: var(--hex-radius) !important;
	background: #fff !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 56px !important;
	pointer-events: none;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__img {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	overflow: hidden;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__title {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--hex-text);
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__desc {
	font-size: 0.78rem;
	color: var(--hex-muted);
	line-height: 1.3;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__meta {
	flex-shrink: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.hex-wcb-builder .hex-wcb-hoofdproduct-card .hex-wcb-card-option__price {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--hex-accent);
}

.hex-wcb-builder .hex-wcb-hoofdproduct-tag {
	display: inline-block;
	background: var(--hex-accent);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 6px;
	border-radius: 20px;
	line-height: 1.4;
	width: fit-content;
}

/* Trigger-knop: toont de geselecteerde optie */
.hex-wcb-builder .hex-wcb-card-dropdown__trigger {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 42px 8px 10px !important;
	border: 2px solid var(--hex-border) !important;
	border-radius: var(--hex-radius) !important;
	background: #fff !important;
	cursor: pointer !important;
	position: relative !important;
	min-height: 56px !important;
	transition: border-color 0.15s !important;
	outline: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	text-align: left !important;
}

.hex-wcb-builder .hex-wcb-card-dropdown__trigger:hover {
	border-color: #999 !important;
}

.hex-wcb-builder .hex-wcb-card-dropdown__trigger:focus-visible {
	border-color: var(--hex-accent) !important;
	box-shadow: 0 0 0 3px rgba(179, 0, 0, 0.10) !important;
}

/* Trigger open-staat: rode rand en verwijder onderste ronding */
.hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__trigger {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin-bottom: -10px !important;
}
/* Preview-zone in de trigger */
.hex-wcb-card-dropdown__preview {
	flex: 1 !important;
	min-width: 0 !important;
}

.hex-wcb-card-dropdown__placeholder {
	font-size: 0.85rem !important;
	color: var(--hex-muted) !important;
}

/* Gekloonde kaart die de trigger vult */
.hex-wcb-builder .hex-wcb-card-dropdown__preview-card {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	pointer-events: none !important;
	width: 100% !important;
}

/* Geen radio-dot in de trigger-preview */
.hex-wcb-builder .hex-wcb-card-dropdown__preview-card::before {
	display: none !important;
}

/* Chevron-pijl */
.hex-wcb-builder .hex-wcb-card-dropdown__chevron {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 12px !important;
	height: 8px !important;
	color: var(--hex-muted) !important;
	transition: transform 0.2s, color 0.15s !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
	display: block !important;
}

.hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__chevron {
	transform: translateY(-50%) rotate(180deg) !important;
	color: var(--hex-accent) !important;
}

/* Dropdown paneel */
.hex-wcb-builder .hex-wcb-card-dropdown__panel {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 500 !important;
	background: #fff !important;
	border: 2px solid var(--hex-border) !important;
	border-top: none !important;
	border-bottom-left-radius: var(--hex-radius) !important;
	border-bottom-right-radius: var(--hex-radius) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13) !important;
	max-height: 360px !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Card-selector ínin het paneel: geen gap tussen de kaarten, kleine padding */
.hex-wcb-card-dropdown__panel .hex-wcb-card-selector {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 4px !important;
}

/* Kaarten in het paneel: iets minder padding, geen afgeronde hoeken op aangrenzende randen */
.hex-wcb-card-dropdown__panel .hex-wcb-card-option {
	border-radius: calc(var(--hex-radius) - 1px) !important;
	margin: 2px 0 !important;
}

/* ── Card selector (vervangt <select>) ──────────────────────────────────────── */

.hex-wcb-card-selector {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-wcb-card-selector.has-error {
	border-radius: var(--hex-radius);
	outline: 2px solid var(--hex-danger);
	outline-offset: 2px;
}

/* Card row ────────────────────────────────────────────────────────────────── */
.hex-wcb-builder .hex-wcb-card-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	border: 2px solid var(--hex-border) !important;
	border-radius: var(--hex-radius) !important;
	background: #fff !important;
	cursor: pointer !important;
	transition: border-color 0.15s, background 0.12s !important;
	outline: none !important;
	position: relative !important;
	text-align: left !important;
	user-select: none !important;
}

/* Radio-dot via ::before */
.hex-wcb-builder .hex-wcb-card-option::before {
	content: '' !important;
	flex-shrink: 0 !important;
	width: 17px !important;
	min-width: 17px !important;
	height: 17px !important;
	border: 2px solid var(--hex-border) !important;
	border-radius: 50% !important;
	background: #fff !important;
	transition: border-color 0.15s, background 0.15s !important;
	box-sizing: border-box !important;
}

.hex-wcb-builder .hex-wcb-card-option:hover {
	border-color: #999 !important;
	background: #fafafa !important;
}

.hex-wcb-builder .hex-wcb-card-option:focus-visible {
	outline: 2px solid var(--hex-accent) !important;
	outline-offset: 1px !important;
}

/* Geselecteerde staat */
.hex-wcb-builder .hex-wcb-card-option--selected {
	border-color: var(--hex-accent) !important;
	background: #fff8f8 !important;
}

.hex-wcb-builder .hex-wcb-card-option--selected::before {
	border-color: var(--hex-accent) !important;
	background: var(--hex-accent) !important;
	box-shadow: inset 0 0 0 3px #fff !important;
}

.hex-wcb-builder .hex-wcb-card-option--selected .hex-wcb-card-option__title {
	color: var(--hex-accent) !important;
}

/* Afbeelding ────────────────────────────────────────────────────────────── */
.hex-wcb-builder .hex-wcb-card-option__img {
	flex-shrink: 0 !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f3f3f3 !important;
}

.hex-wcb-builder .hex-wcb-card-option__img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Tekst body ─────────────────────────────────────────────────────────────── */
.hex-wcb-builder .hex-wcb-card-option__body {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.hex-wcb-builder .hex-wcb-card-option__title {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	line-height: 1.3 !important;
	transition: color 0.12s !important;
}

/* ── Dietary icons ─────────────────────────────────────────────────────── */
.hex-wcb-dietary-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	cursor: default;
}

.hex-wcb-builder .hex-wcb-card-option__desc {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: 0.74rem !important;
	color: var(--hex-muted) !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}

/* Meta (badge + prijs) ────────────────────────────────────────────────────── */
.hex-wcb-builder .hex-wcb-card-option__meta {
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 4px !important;
	min-width: 70px !important;
	text-align: right !important;
}

.hex-wcb-builder .hex-wcb-card-option__badge {
	display: inline-block !important;
	padding: 2px 8px !important;
	background: var(--hex-accent) !important;
	color: #fff !important;
	font-size: 0.64rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
    margin-bottom: 5px;
	border-radius: 20px !important;
	white-space: nowrap !important;
	line-height: 1.6 !important;
}

.hex-wcb-builder .hex-wcb-card-option__price {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
}

.hex-wcb-builder .hex-wcb-card-option__price small {
	font-weight: 400 !important;
	font-size: 0.72rem !important;
	color: var(--hex-muted) !important;
}

.hex-wcb-builder .hex-wcb-card-option__price--incl {
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	color: var(--hex-muted) !important;
}

/* Dietary icons in card-option kaarten */
.hex-wcb-card-option__dietary-icons {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

/* ── Add-ons block ──────────────────────────────────────────────────────────── */
.hex-wcb-addons-block {
	border-top: 1px solid var(--hex-border);
	padding-top: var(--hex-gap);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hex-wcb-add-upsell-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px dashed var(--hex-accent, #e2001a);
	border-radius: 6px;
	padding: 9px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hex-accent, #e2001a);
	cursor: pointer;
	transition: background .15s, color .15s;
	align-self: flex-start;
	margin-top: 4px;
}
.hex-wcb-add-upsell-btn:hover {
	background: var(--hex-accent, #e2001a);
	color: #fff;
	border-color: var(--hex-accent, #e2001a);
}
.hex-wcb-add-upsell-btn svg {
	flex-shrink: 0;
}

.hex-wcb-addons-title {
	margin: 0;
	font-weight: 700;
	font-size: 0.95rem;
}

.hex-wcb-addons-sub {
	margin: 0;
	font-size: 0.82rem;
	color: var(--hex-muted);
	line-height: 1.4;
}

.hex-wcb-addon-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Hoofdproduct-add-on stijl */
.hex-wcb-addon-row--main-product {
	background: #fff9f0;
	border: 1px solid #f59e0b;
	border-radius: 8px;
	padding: 10px 14px;
}

.hex-wcb-main-product-badge {
	display: inline-block;
	background: #f59e0b;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 2px 7px;
	border-radius: 20px;
	margin-left: 6px;
	vertical-align: middle;
	line-height: 1.4;
}

.hex-wcb-addon-synced-label {
	font-size: 0.78rem;
	color: #b45309;
	font-style: italic;
	white-space: nowrap;
	flex-shrink: 0;
}

.hex-wcb-addon-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.hex-wcb-addon-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1px solid var(--hex-border);
}

.hex-wcb-addon-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.hex-wcb-addon-name {
	font-size: 0.9rem;
	font-weight: 500;
}

.hex-wcb-addon-price {
	font-size: 0.78rem;
	color: var(--hex-muted);
}

/* ── Summary box ────────────────────────────────────────────────────────────── */
.hex-wcb-summary-box {
	border: 1px solid var(--hex-border);
	border-radius: var(--hex-radius);
	background: #f7f7f7;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-wcb-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: 0.93rem;
}

.hex-wcb-summary-row span:first-child {
	color: var(--hex-muted);
}

.hex-wcb-total-grand, .hex-wcb-total-grand-label{
	font-weight: 700;
}

.hex-wcb-total-grand.is-updated {
	animation: hex-wcb-pop 0.3s ease-out;
}

.hex-wcb-per-person, .hex-wcb-per-person-label {
	font-weight: 600;
	color: #1a1a1a !important;
	font-size: 1.15rem;
}

@keyframes hex-wcb-pop {
	0%   { opacity: 0.5; }
	50%  { opacity: 1;   }
	100% { opacity: 1;   }
}

/* ── CTA — override WooCommerce's add-to-cart button within this form ────────── */
form.cart .hex-wcb-builder ~ .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	padding: 15px 20px !important;
	background: var(--hex-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--hex-radius) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
	text-align: center !important;
	box-shadow: none !important;
	margin: 0 !important;
}

form.cart .single_add_to_cart_button:hover:not(:disabled) {
	background: var(--hex-accent-h) !important;
}

form.cart .single_add_to_cart_button:disabled,
form.cart .single_add_to_cart_button[aria-disabled="true"] {
	background: #aaa !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Offerte-knop (na Add to Cart)
   ══════════════════════════════════════════════════════════════════════ */

.hex-wcb-quote-btn {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 11px 18px;
	background: transparent;
	color: #1a1a1a;
	border: 2px solid #e2001a;
	border-radius: 6px;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background .15s, color .15s;
	line-height: 1.4;
}

.hex-wcb-quote-btn:hover {
	background: #e2001a;
	color: #fff;
}

.hex-wcb-quote-btn[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   Offertemodal
   ══════════════════════════════════════════════════════════════════════ */

#hexco-quote-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#hexco-quote-modal[hidden] { display: none !important; }

body.hexco-quote-open { overflow: hidden; }

.hexco-quote-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .52);
	backdrop-filter: blur(3px);
}

.hexco-quote-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 860px;
	max-height: 90vh;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: hexco-quote-fadein .22s ease;
}

@keyframes hexco-quote-fadein {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: scale(1);   }
}

/* Header */
.hexco-quote-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 24px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
}

.hexco-quote-modal__header h2 {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}

.hexco-quote-modal__close {
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color .15s, background .15s;
	margin: 0;
}
.hexco-quote-modal__close:hover { color: #e2001a; background: #fdf0f0; }

/* Body: twee kolommen */
.hexco-quote-modal__body {
	display: grid;
	grid-template-columns: 1fr 340px;
	flex: 1 1 auto;
	overflow: hidden;
}

.hexco-quote-modal__left {
	overflow-y: auto;
	padding: 22px 24px;
	border-right: 1px solid #f0f0f0;
}

.hexco-quote-modal__right {
	overflow-y: auto;
	padding: 22px 20px;
	background: #fafafa;
}

/* Intro-tekst */
.hexco-quote-modal__intro {
	margin-bottom: 20px;
}

.hexco-quote-modal__intro h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.hexco-quote-modal__intro p {
	font-size: .88rem;
	color: #555;
	margin: 0 0 6px;
	line-height: 1.5;
}

/* Formulier */
.hexco-quote-form__field {
	margin-bottom: 14px;
}

.hexco-quote-form__field label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

.hexco-quote-required {
	color: #e2001a;
	margin-left: 2px;
}

.hexco-quote-form__field input,
.hexco-quote-form__field textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid #d4d4d4;
	border-radius: 6px;
	font-size: .9rem;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
}

.hexco-quote-form__field input:focus,
.hexco-quote-form__field textarea:focus {
	outline: none;
	border-color: #e2001a;
	box-shadow: 0 0 0 3px rgba(226, 0, 26, .12);
}

.hexco-quote-form__field textarea {
	resize: vertical;
	min-height: 90px;
}

.hexco-quote-form__submit {
	width: 100%;
	padding: 12px 18px;
	background: #e2001a;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
	margin-top: 4px;
}

.hexco-quote-form__submit:hover:not(:disabled) { background: #c2001a; }
.hexco-quote-form__submit:disabled { background: #aaa; cursor: not-allowed; }

.hexco-quote-form__error {
	background: #fff0f0;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	padding: 10px 14px;
	color: #b91c1c;
	font-size: .85rem;
	margin-bottom: 12px;
}

.hexco-quote-form__success {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 6px;
	padding: 10px 14px;
	color: #166534;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: 12px;
}

/* Rechter kolom */
.hexco-quote-modal__right h3 {
	font-size: .95rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 14px;
}

.hexco-quote-summary__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.hexco-quote-summary__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: .85rem;
	padding: 6px 0;
	border-bottom: 1px solid #ebebeb;
	color: #444;
}

.hexco-quote-summary__list li span { flex: 1; color: #777; }
.hexco-quote-summary__list li strong { text-align: right; color: #1a1a1a; font-weight: 600; }

.hexco-quote-summary__addon { font-style: italic; }

.hexco-quote-summary__discount strong { color: #16a34a !important; }

.hexco-quote-summary__total {
	border-top: 2px solid #1a1a1a !important;
	border-bottom: none !important;
	font-weight: 700 !important;
	padding-top: 8px !important;
}

.hexco-quote-summary__total span,
.hexco-quote-summary__total strong {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	font-size: .92rem;
}

/* Referentie-checkbox */
.hexco-quote-reference {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .83rem;
	color: #555;
	cursor: pointer;
	line-height: 1.4;
}

.hexco-quote-reference input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: #e2001a;
	width: 15px;
	height: 15px;
}

/* Mobiel */
@media (max-width: 680px) {
	#hexco-quote-modal { padding: 0; align-items: flex-end; }

	.hexco-quote-modal__dialog {
		border-radius: 14px 14px 0 0;
		max-height: 94vh;
		animation: hexco-quote-slidein .25s ease;
	}

	.hexco-quote-modal__body {
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.hexco-quote-modal__left  { border-right: none; border-bottom: 1px solid #f0f0f0; }
	.hexco-quote-modal__right { background: #fafafa; }
}

@keyframes hexco-quote-slidein {
	from { transform: translateY(100%); }
	to   { transform: translateY(0);   }
}

/* ═══════════════════════════════════════════════════════════════════
   Multi-slot bundle & salade stijlen
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bundle-slots container ────────────────────────────────────────── */
.hex-wcb-bundle-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 8px;
}

/* ── Eén bundle-slot ────────────────────────────────────────────────── */
.hex-wcb-bundle-slot {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

/* Trigger wordt column zodat stepper onder de preview past */
.hex-wcb-bundle-slot .hex-wcb-card-dropdown__trigger {
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative !important;
	padding: 10px 44px 12px 12px !important;
}

/* Chevron rechtsboven in de trigger */
.hex-wcb-bundle-slot .hex-wcb-card-dropdown__chevron {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
}

/* ── Personen-rij binnen de trigger ────────────────────────────────── */
.hex-wcb-slot-persons {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid #f3f4f6;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* Verberg stepper wanneer het slot nog geen pakket heeft (placeholder zichtbaar) */
.hex-wcb-bundle-slot .hex-wcb-card-dropdown__trigger:not(.has-selection) .hex-wcb-slot-persons {
	display: none !important;
}

/* Verberg trigger-balk wanneer dropdown open is zonder selectie */
.hex-wcb-bundle-slot .hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__trigger:not(.has-selection) {
	display: none !important;
}

/* Panel krijgt eigen positie + afronding als de trigger verborgen is */
.hex-wcb-bundle-slot .hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__trigger:not(.has-selection) + .hex-wcb-card-dropdown__panel {
	position: relative !important;
	top: auto !important;
	border-radius: 10px !important;
}

.hex-wcb-slot-persons-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
}

/* Standalone personen (hoofdproduct-modus) */
.hex-wcb-slot-persons--standalone {
	border: 1px solid var(--hex-border, #e5e7eb);
	border-radius: var(--hex-radius, 8px);
	padding: 10px 14px;
	background: #fafafa;
	margin-top: 4px;
}

/* ── Verwijder-slot knop ────────────────────────────────────────────── */
.hex-wcb-remove-slot {
	align-self: flex-end;
	background: none;
	border: 1px solid #e5e7eb;
	border-radius: 5px;
	padding: 4px 10px;
	font-size: 0.78rem;
	color: #6b7280;
	cursor: pointer;
	transition: border-color .15s, color .15s;
	line-height: 1.4;
}

.hex-wcb-remove-slot:hover {
	border-color: #e2001a;
	color: #e2001a;
}

/* ── "NOG EEN PAKKET BESTELLEN?" knop ──────────────────────────────── */
.hex-wcb-add-bundle-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 2px dashed var(--hex-accent, #e2001a);
	border-radius: var(--hex-radius, 8px);
	padding: 10px 18px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--hex-accent, #e2001a);
	cursor: pointer;
	width: 100%;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	transition: background .15s;
	margin-top: 4px;
}

.hex-wcb-add-bundle-btn:hover {
	background: #fff5f5;
}

/* ── Salade-slots container ─────────────────────────────────────────── */
.hex-wcb-salades-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 8px;
}

/* ── Eén salade-slot ────────────────────────────────────────────────── */
.hex-wcb-salade-slot {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Trigger wordt column zodat personen-counter onder de preview past */
.hex-wcb-salade-slot .hex-wcb-card-dropdown__trigger {
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative !important;
	padding: 10px 44px 12px 12px !important;
}

/* Chevron rechtsboven in de salade-trigger */
.hex-wcb-salade-slot .hex-wcb-card-dropdown__chevron {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
}

/* Personen-rij in salade-slot trigger */
.hex-wcb-salade-slot-persons {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid #f3f4f6;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* Verberg stepper wanneer het salade-slot nog geen selectie heeft */
.hex-wcb-salade-slot .hex-wcb-card-dropdown__trigger:not(.has-selection) .hex-wcb-salade-slot-persons {
	display: none !important;
}

/* Verberg trigger-balk wanneer salade-dropdown open is zonder selectie */
.hex-wcb-salade-slot .hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__trigger:not(.has-selection) {
	display: none !important;
}

.hex-wcb-salade-slot .hex-wcb-card-dropdown.is-open .hex-wcb-card-dropdown__trigger:not(.has-selection) + .hex-wcb-card-dropdown__panel {
	position: relative !important;
	top: auto !important;
	border-radius: 10px !important;
}

/* Stepper-knoppen in salade trigger openen/sluiten de dropdown niet */

/* ── Verwijder salade-slot knop ─────────────────────────────────────── */

/* ── "Nog een salade toevoegen" knop ────────────────────────────────── */
.hex-wcb-add-salade-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px dashed #9ca3af;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	transition: border-color .15s, color .15s;
	margin-top: 4px;
}

.hex-wcb-add-salade-btn:hover {
	border-color: var(--hex-accent, #e2001a);
	color: var(--hex-accent, #e2001a);
}

/* ── Salade personen-hint & fout ────────────────────────────────────── */
.hex-wcb-salade-persons-hint {
	font-size: 0.82rem;
	color: #6b7280;
	margin: 6px 0 0;
}

.hex-wcb-salade-persons-hint strong {
	color: #374151;
	font-weight: 700;
}

/* ── "Pakket verwijderen" / "Geen extra pakket" kaart ──────────────── */
.hex-wcb-card-option--remove,
.hex-wcb-card-option--cancel {
	border-bottom: 1px solid #f3f4f6 !important;
	margin-bottom: 4px !important;
	padding-bottom: 10px !important;
}

.hex-wcb-card-option--remove .hex-wcb-card-option__title {
	color: #e2001a !important;
	font-weight: 600;
}

.hex-wcb-card-option--cancel .hex-wcb-card-option__title {
	color: #6b7280 !important;
	font-weight: 600;
}

.hex-wcb-card-option--remove:hover {
	background: #fff5f5 !important;
}

.hex-wcb-card-option--cancel:hover {
	background: #f9fafb !important;
}

.hex-wcb-card-option--remove.hex-wcb-card-option--selected {
	background: #fff5f5 !important;
	border-color: #e2001a !important;
}

/* ── Staffelkorting rij in samenvatting ────────────────────────────── */
.hex-wcb-summary-row--discount {
	background: #f0fdf4;
	border-radius: 6px;
	padding: 4px 8px;
	margin: 0 -8px 4px;
}

.hex-wcb-summary-row--discount .hex-wcb-discount-label {
	color: #16a34a;
	font-weight: 600;
}

.hex-wcb-summary-row--discount .hex-wcb-discount-amount {
	color: #16a34a;
	font-weight: 700;
}

/* ── Tekst onder productafbeelding ─────────────────────────────────────── */
.hex-wcb-below-image-text {
	margin-top: 16px;
	padding: 14px 16px;
	line-height: 1.6;
	color: #333;
}

.hex-wcb-below-image-text p:last-child {
	margin-bottom: 0;
}

.hex-wcb-below-image-text ul,
.hex-wcb-below-image-text ol {
	padding-left: 1.4em;
	margin: 8px 0;
}

.hex-wcb-below-image-text strong {
	color: #1a1a1a;
}

/* Desktop: toon versie in afbeeldingkolom, verberg mobiele variant */
.hex-wcb-below-image-text--mobile {
	display: none;
}

/* Mobiel: verberg versie in afbeeldingkolom, toon onder product-info */
@media (max-width: 849px) {
	.hex-wcb-below-image-text--desktop {
		display: none !important;
	}
	.hex-wcb-below-image-text--mobile {
		display: block;
	}
}

/* ── "Bestellen" knop op shop-/categorie-overzicht ─────────────────────── */
.hex-wcb-loop-order-btn {
	display: inline-block;
	text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Standaard WooCommerce productkaarten — hex-stijl
   (Flatsome .product-small, NIET op zelf-samenstellen pagina)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kaart container ──────────────────────────────────────────────────── */
.product-small .product-small.box {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}

.product-small .product-small.box:hover {
	border-color: rgba(226, 0, 26, .40);
	box-shadow: 0 2px 14px rgba(226, 0, 26, .09);
}

/* ── Afbeelding — full-width bovenaan ─────────────────────────────────── */
.product-small .box-image {
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	margin: 0;
}

.product-small .box-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 0;
}

/* ── Tekst-blok ───────────────────────────────────────────────────────── */
.product-small .box-text.box-text-products {
	padding: 12px 14px 16px;
}

.product-small .box-text.box-text-products:before {
	content: "";
	position: absolute;
	right: 20px;
	width: 30%;
	height: 100%;
	background-image: url(https://bbq.hweo.nl/wp-content/plugins/hex-woocommerce-bundle/assets/images/favicon.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	opacity: 0.05;
	pointer-events: none;
}

/* ── Categorie label ──────────────────────────────────────────────────── */
.product-small .category.product-cat {
	font-size: .7rem !important;
	font-weight: 600 !important;
	color: #999 !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	margin: 0 0 2px !important;
	opacity: .8;
}

/* ── Titel ─────────────────────────────────────────────────────────────── */
.product-small .product-title,
.product-small .product-title a {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #EA5B0B !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	font-family: "Love Ya Like A Sister", sans-serif;
}

/* ── Beschrijving ──────────────────────────────────────────────────────── */
.product-small .box-excerpt,
.product-small .box-excerpt h3 {
	font-size: .78rem !important;
	font-weight: 400 !important;
	color: #777 !important;
	line-height: 1.4 !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ── Prijs ──────────────────────────────────────────────────────────────── */
.product-small .price-wrapper {
	margin: 4px 0 8px !important;
	display: block !important;
}

.product-small .price-wrapper .price,
.product-small .price-wrapper .price .woocommerce-Price-amount,
.product-small .price-wrapper .price bdi {
	font-size: .88rem !important;
	font-weight: 700 !important;
	color: #e2001a !important;
}

/* ── Bestellen / Toevoegen knop ───────────────────────────────────────── */
.product-small .hex-wcb-loop-order-btn,
.product-small .add-to-cart-button a {
	display: inline-block !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	padding: 6px 18px !important;
	border: 2px solid #e2001a !important;
	border-radius: 6px !important;
	color: #e2001a !important;
	background: transparent !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	text-decoration: none !important;
	transition: background .15s, color .15s !important;
	margin-top: 4px !important;
}

.product-small .hex-wcb-loop-order-btn:hover,
.product-small .add-to-cart-button a:hover {
	background: #e2001a !important;
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product-lijst widgets (Recent bekeken, sidebar lijsten)
   ═══════════════════════════════════════════════════════════════════════════ */

ul.product_list_widget {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

ul.product_list_widget li {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

ul.product_list_widget li:last-child {
	border-bottom: none !important;
}

ul.product_list_widget li a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	text-decoration: none !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

ul.product_list_widget li img {
	flex-shrink: 0 !important;
	border-radius: 6px !important;
	object-fit: cover !important;
}

ul.product_list_widget li .product-title {
	font-size: .82rem !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	line-height: 1.3 !important;
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

ul.product_list_widget li .product-title:hover {
	color: #e2001a !important;
}

ul.product_list_widget li > .woocommerce-Price-amount,
ul.product_list_widget li > span > .woocommerce-Price-amount {
	font-size: .8rem !important;
	font-weight: 700 !important;
	color: #e2001a !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Zelf-samenstellen categorie — horizontale kaart-weergave
   Scoped: body.hex-wcb-zelf-samenstellen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar verbergen ──────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen .sidebar,
body.hex-wcb-zelf-samenstellen #sidebar,
body.hex-wcb-zelf-samenstellen .sidebar-area,
body.hex-wcb-zelf-samenstellen aside.sidebar,
body.hex-wcb-zelf-samenstellen [id*="shop-sidebar"]{
	display: none !important;
}

/* Hoofdkolom full-width als sidebar weg is (Flatsome grid-klassen) */
body.hex-wcb-zelf-samenstellen .main-content,
body.hex-wcb-zelf-samenstellen #main-content,
body.hex-wcb-zelf-samenstellen .large-9.col,
body.hex-wcb-zelf-samenstellen .large-8.col,
body.hex-wcb-zelf-samenstellen [class*="large-9"],
body.hex-wcb-zelf-samenstellen [class*="large-8"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* ── Product grid ───────────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen ul.products,
body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ── Kaart: de <li> ─────────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen ul.products li.hex-wcb-zs-item,
body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid li.hex-wcb-zs-item {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Horizontale flex-rij: kaartlink + knop naast elkaar */
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #fff !important;
	transition: border-color .15s, box-shadow .15s !important;
}

body.hex-wcb-zelf-samenstellen ul.products li.hex-wcb-zs-item:hover,
body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid li.hex-wcb-zs-item:hover {
	border-color: rgba(226, 0, 26, .40) !important;
	box-shadow: 0 2px 14px rgba(226, 0, 26, .09) !important;
}

/* ── Kaart-link (afbeelding + info) ─────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	gap: 10px !important;
	padding: 12px 10px 12px 12px !important;
	text-decoration: none !important;
	color: inherit !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card:hover {
	text-decoration: none !important;
}

/* ── Afbeelding ─────────────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__img {
	flex-shrink: 0 !important;
	width: 70px !important;
	height: 70px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* ── Info: titel, beschrijving, prijs ───────────────────────────────────── */
body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 3px !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__title {
	font-size: .85rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__desc {
	font-size: .75rem !important;
	color: #666 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__price {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 4px !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	color: #e2001a !important;
	margin: 0 !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__price .woocommerce-Price-amount {
	color: #e2001a !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-dietary-icons {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	flex-shrink: 0 !important;
}

/* ── "+" knop ───────────────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__btn {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	border-radius: 50% !important;
	background: #1a1a1a !important;
	color: #fff !important;
	font-size: 1.4rem !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	transition: background .15s, transform .1s !important;
	margin: 0 12px 0 6px !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body.hex-wcb-zelf-samenstellen li.hex-wcb-zs-item .hex-wcb-shop-card__btn:hover {
	background: #e2001a !important;
	transform: scale(1.1) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ── Gegroepeerde productweergave ───────────────────────────────────────── */

body.hex-wcb-zelf-samenstellen .hex-wcb-product-group {
	margin-bottom: 36px !important;
}

body.hex-wcb-zelf-samenstellen .hex-wcb-product-group:last-child {
	margin-bottom: 0 !important;
}

body.hex-wcb-zelf-samenstellen .hex-wcb-product-group__title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	margin: 0 0 12px !important;
	padding: 0 0 8px !important;
	border-bottom: 2px solid #f0f0f0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ── Live-filter: groepen tonen/verbergen ───────────────────────────────── */
body.hex-wcb-zelf-samenstellen .hex-wcb-product-group {
	transition: opacity .2s ease, max-height .3s ease;
	overflow: hidden;
}

body.hex-wcb-zelf-samenstellen .hex-wcb-product-group.hex-wcb-group--hidden {
	opacity: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

/* Item-level hide voor tag-filtering (specificiteit moet hoger zijn dan de flex-regel) */
body.hex-wcb-zelf-samenstellen ul.products li.hex-wcb-zs-item.hex-wcb-item--hidden,
body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid li.hex-wcb-zs-item.hex-wcb-item--hidden {
	display: none !important;
}

/* ── Filter pills ──────────────────────────────────────────────────────── */
body.hex-wcb-zelf-samenstellen .hex-wcb-filter-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

.hex-wcb-filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	border: 1.5px solid #e0e0e0;
	border-radius: 20px;
	background: #fff;
	color: #555;
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}

.hex-wcb-filter-pill:hover {
	border-color: var(--hex-accent, #e2001a);
	color: var(--hex-accent, #e2001a);
}

.hex-wcb-filter-pill--active {
	background: var(--hex-accent, #e2001a) !important;
	border-color: var(--hex-accent, #e2001a) !important;
	color: #fff !important;
}

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	body.hex-wcb-zelf-samenstellen ul.products,
	body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 380px) {
	body.hex-wcb-zelf-samenstellen ul.products,
	body.hex-wcb-zelf-samenstellen ul.hex-wcb-shop-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── Zelf-samenstellen: visuele feedback na toevoegen ──────────────────── */

/* Verberg de "Bekijk winkelwagen →" link die WooCommerce in de kaart injecteert. */
body.hex-wcb-zelf-samenstellen .hex-wcb-zs-item a.added_to_cart,
body.hex-wcb-zelf-samenstellen .hex-wcb-zs-item a.wc-forward {
	display: none !important;
}

/* Groene vinkje-staat van de + knop na succesvol toevoegen. */
body.hex-wcb-zelf-samenstellen .hex-wcb-shop-card__btn.hex-wcb-btn-added {
	background: #28a745 !important;
	color: #fff !important;
	transform: scale(1.1) !important;
}

/* ── Sticky productafbeelding op de product-detailpagina ─────────────────── */
/*
 * Flatsome rendert de productpagina als een flex-rij:
 *   .product-top (of .row) → [.col: afbeelding] + [.col: samenvatting]
 *
 * Voor sticky in een flex-container zijn twee dingen vereist:
 *   1. position: sticky + top
 *   2. align-self: flex-start (anders strekt het element zich uit over de
 *      volledige rijhoogte en scrollt sticky nooit)
 */
@media (min-width: 850px) {
	.single-product .product div.product-gallery.col {
		position: sticky !important;
		top: 90px !important;
		align-self: flex-start !important;
	}
}

/* ── ux-products-list / product_list_widget: zelfde kaartuitstraling ───── */
/*
 * De shortcode [hex_product_tag] en andere widgetlijsten gebruiken de Flatsome-
 * klassen ux-products-list / product_list_widget. De HTML-structuur is:
 *   <ul class="ux-products-list product_list_widget">
 *     <li>
 *       <a href="..."><img ...><span class="product-title">...</span></a>
 *       <span class="woocommerce-Price-amount ...">...</span>  ← optioneel
 *     </li>
 *   </ul>
 * We mappen dit visueel naar de hex-wcb-zs-item kaartlook.
 */

ul.ux-products-list.product_list_widget {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* De <li>: horizontale flex-kaart */
ul.ux-products-list.product_list_widget > li {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: border-color .15s, box-shadow .15s !important;
}

ul.ux-products-list.product_list_widget > li:hover {
	border-color: rgba(226, 0, 26, .40) !important;
	box-shadow: 0 2px 14px rgba(226, 0, 26, .09) !important;
}

/* De <a>: flex-rij met afbeelding + titel */
ul.ux-products-list.product_list_widget > li > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	gap: 12px !important;
	padding: 12px !important;
	text-decoration: none !important;
	color: inherit !important;
}

ul.ux-products-list.product_list_widget > li > a:hover {
	text-decoration: none !important;
}

/* De <img>: vaste 70×70 vierkant, afgerond */
ul.ux-products-list.product_list_widget > li > a img {
	flex-shrink: 0 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 6px !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
    left: 10px;
}

/* Productnaam */
ul.ux-products-list.product_list_widget > li > a span.product-title {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: .87rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	line-height: 1.35 !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	text-align:left !important;
	padding-left:50px !important;
}

/* Prijs (staat als sibling naast de <a>, niet erin) */
ul.ux-products-list.product_list_widget > li > .woocommerce-Price-amount,
ul.ux-products-list.product_list_widget > li > span.amount {
	flex-shrink: 0 !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	color: var(--hex-accent, #e2001a) !important;
	padding-right: 14px !important;
	white-space: nowrap !important;
}

ul.ux-products-list.product_list_widget > li > .woocommerce-Price-amount .woocommerce-Price-amount,
ul.ux-products-list.product_list_widget > li > span.amount .woocommerce-Price-amount {
	color: var(--hex-accent, #e2001a) !important;
}

/* ── Zelf-samenstellen categorie-navigator ─────────────────────────────── */

.hex-wcb-cat-nav {
	width: 100%;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 24px;
	position: relative;
}

.hex-wcb-cat-nav__list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 0;
	margin: 0 !important;
	padding: 0 0 6px !important;
	list-style: none !important;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
	cursor: grab;
}

.hex-wcb-cat-nav__list:active {
	cursor: grabbing;
	scroll-behavior: auto;
}

.hex-wcb-cat-nav__list::-webkit-scrollbar {
	height: 4px;
}

.hex-wcb-cat-nav__list::-webkit-scrollbar-track {
	background: transparent;
}

.hex-wcb-cat-nav__list::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}

.hex-wcb-cat-nav__list::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Zorg dat Flatsome row/column wrappers de scroll niet afkappen */
body.hex-wcb-zelf-samenstellen .hex-wcb-cat-nav {
	max-width: 100%;
}

body.hex-wcb-zelf-samenstellen .hex-wcb-cat-nav__list {
	max-width: 100%;
}

body.hex-wcb-zelf-samenstellen .hex-wcb-cat-nav__item {
	max-width: none;
}

.hex-wcb-cat-nav__item {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}

.hex-wcb-cat-nav__link {
	display: block;
	padding: 14px 20px 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #333;
	text-decoration: none !important;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.15s, border-color 0.15s;
	line-height: 1.2;
}

.hex-wcb-cat-nav__link:hover {
	color: var(--hex-accent, #e2001a);
}

.hex-wcb-cat-nav__item--active .hex-wcb-cat-nav__link {
	color: var(--hex-accent, #e2001a);
	font-weight: 700;
	border-bottom-color: var(--hex-accent, #e2001a);
}