/**
 * Kyocera Product Image Banners for WooCommerce – front-end styles.
 * Colours are passed per banner via --pibw-bg / --pibw-fg.
 */

.pibw-image-wrap {
	position: relative;
	display: block;
	overflow: hidden; /* clips diagonal ribbons */
}

.pibw-has-banner,
.woocommerce-product-gallery__image:has(> .pibw-banner),
.wc-block-components-product-image:has(> .pibw-banner),
.wc-block-product-gallery-large-image:has(> .pibw-banner) {
	position: relative;
	overflow: hidden;
}

.pibw-banner {
	position: absolute;
	z-index: 9;
	pointer-events: none; /* never block image links, zoom or lightbox */
	font-size: 0.8125rem;
	line-height: 1.2;
}

.pibw-banner__text {
	display: block;
	padding: 0.45em 0.9em;
	background-color: var(--pibw-bg, #333);
	color: var(--pibw-fg, #fff);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Tabs */
.pibw-pos--top-left  { top: 0.75em; inset-inline-start: 0; }
.pibw-pos--top-right { top: 0.75em; inset-inline-end: 0; }
.pibw-pos--top-left  .pibw-banner__text { border-start-end-radius: 3px; border-end-end-radius: 3px; }
.pibw-pos--top-right .pibw-banner__text { border-start-start-radius: 3px; border-end-start-radius: 3px; }

/* Full-width strips */
.pibw-pos--top,
.pibw-pos--bottom { left: 0; right: 0; text-align: center; }
.pibw-pos--top    { top: 0; }
.pibw-pos--bottom { bottom: 0; }
.pibw-pos--top .pibw-banner__text,
.pibw-pos--bottom .pibw-banner__text { box-shadow: none; }

/* Diagonal corner ribbons (best with short labels) */
.pibw-pos--corner-left,
.pibw-pos--corner-right {
	top: 0;
	width: 9em;
	height: 9em;
	overflow: hidden;
	font-size: 0.75rem;
}
.pibw-pos--corner-left  { left: 0; }
.pibw-pos--corner-right { right: 0; }

.pibw-pos--corner-left .pibw-banner__text,
.pibw-pos--corner-right .pibw-banner__text {
	position: absolute;
	top: 2.55em;
	width: 14em;
	padding: 0.45em 0;
	letter-spacing: 0.02em;
	text-align: center;
}
.pibw-pos--corner-left .pibw-banner__text  { left: -3.4em;  transform: rotate(-45deg); }
.pibw-pos--corner-right .pibw-banner__text { right: -3.4em; transform: rotate(45deg); }

/*
 * Single product page: WooCommerce's zoom (magnifier) button sits top-right and would
 * cover banners placed there, so move it to the bottom-right in those cases.
 */
.woocommerce-product-gallery:has(.pibw-pos--top-right, .pibw-pos--corner-right, .pibw-pos--top) .woocommerce-product-gallery__trigger {
	top: auto;
	bottom: 0.5em;
}

@media print {
	.pibw-banner__text { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Larger diagonal ribbon on the big product-page image (WooCommerce, block and Reno galleries). */
.woocommerce-product-gallery .pibw-pos--corner-left,
.woocommerce-product-gallery .pibw-pos--corner-right,
.wc-block-product-gallery-large-image .pibw-pos--corner-left,
.wc-block-product-gallery-large-image .pibw-pos--corner-right,
.wcgs-carousel .pibw-pos--corner-left,
.wcgs-carousel .pibw-pos--corner-right {
	font-size: 0.9375rem;
}

/* Reno Product Gallery: keep the banner above its full-slide lightbox link (its zoom icon uses z-index 999). */
.wcgs-slider-image > .pibw-banner {
	z-index: 99;
}