/* Hemdox Kit Builder — build-your-own bundle (TEREA HUB light / glossy) */

.hemdox-kit {
	--kb-accent: #7C3AED;
	--kb-ink: #101A3A;
	--kb-muted: #5A6076;
	--kb-border: #E7E5F1;
	--kb-panel: #F7F5FD;
	--kb-flame: linear-gradient(120deg, #7C3AED 0%, #FF3D2E 100%);
	--kb-cols: 4;
	color: var(--kb-ink);
	position: relative;
	padding-bottom: 96px; /* room for the sticky bar */
}

/* ---------- Steps ---------- */
.hemdox-kit__step { margin: 0 0 34px; }
.hemdox-kit__steptitle {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 18px; font-size: clamp(18px, 3vw, 22px); font-weight: 800;
	letter-spacing: -.3px; color: var(--kb-ink);
}
.hemdox-kit__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
	background: var(--kb-flame); color: #fff; font-size: 15px; font-weight: 800;
}
.hemdox-kit__hint { font-size: 13px; font-weight: 600; color: var(--kb-muted); margin-left: auto; }

.hemdox-kit__grid {
	display: grid;
	grid-template-columns: repeat(var(--kb-cols-m, 2), minmax(0, 1fr));
	gap: 14px;
}
@media (min-width: 768px)  { .hemdox-kit__grid { grid-template-columns: repeat(var(--kb-cols-t, 3), minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1025px) { .hemdox-kit__grid { grid-template-columns: repeat(var(--kb-cols, 4), minmax(0, 1fr)); gap: 20px; } }

/* ---------- Device option (radio card) ---------- */
.hemdox-kb-opt {
	position: relative; display: flex; flex-direction: column; gap: 6px;
	padding: 14px; background: #fff; border: 1.5px solid var(--kb-border);
	border-radius: 16px; cursor: pointer; text-align: center;
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.hemdox-kb-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kb-accent) 45%, var(--kb-border)); }
.hemdox-kb-opt__radio { position: absolute; opacity: 0; pointer-events: none; }
.hemdox-kb-opt__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #F5F3FC; border-radius: 10px; }
.hemdox-kb-opt__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--kb-ink); }
.hemdox-kb-opt__price { font-size: 14px; font-weight: 800; color: var(--kb-ink); }
.hemdox-kb-opt__price del { color: var(--kb-muted); font-weight: 500; font-size: 12px; margin-right: 4px; }
.hemdox-kb-opt__price ins { text-decoration: none; }
.hemdox-kb-opt__tick {
	position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 999px;
	background: var(--kb-accent); color: #fff; font-size: 13px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
}
/* selected state */
.hemdox-kb-opt:has(.hemdox-kb-opt__radio:checked) {
	border-color: var(--kb-accent);
	background: linear-gradient(180deg, rgba(124,58,237,.06), rgba(124,58,237,.02));
}
.hemdox-kb-opt:has(.hemdox-kb-opt__radio:checked) .hemdox-kb-opt__tick { opacity: 1; transform: scale(1); }
.hemdox-kb-opt__radio:focus-visible + .hemdox-kb-opt__media { outline: 2px solid var(--kb-accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- Flavor pack card ---------- */
.hemdox-kb-pack {
	display: flex; flex-direction: column; gap: 8px; padding: 12px;
	background: #fff; border: 1.5px solid var(--kb-border); border-radius: 16px;
	transition: border-color .2s ease;
}
.hemdox-kb-pack.is-active { border-color: var(--kb-accent); }
.hemdox-kb-pack__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #F5F3FC; border-radius: 10px; }
.hemdox-kb-pack__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--kb-ink); }
.hemdox-kb-pack__price { font-size: 13.5px; font-weight: 800; color: var(--kb-ink); margin-top: auto; }
.hemdox-kb-pack__price del { color: var(--kb-muted); font-weight: 500; font-size: 12px; margin-right: 4px; }
.hemdox-kb-pack__price ins { text-decoration: none; }
.hemdox-kb-pack__qty { margin-top: 4px; }
.hemdox-kb-pack__input[readonly] { background: transparent !important; cursor: default; }

/* ---------- Sticky summary bar ---------- */
.hemdox-kit__bar {
	position: sticky; bottom: 14px; z-index: 20;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 10px; padding: 14px 18px;
	background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid var(--kb-border); border-radius: 18px;
}
.hemdox-kit__barinfo { display: flex; flex-direction: column; }
.hemdox-kit__bartitle { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--kb-muted); }
.hemdox-kit__barmeta { font-size: 14px; font-weight: 700; color: var(--kb-ink); }
.hemdox-kit__total { margin-left: auto; text-align: right; }
.hemdox-kit__totlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kb-muted); }
.hemdox-kit__totval { font-size: 22px; font-weight: 800; color: var(--kb-ink); }
.hemdox-kit__add { flex: 0 0 auto; width: auto; padding-left: 26px; padding-right: 26px; }
.hemdox-kit__add[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.hemdox-kit__add.loading { opacity: .7; pointer-events: none; }

.hemdox-kit__msg { margin: 12px 2px 0; font-size: 14px; font-weight: 600; min-height: 1em; }
.hemdox-kit__msg.is-ok { color: #16803C; }
.hemdox-kit__msg.is-err { color: #C4341C; }
.hemdox-kit__msg a { color: var(--kb-accent); font-weight: 700; }

@media (max-width: 600px) {
	.hemdox-kit__bar { gap: 10px; padding: 12px 14px; }
	.hemdox-kit__total { margin-left: 0; text-align: left; }
	.hemdox-kit__add { width: 100%; }
}