/*
   NIOS product page of a color family: the color picker under the price, the
   lock notice of the engraving editor and the purchase form that works
   without JavaScript. Markup: template-parts/product/color-picker.php,
   configurator.php, color-noscript.php. Behavior: assets/js/product-color.js.

   Loaded on the page of a color family only (inc/product-color/assets.php),
   after product-hero.css. A simple product page never requests this file.

   Colors and the font are the tokens the product page already defines
   (--pp-* on .pp-page, --ppl-* on .ppl, --nios-font). Nothing new is added.
   Font sizes are in rem, so the "large text" mode of the accessibility
   toolbar enlarges the picker. Logical properties only (right to left). No
   animation and no transition.
*/

/* ---- Picker ---- */
.pph-color {
	/* 4 is the order of .pph__buy in product-hero.css (line 48). With the same
	   order the picker, which follows .pph__buy in the markup, lands directly
	   under price and stock below 1200px. Change the two together. */
	order: 4;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.pph-color__label {
	color: var(--pp-ink, #171717);
	font: 500 0.875rem/1.25rem var(--nios-font);
}
.pph-color__select,
.pc-ns__select {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding-block: 0;
	padding-inline: 16px;
	/* --pp-muted on the page background is above 3 to 1, the border of a
	   control has to be (the decorative --pp-border is not). */
	border: 1px solid var(--pp-muted, #6b655d);
	border-radius: 12px;
	background-color: var(--pp-surface, #ffffff);
	color: var(--pp-ink, #171717);
	/* 1rem: below 16px iOS zooms the page when the select opens */
	font: 400 1rem/1.5rem var(--nios-font);
	cursor: pointer;
}
/* The message takes focus itself when no select can (product-color.js). */
.pph-color__select:focus-visible,
.pc-ns__select:focus-visible,
.pph-color__error:focus-visible {
	outline: 2px solid var(--pp-ink, #171717);
	outline-offset: 2px;
}
/* The thicker border takes its extra pixel from the padding: the text inside
   and the box itself do not move. */
.pph-color__select[aria-invalid="true"] {
	padding-inline: 15px;
	border: 2px solid var(--pp-error, #b3261e);
}
/* "Edit design": the color is the one of the cart line and cannot change. */
.pph-color__select:disabled {
	background-color: var(--pp-media, #f7f2eb);
	color: var(--pp-ink, #171717);
	opacity: 1;
	cursor: default;
}
.pph-color__names,
.pph-color__note {
	color: var(--pp-muted, #6b655d);
	font: 400 0.8125rem/1.25rem var(--nios-font);
	overflow-wrap: anywhere;
}
.pph-color__error {
	color: var(--pp-error, #b3261e);
	font: 500 0.8125rem/1.25rem var(--nios-font);
}
.pph-color__error:empty { display: none; }
/* The availability line of a family is always printed. Without a text it
   would show its bullet alone. */
.pph__stock[data-pc-stock]:empty { display: none; }
/* A crossed price is smaller than the price next to it and would make the
   line 5px taller. In a family that moves the picker every time the visitor
   goes from a color on sale to one that is not, so here it adds no height. */
.pph__price[data-pc-price] del { line-height: 1; }

/* ---- Editor lock (inside .ppl, its own tokens) ---- */
.ppl-lock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--ppl-border, #e4d9cb);
	border-radius: 12px;
	background: var(--ppl-surface, #ffffff);
	color: var(--ppl-ink, #171717);
	font: 500 0.9375rem/1.5rem var(--nios-font);
}
.ppl-lock__text { flex: 1 1 200px; min-width: 0; }
.ppl-lock .ppl-btn { flex: none; }
.ppl__cols[inert] { opacity: 0.45; }

/* ---- Purchase without JavaScript ---- */
.pc-ns {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.pc-ns__label {
	color: var(--pp-ink, #171717);
	font: 500 0.875rem/1.25rem var(--nios-font);
}
.pc-ns button { margin-block-start: 4px; }

/* ================= Desktop 1200px and up ================= */
@media (min-width: 1200px) {
	/* product-hero.css resets every order to 0 here, the picker follows. */
	.pph-color { order: 0; }
}