/* ==========================================================================
   GOSHOPCARA — COMPONENTS
   Announcement, header, hero, clock, rails, cards, matrix, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENT MARQUEE — brief §6 (32-36px, pause on hover)
   -------------------------------------------------------------------------- */

/* Below the header's 880: the bar scrolls away while the header pins over
   the top of it, so a higher value would let it cover the sticky header. */
.gsc-ann {
	height: var(--ann-h);
	background: var(--burgundy-950);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.gsc-marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.gsc-marquee__track {
	display: flex;
	flex: none;
	gap: 0;
	animation: gsc-marq 42s linear infinite;
	will-change: transform;
}

.gsc-marquee:hover .gsc-marquee__track {
	animation-play-state: paused;
}

.gsc-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 44px;
	padding-right: 44px;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	flex: none;
}

.gsc-marquee__item b {
	color: var(--burgundy-300);
	font-weight: 600;
}

@keyframes gsc-marq {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   2. HEADER — brief §7 (transparent → blur on scroll, floating)
   -------------------------------------------------------------------------- */

/* The announcement bar scrolls away; the header then pins to the top. Both
   are in normal flow, so the hero's negative offset below only has to clear
   the header itself. */
.gsc-hd {
	position: sticky;
	top: 0;
	z-index: 880;
	background: transparent;
	transition: background var(--t-slow) var(--ease),
	            border-color var(--t-slow) var(--ease),
	            backdrop-filter var(--t-slow) var(--ease);
	border-bottom: 1px solid transparent;
}

.gsc-hd.is-stuck {
	background: rgba(9, 7, 8, .82);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom-color: var(--burgundy-700);
}

.gsc-hd__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: var(--header-h);
	transition: height var(--t-slow) var(--ease);
}

.gsc-hd.is-stuck .gsc-hd__in {
	height: 62px;
}

/* One height token drives every logo instance, so header, mobile menu and
   footer stay in proportion instead of each picking its own size. */
:root {
	--logo-h: 38px;
	--logo-h-sm: 32px;
}

.gsc-logo {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text);
	flex: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.gsc-logo__img {
	display: block;
	width: auto;
	height: var(--logo-h);
	transition: height var(--t-slow) var(--ease);
}

.gsc-hd.is-stuck .gsc-logo__img { height: var(--logo-h-sm); }

.gsc-logo__img--mark { height: 64px; }

@media (max-width: 560px) {
	.gsc-logo__img { height: var(--logo-h-sm); }
}

/* Nav centre */
.gsc-nav-wrap {
	display: flex;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}

.gsc-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
}

.gsc-nav a {
	display: block;
	padding: 9px 15px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted);
	position: relative;
	transition: color var(--t-base) var(--ease);
}

.gsc-nav a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 2px;
	height: 1px;
	background: var(--burgundy-600);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-base) var(--ease);
}

.gsc-nav a:hover,
.gsc-nav .current-menu-item > a,
.gsc-nav .current_page_item > a {
	color: var(--text);
}

.gsc-nav a:hover::after,
.gsc-nav .current-menu-item > a::after,
.gsc-nav .current_page_item > a::after {
	transform: scaleX(1);
}

/* Header tools */
.gsc-tools {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.gsc-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-btn);
	background: none;
	border: 0;
	color: var(--text);
	cursor: pointer;
	position: relative;
	transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
	padding: 0;
}

.gsc-icon:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--burgundy-300);
}

.gsc-icon svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

.gsc-badge {
	position: absolute;
	top: 5px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--burgundy-700);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.gsc-burger { display: none; }

@media (max-width: 1080px) {
	.gsc-nav-wrap { display: none; }
	.gsc-burger { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   3. MOBILE MENU — brief §33 (fullscreen, deep burgundy, stagger)
   -------------------------------------------------------------------------- */

.gsc-mob {
	position: fixed;
	inset: 0;
	z-index: 960;
	background: var(--burgundy-950);
	display: flex;
	flex-direction: column;
	padding: 24px var(--sp-gutter) 40px;
	transform: translateY(-100%);
	transition: transform .5s var(--ease);
	overflow-y: auto;
	visibility: hidden;
}

.gsc-mob.is-open {
	transform: none;
	visibility: visible;
}

.gsc-mob__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 44px;
	flex: none;
}

.gsc-mob__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gsc-mob__list a {
	display: block;
	padding: 13px 0;
	font-size: clamp(1.6rem, 7vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
	opacity: 0;
	transform: translateY(20px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gsc-mob.is-open .gsc-mob__list a {
	animation: gsc-stagger .46s var(--ease) forwards;
}

@keyframes gsc-stagger {
	to { opacity: 1; transform: none; }
}

.gsc-mob__foot {
	margin-top: auto;
	padding-top: 36px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   4. HERO — brief §8-13 (fullscreen editorial, off-centre watch)
   -------------------------------------------------------------------------- */

.gsc-hero {
	position: relative;
	min-height: clamp(560px, 94vh, 1000px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--bg);
	margin-top: calc(var(--header-h) * -1);
	padding-top: var(--header-h);
	isolation: isolate;
}

.gsc-hero__bg {
	position: absolute;
	inset: -10%;
	z-index: 0;
	background:
		radial-gradient(60% 55% at 72% 46%, rgba(122, 16, 37, .30), transparent 68%),
		radial-gradient(48% 48% at 14% 84%, rgba(50, 5, 15, .85), transparent 72%);
	will-change: transform;
}

.gsc-hero__grid {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--sp-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.gsc-hero__copy {
	max-width: 660px;
}

.gsc-hero__copy .gsc-label {
	margin-bottom: 22px;
}

.gsc-hero__title {
	font-size: clamp(2.7rem, 7.6vw, 6.6rem);
	line-height: .95;
	letter-spacing: -.04em;
	font-weight: 600;
	margin: 0 0 24px;
}

.gsc-hero__title em {
	font-style: normal;
	color: var(--burgundy-300);
}

.gsc-hero__sub {
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	color: var(--muted);
	line-height: 1.66;
	max-width: 46ch;
	margin: 0 0 38px;
}

.gsc-hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* Stage: product image + live clock */
.gsc-hero__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(60vh, 540px);
	will-change: transform;
}

.gsc-hero__watch {
	position: relative;
	width: min(100%, 520px);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The link wrapping the image is an inline box by default, so it collapsed
   to the intrinsic image size and the 100%/100% below resolved against the
   wrong parent. Making it fill the frame restores the intended scale. */
.gsc-hero__watch > a {
	display: block;
	width: 100%;
	height: 100%;
}

.gsc-hero__watch img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .7));
}

/* Floating product info — brief §13 (glass) */
.gsc-float {
	position: absolute;
	right: 0;
	bottom: 6%;
	z-index: 4;
	width: min(264px, 74vw);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: rgba(18, 11, 13, .72);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid var(--border-strong);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.gsc-float__label {
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--burgundy-300);
	margin: 0 0 9px;
	font-weight: 600;
}

.gsc-float__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsc-float__meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.gsc-float__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	color: var(--muted);
}

.gsc-float__row b {
	color: var(--text);
	font-weight: 600;
}

.gsc-float__price {
	font-size: 19px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 14px;
	display: block;
}

.gsc-float__price .woocommerce-Price-amount { color: inherit; }
.gsc-float__price del { display: none; }

/* Scroll cue — brief §12 */
.gsc-scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	font-size: 9.5px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--muted);
}

/* A <span>, so it needs a block display before width/height apply. */
.gsc-scroll__line {
	display: block;
	width: 1px;
	height: 46px;
	background: linear-gradient(to bottom, var(--burgundy-600), transparent);
	position: relative;
	overflow: hidden;
}

.gsc-scroll__dot {
	position: absolute;
	top: 0;
	left: -1px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--burgundy-300);
	animation: gsc-drop 2.1s var(--ease) infinite;
}

@keyframes gsc-drop {
	0%   { transform: translateY(-4px); opacity: 0; }
	28%  { opacity: 1; }
	100% { transform: translateY(46px); opacity: 0; }
}

@media (max-width: 1080px) {
	.gsc-hero__grid {
		grid-template-columns: 1fr;
		text-align: left;
	}

	/* The stage holds both the watch and the price card. Pulling the whole
	   stage above the copy would put the price above the headline, so the
	   stage stays a column and only the watch moves up. */
	.gsc-hero__stage {
		order: -1;
		min-height: 0;
		flex-direction: column;
		gap: var(--sp-5);
		width: 100%;
	}

	.gsc-hero__watch { width: min(78%, 330px); }

	.gsc-float {
		position: static;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	/* Absolutely positioned, so it stays pinned to the stage corner and does
	   not participate in the column above. */
	.gsc-clock--hero { left: 0; top: 0; }

	.gsc-scroll { display: none; }
}

/* --------------------------------------------------------------------------
   5. LIVE CLOCK — brief §10, §21 (real time, rAF driven)
   -------------------------------------------------------------------------- */

.gsc-clock {
	position: relative;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .07), transparent 58%),
		var(--surface-2);
	border: 1px solid var(--border-strong);
	box-shadow: inset 0 2px 18px rgba(0, 0, 0, .6), 0 22px 54px rgba(0, 0, 0, .5);
	aspect-ratio: 1 / 1;
}

.gsc-clock--hero {
	position: absolute;
	left: 2%;
	top: 6%;
	width: clamp(88px, 12vw, 132px);
	z-index: 3;
}

.gsc-clock--big {
	width: min(72vw, 330px);
	margin: 0 auto;
}

.gsc-clock__face { position: absolute; inset: 0; }

.gsc-clock__tick {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform-origin: 50% 50%;
}

.gsc-clock__tick::before {
	content: "";
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 6%;
	background: rgba(255, 255, 255, .26);
	border-radius: 1px;
}

.gsc-clock__tick--h::before {
	width: 2px;
	height: 9%;
	background: var(--burgundy-300);
}

.gsc-clock__hand {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform-origin: 50% 100%;
	border-radius: 4px;
	will-change: transform;
}

.gsc-clock__hand--h {
	width: 3.5px;
	height: 27%;
	margin-left: -1.75px;
	background: var(--text);
}

.gsc-clock__hand--m {
	width: 2.5px;
	height: 38%;
	margin-left: -1.25px;
	background: var(--text);
}

.gsc-clock__hand--s {
	width: 1.5px;
	height: 43%;
	margin-left: -.75px;
	background: var(--burgundy-600);
}

.gsc-clock__pin {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--burgundy-300);
	box-shadow: 0 0 0 2px var(--bg);
}

/* Clock section — brief §21 */
.gsc-timesec {
	background: var(--bg);
}

/* Two columns: the promise on the left, the dial on the right. The clock on
   its own carried no information a shopper needed. */
.gsc-timesec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(var(--sp-8), 6vw, 88px);
	align-items: center;
}

.gsc-timesec__copy .gsc-label { margin-bottom: var(--sp-4); }
.gsc-timesec__copy .gsc-h2 { margin-bottom: var(--sp-4); }
.gsc-timesec__copy .gsc-lede { margin-bottom: var(--sp-6); }

.gsc-promise {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--border);
}

.gsc-promise__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border);
}

.gsc-promise__k {
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}

.gsc-promise__v {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
	text-align: right;
}

.gsc-promise__v .woocommerce-Price-amount { color: var(--burgundy-700); }

.gsc-timesec__dial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-6);
}

.gsc-timesec__read-wrap { text-align: center; }

@media (max-width: 900px) {
	.gsc-timesec__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.gsc-timesec__dial { order: -1; }
}

.gsc-timesec__read {
	font-size: clamp(2.2rem, 7vw, 4rem);
	font-weight: 600;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	margin: 0;
	line-height: 1;
}

.gsc-timesec__date {
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted);
	margin: var(--sp-3) 0 0;
}

.gsc-timesec__tz {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--burgundy-700);
	font-weight: 600;
	margin: var(--sp-2) 0 0;
}

/* --------------------------------------------------------------------------
   6. PRODUCT CARD — brief §24 (dark, 1:1 contain, hover reveal)
   -------------------------------------------------------------------------- */

.gsc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--t-base) var(--ease),
	            box-shadow var(--t-base) var(--ease),
	            transform var(--t-base) var(--ease);
	height: 100%;
	isolation: isolate;
}

.gsc-card:hover {
	border-color: var(--burgundy-700);
	box-shadow: 0 14px 34px rgba(122, 16, 37, .18);
	/* No translate: inside a horizontal scroller a lifted card escapes the
	   clip box and overlaps its neighbours. The border and shadow carry the
	   hover state instead. */
	transform: none;
	z-index: 2;
}

.gsc-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
	display: block;
	/* Sits inside the card's 1px border, so one step tighter. */
	border-radius: var(--r-inner) var(--r-inner) 0 0;
	margin: 0;
}

.gsc-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Fixed inset, not a percentage: a % padding resolves against the card's
	   width, so a 208px card and a 296px card rendered the same watch at
	   noticeably different sizes. */
	padding: var(--sp-5);
	transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}


/* Cross-fade, not a stack. Both images share the same box, so the outgoing
   one must fade out as the incoming one fades in — leaving the main image at
   full opacity showed the two watches ghosted over each other. */
.gsc-card__media img.gsc-img--main {
	opacity: 1;
	z-index: 1;
}

.gsc-card__media img.gsc-img--alt {
	opacity: 0;
	z-index: 2;
}

.gsc-card:has(.gsc-img--alt):hover .gsc-card__media img.gsc-img--main {
	opacity: 0;
}

.gsc-card:hover .gsc-card__media img.gsc-img--alt {
	opacity: 1;
}

/* Zoom only the image that is actually showing. */
.gsc-card:not(:has(.gsc-img--alt)):hover .gsc-card__media img.gsc-img--main,
.gsc-card:hover .gsc-card__media img.gsc-img--alt {
	transform: scale(1.04);
}

.gsc-card__body {
	padding: var(--sp-4) var(--sp-4) var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}

.gsc-card__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Two lines reserved. Titles here run 20 to 46 characters, so without a
	   fixed block the cards in a row ended at different heights and the grid
	   looked ragged. The price is still pinned to the bottom by margin-top. */
	min-height: 2.8em;
}

.gsc-card__meta {
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.gsc-card__price {
	font-size: 15px;
	font-weight: 700;
	/* Pinned to the bottom of the flex column: this is what keeps prices on
	   one baseline across a row of cards with different title lengths. */
	margin-top: auto;
	padding-top: var(--sp-1);
}

.gsc-card__price del {
	color: var(--muted);
	font-weight: 400;
	font-size: 12.5px;
	margin-right: 7px;
}

.gsc-card__price ins {
	text-decoration: none;
	color: var(--burgundy-300);
}

.gsc-card__badge {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 3;
	background: var(--burgundy-700);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 5px var(--sp-2);
	border-radius: var(--r-sm);
}

.gsc-card__wish {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(9, 7, 8, .55);
	backdrop-filter: blur(8px);
	border: 1px solid var(--border);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--t-base) var(--ease),
	            transform var(--t-base) var(--ease),
	            color var(--t-base) var(--ease);
	cursor: pointer;
	padding: 0;
}

.gsc-card:hover .gsc-card__wish,
.gsc-card__wish:focus-visible {
	opacity: 1;
	transform: none;
}

.gsc-card__wish:hover { color: var(--burgundy-300); }
.gsc-card__wish svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.gsc-card__wish.is-on svg { fill: var(--burgundy-600); stroke: var(--burgundy-600); }

/* Quick add — brief §25.
   Anchored to the bottom of the media pane rather than floating over the
   middle of it, so it never covers the watch itself. It expands into place
   from zero height, which keeps every card the same height whether or not
   the button is showing. */
.gsc-card__add {
	position: absolute;
	left: var(--sp-3);
	right: var(--sp-3);
	bottom: var(--sp-3);
	z-index: 3;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	padding: var(--sp-3) var(--sp-4);
	font-size: 10.5px;
	border-radius: var(--r-sm);
	pointer-events: none;
}

.gsc-card:hover .gsc-card__add,
.gsc-card__add:focus-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Touch devices get no hover, so the button is always available. */
@media (hover: none) {
	.gsc-card__add,
	.gsc-card__wish {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* --------------------------------------------------------------------------
   7. HORIZONTAL RAIL — brief §14, §38
   -------------------------------------------------------------------------- */

.gsc-rail {
	position: relative;
}

.gsc-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(208px, 22vw, 296px);
	gap: clamp(var(--sp-3), 1.6vw, var(--sp-6));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Vertical room for the card's lift-on-hover and its shadow, which a
	   plain overflow container would otherwise clip. */
	padding: var(--sp-1) var(--sp-1) var(--sp-4);
	margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) 0;
	scrollbar-width: thin;
	scrollbar-color: var(--burgundy-700) transparent;
	cursor: grab;
}

.gsc-rail__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.gsc-rail__track.is-dragging a { pointer-events: none; }

.gsc-rail__track > * { scroll-snap-align: start; }

.gsc-rail__track::-webkit-scrollbar { height: 3px; }
.gsc-rail__track::-webkit-scrollbar-track { background: var(--border); }
.gsc-rail__track::-webkit-scrollbar-thumb { background: var(--burgundy-700); }

.gsc-rail__nav {
	display: flex;
	gap: 8px;
}

.gsc-rail__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--t-base) var(--ease),
	            border-color var(--t-base) var(--ease),
	            opacity var(--t-base) var(--ease);
	padding: 0;
}

.gsc-rail__btn:hover:not(:disabled) {
	background: var(--burgundy-700);
	border-color: var(--burgundy-700);
}

.gsc-rail__btn:disabled { opacity: .3; cursor: default; }
.gsc-rail__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   8. EDITORIAL SPLIT — brief §16 (asymmetric, not 50/50)
   -------------------------------------------------------------------------- */

.gsc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 88px);
	align-items: center;
}

.gsc-split--flip {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
}

.gsc-split--flip .gsc-split__media { order: 2; }

.gsc-split__media {
	position: relative;
	aspect-ratio: 4 / 3.3;
	background: #fff;
	border-radius: var(--r-img);
	overflow: hidden;
}

.gsc-split__media > a {
	display: block;
	position: absolute;
	inset: 0;
}

.gsc-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(var(--sp-5), 4%, var(--sp-8));
}

.gsc-split__body .gsc-label { margin-bottom: 18px; }
.gsc-split__body .gsc-h2 { margin-bottom: 20px; }
.gsc-split__body .gsc-lede { margin-bottom: 30px; }

@media (max-width: 900px) {
	.gsc-split,
	.gsc-split--flip { grid-template-columns: 1fr; }
	.gsc-split--flip .gsc-split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   9. DISCOVERY MATRIX — brief §18
   -------------------------------------------------------------------------- */

/* Separated tiles rather than a hairline grid: each cell is its own rounded
   object, which reads as a set of cards instead of a table. */
/* auto-fit rather than a fixed three: this block is used once with four
   audience tiles and once with three strap tiles, and a hard column count
   left an orphan cell in one of them. */
.gsc-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-3);
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.gsc-matrix__cell {
	position: relative;
	min-height: clamp(140px, 17vw, 210px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(var(--sp-4), 2vw, var(--sp-6));
	overflow: hidden;
	isolation: isolate;
	transition: background var(--t-base) var(--ease),
	            border-color var(--t-base) var(--ease),
	            transform var(--t-base) var(--ease),
	            box-shadow var(--t-base) var(--ease);
}

.gsc-matrix__cell:hover {
	border-color: var(--burgundy-700);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(122, 16, 37, .16);
}

/* Above the hover wash (z-index 1) so the product stays visible when the
   tile floods burgundy. */
.gsc-matrix__img {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: .5;
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* The image fills the upper band of the tile; the title and count sit in the
   lower third. A percentage bottom padding was squeezing the watch down to a
   thumbnail, so the clear space is set as a fixed band instead. */
.gsc-matrix__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
	padding: var(--sp-5) var(--sp-5) 72px;
}

/* Flat wash, not a gradient. A vertical fade left the top half pale and the
   bottom half solid, which cut the tile in two and greyed out the watch. */
.gsc-matrix__cell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--burgundy-800);
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
	pointer-events: none;
}

.gsc-matrix__cell:hover::before { opacity: 1; }

.gsc-matrix__cell:hover .gsc-matrix__img { opacity: .9; transform: scale(1.04); }

.gsc-matrix__name {
	position: relative;
	z-index: 3;
	font-size: clamp(.98rem, 1.7vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 0;
	transition: transform var(--t-base) var(--ease);
}

.gsc-matrix__cell:hover .gsc-matrix__name { transform: translateY(-3px); }

.gsc-matrix__count {
	position: relative;
	z-index: 3;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 7px 0 0;
}

.gsc-matrix__cell:hover .gsc-matrix__count { color: var(--burgundy-300); }

@media (max-width: 760px) {
	.gsc-matrix { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   10. LARGE FEATURE — brief §19
   -------------------------------------------------------------------------- */

/* A contained block, not a full-bleed band: rounded and inset so it reads as
   one object on the page rather than a stripe across it. */
.gsc-feature {
	background: none;
	border: 0;
	overflow: visible;
	padding: 0;
	margin: var(--sp-12) 0;
}

.gsc-feature .gsc-feature__grid {
	background:
		radial-gradient(70% 90% at 78% 40%, rgba(158, 41, 64, .30), transparent 68%),
		var(--burgundy-950);
	border-radius: var(--r-xl);
	padding: clamp(var(--sp-8), 6vw, 88px) clamp(var(--sp-6), 5vw, 68px);
	overflow: hidden;
}

.gsc-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: clamp(30px, 5vw, 80px);
	align-items: center;
}

.gsc-feature__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}

.gsc-feature__media > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.gsc-feature__media img {
	width: min(100%, 470px);
	height: auto;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 34px 66px rgba(0, 0, 0, .62));
}

.gsc-feature__body .gsc-label { margin-bottom: 18px; }

.gsc-feature__title {
	font-size: clamp(1.7rem, 3.6vw, 3.1rem);
	line-height: 1.06;
	letter-spacing: -.028em;
	margin: 0 0 20px;
}

.gsc-feature__price {
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 700;
	margin: 0 0 30px;
}

.gsc-feature__price del { color: var(--muted); font-size: .66em; font-weight: 400; margin-right: 10px; }
.gsc-feature__price ins { text-decoration: none; }

.gsc-feature__cta { display: flex; gap: 13px; flex-wrap: wrap; }

@media (max-width: 900px) {
	.gsc-feature__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. TRENDING — brief §23 (1 large + 4 small)
   -------------------------------------------------------------------------- */

.gsc-trend {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: clamp(13px, 1.6vw, 22px);
}

.gsc-trend > *:first-child {
	grid-row: span 2;
}

.gsc-trend > *:first-child .gsc-card__name { font-size: 17px; -webkit-line-clamp: 3; min-height: 0; }
.gsc-trend > *:first-child .gsc-card__price { font-size: 19px; }
.gsc-trend > *:first-child .gsc-card__body { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.gsc-trend > *:first-child .gsc-card__media img { padding: var(--sp-8); }

/* The feature card spans two rows. Its media grows to fill the extra height,
   and the watch scales up with it — `contain` on a square-ratio box left the
   image at thumbnail size with a block of empty card beneath it. */
.gsc-trend > *:first-child .gsc-card__media {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.gsc-trend > *:first-child .gsc-card__body {
	flex: 0 0 auto;
}

@media (max-width: 900px) {
	.gsc-trend { grid-template-columns: repeat(2, 1fr); }
	.gsc-trend > *:first-child { grid-row: span 1; grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   12. STATEMENT BANNER — brief §26
   -------------------------------------------------------------------------- */

.gsc-statement {
	position: relative;
	background: none;
	text-align: center;
	overflow: visible;
	isolation: isolate;
	padding: 0;
	margin: var(--sp-12) 0;
}

/* The inner element carries both .gsc-shell and .gsc-statement__in, so the
   panel, its texture and its content all live on this one box. */
/* This element also carries .gsc-shell, whose horizontal padding is the page
   gutter. The panel's own padding is written on an inner box instead, or the
   two would stack and squeeze the text to the middle third. */
.gsc-statement__in {
	position: relative;
	z-index: 1;
	background: var(--burgundy-800);
	border-radius: var(--r-xl);
	padding-top: clamp(var(--sp-12), 8vw, 116px);
	padding-bottom: clamp(var(--sp-12), 8vw, 116px);
	overflow: hidden;
	isolation: isolate;
}

.gsc-statement__in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(48% 60% at 50% 0%, rgba(255, 255, 255, .11), transparent 68%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* Content above the texture layer. */
.gsc-statement__in > * {
	position: relative;
	z-index: 1;
}

.gsc-statement__title {
	font-size: clamp(1.9rem, 5.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 22px;
	color: #fff;
}

.gsc-statement__sub {
	color: rgba(255, 255, 255, .8);
	font-size: clamp(.98rem, 1.2vw, 1.1rem);
	margin: 0 auto 34px;
	max-width: 52ch;
	line-height: 1.68;
}

.gsc-statement .gsc-btn--primary {
	background: #fff;
	color: var(--burgundy-900);
	border-color: #fff;
}

.gsc-statement .gsc-btn--primary:hover {
	background: var(--burgundy-950);
	color: #fff;
	border-color: var(--burgundy-950);
}

/* --------------------------------------------------------------------------
   13. JOURNAL — brief §27, §28
   -------------------------------------------------------------------------- */

.gsc-journal {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
}

.gsc-art {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

/* These are <span> elements inside an <a>, so they need an explicit block
   display: an inline box ignores aspect-ratio, width and vertical padding. */
.gsc-art__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--surface-2);
	aspect-ratio: 16 / 10;
	width: 100%;
}

.gsc-art__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}

.gsc-art:hover .gsc-art__media img { transform: scale(1.04); }

.gsc-art__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(74, 7, 22, .68), transparent 58%);
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

.gsc-art:hover .gsc-art__media::after { opacity: 1; }

.gsc-art__arrow {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--burgundy-700);
	color: #fff;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.gsc-art:hover .gsc-art__arrow { opacity: 1; transform: none; }
.gsc-art__arrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.gsc-art__cat {
	display: block;
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--burgundy-300);
	font-weight: 600;
	margin: 0 0 var(--sp-2);
}

.gsc-art__title {
	font-size: clamp(1.02rem, 1.5vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	transition: transform var(--t-base) var(--ease);
}

.gsc-art:hover .gsc-art__title { transform: translateX(3px); }

.gsc-art__ex {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.62;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsc-journal__side {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 26px);
}

.gsc-journal__side .gsc-art { flex-direction: row; gap: 15px; align-items: flex-start; }
.gsc-journal__side .gsc-art__media { flex: 0 0 110px; aspect-ratio: 1 / 1; }
.gsc-journal__side .gsc-art__ex { display: none; }
.gsc-journal__side .gsc-art__arrow { display: none; }

@media (max-width: 860px) {
	.gsc-journal { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. REVIEWS — brief §29 (real only, else CTA)
   -------------------------------------------------------------------------- */

.gsc-quote {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.gsc-quote__mark {
	font-size: 64px;
	line-height: 1;
	color: var(--burgundy-700);
	margin: 0 0 14px;
	font-weight: 700;
}

.gsc-quote__text {
	font-size: clamp(1.25rem, 3vw, 2.2rem);
	line-height: 1.32;
	letter-spacing: -.024em;
	font-weight: 500;
	margin: 0 0 26px;
}

.gsc-quote__who {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.gsc-quote__who b { color: var(--text); font-weight: 600; }

.gsc-stars {
	display: inline-flex;
	gap: 3px;
	margin-bottom: 18px;
	color: var(--gold);
}

.gsc-stars svg { width: 15px; height: 15px; fill: currentColor; }

/* --------------------------------------------------------------------------
   15. NEWSLETTER — brief §30
   -------------------------------------------------------------------------- */

.gsc-news {
	background: none;
	border-top: 0;
	padding: 0;
	margin: var(--sp-12) 0 var(--sp-12);
}

/* Same pattern as the statement block: one element is both the shell and the
   panel, so the rounded surface lives here. */
/* Same shell/panel overlap as the statement block — vertical padding only. */
.gsc-news__in {
	max-width: none;
	text-align: center;
	background: var(--burgundy-950);
	border-radius: var(--r-xl);
	padding-top: clamp(var(--sp-8), 6vw, 88px);
	padding-bottom: clamp(var(--sp-8), 6vw, 88px);
}

.gsc-news__in > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.gsc-news__form {
	display: flex;
	gap: 10px;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: center;
}

.gsc-news__form input[type="email"] {
	flex: 1 1 280px;
	min-width: 0;
	padding: 15px 18px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .19);
	border-radius: var(--r-btn);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.gsc-news__form input[type="email"]::placeholder { color: var(--muted); }

.gsc-news__form input[type="email"]:focus {
	outline: none;
	border-color: var(--burgundy-300);
	background: rgba(255, 255, 255, .08);
}

/* --------------------------------------------------------------------------
   16. FOOTER — brief §31
   ========================================================================== */

.gsc-ft {
	background: var(--bg);
	border-top: 1px solid var(--border);
	padding-top: clamp(50px, 6vw, 96px);
}

.gsc-ft__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.4fr);
	gap: clamp(30px, 5vw, 76px);
	padding-bottom: clamp(36px, 4vw, 62px);
	border-bottom: 1px solid var(--border);
}

.gsc-ft__logo {
	font-size: clamp(1.7rem, 4.4vw, 3.1rem);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-4);
	line-height: 1;
}

.gsc-ft__logo .gsc-logo__img {
	height: clamp(44px, 6vw, 62px);
	width: auto;
}

.gsc-ft__tag {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 22px;
}

.gsc-ft__addr {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.72;
	font-style: normal;
	margin: 0;
}

.gsc-ft__addr a:hover { color: var(--burgundy-300); }

.gsc-ft__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: clamp(20px, 3vw, 40px);
}

.gsc-ft__h {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text);
	font-weight: 700;
	margin: 0 0 16px;
}

.gsc-ft__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gsc-ft__list a { font-size: 13px; color: var(--muted); transition: color var(--t-base) var(--ease); }
.gsc-ft__list a:hover { color: var(--burgundy-300); }

.gsc-ft__bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0 30px;
	flex-wrap: wrap;
	font-size: 11.5px;
	color: var(--muted);
}

/* Payment marks */
.gsc-pay {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.gsc-pay__label {
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	flex: none;
}

.gsc-pay__list {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.gsc-pay__item {
	display: block;
	line-height: 0;
}

.gsc-pay__svg {
	display: block;
	width: 40px;
	height: 26px;
	border-radius: var(--r-sm);
	/* The tiles are white cards, so on a dark surface they need no treatment;
	   the slight dim keeps them from shouting louder than the footer text. */
	opacity: .92;
	transition: opacity var(--t-base) var(--ease);
}

.gsc-pay__item:hover .gsc-pay__svg { opacity: 1; }

@media (max-width: 560px) {
	.gsc-pay { justify-content: flex-start; }
	.gsc-pay__svg { width: 36px; height: 23.4px; }
}

.gsc-ft__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.gsc-ft__legal a:hover { color: var(--burgundy-300); }

@media (max-width: 820px) {
	.gsc-ft__top { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. TOAST — brief §25
   -------------------------------------------------------------------------- */

.gsc-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	background: var(--surface-2);
	border: 1px solid var(--burgundy-700);
	border-left-width: 3px;
	border-radius: var(--r-float);
	box-shadow: 0 22px 54px rgba(0, 0, 0, .58);
	font-size: 13.5px;
	transform: translateY(20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	max-width: min(340px, calc(100vw - 40px));
}

.gsc-toast.is-on { opacity: 1; transform: none; }

.gsc-toast svg { width: 17px; height: 17px; stroke: var(--burgundy-300); fill: none; stroke-width: 2; flex: none; }

@media (max-width: 560px) {
	.gsc-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* --------------------------------------------------------------------------
   18. SEARCH OVERLAY — brief §48
   -------------------------------------------------------------------------- */

.gsc-search {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(9, 7, 8, .97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 5vw, 70px) var(--sp-gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
}

.gsc-search.is-open { opacity: 1; visibility: visible; }

.gsc-search__in { width: 100%; max-width: 900px; margin: 0 auto; }

.gsc-search__form {
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 14px;
}

.gsc-search__form input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--text);
	font-size: clamp(1.3rem, 4vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -.028em;
	font-family: inherit;
	padding: 6px 0;
}

.gsc-search__form input:focus { outline: none; }
.gsc-search__form input::placeholder { color: rgba(185, 174, 177, .42); }

.gsc-search__hint {
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 16px 0 0;
}

.gsc-search__res {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 14px;
	overflow-y: auto;
	max-height: 56vh;
}

/* --------------------------------------------------------------------------
   19. EMPTY STATES — brief §58
   -------------------------------------------------------------------------- */

.gsc-empty {
	text-align: center;
	padding: clamp(40px, 6vw, 84px) 20px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-card);
}

.gsc-empty__title {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 600;
	margin: 0 0 10px;
}

.gsc-empty__text { color: var(--muted); margin: 0 0 22px; font-size: 14px; }

/* --------------------------------------------------------------------------
   20. CUSTOM CURSOR — brief §36 (desktop, pointer devices only)
   -------------------------------------------------------------------------- */

.gsc-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	pointer-events: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--burgundy-300);
	transform: translate(-50%, -50%);
	transition: width var(--t-base) var(--ease),
	            height var(--t-base) var(--ease),
	            background var(--t-base) var(--ease);
	mix-blend-mode: difference;
	display: none;
}

.gsc-cursor.is-lg {
	width: 56px;
	height: 56px;
	background: rgba(196, 106, 120, .17);
	border: 1px solid var(--burgundy-300);
}

.gsc-cursor__txt {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 8.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transition: opacity var(--t-fast) var(--ease);
}

.gsc-cursor.is-lg .gsc-cursor__txt { opacity: 1; }

@media (hover: hover) and (pointer: fine) and (min-width: 1081px) {
	.gsc-cursor { display: block; }
}

/* --------------------------------------------------------------------------
   21. LOADER — brief §35
   -------------------------------------------------------------------------- */

.gsc-loader {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: var(--bg);
	display: grid;
	place-items: center;
	transition: opacity .55s var(--ease), visibility .55s;
}

.gsc-loader.is-done { opacity: 0; visibility: hidden; }

.gsc-loader__in { text-align: center; width: min(220px, 60vw); }

.gsc-loader__logo {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-5);
	display: flex;
	justify-content: center;
}

.gsc-loader__logo .gsc-logo__img--mark {
	height: 72px;
	animation: gsc-pulse 1.6s var(--ease) infinite;
}

@keyframes gsc-pulse {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.gsc-loader__logo .gsc-logo__img--mark { animation: none; opacity: 1; }
}

.gsc-loader__bar { height: 1px; background: var(--border); position: relative; overflow: hidden; }

.gsc-loader__fill {
	position: absolute;
	inset: 0;
	background: var(--burgundy-600);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .32s var(--ease);
}