/*
 * Black Friday 2026 banners (Figma 1574:22363): a 1440 x 540 canvas sized in
 * container units, shared by the Black Friday page carousel and the homepage
 * hero (inc/gm-black-friday.php egs_gm_bf_banner()).
 */
.gm-bf-slide { position: relative; flex: 0 0 100%; aspect-ratio: 1440 / 540; overflow: hidden; container-type: inline-size; }
.gm-bf-slide__stage { position: absolute; inset: 0; }
.gm-bf-slide__stage img { position: absolute; display: block; max-width: none; }
.gm-bf-slide--b1 { background: #071120; }
.gm-bf-slide--b2, .gm-bf-slide--b3 { background: #c4add9; }
.gm-bf-b1__glow { left: 22.72cqw; top: -24.24cqw; width: 54.56cqw; height: 70.15cqw; }
.gm-bf-b1__copy { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: 38.68cqw; transform: translate(-50%, -50%); }
.gm-bf-b1__copy img { position: static !important; width: 100%; height: auto; }
.gm-bf-b1__copy .gm-bf-b1__dates { width: 26.6cqw; margin-top: .4cqw; }
.gm-bf-slide .gm-bf-b1__tag { position: absolute; left: 64.38cqw; top: 19.38cqw; right: auto; width: 7.43cqw; height: auto; }
.gm-bf-word { position: absolute; left: 0; right: 0; font-family: Anton, 'Arial Narrow', Impact, sans-serif; font-weight: 400; font-size: 14.2cqw; line-height: 1; text-align: center; white-space: nowrap; letter-spacing: .1cqw; }
.gm-bf-b2__word { top: 7.9cqw; color: #4e2477; }
.gm-bf-b2__phones { left: 6.81cqw; top: 0; width: 86.37cqw; height: 48.61cqw; object-fit: cover; }
.gm-bf-b3__bg { left: 0; top: -.12cqw; width: 100.07cqw; height: 50.03cqw; object-fit: cover; }
.gm-bf-b3__word { top: 9.3cqw; color: #fff; }
.gm-bf-b3__phones { left: -3.01cqw; top: 0; width: 106.01cqw; height: 59.66cqw; object-fit: cover; }
.gm-bf-ribbon { position: absolute; left: 50%; display: flex; transform: translateX(-50%); }
.gm-bf-ribbon img { position: static !important; display: block; height: 100%; }
.gm-bf-ribbon > span { display: flex; align-items: center; height: 100%; font-family: Geist, var(--gm-font-sans); font-weight: 600; color: #fff; white-space: nowrap; }
.gm-bf-ribbon--b2 { top: 31.74cqw; height: 3.78cqw; filter: drop-shadow(0 -.21cqw 0 #3b155f); }
.gm-bf-ribbon--b2 > span { gap: .63cqw; padding: 0 1.6cqw 0 .31cqw; background: #4e2477; font-size: 2.2cqw; }
.gm-bf-ribbon--b2 > span img { width: 2.52cqw; height: 2.52cqw; }
.gm-bf-ribbon--b3 { top: 30.42cqw; height: 4.83cqw; filter: drop-shadow(0 -.27cqw 0 #1d3757); }
.gm-bf-ribbon--b3 > span { gap: .8cqw; padding: 0 2cqw 0 .4cqw; background: #2c4f7b; font-size: 2.82cqw; }
.gm-bf-ribbon--b3 > span img { width: 3.22cqw; height: 3.22cqw; }
.gm-bf-slide .gm-bf-b1__tag { position: absolute; left: 64.38cqw; top: 19.38cqw; right: auto; width: 7.43cqw; height: auto; }

/* Homepage hero (Figma 1657:294 / 1657:396 / 1657:436): a 1440 x 400 canvas in container units (1cqw = 14.4px at 1440). */
.gm-slide--bf { height: 400px; }
.gm-slide--bf-hb1 { background: #071120; }
.gm-slide--bf-hb2 { background: #c4add9; }
.gm-slide--bf-hb3 { background: #c4add9 url(../images/gm/bf/b3-bg.webp) center / cover no-repeat; }
.gm-slide__bflink { position: relative; display: block; height: 100%; overflow: hidden; text-decoration: none; }
.gm-slide__bflink:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #0858ce; }
.gm-hb { position: absolute; top: 0; left: 50%; display: block; width: 1440px; aspect-ratio: 1440 / 400; transform: translateX(-50%); container-type: inline-size; overflow: hidden; } /* The canvas crops its own artwork, as the Figma frame does. */
.gm-hb-stage { position: absolute; inset: 0; }
.gm-hb-stage img, .gm-hb-stage > .gm-bf-tag { position: absolute; display: block; max-width: none; }
.gm-hb-stage > .gm-bf-tag--text { height: auto; }
.gm-hb-stage > .gm-bf-tag--hang { transform: rotate(-45deg); } /* Banner 2's tag hangs straight down. */
.gm-hb1__glow { left: 22.723cqw; top: 0; width: 54.583cqw; height: 27.778cqw; }
.gm-hb1__copy { left: 33.985cqw; top: 2.705cqw; width: 29.444cqw; height: 21.875cqw; }
.gm-hb1__tag, .gm-hb-stage > .gm-hb1__tag { left: 59.887cqw; top: 14.365cqw; right: auto; width: 5.694cqw; height: 5.694cqw; }
.gm-hb2__tag, .gm-hb-stage > .gm-hb2__tag { left: 45.076cqw; top: 2.194cqw; right: auto; width: 8.75cqw; height: 8.75cqw; }
/* Wording tags: the 107 x 108 shape sits inside the Figma tag's box (82px box ~ 76% of it for banner 1; the hanging tag fills banner 2's box). */
.gm-hb-stage > .gm-hb1__tag.gm-bf-tag--figma, .gm-hb-stage > .gm-hb1__tag.gm-bf-tag--text { width: 7.43cqw; height: auto; left: 59.2cqw; top: 13.9cqw; }
.gm-hb-stage > .gm-hb2__tag.gm-bf-tag--figma, .gm-hb-stage > .gm-hb2__tag.gm-bf-tag--text { width: 6.4cqw; height: auto; left: 46.25cqw; top: 3.4cqw; }
.gm-hb2__word { left: 22.589cqw; top: 2.128cqw; width: 56.667cqw; height: 13.958cqw; }
.gm-hb2__phones { left: 17.795cqw; top: .556cqw; width: 64.41cqw; height: 36.25cqw; object-fit: cover; }
.gm-hb2__rib { left: 38.845cqw; top: 24.065cqw; width: 22.361cqw; height: 3.681cqw; }
.gm-hb3__bg { display: none; } /* The slide's own backdrop runs edge to edge (no seam beyond 1440px). */
.gm-hb3__word { left: 21.293cqw; top: 2.765cqw; width: 57.361cqw; height: 14.167cqw; }
.gm-hb3__phones { left: 10cqw; top: .092cqw; width: 80.041cqw; height: 45.047cqw; object-fit: cover; }
.gm-hb3__rib { left: 35.55cqw; top: 22.854cqw; width: 28.889cqw; height: 4.792cqw; }
.gm-slide__bfcta { display: none; }
/* Tablet and phone: the artwork spans ~930px of the 1440 canvas, so the canvas is scaled to fit that part to the screen; centred, with a button beneath. */
@media (max-width: 1100px) {
	.gm-slide--bf { height: auto; }
	.gm-slide__bflink { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 0 32px; }
	.gm-slide__bflink .gm-hb { position: relative; left: auto; flex: none; width: 152%; transform: none; }
	.gm-slide__bfcta { display: inline-flex; }
	.gm-slide--bf-hb3 { background: linear-gradient(to bottom, #b1a4d2 0 50%, #8a93a8 50% 100%); } /* Banner 3 on phones: its top and bottom edge colours above and below it, so the banner blends in. */
	.gm-hb3__bg { display: block; left: .208cqw; top: -5.99cqw; width: 99.792cqw; height: 49.896cqw; object-fit: cover; } /* Banner 3: its own backdrop inside the canvas, as in Figma. */
}

/* Campaign dates box (Figma 1570:22307 / 1657:384), drawn as text: "01-27TH NOVEMBER". */
.gm-bf-dates { display: inline-flex; align-items: baseline; justify-content: center; box-sizing: border-box; border: .139cqw solid #ff7a00; border-radius: .625cqw; padding: .972cqw 1.181cqw; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Manrope, var(--gm-font-sans), sans-serif; font-weight: 500; font-size: 2.917cqw; line-height: 1; letter-spacing: -.163cqw; color: #fff; white-space: pre; }
.gm-bf-dates small { font-size: 1.881cqw; line-height: 1; align-self: flex-start; letter-spacing: -.1cqw; }
.gm-bf-b1__copy .gm-bf-dates { margin-top: .4cqw; }
.gm-hb-stage > .gm-hb1__dates { position: absolute; left: 38.9cqw; top: 21.26cqw; width: 20.097cqw; height: 3.183cqw; padding: 0; border-width: .106cqw; border-radius: .423cqw; font-size: 2.22cqw; letter-spacing: -.124cqw; align-items: center; }
.gm-hb-stage > .gm-hb1__dates small { font-size: 1.432cqw; align-self: auto; transform: translateY(-.35em); }