/*
 * WooCommerce – Customization and controls (Figma 329:2347, 1280×668, 120px after it).
 * Section Divider, then a 660×604 lavender panel with a colour-settings mockup (static HTML) and, 56px to
 * its right, a 564px accordion of core/details items ("Color customization" open).
 */

/* ---- Row (329:2346): panel 660 + 56 + list 564; both shrink below a 1280px content width. ---- */
.rs-woo-customize .rs-woo-customize__row {
	align-items: flex-start;
}

/* ---- Lavender panel (798:3265): radial gradient, 2px #e5cbff border, radius 25, clips the mockup. ---- */
.rs-woo-customize__row > .rs-woo-customize__visual {
	position: relative;
	flex: 0 1 660px;
	min-width: 0;
	aspect-ratio: 660 / 604;
	margin: 0;
	overflow: hidden;
	border-radius: 25px;
	container-type: inline-size;
	/* Figma's gradient is an ellipse 330×302 from the centre = closest-side of the 660×604 box. */
	background: radial-gradient(closest-side, var(--wp--preset--color--purple-70) 0%, #d7b1ff 50%, #eddcff 100%);
	/* The border is an inset shadow so the tiles and the mockup paint over it, as in Figma. */
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--purple-30);
}

/*
 * One picture per accordion item, in the same order (the 2nd is the colour mockup below); only the open item's
 * shows, and the colour one while all are closed (not in Figma, on request 2026-10-03). The pictures are
 * 660×604 like the panel, backdrop included (design/illustrations/build-customize.py).
 */
.rs-woo-customize__visual > .rs-woo-customize__shot {
	position: absolute;
	inset: 0;
	margin: 0;
}

.rs-woo-customize__visual > .rs-woo-customize__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-woo-customize .rs-woo-customize__visual > * {
	display: none;
}

.rs-woo-customize__row:has(.rs-woo-customize__item:nth-child(1)[open]) .rs-woo-customize__visual > :nth-child(1),
.rs-woo-customize__row:has(.rs-woo-customize__item:nth-child(2)[open]) .rs-woo-customize__visual > :nth-child(2),
.rs-woo-customize__row:has(.rs-woo-customize__item:nth-child(3)[open]) .rs-woo-customize__visual > :nth-child(3),
.rs-woo-customize__row:has(.rs-woo-customize__item:nth-child(4)[open]) .rs-woo-customize__visual > :nth-child(4),
.rs-woo-customize__row:has(.rs-woo-customize__item:nth-child(5)[open]) .rs-woo-customize__visual > :nth-child(5),
.rs-woo-customize__row:not(:has(.rs-woo-customize__item[open])) .rs-woo-customize__visual > :nth-child(2) {
	display: block;
}

/* Stage: always 660×604 in Figma px; scaled down with the panel on narrower screens. */
.rs-wc-mock {
	position: absolute;
	top: 0;
	left: 0;
	width: 660px;
	height: 604px;
	transform-origin: 0 0;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

/* Tile grid (1594:13090): 925×756 at −50/−59, rotated 180° (pre-rotated in the SVG). */
.rs-wc-mock::before {
	content: "";
	position: absolute;
	top: -59px;
	left: -50px;
	width: 925px;
	height: 756px;
	background: url("../../images/woo/customize/grid-tiles.svg") 0 0 / 100% 100% no-repeat;
}

/* ---- "Color" settings panel (1594:13323): 360 wide at 51/82, runs past the panel's bottom edge. ---- */
.rs-wc-mock__panel {
	position: absolute;
	top: 82px;
	left: 51px;
	width: 360px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

/* 0.5px component stroke: drawn over the content and takes no layout space. */
.rs-wc-mock__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--border-strong);
	pointer-events: none;
}

.rs-wc-mock__title {
	padding: 0 16px;
}

.rs-wc-mock__title > span {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 40px;
	padding: 10px 0;
	box-shadow: inset 0 -0.5px 0 var(--wp--preset--color--border-strong);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--wp--preset--color--ink);
}

.rs-wc-mock__title > span::before,
.rs-wc-mock__title > span::after,
.rs-wc-mock__field.has-icon::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../../images/woo/customize/icon-palette.svg") center / contain no-repeat;
}

.rs-wc-mock__title > span::after {
	width: 16px;
	height: 16px;
	margin-left: auto;
	background-image: url("../../images/woo/customize/icon-caret-down.svg");
}

.rs-wc-mock__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
}

.rs-wc-mock__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rs-wc-mock__group:not(:last-child) {
	padding-bottom: 16px;
	box-shadow: inset 0 -0.5px 0 var(--wp--preset--color--border);
}

.rs-wc-mock__input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Input "wrap": 32px min height, #f3f3f3 fill, 0.5px #cececf stroke, radius 8. */
.rs-wc-mock__field,
.rs-wc-mock__hex {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 32px;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--border-strong);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.rs-wc-mock__field.has-icon::after {
	margin-left: auto;
	background-image: url("../../images/woo/customize/icon-sliders.svg");
}

.rs-wc-mock__swatch {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}

/* Swatch colours are sample data in the illustration. */
.rs-wc-mock__swatch.is-black { background: var(--wp--preset--color--black); }
.rs-wc-mock__swatch.is-green { background: #007059; }
.rs-wc-mock__swatch.is-white { background: var(--wp--preset--color--white); }
.rs-wc-mock__swatch.is-navy { background: #2e42a5; }
.rs-wc-mock__swatch.is-silver { background: #d4d4d4; }
.rs-wc-mock__swatch.is-orange { background: #fe7733; }
.rs-wc-mock__swatch.is-purple { background: var(--wp--preset--color--purple-80); }
.rs-wc-mock__swatch.is-gray { background: #bcbcbc; }

.rs-wc-mock__help {
	font-size: 12px;
	line-height: 16px;
	color: var(--wp--preset--color--ink-secondary);
	white-space: nowrap;
}

/* ---- Colour picker (1594:13468): 280 wide at 344/178, 8/8/16 padding, 16 gap. ---- */
.rs-wc-mock__picker {
	position: absolute;
	top: 178px;
	left: 344px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	width: 280px;
	padding: 8px 8px 16px;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	box-shadow: -8px 4px 14px 0 rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--wp--preset--color--border);
}

.rs-wc-mock__area,
.rs-wc-mock__hue {
	position: relative;
}

/*
 * Saturation area: Figma's rgba(50,32,214,0)→#0611fa and #000→rgba(196,196,196,0) gradients blend
 * without premultiplied alpha (the grey half-way is lighter than CSS's), so the stops are spelled out.
 */
.rs-wc-mock__area {
	height: 196px;
	border-radius: 12px;
	background:
		linear-gradient(90deg, rgba(50, 32, 214, 0) 0%, rgba(46, 30, 218, 0.1) 10%, rgba(41, 29, 221, 0.2) 20%, rgba(37, 28, 225, 0.3) 30%, rgba(32, 26, 228, 0.4) 40%, rgba(28, 24, 232, 0.5) 50%, rgba(24, 23, 236, 0.6) 60%, rgba(19, 22, 239, 0.7) 70%, rgba(15, 20, 243, 0.8) 80%, rgba(10, 18, 246, 0.9) 90%, rgb(6, 17, 250) 100%),
		linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(20, 20, 20, 0.9) 10%, rgba(39, 39, 39, 0.8) 20%, rgba(59, 59, 59, 0.7) 30%, rgba(78, 78, 78, 0.6) 40%, rgba(98, 98, 98, 0.5) 50%, rgba(118, 118, 118, 0.4) 60%, rgba(137, 137, 137, 0.3) 70%, rgba(157, 157, 157, 0.2) 80%, rgba(176, 176, 176, 0.1) 90%, rgba(196, 196, 196, 0) 100%);
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--border);
}

.rs-wc-mock__hue {
	height: 16px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff6523 4.8077%, #ffe100 19.231%, #54fe34 31.731%, #4bedfe 45.673%, #050efa 59.135%, #f510df 80.288%, #f60d37 100%);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--surface);
}

.rs-wc-mock__knob {
	position: absolute;
	top: 16px;
	right: 24px;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid var(--wp--preset--color--surface);
	border-radius: 50%;
	background: #1c24f7;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Hue knob: centred at 50% + 20px. */
.rs-wc-mock__hue > .rs-wc-mock__knob {
	top: 0;
	right: auto;
	left: calc(50% + 12px);
	background: #0611fa;
}

/* ---- Accordion (328:1789): 564 wide; lines rgba(0,0,0,.1); open item 32px padding, closed 24px. ---- */
.rs-woo-customize__row > .rs-woo-customize__list {
	flex: 0 1 564px;
	min-width: 0;
}

/*
 * Figma draws the 1px lines inside the items without adding height: a line under every item, one over the
 * first, and the open item is framed above and below (the item before it drops its own bottom line).
 */
.rs-woo-customize__list > .rs-woo-customize__item {
	margin: 0;
	padding: 24px 0;
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--gray-10);
}

.rs-woo-customize__list > .rs-woo-customize__item:first-child,
.rs-woo-customize__list > .rs-woo-customize__item[open] {
	box-shadow: inset 0 1px 0 var(--wp--preset--color--gray-10), inset 0 -1px 0 var(--wp--preset--color--gray-10);
}

.rs-woo-customize__list > .rs-woo-customize__item:has(+ [open]) {
	box-shadow: none;
}

.rs-woo-customize__list > .rs-woo-customize__item:first-child:has(+ [open]) {
	box-shadow: inset 0 1px 0 var(--wp--preset--color--gray-10);
}

.rs-woo-customize__list > .rs-woo-customize__item[open] {
	padding: 32px 0;
}

/* H5 (Stack Sans Headline Medium 24/34): 60% black when closed, black when open. */
.rs-woo-customize__item > summary {
	display: block;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--stack-sans-headline);
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 500;
	line-height: 34px;
	letter-spacing: 0;
	color: var(--wp--preset--color--text-tertiary);
	transition: color 0.15s ease;
}

.rs-woo-customize__item > summary::-webkit-details-marker {
	display: none;
}

.rs-woo-customize__item > summary:hover,
.rs-woo-customize__item[open] > summary {
	color: var(--wp--preset--color--black);
}

.rs-woo-customize__item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple-100);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Figma text box is 548 wide (16px narrower than the list). */
.rs-woo-customize__item > .rs-woo-customize__text {
	max-width: 548px;
	margin: 8px 0 0;
}

/* ---- Responsive ---- */

/* Below a 1280px content width the panel narrows: scale the 660×604 stage with it. */
@media (max-width: 1359px) {
	.rs-wc-mock {
		transform: scale(tan(atan2(100cqw, 660px)));
	}
}

/* Stack: accordion first, the illustration under it (max 660 wide). */
@media (max-width: 1023px) {
	.rs-woo-customize .rs-woo-customize__row {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.rs-woo-customize__row > .rs-woo-customize__list {
		order: -1;
		flex: none;
		width: 100%;
	}

	.rs-woo-customize__row > .rs-woo-customize__visual {
		flex: none;
		width: 100%;
		max-width: 660px;
	}

	.rs-woo-customize__item > .rs-woo-customize__text {
		max-width: 640px;
	}
}

@media (max-width: 781px) {
	.rs-woo-customize .rs-woo-customize__row {
		gap: 32px;
	}

	.rs-woo-customize__row > .rs-woo-customize__visual {
		border-radius: 20px;
	}
}