/* Marcin 13.11.2026: "New" and "Promo" tags on product photos - one style on every page (loaded from header.tpl).
   Where they appear:
   - product lists (product-list.tpl: category, search, new arrivals, best sellers, specials, manufacturer, product page
     carousels), "Last visited products" (blockviewed.tpl), the shared wishlist (advansedwishlist view.tpl),
     the product page accessories (product.tpl): .imgs > div.new_a > div.new and span.new_a / span.product_image > .promo_badge
   - the product page photo (product.tpl): .product_details_icons > a > div.new + .promo_badge
   - favorites in the account (favoriteproducts-account.tpl): .product_box_carousel_content > div.new
   - "other products in the same category" (productscategory.tpl): #featured-products_block_center li > div.new
   "New" text comes from the theme's .new::after (content "NEW"); "Promo" is printed by polcodericonspromo /
   polcodericonspromopercent. The theme (global.css) had a white pill with a grey line (dark on hover) and a pink pill
   with a pink line, both 10px from the top left, so "Promo" covered "New".
   Now: white tag, 4px corners, the heart's soft shadow, 10px small caps - green for "New", muted red for "Promo";
   15px from the top (centred on the heart: 34px circle 10px from the top), "Promo" beside "New" when both are there.
   #page + :is() outranks the theme's #search .new, #new-products_block_zen_right .new and .hovered rules. */

html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) :is(div.new, .promo_badge) {
	position: absolute;
	top: 15px;
	left: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 24px;
	margin: 0;
	padding: 0 9px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(43, 43, 41, 0.18);
	font-family: "Open Sans", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 1;
}

/* the theme turns "New" dark grey on hover */
html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new:hover {
	border: 0;
	background: #fff;
}

html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new,
html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new::after {
	color: #414f34;
}

html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new::after {
	position: static;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* productscategory prints its own "New" link text inside the tag - the theme's ::after says it already */
html body #page #featured-products_block_center div.new a {
	display: none;
}

html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) .promo_badge,
html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) .promo_badge:hover {
	background: #fff;
	color: #a8402e;
}

/* "New" in a fixed width, so "Promo" can stand right beside it */
html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new {
	box-sizing: border-box;
	width: 46px;
	padding: 0;
}

/* both tags: "Promo" beside "New" (10px + 46px tag + 6px gap; Marcin 13.11.2026: side by side, not under it); the same
   :is() list as above - :is() counts its strongest selector (the #id), so a shorter list would lose to the rule above */
html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center):has(div.new) .promo_badge {
	left: 62px;
}

/* phones: two cards in a row (165px wide at 360px) - at full size "Promo" beside "New" reached under the heart (from 116px);
   smaller tags keep both before it */
@media (max-width: 767px) {
	html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) :is(div.new, .promo_badge) {
		height: 22px;
		padding: 0 6px;
		font-size: 9px;
		letter-spacing: 0.1em;
	}

	html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center) div.new {
		width: 38px;
		padding: 0;
	}

	html body #page :is(.imgs, .product_details_icons, .product_box_carousel_content, #featured-products_block_center):has(div.new) .promo_badge {
		left: 52px;
	}
}