/* Public order form styles */
.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; white-space: nowrap; }
.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; }

/* Product grid */
.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); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* 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 IMG_FALLBACK_ATTR onerror handler still kicks in and replaces src with the
   broken-image SVG, which is unaffected (rendered as image, not text). */
.prod-card-img { width: 100%; height: auto; max-height: 120px; object-fit: contain; background: var(--gray-50); font-size: 0; color: transparent; }
.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-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; }
.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;
}
.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(--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-label { font-size: 13px; font-weight: 500; color: var(--gray-800); }
.variant-price { font-size: 12px; font-weight: 600; 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(--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-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;
}
.block-section h3 { font-size: 18px; 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; }
.cf-hyperlink { text-align: left; }
.cf-link-text { color: var(--primary, #4f46e5); font-size: 15px; font-weight: 500; text-decoration: none; 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(--primary, #4f46e5); color: #fff; transition: opacity 0.15s;
}
.cf-link-btn:hover { opacity: 0.9; }
.cf-link-btn-outline {
	background: transparent; color: var(--primary, #4f46e5);
	border: 2px solid var(--primary, #4f46e5);
}
.cf-link-btn-outline:hover { background: var(--primary, #4f46e5); color: #fff; }
.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-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; }
.cf-radio-group label, .cf-checkbox-group label {
	display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--gray-700);
}
.cf-radio-group input, .cf-checkbox-group input { accent-color: var(--primary); }

/* 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; }
.agree-sub-item { padding: 6px 0 6px 28px; 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; }
.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: 14px; line-height: 1.8;
	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 { color: var(--primary); }
.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 { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; display: block; }
.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; }

/* ---- 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(--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; }
.ms-search { padding: 8px 12px; border: none; border-bottom: 1px solid var(--gray-200, #e5e7eb); font-size: 14px; outline: none; }
.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(--gray-700, #374151); }
.ms-option:hover { background: var(--gray-50, #f9fafb); }
.ms-option.selected { background: rgba(99,102,241,0.08); color: 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(--primary); background: var(--primary-light, rgba(99,102,241,0.04)); }
.shipping-option:has(input[type="radio"]:checked),
.shipping-option:has(input[type="checkbox"]:checked) {
	border-color: var(--primary);
	background: 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: 600;
}
.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); }
.shipping-price { font-weight: 600; color: 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-card-body { padding: 6px 8px; }
	.qty-input { min-height: 44px; font-size: 16px; }
	.option-select select { min-height: 44px; font-size: 16px; }
	.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); }

/* 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);
}

/* 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: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.18) 100%);
	border: 1px solid rgba(245,158,11,0.4);
	color: #92400e;
	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: linear-gradient(135deg, rgba(245,158,11,0.16) 0%, rgba(245,158,11,0.28) 100%);
	transform: translateY(-1px);
}
.form-reviews-chip .rev-chip-stars { color: #f59e0b; letter-spacing: 1px; font-size: 14px; }
.form-reviews-chip .rev-chip-count { color: #b45309; 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: #fcd34d; border-color: rgba(245,158,11,0.5); }
	.form-reviews-chip .rev-chip-count { color: #fbbf24; }
}

/* 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 — never themed.
   Sellers' themes commonly produced unreadable text colors on the
   post-submit confirmation card (dark text on dark theme bg, low-contrast
   primary buttons, etc.). The confirmation surface is now locked to
   fixed system styling so it always looks like the standard EZFormz
   success screen regardless of the form's theme. The themed page
   background behind the card is intentionally left alone so the
   seller's brand is still visible in the periphery.
   ===================================================================== */
.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 use the system purple, beating any
   theme-applied .order-page .btn-primary rule via specificity + !important. */
.confirmation .btn-primary,
.confirmation-v2 .btn-primary {
	background: #4f46e5 !important;
	color: #ffffff !important;
	border-color: #4f46e5 !important;
}
.confirmation .btn-primary:hover,
.confirmation-v2 .btn-primary:hover {
	background: #4338ca !important;
	border-color: #4338ca !important;
}
/* The "I've paid" action keeps its system green regardless of theme. */
.confirmation-v2 .conf-paid-btn,
.confirmation-v2 .conf-paid-btn:hover {
	color: #ffffff !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;
}

/* ============================================================
   THEME V2 — OKLCH 12-step palette derivation. ADR-0007.
   When a V2 form sets --ezfz-color-brand (one OKLCH value), CSS
   relative-color syntax derives the full 12-step Radix-style scale.
   Pure CSS, no JS, no build. Falls back gracefully on browsers without
   oklch() relative-color support (~7% Safari pre-15.4) — the V2 path
   writes resolved values for explicit tokens, so the cascade below is
   enhancement, not a hard dependency.
   ============================================================ */

@supports (color: oklch(from #fff l c h)) {
	:root {
		--ezfz-color-brand-1: oklch(from var(--ezfz-color-brand, #6366f1) 99% c h);
		--ezfz-color-brand-2: oklch(from var(--ezfz-color-brand, #6366f1) 96% c h);
		--ezfz-color-brand-3: oklch(from var(--ezfz-color-brand, #6366f1) 92% c h);
		--ezfz-color-brand-4: oklch(from var(--ezfz-color-brand, #6366f1) 86% c h);
		--ezfz-color-brand-5: oklch(from var(--ezfz-color-brand, #6366f1) 78% c h);
		--ezfz-color-brand-6: oklch(from var(--ezfz-color-brand, #6366f1) 70% c h);
		--ezfz-color-brand-7: oklch(from var(--ezfz-color-brand, #6366f1) 60% c h);
		--ezfz-color-brand-8: oklch(from var(--ezfz-color-brand, #6366f1) 52% c h);
		--ezfz-color-brand-9: oklch(from var(--ezfz-color-brand, #6366f1) l c h);
		--ezfz-color-brand-10: oklch(from var(--ezfz-color-brand, #6366f1) calc(l - 0.05) c h);
		--ezfz-color-brand-11: oklch(from var(--ezfz-color-brand, #6366f1) 35% c h);
		--ezfz-color-brand-12: oklch(from var(--ezfz-color-brand, #6366f1) 20% c h);
	}
}

/* Variable-mode swap for Auto/Force-Light/Force-Dark (ADR-0015 locked answer #7).
   Editor toggles data-ezfz-theme on iframe :root via setMode(). */
:root[data-ezfz-theme="dark"] { color-scheme: dark; }
:root[data-ezfz-theme="light"] { color-scheme: light; }

/* When V2 variables are present, let key form elements pick them up. The V1
   inline-style injection still wins on V1 forms because those don't set any
   --ezfz-* vars (var(...) falls back to its V1 default). */
.order-page {
	background: var(--ezfz-color-surface, transparent);
	color: var(--ezfz-color-text-primary, inherit);
}

.order-page .block-wrap {
	background: var(--ezfz-color-surface-strong, var(--form-bg, #fff));
	border-color: var(--ezfz-color-border, var(--gray-200, #e5e7eb));
}

.order-page .btn-primary {
	background: var(--ezfz-color-action, var(--primary, #6366f1));
	color: var(--ezfz-color-action-text, #fff);
}

.order-page .form-input,
.order-page .form-textarea,
.order-page .form-select {
	background: var(--ezfz-color-surface-strong, var(--gray-50, #f9fafb));
	color: var(--ezfz-color-text-primary, var(--text, #111));
	border-color: var(--ezfz-color-border, var(--gray-300, #d1d5db));
}

/* ============================================================
   V2 ACCESSIBILITY MODES — Phase 5e.
   Universal media-query overrides on the form's V2 cascade. V1 forms ignore
   these (they don't set --ezfz-* vars). Reduced-motion + forced-colors apply
   to ALL form CSS (not just the V2 hooks) since both are user-agent prefs.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.order-page *,
	.order-page *::before,
	.order-page *::after {
		animation-duration: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.order-page {
		--ezfz-color-action: Highlight;
		--ezfz-color-action-text: HighlightText;
		--ezfz-color-border: CanvasText;
		--ezfz-color-text-primary: CanvasText;
		--ezfz-color-surface: Canvas;
		--ezfz-color-surface-strong: Canvas;
	}
	.order-page .btn-primary,
	.order-page button { forced-color-adjust: auto; }
}

@media print {
	.order-page {
		--ezfz-color-surface: #ffffff;
		--ezfz-color-surface-strong: #ffffff;
		--ezfz-color-text-primary: #000000;
		--ezfz-color-text-muted: #555555;
		--ezfz-color-action: #000000;
		--ezfz-color-action-text: #ffffff;
		--ezfz-color-border: #cccccc;
		background: #ffffff !important;
		color: #000000 !important;
	}
	.order-page .ezfz-no-print,
	.order-page .cf-back-to-top,
	.order-page .chat-widget,
	.order-page .ezfz-toast { display: none !important; }
	.order-page a { text-decoration: underline; color: inherit !important; }
	.order-page .block-wrap {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}