/**
 * "Loo oma disain" — the builder, in the shop's look (tokens only, from the
 * theme's tokens.css): the product on a sand tile at 8px, action-colour pills and
 * selection, Inter UI, Playfair price, no shadows. Mobile first: the stage on
 * top, the steps under it; from 64rem the stage sits left and stays in view
 * while the steps scroll.
 *
 * Geometry inside the stage is in % of the 560-unit editor space, and text
 * sizes in cqw of the stage, so the whole design scales with the tile.
 *
 * @package cc-designer
 */

.cc-designer-page__intro {
	margin-block-start: var(--cc-space-3);
	max-width: var(--cc-prose-max);
	color: var(--cc-color-text, var(--cc-color-ink));
}

.cc-designer-page__intro > :last-child {
	margin-block-end: 0;
}

.cc-designer {
	display: grid;
	gap: var(--cc-space-8);
	align-items: start;
}

.cc-designer__fallback {
	padding: var(--cc-space-6);
	background-color: var(--cc-color-mist);
	border-radius: var(--cc-radius);
}

@media (min-width: 64rem) {
	.cc-designer {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--cc-space-12);
	}

	/* Below the sticky header, so the front / back switch stays in view. */
	.cc-designer__stage-wrap {
		position: sticky;
		top: calc(var(--cc-header-bar-height, 0px) + var(--cc-space-4));
	}
}

/* ---------------------------------------------------------------------------
 * The stage
 * ------------------------------------------------------------------------ */

.cc-designer__stage {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	container-type: inline-size;
	background-color: var(--cc-color-sand);
	border-radius: var(--cc-radius);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.cc-designer__garment {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.cc-designer__area {
	position: absolute;
	border: 1.5px dashed var(--cc-color-muted);
	border-radius: 3px;
	pointer-events: none;
}

.cc-designer__area-label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	padding: 0 var(--cc-space-2);
	font-size: var(--cc-text-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cc-color-muted);
	background-color: var(--cc-color-ground);
	border-radius: var(--cc-radius-pill);
}

.cc-designer__stage.is-dark .cc-designer__area {
	border-color: var(--cc-color-on-action-muted, var(--cc-color-on-action));
}

.cc-designer__stage.is-dark .cc-designer__area-label {
	color: var(--cc-color-on-action);
	background-color: var(--cc-color-ink);
}

.cc-designer__hint {
	position: absolute;
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--cc-space-3);
	text-align: center;
	font-size: var(--cc-text-small);
	color: var(--cc-color-muted);
	pointer-events: none;
}

.cc-designer__hint[hidden] {
	display: none;
}

.cc-designer__stage.is-dark .cc-designer__hint {
	color: var(--cc-color-on-action-muted, var(--cc-color-on-action));
}

.cc-designer__items {
	position: absolute;
	inset: 0;
}

.cc-designer__item {
	position: absolute;
	display: grid;
	place-items: center;
	cursor: move;
	touch-action: none;
}

.cc-designer__item:focus-visible {
	outline: var(--cc-focus-width, 2px) solid var(--cc-color-action);
	outline-offset: 3px;
}

.cc-designer__item.is-selected {
	outline: 1.5px solid var(--cc-color-action);
	outline-offset: 3px;
}

.cc-designer__item.is-lowres.is-selected {
	outline-color: var(--cc-color-error);
}

.cc-designer__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
}

.cc-designer__text {
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* Handles show on the selected element only. Each has a 32px hit area. */
.cc-designer__handle {
	position: absolute;
	display: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	touch-action: none;
}

.cc-designer__item.is-selected .cc-designer__handle {
	display: grid;
	place-items: center;
}

.cc-designer__handle::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: var(--cc-color-ground);
	border: 1.5px solid var(--cc-color-action);
	border-radius: 50%;
}

.cc-designer__handle--rotate {
	inset-block-start: -46px;
	inset-inline-start: calc(50% - 16px);
	cursor: grab;
}

.cc-designer__handle--rotate::after {
	content: "";
	position: absolute;
	inset-block-start: 23px;
	inset-inline-start: 15px;
	width: 1.5px;
	height: 20px;
	background-color: var(--cc-color-action);
}

.cc-designer__handle--resize {
	inset-block-end: -18px;
	inset-inline-end: -18px;
	cursor: nwse-resize;
}

.cc-designer__handle--resize::before {
	border-radius: 2px;
}

.cc-designer__handle--delete {
	inset-block-start: -18px;
	inset-inline-start: -18px;
	font-size: 0;
	cursor: pointer;
}

.cc-designer__handle--delete::before {
	content: "×";
	width: 20px;
	height: 20px;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	color: var(--cc-color-on-action);
	background-color: var(--cc-color-ink);
	border-color: var(--cc-color-ink);
}

/* ---------------------------------------------------------------------------
 * Front / back (owner, 2026-10-16): a two-way switch above the stage; the
 * pill shape and pressed fill are the choices' below. A side with elements
 * shows how many in a small disc.
 * ------------------------------------------------------------------------ */

.cc-designer__sides {
	display: flex;
	justify-content: center;
	gap: var(--cc-space-2);
	margin-block-end: var(--cc-space-3);
}

.cc-designer__sides[hidden],
.cc-designer__sides-note[hidden] {
	display: none;
}

.cc-designer__side-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 var(--cc-space-1);
	font-size: var(--cc-text-micro);
	line-height: 1;
	color: var(--cc-color-on-action);
	background-color: var(--cc-color-action);
	border-radius: var(--cc-radius-pill);
}

.cc-designer__side-count:empty {
	display: none;
}

.cc-designer__side[aria-pressed="true"] .cc-designer__side-count {
	color: var(--cc-color-action);
	background-color: var(--cc-color-on-action);
}

.cc-designer__sides-note {
	margin-block-start: var(--cc-space-3);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * The steps
 * ------------------------------------------------------------------------ */

.cc-designer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-6);
}

.cc-designer__step {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
}

.cc-designer__step-title,
.cc-designer__mini-label {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-caption);
	font-weight: var(--cc-weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-color-muted);
}

.cc-designer__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
}

.cc-designer__choice,
.cc-designer__side {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-height: 2.75rem;
	min-width: 2.75rem;
	justify-content: center;
	padding: 0 var(--cc-space-5);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-small);
	color: var(--cc-color-ink);
	background-color: var(--cc-color-ground);
	border: var(--cc-border);
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
}

.cc-designer__choice[aria-pressed="true"],
.cc-designer__side[aria-pressed="true"] {
	color: var(--cc-color-on-action);
	background-color: var(--cc-color-action);
	border-color: var(--cc-color-action);
}

.cc-designer__choice.is-out {
	color: var(--cc-color-muted);
	text-decoration: line-through;
}

.cc-designer__swatch,
.cc-designer__colour {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: var(--swatch);
	border: 1px solid var(--cc-color-hairline);
	border-radius: 50%;
}

.cc-designer__colour {
	width: 32px;
	height: 32px;
	padding: 0;
	cursor: pointer;
}

.cc-designer__colour[aria-pressed="true"] {
	outline: 2px solid var(--cc-color-action);
	outline-offset: 2px;
}

.cc-designer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--cc-space-5);
}

.cc-designer__qty-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-designer__qty {
	display: inline-flex;
	align-items: center;
	border: var(--cc-border);
	border-radius: var(--cc-radius-pill);
	background-color: var(--cc-color-ground);
}

.cc-designer__qty-btn {
	width: 2.75rem;
	height: 2.75rem;
	font-size: var(--cc-text-lg);
	color: var(--cc-color-ink);
	background: none;
	border: 0;
	cursor: pointer;
}

.cc-designer__qty-value {
	min-width: 2ch;
	text-align: center;
	font-size: var(--cc-text-ui);
}

.cc-designer__tabs {
	display: flex;
	gap: var(--cc-space-5);
	margin-block-end: var(--cc-space-4);
	border-block-end: var(--cc-border);
}

.cc-designer__tab {
	padding: var(--cc-space-2) 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-ui);
	color: var(--cc-color-muted);
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	cursor: pointer;
}

.cc-designer__tab[aria-selected="true"] {
	color: var(--cc-color-ink);
	border-block-end-color: var(--cc-color-action);
}

.cc-designer__tabpanel {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-designer__tabpanel[hidden] {
	display: none;
}

.cc-designer__tabpanel .cc-btn {
	align-self: flex-start;
	margin-block-start: var(--cc-space-2);
}

.cc-designer__drop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-3);
	padding: var(--cc-space-5);
	background-color: var(--cc-color-mist);
	border: 1.5px dashed var(--cc-color-hairline);
	border-radius: var(--cc-radius);
	cursor: pointer;
}

.cc-designer__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cc-designer__file:focus-visible + * ,
.cc-designer__drop:focus-within {
	outline: var(--cc-focus-width, 2px) solid var(--cc-color-action);
	outline-offset: 2px;
}

.cc-designer__note {
	margin: 0;
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
}

.cc-designer__note:empty {
	display: none;
}

.cc-designer__place {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
}

.cc-designer__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
}

.cc-designer__tool {
	min-height: 2.25rem;
	padding: 0 var(--cc-space-4);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-action);
	background: none;
	border: 1px solid var(--cc-color-action);
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
}

.cc-designer__tool:disabled {
	color: var(--cc-color-muted);
	border-color: var(--cc-color-hairline);
	cursor: default;
}

.cc-designer__tool--end {
	margin-inline-start: auto;
}

.cc-designer__sliders {
	display: grid;
	gap: var(--cc-space-3) var(--cc-space-6);
}

@media (min-width: 30rem) {
	.cc-designer__sliders {
		grid-template-columns: 1fr 1fr;
	}
}

.cc-designer__slider {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--cc-space-1);
	font-size: var(--cc-text-footnote);
}

.cc-designer__slider-value {
	color: var(--cc-color-muted);
}

.cc-designer__range {
	grid-column: 1 / -1;
	width: 100%;
	accent-color: var(--cc-color-action);
}

.cc-designer__range:disabled {
	opacity: 0.45;
}

/* ---------------------------------------------------------------------------
 * Price, terms, add to cart
 * ------------------------------------------------------------------------ */

.cc-designer__order {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
	padding-block-start: var(--cc-space-5);
	border-block-start: var(--cc-border);
}

.cc-designer__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--cc-space-3);
}

.cc-designer__price {
	font-family: var(--cc-font-display);
	font-weight: 500;
	font-size: var(--cc-text-xxxl);
	color: var(--cc-color-ink);
}

.cc-designer__unit {
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
}

.cc-designer__summary {
	margin: 0;
	font-size: var(--cc-text-small);
	color: var(--cc-color-ink);
}

.cc-designer__summary:empty {
	display: none;
}

.cc-designer__returns {
	margin: 0;
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
}

.cc-designer__add {
	align-self: flex-start;
}

.cc-designer__add:disabled {
	opacity: 0.6;
	cursor: progress;
}

.cc-designer__message {
	margin: 0;
	font-size: var(--cc-text-small);
	color: var(--cc-color-muted);
}

.cc-designer__message:empty {
	display: none;
}

.cc-designer__message.is-error {
	color: var(--cc-color-error);
}

.cc-designer__message.is-warning {
	padding: var(--cc-space-3) var(--cc-space-4);
	color: var(--cc-color-ink);
	background-color: var(--cc-color-band);
	border-radius: var(--cc-radius);
}