/* Public order form styles */
/* 2026-05-06: in-app browser warning banner. Hardcoded amber palette so it's
   readable regardless of seller theme — the banner exists specifically to
   help buyers escape a broken environment, so theme-tinting it would be
   counterproductive. */
.in-app-notice {
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #78350f;
	padding: 10px 14px;
	border-radius: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
}
.in-app-notice.hidden { display: none; }

.buyer-saved-info-slot {
	margin: 0 0 14px;
}
.buyer-saved-info-slot.hidden { display: none; }
.buyer-saved-info-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--gray-200, #e5e7eb);
	border-radius: 8px;
	background: color-mix(in srgb, var(--form-bg, #fff) 92%, var(--primary, #4f46e5) 8%);
}
.buyer-saved-info-copy {
	min-width: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--text-muted, var(--gray-500, #6b7280));
	overflow-wrap: anywhere;
}
.buyer-saved-info-copy strong {
	display: block;
	color: var(--text, var(--gray-700, #374151));
	font-size: 13px;
}
.buyer-saved-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid var(--primary, #4f46e5);
	border-radius: 7px;
	background: var(--cf-link-btn-bg, var(--primary, #4f46e5));
	color: var(--cf-link-btn-text, #fff);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	min-height: 34px;
	padding: 8px 10px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-link-btn-text, #fff) 22%, transparent);
}
.buyer-saved-info-btn:hover {
	background: var(--primary-hover, var(--primary, #4f46e5));
	color: var(--cf-link-btn-text, #fff);
}
.buyer-saved-info-btn:disabled {
	cursor: default;
	opacity: 0.7;
	background: var(--gray-100, #f3f4f6);
	color: var(--gray-600, #4b5563);
	border-color: var(--gray-300, #d1d5db);
}
@supports not (background: color-mix(in srgb, #fff 92%, #000 8%)) {
	.buyer-saved-info-control { background: var(--gray-50, #f9fafb); }
}
@media (max-width: 560px) {
	.buyer-saved-info-control {
		align-items: stretch;
		flex-direction: column;
	}
	.buyer-saved-info-btn {
		width: 100%;
	}
}

.original-price { color: var(--gray-400, #9ca3af); font-size: 0.85em; }
.original-price s { text-decoration: line-through; }
.sale-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px; vertical-align: middle; }
.bulk-discount-note { font-size: 11px; color: #059669; font-weight: 500; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.variant-max-po { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 500; white-space: nowrap; margin-left: 6px; }
.bulk-badge { background: #059669; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.order-page { max-width: 960px; margin: 0 auto; padding: 24px; }
.form-header-img {
	width: 100%; height: auto;
	border-radius: var(--radius-lg); margin-bottom: 24px;
}
/* Header image size variants — set via .header-img-* class on #headerImg.
   max-width:100% caps the rendered width to the form container so wide source
   images (e.g. 1920×1080) don't overflow on narrow viewports. object-fit:cover
   crops the sides to fit while preserving the chosen height. */
.form-header-img.header-img-small,
.form-header-img.header-img-medium,
.form-header-img.header-img-large {
	display: block; margin-left: auto; margin-right: auto;
	width: auto; max-width: 100%;
	object-fit: cover;
}
.form-header-img.header-img-small  { height: 120px; max-height: 120px; }
.form-header-img.header-img-medium { height: 200px; max-height: 200px; }
.form-header-img.header-img-large  { height: 320px; max-height: 320px; }
.form-header-img.header-img-original {
	width: auto; height: auto;
	max-width: 100%;
	display: block; margin-left: auto; margin-right: auto;
}
/* .header-img-banner is the default — keep existing 100% width, auto height */
.form-title { font-size: 28px; margin-bottom: 8px; text-align: center; }
.form-desc { color: var(--gray-500); margin-bottom: 24px; font-size: 15px; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; text-align: center; }
.form-scheduled {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.countdown-card {
	border: 1px solid var(--gray-200);
	border-radius: 14px;
	background: var(--form-bg, #fff);
	box-shadow: var(--shadow);
	padding: 28px 24px;
}
.countdown-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 8px;
}
.countdown-message {
	font-size: 15px;
	color: var(--gray-600);
	margin-bottom: 20px;
}
.countdown-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.countdown-unit {
	border: 1px solid var(--gray-200);
	border-radius: 10px;
	background: var(--gray-50);
	padding: 14px 8px;
}
.countdown-unit span {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: var(--gray-800);
	line-height: 1;
}
.countdown-unit small {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 700;
	color: var(--gray-500);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.countdown-open-at {
	margin-top: 16px;
	color: var(--gray-500);
	font-size: 13px;
}
@media (max-width: 560px) {
	.countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.countdown-unit span { font-size: 26px; }
}

/* Product grid */
.form-wide-sale-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--gray-200));
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--primary) 9%, var(--form-bg, #fff));
	box-shadow: var(--shadow);
}
.form-wide-sale-banner-kicker {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--primary);
	color: white;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.form-wide-sale-banner-body { min-width: 0; }
.form-wide-sale-banner-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--gray-900);
	line-height: 1.2;
}
.form-wide-sale-banner-detail {
	margin-top: 3px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
	line-height: 1.35;
}
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; align-items: stretch; }
@media (max-width: 860px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
/* 2026-05-06: phone column count is now controllable via the
   `--mobile-prod-cols` CSS variable (default 1). Sellers tired of their
   carefully-styled forms collapsing to one tall stack on phones can pick 2
   from Appearance → Layout → "Product columns on phone". */
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(var(--mobile-prod-cols, 1), 1fr); } }
@media (max-width: 560px) {
	.form-wide-sale-banner { align-items: flex-start; }
	.form-wide-sale-banner-detail { font-size: 12px; }
}

/* Category filter tabs */
.category-filters {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.cat-filter-btn {
	padding: 6px 16px; border: 1px solid var(--gray-300); border-radius: 20px;
	background: var(--gray-50); cursor: pointer; font-size: 13px; font-weight: 500;
	color: var(--gray-600); transition: all 0.2s;
}
.cat-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-filter-btn.active {
	background: var(--primary); color: white; border-color: var(--primary);
}

.product-category-section { margin-bottom: 18px; }
.product-category-section .product-grid { margin-bottom: 0; }
.product-category-toggle {
	width: 100%; display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	background: var(--gray-50); cursor: pointer; text-align: left; font: inherit; color: var(--gray-800);
	box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s;
}
.product-category-toggle:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.product-category-title { font-size: 14px; font-weight: 700; }
.product-category-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--gray-500); }
.product-category-chevron { font-size: 12px; color: var(--gray-500); }
.product-category-body { padding-top: 10px; }
.product-category-header-static {
	width: 100%; display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	background: var(--gray-50); color: var(--gray-800); box-shadow: var(--shadow);
}
.product-category-controls {
	display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px;
}
.product-category-ctrl-btn {
	font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-700);
	padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius);
	background: var(--gray-50); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.product-category-ctrl-btn:hover { border-color: var(--primary); color: var(--primary); background: white; }

.prod-card {
	background: var(--form-bg, white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.15s;
	display: flex; flex-direction: column; min-height: 120px; position: relative; height: 100%;
}
.prod-card.selected { border-color: var(--primary); box-shadow: var(--shadow-md); }
.prod-card:hover { box-shadow: var(--shadow-md); }
.prod-select-indicator {
	position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
	border: 1px solid var(--gray-300); border-radius: 6px; background: var(--gray-100);
	box-shadow: 0 1px 2px rgba(15,23,42,0.12); z-index: 2; cursor: pointer;
}
/* Expand tap target without growing visual size */
.prod-select-indicator::before {
	content: ''; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px;
}
.prod-select-indicator:hover { border-color: var(--primary); background: var(--gray-200); }
.prod-select-indicator.checked { background: var(--primary); border-color: var(--primary); }
.prod-select-indicator.checked::after {
	content: '\2713'; position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 13px; font-weight: 700;
}
/* font-size:0 + color:transparent hides the browser's alt-text rendering during
   broken / slow-loading image states, so the card never visually shows the
   product name twice (once as alt text in the image slot, once in .prod-card-name).
   The JS image-error listener still replaces broken sources with the SVG
   placeholder, which is unaffected because it renders as an image, not text. */
.prod-gallery-public { width: 100%; background: var(--gray-50); }
.prod-gallery-main {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: zoom-in;
}
.prod-gallery-main:focus-visible,
.prod-gallery-thumb:focus-visible,
.img-enlarge-btn:focus-visible,
.image-modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-card-img { width: 100%; height: auto; max-height: 120px; object-fit: contain; background: var(--gray-50); font-size: 0; color: transparent; display: block; }
.prod-img-medium .prod-card-img { max-height: 200px; }
.prod-img-large .prod-card-img { max-height: 320px; }
.prod-img-square .prod-card-img { max-height: none; aspect-ratio: 1 / 1; object-fit: contain; }
.prod-img-original .prod-card-img { max-height: none; }
.prod-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
	gap: 4px;
	padding: 6px;
	background: var(--gray-50);
	border-top: 1px solid var(--gray-100);
}
.prod-gallery-thumb {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--gray-200);
	border-radius: 5px;
	background: var(--form-bg, #fff);
	padding: 2px;
	cursor: zoom-in;
	overflow: hidden;
}
.prod-gallery-thumb.active { border-color: var(--primary); }
.prod-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Product image carousel — one image at a time with prev/next arrows + dots.
   Slides keep .prod-card-img so they inherit the seller's product image size. */
.prod-carousel { position: relative; width: 100%; }
.prod-carousel-viewport { position: relative; }
.prod-carousel-stage { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; cursor: zoom-in; }
.prod-carousel-stage:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-carousel-img { display: none; }
.prod-carousel-img.active { display: block; }
.prod-carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid var(--gray-200); background: rgba(255, 255, 255, 0.92); color: #1f2937;
	font-size: 20px; line-height: 1; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.prod-carousel-arrow:hover { background: #fff; }
.prod-carousel-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-carousel-prev { left: 6px; }
.prod-carousel-next { right: 6px; }
.prod-carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--gray-50); border-top: 1px solid var(--gray-100); }
.prod-carousel-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 1px solid var(--gray-300); background: var(--form-bg, #fff); cursor: pointer; }
.prod-carousel-dot.active { background: var(--primary); border-color: var(--primary); }
.prod-carousel-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-card-body { padding: 8px 10px; display: flex; flex-direction: column; flex: 1; }
/* Top-align card content. Previously `margin-top: auto` pushed name+desc+variants
   to the bottom of the card body, which made variant rows land at different
   vertical positions across cards in the same row when their variant counts
   differed (1-variant card vs 2-variant card vs 3-variant card). Without it,
   content starts at the top of the body and the slack space goes to the bottom,
   so variant rows align uniformly across the row. */
.prod-card-name { font-size: 14px; font-weight: 600; margin-bottom: 1px; padding-right: 28px; }
.prod-card-desc { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.prod-card-size { font-size: 12px; color: var(--gray-500); margin: 2px 0 4px; font-weight: 600; }
.prod-info-link { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin: 2px 0 5px; font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; overflow-wrap: anywhere; }
.prod-info-link:hover { text-decoration: underline; }
.prod-info-links { width: fit-content; max-width: 100%; margin: 2px 0 5px; font-size: 12px; }
.prod-info-links summary { cursor: pointer; color: var(--primary); font-weight: 700; list-style: none; }
.prod-info-links summary::-webkit-details-marker { display: none; }
.prod-info-links summary::after { content: ' ▾'; font-size: 10px; }
.prod-info-links[open] summary::after { content: ' ▴'; }
.prod-info-links summary span { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; margin-left: 3px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 999px; font-size: 10px; }
.prod-info-links-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; width: min(100%, 360px); padding: 6px 0 0 8px; }
.prod-info-links-list .prod-info-link { min-width: 0; margin: 0; }
.prod-info-links-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; width: min(100%, 360px); margin: 2px 0 5px; }
.prod-info-links-inline .prod-info-link { min-width: 0; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .prod-info-links-list { grid-template-columns: minmax(0, 1fr); } }
.prod-sold-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 10px; padding-right: 34px; }
.prod-sold-goal-track { height: 14px; border-radius: 999px; background: var(--gray-100); overflow: hidden; border: 1px solid var(--gray-200); }
.prod-sold-goal-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); min-width: 0; }
.prod-sold-goal-count { font-size: 13px; color: var(--gray-600); font-weight: 800; white-space: nowrap; }
.moq-progress-block { padding: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--gray-50); color: inherit; margin-bottom: 16px; }
.moq-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.moq-progress-title { font-size: 1.14em; font-weight: 800; color: inherit; line-height: 1.2; }
.moq-progress-helper { font-size: 0.86em; color: inherit; opacity: 0.72; margin-top: 3px; line-height: 1.35; }
.moq-progress-count { font-size: 1.29em; font-weight: 900; color: var(--primary); white-space: nowrap; line-height: 1; }
.moq-progress-track { height: 18px; border-radius: 999px; background: var(--gray-100); overflow: hidden; border: 1px solid var(--gray-200); }
.moq-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); min-width: 0; }
.moq-progress-meta { font-size: 0.79em; color: inherit; opacity: 0.68; font-weight: 600; margin-top: 8px; }
.moq-progress-list { display: grid; gap: 12px; }
.moq-progress-product { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--form-bg); color: inherit; }
.moq-progress-product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.moq-progress-product-name { font-size: 1em; font-weight: 800; color: inherit; line-height: 1.25; }
.moq-progress-product-count { font-size: 1.07em; font-weight: 900; color: var(--primary); white-space: nowrap; line-height: 1; }
.moq-progress-product-size { font-size: 0.79em; font-weight: 700; color: inherit; opacity: 0.68; margin-top: -3px; }
.option-select { margin-bottom: 2px; }
.option-select label { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.option-select select {
	width: 100%; padding: 5px 8px; border: 1px solid var(--gray-300);
	border-radius: var(--radius); font-size: 13px; background: var(--form-bg, white); margin-top: 2px;
}
.dropdown-selected-variants { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dropdown-selected-variants:empty { display: none; }
.dropdown-selected-variant { background: var(--gray-50); }
.dropdown-selected-variant .variant-info { align-self: center; }
.dropdown-selected-variant .variant-qty { align-self: center; }
.dropdown-variant-remove {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px;
	width: 34px; height: 34px; padding: 0; border: 1px solid var(--gray-300);
	border-radius: 999px; background: var(--form-bg, #fff); color: var(--danger, #dc2626);
	font-size: 22px; line-height: 1; cursor: pointer;
}
.dropdown-variant-remove:hover { background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--form-bg, #fff)); }
.dropdown-variant-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qty-row { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.qty-row label { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.qty-input {
	width: 60px; padding: 4px 8px; border: 1px solid var(--gray-300);
	border-radius: var(--radius); font-size: 13px; text-align: center;
	accent-color: var(--primary);
}
.qty-input, .variant-qty-input, .cf-checkbox-qty-sel { accent-color: var(--primary); }
select.qty-dropdown { width: 80px; cursor: pointer; appearance: auto; accent-color: var(--primary); }
.line-total { margin-left: auto; font-weight: 600; color: var(--card-price-color, var(--primary)); font-size: 13px; }

/* Emoji tag legend + badges */
.emoji-tag-legend {
	display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px;
	background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	margin-bottom: 16px; font-size: 13px; color: var(--gray-700);
}
.emoji-tag-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.emoji-tag-icon { font-size: 16px; }
.prod-tags { margin-right: 6px; font-size: 14px; }
.prod-tag { cursor: default; }

/* Individual variant display mode */
.variant-list { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.variant-row {
	display: flex; align-items: center; flex-wrap: wrap;
	padding: 4px 8px; background: var(--gray-50); border: 1px solid var(--gray-200);
	border-radius: var(--radius); gap: 6px;
}
.variant-row.variant-oos { opacity: 0.85; }
.variant-row.variant-oos .variant-info { opacity: 0.6; }
.variant-row.variant-oos .variant-qty { opacity: 1; align-items: flex-end; flex-wrap: wrap; }

/* PRODUCTS-AUDIT G-15 — restock alert link + inline panel.
   Panel is a sibling of variant-info / variant-qty, with flex-basis:100% so it
   wraps to its own row when shown. Stays hidden in flex-flow until .open. */
.notify-restock-link {
	font-size: 11px;
	color: var(--primary);
	text-decoration: underline;
	cursor: pointer;
	margin-left: 4px;
	white-space: nowrap;
}
.notify-restock-link:hover { color: var(--primary-hover, var(--primary)); }
.notify-restock-panel {
	display: none;
	flex-basis: 100%;
	width: 100%;
	margin-top: 4px;
	padding: 10px;
	border: 1px solid var(--border, #e5e7eb);
	border-radius: var(--radius, 6px);
	background: var(--bg-surface, #ffffff);
	box-sizing: border-box;
	font-size: 13px;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.notify-restock-panel.open { display: flex; }
.notify-restock-panel input[type="email"] {
	flex: 1 1 140px;
	min-width: 0;
	padding: 6px 8px;
	font-size: 13px;
	box-sizing: border-box;
}
.notify-restock-panel button { font-size: 12px; padding: 6px 10px; flex-shrink: 0; }
.nrp-message {
	width: 100%;
	font-size: 12px;
	color: var(--gray-600, #6b7280);
	margin-top: 2px;
	min-height: 16px;
}
.nrp-message.nrp-ok { color: #059669; }
.nrp-message.nrp-error { color: var(--danger, #dc2626); }
.variant-info { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.variant-info .bulk-discount-note { flex: 1 1 100%; max-width: 100%; }
.variant-label { font-size: 13px; font-weight: 500; color: var(--gray-800); }
/* 2026-05-06: variant-price color now goes through `--card-price-color`,
   which auto-defaults to white-on-dark / black-on-light and respects the
   existing `productCards.priceColor` override. Falls back to --primary on
   themes where the new var hasn't been set yet. */
.variant-price { font-size: 12px; font-weight: 600; color: var(--card-price-color, var(--primary)); }
.variant-stock { font-size: 10px; font-weight: 500; }
.variant-stock.low { color: #f59e0b; }
.variant-stock.oos { color: var(--danger); }
.variant-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.variant-qty-input { width: 72px; text-align: center; padding: 6px 8px; font-size: 15px; }
.variant-subtotal { font-size: 14px; font-weight: 700; color: var(--card-price-color, var(--primary)); text-align: right; }
.variant-subtotal:not(:empty) { min-width: 50px; }
.variant-line-total { text-align: right; padding-top: 2px; }

/* Cart summary */
.cart-summary {
	background: var(--form-bg, white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 20px; margin-bottom: 24px; box-shadow: var(--shadow);
	position: sticky; top: 80px;
}
@media (max-width: 640px) { .cart-summary { position: static; } }
.prod-card-price-range { font-size: 12px; color: var(--primary); font-weight: 600; margin-bottom: 4px; }
.cart-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; }
.cart-qty-badge { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.cart-col-headers { display: grid; grid-template-columns: 1fr 70px 90px; gap: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); margin-bottom: 2px; }
.cart-col-headers span:nth-child(2) { text-align: center; }
.cart-col-headers span:nth-child(3) { text-align: right; }
.cart-total-qty { text-align: center; font-size: 14px; font-weight: 700; color: var(--gray-500); }
.cart-item { display: grid; grid-template-columns: 1fr 70px 90px; gap: 0; align-items: baseline; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100); }
.cart-item:last-child { border: none; }
.cart-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cart-item-qty { text-align: center; font-size: 13px; color: var(--gray-500); white-space: nowrap; }
.cart-item-price { text-align: right; font-weight: 600; white-space: nowrap; }
.cart-min-spend {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}
.cart-min-spend.blocked {
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.32);
	color: #92400e;
}
.cart-min-spend.met {
	background: rgba(16, 185, 129, 0.12);
	border: 1px solid rgba(16, 185, 129, 0.32);
	color: #047857;
}
.cart-shipping-wrap {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--gray-200);
}
.cart-shipping-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--gray-800); }
.cart-total {
	display: grid; grid-template-columns: 1fr 70px 90px; gap: 0; align-items: baseline; padding: 12px 0 0;
	font-size: 18px; font-weight: 700; border-top: 2px solid var(--gray-200); margin-top: 8px;
}

/* Block section wrapper — reset when inside styled .block-wrap */
.block-section {
	border: none; box-shadow: none; padding: 0; margin-bottom: 0;
	overflow-wrap: break-word; word-break: break-word;
}
/* 2026-05-07: switched from fixed 18px to em-relative so per-block Text Size
   overrides (e.g. on Payment Instructions) cascade into the heading. Default
   parent font is ~14px so 1.25em ≈ 17.5px, matching the prior visual weight. */
.block-section h3 { font-size: 1.25em; margin-bottom: 16px; }

/* Block border style variants — target .block-wrap (universal wrapper on every block) */
/* Default/subtle: light border, soft shadow */
.block-wrap {
	transition: opacity 0.25s ease, max-height 0.3s ease; max-height: 200000px; opacity: 1; overflow: visible;
	background: var(--form-bg, white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.block-wrap:empty { display: none; }

/* Address grid */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.address-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .address-grid { grid-template-columns: 1fr; } .address-grid .full { grid-column: 1; } }

/* Validation */
.field-error .form-input, .field-error .form-textarea, .field-error .form-select, .field-error select {
	border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}
.field-error-msg { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.field-error .field-error-msg { display: block; }

/* Custom fields */
.cf-heading { font-size: 20px; font-weight: 600; margin: 16px 0 8px; color: var(--gray-800); }
.cf-heading:first-child { margin-top: 0; }
.cf-divider { border: none; border-top: 2px solid var(--gray-200); margin: 16px 0; }
.cf-image { max-width: 100%; border-radius: var(--radius); margin: 8px 0; }
/* Seller-adjustable image-block size. Full (no class) stays 100% width;
   constrained sizes cap max-width and center the image. */
.cf-image.cf-image-small { max-width: 240px; display: block; margin-left: auto; margin-right: auto; }
.cf-image.cf-image-medium { max-width: 400px; display: block; margin-left: auto; margin-right: auto; }
.cf-image.cf-image-large { max-width: 640px; display: block; margin-left: auto; margin-right: auto; }
.cf-hyperlink { text-align: left; }
.cf-link-text { color: var(--cf-link-text-color, #007bff) !important; font-size: 15px; font-weight: 500; text-decoration: underline; transition: opacity 0.15s; }
.cf-link-text:hover { opacity: 0.8; text-decoration: underline; }
.cf-link-btn {
	display: inline-block; padding: 10px 24px; font-size: 14px; font-weight: 600;
	border-radius: var(--radius, 8px); text-decoration: none; text-align: center;
	background: var(--cf-link-btn-bg, #007bff); color: var(--cf-link-btn-text, #fff); transition: opacity 0.15s;
}
.cf-link-btn:hover { opacity: 0.9; }
.cf-link-btn-outline {
	background: transparent; color: var(--cf-link-outline-color, #007bff) !important;
	border: 2px solid var(--cf-link-outline-color, #007bff);
}
.cf-link-btn-outline:hover { background: var(--cf-link-outline-color, #007bff); color: var(--cf-link-btn-text, #fff) !important; }
.cf-radio-group, .cf-checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* Ask-quantity mode: checkbox + inline qty dropdown, flows in existing cf-grid columns */
.cf-checkbox-qty-group label.cf-checkbox-qty {
	display: flex; align-items: center; gap: 6px;
}
.cf-checkbox-qty-lbl {
	flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.3;
}
.cf-checkbox-qty-img-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.cf-checkbox-qty-img {
	width: 48px; height: 48px; object-fit: contain; border-radius: 6px; flex-shrink: 0;
	border: 1px solid var(--gray-200);
	background: var(--gray-50);
}
.poll-img-size-medium .cf-checkbox-qty-img { width: 64px; height: 64px; }
.poll-img-size-large .cf-checkbox-qty-img { width: 88px; height: 88px; }
.choice-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--gray-500); font-weight: 400; }
.cf-checkbox-qty-sel {
	flex-shrink: 0; width: 56px; padding: 2px 4px;
	font-size: 13px; border: 1px solid var(--gray-300); border-radius: 4px;
	background: var(--form-bg, white);
}
.cf-checkbox-qty-sel:disabled { opacity: 0.4; cursor: not-allowed; }
/* 2026-05-07: 1em so per-block Text Size overrides cascade into radio /
   checkbox option labels (e.g. payment-method picker). Was 14px hardcoded. */
.cf-radio-group label, .cf-checkbox-group label {
	display: flex; align-items: center; gap: 8px; font-size: 1em; cursor: pointer; color: var(--gray-700);
}
.cf-radio-group input, .cf-checkbox-group input { accent-color: var(--primary); }
.payment-method-choice {
	padding: 10px 12px;
	border: 1px solid var(--payment-choice-border, var(--gray-200));
	border-radius: var(--checkout-btn-radius, var(--radius, 8px));
	background: var(--payment-choice-bg, var(--gray-50));
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.payment-method-choice:hover {
	background: var(--payment-choice-hover-bg, var(--gray-100));
	border-color: var(--payment-choice-selected-border, var(--primary));
}
.payment-method-choice:has(input:checked) {
	background: var(--payment-choice-selected-bg, var(--primary-light));
	border-color: var(--payment-choice-selected-border, var(--primary));
	color: var(--payment-choice-selected-text, var(--gray-900)) !important;
	box-shadow: inset 0 0 0 1px var(--payment-choice-selected-border, var(--primary));
}
.payment-method-choice:has(input:checked) .pay-method-name,
.payment-method-choice:has(input:checked) .opt-surcharge {
	color: var(--payment-choice-selected-text, var(--gray-900)) !important;
}
.payment-method-choice input { flex-shrink: 0; }
.pay-method-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}
.pay-method-name { min-width: 0; overflow-wrap: anywhere; }
.pay-method-logo {
	width: 1.15em;
	height: 1.15em;
	min-width: 1.15em;
	display: inline-block;
	object-fit: contain;
	flex-shrink: 0;
	vertical-align: -0.14em;
}
.pay-method-logo-cash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: .78em;
	font-weight: 800;
	line-height: 1;
}

/* 2026-05-07: optional header above an agreement block. em-relative so it
   scales with any per-block Text Size override. */
.agreement-header {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gray-200);
	color: var(--gray-700);
}

/* Agreement checkbox */
.agree-wrap {
	display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
	border-bottom: 1px solid var(--gray-100); margin-bottom: 8px;
}
.agree-wrap:last-child { border-bottom: none; margin-bottom: 0; }
.agree-wrap input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); }
/* Inherit font-size and line-height so the builder's Text Size / Line Height
   controls take effect on agreement labels. Hardcoded font-size here previously
   blocked the inline style from .block-wrap, making Text Size appear to do
   nothing while line spacing visibly grew.
   `white-space: pre-wrap` honors the seller's literal newlines from the
   properties-panel textarea so a paragraph break in the source renders as a
   line break on the public form. Without this, browsers collapse \n into a
   single space and sellers had to add separate agreement items to fake
   paragraphs. Long lines still wrap normally. */
.agree-wrap label { color: var(--gray-700); cursor: pointer; white-space: pre-wrap; }

/* ---- Public product search bar (opt-in via builder properties) ---- */
.public-product-search {
	position: relative; margin: 0 0 12px;
	display: flex; align-items: center;
}
.public-product-search-icon {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--gray-400, #9ca3af); pointer-events: none;
}
.public-product-search-input {
	width: 100%; padding: 10px 36px 10px 36px;
	border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius, 8px);
	background: var(--form-bg, white); color: var(--gray-800, #1f2937);
	font-size: 14px; line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.public-product-search-input:focus {
	outline: none; border-color: var(--primary, #4f46e5);
	box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.public-product-search-clear {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; border: none; background: transparent;
	color: var(--gray-400, #9ca3af); cursor: pointer; font-size: 22px; line-height: 1;
	border-radius: 50%; padding: 0;
}
.public-product-search-clear:hover { color: var(--gray-700, #4b5563); background: var(--gray-100, #f3f4f6); }
.public-product-search-empty {
	margin-top: 10px; padding: 14px; border-radius: var(--radius, 8px);
	background: var(--gray-50, #f9fafb); color: var(--gray-500, #6b7280);
	font-size: 13px; text-align: center;
}

/* ---- Floating back-to-top button (public form) ---- */
.back-to-top-btn {
	position: fixed; right: 20px; bottom: 20px;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--primary, #4f46e5); color: #fff; border: none;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 90;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	opacity: 0; visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.15s;
}
.back-to-top-btn.visible { opacity: 0.92; visibility: visible; transform: translateY(0); }
.back-to-top-btn:hover { opacity: 1; background: var(--primary-dark, #4338ca); }
.back-to-top-btn:active { transform: translateY(0) scale(0.95); }
@media (max-width: 600px) {
	.back-to-top-btn { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}
.agree-wrap.has-error label { color: var(--danger); }
.agree-error { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.agree-wrap.has-error .agree-error { display: block; }
/* 2026-05-07: previous `padding-left: 28px` indented sub-item agreements
   relative to the parent, breaking the vertical alignment of all the
   checkboxes when sellers stack multiple agreement items. Sellers expect
   every agreement in the block to read as a peer of the others, with
   checkboxes lined up at the same x-position. Restored peer alignment. */
.agree-sub-item { padding: 6px 0; margin-bottom: 4px; border-bottom: none; }

/* File upload */
.cf-file-upload {
	border: 2px dashed var(--gray-300); border-radius: var(--radius); padding: 20px;
	text-align: center; cursor: pointer; position: relative; transition: border-color 0.15s;
}
.cf-file-upload:hover { border-color: var(--primary); }
.cf-file-upload input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cf-file-upload.has-file { border-color: var(--success); border-style: solid; background: #ecfdf5; }

/* Proof upload */
.proof-upload-area {
	border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); padding: 32px 16px;
	text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative;
}
.proof-upload-area:hover { border-color: var(--primary); background: var(--primary-light); }
.proof-upload-area.has-error { border-color: var(--danger); background: #fef2f2; }
.proof-upload-area.has-file { border-color: var(--success); border-style: solid; background: #ecfdf5; }
.proof-upload-area input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.proof-preview { margin-top: 12px; max-width: 200px; max-height: 150px; border-radius: var(--radius); border: 1px solid var(--gray-200); }

/* Confirmation */
.confirmation { text-align: center; padding: 48px 24px; }
.confirmation .icon { font-size: 64px; margin-bottom: 16px; }
.confirmation h2 { font-size: 24px; margin-bottom: 12px; }
/* 2026-05-07: payment-box now inherits font-size from the parent block-wrap
   so the seller's per-block "Text Size" override on the Payment Instructions
   block cascades into the method addresses / instructions text. Was hardcoded
   14px which silently blocked every per-block size change. */
.payment-box {
	background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 20px; margin: 20px auto; max-width: 500px; text-align: left;
	white-space: pre-wrap; font-size: 1em; line-height: 1.8;
	overflow-wrap: break-word; word-break: break-word;
}
.payment-later-note {
	margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--gray-300);
	color: var(--gray-600); font-size: .95em; line-height: 1.5;
	white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.not-found { text-align: center; padding: 80px 24px; color: var(--gray-400); }

/* Coupon — sits inside .block-wrap which already provides themed bg/border/shadow/padding,
   so the inner section is transparent and lets the themed wrapper show through. */
.coupon-section {
	background: transparent; border: none; border-radius: 0;
	padding: 0; margin-bottom: 0; box-shadow: none;
}
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }
.coupon-msg { font-size: 13px; margin-top: 8px; }
.coupon-msg.ok { color: var(--success); }
.coupon-msg.err { color: var(--danger); }
.discount-line { color: var(--success); font-weight: 500; }

/* Currency field + @username prefix share the same horizontal-prefix layout */
.currency-wrap, .at-wrap { display: flex; align-items: stretch; }
.currency-wrap .prefix, .at-wrap .prefix {
	padding: 10px 12px; background: var(--gray-100);
	border: 1px solid var(--gray-300); border-right: none;
	border-radius: var(--radius) 0 0 var(--radius);
	font-size: 14px; color: var(--gray-600);
	display: flex; align-items: center; line-height: 1;
}
.currency-wrap input, .at-wrap input { border-radius: 0 var(--radius) var(--radius) 0; flex: 1; min-width: 0; }
.at-wrap input { border-left: none; padding-left: 8px; }

/* Rich text display */
.rt-content p { margin: 4px 0; }
.rt-content a,
.cf-section-body a {
	color: #007bff !important;
	text-decoration: underline !important;
}
.rt-content a:visited,
.cf-section-body a:visited {
	color: #007bff !important;
}
.rt-bullet { padding-left: 16px; margin: 2px 0; }

/* Star rating field */
.star-rating { display: flex; gap: 4px; }
.star-rating .star { font-size: 28px; cursor: pointer; color: var(--gray-300); transition: color 0.15s; user-select: none; }
/* F-M-2: stars now follow theme primary so they don't clash on dark/non-orange themes. */
.star-rating .star.active { color: var(--primary, #f59e0b); }
.star-rating .star:hover { color: var(--primary, #f59e0b); }

/* Multi-page forms */
.mp-progress { margin-bottom: 20px; }
.mp-progress-track { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.mp-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s ease; }
.mp-progress-label { font-size: 12px; color: var(--gray-500); margin-top: 6px; text-align: center; font-weight: 500; }
.form-page { transition: opacity 0.25s ease; }
.form-page.page-hidden { display: none; }
.page-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.page-nav .btn { min-width: 120px; }

/* Calculation field */
.calc-result {
	padding: 12px 16px; background: var(--gray-50); border: 1px solid var(--gray-200);
	border-radius: var(--radius); font-size: 20px; font-weight: 700; color: var(--primary);
}

/* Conditional logic show/hide */
.block-wrap.cond-hidden { max-height: 0; opacity: 0; margin: 0; padding: 0; border: none; box-shadow: none; pointer-events: none; overflow: hidden; }
/* Merged blocks live inside a parent .block-wrap and need their OWN
   cond-hidden collapse so per-block conditions still work without taking down
   the whole shared card. (See renderBlockArray / mergeWithPrevious.) */
.block-merged.cond-hidden { max-height: 0; opacity: 0; margin: 0; padding: 0; border: none; pointer-events: none; overflow: hidden; }
/* Visual seam between adjacent merged blocks within the same wrap. Subtle —
   keeps each block visually distinct without competing with the wrap's border. */
.block-wrap > .block-merged + .block-merged,
.block-wrap > div:not(.block-merged) + .block-merged { margin-top: 12px; }
/* Batch 12a: single visible label for the whole merge group. The anchor block's
   `groupTitle` becomes this heading; all member field-level labels are hidden
   (see _blockInnerHtml suppressLabel). */
.merge-group-title {
	font-size: 18px; font-weight: 600; color: var(--text, #111827);
	margin: 0 0 14px;
}

/* Honeypot spam protection */
.hp-wrap { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---- Slider ---- */
.cf-slider-wrap { display: flex; align-items: center; gap: 12px; }
/* F-L-10: accent-color so the filled track on supporting browsers (Chrome/Edge/Firefox) follows theme primary. */
.cf-slider { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: var(--gray-200); border-radius: 3px; outline: none; cursor: pointer; accent-color: var(--primary, #6366f1); }
.cf-slider:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }
/* F-M-2: thumb ring follows the form-card background so it adapts on dark themes (used to be hardcoded white). */
.cf-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary, #6366f1); cursor: pointer; border: 2px solid var(--form-bg, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cf-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary, #6366f1); cursor: pointer; border: 2px solid var(--form-bg, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cf-slider-val { font-size: 18px; font-weight: 600; color: var(--primary, #6366f1); min-width: 40px; text-align: center; }

/* ---- Image Choice ---- */
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 6px; }
.ic-card { border: 2px solid var(--gray-200, #e5e7eb); border-radius: 8px; padding: 8px; text-align: center; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.ic-card:hover { border-color: var(--gray-400, #9ca3af); }
.ic-card.selected { border-color: var(--primary, #6366f1); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.ic-card-img-wrap { position: relative; width: 100%; }
.ic-card-img { width: 100%; height: 80px; object-fit: contain; border-radius: 4px; display: block; background: var(--gray-50, #f9fafb); }
.poll-img-size-medium .ic-card-img { height: 115px; }
.poll-img-size-large .ic-card-img { height: 150px; }
.ic-card-placeholder { width: 100%; height: 80px; background: var(--gray-100, #f3f4f6); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--gray-300, #d1d5db); font-size: 24px; }
.ic-card-label { font-size: 13px; color: var(--gray-700, #374151); margin-top: 6px; font-weight: 500; }
.ic-card-desc { margin-top: 3px; font-size: 12px; line-height: 1.3; color: var(--gray-500, #6b7280); overflow-wrap: anywhere; }
.img-enlarge-btn {
	position: absolute;
	right: 6px;
	bottom: 6px;
	border: 0;
	border-radius: 5px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 7px;
	cursor: zoom-in;
}
.img-enlarge-btn.mini {
	right: 3px;
	bottom: 3px;
	font-size: 10px;
	padding: 3px 5px;
}
.image-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(17,24,39,0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.image-modal {
	position: relative;
	max-width: min(960px, 96vw);
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.image-modal img {
	max-width: 100%;
	max-height: calc(94vh - 56px);
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}
.image-modal-close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111827;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.image-modal-caption { color: #fff; font-size: 14px; line-height: 1.4; text-align: center; max-width: 90vw; }
/* Enlarged-lightbox gallery controls — page through a product's photos zoomed in. */
.image-modal-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.55); color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer; z-index: 3;
	display: flex; align-items: center; justify-content: center;
}
.image-modal-arrow:hover { background: rgba(0, 0, 0, 0.78); }
.image-modal-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.image-modal-prev { left: 8px; }
.image-modal-next { right: 8px; }
.image-modal-counter {
	color: #fff; font-size: 13px; font-weight: 600;
	background: rgba(0, 0, 0, 0.5); padding: 3px 10px; border-radius: 12px;
}

/* ---- Multi Select ---- */
.ms-wrap { position: relative; }
.ms-tags { min-height: 40px; padding: 6px 10px; border: 1px solid var(--gray-300, #d1d5db); border-radius: 6px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--gray-50, #fff); }
.ms-tags:hover { border-color: var(--gray-400, #9ca3af); }
.ms-placeholder { color: var(--gray-400, #9ca3af); font-size: 14px; }
/* F-L-8: tag text now follows --ms-tag-text (set by renderer to buttons.textColor or contrast-clamped white). */
.ms-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--ms-tag-bg, var(--primary, #6366f1)); color: var(--ms-tag-text, #fff); border-radius: 4px; font-size: 13px; }
.ms-tag-x { cursor: pointer; font-size: 15px; line-height: 1; opacity: 0.8; }
.ms-tag-x:hover { opacity: 1; }
.ms-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--gray-50, #fff); border: 1px solid var(--gray-300, #d1d5db); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 50; margin-top: 4px; max-height: 250px; overflow: hidden; display: flex; flex-direction: column; }
/* 2026-05-06: on mobile the on-screen keyboard covers the bottom half of the
   viewport when the search input is focused. Cap the dropdown taller than the
   keyboard plus its toolbar so options stay reachable. The msToggle handler
   also scrolls the dropdown into view on open. */
@media (max-width: 640px) {
	.ms-dropdown { max-height: 50vh; }
	.ms-options { max-height: calc(50vh - 50px); }
}
/* 2026-05-06: ms-search font-size raised 14px → 16px. iOS Safari auto-zooms the
   page when a buyer focuses any input below 16px; the multi-select search box
   was missed in the mobile-input audit (form-input, qty-input etc. were already
   bumped). 16px is fine on desktop too. */
.ms-search { padding: 8px 12px; border: none; border-bottom: 1px solid var(--gray-200, #e5e7eb); font-size: 16px; outline: none; background: var(--gray-50, #fff); color: var(--ms-option-text, var(--gray-700, #374151)); }
.ms-search:focus { box-shadow: inset 0 -2px 0 0 var(--primary, #6366f1); }
.ms-options { overflow-y: auto; max-height: 200px; }
.ms-option { padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--ms-option-text, var(--gray-700, #374151)); }
.ms-option:hover { background: var(--ms-option-hover-bg, var(--gray-50, #f9fafb)); }
.ms-option.selected { background: var(--ms-option-selected-bg, rgba(99,102,241,0.08)); color: var(--ms-option-selected-text, var(--primary, #6366f1)); font-weight: 500; }

/* ---- Collapsible Section ---- */
.cf-section { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.cf-section-header { padding: 12px 16px; background: var(--gray-50, #f9fafb); border-bottom: 1px solid var(--gray-200, #e5e7eb); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.cf-section-header:hover { background: var(--gray-100, #f3f4f6); }
.cf-section-title { font-weight: 600; font-size: 15px; color: var(--gray-800, #1f2937); }
.cf-section-arrow { color: var(--gray-400, #9ca3af); font-size: 14px; transition: transform 0.2s; }
.cf-section-header.expanded .cf-section-arrow { transform: rotate(180deg); }
.cf-section-body { padding: 16px; font-size: 14px; color: var(--gray-600, #4b5563); line-height: 1.6; }

/* ---- Shipping Block ---- */
.shipping-methods, .shipping-addons {
	display: flex; flex-direction: column; gap: 6px;
}
.shipping-option {
	display: flex; align-items: center; gap: 10px; padding: 10px 14px;
	border: 1px solid var(--gray-200); border-radius: var(--radius);
	cursor: pointer; transition: border-color 0.15s, background 0.15s;
	font-size: 14px;
}
.shipping-option:hover { border-color: var(--selection-accent, var(--primary)); background: var(--selection-bg, var(--primary-light, rgba(99,102,241,0.04))); }
/* 2026-05-06: use --selection-accent (contrast-guaranteed against form bg)
   and --selection-bg (subtle tint of that accent) for the checked state, so
   selection is visible on every theme. Falls back to --primary on themes
   where the new vars aren't set. Border bumped to 2px for an additional
   visual cue that doesn't depend on color contrast alone. */
.shipping-option:has(input[type="radio"]:checked),
.shipping-option:has(input[type="checkbox"]:checked) {
	border-color: var(--selection-accent, var(--primary));
	border-width: 2px;
	padding: 9px 13px; /* compensate for the +1px border so the row doesn't shift */
	background: var(--shipping-selected-bg, var(--selection-bg, var(--primary-light, rgba(99,102,241,0.04))));
}
.shipping-option:has(input[type="radio"]:checked) .shipping-label,
.shipping-option:has(input[type="checkbox"]:checked) .shipping-label {
	font-weight: 700;
	color: var(--shipping-selected-text, var(--text));
}
.shipping-option input[type="radio"],
.shipping-option input[type="checkbox"] {
	width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
}
.shipping-option-qty { cursor: default; flex-wrap: wrap; }
.shipping-option-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.shipping-qty-select { width: auto; min-width: 92px; flex-shrink: 0; }
.shipping-option-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.shipping-label { flex: 1; font-weight: 500; color: var(--gray-700); }
/* 2026-05-06: shipping-price color is now controlled via the dedicated
   `--shipping-price-color` CSS variable. The renderer sets it to either the
   seller's override (theme_settings.shipping.priceColor) or auto-defaults to
   white on dark themes / black on light themes. Falls back to --selection-accent
   then --primary if neither is set, so existing forms without the new field
   still get a visible color. */
.shipping-price { font-weight: 600; color: var(--shipping-price-color, var(--selection-accent, var(--primary))); font-size: 14px; white-space: nowrap; }
.cart-item.shipping-line { color: var(--gray-600); font-style: italic; }
.cart-item.shipping-line > span:first-child { grid-column: 1 / 3; }
.cart-item.surcharge-line { color: var(--gray-600); font-style: italic; }
.cart-item.surcharge-line > span:first-child { grid-column: 1 / 3; }
.cart-item.discount-line > span:first-child { grid-column: 1 / 3; }
.opt-surcharge { color: var(--gray-500); font-size: 0.9em; font-weight: 500; }
#shipping-section.field-error .shipping-methods { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: var(--radius); }
#shipping-section.field-error .field-error-msg { display: block; }

/* ---- Mobile Enhancements ---- */
@media (max-width: 640px) {
	.order-page { padding: 12px; }
	.product-grid:not(.prod-img-medium):not(.prod-img-large):not(.prod-img-square):not(.prod-img-original) .prod-card-img { max-height: 100px; }
	/* PRODUCTS-AUDIT P-LOW-9: cap "Large" (320px) and "Original" image sizes
	   on narrow phones — at 320–414px viewport, a 320px image dominates the
	   entire screen and pushes the price/qty controls below the fold. 30vh
	   keeps the image generous but leaves room for the rest of the card. */
	.product-grid.prod-img-large .prod-card-img { max-height: min(320px, 30vh); }
	.product-grid.prod-img-original .prod-card-img { max-height: 30vh; }
	.prod-gallery-thumbs { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); }
	.image-modal-overlay { padding: 12px; }
	.image-modal-close { top: 8px; right: 8px; }
	.image-modal img { max-height: 82vh; }
	.prod-card-body { padding: 6px 8px; }
	.qty-input { min-height: 44px; font-size: 16px; }
	.option-select select { min-height: 44px; font-size: 16px; }
	.dropdown-selected-variant { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 8px; }
	.dropdown-selected-variant .variant-info { grid-column: 1 / -1; width: 100%; align-self: center; }
	.dropdown-selected-variant .variant-qty { grid-column: 1; grid-row: 2; justify-self: start; align-items: flex-start; }
	.dropdown-variant-remove { grid-column: 2; grid-row: 2; justify-self: end; flex-basis: 44px; width: 44px; height: 44px; }
	.form-input, .form-textarea, .form-select { min-height: 44px; font-size: 16px; }
	.block-section { padding: 16px; margin-bottom: 16px; }
	.block-section h3 { font-size: 16px; }
	.shipping-option-qty { align-items: flex-start; }
	.shipping-option-main { width: 100%; }
	.shipping-qty-select { width: 100%; }
	.cart-summary { position: static; padding: 16px; }
	.variant-row { padding: 6px 8px; }
	.variant-qty-input { min-height: 40px; font-size: 16px; width: 64px; }
	.btn { min-height: 44px; font-size: 15px; }
	.form-title { font-size: 22px; }
	.confirmation { padding: 32px 16px; }
	.payment-box { padding: 16px; }
}

/* Mobile/tablet: strip only the outer form container border (the viewport frame looked cut off on mobile).
   Section/block borders are left alone so they keep rendering per theme settings. */
@media (max-width: 900px) {
	.order-page {
		border: none !important; border-radius: 0 !important;
	}
}

/* Powered by footer */
.powered-by {
	text-align: center; padding: 24px 0 8px; font-size: 12px; color: var(--gray-400);
}
.powered-by a { color: var(--gray-400); text-decoration: none; }
.powered-by a:hover { color: var(--primary); }
.buyer-footer-account.hidden { display: none; }
.buyer-footer-account a { color: var(--gray-500); }
.buyer-footer-account a:hover { color: var(--primary); }
.buyer-footer-sep { margin: 0 8px; color: var(--gray-300); }

/* Password gate card */
.pw-gate-card {
	background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 32px 28px; box-shadow: var(--shadow-md);
}
.password-reveal-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.password-reveal-row .form-input {
	min-width: 0;
}
.password-reveal-btn {
	flex: 0 0 auto;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-surface);
	color: var(--text-secondary);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 0 12px;
	cursor: pointer;
}
.password-reveal-btn:hover,
.password-reveal-btn:focus {
	border-color: var(--primary);
	color: var(--primary);
	outline: none;
}
.password-reveal-btn:focus {
	box-shadow: 0 0 0 3px var(--primary-light);
}

/* Confirmation checkmark animation */
@keyframes confirmPop {
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}
.confirmation .icon { animation: confirmPop 0.5s ease-out; }

/* Signup prompt on confirmation page */
.signup-prompt-card {
	background: var(--primary-light);
	border: 1px solid #c7d2fe;
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	text-align: center;
}

/* F-04: action-first confirmation v2 */
.confirmation-v2 {
	max-width: 540px;
	margin: 0 auto;
	padding: 24px 16px;
}
.confirmation-v2 .conf-card {
	background: var(--form-bg, white);
	border: 1px solid var(--section-border, #e2e8f0);
	border-radius: 14px;
	padding: 24px 24px 26px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.06);
	text-align: left;
}
.confirmation-v2 .conf-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ea580c;
	margin-bottom: 12px;
}
.confirmation-v2 .conf-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ea580c;
	box-shadow: 0 0 0 4px rgba(234,88,12,0.18);
	animation: confDotPulse 1.8s ease-in-out infinite;
}
@keyframes confDotPulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(234,88,12,0.18); }
	50% { box-shadow: 0 0 0 7px rgba(234,88,12,0.10); }
}
.confirmation-v2 .conf-order-id {
	margin-left: auto;
	color: var(--text-muted, #64748b);
	font-family: ui-monospace, monospace;
	font-weight: 500;
}
.confirmation-v2 .conf-heading {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--text-color, #0f172a);
	line-height: 1.25;
}
.confirmation-v2 .conf-sub {
	font-size: 14px;
	color: var(--text-muted, #64748b);
	margin: 0 0 18px;
	line-height: 1.55;
}
.confirmation-v2 .conf-instruction { margin-bottom: 18px; }
.confirmation-v2 .conf-instr-head {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted, #64748b);
	margin: 0 0 8px;
}
.confirmation-v2 .payment-box {
	background: var(--gray-50, #f8fafc);
	border: 1px solid var(--section-border, #e2e8f0);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 14px;
	color: var(--text-color, #1e293b);
	line-height: 1.6;
	white-space: pre-wrap;
}
.confirmation-v2 .conf-action {
	margin-top: 18px;
	padding: 16px 18px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 12px;
	text-align: center;
}
.confirmation-v2 .conf-action-prompt {
	font-size: 14px;
	font-weight: 600;
	color: #065f46;
	margin: 0 0 10px;
}
.confirmation-v2 .conf-paid-btn {
	width: 100%;
	background: #059669;
	border-color: #059669;
}
.confirmation-v2 .conf-paid-btn:hover { background: #047857; border-color: #047857; }
.confirmation-v2 .conf-paid-btn:disabled { opacity: 0.65; }
.confirmation-v2 .conf-action-sub {
	font-size: 12px;
	color: #047857;
	margin: 8px 0 0;
	line-height: 1.5;
}
.confirmation-v2 .conf-reported {
	margin-top: 18px;
	padding: 18px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 12px;
	text-align: center;
	color: #065f46;
}
.confirmation-v2 .reported-badge {
	display: inline-block;
	background: #059669;
	color: white;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.confirmation-v2 .conf-reported p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
}
.confirmation-v2 .conf-summary {
	margin-top: 18px;
	font-size: 13px;
	color: var(--text-muted, #64748b);
}
.confirmation-v2 .conf-summary .conf-instr-head {
	margin: 0 0 8px;
}
.confirmation-v2 .conf-summary-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 4px 0;
	margin-bottom: 8px;
	overflow: hidden;
}
.confirmation-v2 .conf-summary-list:empty {
	display: none;
}
.confirmation-v2 .conf-sum-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 10px;
	align-items: baseline;
	padding: 8px 14px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #1e293b;
}
.confirmation-v2 .conf-sum-row + .conf-sum-row {
	border-top: 1px solid #eef2f6;
}
.confirmation-v2 .conf-sum-name { font-weight: 500; }
.confirmation-v2 .conf-sum-qty {
	color: #64748b;
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	min-width: 28px;
	text-align: right;
}
.confirmation-v2 .conf-sum-price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #0f172a;
}
.confirmation-v2 .conf-sum-discount .conf-sum-price { color: #059669; }
.confirmation-v2 .conf-sum-ship .conf-sum-name { color: #475569; }
.confirmation-v2 .conf-sum-total {
	border-top: 1px solid #cbd5e1 !important;
	margin-top: 2px;
	padding-top: 12px;
	padding-bottom: 12px;
	background: #ffffff;
}
.confirmation-v2 .conf-sum-total .conf-sum-name {
	font-weight: 700;
	color: #0f172a;
	font-size: 14px;
}
.confirmation-v2 .conf-sum-total .conf-sum-price {
	font-size: 16px;
	font-weight: 700;
}
.confirmation-v2 .conf-check-email {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--gray-50, #f8fafc);
	border-radius: 8px;
	font-size: 13px;
}
.confirmation-v2 .conf-signup {
	margin-top: 22px;
	padding: 18px;
	background: var(--gray-50, #f8fafc);
	border: 1px dashed var(--section-border, #cbd5e1);
	border-radius: 12px;
}
.confirmation-v2 .conf-signup h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--text-color, #0f172a);
}
.confirmation-v2 .conf-signup p {
	font-size: 13px;
	color: var(--text-muted, #64748b);
	margin: 0 0 12px;
	line-height: 1.55;
}
/* Response-only confirmation (poll / no-products form): hide payment UI */
.confirmation-v2.conf-response-only .conf-status,
.confirmation-v2.conf-response-only .conf-instruction,
.confirmation-v2.conf-response-only .conf-summary,
.confirmation-v2.conf-response-only .conf-order-id { display: none !important; }

.confirmation-v2.payment-reported .conf-status { color: #059669; }
.confirmation-v2.payment-reported .conf-status-dot {
	background: #059669;
	animation: none;
	box-shadow: 0 0 0 4px rgba(5,150,105,0.18);
}

/* F-24: password gate help text */
.pw-help {
	margin-top: 14px;
	padding: 10px 12px;
	background: var(--gray-50, #f8fafc);
	border: 1px solid var(--section-border, #e2e8f0);
	border-radius: 8px;
	font-size: 13px;
	color: var(--text-muted, #64748b);
	line-height: 1.5;
	text-align: left;
}
.pw-help strong { color: var(--text-color, #0f172a); }

/* F-17: inline validation errors. Error messages stay hidden by default (see
   the original `.field-error-msg { display: none }` rule above) and only show
   when the field's wrapper is in the `.field-error` state — this used to set
   `display: block` unconditionally, which made every form display "is required"
   text under every field whether the field had been validated or not. */
.field-error-msg {
	margin-top: 6px;
	color: #dc2626;
	font-size: 12px;
	font-weight: 500;
}
.form-input.has-error,
.form-textarea.has-error {
	border-color: #dc2626 !important;
	background-color: #fef2f2;
}

/* Seller review chip on the public form (Phase 2 of reviews) */
.form-reviews-chip {
	display: flex; justify-content: flex-start;
	margin: 6px 0 14px;
}
.form-reviews-chip .rev-chip-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.12);
	color: #475569;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s, transform .15s;
}
.form-reviews-chip .rev-chip-link:hover {
	background: rgba(0,0,0,0.07);
	transform: translateY(-1px);
}
/* Stars stay gold — universal rating convention, reads as a score not decoration. */
.form-reviews-chip .rev-chip-stars { color: #f59e0b; letter-spacing: 1px; font-size: 14px; }
.form-reviews-chip .rev-chip-count { color: #64748b; font-size: 12px; }
.form-reviews-chip .rev-chip-arrow { font-size: 11px; opacity: .6; }

@media (prefers-color-scheme: dark) {
	.form-reviews-chip .rev-chip-link { color: #cbd5e1; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
	.form-reviews-chip .rev-chip-link:hover { background: rgba(255,255,255,0.10); }
	.form-reviews-chip .rev-chip-count { color: #94a3b8; }
}

/* File-upload field error banner — replaces the easy-to-miss small grey
 * "Failed - try again" text inside the upload box. */
.fu-error-banner {
	display: none;
	margin-top: 6px;
	padding: 8px 10px;
	background: rgba(239,68,68,0.10);
	border: 1px solid rgba(239,68,68,0.5);
	color: var(--danger, #dc2626);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
}
.cf-file-upload.has-upload-error {
	border-color: var(--danger, #dc2626) !important;
	background: rgba(239,68,68,0.04);
}

/* Louder "Order saved" confirmation banner — sits at the top of the
 * confirmation card so customers can't miss that the submit succeeded. */
.conf-louder-banner {
	background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%);
	border: 2px solid rgba(16,185,129,0.5);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0 0 20px;
	text-align: center;
}
.conf-louder-title {
	font-size: 22px;
	font-weight: 700;
	color: #047857;
	line-height: 1.2;
}
[data-theme="dark"] .conf-louder-title { color: #6ee7b7; }
.conf-louder-sub {
	font-size: 14px;
	color: var(--text);
	margin-top: 8px;
	font-weight: 500;
}
.conf-louder-email {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 6px;
}
.conf-louder-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.conf-louder-actions .btn {
	font-size: 13px;
}

/* =====================================================================
   Pinned confirmation page.
   Sellers' themes commonly produced unreadable text colors on the
   post-submit confirmation card (dark text on dark theme bg, low-contrast
   summary text, etc.). The confirmation surface stays locked to fixed
   system styling, but checkout CTAs consume the seller's button theme via
   --checkout-btn-* variables so embedded checkout does not fall back to
   system purple.
   ===================================================================== */
.confirmation,
.confirmation-v2 {
	/* Reset themed CSS variables for this scope. Children using
	   var(--form-bg) / var(--text-color) / var(--gray-N) etc. will pick
	   up these system values without each rule needing a rewrite. */
	--form-bg: #ffffff !important;
	--text-color: #0f172a !important;
	--text: #0f172a !important;
	--text-muted: #64748b !important;
	--section-border: #e2e8f0 !important;
	--gray-50: #f8fafc !important;
	--gray-100: #f1f5f9 !important;
	--gray-200: #e2e8f0 !important;
	--gray-300: #cbd5e1 !important;
	--gray-400: #94a3b8 !important;
	--gray-500: #64748b !important;
	--gray-600: #475569 !important;
	--gray-700: #334155 !important;
	--gray-800: #1e293b !important;
	--gray-900: #0f172a !important;
	--primary: #4f46e5 !important;
	--primary-hover: #4338ca !important;
	--primary-light: #eef2ff !important;
	color: #0f172a !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.confirmation-v2 .conf-card {
	background: #ffffff !important;
	border-color: #e2e8f0 !important;
	color: #0f172a !important;
}
.confirmation-v2 .conf-heading,
.confirmation-v2 .conf-signup h3 {
	color: #0f172a !important;
}
.confirmation-v2 .conf-sub,
.confirmation-v2 .conf-instr-head,
.confirmation-v2 .conf-summary,
.confirmation-v2 .conf-order-id,
.confirmation-v2 .conf-signup p {
	color: #64748b !important;
}
.confirmation-v2 .payment-box,
.confirmation-v2 .conf-check-email {
	background: #f8fafc !important;
	border-color: #e2e8f0 !important;
	color: #1e293b !important;
}
.confirmation-v2 .conf-signup {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
}
/* Buttons inside the confirmation keep the readable pinned surface while
   following the seller's checkout button theme. */
.confirmation .btn-primary,
.confirmation-v2 .btn-primary {
	background: var(--checkout-btn-bg, #4f46e5) !important;
	color: var(--checkout-btn-text, #ffffff) !important;
	border: var(--checkout-btn-border-width, 0px) solid var(--checkout-btn-border, var(--checkout-btn-bg, #4f46e5)) !important;
	border-radius: var(--checkout-btn-radius, 8px) !important;
}
.confirmation .btn-primary:hover,
.confirmation-v2 .btn-primary:hover {
	background: var(--checkout-btn-hover-bg, #4338ca) !important;
	border-color: var(--checkout-btn-border, var(--checkout-btn-hover-bg, #4338ca)) !important;
}
/* Loud success banner — keep system green text + bg even on dark themes. */
.conf-louder-banner {
	background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%) !important;
	border-color: rgba(16,185,129,0.5) !important;
}
.conf-louder-title { color: #047857 !important; }
.conf-louder-sub { color: #0f172a !important; }
.conf-louder-email { color: #64748b !important; }
/* Legacy v1 confirmation (still mounted via .confirmation class for back-compat) */
.confirmation .icon { color: #4f46e5 !important; }
.confirmation > h2 { color: #0f172a !important; }
.confirmation > p { color: #64748b !important; }

/* ---- PRODUCTS-AUDIT Batch F ---- */

/* P-LOW-14: custom +/- qty buttons. The wrapper sits inline; the buttons
   are 36px square (well above the 44px iOS recommendation when padding is
   counted). Hide native browser steppers on the wrapped input so we don't
   show two sets of controls. */
.qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--gray-300, #d1d5db);
	border-radius: 8px;
	overflow: hidden;
	background: var(--form-bg, #fff);
}
.qty-stepper .qty-input {
	border: none !important;
	border-radius: 0 !important;
	width: 56px;
	min-width: 56px;
	text-align: center;
	padding: 0 4px;
	background: transparent;
	-moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.qty-step-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 36px;
	background: var(--gray-50, #f9fafb);
	border: none;
	color: var(--text, #111827);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.1s;
}
.qty-step-btn:hover { background: var(--gray-100, #f3f4f6); }
.qty-step-btn:active { background: var(--gray-200, #e5e7eb); }
.qty-step-minus { border-right: 1px solid var(--gray-200, #e5e7eb); }
.qty-step-plus { border-left: 1px solid var(--gray-200, #e5e7eb); }
@media (max-width: 640px) {
	.qty-stepper .qty-input { min-height: 44px; width: 60px; }
	.qty-step-btn { min-height: 44px; width: 40px; font-size: 20px; }
}

/* P-LOW-12: SALE pill in dropdown-variant mode product cards. Sits next to
   the price range so the buyer sees it before opening the dropdown. */
.sale-badge.dropdown-sale-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: #dc2626;
	color: #fff;
	border-radius: 4px;
	vertical-align: middle;
}

/* P-LOW-11: client-side required-product validation error. Red border on the
   product card whose required check failed; cleared when the buyer interacts
   with any of its inputs. */
.prod-card.prod-card-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}
.prod-card-error-msg {
	margin: 8px 12px 0;
	color: #dc2626;
	font-size: 13px;
	font-weight: 500;
}

/* P-MED-4: total-mismatch banner shown on submit response when client and
   server disagree on the total (sale ended mid-session, etc.). */
.total-mismatch-banner {
	margin: 12px 0;
	padding: 10px 14px;
	background: #fef3c7;
	border: 1px solid #f59e0b;
	border-radius: 6px;
	color: #92400e;
	font-size: 14px;
	line-height: 1.4;
}

.countdown-block {
	margin: 0 0 16px;
	padding: 20px;
	border: 1px solid var(--gray-200, #e5e7eb);
	border-radius: var(--radius-lg, 12px);
	background: var(--gray-50, #f9fafb);
	text-align: center;
	color: var(--text, #111827);
}
.countdown-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 4px;
}
.countdown-text {
	color: var(--gray-600, #4b5563);
	font-size: 14px;
	line-height: 1.45;
	margin-bottom: 14px;
}
.countdown-block .countdown-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.countdown-block .countdown-grid > div {
	padding: 10px 6px;
	border: 1px solid var(--gray-200, #e5e7eb);
	border-radius: var(--radius, 8px);
	background: var(--form-bg, #fff);
	min-width: 0;
}
.countdown-block .countdown-grid strong {
	display: block;
	color: var(--primary, #4f46e5);
	font-size: 24px;
	font-weight: 900;
	line-height: 1.05;
}
.countdown-block .countdown-grid span {
	display: block;
	margin-top: 4px;
	color: var(--gray-500, #6b7280);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.countdown-target {
	margin-top: 10px;
	color: var(--gray-500, #6b7280);
	font-size: 12px;
	line-height: 1.35;
}
.countdown-block.countdown-ended .countdown-grid strong { color: var(--gray-500, #6b7280); }
@media (max-width: 480px) {
	.countdown-block .countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.countdown-block .countdown-grid strong { font-size: 22px; }
}