/**
 * WooCommerce Product Offer Labels Styles
 * Version: 1.3.1
 */

/* --------------------------------
 * TOP WRAPPER (on product image)
--------------------------------- */
.wpol-top-label-wrapper {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 9;
}

/* --------------------------------
 * BOTTOM LABELS — VERTICAL STACK
 * The following styles ensure each bottom label is on its own line.
--------------------------------- */

/* The group that holds Bottom 1/2/3 */
.wpol-bottom-labels-group {
	display: flex;
	flex-direction: column;	   /* <- STACK VERTICALLY: Forces wrappers to stack */
	align-items: center;	   /* centers the label chips horizontally */
	gap: 6px;	   /* space between Label 1/2/3 */
	width: 100%;
	margin: 6px 0 8px 0;	   /* space before product title */
}

/* Each label’s wrapper = 1 row */
.wpol-bottom-labels-group .wpol-bottom-label-wrapper {
	display: block;			   /* <- ENSURES EACH LABEL IS ON A NEW LINE */
	width: 100%;
	text-align: center;	   /* center the chip; remove if you prefer left */
}

/* The chip itself */
.wpol-bottom-labels-group .wpol-bottom-label-wrapper .wpol-offer-label {
	display: inline-block;	   /* use block for full-width bar */
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1;
	border-radius: 4px;
}

/* If you want full-width bars, uncomment: */
.wpol-bottom-labels-group .wpol-bottom-label-wrapper .wpol-offer-label {
	display: block;
	width: 100%;
}


/* --------------------------------
 * BASE LABEL STYLE (fallback color overridden inline from PHP)
--------------------------------- */
.wpol-offer-label {
	font-weight: 700;
	color: #fff;
	background-color: #d9534f;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transform-origin: center center;
}

/* --------------------------------
 * SHAPES
--------------------------------- */

/* Rectangle */
.wpol-shape--rectangle { padding: 8px 14px; border-radius: 4px; }

/* Round */
.wpol-shape--round {
	height: 70px; min-width: 70px; padding: 5px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; line-height: 1.2;
}

/* Angled banner */
.wpol-shape--angle { padding: 8px 16px; transform: skewX(-15deg); }
.wpol-shape--angle span { display: inline-block; transform: skewX(15deg); }

/* Banner */
.wpol-shape--banner { padding: 10px 18px; clip-path: polygon(0% 0%, 100% 0%, 92% 50%, 100% 100%, 0% 100%, 8% 50%); }

/* Corner flag (TOP only) */
.wpol-top-label-wrapper.wpol-shape-wrapper--corner {
	top: 0; left: 0; width: 120px; height: 120px; overflow: hidden;
}
.wpol-shape--corner {
	position: absolute; width: 170px; padding: 8px 0; left: -45px; top: 30px;
	transform: rotate(-45deg); box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
/* Corner flag fallback for BOTTOM labels (render as rectangle) */
.wpol-bottom-label-wrapper .wpol-shape--corner {
	position: relative; width: auto; padding: 8px 14px; left: auto; top: auto;
	transform: none; border-radius: 4px;
}

/* --------------------------------
 * ANIMATIONS
--------------------------------- */

/* Pulse (wrapper) */
.wpol-animate--pulse { animation: wpol-pulse 1.5s infinite; }
@keyframes wpol-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* Shake (wrapper) */
.wpol-animate--shake { animation: wpol-shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite; }
@keyframes wpol-shake {
	10%,90%{transform:translate3d(-2px,0,0)}
	20%,80%{transform:translate3d(3px,0,0)}
	30%,50%,70%{transform:translate3d(-5px,0,0)}
	40%,60%{transform:translate3d(5px,0,0)}
}

/* Flash (label) */
.wpol-animate--flash { animation: wpol-flash 1.5s infinite; }
@keyframes wpol-flash { 0%,50%,100%{opacity:1} 25%,75%{opacity:.4} }

/* --------------------------------
 * RESPONSIVE TWEAKS
--------------------------------- */
@media (max-width: 480px) {
	.wpol-offer-label { font-size: 12px; }
	.wpol-shape--round { height: 60px; min-width: 60px; }
}

/* --------------------------------
 * LAST-RESORT OVERRIDES (!important)
 * These force the vertical stack in themes that interfere.
--------------------------------- */
.products .product .wpol-bottom-labels-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
}
.products .product .wpol-bottom-labels-group .wpol-bottom-label-wrapper {
	display: block !important;
	width: 100% !important;
}
.products .product .wpol-bottom-labels-group .wpol-bottom-label-wrapper .wpol-offer-label {
	display: inline-block !important;
}