/*
 * The discount badge on the product page.
 *
 * Shoptimizer has a badge of its own, but on the product page it prints it, hides it with
 * script on load, and only brings it back after an ajax call that answers for variable
 * products alone — so on a simple product it never returns. This one is plain markup: no
 * script, no request, nothing to fail.
 *
 * It is printed inside CommerceKit's gallery wrapper, which is the only anchor the gallery
 * offers; the picture itself has no hook inside it.
 */

#commercegurus-pdp-gallery-wrapper,
.product .woocommerce-product-gallery {
	position: relative;
}

.opsis-rabattmerke {
	/* The same distance from the top and from the left edge of the picture. One number, so
	   the two cannot drift apart again. */
	--opsis-merke-innrykk: 16px;

	position: absolute;
	z-index: 3;
	top: var(--opsis-merke-innrykk);
	left: var(--opsis-merke-innrykk);
	display: inline-block;
	padding: 6px 10px;
	border-radius: 4px;
	/* A fixed red, not the organisation's own colour: this says "discount", and a badge
	   painted in the house colour reads as ordinary furniture on the page. */
	background: #f71249;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .2px;
	pointer-events: none;
	white-space: nowrap;
}

/*
 * With the thumbnails standing down the left, the picture starts after that column, so the
 * badge has to start there too. The distance is not a guess: it is the four numbers the
 * layout is actually built from, added up.
 *
 *     76px   the thumbnail column — opsis-theme/css/pdp.css sets «width: 76px; flex: none»
 *            and so replaces CommerceKit's own «flex: 15%»
 *     −5px   CommerceKit pulls the thumbnail rail left by that much (margin-left: -5px),
 *            because its slides carry 5px of side padding
 *     16px   the gap between the two columns — opsis-theme/css/pdp.css, «gap: 16px»
 *      5px   CommerceKit's own margin-left on .cg-main-swiper
 *
 * 76 − 5 + 16 + 5 = 92px from the wrapper's left edge to the left edge of the white picture
 * card, and the inset is measured from there. An earlier version guessed «15 %» — that was
 * CommerceKit's flex basis, which the child theme had already overridden, so the badge stood
 * some seventy pixels inside the picture instead of sixteen.
 *
 * On a product with one picture the same 92px still holds. CommerceKit zeroes both 5px
 * margins there and collapses the thumbnail column with «flex: 0%», but pdp.css keeps the
 * column at «width: 76px» from a selector carrying an id, so the column stays and only the
 * margins go: 76 + 16 = 92. The class is therefore set on every product in this layout, not
 * only on those with a thumbnail rail to show.
 *
 * Below 771px CommerceKit moves the thumbnails under the picture itself, and the plain left
 * edge is right again.
 */
@media (min-width: 771px) {
	.opsis-rabattmerke--venstre-kolonne {
		left: calc(92px + var(--opsis-merke-innrykk));
	}
}

/*
 * On a phone the picture runs from edge to edge and loses its frame, so the badge moves in
 * with it.
 */
@media (max-width: 768px) {
	.opsis-rabattmerke {
		--opsis-merke-innrykk: 10px;

		font-size: 12px;
		padding: 5px 8px;
	}
}

/* --- Det samme merket på kortet ---------------------------------------------
 *
 * Står etter telefonregelen over med vilje: kortmerket setter sine egne tall, og
 * like tunge velgere avgjøres av rekkefølgen.
 *
 * Plassen er ikke valgt fritt. Merket skrives ut inne i «.woocommerce-image__wrapper»
 * — bilderammen, som katalogen allerede gir «position: relative» — så ti piksler opp
 * og inn er ti piksler fra rammens hjørne. Det er nøyaktig der temaets egen grønne
 * merkelapp sto («.product-label.type-bubble», top/left: 10px) og der temaets
 * «Eksempel» står. Én plass, tre merker som aldri er der samtidig.
 */
.opsis-rabattmerke--kort {
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	font-size: 12px;
}

/* Er varen både eksempelinnhold og rabattert, står «Eksempel» i hjørnet fra før.
   Da legger dette seg under i stedet for oppå: de sier to forskjellige ting, og
   begge to skal være til å lese. De to er søsken — begge skrives ut på
   «woocommerce_before_shop_loop_item_title», eksempelet ett hakk før. */
.opsis-eksempel-merke ~ .opsis-rabattmerke--kort {
	top: 42px;
}

@media (max-width: 768px) {
	.opsis-rabattmerke--kort {
		top: 8px;
		left: 8px;
		padding: 3px 7px;
		font-size: 11px;
	}

	.opsis-eksempel-merke ~ .opsis-rabattmerke--kort {
		top: 36px;
	}
}

/* --- Og på plaggene i kampanjefeltet på forsiden -----------------------------
 *
 * Feltet viser inntil fire av plaggene kampanjen gjelder. Merket der er det samme
 * merket, i bildets hjørne, bare mindre: flisene er små, og et merke i full
 * størrelse ville dekket plagget. Fargen er den samme røde — den sier «rabatt» på
 * kortet, på produktsiden og her, og et merke i bedriftens egen farge ville
 * forsvunnet i flaten det står på. */
.opsis-forside-felt-plagg .opsis-rabattmerke--flis {
	top: 6px;
	left: 6px;
	padding: 2px 6px;
	font-size: 11px;
	border-radius: 3px;
}