/* 420Express Product Manager: badges on product photos (Badges / Tags) and the flavor dropdown (All products > Flavors). */

/* ---------- Flavor dropdown ---------- */
.le-optbox { margin: 2px 0 2px; }
.le-optbox--single { margin: 18px 0 4px; max-width: 360px; }
.le-opt-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 700; }
.le-opt-l small { color: var(--muted, #5b6b60); font-size: 12.5px; font-weight: 600; }
.le-opt {
	width: 100%;
	padding: 9px 36px 9px 12px;
	border: 1.5px solid var(--line, #dde4d8);
	border-radius: 12px;
	background: var(--bg, #f5f7f1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
	color: var(--ink, #12261a);
	font: 600 14px var(--f-body, 'DM Sans', system-ui, sans-serif);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.le-opt:hover { border-color: var(--brand, #1f5a38); }
.le-opt:focus { outline: 0; border-color: var(--brand, #1f5a38); box-shadow: 0 0 0 3px rgba(31, 90, 56, .18); background-color: #fff; }
.le-optbox--single .le-opt { padding: 13px 40px 13px 14px; font-size: 15px; background-color: var(--surface, #fff); }
.le-opt:invalid, .le-opt option[value=""] { color: var(--muted, #5b6b60); }
.le-opt option { color: var(--ink, #12261a); }
.le-opt option:disabled { color: #a3aca5; }
.le-opt.need { border-color: #d7261e; box-shadow: 0 0 0 3px rgba(215, 38, 30, .15); animation: le-opt-shake .4s ease; }
@keyframes le-opt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .le-opt.need { animation: none; } }

/* ---------- Mix & Match: card line + builder on the product page ---------- */
.le-mixcard { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0; }
.le-mixcard-size { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #f0b429, #ffd76a); color: #1a1300; font: 800 12.5px/1.2 var(--f-body, system-ui, sans-serif); }
.le-mixcard small { color: var(--muted, #5b6b60); font-size: 12px; }
.le-mixbtn { background: linear-gradient(135deg, var(--brand, #1f5a38), #2f8a56) !important; white-space: nowrap; }

.le-mix {
	--mx-brand: var(--brand, #1f5a38);
	margin: 18px 0 6px;
	padding: 16px;
	border: 1.5px solid var(--line, #dde4d8);
	border-radius: 18px;
	background: var(--surface, #fff);
	transition: border-color .2s, box-shadow .2s;
}
.le-mix.is-full { border-color: var(--mx-brand); box-shadow: 0 0 0 3px rgba(31, 90, 56, .12); }
.le-mix.need { border-color: #d7261e; box-shadow: 0 0 0 3px rgba(215, 38, 30, .14); animation: le-opt-shake .4s ease; }
.le-mix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.le-mix-head > div:first-child > b { display: block; font: 800 18px/1.2 var(--f-head, system-ui, sans-serif); }
.le-mix-count b { display: inline; }
.le-mix-head small { color: var(--muted, #5b6b60); font-size: 13px; }
.le-mix-count { flex: none; min-width: 64px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--bg, #f5f7f1); font: 700 14px var(--f-body, system-ui, sans-serif); text-align: center; color: var(--muted, #5b6b60); }
.le-mix-count b { color: var(--mx-brand); font-size: 18px; }
.le-mix.is-full .le-mix-count { background: var(--mx-brand); color: #fff; }
.le-mix.is-full .le-mix-count b { color: #fff; }
.le-mix-bar { height: 6px; margin: 12px 0 14px; overflow: hidden; border-radius: 999px; background: var(--line, #dde4d8); }
.le-mix-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mx-brand), #2f8a56, var(--gold, #f0b429)); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.le-mix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px; }
.le-mix-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line, #dde4d8); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.le-mix-item:hover { border-color: var(--mx-brand); }
.le-mix-item.is-on { border-color: var(--mx-brand); background: #eef6f0; }
.le-mix-item.is-out { cursor: default; opacity: .5; }
.le-mix-item.is-out:hover { border-color: var(--line, #dde4d8); }
.le-mix-thumb { flex: none; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 10px; background: linear-gradient(150deg, #2f8a56, #0f2a1d); color: #fff; font: 800 16px var(--f-head, system-ui, sans-serif); }
.le-mix-thumb img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.le-mix-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.le-mix-info b { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.le-mix-info small { color: var(--muted, #5b6b60); font-size: 11.5px; }
.le-mix-st--low { color: #b45309 !important; font-weight: 700; }
.le-mix-st--out { color: #a12622 !important; font-weight: 700; }
.le-mix-step { flex: none; display: inline-flex; align-items: center; overflow: hidden; border: 1.5px solid var(--line, #dde4d8); border-radius: 999px; background: var(--bg, #f5f7f1); }
.le-mix-step button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink, #12261a); font: 700 17px/1 var(--f-body, system-ui, sans-serif); cursor: pointer; }
.le-mix-step button:hover:not(:disabled) { background: var(--mx-brand); color: #fff; }
.le-mix-step button:disabled { color: #b8c1ba; cursor: default; }
.le-mix-step output { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
.le-mix-item.is-on .le-mix-step { border-color: var(--mx-brand); background: #fff; }
.le-mix-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.le-mix-hint { margin: 0; color: var(--muted, #5b6b60); font-weight: 700; font-size: 14px; }
.le-mix.is-full .le-mix-hint { color: var(--mx-brand); }
.le-mix-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line, #dde4d8); color: var(--muted, #5b6b60); font-size: 12.5px; }
.le-mix-clear { padding: 4px 12px; border: 1px solid var(--line, #dde4d8); border-radius: 999px; background: #fff; color: var(--muted, #5b6b60); font-weight: 700; cursor: pointer; }
.le-mix-clear:hover { border-color: #d7261e; color: #d7261e; }
@media (max-width: 600px) { .le-mix { padding: 12px; } .le-mix-grid { grid-template-columns: 1fr; max-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .le-mix.need { animation: none; } .le-mix-bar span { transition: none; } }

/* ---------- Badges ---------- */
.le-bdgs {
	position: absolute;
	z-index: 4;
	top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: calc(100% - 20px);
	pointer-events: none;
}

.le-bdgs--tl { left: 10px; align-items: flex-start; }
.le-bdgs--tr { right: 10px; align-items: flex-end; }
.pdi .le-bdgs { top: 16px; }
.pdi .le-bdgs--tl { left: 16px; }
.pdi .le-bdgs--tr { right: 16px; }

.le-bdg {
	--b: #1f5a38;
	--b2: #2f8a56;
	--f: #fff;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 5px 11px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--b);
	color: var(--f);
	font: 800 12px/1.15 var(--f-body, 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
	letter-spacing: .01em;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}

/* Sizes */
.le-bdg--s { padding: 3px 8px; font-size: 10.5px; }
.le-bdg--l { padding: 7px 14px; font-size: 14px; }
.pdi .le-bdg--m { padding: 6px 13px; font-size: 13px; }

/* Shapes */
.le-bdg--pill { border-radius: 999px; }
.le-bdg--rounded { border-radius: 8px; }
.le-bdg--square { border-radius: 3px; }
.le-bdg--ribbon {
	padding-right: 18px;
	border-radius: 4px 0 0 4px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}

.le-bdgs--tr .le-bdg--ribbon {
	padding-right: 11px;
	padding-left: 18px;
	border-radius: 0 4px 4px 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
}

/* Styles */
.le-bdg--gradient { background: linear-gradient(135deg, var(--b), var(--b2)); }

.le-bdg--glass {
	background: color-mix(in srgb, var(--b) 62%, transparent);
	-webkit-backdrop-filter: blur(8px) saturate(1.4);
	backdrop-filter: blur(8px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 0, 0, .4);
}

.le-bdg--soft {
	background: color-mix(in srgb, var(--b) 16%, #fff);
	color: var(--b);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 30%, #fff);
}

.le-bdg--outline {
	background: rgba(255, 255, 255, .94);
	color: var(--b);
	box-shadow: inset 0 0 0 1.5px var(--b), 0 6px 14px -8px rgba(0, 0, 0, .35);
}

.le-bdg--up { text-transform: uppercase; letter-spacing: .07em; }

/* Effects */
.le-fx-shine::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
	transform: translateX(-130%);
	animation: le-bdg-shine 3.4s ease-in-out infinite;
}

.le-fx-pulse { animation: le-bdg-pulse 1.8s ease-in-out infinite; }
.le-fx-glow { animation: le-bdg-glow 2.2s ease-in-out infinite; }

@keyframes le-bdg-shine {
	0%, 55% { transform: translateX(-130%); }
	85%, 100% { transform: translateX(130%); }
}

@keyframes le-bdg-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.07); }
}

@keyframes le-bdg-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b) 55%, transparent); }
	50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--b) 0%, transparent), 0 0 18px 2px color-mix(in srgb, var(--b) 55%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.le-fx-shine::after,
	.le-fx-pulse,
	.le-fx-glow { animation: none; }
}