/*
 * Browsome PDP — the CSS that the product template cannot carry in an Elementor widget: the two stock/bestseller
 * labels, the wrapping category pills, the tag line of the product meta and the three full-width
 * backgrounds. Loaded only on pages rendered by template 60515.
 *
 * Everything else about the template's look stays where Oleksii keeps it: the Elementor editor, the widget's own
 * "Custom CSS" (rules that start with `selector`). Never an HTML widget with <style>, never data-id.
 * Tokens: live/DESIGN_SYSTEM.md (lime #C7E03D is the template's own strip colour, cream #F7F6F1 = --Base-BG).
 * Budget: this file under 4 KB. Classes are prefixed bp-pdp-. The template keeps them (wp browsome-pdp check).
 *
 * Ops module (browsome-*, Mykhailo). 2026-10-15. Replaces the four <style> HTML widgets of template 60515; the
 * selectors are written to be at least as specific as the data-id selectors they replace.
 */

/*
 * Labels. The "soon" paragraph is visible unless the product is in stock (body class stock-<status>, kept up to
 * date by browsome-pdp.js when a variation is chosen). The bestseller paragraph is hidden in the template and
 * shown for a product with the tag `bestseller` (bp-pdp-bestseller) or, until category 148 is gone, in the
 * Best Sellers category (bestSellers).
 */
.stock-instock p.bp-pdp-label.bp-pdp-label--soon {
	display: none;
}

.bestSellers p.bp-pdp-label.bp-pdp-label--bestseller,
.bp-pdp-bestseller p.bp-pdp-label.bp-pdp-label--bestseller {
	display: flex !important;
}

/*
 * Category pills (Post Info, class categoryProduct): they wrap onto the next line instead of shrinking into
 * columns of vertical text when a product has several categories with long names.
 */
.categoryProduct .elementor-post-info__terms-list {
	flex-wrap: wrap !important;
}

/*
 * Product meta (SKU, categories, tags): the tags are internal markers (bestseller, new) that the labels already
 * show, not something to print as "Tag: Bestseller" under the SKU.
 */
.bp-pdp .product_meta .tagged_as {
	display: none !important;
}

/*
 * Full-width backgrounds behind a boxed container: lime strip under the gallery, white block of the product
 * description, cream block of the related products. The container is position: relative (Elementor), the
 * background is a 5000px wide pseudo-element centred on it; the page wrapper clips the overflow.
 */
div.bp-pdp-bleed::before {
	content: '';
	position: absolute;
	width: 5000px;
	height: 100%;
}

div.bp-pdp-bleed.bp-pdp-bleed--lime::before {
	left: -2500px;
	background: #C7E03D;
}

div.bp-pdp-bleed.bp-pdp-bleed--white::before {
	top: 0;
	left: -1500px;
	background: #FFF;
}

div.bp-pdp-bleed.bp-pdp-bleed--cream::before {
	top: 0;
	left: -1500px;
	background: #F7F6F1;
}

/* [wlr_product_points]: the script has copied WPLoyalty's line into the holder (body class set by it), the
   original is hidden. Related cards print their own line (.bp-points). Loaded on template pages only. */
.bp-pdp-has-points .wlr-product-message:not(.wlr-clone):not(.bp-points) {
	display: none !important;
}