/* ==========================================================================
   PIUROPRINT × PrintConstructor — STOREFRONT NBO SKIN
   ========================================================================== 
   Ownership contract:
   - PrintConstructor option-builder.css = mechanics + safe native defaults.
   - This file = reusable storefront appearance for every NBO option type.
   - single-product.css = page composition only (grid/span/placement/proxies).
   - printcart-modal.css = shared custom modal component (storefront + editor).

   No product/category IDs, nth-child meaning, option-name guesses or !important
   belong here. The option DATA remains owned by PrintConstructor.
   ========================================================================== */

/* 1. Theme contract ------------------------------------------------------- */
body.pp-body .nbo-wrapper {
	--pc-nbo-accent: var(--pp-orange, #f97316);
	--pc-nbo-accent-contrast: #fff;
	--pc-nbo-control-height: var(--pp-control-height, 48px);
	--pc-nbo-control-radius: var(--pp-control-radius, 10px);
	--pc-nbo-line: var(--pp-ui-line, #e5e7eb);
	--pc-nbo-line-soft: #eef1f5;
	--pc-nbo-surface: var(--pp-ui-surface, #fff);
	--pc-nbo-surface-muted: var(--pp-ui-surface-muted, #f8fafc);
	--pc-nbo-text: var(--pp-text, #111827);
	--pc-nbo-muted: var(--pp-ui-muted, #6b7280);
	--pc-nbo-danger: #dc2626;
	--pc-nbo-success: #059669;
	--pc-nbo-info: #0e7490;
	--pc-nbo-shadow: 0 8px 24px rgba(15, 23, 42, .08);
	--pc-nbo-overlay: rgba(15, 23, 42, .72);
	--pc-nbo-focus: 0 0 0 3px rgba(249, 115, 22, .16);
	--pc-nbo-choice-radius: 10px;
	--pc-nbo-choice-gap: 8px;
	--pc-nbo-xlabel-min-width: 168px;
	--pc-nbo-xlabel-preview-size: 64px;
	--pc-nbo-xlabel-gap: 10px;
	--pc-nbo-xlabel-radius: 12px;
	color: var(--pc-nbo-text);
	font-family: var(--pp-font, inherit);
}

body.pp-body .nbo-wrapper,
body.pp-body .nbo-wrapper *,
body.pp-body .nbo-detail-popup-wrap,
body.pp-body .nbo-detail-popup-wrap * {
	box-sizing: border-box;
}

/* 2. Field anatomy -------------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-option-wrapper { margin: 0; }

body.pp-body .nbo-wrapper .nbd-option-field {
	min-width: 0;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.pp-body .nbo-wrapper .nbd-field-header {
	display: flex;
	min-height: 0;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pc-nbo-text);
}

body.pp-body .nbo-wrapper .nbd-field-header label,
body.pp-body .nbo-wrapper .nbd-option-field > label {
	display: inline-block;
	margin: 0;
	color: var(--pc-nbo-text);
	font-family: var(--pp-font, inherit);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 800;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

body.pp-body .nbo-wrapper .nbd-required { color: var(--pc-nbo-danger); }
body.pp-body .nbo-wrapper .nbd-field-content { min-width: 0; padding: 0; }

body.pp-body .nbo-wrapper .nbd-field-description {
	margin: 5px 0 8px;
	color: var(--pc-nbo-muted);
	font-size: var(--pp-fs-xs, 12px);
	line-height: 1.5;
}

/* Help/recommended helpers are semantic UI, not decorative debris. */
body.pp-body .nbo-wrapper .nbd-help-tip {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid rgba(249, 115, 22, .32);
	border-radius: 50%;
	background: #fff;
	color: var(--pc-nbo-accent);
	font-size: 11px;
	line-height: 16px;
	cursor: help;
}
body.pp-body .nbo-wrapper .nbd-help-tip::after {
	top: 1px;
	color: currentColor;
	font-weight: 800;
}
body.pp-body .nbo-wrapper .nbo-recomand svg path { fill: var(--pc-nbo-accent); }

/* 3. Native controls ------------------------------------------------------ */
body.pp-body .nbo-wrapper .__nbd-dropdown-wrap { position: relative; }

body.pp-body .nbo-wrapper .nbo-dropdown,
body.pp-body .nbo-wrapper .nbd-field-content select,
body.pp-body .nbo-wrapper .nbd-field-content input[type="text"],
body.pp-body .nbo-wrapper .nbd-field-content input[type="number"],
body.pp-body .nbo-wrapper .nbd-field-content input[type="email"],
body.pp-body .nbo-wrapper .nbd-field-content input[type="date"],
body.pp-body .nbo-wrapper .nbd-field-content input[type="url"],
body.pp-body .nbo-wrapper .nbd-field-content input[type="tel"],
body.pp-body .nbo-wrapper .nbd-field-content textarea,
body.pp-body .nbo-wrapper .nbo-ad-result {
	width: 100%;
	min-height: var(--pc-nbo-control-height);
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-control-radius);
	outline: 0;
	background-color: var(--pc-nbo-surface);
	color: var(--pc-nbo-text);
	font-family: var(--pp-font, inherit);
	font-size: var(--pp-fs-md, 14px);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease);
}

body.pp-body .nbo-wrapper .nbo-dropdown,
body.pp-body .nbo-wrapper .nbd-field-content select {
	padding-right: 38px;
	cursor: pointer;
}

body.pp-body .nbo-wrapper .nbo-dropdown:focus,
body.pp-body .nbo-wrapper .nbd-field-content select:focus,
body.pp-body .nbo-wrapper .nbd-field-content input:focus,
body.pp-body .nbo-wrapper .nbd-field-content textarea:focus,
body.pp-body .nbo-wrapper .nbo-ad-result:focus-within {
	border-color: var(--pc-nbo-accent);
	box-shadow: var(--pc-nbo-focus);
}

body.pp-body .nbo-wrapper .nbd-field-content textarea {
	min-height: 96px;
	resize: vertical;
}

body.pp-body .nbo-wrapper .nbd-field-content input:disabled,
body.pp-body .nbo-wrapper .nbd-field-content select:disabled,
body.pp-body .nbo-wrapper .nbd-field-content textarea:disabled,
body.pp-body .nbo-wrapper .nbo-disabled {
	opacity: .52;
	cursor: not-allowed;
}

body.pp-body .nbo-wrapper .nbd-input-u { width: 100%; max-width: 220px; }

/* Upload is a real control; no page-specific file-button skin. */
body.pp-body .nbo-wrapper input[type="file"] {
	width: 100%;
	min-height: var(--pc-nbo-control-height);
	padding: 6px;
	border: 1px dashed #fdba74;
	border-radius: var(--pc-nbo-control-radius);
	background: #fffaf6;
	color: var(--pc-nbo-text);
	font-family: var(--pp-font, inherit);
}
body.pp-body .nbo-wrapper input[type="file"]::file-selector-button {
	min-height: 36px;
	margin-right: 10px;
	padding: 0 13px;
	border: 1px solid var(--pc-nbo-accent);
	border-radius: calc(var(--pc-nbo-control-radius) - 2px);
	background: var(--pc-nbo-accent);
	color: var(--pc-nbo-accent-contrast);
	font: 800 var(--pp-fs-sm, 13px)/1 var(--pp-font, inherit);
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbo-upload-meta {
	display: block;
	margin-top: 4px;
	color: var(--pc-nbo-muted);
	font-size: var(--pp-fs-xs, 12px);
	line-height: 1.4;
}
body.pp-body .nbo-wrapper .nbo-upload-meta--first { margin-top: 10px; }

/* 4. Radio --------------------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-radio,
body.pp-body .nbo-wrapper .nbo-sub-attr-r {
	display: grid;
	gap: var(--pc-nbo-choice-gap);
}

body.pp-body .nbo-wrapper .nbd-radio label,
body.pp-body .nbo-wrapper .nbo-sub-attr-r label {
	position: relative;
	display: flex;
	min-height: 38px;
	align-items: center;
	margin: 0;
	padding: 8px 10px 8px 32px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-choice-radius);
	background: var(--pc-nbo-surface);
	color: var(--pc-nbo-text);
	font: 700 var(--pp-fs-sm, 13px)/1.35 var(--pp-font, inherit);
	cursor: pointer;
	transition: border-color var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbd-radio label::before,
body.pp-body .nbo-wrapper .nbo-sub-attr-r label::before {
	left: 10px;
	top: 50%;
	width: 14px;
	height: 14px;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	transform: translateY(-50%);
}
body.pp-body .nbo-wrapper .nbd-radio label::after,
body.pp-body .nbo-wrapper .nbo-sub-attr-r label::after {
	left: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	background: var(--pc-nbo-accent);
	transform: translateY(-50%);
}
body.pp-body .nbo-wrapper .nbd-radio input[type="radio"]:checked + label,
body.pp-body .nbo-wrapper .nbo-sub-attr-r input[type="radio"]:checked + label {
	border-color: var(--pc-nbo-accent);
	background: var(--pp-ui-orange-soft, #fff7ed);
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .08);
}
body.pp-body .nbo-wrapper .nbd-radio input[type="radio"]:checked + label::before,
body.pp-body .nbo-wrapper .nbo-sub-attr-r input[type="radio"]:checked + label::before { border-color: var(--pc-nbo-accent); }

/* 5. Label/pill choices --------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-label-wrap,
body.pp-body .nbo-wrapper .nbo-sub-attr-l {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-nbo-choice-gap);
}
body.pp-body .nbo-wrapper .nbd-label,
body.pp-body .nbo-wrapper .nbo-sub-attr-l label,
body.pp-body .nbo-wrapper .nbo-quantity-choice {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-choice-radius);
	background: var(--pc-nbo-surface);
	color: var(--pc-nbo-text);
	font: 750 var(--pp-fs-sm, 13px)/1.3 var(--pp-font, inherit);
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbd-label:hover,
body.pp-body .nbo-wrapper .nbo-sub-attr-l label:hover,
body.pp-body .nbo-wrapper .nbo-quantity-choice:hover { border-color: #fdba74; box-shadow: none; }
body.pp-body .nbo-wrapper .nbd-label-wrap input[type="radio"]:checked + label,
body.pp-body .nbo-wrapper .nbo-sub-attr-l input[type="radio"]:checked + label {
	border-color: var(--pc-nbo-accent);
	background: var(--pp-ui-orange-soft, #fff7ed);
	color: #c2410c;
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .08);
}

/* 6. Checkbox/page choices ------------------------------------------------ */
body.pp-body .nbo-wrapper .nbo-checkbox-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-nbo-choice-gap);
}
body.pp-body .nbo-wrapper .nbo-checkbox {
	position: relative;
	width: 42px;
	height: 42px;
	margin: 0;
	border: 1px solid var(--pc-nbo-line);
	border-radius: 9px;
	background-color: var(--pc-nbo-surface);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: none;
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbo-checkbox-wrap input[type="checkbox"]:checked + label {
	border-color: var(--pc-nbo-accent);
	box-shadow: 0 0 0 2px rgba(249, 115, 22, .18);
}
body.pp-body .nbo-wrapper .nbo-checkbox-wrap input[type="checkbox"]:checked + label::after { color: var(--pc-nbo-accent-contrast); }

/* 7. Swatches ------------------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-swatch-wrap:not(.pc-modal-cards) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Compact tile mode. The inline background is PrintConstructor data. */
body.pp-body .nbo-wrapper .nbd-swatch-wrap:not(.pc-modal-cards) > input[type="radio"] + label.nbd-swatch,
body.pp-body .nbo-wrapper .nbo-sub-attr-wrap .nbd-swatch {
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--pc-nbo-line);
	border-radius: 9px;
	background-color: var(--pc-nbo-surface-muted);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: none;
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbd-swatch-wrap:not(.pc-modal-cards) > input[type="radio"]:checked + label.nbd-swatch {
	border-color: var(--pc-nbo-accent);
	box-shadow: 0 0 0 2px rgba(249, 115, 22, .2);
}

/* Rich card mode emitted by swatch templates. */
body.pp-body .nbo-wrapper .nbd-swatch-label-wrap:not(.pc-modal-card) {
	display: flex;
	flex: 1 1 160px;
	max-width: 240px;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 10px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-choice-radius);
	background: var(--pc-nbo-surface);
	cursor: pointer;
	transition: border-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbd-swatch-label-wrap:not(.pc-modal-card):hover { border-color: #fdba74; }
body.pp-body .nbo-wrapper .nbd-swatch-label-wrap:not(.pc-modal-card):has(input[type="radio"]:checked) {
	border-color: var(--pc-nbo-accent);
	background: var(--pp-ui-orange-soft, #fff7ed);
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .1);
}
body.pp-body .nbo-wrapper .nbd-swatch-label-wrap:not(.pc-modal-card) .nbd-swatch {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	margin: 0;
	border: 1px solid var(--pc-nbo-line);
	border-radius: 8px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: none;
}
body.pp-body .nbo-wrapper .nbd-swatch-description {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
	color: var(--pc-nbo-muted);
}
body.pp-body .nbo-wrapper .nbd-swatch-title { color: var(--pc-nbo-text); font-size: var(--pp-fs-sm, 13px); line-height: 1.3; }
body.pp-body .nbo-wrapper .nbd-swatch-title b { font-weight: 750; }
body.pp-body .nbo-wrapper .nbd-swatch-price { margin-top: 2px; color: #c2410c; font-size: var(--pp-fs-xs, 12px); font-weight: 750; white-space: nowrap; }
body.pp-body .nbo-wrapper .nbd-swatch-price .woocommerce-Price-amount { color: inherit; }

body.pp-body .nbo-wrapper .nbd-swatch-tooltip,
body.pp-body .nbo-wrapper .nbo-group-timeline-tooltip {
	border-radius: 7px;
	background: var(--pc-nbo-text);
	color: #fff;
	font: 700 var(--pp-fs-xs, 12px)/1.35 var(--pp-font, inherit);
	box-shadow: var(--pc-nbo-shadow);
}

/* 8. X-label/image cards -------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--pc-nbo-xlabel-min-width), 100%), 1fr));
	gap: var(--pc-nbo-xlabel-gap);
	align-items: stretch;
	margin: 0;
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrapper::before,
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrapper::after { content: none; display: none; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrap {
	position: relative;
	display: grid;
	grid-template-columns: var(--pc-nbo-xlabel-preview-size) minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	width: auto;
	min-width: 0;
	min-height: calc(var(--pc-nbo-xlabel-preview-size) + 16px);
	margin: 0;
	padding: 8px 12px 8px 8px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-xlabel-radius);
	background: var(--pc-nbo-surface);
	cursor: pointer;
	transition: border-color var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrap:has(input:checked) {
	border-color: var(--pc-nbo-accent);
	background: var(--pp-ui-orange-soft, #fff7ed);
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .08);
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-value,
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-value-inner {
	position: relative;
	width: var(--pc-nbo-xlabel-preview-size);
	height: var(--pc-nbo-xlabel-preview-size);
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: calc(var(--pc-nbo-xlabel-radius) - 3px);
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-value-inner { position: absolute; inset: 0; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	opacity: 0;
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap label.nbd-xlabel {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pc-nbo-line);
	border-radius: calc(var(--pc-nbo-xlabel-radius) - 3px);
	background-color: #fff;
	background-repeat: no-repeat;
	box-shadow: none;
	cursor: pointer;
}
/* Selection is represented by the whole card. Never cover the real preview. */
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrap input:checked + label.nbd-xlabel::after { content: none; display: none; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrap > label[for] {
	min-width: 0;
	margin: 0;
	color: var(--pc-nbo-text);
	font: 650 var(--pp-fs-sm, 13px)/1.35 var(--pp-font, inherit);
	overflow-wrap: break-word;
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel-wrap > label[for] b { font-weight: 800; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel .nbo-recomand { top: -2px; right: 3px; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel .nbo-recomand svg { width: 16px; height: 26px; }
body.pp-body .nbo-wrapper .nbd-field-xlabel-wrap .nbd-xlabel .nbd-help-tip { position: absolute; top: 5px; left: 5px; }

/* 9. Range --------------------------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-input-range { display: inline-block; margin-left: 8px; color: var(--pc-nbo-text); font-weight: 750; }
body.pp-body .nbo-wrapper .nbd-field-content input[type="range"] { accent-color: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbd-field-content input[type="range"]::-webkit-slider-thumb { background: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbd-field-content input[type="range"]::-moz-range-thumb { background: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbd-field-content input[type="range"]::-webkit-slider-runnable-track { background: var(--pc-nbo-line); }
body.pp-body .nbo-wrapper .nbd-field-content input[type="range"]::-moz-range-track { background: var(--pc-nbo-line); }

/* 10. Dimension stepper --------------------------------------------------- */
body.pp-body .nbo-wrapper .nbo-dimension-item { display: inline-block; margin: 0 8px 8px 0; }
body.pp-body .nbo-wrapper .nbo-dimension-label { display: block; margin: 0 0 6px; color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); font-weight: 750; }
body.pp-body .nbo-wrapper .nbo-dimension-wrap {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-control-radius);
	background: var(--pc-nbo-surface);
}
body.pp-body .nbo-wrapper .nbo-dimension-wrap:focus-within { border-color: var(--pc-nbo-accent); box-shadow: var(--pc-nbo-focus); }
body.pp-body .nbo-wrapper .nbo-updown-dimension {
	display: flex;
	flex: 0 0 42px;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	background: var(--pc-nbo-surface-muted);
	color: var(--pc-nbo-muted);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbo-updown-dimension:hover { background: var(--pp-ui-orange-soft, #fff7ed); color: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbo-updown-dimension:active { background: var(--pc-nbo-accent); color: #fff; }
body.pp-body .nbo-wrapper .nbd-field-content input.nbo-dimension[type="number"] {
	width: 72px;
	min-width: 0;
	min-height: 42px;
	padding: 8px 6px;
	border: 0;
	border-right: 1px solid var(--pc-nbo-line);
	border-left: 1px solid var(--pc-nbo-line);
	border-radius: 0;
	text-align: center;
	box-shadow: none;
	appearance: textfield;
}
body.pp-body .nbo-wrapper input.nbo-dimension[type="number"]::-webkit-outer-spin-button,
body.pp-body .nbo-wrapper input.nbo-dimension[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
body.pp-body .nbo-wrapper .nbo-dimension-unit { margin-left: 7px; color: var(--pc-nbo-muted); font-weight: 700; }
body.pp-body .nbo-wrapper .nbo-dimension-width { display: inline-block; margin-top: 3px; color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); }

/* 11. Quantity variants --------------------------------------------------- */
body.pp-body .nbo-wrapper .nbo-quantity-radio-choice {
	display: flex;
	min-height: 38px;
	align-items: center;
	margin: 0 0 6px;
	padding: 8px 10px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-choice-radius);
	background: var(--pc-nbo-surface);
}
body.pp-body .nbo-wrapper .nbo-custom-quantity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
body.pp-body .nbo-wrapper .nbo-custom-quantity input[type="number"],
body.pp-body .nbo-wrapper .nbo-delivery-custom-quantity input { max-width: 140px; }

body.pp-body .nbo-wrapper .nbd-button,
body.pp-body .nbo-wrapper .update-custom-quantity {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--pc-nbo-accent);
	border-radius: var(--pc-nbo-control-radius);
	background: #fff;
	color: var(--pc-nbo-accent);
	font: 800 var(--pp-fs-sm, 13px)/1.2 var(--pp-font, inherit);
	cursor: pointer;
	transition: background-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease), border-color var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbd-button:hover,
body.pp-body .nbo-wrapper .update-custom-quantity:hover { background: var(--pc-nbo-accent); color: #fff; }

/* 12. Advanced dropdown + shape ------------------------------------------ */
body.pp-body .nbo-wrapper .nbd-field-ad-dropdown-wrap { position: relative; }
body.pp-body .nbo-wrapper .nbo-ad-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbo-ad-result-name { min-width: 0; overflow: hidden; color: var(--pc-nbo-text); text-overflow: ellipsis; white-space: nowrap; }
body.pp-body .nbo-wrapper .nbo-ad-pseudo-list {
	margin-top: 6px;
	overflow: hidden;
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-control-radius);
	background: var(--pc-nbo-surface);
	box-shadow: var(--pc-nbo-shadow);
}
body.pp-body .nbo-wrapper .nbo-ad-pseudo-list .nbo-ad-list-item {
	border-bottom: 1px solid var(--pc-nbo-line-soft);
	background: var(--pc-nbo-surface);
	color: var(--pc-nbo-text);
	transition: background-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease);
}
body.pp-body .nbo-wrapper .nbo-ad-pseudo-list .nbo-ad-list-item:last-child { border-bottom: 0; }
body.pp-body .nbo-wrapper .nbo-ad-pseudo-list .nbo-ad-list-item:hover { background: var(--pc-nbo-surface-muted); }
body.pp-body .nbo-wrapper .nbo-ad-pseudo-list .nbo-ad-list-item.active > .nbo-ad-item-main { color: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbo-ad-item-main { min-height: 42px; padding: 7px 10px; }
body.pp-body .nbo-wrapper .nbo-ad-item-thumb {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: 1px solid var(--pc-nbo-line);
	border-radius: 7px;
	background-position: center;
	background-size: cover;
}
body.pp-body .nbo-wrapper .nbo-ad-item-title { color: var(--pc-nbo-text); font-size: var(--pp-fs-sm, 13px); font-weight: 750; }
body.pp-body .nbo-wrapper .nbo-ad-item-description { color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); }
body.pp-body .nbo-wrapper .nbo-ad-pseudo-sublist {
	border: 1px solid var(--pc-nbo-line);
	border-radius: var(--pc-nbo-control-radius);
	background: var(--pc-nbo-surface);
	box-shadow: var(--pc-nbo-shadow);
}
body.pp-body .nbo-wrapper .nbd-field-shape .nbo-ad-list-item:hover,
body.pp-body .nbo-wrapper .nbd-field-shape .nbo-ad-list-item.active { border-color: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbd-field-shape svg path { fill: currentColor; }

/* 13. Subattributes ------------------------------------------------------- */
body.pp-body .nbo-wrapper .nbo-sub-attr-wrap {
	margin-top: 9px;
	padding: 10px;
	border: 1px solid var(--pc-nbo-line-soft);
	border-radius: var(--pc-nbo-control-radius);
	background: var(--pc-nbo-surface-muted);
}
body.pp-body .nbo-wrapper .nbo-sub-attr-wrap select { background-color: #fff; }

/* 14. Groups, panels and timeline ---------------------------------------- */
body.pp-body .nbo-wrapper .nbo-group-wrap,
body.pp-body .nbo-wrapper .nbo-group-type2-wrap {
	margin: 0 0 14px;
	border: 1px solid var(--pc-nbo-line-soft);
	border-radius: 12px;
	background: var(--pc-nbo-surface);
	overflow: hidden;
}
body.pp-body .nbo-wrapper .nbo-group-header,
body.pp-body .nbo-wrapper .nbo-group-type2-header {
	height: auto;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--pc-nbo-line-soft);
	background: var(--pc-nbo-surface-muted);
	overflow: visible;
}
body.pp-body .nbo-wrapper .nbo-group-header .group-title,
body.pp-body .nbo-wrapper .nbo-group-type2-wrap .group-type2-title {
	display: flex;
	min-height: 0;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pc-nbo-text);
	font: 800 var(--pp-fs-md, 14px)/1.35 var(--pp-font, inherit);
	text-transform: none;
}
body.pp-body .nbo-wrapper .nbo-group-header .group-title::before,
body.pp-body .nbo-wrapper .nbo-group-header .group-title::after { content: none; display: none; }
body.pp-body .nbo-wrapper .nbo-group-icon { flex: 0 0 30px; width: 30px; height: 30px; }
body.pp-body .nbo-wrapper .nbo-group-icon img { width: 100%; height: 100%; object-fit: cover; }
body.pp-body .nbo-wrapper .nbo-group-body,
body.pp-body .nbo-wrapper .nbo-group-type2-body { padding: 12px 14px; border: 0; background: var(--pc-nbo-surface); }
body.pp-body .nbo-wrapper .nbo-group-footer { padding: 9px 14px; background: var(--pc-nbo-surface-muted); color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); line-height: 1.45; }
body.pp-body .nbo-wrapper .nbo-group-toggle,
body.pp-body .nbo-wrapper .nbo-group-type2-toggle {
	border-color: var(--pc-nbo-line);
	background: #fff;
	color: var(--pc-nbo-muted);
}
body.pp-body .nbo-wrapper .nbo-group-toggle svg path,
body.pp-body .nbo-wrapper .nbo-group-type2-toggle svg path { fill: currentColor; }

body.pp-body .nbo-wrapper .nbo_group_panel_prev,
body.pp-body .nbo-wrapper .nbo_group_panel_next,
body.pp-body .nbo-wrapper .nbo-group-timeline-paged {
	color: var(--pc-nbo-text);
	cursor: pointer;
}
body.pp-body .nbo-wrapper .nbo-group-timeline-line { background: var(--pc-nbo-line); }
body.pp-body .nbo-wrapper .nbo-group-timeline-fill-line { background: var(--pc-nbo-accent); }
body.pp-body .nbo-wrapper .nbo-group-timeline-step-inner::after { border-color: var(--pc-nbo-line); background: #fff; }
body.pp-body .nbo-wrapper .nbo-group-timeline-step.active .nbo-group-timeline-step-inner::after,
body.pp-body .nbo-wrapper .nbo-group-timeline-step.over .nbo-group-timeline-step-inner::after { border-color: var(--pc-nbo-accent); background: var(--pc-nbo-accent); }

/* 15. Price matrix + bulk variation tables ------------------------------- */
body.pp-body .nbo-wrapper .nbo-table-wrap,
body.pp-body .nbo-wrapper .nbo-price-matrix,
body.pp-body .nbo-wrapper .nbo-bulk-variation-wrap { max-width: 100%; overflow-x: auto; }
body.pp-body .nbo-wrapper .nbo-price-matrix table,
body.pp-body .nbo-wrapper .nbo-table-wrap table,
body.pp-body .nbo-wrapper .nbo-bulk-variation {
	width: 100%;
	border: 1px solid var(--pc-nbo-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	background: var(--pc-nbo-surface);
	overflow: hidden;
	font-size: var(--pp-fs-sm, 13px);
}
body.pp-body .nbo-wrapper .nbo-price-matrix th,
body.pp-body .nbo-wrapper .nbo-price-matrix td,
body.pp-body .nbo-wrapper .nbo-table-wrap th,
body.pp-body .nbo-wrapper .nbo-table-wrap td,
body.pp-body .nbo-wrapper .nbo-bulk-variation th,
body.pp-body .nbo-wrapper .nbo-bulk-variation td {
	padding: 9px 10px;
	border: 0;
	border-right: 1px solid var(--pc-nbo-line-soft);
	border-bottom: 1px solid var(--pc-nbo-line-soft);
	color: var(--pc-nbo-text);
	text-align: center;
	vertical-align: middle;
}
body.pp-body .nbo-wrapper .nbo-price-matrix th,
body.pp-body .nbo-wrapper .nbo-table-wrap th,
body.pp-body .nbo-wrapper .nbo-bulk-variation th,
body.pp-body .nbo-wrapper .nbo-pm-empty { background: var(--pc-nbo-surface-muted); font-weight: 800; }
body.pp-body .nbo-wrapper .nbo-price-matrix td.selected { background: var(--pp-ui-orange-soft, #fff7ed); color: #c2410c; font-weight: 800; }
body.pp-body .nbo-wrapper .nbo-price-matrix td.disabled { background: #f8fafc; color: #94a3b8; }
body.pp-body .nbo-wrapper .nbo-table-wrap input[type="number"],
body.pp-body .nbo-wrapper .nbo-bulk-qty { width: 72px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--pc-nbo-line); border-radius: 8px; background: #fff; text-align: center; }
body.pp-body .nbo-wrapper .nbo-bulk-actions { margin-top: 10px; text-align: left; }
body.pp-body .nbo-wrapper .nbo-bulk-title { color: var(--pc-nbo-text); font-weight: 800; }

/* 16. Delivery ------------------------------------------------------------ */
body.pp-body .nbo-wrapper .nbo-delivery-wrapper { width: 100%; max-width: 100%; overflow-x: auto; }
body.pp-body .nbo-wrapper .nbo-delivery-wrapper table {
	width: 100%;
	border: 1px solid var(--pc-nbo-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	background: var(--pc-nbo-surface);
	overflow: hidden;
}
body.pp-body .nbo-wrapper .nbo-delivery-wrapper table th,
body.pp-body .nbo-wrapper .nbo-delivery-wrapper table td {
	padding: 10px;
	border: 0;
	border-right: 1px solid var(--pc-nbo-line-soft);
	border-bottom: 1px solid var(--pc-nbo-line-soft);
	background: var(--pc-nbo-surface);
	color: var(--pc-nbo-text);
	text-align: center;
	vertical-align: middle;
}
body.pp-body .nbo-wrapper .nbo-delivery-wrapper .nbo-delivery-date-wrap-title { background: var(--pc-nbo-surface-muted); }
body.pp-body .nbo-wrapper .nbo-delivery-icon { color: var(--pc-nbo-muted); }
body.pp-body .nbo-wrapper .nbo-delivery-icon svg path { fill: currentColor; }
body.pp-body .nbo-wrapper .nbo-delivery-qty { color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); font-weight: 750; text-transform: uppercase; }
body.pp-body .nbo-wrapper .nbo-delivery-date-title { color: var(--pc-nbo-text); font-weight: 800; }
body.pp-body .nbo-wrapper .nbo-delivery-date,
body.pp-body .nbo-wrapper .nbo-delivery-date2 { color: var(--pc-nbo-muted); font-size: var(--pp-fs-xs, 12px); }
body.pp-body .nbo-wrapper .nbo-delivery-date-selector { cursor: pointer; transition: background-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease); }
body.pp-body .nbo-wrapper .nbo-delivery-date-selector:hover,
body.pp-body .nbo-wrapper .nbo-delivery-date-selector.active { background: var(--pp-ui-orange-soft, #fff7ed); }
body.pp-body .nbo-wrapper .nbo-delivery-total { display: block; color: var(--pc-nbo-text); font-weight: 850; }
body.pp-body .nbo-wrapper .nbo-delivery-price-item { color: #c2410c; font-weight: 750; }
body.pp-body .nbo-wrapper .nbo-delivery-custom-quantity { margin-top: 10px; }

/* 17. Summary / pricing --------------------------------------------------- */
body.pp-body .nbo-wrapper .nbo-summary-wrapper,
body.pp-body .nbo-wrapper .nbo-table-summary-wrap,
body.pp-body .nbo-wrapper .nbo-table-pricing-wrap {
	margin-top: 16px;
	border: 1px solid var(--pc-nbo-line-soft);
	border-radius: 12px;
	background: var(--pc-nbo-surface);
}
body.pp-body .nbo-wrapper .nbo-summary-title,
body.pp-body .nbo-wrapper .nbo-table-pricing-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border-bottom: 1px solid var(--pc-nbo-line-soft);
	background: var(--pc-nbo-surface-muted);
	color: var(--pc-nbo-text);
	font-weight: 800;
}
body.pp-body .nbo-wrapper .nbo-summary-table,
body.pp-body .nbo-wrapper .nbo-table-pricing {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--pc-nbo-text);
	font-size: var(--pp-fs-sm, 13px);
}
body.pp-body .nbo-wrapper .nbo-summary-table th,
body.pp-body .nbo-wrapper .nbo-summary-table td,
body.pp-body .nbo-wrapper .nbo-table-pricing th,
body.pp-body .nbo-wrapper .nbo-table-pricing td { padding: 7px 10px; border: 0; border-bottom: 1px solid var(--pc-nbo-line-soft); vertical-align: top; }
body.pp-body .nbo-wrapper .nbo-summary-table td:last-child,
body.pp-body .nbo-wrapper .nbo-table-pricing td:last-child { text-align: right; font-weight: 800; }
body.pp-body .nbo-wrapper .nbo-summary-foot { border-top: 1px solid var(--pc-nbo-line); }
body.pp-body .nbo-wrapper .nbo-final-price { border-radius: 8px; background: var(--pp-ui-orange-soft, #fff7ed); color: #c2410c; }
body.pp-body .nbo-wrapper .nbo-toggle { color: var(--pc-nbo-muted); cursor: pointer; }
body.pp-body .nbo-wrapper .nbo-toggle svg path { fill: currentColor; }
body.pp-body .nbo-wrapper .nbo-table-summary-wrap.nbo-float-summary { border-color: var(--pc-nbo-line); box-shadow: var(--pc-nbo-shadow); }
body.pp-body .nbo-wrapper .nbo-float-summary-toggle { background: var(--pc-nbo-accent); color: #fff; }
body.pp-body .nbo-wrapper .nbo-float-summary-toggle svg path { fill: currentColor; }

/* 18. Validation / disabled ---------------------------------------------- */
body.pp-body .nbo-wrapper .nbd-invalid-notice,
body.pp-body .nbo-wrapper .nbo-invalid-option { margin-top: 6px; color: var(--pc-nbo-danger); font-size: var(--pp-fs-xs, 12px); line-height: 1.4; }
body.pp-body .nbo-wrapper .nbo-invalid-option.active { display: block; }
body.pp-body .nbo-wrapper .nbd-invalid-form input,
body.pp-body .nbo-wrapper .nbd-invalid-form select,
body.pp-body .nbo-wrapper .nbd-invalid-form textarea { border-color: var(--pc-nbo-danger); }
body.pp-body .nbo-wrapper .nbd-invalid-form input:focus,
body.pp-body .nbo-wrapper .nbd-invalid-form select:focus,
body.pp-body .nbo-wrapper .nbd-invalid-form textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
body.pp-body .nbo-wrapper .nbo-disabled-wrap { border-color: var(--pc-nbo-line); background: var(--pc-nbo-surface-muted); color: var(--pc-nbo-muted); }

/* 19. Native NBO popup ---------------------------------------------------- */
body.pp-body .nbo-detail-popup-wrap { background: var(--pc-nbo-overlay, rgba(15, 23, 42, .72)); }
body.pp-body .nbo-detail-popup-wrap .main-popup {
	max-width: 900px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 16px;
	background: #fff;
	font-family: var(--pp-font, inherit);
	box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}
body.pp-body .nbo-detail-popup-wrap .nbo-detail-popup-header {
	padding: 17px 20px;
	border-bottom: 1px solid var(--pp-border, #e5e7eb);
	background: #fff;
	color: var(--pp-text, #111827);
	font-size: var(--pp-fs-2xl, 18px);
	font-weight: 800;
}
body.pp-body .nbo-detail-popup-wrap .nbo-detail-popup-body { padding: 18px 20px; }
body.pp-body .nbo-detail-popup-wrap .nbo-detail-popup-footer { padding: 14px 20px; border-top: 1px solid var(--pp-border, #e5e7eb); text-align: right; }
body.pp-body .nbo-detail-popup-wrap #nbo-sumit-popup-action,
body.pp-body .nbo-wrapper .nbd-trigger-nbo-popup,
body.pp-body a#nbd-trigger-nbo-popup {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border: 1px solid var(--pp-orange, #f97316);
	border-radius: var(--pp-control-radius, 10px);
	background: var(--pp-orange, #f97316);
	color: #fff;
	font: 800 var(--pp-fs-sm, 13px)/1.2 var(--pp-font, inherit);
	text-decoration: none;
	cursor: pointer;
}
body.pp-body .nbo-detail-popup-wrap #nbo-sumit-popup-action:hover,
body.pp-body .nbo-wrapper .nbd-trigger-nbo-popup:hover,
body.pp-body a#nbd-trigger-nbo-popup:hover { border-color: var(--pp-orange-hover, #ea580c); background: var(--pp-orange-hover, #ea580c); color: #fff; }

/* 20. Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
	body.pp-body .nbo-wrapper .nbd-swatch-label-wrap { flex-basis: 145px; max-width: none; }
	body.pp-body .nbo-wrapper .nbo-price-matrix table,
	body.pp-body .nbo-wrapper .nbo-table-wrap table,
	body.pp-body .nbo-wrapper .nbo-delivery-wrapper table { font-size: var(--pp-fs-xs, 12px); }
}

@media (max-width: 520px) {
	body.pp-body .nbo-wrapper { --pc-nbo-xlabel-min-width: 100%; --pc-nbo-xlabel-preview-size: 54px; }
	body.pp-body .nbo-wrapper .nbd-swatch-label-wrap { flex-basis: 100%; max-width: none; }
	body.pp-body .nbo-wrapper .nbo-dimension-item { display: block; margin-right: 0; }
}