/**
 * PSDM — Injected "Product" options tab (PrintCart designer, ui_mode 1 iframe).
 *
 * Fixes the "massive empty space + scroll-underneath" bug. Inside the
 * ui_mode-1 designer iframe the native options-panel CSS / PerfectScrollbar
 * are NOT initialized on our cloned form, so the native layout traps below
 * leak through:
 *
 *   .tabs-content .tab (== #tab-product) -> position:absolute; height:100%;
 *                                           overflow:hidden  (locks panel to
 *                                           viewport height)
 *   .tab-scroll (== .tab-main)           -> overflow-y:auto; overflow:hidden
 *                                           (native relies on PerfectScrollbar;
 *                                           here it falls back to overflow:auto,
 *                                           so the scroll lives on an INNER
 *                                           layer = "scroll underneath")
 *   #tab-product-template .nbd-products  -> display:flex; .nbd-product{width:50%}
 *                                           (product-GRID layout; wrong for our
 *                                           single cloned form)
 *
 * Result: the cloned form (#nbo-options-wrap, ~1639px) overflows a panel
 * frozen at ~1125px, and the only scroll is on the hidden inner .tab-main —
 * a tall empty band with the scroll on the wrong layer.
 *
 * Strategy: ONE scroll container (#tab-product .tab-main), the panel chrome
 * laid out as a flex column so the form fills it, and the cloned form forced
 * back to a single full-width block column matching the native option panel.
 *
 * All selectors scoped to #tab-product / .psdm-editor-product-panel /
 * .psdm-injected-options. Mobile-first; CSS vars for repeated values.
 */

:root {
	--psdm-ptab-gap: 16px;          /* vertical rhythm between option rows   */
	--psdm-ptab-pad-x: 12px;        /* horizontal panel padding (native ~5px,
	                                   widened for readability)               */
	--psdm-ptab-pad-y: 16px;
	--psdm-ptab-field-h: 36px;      /* native select/input height            */
	--psdm-ptab-border: #e3e6ea;
	--psdm-ptab-label: #404762;     /* native nbd text color                 */
	--psdm-ptab-max-w: 520px;       /* keep form readable on a wide panel    */
	--psdm-ptab-scrollbar-w: 10px;
}

/* ───────────────────────── Panel frame: single scroll ──────────────────── */

/* The tab itself: stop the native absolute/height:100%/overflow:hidden trap
   from freezing the panel to viewport height. Let it be a normal flex column
   that owns its own box; the inner .tab-main becomes the one scroller. */
#tab-product.psdm-editor-product-panel {
	display: flex;
	flex-direction: column;
	height: 100%;            /* fill .tabs-content; scroll moves to .tab-main */
	min-height: 0;           /* allow the flex child to shrink & scroll       */
	overflow: hidden;        /* clip; scrolling is delegated to .tab-main     */
	box-sizing: border-box;
}

/* THE single scroll container. Kill the native `overflow:hidden` that sat on
   top of `overflow-y:auto` (which only worked with PerfectScrollbar). */
#tab-product.psdm-editor-product-panel .tab-main,
#tab-product.psdm-editor-product-panel .tab-scroll {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: auto;            /* was 100% — let it size to the flex track      */
	min-height: 0;           /* critical: enables overflow inside flex column */
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;        /* the ONLY scrollbar in the panel               */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
}

/* Tidy the single scrollbar so it reads as part of the panel, not a layer. */
#tab-product.psdm-editor-product-panel .tab-main::-webkit-scrollbar,
#tab-product.psdm-editor-product-panel .tab-scroll::-webkit-scrollbar {
	width: var(--psdm-ptab-scrollbar-w);
}
#tab-product.psdm-editor-product-panel .tab-main::-webkit-scrollbar-thumb,
#tab-product.psdm-editor-product-panel .tab-scroll::-webkit-scrollbar-thumb {
	background: rgba(64, 71, 98, 0.28);
	border-radius: 6px;
}
#tab-product.psdm-editor-product-panel .tab-main::-webkit-scrollbar-track,
#tab-product.psdm-editor-product-panel .tab-scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* Hide the native loading spinner block — our form is injected directly and
   the .loaded svg/spinner would otherwise reserve empty space. */
#tab-product.psdm-editor-product-panel .nbd-products > .loaded {
	display: none;
}

/* ───────────── Hide the floating CMYK readout — THIS view only ──────────── */

/* The live CMYK readout (#psdm-cmyk-panel — "CMYK · SWOP v2 / Pick or apply a
   color to read its CMYK", position:fixed bottom-left, see
   public/css/psdm-cmyk-readout.css + public/js/psdm-cmyk-readout.js) overlaps
   the options panel in the product-page editor (ui_mode 1). The WordPress
   agent flags THIS view with body.psdm-editor-iframe, so the hide is scoped to
   it — the cart designer (where the readout is wanted) is left untouched. */
body.psdm-editor-iframe #psdm-cmyk-panel,
body.psdm-editor-iframe .psdm-cmyk-panel {
	display: none !important;
}

/* ─────────────── Wrapper chain: collapse the product-GRID layout ────────── */

/* Native `.nbd-products` is a flexbox product grid and `.nbd-product` is a
   50%-wide card. Our injected DOM holds ONE cloned form, so override to a
   plain full-width block column. This removes the half-width gap that read as
   "empty space" on the right and the 30px grid margin at the bottom. */
#tab-product.psdm-editor-product-panel .nbd-products,
#tab-product.psdm-editor-product-panel .nbd-product,
#tab-product.psdm-editor-product-panel .nbd-product-tab,
#tab-product.psdm-editor-product-panel .nbd-main-product {
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
	box-sizing: border-box;
}

/* The injected options wrap: full-width block, internal padding, and — most
   importantly — NO independent overflow. It must grow to its natural height
   (~1639px) and let .tab-main scroll it. (Native set overflow:visible; we keep
   that but pin it explicitly so nothing nests a second scroller.) */
#tab-product .psdm-injected-options,
#tab-product #nbo-options-wrap.psdm-injected-options {
	display: block;
	width: 100%;
	max-width: var(--psdm-ptab-max-w);
	margin: 0 auto;
	padding: var(--psdm-ptab-pad-y) var(--psdm-ptab-pad-x)
		calc(var(--psdm-ptab-pad-y) * 2.5);   /* bottom breathing room so the
		                                          last field clears the edge   */
	overflow: visible;       /* no nested scroll — single scroll lives above  */
	height: auto;
	text-align: left;        /* native .tabs-content centers text; undo it    */
	box-sizing: border-box;
}

/* ───────────────────────── Form field layout ──────────────────────────── */

/* The cloned form itself */
#tab-product .psdm-injected-options form.variations_form,
#tab-product .psdm-injected-options .variations_form {
	width: 100%;
	margin: 0;
}

/* WooCommerce variations table → stacked, full-width rows. The native option
   CSS styles `.variations td` as table cells; in this narrow panel we collapse
   the label/value table into a vertical flow so nothing is clipped.
   ALL rows — incl. the long-labelled custom ones (Spot High Gloss UV Coating,
   Spot UV Sides, Foil Type) — are `table.variations tr` with td.label + td.value
   (theme variable.php line 47 + rps-smart-hide foil row). The stacking props
   carry `!important` so they beat HVP's cascade stylesheet (loaded in the
   designer) which restores `display:table-cell` / floats on `.label`/`.value`
   and is what made the long labels overlap their control. */
#tab-product .psdm-injected-options table.variations,
#tab-product .psdm-injected-options table.variations tbody {
	display: block !important;
	width: 100%;
	margin: 0 0 var(--psdm-ptab-gap);
	border: 0;
}
#tab-product .psdm-injected-options table.variations tr {
	display: block !important;
	float: none !important;
	width: 100%;
	margin-bottom: var(--psdm-ptab-gap);
}
#tab-product .psdm-injected-options table.variations td {
	display: block !important;
	float: none !important;       /* kill any floated label/value cell        */
	clear: both;
	width: 100% !important;       /* no narrow label cell for text to overflow */
	max-width: 100%;
	min-width: 0;
	padding: 0;
	vertical-align: top;
	text-align: left;
	white-space: normal;          /* long labels wrap, never spill over field  */
}
#tab-product .psdm-injected-options table.variations td.label {
	margin-bottom: 6px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--psdm-ptab-label);
}
#tab-product .psdm-injected-options table.variations td.label label {
	display: block;               /* own line above the control                */
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;      /* break extra-long attribute names          */
}
/* The chosen-value chip that sits inside td.label after the <label>: keep it on
   its own line so a long label + this span can't run together into the field. */
#tab-product .psdm-injected-options table.variations td.label .selected-value {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 12px;
	color: #6b7280;
}
/* The value cell holding the actual control: full width, no left offset that
   could let the label above appear to overlap it. */
#tab-product .psdm-injected-options table.variations td.value {
	position: static;            /* defeat any positioned native value cell    */
	margin: 0;
}

/* Selects / inputs fill the row at native height. */
#tab-product .psdm-injected-options select,
#tab-product .psdm-injected-options .variations select,
#tab-product .psdm-injected-options input[type="text"],
#tab-product .psdm-injected-options input[type="number"],
#tab-product .psdm-injected-options input[type="tel"],
#tab-product .psdm-injected-options input[type="email"] {
	width: 100%;
	max-width: 100%;
	min-height: var(--psdm-ptab-field-h);
	box-sizing: border-box;
}

/* Generic option/field rows (orientation, foil, RPS fields use nbd-field*) */
#tab-product .psdm-injected-options .nbd-field,
#tab-product .psdm-injected-options .nbd-option-field,
#tab-product .psdm-injected-options .nbd-field-input-wrap {
	display: block;
	width: 100%;
	margin-bottom: var(--psdm-ptab-gap);
	box-sizing: border-box;
}
#tab-product .psdm-injected-options .nbd-field-label,
#tab-product .psdm-injected-options label.nbd-field-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--psdm-ptab-label);
}
#tab-product .psdm-injected-options .nbd-field-content {
	width: 100%;
}

/* ─────────────── RPS shipping block: contain, don't overflow ────────────── */

/* The RPS zone selector / delivery-date cards are wide and tall; keep them
   inside the panel column and let the delivery cards wrap instead of forcing
   horizontal overflow (which would add a 2nd scrollbar). */
#tab-product .psdm-injected-options #rps-zone-selector,
#tab-product .psdm-injected-options .rps-zone-selector,
#tab-product .psdm-injected-options .rps-shipping-block {
	width: 100%;
	max-width: 100%;
	margin: var(--psdm-ptab-gap) 0 0;
	box-sizing: border-box;
	overflow: visible;
}
#tab-product .psdm-injected-options .rps-delivery-options,
#tab-product .psdm-injected-options .rps-delivery-cards,
#tab-product .psdm-injected-options .rps-speed-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
#tab-product .psdm-injected-options .rps-delivery-card,
#tab-product .psdm-injected-options .rps-speed-option {
	flex: 1 1 140px;
	min-width: 0;          /* let cards shrink instead of overflowing         */
	box-sizing: border-box;
}

/* Price / single-variation summary spacing */
#tab-product .psdm-injected-options .woocommerce-variation,
#tab-product .psdm-injected-options .single_variation_wrap,
#tab-product .psdm-injected-options .woocommerce-variation-price {
	width: 100%;
	margin: var(--psdm-ptab-gap) 0 0;
}

/* ─────────────────────────── Wider panel / tablet ──────────────────────── */

@media (min-width: 480px) {
	#tab-product .psdm-injected-options {
		padding-left: calc(var(--psdm-ptab-pad-x) + 4px);
		padding-right: calc(var(--psdm-ptab-pad-x) + 4px);
	}
}