/* GC Product Badges — three shapes sharing one colour contract:
   --gc-badge-bg and --gc-badge-color, set per badge by the renderer.
   The container is absolutely positioned, so any positioned card can host it
   without extra markup. */

.gc-badges {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: visible;
}
/* The badge is an unclipped wrapper. The notch lives on the inner shape, and
   the fold is a sibling of it: a clip-path clips an element's own pseudo
   elements too, so a fold drawn inside the clipped shape would be cut away and
   the badge would read flat. */
.gc-badge {
	position: absolute;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	line-height: 1;
	color: var(--gc-badge-color, #fff);
	white-space: nowrap;
	filter: drop-shadow(0 7px 14px rgba(20, 33, 43, .4));
}
.gc-badge__shape {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--gc-badge-bg, #D64545);
	background-image: linear-gradient(180deg,
		color-mix(in srgb, #fff 16%, transparent) 0%,
		transparent 45%,
		color-mix(in srgb, #000 14%, transparent) 100%);
}
/* The piece that turns the corner and disappears behind the card. */
.gc-badge__fold {
	position: absolute;
	width: 9px;
	height: 9px;
	background: var(--gc-badge-bg, #D64545);
	filter: brightness(.5) saturate(1.3);
}

/* Ribbon — a banner across the top-right, notched at its inner end, folding
   down behind the card at the outer end. */
.gc-badge--ribbon,
.gc-badge--tab {
	top: calc(var(--gc-badge-top, 16px) + var(--gc-badge-i, 0) * var(--gc-badge-step, 43px));
}
.gc-badge--ribbon {
	right: -10px;
}
.gc-badge--ribbon .gc-badge__shape {
	padding: 9px 17px 9px 22px;
	font-size: 12.5px;
	letter-spacing: .03em;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.gc-badge--ribbon .gc-badge__fold {
	right: 0;
	bottom: -10px;
	width: 10px;
	height: 10px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Tab — a label in the top-left, notched at its outer end, folding down behind
   the card at the card edge. */
.gc-badge--tab {
	left: -10px;
}
.gc-badge--tab .gc-badge__shape {
	padding: 9px 22px 9px 22px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
}
.gc-badge--tab .gc-badge__fold {
	left: 0;
	bottom: -10px;
	width: 10px;
	height: 10px;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Band — a full-width strip across the top, its ends dipping into points. */
.gc-badge--band {
	top: 0;
	left: 0;
	right: 0;
}
.gc-badge--band .gc-badge__shape {
	justify-content: center;
	padding: 11px 16px 17px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}

/* Two badges, two corners: nudge the tab clear when a band is also present. */
.gc-badges:has(.gc-badge--band) .gc-badge--tab,
.gc-badges:has(.gc-badge--band) .gc-badge--ribbon { --gc-badge-top: 58px; }

/* Flame — an SVG silhouette with an inner core, both flickering on staggered
   clocks. SVG rather than an emoji so it takes the badge's own colours. */
.gc-badge__flame {
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--gc-badge-color, #fff);
}
.gc-badge__flame svg { display: block; width: 100%; height: 100%; }
/* Flicker from the base, so the tip moves and the foot stays put. */
.gc-badge__flame-outer {
	transform-origin: 50% 90%;
	animation: gc-flame 1.1s ease-in-out infinite;
}
.gc-badge__flame-inner {
	transform-origin: 50% 90%;
	animation: gc-flame 1.1s ease-in-out infinite .22s;
}
@keyframes gc-flame {
	0%, 100% { transform: scale(1) skewX(0deg); }
	28% { transform: scale(1.1, .93) skewX(-3deg); }
	62% { transform: scale(.93, 1.09) skewX(3deg); }
}
/* Sparkle — the new badge's counterpart to the flame. A four-point star with a
   smaller one trailing it, both breathing on staggered clocks so the pair reads
   as a twinkle rather than a pulse. */
.gc-badge__spark {
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--gc-badge-color, #fff);
}
.gc-badge__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gc-badge__spark-major {
	transform-origin: 50% 38%;
	animation: gc-spark 2.4s ease-in-out infinite;
}
.gc-badge__spark-minor {
	transform-origin: 78% 76%;
	animation: gc-spark 2.4s ease-in-out infinite 1.05s;
}
@keyframes gc-spark {
	0%, 62%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
	22% { transform: scale(1.16) rotate(16deg); opacity: 1; }
	42% { transform: scale(.9) rotate(4deg); opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-badge__flame-outer, .gc-badge__flame-inner,
	.gc-badge__spark-major, .gc-badge__spark-minor { animation: none; }
}

@media (max-width: 640px) {
	.gc-badge { filter: drop-shadow(0 4px 9px rgba(20, 33, 43, .34)); }
	.gc-badge--ribbon, .gc-badge--tab { --gc-badge-top: 11px; --gc-badge-step: 34px; }
	.gc-badge--ribbon .gc-badge__shape { padding: 6px 12px 6px 16px; font-size: 11px; letter-spacing: .02em; gap: 5px; }
	.gc-badge--tab .gc-badge__shape { padding: 6px 15px 6px 15px; font-size: 10.5px; letter-spacing: .04em; gap: 5px; }
	.gc-badge--band .gc-badge__shape { padding: 7px 12px 13px; font-size: 10.5px; letter-spacing: .06em; gap: 5px; }
	.gc-badge__flame, .gc-badge__spark { width: 12px; height: 12px; }
	.gc-badges:has(.gc-badge--band) .gc-badge--tab,
	.gc-badges:has(.gc-badge--band) .gc-badge--ribbon { --gc-badge-top: 44px; }
}

@media (max-width: 480px) {
	.gc-badge--ribbon, .gc-badge--tab { --gc-badge-top: 9px; --gc-badge-step: 31px; }
	.gc-badge--ribbon .gc-badge__shape { padding: 5px 10px 5px 14px; font-size: 10px; }
	.gc-badge--tab .gc-badge__shape { padding: 5px 13px 5px 13px; font-size: 10px; }
	.gc-badge--band .gc-badge__shape { padding: 6px 10px 12px; font-size: 10px; }
	.gc-badges:has(.gc-badge--band) .gc-badge--tab,
	.gc-badges:has(.gc-badge--band) .gc-badge--ribbon { top: 38px; }
}

/* Reviews peek — a star chip in the image corner that opens on hover or focus.
   Bottom-right, clear of the badge corners: tab takes top-left, ribbon
   top-right, band the full top edge. The panel grows leftward and upward so it
   opens into the image rather than over the card edge, which also means a
   clipped media box never cuts it. */
.gc-rstar {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 6;
	display: flex;
	justify-content: flex-end;
	font-family: var(--gc-font-body, "Inter", sans-serif);
	--gc-rstar-bg: rgba(255, 255, 255, .94);
	--gc-rstar-ink: var(--gc-ink, #14212B);
	--gc-rstar-muted: var(--gc-muted, #5A6B75);
	--gc-rstar-on: var(--gc-accent, #F2994A);
	--gc-rstar-off: var(--gc-blue-lighter, #DCEEFA);
}
.gc-rstar__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px 6px 9px;
	border-radius: var(--gc-radius-pill, 999px);
	background: var(--gc-rstar-bg);
	color: var(--gc-rstar-ink);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 18px -8px rgba(20, 33, 43, .5);
	backdrop-filter: blur(6px);
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.gc-rstar__chip:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(20, 33, 43, .55); }
.gc-rstar__chip:focus-visible { outline: 2px solid var(--gc-blue, #5BA7DB); outline-offset: 2px; }
.gc-rstar__icon { display: flex; width: 13px; height: 13px; color: var(--gc-rstar-on); }
.gc-rstar__icon svg { width: 100%; height: 100%; }
.gc-rstar--empty .gc-rstar__icon { color: var(--gc-blue, #5BA7DB); }

/* The panel is laid out but folded away, so opening it costs no layout work and
   the copy is always in the accessibility tree. */
.gc-rstar__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 214px;
	padding: 11px 13px 12px;
	border-radius: var(--gc-radius-sm, 10px);
	background: var(--gc-rstar-bg);
	box-shadow: 0 18px 40px -18px rgba(20, 33, 43, .6);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px) scale(.96);
	transform-origin: 100% 100%;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.gc-rstar:hover .gc-rstar__panel,
.gc-rstar:focus-within .gc-rstar__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Chip hands over to the panel, which carries the same score. */
.gc-rstar:hover .gc-rstar__chip,
.gc-rstar:focus-within .gc-rstar__chip { opacity: 0; }

.gc-rstar__read { display: flex; align-items: center; gap: 7px; }
.gc-rstar__row { display: inline-flex; gap: 2px; }
.gc-rstar__pip { display: flex; width: 13px; height: 13px; }
.gc-rstar__pip svg { width: 100%; height: 100%; }
.gc-rstar__pip.is-on { color: var(--gc-rstar-on); }
.gc-rstar__pip.is-off { color: var(--gc-rstar-off); }
.gc-rstar__meta { font-size: 11.5px; color: var(--gc-rstar-muted); white-space: nowrap; }
.gc-rstar__meta b { color: var(--gc-rstar-ink); font-weight: 700; }

.gc-rstar__rate {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--gc-rstar-off);
}
.gc-rstar__rate-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-rstar-muted); }
.gc-rstar__pick { display: inline-flex; gap: 3px; }
.gc-rstar__pick-star {
	display: flex;
	width: 17px;
	height: 17px;
	color: var(--gc-rstar-off);
	transition: color .15s ease, transform .15s ease;
}
.gc-rstar__pick-star svg { width: 100%; height: 100%; }
/* Fill up to the star under the pointer: later siblings dim back down, so the
   row reads as a rating rather than five separate buttons. */
.gc-rstar__pick:hover .gc-rstar__pick-star { color: var(--gc-rstar-on); }
.gc-rstar__pick-star:hover ~ .gc-rstar__pick-star { color: var(--gc-rstar-off); }
.gc-rstar__pick-star:hover { transform: scale(1.18); }
.gc-rstar__pick-star:focus-visible { outline: 2px solid var(--gc-blue, #5BA7DB); outline-offset: 2px; border-radius: 3px; }

/* Roomier on the single product gallery, where there is more image to sit on. */
.gc-rstar--single { right: 18px; bottom: 18px; }
.gc-rstar--single .gc-rstar__chip { padding: 8px 14px 8px 11px; font-size: 13.5px; }
.gc-rstar--single .gc-rstar__icon { width: 15px; height: 15px; }
.gc-rstar--single .gc-rstar__panel { min-width: 236px; }

@media (prefers-reduced-motion: reduce) {
	.gc-rstar__panel { transition: opacity .01s linear, visibility .01s; transform: none; }
	.gc-rstar__chip, .gc-rstar__pick-star { transition: none; }
	.gc-rstar__chip:hover, .gc-rstar__pick-star:hover { transform: none; }
}

/* Touch: no hover to lean on, so the chip stays put and taps through to the
   reviews instead of trying to open a panel a finger cannot hold open. */
@media (hover: none) {
	.gc-rstar__panel { display: none; }
	.gc-rstar:hover .gc-rstar__chip { opacity: 1; }
}

@media (max-width: 640px) {
	.gc-rstar { right: 9px; bottom: 9px; }
	.gc-rstar__chip { padding: 5px 9px 5px 8px; font-size: 11.5px; }
	.gc-rstar--single { right: 12px; bottom: 12px; }
}