/* Productbadges (per product aangezet via WP-admin → FluentCart → Badge).
 * Kleuren met hex-fallback zodat de badge ook klopt op pagina's waar de
 * --sb-*-variabelen niet geladen zijn. */

.sb-badge-wrap {
	position: relative;
}

.sb-badge {
	position: absolute;
	z-index: 4;
	max-width: calc(100% - 1.2rem);
	font-family: var(--sb-font, "Antonio", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(.72rem, 1.4vw, .9rem);
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: .4em .75em;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(20, 60, 44, .22);
	pointer-events: none;
}

/* "Binnenkort verkrijgbaar" — ocher-geel (de achtergrondkleur) met groene tekst. */
.sb-badge--coming {
	background: var(--sb-yellow-ochre, #E6C044);
	color: var(--sb-green-dark, #1E7A54);
}

/* "Sale" — site-groen (donkergroen) met gele tekst; spiegelbeeld van de coming-badge. */
.sb-badge--sale {
	background: var(--sb-green-dark, #1E7A54);
	color: var(--sb-yellow, #F7E87D);
}

/* ---- Positie in de thumbnail — per product te kiezen ---- */

/* Vier hoeken, plat. */
.sb-badge--top-left     { top: .6rem;    left: .6rem;  }
.sb-badge--top-right    { top: .6rem;    right: .6rem; }
.sb-badge--bottom-left  { bottom: .6rem; left: .6rem;  }
.sb-badge--bottom-right { bottom: .6rem; right: .6rem; }

/* Schuine hoeklint: brede band die 45° over de hoek loopt; de thumbnail
 * (overflow:hidden) knipt de uiteinden weg tot een net driehoekslint. */
.sb-badge--ribbon {
	width: 12em;
	max-width: none;
	/* Iets kleiner dan de platte badge, zodat een kort woord (Sale, Nieuw,
	 * Actie) mooi in de diagonale band past. Langere woorden knipt de hoek af —
	 * houd ribbon-teksten dus kort. */
	font-size: clamp(.62rem, 1.05vw, .76rem);
	text-align: center;
	padding: .36em 0;
	border-radius: 0;
	box-shadow: 0 4px 10px rgba(20, 60, 44, .25);
}
.sb-badge--ribbon-top-left     { top: 2em;    left: -3.4em;  transform: rotate(-45deg); }
.sb-badge--ribbon-top-right    { top: 2em;    right: -3.4em; transform: rotate(45deg);  }
.sb-badge--ribbon-bottom-left  { bottom: 2em; left: -3.4em;  transform: rotate(45deg);  }
.sb-badge--ribbon-bottom-right { bottom: 2em; right: -3.4em; transform: rotate(-45deg); }

/* Op de single-product-pagina staat de badge in de flow, boven de bestelknoppen
 * (de boven/onder-keuze geldt alleen voor de thumbnail, niet hier). */
.sb-badge--single {
	position: static;
	max-width: none;
	display: inline-block;
	margin: 0 0 1rem;
	font-size: clamp(.9rem, 1.8vw, 1.15rem);
	pointer-events: auto;
}

/* Uitgeschakelde bestelknop(pen) — alleen bij het "binnenkort"-type. */
.sb-badge-disabled {
	opacity: .45 !important;
	pointer-events: none !important;
	cursor: not-allowed !important;
	filter: grayscale(.4);
}