/*
================================================================
PRODUCT PAGE, BUNDLE EDITOR: product selector, action bar, review,
dialogs. Figma 3NPoCFTKy8AnB4vWaHLQRM "Bundle engraving" 63:2 to 63:12,
72:270, 72:284, 72:291.
Loaded only on a bundle product page, after product-lower.css, and every
selector is scoped under .ppl--bundle / .ppb-*: the editor's own tokens
(--ppl-*) drive every colour, so a theme change reaches this module too.
Mobile first: selector, preview, controls, action bar in one column; the
existing 1232px tier puts the preview right and the controls left.
================================================================
*/

/* ---------- product selector + progress (63:2 "Bundle navigation") ---------- */
.ppb-nav { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.ppb-nav__progress { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ppb-nav__current { margin: 0; color: var(--ppl-ink); font: 500 16px/24px var(--nios-font); }
.ppb-nav__done { margin: 0; color: var(--ppl-muted); font: 500 14px/21px var(--nios-font); }
.ppb-nav__list {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 2px; /* room for the 2px active border and the focus ring inside the scroller */
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.ppb-nav__li { flex: 0 0 auto; scroll-snap-align: start; }

/* One card per item (component 65:83): name, status, original product thumbnail. */
.ppb-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 182px;
	min-height: 94px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ppl-border);
	border-radius: 12px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	font: inherit;
	text-align: right;
	cursor: pointer;
}
button.ppb-item:hover:not(:disabled) { border-color: var(--ppl-gold); }
button.ppb-item:disabled { cursor: default; }
.ppb-item.is-current {
	border: 2px solid var(--ppl-gold);
	padding: 11px;
	background: var(--ppl-bg);
}
.ppb-item__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.ppb-item__name { color: var(--ppl-ink); font: 500 14px/24px var(--nios-font); overflow-wrap: anywhere; }
.ppb-item__status { color: var(--ppl-muted); font: 500 14px/21px var(--nios-font); }
.ppb-item[data-state="ready"] .ppb-item__status { color: var(--ppl-ok); }
.ppb-item[data-state="review"] .ppb-item__status,
.ppb-item[data-state="error"] .ppb-item__status { color: var(--ppl-error); }
/* Status is never colour alone: a mark precedes the word. */
.ppb-item[data-state="ready"] .ppb-item__status::before { content: "✓ "; }
.ppb-item[data-state="review"] .ppb-item__status::after,
.ppb-item[data-state="error"] .ppb-item__status::after { content: "!"; }
.ppb-item__thumb { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }

/* ---------- controls card additions ---------- */
.ppb-controls__title { margin: 0 0 12px; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); text-align: right; }
.ppb-skipped {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	padding: 12px 16px;
	border: 1px solid var(--ppl-border);
	border-radius: 12px;
	background: var(--ppl-bg);
	color: var(--ppl-ink);
	font: 400 14px/21px var(--nios-font);
}
.ppb-copy { width: 100%; min-height: 52px; margin-top: 12px; font-size: 16px; }
.ppb-note { margin: 12px 0 0; color: var(--ppl-muted); font: 400 12px/18px var(--nios-font); text-align: right; }

/* ---------- buttons (component 65:57) ---------- */
.ppb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--ppl-border);
	border-radius: 10px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	font: 500 16px/24px var(--nios-font);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.ppb-btn:hover:not(:disabled) { border-color: var(--ppl-gold); }
.ppb-btn--primary { border-color: var(--ppl-ink); background: var(--ppl-ink); color: var(--ppl-surface); }
.ppb-btn--primary:hover:not(:disabled) { border-color: var(--ppl-ink); background: #2b2722; }
.ppb-btn:disabled,
.ppb-btn[aria-disabled="true"] { border-color: var(--ppl-soft); background: var(--ppl-soft); color: var(--ppl-muted); cursor: default; }
.ppb-btn[aria-busy="true"] { cursor: progress; }
.ppl--bundle .ppb-btn:focus-visible,
.ppb-dialog .ppb-btn:focus-visible { outline: 3px solid var(--ppl-gold); outline-offset: 2px; }
.ppb-link {
	align-self: flex-start;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ppl-muted);
	font: 400 14px/21px var(--nios-font);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ppb-link:hover { color: var(--ppl-ink); }

/* ---------- action bar (63:2 "Bundle action bar") ---------- */
.ppb-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding: 24px; }
.ppb-actions__where { margin: 0; color: var(--ppl-muted); font: 500 14px/21px var(--nios-font); text-align: right; }
.ppb-actions__note { margin: -8px 0 0; color: var(--ppl-muted); font: 400 14px/21px var(--nios-font); text-align: right; }
.ppb-actions__status { margin: 0; font: 400 14px/21px var(--nios-font); text-align: right; }
.ppb-actions__status:empty { display: none; }
.ppb-actions__status[data-state="error"],
.ppb-final__status[data-state="error"] { color: var(--ppl-error); }
.ppb-actions__status[data-state="success"],
.ppb-final__status[data-state="success"] { color: var(--ppl-ok); }
.ppb-actions__status[data-state="loading"],
.ppb-actions__status[data-state="info"],
.ppb-final__status[data-state="loading"] { color: var(--ppl-muted); }
.ppb-actions__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ppb-actions__label { margin: 0; color: var(--ppl-muted); font: 400 14px/21px var(--nios-font); }
.ppb-actions__amount { margin: 0; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); }
.ppb-sentinel { display: block; height: 0; }

/* ---------- review (63:8 / 63:9) ---------- */
.ppb-review { display: flex; flex-direction: column; gap: 24px; }
.ppb-review__count { margin: 0; color: var(--ppl-muted); font: 500 16px/24px var(--nios-font); text-align: right; }
.ppb-review__count[data-state="ok"] { color: var(--ppl-ok); }
.ppb-review__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ppb-proof { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.ppb-proof__name { margin: 0; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); text-align: right; }
.ppb-proof__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9 / 5;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ppl-surface);
}
.ppb-proof__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ppb-proof__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ppl-soft);
	color: var(--ppl-ink);
	font: 500 14px/21px var(--nios-font);
}
.ppb-proof[data-state="none"] .ppb-proof__media img,
.ppb-proof[data-state="plain"] .ppb-proof__media img { opacity: 0.85; }
.ppb-proof__text { margin: 0; color: var(--ppl-ink); font: 500 16px/24px var(--nios-font); text-align: right; overflow-wrap: anywhere; }
.ppb-proof__meta { margin: 0; color: var(--ppl-muted); font: 400 14px/21px var(--nios-font); text-align: right; }
.ppb-proof__meta[data-tone="error"] { color: var(--ppl-error); }
.ppb-proof__meta[data-tone="error"]::after { content: "!"; }
.ppb-proof__note { margin: 0; color: var(--ppl-muted); font: 400 14px/21px var(--nios-font); text-align: right; }
.ppb-proof .ppb-btn { margin-top: auto; }
.ppb-proof__ack { margin-top: auto; }
.ppb-proof__ack ~ .ppb-btn { margin-top: 0; }
.ppb-proof__ack .ppb-check__text { font: 400 14px/21px var(--nios-font); }

.ppb-final { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.ppb-final__title { margin: 0; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); text-align: right; }
.ppb-final__text { margin: 0; color: var(--ppl-muted); font: 400 16px/24px var(--nios-font); text-align: right; }
.ppb-final__row { display: flex; flex-direction: column; gap: 12px; }
.ppb-final__divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--ppl-border); }
.ppb-final__name { margin: 0; color: var(--ppl-ink); font: 500 16px/24px var(--nios-font); text-align: right; }
.ppb-final__note,
.ppb-final__status { margin: 0; color: var(--ppl-muted); font: 400 14px/21px var(--nios-font); text-align: right; }
.ppb-final__status:empty { display: none; }
.ppb-final__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ppb-final__total-label { margin: 0; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); }
.ppb-final__total-amount { margin: 0; color: var(--ppl-ink); font: 700 28px/42px var(--nios-font); }
.ppb-final__hint { margin: 0; color: var(--ppl-muted); font: 400 12px/18px var(--nios-font); text-align: right; }
.ppb-review__back { align-self: center; }

/* Confirmation checkbox: a real input (keyboard, screen readers), drawn as the 24px box of the design. */
.ppb-check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.ppb-check__input { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.ppb-check__box {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border: 1px solid var(--ppl-ink);
	border-radius: 4px;
	background: var(--ppl-surface);
}
.ppb-check__input:checked + .ppb-check__box { background: var(--ppl-ink); }
.ppb-check__input:checked + .ppb-check__box::after { content: "✓"; display: block; color: var(--ppl-surface); font: 500 14px/22px var(--nios-font); text-align: center; }
.ppb-check__input:focus-visible + .ppb-check__box { outline: 2px solid var(--ppl-gold); outline-offset: 2px; }
.ppb-check__text { color: var(--ppl-ink); font: 400 16px/24px var(--nios-font); text-align: right; }

/* ---------- dialogs (72:270, 72:284, 72:291) ---------- */
.ppb-dialog { width: min(424px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; border-radius: 20px; }
.ppb-dialog__box { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; text-align: right; }
.ppb-dialog__title { margin: 0; color: var(--ppl-ink); font: 700 20px/30px var(--nios-font); }
.ppb-dialog__title:focus { outline: none; }
.ppb-dialog__text,
.ppb-dialog__lead { margin: 0; color: var(--ppl-ink); font: 400 16px/24px var(--nios-font); }
.ppb-dialog__lead { font-weight: 500; }
.ppb-dialog__muted { margin: 0; color: var(--ppl-muted); font: 400 16px/24px var(--nios-font); }
.ppb-dialog__warn { margin: 0; color: var(--ppl-error); font: 400 14px/21px var(--nios-font); }
.ppb-dialog__choices,
.ppb-dialog__items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ppb-dialog .ppb-item { width: 100%; }
.ppb-dialog__items .ppb-item[data-state="ready"] .ppb-item__status::before { content: ""; }
.ppb-dialog__items .ppb-item[data-state="ready"] .ppb-item__status { color: var(--ppl-ok); }
.ppb-dialog__amount { margin: 0; color: var(--ppl-ink); font: 700 28px/42px var(--nios-font); }

/* ---------- phones: the continue action stays at hand ---------- */
@media (max-width: 767px) {
	/* Sticky while the editor scrolls under it; its natural place is the end of the section. */
	.ppl--bundle .ppb-actions {
		position: sticky;
		bottom: 0;
		z-index: 20;
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 20px rgba(23, 23, 23, 0.08);
	}
	/* While stuck it shows only where you are and the continue action. */
	.ppl--bundle.is-stuck .ppb-actions { gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; }
	.ppl--bundle.is-stuck .ppb-actions__note,
	.ppl--bundle.is-stuck .ppb-actions__price,
	.ppl--bundle.is-stuck .ppb-actions [data-ppb-skip-open] { display: none; }
	/* The virtual keyboard is open: the bar steps back into the page flow. */
	.ppl--bundle.is-typing .ppb-actions { position: static; box-shadow: none; }
	/* Floating site buttons rise above the stuck bar instead of covering it. */
	body.ppb-bar-stuck .nios-help-float { bottom: calc(var(--ppb-bar-h, 0px) + 12px); }
	body.ppb-bar-stuck .nios-a11y-widget,
	body.ppb-bar-stuck .nios-a11y-restore { bottom: calc(var(--ppb-bar-h, 0px) + 12px + var(--nios-cookie-offset, 0px)); }
}

/* ---------- tablet 768 ---------- */
@media (min-width: 768px) {
	.ppb-item { width: 252px; padding: 12px 16px; gap: 12px; }
	.ppb-item.is-current { padding: 11px 15px; }
	.ppb-actions .ppb-btn,
	.ppb-final > .ppb-btn,
	.ppb-final__row .ppb-btn { width: 352px; max-width: 100%; }
	.ppb-final__row { flex-direction: row; }
	.ppb-review__grid[data-count="2"],
	.ppb-review__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppb-review__grid[data-count="3"],
	.ppb-review__grid[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- desktop (the editor's own 1232px tier) ---------- */
@media (min-width: 1232px) {
	.ppb-nav { margin-bottom: 32px; }
	.ppb-item { width: 280px; }
	.ppb-actions { margin-top: 32px; }
	.ppb-review__grid[data-count="3"],
	.ppb-review__grid[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Five items fit in one row of the selector at 1200px. */
	.ppb-nav__list:has(> li:nth-child(5)) .ppb-item { width: 228px; }
}