/* Valabi Badges 2 storefront styles. Every selector is scoped with vbadge / vb-.
 * Style codes match the approved design gallery: B1–B5 pills, L1–L5 lines,
 * V1–V7 image covers, K1–K4 product-page cards. */

.vbadge {
	--vb-text: #145e5c;
	--vb-bg: #e6f4f3;
	--vb-border: #bfe6e4;
	--vb-r: 8px;
	--vb-fs: 12px;
	direction: rtl;
	box-sizing: border-box;
	color: var(--vb-text);
	font-family: inherit;
	font-size: var(--vb-fs);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}
.vbadge *, .vbadge-slot *, .vbadge-media * { box-sizing: border-box; }
.vbadge b, .vbadge strong { font-weight: 800; color: inherit; }
.vbadge-icon { display: block; flex: 0 0 auto; }
.vb-mob { display: none; }

/* Tones ------------------------------------------------------------------ */
.vbadge-tone--theme { --vb-text: var(--primary-color, #8b1538); --vb-bg: #fff; --vb-border: var(--primary-color, #8b1538); }
.vbadge-tone--neutral { --vb-text: #4b5563; --vb-bg: #f3f4f6; --vb-border: #d9dde2; }
.vbadge-tone--burgundy { --vb-text: #8b1538; --vb-bg: #f8e9ed; --vb-border: #ecc5d0; }
.vbadge-tone--teal { --vb-text: #145e5c; --vb-bg: #e6f4f3; --vb-border: #bfe6e4; }
.vbadge-tone--emerald { --vb-text: #176746; --vb-bg: #e7f5ee; --vb-border: #b8e3d1; }
.vbadge-tone--indigo { --vb-text: #3730a3; --vb-bg: #eef2ff; --vb-border: #c7d2fe; }
.vbadge-tone--violet { --vb-text: #6d28d9; --vb-bg: #f5f3ff; --vb-border: #ddd6fe; }
.vbadge-tone--rose { --vb-text: #be2859; --vb-bg: #fff1f5; --vb-border: #f3bfd0; }
.vbadge-tone--amber { --vb-text: #8a4b06; --vb-bg: #fff8e7; --vb-border: #efd397; }
.vbadge-tone--gold { --vb-text: #8a6212; --vb-bg: #f7f1e4; --vb-border: #e6d3a8; }
.vbadge-tone--ink { --vb-text: #1e1a1b; --vb-bg: #f2efec; --vb-border: #d6cfc9; }
.vbadge-tone--slate { --vb-text: #334155; --vb-bg: #f1f5f9; --vb-border: #cbd5e1; }

.vbadge-shape--compact { --vb-r: 4px; }
.vbadge-shape--rounded { --vb-r: 8px; }
.vbadge-shape--pill { --vb-r: 999px; }
.vbadge-size--small { --vb-fs: 11px; }
.vbadge-size--medium { --vb-fs: 12px; }
.vbadge-size--large { --vb-fs: 13.5px; }
.vbadge-has-shadow { box-shadow: 0 4px 14px rgba(20, 30, 45, .1); }

/* Slots ------------------------------------------------------------------ */
.vbadge-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: .45em 0;
	direction: rtl;
}
.vbadge-slot > .vbadge-k--line,
.vbadge-slot > .vbadge-k--card { flex: 1 1 100%; min-width: 0; }
.vbadge-slot--single_after_summary { clear: both; margin: 1.5em 0; }
.custom-product-page > .vbadge-slot { max-width: var(--fs-container, 1080px); margin-left: auto; margin-right: auto; padding: 0 15px; }
.vbadge-slot--card_under_title { margin: .2em 0 .3em; }
.vbadge-slot--cart_totals { margin-top: .9em; }
.vbadge-align--center { justify-content: center; }
.vbadge-align--end { justify-content: flex-end; }
.text-center .vbadge-slot, .vbadge-slot.vbadge-align--center { justify-content: center; }
.text-center .vbadge-slot > .vbadge-k--line { justify-content: center; text-align: center; }

/* Pills (B1–B5) --------------------------------------------------------- */
.vbadge-k--pill, .vbadge--more {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .5em .8em;
	border-radius: var(--vb-r);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	max-width: 100%;
}
.vbadge--b1 { background: var(--vb-bg); }
.vbadge--b2 { background: var(--vb-text); color: #fff; }
.vbadge--b3 { background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-text); }
.vbadge--b4 {
	background: var(--vb-text);
	color: #fff;
	border-radius: 4px;
	padding: .5em .8em .5em 1.35em;
	clip-path: polygon(.75em 0, 100% 0, 100% 100%, .75em 100%, 0 50%);
}
.vbadge--b5, .vbadge--v7 {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5.2em;
	height: 5.2em;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--vb-text);
	box-shadow: 0 0 0 1.5px var(--vb-text), inset 0 0 0 4px #fff, inset 0 0 0 5px var(--vb-text);
	line-height: 1.1;
	text-align: center;
	white-space: normal;
}
.vbadge--b5 b, .vbadge--v7 b { font-size: 1.05em; }
.vbadge--b5 small, .vbadge--v7 small { font-size: .55em; letter-spacing: .12em; font-weight: 600; }
.vbadge--more { background: #fff; color: #5c5356; box-shadow: inset 0 0 0 1px #ddd6d0; font-size: 12px; }

/* Lines (L1–L5) --------------------------------------------------------- */
.vbadge-k--line { display: flex; align-items: center; gap: .45em; margin: 0; padding: 0; list-style: none; text-align: start; }
.vbadge-k--line .vb-t { min-width: 0; }
.vbadge--l1 { border-top: 1px solid var(--vb-border); padding-top: .55em; }
.vbadge--l2 { color: #3b3436; }
.vbadge--l2 .vb-chip { white-space: nowrap; background: var(--vb-text); color: #fff; border-radius: 6px; padding: .2em .55em; font-weight: 800; line-height: 1.4; }
.vbadge--l2 .vb-t b { color: var(--vb-text); }
.vbadge--l3 { flex-direction: column; align-items: stretch; gap: .35em; }
.vb-bar { display: grid; grid-template-columns: repeat(var(--vb-n, 4), minmax(0, 1fr)); gap: 3px; }
.vb-bar i { display: block; height: 4px; border-radius: 2px; background: var(--vb-border); }
.vb-bar i:first-child { background: var(--vb-text); }
.vbadge--l4 { flex-direction: column; align-items: flex-start; gap: .3em; }
.vbadge--l4 li { display: flex; align-items: center; gap: .4em; margin: 0; padding: 0; list-style: none; }
.vbadge--l5 { flex-wrap: wrap; gap: 5px; }
.vbadge--l5 .vb-chip { display: inline-flex; align-items: center; gap: .3em; padding: .35em .65em; border-radius: var(--vb-r); background: var(--vb-bg); font-weight: 700; font-size: .92em; line-height: 1.2; }

/* Card image overlays ---------------------------------------------------- */
.vbadge-media {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: block;
	overflow: hidden;
	pointer-events: none;
	direction: ltr;
}
/* Generic themes: give the card/gallery a positioning context only when it holds our overlay. */
.products li.product:has(> .vbadge-media, > a > .vbadge-media), .woocommerce-product-gallery:has(.vbadge-media) { position: relative; }
.vbadge-stack { position: absolute; display: flex; flex-direction: column; gap: 5px; z-index: 3; max-width: calc(100% - 20px); }
.vbadge-stack--tr { top: 10px; right: 10px; align-items: flex-end; }
.vbadge-stack--tl { top: 10px; left: 10px; align-items: flex-start; }
.vbadge-stack--br { bottom: 10px; right: 10px; align-items: flex-end; }
.vbadge-stack--bl { bottom: 10px; left: 10px; align-items: flex-start; }
.vbadge-media .vbadge-k--pill { box-shadow: 0 2px 8px rgba(20, 20, 20, .08); }
.vbadge-media .vbadge--b3 { box-shadow: inset 0 0 0 1.5px var(--vb-text), 0 2px 8px rgba(20, 20, 20, .08); }
.vbadge-media .vbadge--b5 { box-shadow: 0 0 0 1.5px var(--vb-text), inset 0 0 0 4px #fff, inset 0 0 0 5px var(--vb-text), 0 2px 8px rgba(20, 20, 20, .1); }
.vbadge-media--single_image .vbadge-stack--tr { top: 14px; right: 14px; }
/* Keep corner stacks clear of a bottom strip (V3) or top banner (V4). */
.vbadge-media--strip .vbadge-stack--br, .vbadge-media--strip .vbadge-stack--bl { bottom: 46px; }
.vbadge-media--banner .vbadge-stack--tr, .vbadge-media--banner .vbadge-stack--tl { top: 44px; }
.vbadge-fs-labels { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 5px; }

/* Covers (V1–V7) --------------------------------------------------------- */
.vbadge-k--cover { position: absolute; z-index: 2; direction: rtl; font-weight: 800; }
.vbadge--v1 { top: 0; width: 7.6em; height: 7.6em; overflow: hidden; }
.vbadge--v1.vbadge-side--right { right: 0; }
.vbadge--v1.vbadge-side--left { left: 0; }
.vbadge--v1 .vb-ribbon {
	position: absolute;
	top: 1.75em;
	width: 10.6em;
	padding: .45em 0;
	background: var(--vb-text);
	color: #fff;
	text-align: center;
	line-height: 1.3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.vbadge--v1.vbadge-side--right .vb-ribbon { right: -2.6em; transform: rotate(45deg); }
.vbadge--v1.vbadge-side--left .vb-ribbon { left: -2.6em; transform: rotate(-45deg); }
.vbadge--v2 { top: 14px; }
.vbadge--v2.vbadge-side--right { right: 0; }
.vbadge--v2.vbadge-side--left { left: 0; }
.vbadge--v2 .vb-tab { display: block; writing-mode: vertical-rl; background: var(--vb-text); color: #fff; padding: .9em .45em; line-height: 1.2; }
.vbadge--v2.vbadge-side--right .vb-tab { border-radius: 6px 0 0 6px; }
.vbadge--v2.vbadge-side--left .vb-tab { border-radius: 0 6px 6px 0; }
.vbadge--v3 {
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	gap: .45em;
	padding: .7em .85em;
	background: color-mix(in srgb, var(--vb-text) 94%, transparent);
	color: #fff;
	font-weight: 500;
	line-height: 1.35;
}
.vbadge--v4 { inset: 0 0 auto 0; padding: .55em .8em; background: var(--vb-text); color: #fff; text-align: center; line-height: 1.35; }
.vbadge--v5 { inset: 8px; border: 2px solid var(--vb-text); border-radius: min(var(--vb-r), 10px); }
.vbadge--v5 .vb-tab { position: absolute; top: -10px; right: 50%; transform: translateX(50%); background: var(--vb-text); color: #fff; padding: .3em 1em; border-radius: 0 0 8px 8px; line-height: 1.4; white-space: nowrap; }
.vbadge--v6 { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(244, 242, 239, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vbadge--v6 .vb-label { background: #fff; color: var(--vb-text); border: 1px solid #cfc7c1; border-radius: 999px; padding: .55em 1.3em; line-height: 1.3; }
.vbadge--v7 { position: absolute; bottom: 12px; transform: rotate(-8deg); }
.vbadge--v7.vbadge-side--right { right: 12px; }
.vbadge--v7.vbadge-side--left { left: 12px; }

/* Product-page cards (K1–K4) -------------------------------------------- */
.vbadge-k--card { display: block; width: 100%; margin: .35em 0; }
.vbadge--k1 { border: 1px solid var(--vb-border); background: var(--vb-bg); border-radius: min(var(--vb-r), 12px); padding: 1.1em 1.15em; }
.vbadge--k1 .vb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .9em; flex-wrap: wrap; }
.vbadge--k1 .vb-head b { font-size: 1.2em; }
.vb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(6.5em, calc((100% - (var(--vb-n, 4) - 1) * .5em) / var(--vb-n, 4))), 1fr)); gap: .7em .5em; margin: 0; padding: 0; list-style: none; }
.vb-steps li { display: flex; flex-direction: column; align-items: center; gap: .3em; margin: 0; padding: 0; list-style: none; text-align: center; }
.vb-step { display: flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-text); font-weight: 800; }
.vb-steps li:first-child .vb-step { background: var(--vb-text); color: #fff; }
.vb-step-label { font-size: .95em; opacity: .85; }
.vbadge--k2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: .6em; padding: 0; list-style: none; }
.vbadge--k2 li { display: flex; flex-direction: column; align-items: center; gap: .45em; margin: 0; padding: 1em .7em; border: 1px solid var(--vb-border); border-radius: min(var(--vb-r), 12px); background: #fff; text-align: center; list-style: none; }
.vbadge--k2 li b { font-size: 1.08em; line-height: 1.3; }
.vbadge--k2 li span { color: #5c5356; font-size: .95em; }
.vbadge--k3 { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.1em 1.25em; border-radius: min(var(--vb-r), 12px); background: var(--vb-text); color: #fff; }
.vb-k3-text { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.vbadge--k3 .vb-small { opacity: .88; font-size: 1.05em; }
.vbadge--k3 .vb-big { font-size: 1.85em; line-height: 1.25; }
.vb-k3-cta { flex: none; background: #fff; color: var(--vb-text); border-radius: 999px; padding: .6em 1.1em; font-weight: 800; }
.vbadge--k4 { display: flex; align-items: flex-start; gap: .75em; padding: 1em 1.15em; border-radius: min(var(--vb-r), 12px); background: var(--vb-bg); }
.vbadge--k4 .vbadge-icon { margin-top: .15em; }
.vb-k4-text { display: flex; flex-direction: column; gap: .2em; }
.vb-k4-text b { font-size: 1.15em; }
.vb-k4-text span { line-height: 1.75; font-size: 1.05em; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 549px) {
	.vb-desk, .vb-desk-only { display: none !important; }
	.vb-mob { display: inline; }
	.vbadge { --vb-fs: 10.5px; }
	.vbadge-size--large { --vb-fs: 12px; }
	.vbadge-k--pill { padding: .45em .65em; }
	.vbadge-stack { gap: 4px; }
	.vbadge-stack--tr, .vbadge-stack--tl { top: 6px; }
	.vbadge-stack--tr, .vbadge-stack--br { right: 6px; }
	.vbadge-stack--tl, .vbadge-stack--bl { left: 6px; }
	.vbadge-stack--br, .vbadge-stack--bl { bottom: 6px; }
	.vbadge-media--strip .vbadge-stack--br, .vbadge-media--strip .vbadge-stack--bl { bottom: 38px; }
	.vbadge-stack > :nth-child(n+3):not(:last-child) { display: none; }
	.vbadge--v3 { padding: .55em .65em; }
	.vbadge--b5, .vbadge--v7 { width: 4.6em; height: 4.6em; }
	.vbadge-slot .vbadge--k1, .vbadge-slot .vbadge--k2, .vbadge-slot .vbadge--k3, .vbadge-slot .vbadge--k4 { --vb-fs: 12px; }
	.vbadge--k3 .vb-big { font-size: 1.6em; }
	.vb-steps { grid-template-columns: repeat(min(var(--vb-n, 4), 4), minmax(0, 1fr)); gap: .6em .3em; }
	.vb-steps b { font-size: .92em; }
}

@media (prefers-reduced-motion: reduce) {
	.vbadge { transition: none; }
}