/* ==========================================================================
   GOSHOPCARA — MOTION SYSTEM
   100 effects across 9 groups. Vanilla CSS + JS, no animation library.

   Rules this file follows throughout:
   - Only transform / opacity / filter are animated (compositor-friendly).
   - Micro-interactions 150-300ms, reveals 400-800ms, scroll-driven by progress.
   - ease-out entering, ease-in leaving, spring for drag.
   - Nothing starts hidden unless JS is proven to run (html.js gate), so a
     script failure can never blank the page — the lesson from the reveal bug.
   - Every group is switched off under prefers-reduced-motion at the bottom.
   ========================================================================== */

:root {
	/* Durations */
	--m-instant: 90ms;
	--m-fast: 160ms;
	--m-base: 240ms;
	--m-slow: 340ms;
	--m-reveal: 620ms;
	--m-long: 900ms;

	/* Easing */
	--m-out: cubic-bezier(.22, .61, .36, 1);      /* entering */
	--m-in: cubic-bezier(.55, .06, .68, .19);     /* leaving */
	--m-inout: cubic-bezier(.65, .05, .36, 1);
	--m-spring: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot */
	--m-soft: cubic-bezier(.4, 0, .2, 1);

	/* Distances */
	--m-rise: 28px;
	--m-slide: 40px;
	--m-nudge: 4px;
}

/* ==========================================================================
   GROUP A — PAGE LOAD & ENTRANCE (A01-A10)
   ========================================================================== */

/* A01 loader bar fill — already in components; easing normalised here. */
.gsc-loader__fill { transition: transform var(--m-slow) var(--m-out); }

/* A02 loader mark breathe */
@keyframes m-breathe {
	0%, 100% { opacity: .5; transform: scale(.97); }
	50%      { opacity: 1; transform: scale(1); }
}
.gsc-loader__logo .gsc-logo__img--mark { animation: m-breathe 1.7s var(--m-soft) infinite; }

/* A03 loader curtain lift */
.gsc-loader.is-done {
	transform: translateY(-100%);
	transition: transform .62s var(--m-in), opacity .4s var(--m-in), visibility .62s;
}

/* A04-A07 hero entrance — staggered rise.
   Only the copy column starts hidden. The stage and the info card are driven
   by the rotation in hero.css, and hiding them here as well meant two systems
   owned the same opacity — with the hero left blank if the entrance class
   never arrived. */
html.js .gsc-hero__copy > * {
	opacity: 0;
	transform: translateY(var(--m-rise));
}

html.js body.is-ready .gsc-hero__copy > * {
	animation: m-rise-in var(--m-long) var(--m-out) forwards;
}

html.js body.is-ready .gsc-hero__copy > *:nth-child(1) { animation-delay: .06s; }
html.js body.is-ready .gsc-hero__copy > *:nth-child(2) { animation-delay: .14s; }
html.js body.is-ready .gsc-hero__copy > *:nth-child(3) { animation-delay: .22s; }
html.js body.is-ready .gsc-hero__copy > *:nth-child(4) { animation-delay: .30s; }

/* A08 hero stage settles in. It is visible from the first paint; this only
   adds movement, so a failure leaves a static hero rather than an empty one. */
html.js body.is-ready .gsc-hero__stage {
	animation: m-settle 1.05s var(--m-out) .12s both;
}

@keyframes m-settle {
	from { transform: scale(.96); }
	to   { transform: none; }
}

/* A10 announcement bar drops in */
html.js .gsc-ann { transform: translateY(-100%); }
html.js body.is-ready .gsc-ann { animation: m-drop-in var(--m-slow) var(--m-out) forwards; }

@keyframes m-rise-in { to { opacity: 1; transform: none; } }
@keyframes m-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes m-drop-in { to { transform: none; } }

/* ==========================================================================
   GROUP B — SCROLL REVEAL & PARALLAX (B01-B15)
   Variants are opt-in via data-rv="..."; the base .gsc-rv still works.
   ========================================================================== */

html.js [data-rv] { opacity: 0; will-change: opacity, transform; }
html.js [data-rv].is-in { opacity: 1; }

[data-rv] {
	transition: opacity var(--m-reveal) var(--m-out),
	            transform var(--m-reveal) var(--m-out),
	            filter var(--m-reveal) var(--m-out),
	            clip-path var(--m-reveal) var(--m-out);
}

/* B01 fade up */
html.js [data-rv="up"] { transform: translateY(var(--m-rise)); }
/* B02 fade down */
html.js [data-rv="down"] { transform: translateY(calc(var(--m-rise) * -1)); }
/* B03 slide from left */
html.js [data-rv="left"] { transform: translateX(calc(var(--m-slide) * -1)); }
/* B04 slide from right */
html.js [data-rv="right"] { transform: translateX(var(--m-slide)); }
/* B05 scale up */
html.js [data-rv="scale"] { transform: scale(.92); }
/* B06 scale down (settle) */
html.js [data-rv="settle"] { transform: scale(1.06); }
/* B07 blur focus-in */
html.js [data-rv="blur"] { filter: blur(11px); transform: translateY(14px); }
/* B08 rotate settle */
html.js [data-rv="tilt"] { transform: rotate(-2.4deg) translateY(20px); }
/* B09 wipe up (clip) */
html.js [data-rv="wipe"] { clip-path: inset(100% 0 0 0); opacity: 1; }
/* B10 wipe from left */
html.js [data-rv="wipe-x"] { clip-path: inset(0 100% 0 0); opacity: 1; }
/* B11 flip in X */
html.js [data-rv="flip"] { transform: perspective(900px) rotateX(-14deg); transform-origin: top center; }
/* B12 skew settle */
html.js [data-rv="skew"] { transform: skewY(3deg) translateY(22px); }

html.js [data-rv].is-in {
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}

/* B13 stagger children */
html.js [data-rv-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--m-reveal) var(--m-out), transform var(--m-reveal) var(--m-out); }
html.js [data-rv-stagger].is-in > * { opacity: 1; transform: none; }

/* B14 word-by-word headline mask */
html.js .m-words .m-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.js .m-words .m-word > span { display: inline-block; transform: translateY(105%); transition: transform .74s var(--m-out); }
html.js .m-words.is-in .m-word > span { transform: none; }

/* B15 scroll progress bar */
.m-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 895;
	background: transparent;
	pointer-events: none;
}

.m-progress__bar {
	height: 100%;
	width: 100%;
	background: var(--burgundy-700);
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

/* Parallax targets get their offset from JS via a custom property, so the
   style attribute is never rewritten and no layout is read per frame. */
[data-parallax] { transform: translate3d(0, var(--m-py, 0), 0); will-change: transform; }

/* ==========================================================================
   GROUP C — HOVER & FOCUS (C01-C15)
   ========================================================================== */

/* C01 link underline sweep */
.m-link {
	position: relative;
	display: inline-block;
}
.m-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--m-base) var(--m-out);
}
.m-link:hover::after,
.m-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* C02 arrow nudge (already used on buttons) */
.gsc-btn .gsc-arrow { transition: transform var(--m-base) var(--m-spring); }

/* C03 icon lift */
.m-lift { transition: transform var(--m-base) var(--m-out); }
.m-lift:hover { transform: translateY(-2px); }

/* C04 image zoom inside a frame */
.m-zoom { overflow: hidden; }
.m-zoom img { transition: transform var(--m-slow) var(--m-out); }
.m-zoom:hover img { transform: scale(1.05); }

/* C05 text colour crossfade — handled by the token system; timing unified */
.gsc-nav a,
.gsc-ft__list a { transition: color var(--m-base) var(--m-out); }

/* C06 card border glow pulse on focus-within */
.gsc-card:focus-within {
	border-color: var(--burgundy-700);
	box-shadow: 0 0 0 3px rgba(122, 16, 37, .16);
}

/* C07 button fill sweep */
.m-sweep { position: relative; overflow: hidden; z-index: 0; }
.m-sweep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--burgundy-600);
	transform: translateY(101%);
	transition: transform var(--m-base) var(--m-out);
}
.m-sweep:hover::before { transform: none; }

/* C08 shadow bloom */
.m-bloom { transition: box-shadow var(--m-slow) var(--m-out); }
.m-bloom:hover { box-shadow: 0 16px 40px rgba(122, 16, 37, .2); }

/* C09 magnetic pull — JS sets --m-mx/--m-my */
[data-magnetic] {
	transform: translate3d(var(--m-mx, 0), var(--m-my, 0), 0);
	transition: transform var(--m-base) var(--m-out);
}
[data-magnetic].is-pulling { transition: transform 80ms linear; }

/* C10 tilt on pointer — JS sets --m-rx/--m-ry */
[data-tilt] {
	transform: perspective(900px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg));
	transition: transform var(--m-slow) var(--m-out);
}
[data-tilt].is-tilting { transition: transform 90ms linear; }

/* C11 letter-spacing open */
.m-track { transition: letter-spacing var(--m-base) var(--m-out); }
.m-track:hover { letter-spacing: .26em; }

/* C12 badge pop on hover */
.gsc-card:hover .gsc-card__badge { animation: m-pop var(--m-slow) var(--m-spring); }
@keyframes m-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* C13 swap icon rotate */
.m-spin-hover svg { transition: transform var(--m-slow) var(--m-spring); }
.m-spin-hover:hover svg { transform: rotate(90deg); }

/* C14 focus ring grow (keyboard only) */
.gsc-body :focus-visible {
	outline: 2px solid var(--burgundy-700);
	outline-offset: 3px;
	animation: m-ring var(--m-base) var(--m-out);
}
@keyframes m-ring { from { outline-offset: 8px; } to { outline-offset: 3px; } }

/* C15 rail arrow slide */
.gsc-rail__btn svg { transition: transform var(--m-base) var(--m-out); }
.gsc-rail__btn:hover:not(:disabled) svg { transform: translateX(2px); }
.gsc-rail__btn[data-rail="prev"]:hover:not(:disabled) svg { transform: translateX(-2px); }

/* ==========================================================================
   GROUP D — CLICK, TAP & PRESS (D01-D10)
   ========================================================================== */

/* D01 press depress */
.gsc-btn:active,
.gsc-icon:active,
.gsc-matrix__cell:active { transform: scale(.985); }

/* D02 ripple — JS injects the span */
.m-ripple { position: relative; overflow: hidden; }
.m-ripple > .m-ripple__wave {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: .22;
	transform: scale(0);
	animation: m-ripple .58s var(--m-out) forwards;
	pointer-events: none;
}
@keyframes m-ripple { to { transform: scale(2.6); opacity: 0; } }

/* D03 add-to-bag success check */
.gsc-btn.is-done { animation: m-pop var(--m-slow) var(--m-spring); }

/* D04 cart badge bump */
.gsc-badge.is-bump { animation: m-bump .5s var(--m-spring); }
@keyframes m-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.36); }
	100% { transform: scale(1); }
}

/* D05 wishlist heart beat */
.gsc-card__wish.is-on svg { animation: m-beat .46s var(--m-spring); }
@keyframes m-beat {
	0% { transform: scale(1); }
	30% { transform: scale(1.32); }
	55% { transform: scale(.94); }
	100% { transform: scale(1); }
}

/* D06 fly-to-cart ghost */
.m-fly {
	position: fixed;
	z-index: 1100;
	pointer-events: none;
	border-radius: var(--r-sm);
	object-fit: contain;
	background: #fff;
	transition: transform .72s cubic-bezier(.5, -.2, .7, 1), opacity .72s var(--m-in);
	will-change: transform, opacity;
}

/* D07 shake on error */
.m-shake { animation: m-shake .42s var(--m-soft); }
@keyframes m-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

/* D08 disabled nudge */
.gsc-btn.is-disabled:active { animation: m-shake .32s var(--m-soft); }

/* D09 copy confirmation */
.m-copied::after {
	content: attr(data-copied-label);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%) translateY(4px);
	background: var(--burgundy-700);
	color: #fff;
	font-size: 10px;
	padding: 4px 8px;
	border-radius: var(--r-sm);
	white-space: nowrap;
	opacity: 0;
	animation: m-tip 1.5s var(--m-out);
	pointer-events: none;
}
@keyframes m-tip {
	12%, 78% { opacity: 1; transform: translateX(-50%) translateY(0); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-3px); }
}

/* D10 accordion open/close */
.m-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--m-slow) var(--m-out);
}
.m-acc__panel > div { overflow: hidden; }
.m-acc.is-open .m-acc__panel { grid-template-rows: 1fr; }
.m-acc__icon { transition: transform var(--m-slow) var(--m-spring); }
.m-acc.is-open .m-acc__icon { transform: rotate(45deg); }

/* ==========================================================================
   GROUP E — FORM & INPUT (E01-E10)
   ========================================================================== */

/* E01 input focus ring */
.gsc-news__form input[type="email"],
.woocommerce form .form-row input.input-text {
	transition: border-color var(--m-base) var(--m-out),
	            box-shadow var(--m-base) var(--m-out),
	            background var(--m-base) var(--m-out);
}

.gsc-news__form input[type="email"]:focus,
.woocommerce form .form-row input.input-text:focus {
	box-shadow: 0 0 0 3px rgba(196, 106, 120, .22);
}

/* E02 floating label */
.m-field { position: relative; }
.m-field__label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--muted);
	pointer-events: none;
	transition: transform var(--m-base) var(--m-out),
	            font-size var(--m-base) var(--m-out),
	            color var(--m-base) var(--m-out);
	background: var(--bg);
	padding: 0 4px;
}
.m-field.is-filled .m-field__label,
.m-field__input:focus + .m-field__label {
	transform: translateY(-158%) scale(.88);
	color: var(--burgundy-700);
	font-size: 12px;
}

/* E03 submit → loading → done */
.m-submit.is-sending { pointer-events: none; }
.m-submit.is-sending .m-submit__text { opacity: 0; }
.m-submit__spin {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: m-spin .62s linear infinite;
}
.m-submit.is-sending .m-submit__spin { opacity: 1; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* E04 valid tick */
.m-field.is-valid .m-field__mark { opacity: 1; transform: scale(1); }
.m-field__mark {
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-spring);
	color: var(--burgundy-700);
}

/* E05 invalid shake + red edge */
.m-field.is-invalid .m-field__input {
	border-color: #B3261E;
	animation: m-shake .4s var(--m-soft);
}

/* E06 character counter pulse */
.m-count.is-near { color: var(--burgundy-700); animation: m-pop var(--m-base) var(--m-spring); }

/* E07 select chevron flip */
.m-select__icon { transition: transform var(--m-base) var(--m-out); }
.m-select.is-open .m-select__icon { transform: rotate(180deg); }

/* E08 quantity step */
.m-qty__value { transition: transform var(--m-fast) var(--m-out); }
.m-qty.is-step .m-qty__value { transform: translateY(-3px); }

/* E09 search field expand */
.m-search-inline input {
	width: 42px;
	transition: width var(--m-slow) var(--m-out);
}
.m-search-inline input:focus { width: min(260px, 52vw); }

/* E10 newsletter success collapse */
.gsc-news__form.is-sent { animation: m-sent .6s var(--m-out) forwards; }
@keyframes m-sent { to { opacity: 0; transform: translateY(-10px); } }

/* ==========================================================================
   GROUP F — NAVIGATION & MENU (F01-F10)
   ========================================================================== */

/* F01 header shrink — already in components, easing unified */
.gsc-hd, .gsc-hd__in, .gsc-logo__img { transition-timing-function: var(--m-out); }

/* F02 header hide on scroll down, show on scroll up */
.gsc-hd { transition: transform var(--m-slow) var(--m-out), background var(--m-slow) var(--m-out), border-color var(--m-slow) var(--m-out); }
.gsc-hd.is-hidden { transform: translateY(-100%); }

/* F03 mobile drawer slide (already) + F04 item stagger (already) */

/* F05 drawer backdrop fade */
.m-scrim {
	position: fixed;
	inset: 0;
	z-index: 950;
	background: rgba(9, 7, 8, .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--m-slow) var(--m-out), visibility var(--m-slow);
}
.m-scrim.is-on { opacity: 1; visibility: visible; }

/* F06 search overlay scale-in */
.gsc-search__in {
	transform: translateY(-14px) scale(.985);
	opacity: 0;
	transition: transform var(--m-slow) var(--m-out), opacity var(--m-slow) var(--m-out);
}
.gsc-search.is-open .gsc-search__in { transform: none; opacity: 1; }

/* F07 search results stagger */
.gsc-search__res > * {
	opacity: 0;
	transform: translateY(14px);
	animation: m-rise-in var(--m-base) var(--m-out) forwards;
}
.gsc-search__res > *:nth-child(1) { animation-delay: .02s; }
.gsc-search__res > *:nth-child(2) { animation-delay: .05s; }
.gsc-search__res > *:nth-child(3) { animation-delay: .08s; }
.gsc-search__res > *:nth-child(4) { animation-delay: .11s; }
.gsc-search__res > *:nth-child(n+5) { animation-delay: .14s; }

/* F08 active nav indicator */
.gsc-nav .current-menu-item > a::after { transform: scaleX(1); }

/* F09 back-to-top */
.m-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 890;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: var(--bg);
	color: var(--text);
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px) scale(.9);
	visibility: hidden;
	transition: opacity var(--m-base) var(--m-out),
	            transform var(--m-base) var(--m-spring),
	            visibility var(--m-base),
	            background var(--m-base) var(--m-out);
	padding: 0;
}
.m-top.is-on { opacity: 1; transform: none; visibility: visible; }
.m-top:hover { background: var(--burgundy-700); border-color: var(--burgundy-700); color: #fff; }
.m-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* F10 breadcrumb trail */
.m-crumb > * { transition: color var(--m-base) var(--m-out); }

/* ==========================================================================
   GROUP G — CURSOR & POINTER (G01-G08)
   WARNING: a custom cursor can obscure controls and confuse assistive tech.
   It is desktop-only, decorative (aria-hidden) and never replaces the real
   pointer on interactive elements — the native cursor stays visible.
   ========================================================================== */

.gsc-cursor { transition: width var(--m-base) var(--m-out), height var(--m-base) var(--m-out), background var(--m-base) var(--m-out), opacity var(--m-base) var(--m-out); }
.gsc-cursor.is-hidden { opacity: 0; }

/* G03 cursor grows on drag rails */
.gsc-cursor.is-drag { width: 44px; height: 44px; background: rgba(122, 16, 37, .14); }

/* G05 spotlight follow — JS sets --m-cx/--m-cy */
.m-spot { position: relative; isolation: isolate; }
.m-spot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--m-slow) var(--m-out);
	background: radial-gradient(220px circle at var(--m-cx, 50%) var(--m-cy, 50%), rgba(122, 16, 37, .10), transparent 70%);
}
.m-spot:hover::before { opacity: 1; }

/* ==========================================================================
   GROUP H — FEEDBACK, LOADING & STATE (H01-H12)
   ========================================================================== */

/* H01 toast slide (already) — easing unified */
.gsc-toast { transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-spring); }

/* H02 skeleton shimmer */
.m-skel {
	position: relative;
	overflow: hidden;
	background: var(--surface-2);
	border-radius: var(--r-sm);
}
.m-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
	animation: m-shimmer 1.35s infinite;
}
@keyframes m-shimmer { to { transform: translateX(100%); } }

/* H03 inline spinner */
.m-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid var(--border-strong);
	border-top-color: var(--burgundy-700);
	border-radius: 50%;
	animation: m-spin .62s linear infinite;
	display: inline-block;
}

/* H04 progress bar indeterminate */
.m-bar { height: 2px; background: var(--border); overflow: hidden; }
.m-bar::after {
	content: "";
	display: block;
	height: 100%;
	width: 36%;
	background: var(--burgundy-700);
	animation: m-indet 1.2s var(--m-inout) infinite;
}
@keyframes m-indet {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(380%); }
}

/* H05 image lazy fade-in */
img.m-img { opacity: 0; transition: opacity var(--m-slow) var(--m-out); }
img.m-img.is-loaded { opacity: 1; }

/* H06 price change flash */
.m-flash { animation: m-flash .8s var(--m-out); }
@keyframes m-flash {
	0% { background: rgba(122, 16, 37, .18); }
	100% { background: transparent; }
}

/* H07 stock pulse */
.m-pulse { position: relative; }
.m-pulse::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--burgundy-700);
	animation: m-blip 1.9s var(--m-out) infinite;
}
@keyframes m-blip {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.5); opacity: .5; }
}

/* H08 empty-state float */
.gsc-empty { animation: m-float 5s var(--m-soft) infinite; }
@keyframes m-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* H09 count-up — JS writes the number */
.m-num { font-variant-numeric: tabular-nums; }

/* H10 section divider draw */
.gsc-rule {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--m-long) var(--m-out);
}
.gsc-rule.is-in { transform: scaleX(1); }

/* H11 offline banner */
.m-offline {
	position: fixed;
	left: 50%;
	top: 12px;
	transform: translate(-50%, -140%);
	z-index: 1300;
	background: var(--burgundy-800);
	color: #fff;
	padding: 9px 18px;
	border-radius: var(--r-md);
	font-size: 12.5px;
	transition: transform var(--m-slow) var(--m-spring);
}
.m-offline.is-on { transform: translate(-50%, 0); }

/* H12 tab switch fade */
.m-tab__panel[hidden] { display: none; }
.m-tab__panel { animation: m-rise-in var(--m-base) var(--m-out); }

/* ==========================================================================
   GROUP I — MOBILE & TOUCH (I01-I10)
   ========================================================================== */

/* I01 touch feedback */
@media (hover: none) {
	.gsc-card:active,
	.gsc-matrix__cell:active { transform: scale(.99); transition: transform var(--m-instant) var(--m-out); }
}

/* I02 rail momentum hint */
.gsc-rail__track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }

/* I03 swipe hint on first view */
.m-swipe-hint { animation: m-swipe 2.4s var(--m-out) 1s 2; }
@keyframes m-swipe {
	0%, 100% { transform: translateX(0); }
	40% { transform: translateX(-14px); }
}

/* I04 pull-to-refresh style drag on drawer */
.gsc-mob { transition: transform .5s var(--m-out); }
.gsc-mob.is-dragging { transition: none; }

/* I05 bottom sheet */
.m-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 980;
	background: var(--surface);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	transform: translateY(100%);
	transition: transform var(--m-slow) var(--m-out);
	padding: var(--sp-5);
}
.m-sheet.is-on { transform: none; }
.m-sheet__grip {
	width: 38px;
	height: 4px;
	border-radius: 2px;
	background: var(--border-strong);
	margin: 0 auto var(--sp-4);
}

/* I06 tap highlight removal (we draw our own) */
.gsc-body a, .gsc-body button { -webkit-tap-highlight-color: transparent; }

/* I07 sticky add-to-bag on product pages */
.m-sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 870;
	background: var(--bg);
	border-top: 1px solid var(--border);
	padding: var(--sp-3) var(--sp-4);
	transform: translateY(100%);
	transition: transform var(--m-slow) var(--m-out);
}
.m-sticky-buy.is-on { transform: none; }

/* I08 long-press feedback */
.m-press.is-holding { transform: scale(.97); transition: transform .4s var(--m-out); }

/* I09 orientation reflow damping */
.m-reflow { transition: none !important; }

/* I10 reduced data / save-data respect */
@media (prefers-reduced-data: reduce) {
	.m-skel::after, .m-bar::after { animation: none; }
}

/* ==========================================================================
   REDUCED MOTION — the whole system collapses to instant, visible states.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	html.js [data-rv],
	html.js [data-rv-stagger] > *,
	html.js .gsc-hero__copy > *,
	html.js .m-words .m-word > span,
	html.js .gsc-search__res > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}

	html.js .gsc-ann { transform: none !important; }
	.gsc-hd.is-hidden { transform: none !important; }
	.m-progress { display: none; }
}