/*
 * W2PShop Product Popup styles.
 *
 * Keeps things minimal and theme-agnostic. Only targets our own classes so the
 * existing PriceMatrix/GoSendEx markup inside the popup inherits whatever
 * styling the theme applies.
 */

body.w2p-popup-open {
	overflow: hidden;
}

.w2p-popup-overlay {
	position: fixed;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-y: auto;
	/* Padding shrinks for wider popup widths so we approach a near-full-screen
	   layout when callers use width="full" or width="98vw". */
	padding: clamp(8px, 2vh, 40px) clamp(8px, 1vw, 40px);
	box-sizing: border-box;
}

/* Closed-state styling. We deliberately do NOT use `display: none` or
   the `hidden` attribute here — those keep the iframe (GoSendEx upload
   widget) from initializing properly. When an iframe loads inside a
   display:none ancestor it gets 0×0 dimensions and GoSendEx's click
   handlers bind to a zero-area hit zone, so the upload button never
   responds even after the popup becomes visible. Instead we keep the
   overlay in the layout and hide it via opacity/visibility/pointer-
   events so the iframe loads against its real size from the start. */
.w2p-popup-overlay.w2p-popup-closed {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Belt-and-braces: if some old caller still toggles the `hidden`
   attribute (or a cached page is mid-upgrade), respect it by hiding —
   but via opacity, not display:none, for the same reason as above. */
.w2p-popup-overlay[hidden] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex !important; /* override the UA's hidden=>display:none */
}

.w2p-popup {
	position: relative;
	background: #ffffff;
	color: inherit;
	width: 100%;
	max-width: var(--w2p-popup-width, 960px);
	border-radius: 8px;
	padding: 32px 24px 24px;
	box-sizing: border-box;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	margin: auto;
}

.w2p-popup-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	padding: 4px 8px;
}

.w2p-popup-close:hover,
.w2p-popup-close:focus {
	color: #000;
	outline: none;
}

/* Themes commonly apply a brand-coloured background to every button:hover
   (e.g. the site's "yellow" CTA colour). That makes the X look like a
   coloured tile on hover. Neutralise the background here; site CSS can
   still opt back in to its own hover treatment by overriding this rule. */
.w2p-popup-overlay .w2p-popup-close:hover,
.w2p-popup-overlay .w2p-popup-close:focus {
	background-color: transparent !important;
	background-image: none !important;
}

.w2p-popup-title {
	margin: 0 0 16px 0;
	padding-right: 32px;
	font-size: 1.4rem;
	line-height: 1.3;
}

.w2p-popup-body {
	/* Ensures nested PriceMatrix/GoSendEx components that assume full-width
	   product-page context still render acceptably inside the popup. */
	width: 100%;
}

/* Loading state: the PriceMatrix shortcode re-renders on dropdown change.
   We add a dimmed look while the matrix is fetching new XML. */
.w2p-popup-body.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 768px) {
	.w2p-popup-overlay {
		padding: 0;
		align-items: stretch;
	}

	.w2p-popup {
		max-width: 100%;
		min-height: 100vh;
		border-radius: 0;
		margin: 0;
		padding: 48px 16px 24px;
	}

	.w2p-popup-close {
		top: 4px;
		right: 6px;
		font-size: 32px;
	}

	.w2p-popup-title {
		font-size: 1.2rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Two-column layout (layout="two-column")

   Despite the legacy name, the popup itself is laid out as vertically-stacked
   FULL-WIDTH sections — the multi-column behaviour lives INSIDE the main
   section where #divSettings flows the matrix fields into a 3-ish-column grid.

   JS reorganizes .w2p-popup-body children into three direct children:
     .w2p-popup-col-header   — variant toggle, top-right (or top-left on mobile)
     .w2p-popup-col-main     — matrix fields grid + uploader
     .w2p-popup-col-footer   — total + cart form (Submit Your Order), centered
   ───────────────────────────────────────────────────────────────────────── */

.w2p-popup-body--two-column[data-w2p-layout-applied="1"] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Header row: title on the left, variant toggle on the right, divider line
   underneath. When there's no title, the toggle right-aligns alone. */
.w2p-popup-body--two-column .w2p-popup-col-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 8px;
}

/* When the title is hoisted into the header it should no longer carry the
   standalone top-of-popup margins. */
.w2p-popup-body--two-column .w2p-popup-col-header .w2p-popup-title {
	margin: 0;
	padding-right: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.w2p-popup-body--two-column .w2p-popup-col-main {
	min-width: 0;
}

.w2p-popup-body--two-column .w2p-popup-col-footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding-top: 8px;
	border-top: 1px solid #e5e7eb;
}

/* Side-by-side mode: triggered by the overlay having
   data-w2p-split-fields="..." (set by the right_column_fields shortcode
   attribute). Switches the body to a 2-column grid so the matrix + uploader
   sit on the left and the moved fields + total + submit live on the right.
   Collapses to a vertical stack on narrow viewports. */
.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column[data-w2p-layout-applied="1"] {
	display: grid;
	/* Wider right column so labels like "P.O. Number (optional)" sit on
	   a single line and the submit button feels substantial. */
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	grid-template-areas:
		"header header"
		"main   footer";
	gap: 16px 32px;
}

.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column .w2p-popup-col-header {
	grid-area: header;
}

.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column .w2p-popup-col-main {
	grid-area: main;
	min-width: 0;
}

.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column .w2p-popup-col-footer {
	grid-area: footer;
	min-width: 0;
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 900px) {
	.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column[data-w2p-layout-applied="1"] {
		display: flex;
		flex-direction: column;
	}
	.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column .w2p-popup-col-footer {
		border-top: 1px solid #e5e7eb;
		padding-top: 8px;
	}
}

/* In split mode the cart form fills the narrower right column rather than
   the 360px max it uses in stacked mode. */
.w2p-popup-overlay[data-w2p-split-fields] .w2p-popup-body--two-column form.cart {
	max-width: none;
	align-self: stretch;
}

/* Submit-aside mode (submit_aside="true" shortcode attr): matrix grid stays
   full-width on top, then the GoSendEx upload area and the cart footer
   (total + Submit button) sit side-by-side below.

       header   header
       matrix   matrix
       upload   footer

   JS wraps the upload elements in .w2p-popup-col-upload; this CSS makes
   .w2p-popup-col-main use display:contents so its children (#manage-
   designs-page) become direct grid items of the popup body. */
.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column[data-w2p-layout-applied="1"] {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	/* Matrix runs full width on its own row so all matrix fields
	   (Quantity, Size, P.O. Number, etc.) flow into the responsive
	   multi-column grid that PriceMatrix already provides. The third
	   row then splits left/right: upload area (left) and Total + Submit
	   (right). This keeps the upload area short — the same height as
	   the iframe widget — so the visible dashed dropzone matches the
	   iframe's actual click target and the file picker reliably opens. */
	grid-template-areas:
		"header  header"
		"matrix  matrix"
		"upload  footer";
	gap: 16px 32px;
}

.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column .w2p-popup-col-main {
	display: contents;
}

.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column .w2p-popup-col-header {
	grid-area: header;
}

.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column #manage-designs-page {
	grid-area: matrix;
}

.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column .w2p-popup-col-upload {
	grid-area: upload;
	min-width: 0;
	/* Don't let CSS Grid stretch the upload column to the row height
	   the footer's content demands. GoSendEx sizes its iframe to its
	   own content (about 92px for the "attach" widget); if the column
	   stretches, the iframe element grows beyond its content, leaving
	   most of the visible dashed dropzone as empty iframe body that
	   doesn't respond to clicks. `align-self: start` keeps the upload
	   column at its natural content height, so the iframe stays full
	   and any click in the dropzone lands on GoSendEx's button. */
	align-self: start;
}

.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column .w2p-popup-col-footer {
	grid-area: footer;
	min-width: 0;
	border-top: 0;
	padding-top: 0;
	justify-content: flex-start;
}

/* In aside mode the cart form fills the right column rather than the 360px
   max it uses in stacked mode. */
.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column form.cart {
	max-width: none;
	align-self: stretch;
}

@media (max-width: 900px) {
	.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column[data-w2p-layout-applied="1"] {
		display: flex;
		flex-direction: column;
	}
	.w2p-popup-overlay[data-w2p-submit-aside] .w2p-popup-body--two-column .w2p-popup-col-footer {
		border-top: 1px solid #e5e7eb;
		padding-top: 8px;
	}
}

/* Pill-style variant/color toggle in the header.
   The PriceMatrix shortcode emits
       <div class="price-matrix-select-container">
           <label for="w2pshop-pricematrix-select">…</label>
           <select id="w2pshop-pricematrix-select">…</select>
       </div>
   PriceMatrix's own pricematrix-display.css forces width:100% on the
   container and flex:1 on the select, so we override with high-specificity
   selectors (anchoring on the popup overlay) and !important where the cascade
   would otherwise lose. */
.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-header .price-matrix-select-container {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	width: auto !important;
}

.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-header .price-matrix-select-container label {
	flex: 0 0 auto !important;
	font-weight: 500;
	white-space: nowrap;
	margin: 0;
}

.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-header .price-matrix-select-container select {
	flex: 0 0 auto !important;
	width: auto !important;
	background-color: #ffffff;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 8px 36px 8px 16px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	min-width: 160px;
}

.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-header .price-matrix-select-container select:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

/* Cycle-toggle button (built by JS when variant_selector="toggle" or "auto"
   with ≤3 options). When the toggle is active we hide the native <select>
   but leave it in the DOM so PriceMatrix's change-listening keeps working.

   Note: we previously used the sr-only clip/absolute pattern here, but on
   Windows Chrome (and any browser where high-DPI rounding / native form
   control rendering differs from macOS) the 1×1 absolutely-positioned
   select could still intercept the click intended for the toggle button
   sitting right next to it, making the pill appear "dead." display:none
   removes it from hit-testing entirely. JS-dispatched `change` events
   still fire on display:none elements, so PriceMatrix's listeners and our
   product-id bridge keep working. */
.w2p-popup-overlay .price-matrix-select-container.w2p-variant-toggle-active select {
	display: none !important;
	pointer-events: none !important;
}

.w2p-variant-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #ffffff;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 8px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	cursor: pointer;
	min-width: 160px;
	justify-content: space-between;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
	/* Reset cross-browser native button rendering (Windows Chrome paints
	   native button chrome differently from macOS otherwise). */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	/* Stack above any sibling form controls so clicks always reach the
	   toggle even if a native control escapes its hide rule. */
	position: relative;
	z-index: 1;
	/* Ensure the button itself (and its text) is the click target, not
	   anything bleeding through from PriceMatrix's own styling. */
	pointer-events: auto;
}

.w2p-variant-toggle * {
	pointer-events: none;
}

.w2p-variant-toggle::after {
	/* Default "switch" indicator. Admins can override per-key icon via custom
	   CSS, e.g.
	     .w2p-variant-toggle[data-w2p-active-key="..."]::after {
	         background-image: url(...);
	     }
	*/
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444);
	flex-shrink: 0;
}

.w2p-variant-toggle:hover {
	border-color: #98a2b3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.w2p-variant-toggle:active {
	transform: scale( 0.98 );
}

.w2p-variant-toggle:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* In-matrix field toggle: a sibling cycle-button that replaces a matrix
   field's native <select> (e.g. a "Size" or "Paper" option) when the popup
   is opted into the `field_toggles` shortcode attribute. The select stays
   in the DOM so PriceMatrix's own listeners and recalc pipeline keep
   working — we only hide it visually and route clicks through the button. */
.w2p-popup-overlay [data-w2p-field-toggle-host="1"] select {
	display: none !important;
	pointer-events: none !important;
}

.w2p-field-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #ffffff;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 8px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	cursor: pointer;
	min-width: 160px;
	justify-content: space-between;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	position: relative;
	z-index: 1;
	pointer-events: auto;
}

.w2p-field-toggle * {
	pointer-events: none;
}

.w2p-field-toggle::after {
	/* Default "switch" indicator — same conic rainbow as the variant toggle.
	   Admins can override per active value via custom CSS, e.g.
	     .w2p-field-toggle[data-w2p-active-value="..."]::after {
	         background-image: url(...);
	     }
	*/
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444);
	flex-shrink: 0;
}

.w2p-field-toggle:hover {
	border-color: #98a2b3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.w2p-field-toggle:active {
	transform: scale( 0.98 );
}

.w2p-field-toggle:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Per-value styling for the Color / Black-and-White toggle.

   The toggle exposes a kebab-case slug of the currently-selected option's
   visible text via `data-w2p-active-text`, so each value can have its own
   indicator and side. For the typical print-shop case we ship two presets:

   - "color"          → rainbow conic dot on the RIGHT (the default look)
   - "black-and-white" → split B&W circle on the LEFT (mirrors the toggle)

   Admins can override either preset, or add new ones for other option
   values, by writing additional `.w2p-field-toggle[data-w2p-active-text="…"]`
   rules in their custom CSS. */
.w2p-field-toggle[data-w2p-active-text="black-and-white"] {
	flex-direction: row-reverse;
}

.w2p-field-toggle[data-w2p-active-text="black-and-white"]::after {
	background: linear-gradient(90deg, #111827 50%, #ffffff 50%);
	border: 1px solid #d0d5dd;
}

/* Two-column layout: the field-toggle (with its label) is relocated into
   the popup header so it sits next to the title — same placement the
   variant toggle gets via applyTwoColumnLayout. The source field div in
   #divSettings is hidden so we don't render the option twice. */
.w2p-popup-overlay [data-w2p-toggle-relocated="1"] {
	display: none !important;
}

.w2p-popup-overlay .w2p-popup-col-header .w2p-field-toggle-header-host {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.w2p-popup-overlay .w2p-popup-col-header .w2p-field-toggle-header-label {
	font: inherit;
	font-weight: 500;
	color: inherit;
}

/* Single-variant popups: when the matrix-switcher dropdown only has one
   option, it's a dead control. Hide the whole container so the header
   doesn't show "Product Pricing > Plan Prints" as a pointless dropdown.
   The class is added by buildVariantToggle when it detects this case.

   Both selectors are needed because the two-column header has its own
   high-specificity `display: inline-flex !important` rule that would
   otherwise win against a simple `.w2p-popup-overlay .container.hidden`
   selector. */
.w2p-popup-overlay .price-matrix-select-container.w2p-variant-selector-hidden,
.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-header .price-matrix-select-container.w2p-variant-selector-hidden {
	display: none !important;
}

/* Total price block: pull the label/value onto one line and align right.
   PriceMatrix's stylesheet floats this container; we override that with high
   specificity so it sits as a normal flex child in the footer section. */
.w2p-popup-overlay .w2p-popup-body--two-column .w2p-popup-col-footer .price_matrix_total_container {
	float: none !important;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.w2p-popup-body--two-column .price_matrix_total_label {
	font-size: 14px;
	color: #555;
}

.w2p-popup-body--two-column .price_matrix_total_price {
	font-size: 18px;
	font-weight: 700;
}

/* Cart form: keep submit button comfortably centered in the footer. We
   constrain max-width so the "Submit Your Order" button doesn't stretch the
   entire popup width on wide screens. */
.w2p-popup-body--two-column form.cart {
	margin: 0;
	align-self: center;
	width: 100%;
	max-width: 360px;
}

.w2p-popup-body--two-column form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
}

/* The Email Quote button isn't usually wanted in a cart-focused popup; if it
   sneaks in, push it under the cart form on the right. */
.w2p-popup-body--two-column #pricematrix-email-quote-btn {
	margin: 0;
}

/* Left column: tighten up matrix settings spacing and let uploader breathe. */
.w2p-popup-body--two-column #manage-designs-page {
	margin: 0;
}

.w2p-popup-body--two-column #w2pshop-upload-container {
	margin-top: 8px;
}

/* Matrix fields multi-column grid.

   PriceMatrix renders fields into TWO containers inside #manage-designs-page:
     #divSettings  → built-in fields (#spanPages, #spanQty, #spanWidth, #spanHeight)
     #canvas → #divFields → anonymous <div> per custom matrix field
                            (Size, P.O. Number, etc., defined in the matrix XML)

   We flatten that hierarchy using `display: contents` so #manage-designs-page
   itself becomes the grid container, with every visible field-div (whether it
   came from #divSettings or #divFields) becoming a direct grid item. This
   gives one unified responsive 3-column grid that survives matrix re-renders.

   Fields with display:none stay out of the grid automatically. */
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page {
	display: grid;
	/* Auto-fit so the grid adapts to however many matrix fields are
	   actually visible. With 2 visible fields we get 2 equal columns;
	   with 3 we get 3; etc. — no empty trailing tracks. */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 28px;
	margin-bottom: 16px;
}

@media (max-width: 600px) {
	.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page {
		grid-template-columns: 1fr;
	}
}

/* Flatten the field containers so their children participate directly in
   the parent grid. PriceMatrix wraps everything in a
   `.preview_container.price-matrix-container` div between #manage-designs-page
   and #divSettings/#canvas, so we have to flatten that wrapper too. */
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page .preview_container,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page .price-matrix-container,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #canvas,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields {
	display: contents;
}

/* Each visible field row: label on top, control underneath, both full-width
   inside the grid cell. This keeps long labels like "P.O. Number (optional)"
   readable and gives every field the same vertical rhythm. */
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings > div[id^="span"],
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields > div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings > div[id^="span"] .fieldlabel,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields > div .fieldlabel {
	font-weight: 500;
	/* PriceMatrix's JS sets `style="width: 30%; float: left;"` directly on
	   each fieldlabel/fieldcontrol element. Inline styles beat normal CSS,
	   so we use !important to win and let the label use the full cell width. */
	width: auto !important;
	float: none !important;
}

.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings > div[id^="span"] .fieldcontrol,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields > div .fieldcontrol {
	min-width: 0;
	/* See note above: PriceMatrix inlines width + float on the control too.
	   Override so the control fills the full cell width on its own row. */
	width: auto !important;
	float: none !important;
}

.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings .fieldcontrol input,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divSettings .fieldcontrol select,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields .fieldcontrol input,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields .fieldcontrol select {
	width: 100%;
	box-sizing: border-box;
}

/* Hide empty placeholder divs inside #divFields (PriceMatrix sometimes emits
   trailing empty wrappers) so they don't occupy a grid cell. */
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields > div:empty,
.w2p-popup-overlay .w2p-popup-body--two-column #manage-designs-page #divFields > div:not(:has(.fieldlabel)):not(:has(.fieldcontrol)) {
	display: none;
}

/* Matrix fields that have been moved out of #manage-designs-page (via the
   right_column_fields shortcode attribute and JS relocator) — apply the
   same label-on-top, full-width-control treatment so they still match the
   in-place fields. The `[data-w2p-moved-field="1"]` attribute is set by
   the popup JS on every relocated row. */
.w2p-popup-overlay [data-w2p-moved-field="1"] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.w2p-popup-overlay [data-w2p-moved-field="1"] .fieldlabel {
	font-weight: 500;
	width: auto !important;
	float: none !important;
}

.w2p-popup-overlay [data-w2p-moved-field="1"] .fieldcontrol {
	min-width: 0;
	width: auto !important;
	float: none !important;
}

.w2p-popup-overlay [data-w2p-moved-field="1"] .fieldcontrol input,
.w2p-popup-overlay [data-w2p-moved-field="1"] .fieldcontrol select {
	width: 100%;
	box-sizing: border-box;
}


/* Optional section heading rendered above the GoSendEx uploader (set via
   the shortcode's uploader_heading attribute). Cosmetic only — works with
   any layout, not just two-column. */
.w2p-popup-overlay .w2p-popup-uploader-heading {
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 12px;
	color: #334155;
	text-align: left;
}

/* Dashed dropzone styling around the GoSendEx upload iframe. GoSendEx
   renders its widget inside a cross-origin iframe, so we can't restyle
   the button text/icon directly. Instead we render a paperclip icon and
   an "Add an attachment" label as absolutely-positioned pseudo-elements
   on the wrapper, sitting *behind* the (transparent) iframe with
   pointer-events:none so the iframe still receives clicks normally.
   This is robust against iframe DOM changes and doesn't depend on any
   CSS being injected into the cross-origin frame. */
.w2p-popup-overlay #w2pshop-upload-container {
	position: relative;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	padding: 8px;
	background-color: #f8fafc;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.w2p-popup-overlay #w2pshop-upload-container:hover {
	border-color: #94a3b8;
	background-color: #f1f5f9;
}

/* Paperclip icon (centered, sits above the label). Drawn ON TOP of the
   iframe so it remains visible regardless of whether the iframe's
   document body has a transparent or opaque background. pointer-events
   is none so clicks pass through to the iframe's real upload button. */
.w2p-popup-overlay #w2pshop-upload-container::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, calc(-50% - 22px));
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
	pointer-events: none;
	z-index: 3;
}

/* "Add an attachment" label below the icon. */
.w2p-popup-overlay #w2pshop-upload-container::after {
	content: "Add an attachment";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 18px));
	font-size: 16px;
	font-weight: 500;
	color: #002E4B;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
}

.w2p-popup-overlay #w2pshop-upload-container iframe {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	position: relative;
	z-index: 1;
	/* Leave the height alone — GoSendEx sizes the iframe to its widget
	   content (≈92px for "attach" mode) via gse-resize / inline style.
	   The col-upload's `align-self: start` shrinks the surrounding grid
	   cell to match, so the dashed dropzone is the same size as the
	   click target. Forcing height: 100% here would re-create the
	   "huge dropzone, tiny click target" mismatch that was breaking
	   uploads in the popup. */
}

/* Hide the standalone "Send Artwork to GoSendEx" submit button inside the
   popup. The cart form's submit (Submit Your Order) already includes the
   uploaded artwork via the hidden gosendex_uploaded_artwork field, so this
   button is redundant in the popup context and visually duplicates the
   primary CTA. */
.w2p-popup-overlay #gosendex-upload-button {
	display: none !important;
}

/* Pages column injected by the popup JS into GoSendEx's uploaded-files
   table. Center the count and keep it narrow so it doesn't crowd the
   filename column. */
.w2p-popup-overlay #gse-uploaded-files th.w2p-pages-col,
.w2p-popup-overlay #gse-uploaded-files td.w2p-pages-cell {
	text-align: center;
	width: 80px;
	white-space: nowrap;
}

/* Mobile: left-align the header (variant toggle). The body is already a
   single-column flex stack, so no other changes are needed. */
@media (max-width: 768px) {
	.w2p-popup-body--two-column .w2p-popup-col-header {
		justify-content: flex-start;
	}
}