/* GC Range Hero — a photo per range, named by tabs.
   Phones: full-bleed photo, tabs over its head, copy over its foot.
   768px and up: split (copy left, photo right) or full-bleed again.
   Flat on purpose: near-square corners, no shadows; the photograph carries it. */

.gc-rh {
	--gc-rh-top: 130px;
	--gc-rh-shade: 82%;
	--gc-rh-ink: var(--gc-ink, #14212B);
	--gc-rh-gutter: 20px;
	--gc-rh-radius: 4px;
	position: relative;
	height: var(--gc-rh-h, clamp(520px, calc(100svh - var(--gc-rh-top) + 30px), 820px));
	margin-top: var(--gc-rh-top);
	overflow: hidden;
	background: #0E151B;
	color: #FFFFFF;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
}
.gc-rh *, .gc-rh *::before, .gc-rh *::after { box-sizing: border-box; }

/* ---- Slides: stacked, crossfaded ---- */
.gc-rh__stage { position: absolute; inset: 0; touch-action: pan-y; }
.gc-rh__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.gc-rh__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease;
}
.gc-rh__media,
.gc-rh__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.gc-rh__media { overflow: hidden; }
.gc-rh__img { transform: scale(1.06); transition: transform 7s ease-out; }
/* Two classes: `.elementor img` sets height:auto and max-width:100% at one class
   and an element, which would leave the photo its own height and a band of
   background under it. */
.gc-rh .gc-rh__img { height: 100%; max-width: none; object-fit: cover; }
.gc-rh__slide.is-active .gc-rh__img { transform: none; }

/* Dark at the head for the tabs, clear through the middle, then darkening from
   about a third of the way down so the eyebrow, which sits around 70%, already
   has a good half of the shade behind it. A brighter photo (the white vanity
   on the Skin slide) measured 2.1:1 for the eyebrow with the ramp starting at
   42%. */
.gc-rh__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgb(10 16 22 / 40%) 0%,
		rgb(10 16 22 / 0%) 18%,
		rgb(10 16 22 / 0%) 30%,
		rgb(10 16 22 / 58%) 64%,
		rgb(10 16 22 / var(--gc-rh-shade)) 100%);
}

/* ---- Copy ---- */
.gc-rh__copy {
	position: absolute;
	z-index: 2;
	left: var(--gc-rh-gutter);
	right: var(--gc-rh-gutter);
	bottom: 46px;
}
.gc-rh__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: inherit;
	text-shadow: 0 1px 8px rgb(0 0 0 / 45%);
}
.gc-rh .gc-rh__heading {
	max-width: 15ch;
	margin: 0 0 20px;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-size: clamp(30px, 8.6vw, 36px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.02em;
	color: inherit;
	text-shadow: 0 1px 12px rgb(0 0 0 / 25%);
}
.gc-rh__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -6px 0 18px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-shadow: 0 1px 8px rgb(0 0 0 / 45%);
}
.gc-rh__stars { display: inline-flex; gap: 2px; }
.gc-rh__stars .gc-star { display: inline-flex; }
.gc-rh__stars svg { width: 14px; height: 14px; }
.gc-rh__stars .gc-star.is-on { color: var(--gc-orange, #F2994A); }
.gc-rh__stars .gc-star.is-off { color: rgb(255 255 255 / 35%); }
.gc-rh__actions { display: flex; gap: 10px; max-width: 520px; }
.gc-rh .gc-rh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 52px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--gc-rh-radius);
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gc-rh .gc-rh__btn--primary { flex: 1 1 auto; background: #FFFFFF; color: var(--gc-rh-ink); }
.gc-rh .gc-rh__btn--primary:hover { background: #E9EEF2; color: var(--gc-rh-ink); }
.gc-rh .gc-rh__btn--secondary { flex: 0 1 auto; background: transparent; border-color: rgb(255 255 255 / 60%); color: #FFFFFF; }
.gc-rh .gc-rh__btn--secondary:hover { background: rgb(255 255 255 / 12%); color: #FFFFFF; }

/* Focus: white over the photo, ink on the page (split, below). The site's
   orange ring measured 2.1:1 on the page background, short of the 3:1 a focus
   indicator needs. */
.gc-rh .gc-rh__btn:focus-visible,
.gc-rh .gc-rh__tab:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ---- Tabs ---- */
/* Padded top and bottom so a focus ring is not clipped by the row's own
   horizontal scroll. */
.gc-rh__tabs {
	position: absolute;
	z-index: 3;
	top: 12px;
	left: 0;
	right: 0;
	display: flex;
	gap: 8px;
	padding: 4px 16px;
	overflow-x: auto;
	scrollbar-width: none;
}
.gc-rh__tabs::-webkit-scrollbar { display: none; }
.gc-rh .gc-rh__tab {
	flex: none;
	margin: 0;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--gc-rh-radius);
	background: rgb(10 16 22 / 45%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #FFFFFF;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.gc-rh .gc-rh__tab:hover { background: rgb(10 16 22 / 65%); }
.gc-rh .gc-rh__tab.is-active { background: #FFFFFF; border-color: #FFFFFF; color: var(--gc-rh-ink); }

/* ---- Progress: one bar per slide; the active one fills, and its animation
   ending is what moves the carousel on (gc-range-hero.js). ---- */
.gc-rh__progress {
	position: absolute;
	z-index: 3;
	left: var(--gc-rh-gutter);
	bottom: 22px;
	display: flex;
	gap: 6px;
	pointer-events: none;
}
.gc-rh__bar {
	position: relative;
	width: 28px;
	height: 2px;
	overflow: hidden;
	background: rgb(255 255 255 / 35%);
}
.gc-rh__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #FFFFFF;
	transform: scaleX(0);
	transform-origin: left center;
}
.gc-rh__bar.is-active::after { animation: gc-rh-fill var(--gc-rh-auto, 6000ms) linear forwards; }
.gc-rh.is-paused .gc-rh__bar.is-active::after { animation-play-state: paused; }
.gc-rh.is-stopped .gc-rh__bar.is-active::after { animation: none; transform: none; }
@keyframes gc-rh-fill { to { transform: scaleX(1); } }

/* ---- Small phones ----
   At 360 the four tabs ran 28px past the screen with nothing to say the row
   scrolls, and the Performance slide's buttons ran past the gutter. Tighter
   tabs, a fade on the row's right edge as the scroll hint, and buttons that may
   shrink. */
@media (max-width: 380px) {
	.gc-rh__tabs {
		gap: 6px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
	.gc-rh .gc-rh__tab { padding: 12px 12px; font-size: 14.5px; }
	.gc-rh .gc-rh__btn { padding: 0 14px; font-size: 14.5px; }
}

/* ---- 768px and up ----
   From tablet width, not desktop: at 768-900 the phone layout was an 820px
   photo with a lopsided button pair. */
@media (min-width: 768px) {
	/* A wider measure than the page's 1312px container: the photo runs to the
	   screen edge, so a gutter set by the container left 328px of empty page
	   beside the copy at 1920. --gc-rh-wide is shared with the best-sellers
	   heading below the hero (gc-product-carousel.css), so the two line up. */
	.gc-rh {
		--gc-rh-gutter: max(32px, calc((100vw - var(--gc-rh-wide, 1600px)) / 2 + 24px));
		height: var(--gc-rh-h, clamp(520px, 40vw, 680px));
	}
	.gc-rh .gc-rh__heading { max-width: 13ch; font-size: clamp(34px, 4.4vw, 68px); }
	.gc-rh__actions { flex-wrap: wrap; gap: 12px; }
	.gc-rh .gc-rh__btn { flex: none; padding: 0 28px; }
	.gc-rh__tabs { overflow: visible; left: var(--gc-rh-gutter); right: auto; padding: 0; -webkit-mask-image: none; mask-image: none; }

	/* Full-bleed: the phone layout, scaled up. */
	.gc-rh--full .gc-rh__tabs { top: 28px; }
	.gc-rh--full .gc-rh__copy { right: auto; width: min(620px, 50%); bottom: 88px; }
	.gc-rh--full .gc-rh__progress { bottom: 48px; }

	/* Split: the copy on the page, the photo beside it. Tabs, their progress
	   bars and the copy read as one block, so the tabs sit right over the slide
	   they name instead of a screen's height away from it. */
	.gc-rh--split { --gc-rh-split: 50%; background: transparent; color: var(--gc-rh-ink); }
	.gc-rh--split .gc-rh__media { left: var(--gc-rh-split); width: calc(100% - var(--gc-rh-split)); }
	.gc-rh--split .gc-rh__slide::after { content: none; }
	/* Centred as a block beside the photo. The block is about 360px from the top
	   of the tabs to the foot of the buttons with a two-line heading; the three
	   pieces are separate boxes (the tabs are shared, the copy is per slide), so
	   each takes its offset from that one figure. */
	.gc-rh--split { --gc-rh-block: 360px; }
	.gc-rh--split .gc-rh__tabs { top: max(40px, calc(50% - var(--gc-rh-block) / 2)); }
	.gc-rh--split .gc-rh__progress { top: max(98px, calc(50% - var(--gc-rh-block) / 2 + 58px)); bottom: auto; }
	.gc-rh--split .gc-rh__copy {
		top: max(142px, calc(50% - var(--gc-rh-block) / 2 + 102px));
		right: auto;
		bottom: auto;
		width: calc(var(--gc-rh-split) - var(--gc-rh-gutter) - 40px);
	}
	.gc-rh--split .gc-rh__rating { text-shadow: none; }
	.gc-rh--split .gc-rh__rating-text { color: #5A6B75; }
	.gc-rh--split .gc-rh__stars .gc-star.is-off { color: rgb(20 33 43 / 18%); }
	.gc-rh--split .gc-rh__eyebrow,
	.gc-rh--split .gc-rh__heading { text-shadow: none; }
	/* #3D82B3 measured 3.97:1 on the page at this size; this is 5.26:1. */
	.gc-rh--split .gc-rh__eyebrow { color: #2F6E99; }
	.gc-rh--split .gc-rh__btn--primary { background: var(--gc-rh-ink); color: #FFFFFF; }
	.gc-rh--split .gc-rh__btn--primary:hover { background: #24384A; color: #FFFFFF; }
	.gc-rh--split .gc-rh__btn--secondary { border-color: rgb(20 33 43 / 30%); color: var(--gc-rh-ink); }
	.gc-rh--split .gc-rh__btn--secondary:hover { background: rgb(20 33 43 / 6%); color: var(--gc-rh-ink); }
	.gc-rh--split .gc-rh__tab {
		border-color: rgb(20 33 43 / 16%);
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: var(--gc-rh-ink);
	}
	.gc-rh--split .gc-rh__tab:hover { background: rgb(20 33 43 / 6%); }
	.gc-rh--split .gc-rh__tab.is-active { background: var(--gc-rh-ink); border-color: var(--gc-rh-ink); color: #FFFFFF; }
	.gc-rh--split .gc-rh__btn:focus-visible,
	.gc-rh--split .gc-rh__tab:focus-visible { outline-color: var(--gc-rh-ink); }
	.gc-rh--split .gc-rh__bar { background: rgb(20 33 43 / 16%); }
	.gc-rh--split .gc-rh__bar::after { background: var(--gc-rh-ink); }
}

/* Wide: the photo takes the larger share. */
@media (min-width: 1024px) {
	.gc-rh--split { --gc-rh-split: 44%; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-rh__slide, .gc-rh__slide.is-active { transition: none; }
	.gc-rh__img { transform: none; transition: none; }
	.gc-rh__bar.is-active::after { animation: none; transform: none; }
}