/* Shared Build a Bundle experience: homepage, PDP runtime and dedicated page. */

.zlz-bundle-experience,
.zlz-bb-hero {
	position: relative;
	overflow: hidden;
	background: var(--zlz-cream, #FFF9F2);
	color: var(--zlz-text, #271C2C);
}

.zlz-bundle-experience {
	padding: 64px 0;
}

.zlz-bundle-experience__content,
.zlz-bb-hero__content {
	position: relative;
	z-index: 2;
}

.zlz-bundle-experience__header {
	max-width: 720px;
	margin: 0 auto 18px;
	text-align: center;
}

.zlz-bundle-experience__header--page {
	margin-bottom: 12px;
}

.zlz-bundle-experience__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(123, 63, 228, 0.10);
	color: var(--zlz-primary, #7B3FE4);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .10em;
	line-height: 1;
}

.zlz-bundle-experience__header h1,
.zlz-bundle-experience__header h2 {
	margin: 12px 0 8px;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.05;
	letter-spacing: -.035em;
}

.zlz-bundle-experience__header p {
	color: #6B6478;
	font-size: 16px;
	line-height: 1.6;
}

.zlz-character-marquee--bundle,
.zlz-character-marquee--bundle-page {
	max-width: 980px;
	margin: 4px auto 24px;
}

.zlz-bundle-experience__layout,
.zlz-bb-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
	gap: 28px;
	align-items: stretch;
	max-width: 980px;
	margin: 0 auto;
}

.zlz-bundle-experience__tiers {
	display: grid;
	gap: 10px;
}

.zlz-bundle-tier {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 98px;
	padding: 15px 17px;
	border: 1.5px solid #E4DCE9;
	border-radius: 16px;
	background: #FFFFFF;
	color: var(--zlz-text, #271C2C);
	text-align: left;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(39, 28, 44, .04);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.zlz-bundle-tier:hover {
	border-color: rgba(123, 63, 228, .55);
	box-shadow: 0 10px 24px rgba(39, 28, 44, .08);
	transform: translateY(-1px);
}

.zlz-bundle-tier.is-active {
	border-color: var(--zlz-primary, #7B3FE4);
	background: #FCFAFF;
	box-shadow: 0 10px 28px rgba(123, 63, 228, .13);
}

.zlz-bundle-tier__radio {
	width: 20px;
	height: 20px;
	border: 2px solid #CFC5D6;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 4px #fff;
}

.zlz-bundle-tier.is-active .zlz-bundle-tier__radio {
	border-color: var(--zlz-primary, #7B3FE4);
	background: var(--zlz-primary, #7B3FE4);
}

.zlz-bundle-tier__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.zlz-bundle-tier__title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.zlz-bundle-tier__title-row strong {
	font-size: 18px;
	font-weight: 700;
}

.zlz-bundle-tier__title-row em {
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--zlz-accent-orange, #F09C39);
	color: #fff;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .06em;
}

.zlz-bundle-tier.is-best-value .zlz-bundle-tier__title-row em {
	background: var(--zlz-accent-green, #B9D355);
	color: #273018;
}

.zlz-bundle-tier__label {
	color: var(--zlz-primary, #7B3FE4);
	font-size: 12px;
	font-weight: 600;
}

.zlz-bundle-tier__copy small {
	color: #7C7483;
	font-size: 12px;
	font-weight: 400;
}

.zlz-bundle-tier__price {
	display: flex;
	min-width: 105px;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
}

.zlz-bundle-tier__price del {
	color: #9A93A5;
	font-size: 11px;
	font-weight: 400;
}

.zlz-bundle-tier__price strong {
	color: var(--zlz-text, #271C2C);
	font-size: 20px;
	font-weight: 700;
}

.zlz-bundle-tier__price small {
	color: #31877F;
	font-size: 11px;
	font-weight: 600;
}

.zlz-bundle-live-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 13px;
	min-height: 100%;
	padding: 24px;
	border: 1px solid #E4DCE9;
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 14px 38px rgba(39, 28, 44, .08);
	overflow: hidden;
}

.zlz-bundle-live-card--page {
	padding-bottom: 36px;
}

.zlz-bundle-live-card__top,
.zlz-bundle-live-card__price-row,
.zlz-bundle-live-card__details {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.zlz-bundle-live-card__top span,
.zlz-bundle-live-card__price-row span,
.zlz-bundle-live-card__details span {
	color: #776F7F;
	font-size: 12px;
}

.zlz-bundle-live-card__top strong,
.zlz-bundle-live-card__price-row strong,
.zlz-bundle-live-card__details strong {
	color: var(--zlz-text, #271C2C);
	font-size: 16px;
	font-weight: 700;
}

.zlz-bundle-live-card__count,
.zlz-bt-summary__count {
	font-size: 15px;
	font-weight: 600;
}

.zlz-bt-summary__avatars {
	display: flex;
	align-items: center;
	min-height: 38px;
}

.zlz-avatar {
	width: 38px;
	height: 38px;
	margin-left: -9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #F2ECF8;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.zlz-avatar:first-child { margin-left: 0; }
.zlz-avatar img { width: 100%; height: 100%; object-fit: cover; }

.zlz-bundle-summary__progress {
	height: 7px;
	margin: 0;
	border-radius: 999px;
	background: #EEE8F1;
	overflow: hidden;
}

.zlz-bundle-summary__progress-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--zlz-primary, #7B3FE4), var(--zlz-accent-pink, #D95380));
	transition: width .25s ease;
}

.zlz-bundle-live-card .zlz-btn {
	margin-top: 2px;
	min-height: 48px;
	border-radius: 12px;
	font-weight: 700;
}

.zlz-bundle-live-card__note {
	color: #8A818F;
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
}

/* Exact, deterministic character placements. Section overflow clips all edges. */
.zlz-decor-character--bundle-home-left {
	left: -28px;
	bottom: -50px;
	width: 150px;
	transform: rotate(5deg);
}

.zlz-decor-character--bundle-home-right {
	right: -18px;
	top: 28px;
	width: 122px;
	transform: rotate(8deg);
}

.zlz-decor-character--bundle-page-left {
	left: -24px;
	bottom: -78px;
	width: 170px;
	transform: rotate(-4deg);
}

.zlz-decor-character--bundle-page-right {
	right: -52px;
	top: 44px;
	width: 190px;
	transform: rotate(-8deg);
}

.zlz-decor-character--bundle-summary-reindeer {
	right: -18px;
	bottom: -38px;
	width: 132px;
	opacity: .95;
}

/* Dedicated page hero */
.zlz-bb-hero {
	padding: 58px 0 48px;
}

.zlz-bb-start-btn {
	width: 100%;
	min-height: 50px;
	margin-top: 14px;
	border-radius: 12px;
	font-weight: 700;
}

.zlz-bb-hero__slots {
	display: grid;
	grid-template-columns: repeat(3, 58px);
	gap: 8px;
	justify-content: center;
	min-height: 124px;
}

.zlz-bb-slot {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border: 1.5px dashed #D7CBDE;
	border-radius: 12px;
	background: #FAF7FC;
	overflow: hidden;
}

.zlz-bb-slot.is-filled {
	border-style: solid;
	border-color: var(--zlz-primary, #7B3FE4);
	background: #fff;
}

.zlz-bb-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zlz-bb-slot__num {
	color: #C7BCCA;
	font-size: 14px;
	font-weight: 600;
}

.zlz-bb-slot__more {
	display: grid;
	place-items: center;
	min-height: 58px;
	color: #817686;
	font-size: 11px;
	font-weight: 600;
}

.zlz-grid-anchor { height: 1px; }

/* Sticky compact status after the hero. */
.zlz-bundle-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid #E9E1EB;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(12px);
}

.zlz-bundle-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.zlz-pack-tabs {
	display: flex;
	gap: 7px;
}

.zlz-pack-tab {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 12px;
	border: 1px solid #E4DCE9;
	border-radius: 10px;
	background: #fff;
	color: #6B6478;
	cursor: pointer;
}

.zlz-pack-tab.is-active {
	border-color: var(--zlz-primary, #7B3FE4);
	background: var(--zlz-primary, #7B3FE4);
	color: #fff;
}

.zlz-pack-tab__size { font-size: 12px; font-weight: 600; }
.zlz-pack-tab__price { font-size: 9px; opacity: .82; }

.zlz-bundle-workspace {
	padding: 48px 0 70px;
	background: #fff;
}

.zlz-bundle-workspace__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 16px;
}

.zlz-bundle-workspace__heading h2 {
	margin-top: 8px;
	font-size: clamp(26px, 3vw, 38px);
}

.zlz-bundle-workspace__heading > p {
	max-width: 360px;
	color: #766E7B;
	font-size: 13px;
	text-align: right;
}

.zlz-bundle-controls { padding: 0; }

.zlz-bundle-search {
	width: 100%;
	min-height: 48px;
	padding: 11px 15px;
	border: 1px solid #DED5E2;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	outline: none;
}

.zlz-bundle-search:focus {
	border-color: var(--zlz-primary, #7B3FE4);
	box-shadow: 0 0 0 3px rgba(123,63,228,.10);
}

.zlz-theme-chips {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding: 12px 0 2px;
	scrollbar-width: none;
}

.zlz-theme-chips::-webkit-scrollbar { display: none; }

.zlz-theme-chip {
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 1px solid #DED5E2;
	border-radius: 999px;
	background: #fff;
	color: #6B6478;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.zlz-theme-chip.is-active {
	border-color: var(--zlz-primary, #7B3FE4);
	background: var(--zlz-primary, #7B3FE4);
	color: #fff;
}

.zlz-bundle-hint {
	padding-top: 10px;
	color: #8E8592;
	font-size: 11px;
}

.zlz-bundle-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	padding: 18px 0 28px;
}

.zlz-figure-tile {
	position: relative;
	aspect-ratio: 1;
	border: 2px solid transparent;
	border-radius: 14px;
	background: #F4F0F5;
	box-shadow: 0 3px 10px rgba(39,28,44,.04);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.zlz-figure-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(39,28,44,.10);
}

.zlz-figure-tile.is-selected {
	border-color: var(--zlz-primary, #7B3FE4);
}

.zlz-figure-tile__check {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--zlz-primary, #7B3FE4);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.zlz-bb-footer {
	position: sticky;
	bottom: 14px;
	z-index: 15;
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}

.zlz-bundle-add-to-cart {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: 14px;
	background: var(--zlz-primary, #7B3FE4);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(123,63,228,.25);
}

.zlz-bundle-add-to-cart:disabled {
	background: #E5DFE7;
	color: #847A88;
	cursor: not-allowed;
	box-shadow: none;
}

.zlz-bb-btn__fill {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 0;
	background: rgba(123,63,228,.24);
	transition: width .25s ease;
}

.zlz-bb-footer p {
	margin-top: 7px;
	color: #938A96;
	font-size: 9px;
}

/* Modal shared by homepage and PDP. */
.zlz-bundle-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	background: rgba(39,28,44,.74);
	padding: 24px;
}

.zlz-bundle-modal__dialog {
	max-width: 940px;
	min-height: calc(100vh - 48px);
	margin: 0 auto;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}

.zlz-bundle-modal__header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 20px;
	border-bottom: 1px solid #E9E1EB;
	background: rgba(255,255,255,.97);
}

.zlz-bundle-modal__header strong { display: block; font-size: 16px; }
.zlz-bundle-modal__header span { display: block; color: #756D7A; font-size: 11px; }
.zlz-bundle-modal__header-actions { display: flex; align-items: center; gap: 12px; }
.zlz-bundle-modal__progress { width: 140px; height: 6px; border-radius: 999px; background: #E9E2EC; overflow: hidden; }
.zlz-bundle-modal__progress span { height: 100%; background: var(--zlz-primary, #7B3FE4); }
.zlz-bundle-modal__close { border: 0; background: transparent; color: #655D69; font-size: 27px; cursor: pointer; }

.zlz-bundle-modal__controls { padding: 15px 20px 0; }
.zlz-bundle-modal__controls input { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid #DED5E2; border-radius: 11px; }
.zlz-bundle-modal__controls p { margin-top: 8px; color: #817986; font-size: 10px; }
.zlz-bundle-modal__chips { display: flex; gap: 7px; overflow-x: auto; padding-top: 10px; }
.zlz-bundle-modal__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 16px 20px; }
.zlz-bundle-loading { grid-column: 1 / -1; padding: 22px; color: #837A88; }
.zlz-bundle-modal__footer { padding: 0 20px 22px; }

/* Existing selection and variant popovers. */
.zlz-variant-popover { position:absolute; top:100%; left:0; margin-top:6px; width:220px; padding:10px; border:1px solid #E5E1ED; border-radius:10px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:20; cursor:default; }
.zlz-variant-popover__title { margin-bottom:8px; font-size:12px; font-weight:600; }
.zlz-variant-popover__option { display:flex; align-items:center; justify-content:space-between; padding:8px; border-radius:8px; cursor:pointer; font-size:12px; }
.zlz-variant-popover__option:hover { background:#F8F3FF; }
.zlz-variant-popover__remove { margin-top:4px; padding:6px; color:#F09C39; font-size:11px; text-align:center; cursor:pointer; }

.zlz-selected-popup { display:none; position:fixed; inset:0; z-index:1100; }
.zlz-selected-popup.is-open { display:block; }
.zlz-selected-popup__backdrop { position:absolute; inset:0; background:rgba(39,28,44,.58); }
.zlz-selected-popup__card { position:relative; display:flex; flex-direction:column; max-width:430px; max-height:80vh; margin:60px auto; border-radius:16px; background:#fff; overflow:hidden; }
.zlz-selected-popup__header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #EAE4EC; }
.zlz-selected-popup__title { font-size:15px; font-weight:700; }
.zlz-selected-popup__subtitle { color:#766E7B; font-size:11px; }
.zlz-selected-popup__close { border:0; background:transparent; color:#6B6478; font-size:24px; cursor:pointer; }
.zlz-selected-popup__list { flex:1; overflow-y:auto; padding:8px 12px; }
.zlz-selected-popup__item { display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid #F1ECF2; }
.zlz-selected-popup__icon { display:grid; place-items:center; width:40px; height:40px; border-radius:9px; background:#F2F0F7; overflow:hidden; }
.zlz-selected-popup__icon img { width:100%; height:100%; object-fit:cover; }
.zlz-selected-popup__remove { color:#F09C39; cursor:pointer; }
.zlz-selected-popup__hint { padding:10px 6px; color:#928996; font-size:12px; }
.zlz-selected-popup__footer { padding:14px 18px; border-top:1px solid #EAE4EC; }

@media (max-width: 900px) {
	.zlz-bundle-experience__layout,
	.zlz-bb-hero__inner {
		grid-template-columns: 1fr;
	}
	.zlz-bundle-live-card { min-height: 0; }
	.zlz-decor-character--bundle-page-left,
	.zlz-decor-character--bundle-page-right { opacity: .55; }
	.zlz-bundle-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 640px) {
	.zlz-bundle-experience,
	.zlz-bb-hero { padding: 44px 0 36px; }
	.zlz-bundle-experience__header h1,
	.zlz-bundle-experience__header h2 { font-size: 32px; }
	.zlz-bundle-experience__header p { font-size: 14px; }
	.zlz-bundle-tier { grid-template-columns: 18px minmax(0,1fr) auto; min-height: 88px; padding: 13px 12px; gap: 9px; }
	.zlz-bundle-tier__radio { width:18px; height:18px; }
	.zlz-bundle-tier__title-row strong { font-size:16px; }
	.zlz-bundle-tier__title-row em { font-size:8px; }
	.zlz-bundle-tier__price { min-width:82px; }
	.zlz-bundle-tier__price strong { font-size:17px; }
	.zlz-bundle-live-card { padding:19px; }
	.zlz-decor-character--bundle-home-left { width:92px; left:-30px; bottom:-30px; opacity:.75; }
	.zlz-decor-character--bundle-home-right { width:76px; right:-22px; top:72px; opacity:.8; }
	.zlz-decor-character--bundle-page-left,
	.zlz-decor-character--bundle-page-right,
	.zlz-decor-character--bundle-summary-reindeer { display:none; }
	.zlz-bb-hero__slots { grid-template-columns: repeat(6, 42px); gap:5px; min-height:42px; }
	.zlz-bb-slot { width:42px; height:42px; border-radius:9px; }
	.zlz-bb-slot__more { grid-column:1/-1; min-height:auto; }
	.zlz-bundle-topbar { top:auto; bottom:0; }
	.zlz-bundle-topbar__inner { flex-wrap:nowrap; }
	.zlz-pack-tabs { display:none; }
	.zlz-bundle-topbar__summary { width:100%; }
	.zlz-bundle-workspace__heading { align-items:flex-start; flex-direction:column; gap:8px; }
	.zlz-bundle-workspace__heading > p { text-align:left; }
	.zlz-bundle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
	.zlz-bundle-modal { padding:0; }
	.zlz-bundle-modal__dialog { min-height:100vh; border-radius:0; }
	.zlz-bundle-modal__progress { width:84px; }
	.zlz-bundle-modal__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; padding:14px; }
	.zlz-bundle-modal__header,
	.zlz-bundle-modal__controls,
	.zlz-bundle-modal__footer { padding-left:14px; padding-right:14px; }
	.zlz-selected-popup__card { max-width:calc(100% - 24px); margin:40px auto; }
}

@media (prefers-reduced-motion: reduce) {
	.zlz-bundle-tier,
	.zlz-figure-tile { transition:none; }
}

/* v1.4.0: the shared picker always sits above the PDP pack-size modal and
 * remains a true viewport overlay even if a browser ignores the inline state. */
.zlz-bundle-modal { z-index: 2000; }
body > .zlz-bundle-modal { width: 100%; min-height: 100%; }