.pod-customizer-fields {
	margin: 20px 0;
	max-width: 480px;
}

/* Themes that lay form.cart out as a flex row (qty | button | ...) would
   otherwise squeeze the message/design block next to the quantity input -
   give both customizer blocks a full row of their own. */
form.cart.pod-has-customizer .pod-customizer-fields {
	flex: 0 0 100%;
	width: 100%;
}

/* This theme floats the quantity box left (.single-product-top form.cart
   .quantity { float: left }), so the message/design block that follows it
   would wrap up beside it instead of starting on its own line. */
form.cart .pod-customizer-fields-after {
	clear: both;   
	padding-top: 4px;  
} 
   
.pod-group {    
	margin-bottom: 18px; 
}      

.pod-group-label {          
	font-size: 13px;         
	color: #555;    
	margin-bottom: 8px; 
}

.pod-required { 
	color: #c1272d;
}  
      
.pod-pills {   
	display: flex;    
	flex-wrap: wrap;
	gap: 8px;   
} 

/* Colors/border/background are !important: the theme's generic <button>
   rule (green fill, white text) otherwise wins over a plain class selector
   and paints every unselected pill green - same theme-button conflict as
   the accordion toggles / qty stepper further down. */
.pod-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid #d8d8d8 !important;
	border-radius: 24px;
	background: #fff !important;
	color: #222 !important;
	font-size: 14px;
	font-weight: 400;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	line-height: 1.2;
}

.pod-pill:hover,
.pod-pill:focus {
	background: #fff !important;
	border-color: #999 !important;
	color: #222 !important;
}

.pod-pill.is-selected,
.pod-pill.is-selected:hover,
.pod-pill.is-selected:focus {
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}

.pod-pill-wide {
	flex-basis: 100%;
	justify-content: center;
}

.pod-print-stack {
	flex-direction: column;
}

.pod-print-stack .pod-pill {
	width: 100%;
	justify-content: center;
	border-radius: 24px;
}

/* appearance:none + a hand-drawn chevron background, all !important - same
   theme-reset conflict hit on every other native control in this plugin
   (pills, qty stepper): this theme strips the browser's own select arrow,
   so without this it reads as a plain text box instead of a dropdown and
   customers don't realize there are more fabric options to pick from. */
.pod-quality-select {
	width: 100% !important;
	max-width: 320px;
	padding: 10px 36px 10px 12px !important;
	border: 1px solid #d8d8d8 !important;
	border-radius: 4px !important;
	font-size: 14px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
	background-size: 12px !important;
	color: #222;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
}

/* Compact collapsible selectors: gender / size / color (canvas: dimension /
   color) side by side on a single row, each a small toggle showing the
   current choice, with the pills in a dropdown panel spanning the whole row
   (absolutely positioned against .pod-accordion-row, so opening one doesn't
   push the rest of the form down). !important on the toggle for the same
   theme-button-reset conflict as the pills/qty stepper below. */
.pod-accordion-row {
	position: relative;
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}

.pod-accordion-row .pod-accordion {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

.pod-group[hidden],
.pod-accordion-panel[hidden] {
	display: none !important;
}

/* Toggle: [icon] Label: / Value [chevron] - per the mobile mockup. */
.pod-accordion-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 56px !important;
	margin: 0 !important;
	padding: 8px 26px 8px 10px !important;
	border: 1px solid #4a4f57 !important;
	border-radius: 10px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center !important;
	background-size: 14px !important;
	color: #1d1d1f !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	cursor: pointer;
	min-width: 0;
}

.pod-accordion.is-open .pod-accordion-toggle {
	border-color: #1b2a4a !important;
	box-shadow: 0 0 0 1px #1b2a4a !important;
}

.pod-accordion-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1d1d1f;
}

.pod-accordion-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* Color toggle's icon: filled by pod-frontend.js with the picked color. */
.pod-accordion-swatch {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, .15);
	background: #e5e5e5;
}

.pod-accordion-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pod-accordion-label {
	font-size: 12px;
	color: #555;
}

.pod-accordion-value {
	max-width: 100%;
	font-size: 14px;
	font-weight: 600;
	color: #1d1d1f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 380px) {
	.pod-accordion-row {
		gap: 6px;
	}
	.pod-accordion-toggle {
		gap: 6px !important;
		padding: 6px 22px 6px 8px !important;
		background-position: right 6px center !important;
	}
	.pod-accordion-icon svg {
		width: 18px;
		height: 18px;
	}
	.pod-accordion-swatch {
		width: 20px;
		height: 20px;
	}
}

.pod-accordion-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	padding: 12px;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.pod-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.15);
	display: inline-block;
}

.pod-pill.is-selected .pod-swatch {
	border-color: rgba(255,255,255,.6);
}

/* One-line text field, same frame as the Size / Color / Print toggles.
   16px font: iOS doesn't zoom the page in when it gets focus. */
.pod-message-field {
	width: 100% !important;
	max-width: 480px;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #4a4f57 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #1d1d1f !important;
	font-family: inherit;
	font-size: 16px !important;
	box-shadow: none !important;
	box-sizing: border-box;
}

.pod-message-field:focus {
	border-color: #1b2a4a !important;
	box-shadow: 0 0 0 1px #1b2a4a !important;
	outline: none;
}

.pod-message-field::placeholder {
	color: #8a8f98;
}

.pod-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Font/size/color toolbar for the text mirrored onto the design canvas
   (see pod-designer.js) - only rendered when the visual editor is on. */
.pod-message-style {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.pod-message-font,
.pod-message-size {
	padding: 6px 8px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
	color: #222;
}

.pod-message-color {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	cursor: pointer;
}

/* Full-width "Add image" button with camera icon (mobile mockup). */
.pod-upload-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	background: #e6ebf2 !important;
	color: #1d1d1f !important;
	border: 1px solid #4a4f57 !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
}

.pod-upload-btn svg {
	display: block;
	width: 24px;
	height: 24px;
}

.pod-upload-btn:hover {
	background: #dbe2ec !important;
}

/* Full-width navy Add to cart, only on personalized products
   (form.pod-has-customizer is added by pod-frontend.js). */
/* Same shape as "Add image" (full width, 52px, 10px corners, 16px/600,
   normal case, icon + text) - navy fill as the main action. The theme caps
   it at calc(100% - 148px) and floats it left to make room for the
   quantity box, which is hidden on personalized products. */
form.cart.pod-has-customizer .single_add_to_cart_button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	min-height: 52px !important;
	margin: 12px 0 0 !important;
	padding: 10px 16px !important;
	background: #1b2a4a !important;
	color: #fff !important;
	border: 1px solid #1b2a4a !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

form.cart.pod-has-customizer .single_add_to_cart_button::before {
	content: "";
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11.2a1 1 0 0 0 1 .8h9.3a1 1 0 0 0 1-.8l1.6-7.2H6'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
}

form.cart.pod-has-customizer .single_add_to_cart_button:hover {
	background: #13203a !important;
}

.pod-upload-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pod-upload-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	background: #f7f7f7;
	border-radius: 4px;
	padding: 6px 10px;
}

.pod-upload-item img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 3px;
}

.pod-upload-item .pod-upload-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pod-upload-item .pod-upload-remove {
	background: none;
	border: none;
	color: #c1272d;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.pod-upload-item.is-uploading {
	opacity: .6;
}

/* Non-blocking upload notice (e.g. low print resolution, Printful products). */
.pod-upload-warning {
	font-size: 12px;
	color: #8a5a00;
	background: #fff6e0;
	border-radius: 4px;
	padding: 6px 10px;
}

/* Variable products: the live .pod-price-preview already shows the selected
   variation's price, so WooCommerce's own per-variation price line would
   just repeat it (hideNativePrice() runs before that line is inserted). */
form.cart.pod-has-customizer .woocommerce-variation-price {
	display: none !important;
}

/* Cart/checkout row thumbnail swapped in for the customer's uploaded image
   (see POD_Cart_Handler::filter_cart_item_thumbnail) - sizing/positioning
   comes from the theme's own .attachment-woocommerce_thumbnail rules since
   we reuse that class; this just keeps a non-matching aspect ratio from
   looking stretched. */
.pod-cart-thumb-main {
	object-fit: cover;
}

/* Visual design editor (pod-designer.js): preset picker + the Fabric.js
   canvas overlaid on the product's main image. */
.pod-design-presets {
	margin-bottom: 10px;
}

/* !important + a fixed-size, overflow:hidden box on the pill itself:
   belt-and-braces against theme CSS that stretches images inside
   buttons/links to their native size (hit this same class of bug in wp-admin
   earlier - a theme/WC rule winning over a plain class selector). Even if
   the <img> ignores its own sizing, the pill's own box can't grow past this. */
.pod-design-preset {
	padding: 0 !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	overflow: hidden !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
}

.pod-design-preset-thumb {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	display: block !important;
}

.pod-design-preset.is-selected {
	border-color: #111;
}

.pod-design-status {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
}

.pod-design-canvas-wrap {
	position: relative;
	/* Beats the theme's .zoomImg (a SIBLING of this wrapper, not a child of
	   it, on this site's gallery markup) regardless of DOM order. */
	z-index: 999 !important;
}

/* Fabric.js wraps its <canvas> pair (lower-canvas + upper-canvas) in its own
   auto-generated .canvas-container div with an inline position:relative -
   that's what actually determines layout position, not the <canvas>
   elements themselves. Left as position:relative it just flows in normal
   document flow AFTER the <img>, i.e. below the product photo instead of
   overlaid on it. Force it absolute + pinned to the wrapper's top-left. */
.pod-design-canvas-wrap .canvas-container {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

/* Page scrolling over the photo stays possible: Fabric's
   allowTouchScrolling (pod-designer.js) only blocks the browser's scroll
   while an object is being dragged. */
.pod-design-canvas {
	touch-action: manipulation;
}

/* Empty editor (nothing placed yet): fully transparent to touches/clicks,
   so the photo scrolls and the gallery swipes like without the editor. */
.pod-design-canvas-wrap.is-empty .canvas-container,
.pod-design-canvas-wrap.is-empty .upper-canvas {
	pointer-events: none !important;
}

/* Styled to read as THE product's price (similar weight to a typical
   WooCommerce price header), not a small secondary line - this is the
   number that actually reflects the customer's choices. pod-frontend.js
   hides the theme's own native price display (see hideNativePrice()) so
   this is the only price shown. */
.pod-price-preview {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 20px 0;
}

.pod-price-label {
	font-size: 15px;
	font-weight: 400;
	color: #666;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.pod-price-value {
	font-size: 30px;
	font-weight: 700;
	color: #111;
	line-height: 1.1;
}

.pod-error-message {
	color: #c1272d;
	font-size: 13px;
	margin-top: 8px;
	display: none;
}

.pod-error-message.is-visible {
	display: block;
}

/* Quantity stepper polish (native WC input, styled to look like a stepper).
   !important throughout - same theme-button-greening conflict hit on every
   other <button> in this plugin (pills, design presets): a generic sitewide
   button rule was winning over a plain class selector and stretching these
   into wide green pills instead of small square +/- controls. */
.pod-customizer-fields + .quantity,
.quantity.pod-styled {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #d8d8d8 !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	background: #fff !important;
}

.pod-qty-btn {
	background: #fff !important;
	border: none !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer;
	color: #333 !important;
}

.pod-qty-btn:hover {
	background: #f2f2f2 !important;
}

/* Color / size squares replacing the variation dropdowns (pod-frontend.js
   initVariationSwatches()). The real <select> is kept, only hidden, so
   WooCommerce's variation logic still drives everything. !important on the
   button look: same theme <button> rule (green fill) as the print pills. */
form.cart .pod-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

.pod-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 6px;
}

.pod-swatch-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid #d8d8d8 !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: #1d1d1f !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pod-swatch-btn:hover,
.pod-swatch-btn:focus {
	border-color: #1d1d1f !important;
}

.pod-swatch-btn.is-selected {
	border-color: #1d1d1f !important;
	box-shadow: 0 0 0 2px #1d1d1f !important;
}

.pod-swatches:not(.pod-swatches-color) .pod-swatch-btn.is-selected {
	background: #1d1d1f !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Color squares: the fill IS the color, so it must beat the white
   background above (inline style set by JS). */
.pod-swatch-btn.pod-swatch-color {
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	background-image: none !important;
	border-color: rgba(0, 0, 0, .2) !important;
}

.pod-swatch-btn.pod-swatch-color.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f !important;
}

.pod-swatch-btn.is-disabled {
	opacity: .3;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Slider galleries (pod-designer.js sliderMode): the canvas floats over
   the current slide instead of wrapping one slide's <img>, positioned and
   sized by JS on every slide change. */
.pod-design-canvas-wrap.pod-design-overlay {
	position: absolute !important;
	top: 0;
	left: 0;
}

/* Personalized products: one design = one item, so no quantity stepper,
   and no wishlist / compare buttons next to Add to cart. The quantity
   input stays in the form (hidden), so quantity=1 is still submitted.
   :has() also catches the form before pod-frontend.js adds its class. */
form.cart.pod-has-customizer .quantity,
form.cart:has(.pod-customizer-fields) .quantity,
form.cart.pod-has-customizer .product-button--wishlist,
form.cart:has(.pod-customizer-fields) .product-button--wishlist,
form.cart.pod-has-customizer .product-button--compare,
form.cart:has(.pod-customizer-fields) .product-button--compare {
	display: none !important;
}

/* Variation attributes are picked through the compact Size / Color toggles
   pod-frontend.js builds under "Add image" (initVariationSwatches()); the
   theme's own variations table stays in the form, just hidden. */
form.cart table.variations.pod-variations-hidden {
	display: none !important;
}

.pod-variation-accordion .pod-accordion-panel .pod-swatches {
	margin: 0;
}

/* Personalized products: no zoom on the product photo - no hover
   magnifier (.zoomImg), no "click to enlarge" button and no lightbox on
   click. The customer works on the photo with the design editor instead. */
body.pod-customizer-product .zoomImg,
body.pod-customizer-product .product-gallery-enlarge,
body.pod-customizer-product .woocommerce-product-gallery__trigger {
	display: none !important;
}

body.pod-customizer-product a.product-image-lightbox,
body.pod-customizer-product .woocommerce-product-gallery__image > a {
	pointer-events: none !important;
	cursor: default !important;
}

.pod-design-canvas-wrap.pod-design-overlay.is-empty {
	pointer-events: none !important;
}

/* Mobile, personalized products: thumbnails row above the main photo
   (theme puts it below). 4 per row is set in pod-frontend.js
   (adjustThumbnails()). */
@media (max-width: 767px) {
	body.pod-customizer-product .single-product-image {
		display: flex;
		flex-direction: column;
	}

	body.pod-customizer-product .single-product-image .product-thumbnails-wrap {
		order: -1;
		margin: 0 0 10px !important;
	}
}

/* Design text Font / Size / Color as compact toggles, same look as the
   Size / Color / Print selectors. The native <select> / color input lies
   invisibly over the whole box, so a tap opens the device's own picker. */
.pod-message-style.pod-accordion-row {
	margin: 10px 0 0;
}

.pod-style-toggle {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex !important;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	margin: 0 !important;
	padding: 8px 26px 8px 10px;
	border: 1px solid #4a4f57;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
	background-size: 14px;
	color: #1d1d1f;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}

.pod-style-toggle-color {
	background-image: none;
	padding-right: 10px;
}

.pod-style-toggle:focus-within {
	border-color: #1b2a4a;
	box-shadow: 0 0 0 1px #1b2a4a;
}

.pod-style-toggle select,
.pod-style-toggle input[type="color"] {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	cursor: pointer;
	font-size: 16px !important; /* no iOS zoom-in when the picker opens */
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 380px) {
	.pod-style-toggle {
		gap: 6px;
		padding: 6px 22px 6px 8px;
		background-position: right 6px center;
	}
	.pod-style-toggle-color {
		padding-right: 8px;
	}
}

/* Print location options (Front / Back / Front + back) in the "Add image"
   style: 10px corners, dark border, 52px, 16px/600. The chosen one takes
   Add image's light blue-grey fill with a navy outline. Selector carries
   [data-group="print"] so it outranks the generic .pod-pill rules. */
.pod-group[data-group="print"] .pod-pills .pod-pill {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	justify-content: center !important;
	padding: 0 16px !important;
	line-height: 1.2 !important;
	border: 1px solid #4a4f57 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #1d1d1f !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.pod-group[data-group="print"] .pod-pills .pod-pill:hover,
.pod-group[data-group="print"] .pod-pills .pod-pill:focus {
	background: #f3f5f9 !important;
	border-color: #1b2a4a !important;
	color: #1d1d1f !important;
}

.pod-group[data-group="print"] .pod-pills .pod-pill.is-selected,
.pod-group[data-group="print"] .pod-pills .pod-pill.is-selected:hover,
.pod-group[data-group="print"] .pod-pills .pod-pill.is-selected:focus {
	background: #e6ebf2 !important;
	border-color: #1b2a4a !important;
	box-shadow: 0 0 0 1px #1b2a4a !important;
	color: #1d1d1f !important;
}

.pod-group[data-group="print"] .pod-print-stack {
	gap: 8px;
}

/* Summary modal before Add to cart (pod-frontend.js openSummary()):
   final mockup + choices, "Edit" / "Confirm & add to cart". Bottom sheet
   on phones, centered card on larger screens. */
.pod-summary[hidden] {
	display: none !important;
}

.pod-summary {
	position: fixed;
	inset: 0;
	/* Above floating widgets (WhatsApp chat, currency switcher...). */
	z-index: 2147483000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.pod-summary-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 20, 28, .55);
}

.pod-summary-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	max-height: 92vh;
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
	color: #1d1d1f;
}

@media (min-width: 768px) {
	.pod-summary {
		align-items: center;
		padding: 24px;
	}
	.pod-summary-panel {
		border-radius: 16px;
		max-height: 88vh;
	}
}

body.pod-summary-open {
	overflow: hidden;
}

.pod-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 8px;
}

.pod-summary-title {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.pod-summary-close {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #f1f3f6 !important;
	color: #1d1d1f !important;
	font-size: 22px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
}

.pod-summary-body {
	overflow-y: auto;
	padding: 4px 18px 8px;
	-webkit-overflow-scrolling: touch;
}

.pod-summary-mockup {
	background: #f6f7f9;
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
}

.pod-summary-mockup img {
	display: block;
	width: 100%;
	max-height: 46vh;
	object-fit: contain;
	margin: 0 auto;
}

.pod-summary-product {
	margin: 12px 0 6px;
	font-size: 15px;
	font-weight: 600;
}

.pod-summary-list {
	margin: 0 !important;
}

.pod-summary-row {
	display: flex;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid #eceef2;
	font-size: 14px;
	line-height: 1.35;
}

.pod-summary-row dt {
	flex: 0 0 34%;
	margin: 0;
	color: #6b7280;
	font-weight: 400;
}

.pod-summary-row dd {
	flex: 1 1 auto;
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}

.pod-summary-status {
	padding: 0 18px;
	font-size: 13px;
	color: #6b7280;
	min-height: 0;
}

.pod-summary-status:not(:empty) {
	padding-top: 6px;
}

.pod-summary-actions {
	display: flex;
	gap: 10px;
	padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid #eceef2;
}

.pod-summary-actions button {
	flex: 1 1 0;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
}

.pod-summary-edit {
	flex: 0 0 38% !important;
	background: #e6ebf2 !important;
	color: #1d1d1f !important;
	border: 1px solid #4a4f57 !important;
}

.pod-summary-confirm {
	background: #1b2a4a !important;
	color: #fff !important;
	border: 1px solid #1b2a4a !important;
}

.pod-summary-actions button:disabled {
	opacity: .6;
	cursor: wait;
}

/* Floating widgets that sit at max z-index (CURCY currency sidebar) would
   still cover the summary - hidden only while it is open. */
body.pod-summary-open .woocommerce-multi-currency.wmc-sidebar {
	display: none !important;
}