.wla-cc {
	--wla-copper: #c05530;
	--wla-navy: #2c4562;
	max-width: 40rem;
	margin: 0 auto 2rem;
	padding-bottom: 5.5rem;
}
/* Site Additional CSS hides .wla-hl:not(.wla-app-landing). Keep this builder visible. */
div.wla-hl.wla-cc {
	display: block !important;
}
.wla-cc.wla-hl-gate {
	padding-bottom: 0;
}
.wla-cc-how {
	color: #4a4a4a;
	line-height: 1.55;
	margin: 0 0 1.35rem;
	padding-left: 1.25rem;
}
.wla-cc-how li { margin: 0 0 0.45rem; }
.wla-cc-qr {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}
.wla-cc-qr__link {
	background: #fff;
	border: 1px solid #ececec;
	display: block;
	line-height: 0;
	padding: 0.5rem;
}
.wla-cc-qr__link img {
	display: block;
	height: 180px;
	width: 180px;
}
.wla-cc-qr__cap {
	color: #777;
	font-size: 0.88rem;
	margin: 0;
	text-align: center;
}
.wla-cc-chrome {
	background: var(--wla-navy);
	color: #fff;
	margin: 0 0 1.1rem;
	padding: 0.85rem 1.15rem;
}
.wla-cc-chrome h1 {
	color: #fff;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}
.wla-cc-chrome__file {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.82rem;
	margin: 0.35rem 0 0;
}
.wla-cc-chrome__swap {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	margin-top: 0.35rem;
	padding: 0;
	text-decoration: underline;
}
.wla-cc-casebar {
	background: #fff;
	border: 1px solid #ececec;
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
}
.wla-cc-casebar select {
	background: #fff;
	border: 1px solid #ececec;
	font: inherit;
	padding: 0.45rem 0.55rem;
	width: 100%;
}
.wla-cc-case-meta { color: #777; font-size: 0.88rem; margin: 0.5rem 0 0; }
.wla-cc-order {
	border-top: 1px solid #ececec;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
}
.wla-cc-order__foam {
	background: #f8ede8;
	border: 1px solid var(--wla-copper);
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.65rem;
	margin: 0 0 0.65rem;
	padding: 0.65rem 0.75rem;
}
.wla-cc-order__foam.is-locked {
	background: #f3f1ec;
	border-color: #d9d4cc;
	color: #777;
}
.wla-cc-order__title {
	font-weight: 600;
}
.wla-cc-order__price {
	color: var(--wla-navy);
	font-weight: 600;
}
.wla-cc-order__foam.is-locked .wla-cc-order__price {
	color: #777;
}
.wla-cc-order__note {
	color: #777;
	flex-basis: 100%;
	font-size: 0.82rem;
}
.wla-cc-order__case {
	align-items: flex-start;
	color: #4a4a4a;
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
	margin: 0;
}
.wla-cc-order__case input {
	margin-top: 0.2rem;
}
.wla-cc-step-title {
	color: #4a4a4a;
	font-size: 1.45rem;
	margin: 0 0 0.35rem;
}
.wla-cc-step-lede {
	color: #777;
	line-height: 1.5;
	margin: 0 0 1rem;
}
.wla-cc-err {
	color: #8a1f11;
	margin: 0 0 0.75rem;
}
.wla-cc-pane[hidden] { display: none; }
.wla-cc-cases {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.wla-cc-case {
	background: #fff;
	border: 1px solid #ececec;
	color: inherit;
	cursor: pointer;
	padding: 0.85rem 1rem;
	text-align: left;
	width: 100%;
}
.wla-cc-case:hover { border-color: #c9c4bc; }
.wla-cc-case.is-on {
	background: #f8ede8;
	border-color: var(--wla-copper);
}
.wla-cc-case__name {
	display: block;
	font-weight: 600;
}
.wla-cc-case__meta {
	color: #777;
	display: block;
	font-size: 0.88rem;
	margin-top: 0.2rem;
}
.wla-cc-kicker {
	color: var(--wla-copper);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}
.wla-cc-files-link { margin: 0 0 0.75rem; }
.wla-cc-files-link a { color: var(--wla-navy); }
.wla-cc-files { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1rem; }
.wla-cc-file {
	background: #fff;
	border: 1px solid #ececec;
	color: inherit;
	cursor: pointer;
	padding: 0.7rem 0.85rem;
	text-align: left;
}
.wla-cc-file.is-on { background: #f8ede8; border-color: var(--wla-copper); }
.wla-cc-file__name { display: block; }
.wla-cc-file__meta { color: #777; display: block; font-size: 0.8rem; margin-top: 0.15rem; }
.wla-cc-empty {
	color: #777;
	line-height: 1.5;
	margin: 0;
}
.wla-cc-empty a { color: var(--wla-navy); }
.wla-cc-ready { color: var(--wla-navy); margin: 0.5rem 0 0; }
.wla-cc-align { margin: 0 0 0.75rem; }
.wla-cc-stage {
	background: #f7f4ee;
	border: 1px solid #ececec;
	height: min(58vh, 440px);
	position: relative;
	touch-action: none;
	width: 100%;
}
.wla-cc-stage img,
.wla-cc-stage svg {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.wla-cc-stage img { object-fit: fill; }
.wla-cc-align-bar {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}
.wla-cc-opacity {
	align-items: center;
	color: #777;
	display: flex;
	flex: 1;
	gap: 0.6rem;
	margin: 0;
}
.wla-cc-opacity input { flex: 1; }
.wla-cc-textbtn {
	background: none;
	border: 0;
	color: var(--wla-navy);
	cursor: pointer;
	font: inherit;
	padding: 0.35rem 0.2rem;
}
.wla-cc-textbtn:disabled { color: #bbb; cursor: default; }
.wla-cc-layout-wrap {
	display: flex;
	justify-content: center;
	margin: 0.25rem 0 0.75rem;
	min-height: min(52vh, 360px);
}
.wla-cc-layout {
	background: #e8e4dc;
	border: 2px solid var(--wla-navy);
	position: relative;
	touch-action: none;
}
.wla-cc-layout__item {
	cursor: grab;
	position: absolute;
}
.wla-cc-layout__item:active { cursor: grabbing; }
.wla-cc-layout__item img,
.wla-cc-layout__item svg { display: block; height: 100%; width: 100%; }
.wla-cc-layout__graphic {
	pointer-events: none;
	position: absolute;
}
.wla-cc-tools { margin: 0; }
.wla-cc .wla-hl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.wla-cc-status { margin: 0.75rem 0 0; }
.wla-cc-status.is-ok { color: var(--wla-navy); }
.wla-cc-status.is-err { color: #b32d2e; }
.wla-cc .wla-case-policy {
	border-top: 1px solid #ececec;
	color: #777;
	font-size: 0.88rem;
	margin: 0.75rem 0 1rem;
	padding-top: 0.75rem;
}
.wla-cc-nav {
	align-items: center;
	background: #fff;
	border-top: 1px solid #ececec;
	bottom: 0;
	display: flex;
	gap: 0.75rem;
	left: 0;
	padding: 0.75rem 1rem 1.1rem;
	position: sticky;
	right: 0;
	z-index: 3;
}
.wla-cc-nav[hidden],
.wla-cc-casebar[hidden],
.wla-cc-chrome__swap[hidden],
.wla-cc-chrome__file[hidden] {
	display: none !important;
}
.wla-cc-nav__back,
.wla-cc-nav__next {
	cursor: pointer;
	flex: 1;
	font: inherit;
	padding: 0.7rem 1rem;
}
.wla-cc-nav__back[hidden] { display: none; }
.wla-cc-nav__back {
	background: #fff;
	border: 1px solid var(--wla-navy);
	color: var(--wla-navy);
}
.wla-cc-nav__next {
	background: var(--wla-copper);
	border: 1px solid var(--wla-copper);
	color: #fff;
}
.wla-cc-nav__next:hover { filter: brightness(1.05); }

@media (max-width: 640px) {
	.wla-cc { padding-bottom: 6rem; }
	.wla-cc-stage { height: min(50vh, 360px); }
}