.pro-pg-variants{
	margin:12px 0;
	--ppg-cols:1;

/* List display mode */
.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
}

.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list-thumb {
	flex: 0 0 auto;
}

.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pro-pg-variants[data-ppg-display-mode="list"] .pro-pg-list-actions .pro-pg-qty {
	width: 80px;
}
	--ppg-scale: clamp(.78, calc(1.12 - (var(--ppg-cols) - 1) * .10), 1.12);
	--ppg-gap: calc(8px * var(--ppg-scale));
	--ppg-pad: calc(8px * var(--ppg-scale));
	--ppg-name-font: clamp(11px, calc(13px * var(--ppg-scale)), 15px);
	--ppg-btn-font: clamp(10px, calc(12px * var(--ppg-scale)), 14px);
	--ppg-btn-h: clamp(22px, calc(30px * var(--ppg-scale)), 36px);
	--ppg-btn-py: clamp(1px, calc(3px * var(--ppg-scale)), 6px);
	--ppg-btn-px: clamp(6px, calc(10px * var(--ppg-scale)), 14px);
}

/* When the block heading is disabled, remove extra top gap */
.pro-pg-variants[data-ppg-has-title="0"]{margin-top:0}

.pro-pg-title{margin:0 0 8px;font-size:14px;font-weight:600}

/* Dropdown mode */
.pro-pg-dropdown{margin:0 0 10px}
.pro-pg-dropdown .pro-pg-variant-select{max-width:420px}

.pro-pg-grid{display:grid;grid-template-columns:repeat(var(--ppg-cols, 1),minmax(0,1fr));gap:var(--ppg-gap)}

/* Optional: icon-only cart buttons (admin setting) */
.pro-pg-variants[data-ppg-cart-text="0"] .pro-pg-cart-text{display:none}

.pro-pg-variants[data-ppg-cart-text="0"] .pro-pg-actions .pro-pg-cart-btn{
	min-width:var(--ppg-btn-h);
	width:var(--ppg-btn-h);
	padding-left:0;
	padding-right:0;
	text-align:center;
}

/* Image-only mode: compact cards to thumb size + hover name tooltip */
.pro-pg-variants[data-ppg-image-only="1"]{--ppg-gap:6px}
.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-grid{justify-items:center;gap:var(--ppg-gap)}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-card{
	display:block;
	padding:0;
	border:0;
	background:transparent;
}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-content{display:none}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-thumb-link{
	position:relative;
	display:block;
	width:var(--ppg-thumb-w, 36px);
}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-thumb{
	display:block;
	width:100%;
	height:var(--ppg-thumb-h, 36px);
	border:1px solid #e5e5e5;
	border-radius:4px;
	background:#fff;
}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-card.is-active .pro-pg-thumb{
	outline:2px solid #d9534f;
	outline-offset:1px;
}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-thumb-link::after{
	content: attr(data-ppg-name);
	position:absolute;
	left:50%;
	bottom:100%;
	transform:translateX(-50%);
	margin-bottom:6px;
	max-width:240px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background:rgba(0,0,0,.80);
	color:#fff;
	font-size:12px;
	line-height:1.2;
	padding:6px 8px;
	border-radius:4px;
	box-shadow:0 2px 10px rgba(0,0,0,.25);
	opacity:0;
	pointer-events:none;
	transition:opacity .12s ease;
	z-index:5;
}

.pro-pg-variants[data-ppg-image-only="1"] .pro-pg-thumb-link:hover::after{opacity:1}

/* Overlay mode: badges + cart/qty on image (good for dense grids with larger thumbs) */
.pro-pg-variants[data-ppg-display-mode="overlay"]{
	--ppg-gap:6px;
	--ppg-ov-pad:4px;
	--ppg-ov-cart: clamp(26px, calc(var(--ppg-thumb-w, 36px) * .45), 34px);
	--ppg-ov-qty: clamp(34px, calc(var(--ppg-thumb-w, 36px) * .55), 44px);
	--ppg-ov-qty-h: clamp(24px, calc(var(--ppg-thumb-h, 36px) * .32), 28px);
}
.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-grid{justify-items:center;gap:var(--ppg-gap)}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-card{
	display:block;
	padding:0;
	border:0;
	background:transparent;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-content{display:none}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-thumb-wrap{
	position:relative;
	width:var(--ppg-thumb-w, 36px);
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-thumb-link{
	position:relative;
	display:block;
	width:100%;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-thumb{
	display:block;
	width:100%;
	height:var(--ppg-thumb-h, 36px);
	border:1px solid #e5e5e5;
	border-radius:4px;
	background:#fff;
	object-fit:cover;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-card.is-active .pro-pg-thumb{
	outline:2px solid #d9534f;
	outline-offset:1px;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-thumb-link::after{
	content: attr(data-ppg-name);
	position:absolute;
	left:50%;
	bottom:100%;
	transform:translateX(-50%);
	margin-bottom:6px;
	max-width:240px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background:rgba(0,0,0,.80);
	color:#fff;
	font-size:12px;
	line-height:1.2;
	padding:6px 8px;
	border-radius:4px;
	box-shadow:0 2px 10px rgba(0,0,0,.25);
	opacity:0;
	pointer-events:none;
	transition:opacity .12s ease;
	z-index:6;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-thumb-link:hover::after{opacity:1}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-badges{
	position:absolute;
	top:4px;
	left:4px;
	display:flex;
	flex-direction:column;
	gap:4px;
	align-items:flex-start;
	z-index:7;
	pointer-events:none;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions{
	position:absolute;
	inset:0;
	z-index:7;
	pointer-events:none;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-overlay-cart{
	position:absolute;
	right:var(--ppg-ov-pad);
	bottom:var(--ppg-ov-pad);
	width:var(--ppg-ov-cart) !important;
	min-width:var(--ppg-ov-cart) !important;
	max-width:var(--ppg-ov-cart) !important;
	min-height:var(--ppg-ov-cart);
	padding:0;
	border-radius:4px;
	pointer-events:auto;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-cart-text{display:none}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-overlay-qty,
.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-overlay-qty.form-control{
	position:absolute;
	left:var(--ppg-ov-pad);
	bottom:var(--ppg-ov-pad);
	width:var(--ppg-ov-qty) !important;
	min-width:var(--ppg-ov-qty) !important;
	max-width:var(--ppg-ov-qty) !important;
	height:var(--ppg-ov-qty-h);
	padding:2px 18px 2px 6px !important;
	font-size:12px;
	text-align:center;
	border-radius:4px;
	pointer-events:auto;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-overlay-qtywrap{
	position:absolute;
	left:var(--ppg-ov-pad);
	bottom:var(--ppg-ov-pad);
	width:var(--ppg-ov-qty);
	height:var(--ppg-ov-qty-h);
	pointer-events:auto;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-overlay-qtywrap .pro-pg-overlay-qty{
	position:static;
	width:100% !important;
	min-width:100% !important;
	max-width:100% !important;
	height:100%;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty-spin{
	position:absolute;
	right:2px;
	width:14px;
	height:calc(50% - 1px);
	padding:0;
	border:0;
	background:rgba(0,0,0,.35);
	color:#fff;
	font-size:9px;
	line-height:1;
	border-radius:3px;
	cursor:pointer;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty-inc{top:1px}
.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty-dec{bottom:1px}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty-spin:hover{background:rgba(0,0,0,.55)}
.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty-spin:disabled{opacity:.5;cursor:not-allowed}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty::-webkit-outer-spin-button,
.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

.pro-pg-variants[data-ppg-display-mode="overlay"] .pro-pg-overlay-actions .pro-pg-qty{
	-moz-appearance:textfield;
}

.pro-pg-card{display:flex;align-items:flex-start;gap:var(--ppg-gap);padding:var(--ppg-pad);border:1px solid #e5e5e5;border-radius:4px;background:#fff}
.pro-pg-card.is-active{border-color:#d9534f}
.pro-pg-card.is-disabled{opacity:.6}

.pro-pg-thumb-link{display:flex;flex:0 0 auto;text-decoration:none}
.pro-pg-thumb{width:var(--ppg-thumb-w, 36px);height:var(--ppg-thumb-h, 36px);object-fit:cover}

.pro-pg-content{display:flex;flex-direction:column;gap:calc(var(--ppg-gap) * .6);min-width:0;flex:1 1 auto}
.pro-pg-name{display:block;font-size:var(--ppg-name-font);line-height:1.2;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}

.pro-pg-badges{display:flex;gap:6px;flex-wrap:wrap}
.pro-pg-badge{
	display:inline-block;
	font-size:clamp(9px, calc(11px * var(--ppg-scale)), 11px);
	line-height:1.2;
	padding:clamp(1px, calc(2px * var(--ppg-scale)), 2px) clamp(4px, calc(6px * var(--ppg-scale)), 6px);
	border-radius:3px;
	font-weight:600;
}
.pro-pg-badge.best{background:#5cb85c;color:#fff}
.pro-pg-badge.low{background:#f0ad4e;color:#fff}
.pro-pg-badge.inactive{background:#777;color:#fff}

.pro-pg-variants.ppg-ajax-loading{opacity:.85}
.pro-pg-variants.ppg-ajax-loading .pro-pg-grid{pointer-events:none}

.pro-pg-variants .pro-pg-cart-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	align-self:flex-start;
	width:auto !important;
	max-width:100%;
	box-sizing:border-box;
	min-height:var(--ppg-btn-h);
	padding:var(--ppg-btn-py) var(--ppg-btn-px);
	font-size:var(--ppg-btn-font);
	line-height:1.1;
	font-weight:600;
	text-transform:none;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	border-radius:3px;
}

.pro-pg-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;max-width:100%}

.pro-pg-actions .pro-pg-qty,
.pro-pg-actions .pro-pg-qty.form-control{
	width:48px !important;
	min-width:48px !important;
	max-width:48px !important;
	flex:0 0 48px;
	padding:2px 4px !important;
	height:calc(var(--ppg-btn-h) - 2px);
	line-height:1.1;
	font-size:var(--ppg-btn-font);
	text-align:center;
	border-radius:3px;
}

.pro-pg-actions .pro-pg-cart-btn{
	flex:1 1 auto;
	min-width:0;
}

@media (max-width:480px){
	.pro-pg-actions{flex-wrap:wrap}
}

.pro-pg-variants .pro-pg-cart-btn .fa{font-size:1em;line-height:1}
.pro-pg-variants .pro-pg-cart-btn .pro-pg-cart-text{margin-left:6px}

.pro-pg-variants.ppg-cols-3 .pro-pg-cart-btn .pro-pg-cart-text,
.pro-pg-variants.ppg-cols-4 .pro-pg-cart-btn .pro-pg-cart-text,
.pro-pg-variants.ppg-cols-5 .pro-pg-cart-btn .pro-pg-cart-text,
.pro-pg-variants.ppg-cols-6 .pro-pg-cart-btn .pro-pg-cart-text{display:none}

.pro-pg-variants.ppg-cols-3 .pro-pg-cart-btn,
.pro-pg-variants.ppg-cols-4 .pro-pg-cart-btn,
.pro-pg-variants.ppg-cols-5 .pro-pg-cart-btn,
.pro-pg-variants.ppg-cols-6 .pro-pg-cart-btn{padding-left:10px;padding-right:10px}

/* Tighten controls a bit more for dense grids */
.pro-pg-variants.ppg-cols-4 .pro-pg-actions{gap:4px}
.pro-pg-variants.ppg-cols-4 .pro-pg-actions .pro-pg-qty,
.pro-pg-variants.ppg-cols-4 .pro-pg-actions .pro-pg-qty.form-control{
	width:42px !important;
	min-width:42px !important;
	max-width:42px !important;
	flex:0 0 42px;
}

@media (max-width:768px){.pro-pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.pro-pg-grid{grid-template-columns:1fr}}