/*
 * Black Friday badges site-wide (inc/gm-bf-badges.php): green "Black Friday
 * Deals" label (Figma 1574:23104) and the red tag (Figma 1574:23094).
 */

/* Green label: notched mint ribbon, Geist SemiBold 14/20 #006b40. */
.gm-bf-label { display: inline-flex; align-self: flex-start; height: 24px; flex: none; }
.gm-bf-label img { display: block; flex: none; width: 5px; height: 24px; }
.gm-bf-label > span { display: flex; align-items: center; height: 24px; padding: 0 6px; background: #94f5bc; font-family: Geist, var(--gm-font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: #006b40; text-transform: uppercase; white-space: nowrap; }

/* Red tag: Figma shape (text removed) with live text, rotated -44.8deg. */
.gm-bf-tag { position: absolute; top: 0; right: 0; z-index: 3; width: 92px; height: 95px; pointer-events: none; }
/* Figma artwork tag: 107 x 108 including the string loop; always fully inside its card. */
.gm-bf-tag--figma { width: 84px; height: auto; aspect-ratio: 107 / 108; }
.gm-bf-tag > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.gm-bf-tag__txt { position: absolute; left: 48.9%; top: 57.9%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 62%; height: 36%; transform: translate(-50%, -50%) rotate(-44.8deg); color: #fff; font-family: var(--gm-font-sans); line-height: 1; text-transform: uppercase; }
.gm-bf-tag__txt b { display: block; width: 100%; font-size: 24px; line-height: 20px; font-weight: 800; letter-spacing: -1.2px; text-align: left; }
.gm-bf-tag__txt small { display: block; font-size: 13px; line-height: 12px; font-weight: 700; letter-spacing: -.4px; }
.gm-bf-tag__txt small:only-child, .gm-bf-tag__txt small + small { font-size: 10px; line-height: 10px; }
.gm-bf-tag__txt:not(:has(b)) { align-items: center; }

/* Cards: the tag sits in the photo area, the label above the name. */
.gm-pcard, .gm-cat-card, .gm-cart-card, .gm-fav { position: relative; }
.gm-pcard__media, .gm-cat-card__media, .gm-cart-card__media, .gm-fav__media, .gm-pdp-card__media { position: relative; }
/* Inset from the card's top-right corner, so the rounded corner and overflow never crop it (was top/right -18px). */
.gm-pcard .gm-bf-tag, .gm-cat-card .gm-bf-tag, .gm-cart-card .gm-bf-tag, .gm-fav .gm-bf-tag, .gm-bf-card .gm-bf-tag { top: 10px; right: 10px; width: 72px; transform: none; }
.gm-bf-card--lg .gm-bf-tag, .gm-brandrow .gm-cart-card--lg .gm-bf-tag { width: 88px; }
.gm-pcard__body > .gm-bf-label, .gm-cat-card__body > .gm-bf-label, .gm-cart-card__body > .gm-bf-label, .gm-fav__info > .gm-bf-label { margin-bottom: -6px; }
.gm-fav .gm-bf-tag { top: 10px; right: 56px; } /* Clear of the heart button. */

/* Product page: tag on the main photo, label above the title. */
.gm-pdp-main { position: relative; }
.gm-pdp-main > .gm-bf-tag { top: 16px; right: 16px; width: 112px; height: auto; }
.gm-pdp-main > .gm-bf-tag .gm-bf-tag__txt b { font-size: 31px; line-height: 26px; }
.gm-pdp-main > .gm-bf-tag .gm-bf-tag__txt small { font-size: 17px; line-height: 16px; }
.gm-pdp-info > .gm-bf-label { margin-bottom: 8px; }

@media (max-width: 767px) {
	.gm-bf-label > span { font-size: 12px; padding: 0 4px; }
	.gm-pdp-main > .gm-bf-tag { top: 12px; right: 12px; width: 80px; }
	.gm-pcard .gm-bf-tag, .gm-cat-card .gm-bf-tag, .gm-cart-card .gm-bf-tag, .gm-fav .gm-bf-tag, .gm-bf-card .gm-bf-tag { top: 8px; right: 8px; width: 64px; }
	.gm-bf-card--lg .gm-bf-tag, .gm-brandrow .gm-cart-card--lg .gm-bf-tag { width: 72px; }
	.gm-fav .gm-bf-tag { right: 52px; }
	.gm-pdp-main > .gm-bf-tag .gm-bf-tag__txt b { font-size: 24px; line-height: 20px; }
	.gm-pdp-main > .gm-bf-tag .gm-bf-tag__txt small { font-size: 13px; line-height: 12px; }
}

/* Grids with a fixed body height: the label adds a line, so the body grows instead of squeezing the name out. */
.gm-cat-card__body:has(> .gm-bf-label), .gm-cart-card__body:has(> .gm-bf-label) { height: auto; min-height: 132px; }
.gm-cat-card__body > .gm-bf-label ~ .gm-cat-card__title, .gm-cart-card__body > .gm-bf-label ~ .gm-cart-card__title { flex: none; }
/* Product page photo rules (padding, contain) must not touch the tag. */
.gm-pdp-main > .gm-bf-tag > img { padding: 0; width: 100%; height: 100%; object-fit: fill; opacity: 1; }
/* Homepage brand rows have fixed card heights: let them grow by the label's line. */
.gm-brandrow .gm-cart-card--lg:has(.gm-bf-label) { height: auto; min-height: 540px; }
@media (max-width: 767px) { .gm-brandrow .gm-cart-card--lg:has(.gm-bf-label) { min-height: 380px; } }

/* Very small screens: the horizontal list cards (image left) keep the tag on the photo, smaller. */
@media (max-width: 680px) {
	ul.gm-cat-grid .gm-cat-card .gm-bf-tag, ul.gm-shop-range__grid .gm-cat-card .gm-bf-tag { top: 6px; right: auto; left: 70px; width: 48px; }
}

/* Green "40% OFF" line under the price (Black Friday page style: Manrope SemiBold 16/22 #006b40), only where prices support it. */
.gm-bf-pct { display: block; margin-top: 2px; font-family: var(--gm-font-sans); font-size: 16px; line-height: 22px; font-weight: 600; color: #006b40; white-space: nowrap; }
/* Red-badge products: the Black Friday green price, as on the Black Friday page. */
.gm-pcard:has(.gm-bf-tag) .gm-pcard__amount, .gm-cat-card:has(.gm-bf-tag) .gm-pcard__amount, .gm-cart-card:has(.gm-bf-tag) .gm-pcard__amount { color: #006b40; }

/* Wording tag ("Top Deals"): the complete Figma shape, text scaled with the tag (Figma: 40% 24cqw / OFF 15cqw, box 55% x 32% centred at 44% / 61%). */
.gm-bf-tag--text { aspect-ratio: 107 / 108; height: auto; container-type: inline-size; }
.gm-bf-tag--text .gm-bf-tag__txt { left: 43.7%; top: 60.6%; width: 55.4%; height: 32.2%; align-items: flex-end; }
.gm-bf-tag--text .gm-bf-tag__txt b { font-size: 21cqw; line-height: 18cqw; font-weight: 900; letter-spacing: -.6cqw; }
.gm-bf-tag--text .gm-bf-tag__txt small { font-size: 12.5cqw; line-height: 12cqw; font-weight: 700; letter-spacing: -.3cqw; }

/* Final card (Figma 1662:493): the tag sits flush in the card's top-right corner, 103px on a 400px card (25.75% of the card width). */
.gm-pcard .gm-bf-tag, .gm-cat-card .gm-bf-tag, .gm-cart-card .gm-bf-tag, .gm-bf-card .gm-bf-tag, .gm-fav .gm-bf-tag { top: 0; right: 0; width: 25.75%; min-width: 56px; max-width: 103px; height: auto; aspect-ratio: 1; }
.gm-fav .gm-bf-tag { right: 52px; }
@media (max-width: 680px) {
	ul.gm-cat-grid .gm-cat-card .gm-bf-tag, ul.gm-shop-range__grid .gm-cat-card .gm-bf-tag { top: 0; left: 64px; right: auto; width: 52px; min-width: 0; }
}
.gm-brandrow .gm-cart-card--lg .gm-bf-tag, .gm-bf-card--lg .gm-bf-tag { width: 25.75%; max-width: 103px; }

/* Product page "Compare the X with another option" cards (owner 2026-11-08). */
.gm-pdp-card { position: relative; }
.gm-pdp-card__body > .gm-bf-label { margin-bottom: -6px; }
.gm-pdp-card .gm-bf-tag { top: 0; right: 0; width: 25.75%; min-width: 56px; max-width: 103px; height: auto; aspect-ratio: 1; transform: none; }
.gm-pdp-card:has(.gm-bf-tag) .gm-pcard__amount { color: #006b40; }