/* ==========================================================================
   Kinnunen Product Extras — front-end styles
   --------------------------------------------------------------------------
   - Diagonal "TILAUSTUOTE" ribbon overlaid on the product image
       * single-product page  (.kinnunen-tilaustuote-ribbon)
       * archive / category   (.kinnunen-tilaustuote-ribbon--loop)
   - Yellow stock-status dot used by the "Lähetettävissä" backorder label
   - "Toimitusaika: …" delivery-time line above the stock indicator
   ========================================================================== */


/* --- Utilities ------------------------------------------------------------ */

/* Used by kinnunen-variations.js to toggle the ribbon and the Toimitusaika
   line on variable product pages as the customer picks variations. The
   ribbon and the line are always rendered on variable products so JS has
   something to show; this class hides them by default until JS reveals
   them on a backorder variation. */
.kinnunen-hidden {
	display: none !important;
}


/* --- Tilaustuote ribbon — base ------------------------------------------- */

/* Make the image containers a positioning context. The bGH parent theme
   already adds Bootstrap's `.position-relative` to the loop image wrapper,
   but we re-state it here so the ribbon is robust against markup changes. */
.single-product .product-images,
.single-product .product-image-gallery,
.products .product .img-wrapper,
.products .product .holder {
	position: relative;
}

.kinnunen-tilaustuote-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
}

.kinnunen-tilaustuote-ribbon span {
	position: absolute;
	display: block;
	width: 220px;
	padding: 8px 0;
	background-color: #e91e93;            /* pink/magenta to match site accent */
	color: #ffffff;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-45deg);
	top: 35px;
	left: -65px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}


/* --- Tilaustuote ribbon — archive / category card ------------------------ */

/* Smaller, scaled to fit a product card thumbnail. */
.kinnunen-tilaustuote-ribbon--loop {
	width: 110px;
	height: 110px;
	z-index: 4;
}

.kinnunen-tilaustuote-ribbon--loop span {
	width: 170px;
	padding: 5px 0;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	top: 24px;
	left: -55px;
}


/* --- Mobile sizing -------------------------------------------------------- */

@media (max-width: 575.98px) {
	.kinnunen-tilaustuote-ribbon {
		width: 120px;
		height: 120px;
	}
	.kinnunen-tilaustuote-ribbon span {
		width: 180px;
		font-size: 0.72rem;
		top: 26px;
		left: -55px;
		padding: 6px 0;
	}

	.kinnunen-tilaustuote-ribbon--loop {
		width: 88px;
		height: 88px;
	}
	.kinnunen-tilaustuote-ribbon--loop span {
		width: 140px;
		font-size: 0.6rem;
		top: 18px;
		left: -45px;
		padding: 4px 0;
	}
}


/* --- Delivery-time line --------------------------------------------------- */

.kinnunen-delivery-time {
	margin: 0.75rem 0 0.25rem;
	font-size: 0.95rem;
	line-height: 1.4;
}

.kinnunen-delivery-time strong {
	font-weight: 700;
}


/* --- "Lähetettävissä" stock label with yellow dot -----------------------
   The bGH child theme renders its stock dot via a Font Awesome \f111 glyph
   on `.custom-stock p.stock::before`, colored by the .in-stock / .low-in-stock
   / .out-of-stock modifier classes. For our backorder state we re-use that
   same ::before and color it yellow via the `.kinnunen-stock-onbackorder`
   modifier. We also declare the ::before fallback for contexts where the
   theme's wrapper isn't present (e.g. WC's default stock template / variation
   stock html) so the dot is always drawn.

   Specificity note:
     theme:  `.custom-stock .stock::before`            (0,2,1)
     ours:   `p.stock.kinnunen-stock-onbackorder::*`   (0,2,2)
   so our color wins inside .custom-stock and our content draws the dot when
   the theme's rule doesn't fire. */

p.stock.kinnunen-stock-onbackorder {
	color: #2a2a2a;
	font-weight: 600;
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
}

p.stock.kinnunen-stock-onbackorder::before {
	content: '\f111';
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	color: #f5c518;                       /* warm yellow */
	width: 10px;
	height: 10px;
	margin-right: 0.5rem;
	display: inline-block;
}