/* =========================================================================
   GlobeMarket design system (Figma "GlobeMarket-E-Commerce", gm- tokens).
   Site-wide: tokens, base type, header, footer and shared components.
   Page sections live in their own files (gm-landing.css, ...).
   ========================================================================= */
:root {
	/* Colour */
	--gm-color-action-primary-default: #ff7a00;
	--gm-color-action-primary-text:    #0a0a0a;
	--gm-color-action-secondary-default: #0d1b2a;
	--gm-color-action-secondary-text:  #ffffff;
	--gm-color-action-disabled-bg:     #e8ebed;
	--gm-color-action-disabled-text:   #80858a;
	--gm-color-bg-brand:          #ff7a00;
	--gm-color-bg-brand-subtle:   #fff4e8;
	--gm-color-bg-inverse:        #0d1b2a;
	--gm-color-bg-surface:        #ffffff;
	--gm-color-bg-raised:         #ffffff;
	--gm-color-bg-subtle:         #f5f7f8;
	--gm-color-bg-disabled:       #e8ebed;
	--gm-color-bg-success-subtle: #edf6e6;
	--gm-color-bg-danger:         #d92d20;
	--gm-color-text-primary:   #0a0a0a;
	--gm-color-text-secondary: #454a4f;
	--gm-color-text-muted:     #62676c;
	--gm-color-text-disabled:  #80858a;
	--gm-color-text-inverse:   #ffffff;
	--gm-color-text-on-brand:  #0a0a0a;
	--gm-color-text-danger:    #9b1c1c;
	--gm-color-icon-primary:   #0a0a0a;
	--gm-color-icon-secondary: #62676c;
	--gm-color-border-default: #d5d9dc;
	--gm-color-border-strong:  #a6a9ad;
	--gm-color-border-focus:   #0858ce;
	--gm-color-border-danger:  #d92d20;
	/* Spacing */
	--gm-spacing-2xs: 2px;
	--gm-spacing-xs:  4px;
	--gm-spacing-sm:  8px;
	--gm-spacing-md:  12px;
	--gm-spacing-lg:  16px;
	--gm-spacing-xl:  20px;
	--gm-spacing-2xl: 24px;
	/* Radius */
	--gm-radius-xs:   4px;
	--gm-radius-sm:   8px;
	--gm-radius-md:   12px;
	--gm-radius-lg:   16px;
	--gm-radius-full: 999px;
	/* Size */
	--gm-size-touch-min:  44px;
	--gm-size-control-lg: 48px;
	--gm-size-control-xl: 56px;
	/* Effects */
	--gm-shadow-card: 0 2px 4px rgba(17, 15, 21, .05);
	--gm-focus-ring:  0 0 0 3px rgba(8, 88, 206, .32);
	/* Type */
	--gm-font-sans:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gm-font-accent: "Merienda", "Manrope", cursive;
	/* Layout: a 1320 content column inside a 1440 frame (60px gutters). */
	--gm-container: 1320px;
	--gm-gutter:    60px;
}
@media (max-width: 1200px) { :root { --gm-gutter: 32px; } }
@media (max-width: 768px)  { :root { --gm-gutter: 16px; } }

/* ---------- Base ---------- */
body {
	font-family: var(--gm-font-sans);
	color: var(--gm-color-text-primary);
	background: var(--gm-color-bg-subtle);
}
.gm-container {
	width: 100%;
	max-width: calc(var(--gm-container) + 2 * var(--gm-gutter));
	margin: 0 auto;
	padding: 0 var(--gm-gutter);
}
.gm-h2 {
	margin: 0;
	font-family: var(--gm-font-sans);
	font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.4px;
	color: var(--gm-color-text-primary);
}
@media (max-width: 768px) { .gm-h2 { font-size: 24px; line-height: 32px; letter-spacing: -.2px; } }
.gm-icon { display: block; flex: none; max-width: none; }

/* Focus (Figma Focus/Default) */
.gm-header a:focus-visible, .gm-header button:focus-visible,
.gm-footer a:focus-visible, .gm-main a:focus-visible, .gm-main button:focus-visible, .gm-main summary:focus-visible {
	outline: none;
	box-shadow: var(--gm-focus-ring);
	border-radius: var(--gm-radius-sm);
}

/* ---------- Button (Figma Button, 65:123) ---------- */
.gm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--gm-spacing-sm);
	height: var(--gm-size-control-lg);
	padding: 0 var(--gm-spacing-lg);
	border: 0; border-radius: var(--gm-radius-md);
	font-family: var(--gm-font-sans); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .1px;
	white-space: nowrap; text-decoration: none; cursor: pointer;
}
.gm-btn--primary { background: var(--gm-color-action-primary-default); color: var(--gm-color-action-primary-text); }
.gm-btn--primary:hover { background: #f06f00; color: var(--gm-color-action-primary-text); }
.gm-btn--primary:active { background: #e06800; transform: translateY(1px); }
.gm-btn--secondary { background: var(--gm-color-action-secondary-default); color: var(--gm-color-action-secondary-text); }
.gm-btn--secondary:hover { background: #172a3d; color: var(--gm-color-action-secondary-text); }
.gm-btn[disabled], .gm-btn.is-disabled { background: var(--gm-color-action-disabled-bg); color: var(--gm-color-action-disabled-text); cursor: not-allowed; }

/* Round navy carousel arrows */
.gm-navbtns { display: flex; align-items: center; gap: 24px; flex: none; }
.gm-navbtn {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0; border: 0;
	border-radius: var(--gm-radius-full);
	background: var(--gm-color-bg-inverse); cursor: pointer;
}
.gm-navbtn:hover { background: #172a3d; }
.gm-navbtn[disabled] { cursor: default; }
.gm-navbtn--next .gm-icon { transform: scaleX(-1); }

/* Closed off-canvas drawers (mobile menu, cart) must not cast a shadow onto the page edges. */
.egs-drawer:not(.is-open), .egs-cartdrawer:not(.is-open) { box-shadow: none; }

/* While the compare bar is pinned to the bottom of the screen, extend the footer so its last row can scroll clear of it. */
.egs-has-compbar .gm-footer { padding-bottom: calc(40px + var(--egs-compbar-space, 124px)); }

/* ---------- Announcement bar ---------- */
.gm-announce {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 16px 10px;
	background: var(--gm-color-bg-subtle);
	font-size: 14px; line-height: 16px; letter-spacing: 0;
}
.gm-announce__brand { font-weight: 500; color: var(--gm-color-text-secondary); white-space: nowrap; }
.gm-announce__link {
	font-weight: 600; color: var(--gm-color-text-on-brand); white-space: nowrap;
	text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font;
}
.gm-announce__link:hover { color: var(--gm-color-text-on-brand); }

/* ---------- Header ---------- */
.gm-header {
	position: relative; z-index: 100;
	background: var(--gm-color-bg-surface);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .02));
}
.gm-header__bar {
	display: flex; align-items: center; justify-content: center; gap: 32px;
	height: 110px; padding: 22px var(--gm-gutter);
}
.gm-header__left { display: flex; align-items: center; gap: 43px; flex: none; }
.gm-header__right { display: flex; align-items: center; gap: 16px; flex: none; }

.gm-logo { display: flex; align-items: center; gap: 9.074px; flex: none; text-decoration: none; }
.gm-logo__icon { width: 28.954px; height: 30.737px; }
.gm-logo__text { position: relative; width: 192.472px; height: 21.787px; overflow: hidden; flex: none; }
.gm-logo__text img { position: absolute; display: block; max-width: none; height: auto; }
.gm-logo__text .gm-logo__g2 { top: -.02%; right: 54.69%; bottom: -.03%; left: 0; width: 45.31%; height: 100.05%; }
.gm-logo__text .gm-logo__g1 { top: 1.7%; right: .02%; bottom: 0; left: 46.51%; width: 53.47%; height: 98.3%; }

.gm-search {
	position: relative; display: flex; align-items: center; gap: 10px;
	width: 578px; flex: none; height: 66px; padding: 18px;
	background: var(--gm-color-bg-surface);
	border: 1px solid var(--gm-color-border-default); border-radius: var(--gm-radius-lg);
	margin: 0;
}
.gm-search__icon { width: 24px; height: 24px; }
.gm-search__input {
	flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 144px 0 0; text-overflow: ellipsis;
	border: 0; outline: 0; background: transparent; box-shadow: none;
	font-family: var(--gm-font-sans); font-size: 18px; line-height: 28px; font-weight: 400;
	color: var(--gm-color-text-primary);
}
/* The whole search box shows the focus ring (.gm-search:focus-within), never the inner field. */
.gm-search__input:focus, .gm-search__input:focus-visible { outline: none; box-shadow: none; }
.gm-search__input::placeholder { color: var(--gm-color-text-secondary); opacity: 1; }
.gm-search__input::-webkit-search-cancel-button { display: none; }
.gm-search__btn {
	position: absolute; top: 10px; right: 10px;
	width: 134px; height: var(--gm-size-touch-min); padding: 0 var(--gm-spacing-md);
	border: 0; border-radius: var(--gm-radius-md);
	background: var(--gm-color-action-primary-default); color: var(--gm-color-action-primary-text);
	font-family: var(--gm-font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px;
	cursor: pointer;
}
.gm-search__btn:hover { background: #f06f00; }

.gm-help { width: 85px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--gm-color-text-secondary); white-space: nowrap; }
.gm-help:hover { color: var(--gm-color-text-primary); }

.gm-account { display: flex; align-items: center; width: 183px; flex: none; text-decoration: none; }
.gm-account__ic { position: relative; width: 44px; height: 44px; flex: none; }
.gm-account__ic img { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; }
.gm-account__body { display: flex; align-items: center; gap: 4px; }
.gm-account__text { display: flex; flex-direction: column; width: 108px; }
.gm-account__sub { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .4px; color: var(--gm-color-text-muted); }
.gm-account__main { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--gm-color-text-on-brand); white-space: nowrap; }
.gm-account__chev { width: 24px; height: 24px; }

.gm-actions { display: flex; align-items: center; gap: 8px; }
.gm-action { position: relative; display: block; width: 44px; height: 44px; flex: none; }
.gm-action > .gm-icon { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; }
.gm-action__count {
	position: absolute; top: 4px; right: 2px;
	min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: var(--gm-radius-full);
	background: var(--gm-color-action-primary-default); color: var(--gm-color-action-primary-text);
	font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
}
.gm-action__count[data-count="0"], .gm-action__count:empty, .gm-action__count.egs-action__pill--hide { display: none; }

.gm-burger { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: none; color: var(--gm-color-icon-primary); flex: none; }

/* Signed-in account (Figma "Account / active-user", 158:7240) */
button.gm-account { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.gm-account--user .gm-account__ic { border-radius: var(--gm-radius-sm); }
.gm-avatar {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 10px;
	border-radius: var(--gm-radius-full);
	background: var(--gm-color-bg-brand);
	font-size: 20px; line-height: 1; font-weight: 800; color: #ffcfa6;
	text-box: trim-both cap alphabetic;
}
.gm-account__text--user { width: 86px; }
.gm-account__text--user .gm-account__main { overflow: hidden; text-overflow: ellipsis; }
.gm-account[aria-expanded="true"] .gm-account__chev { transform: rotate(180deg); }

/* Account menu (Figma "more/Menu", 559:9444) over a frosted overlay (559:9464) */
.gm-account-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(13, 27, 42, .28);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	opacity: 0; transition: opacity var(--gm-dur, .25s) ease;
}
.gm-account-overlay.is-open { opacity: 1; }
.gm-account-menu {
	position: fixed; z-index: 1001; top: 130px; left: 942px;
	width: 259px; overflow: hidden;
	background: var(--gm-color-bg-surface); border-radius: var(--gm-radius-md);
	opacity: 0; transform: translateY(-6px);
	transition: opacity var(--gm-dur, .25s) ease, transform var(--gm-dur, .25s) var(--gm-ease, ease);
}
.gm-account-menu.is-open { opacity: 1; transform: none; }
.gm-account-overlay[hidden], .gm-account-menu[hidden] { display: none; }
.gm-account-menu ul { margin: 0; padding: 0; list-style: none; }
.gm-account-menu__item {
	display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px;
	font-size: 16px; line-height: 24px; font-weight: 600; color: #000; text-decoration: none;
	transition: background-color var(--gm-dur-fast, .15s) ease, color var(--gm-dur-fast, .15s) ease;
}
.gm-account-menu__ic {
	width: 24px; height: 24px; flex: none; background: #1c1b1f;
	-webkit-mask: var(--gm-ic) center / 24px 24px no-repeat; mask: var(--gm-ic) center / 24px 24px no-repeat;
	transition: background-color var(--gm-dur-fast, .15s) ease;
}
.gm-account-menu__item:hover, .gm-account-menu__item:focus-visible, .gm-account-menu__item.is-current {
	background: rgba(255, 122, 0, .2); color: #b45300; outline: none;
}
.gm-account-menu__item:hover .gm-account-menu__ic, .gm-account-menu__item:focus-visible .gm-account-menu__ic, .gm-account-menu__item.is-current .gm-account-menu__ic { background: #b45300; }
html.gm-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gm-account-overlay, .gm-account-menu { transition: none; } }

/* ---------- Log out dialog (Figma 559:18223) ----------
   A dim scrim over the frosted page keeps the account menu visible behind. */
.gm-logout-scrim { position: fixed; inset: 0; z-index: 1002; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity var(--gm-dur, .25s) ease; }
.gm-logout-scrim.is-open { opacity: 1; }
.gm-logout {
	position: fixed; left: 50%; top: 50%; z-index: 1003;
	display: flex; flex-direction: column; gap: 20px;
	width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; padding: 28px;
	background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
	opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98);
	transition: opacity var(--gm-dur, .25s) ease, transform var(--gm-dur, .25s) var(--gm-ease, ease);
}
.gm-logout.is-open { opacity: 1; transform: translate(-50%, -50%); }
.gm-logout[hidden], .gm-logout-scrim[hidden] { display: none; }
.gm-logout__top { display: flex; align-items: flex-start; gap: 12px; }
.gm-logout__title { flex: 1; min-width: 0; margin: 0; font-size: 20px; line-height: normal; font-weight: 700; letter-spacing: 0; color: #000; }
.gm-logout__close { position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.gm-logout__close::before { content: ""; position: absolute; inset: -12px; border-radius: 999px; transition: background-color var(--gm-dur-fast, .15s) ease; }
.gm-logout__close:hover::before { background: var(--gm-color-bg-subtle); }
.gm-logout__close img { position: relative; display: block; }
.gm-logout__close:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); border-radius: 4px; }
.gm-logout__who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #f5f7f8; border-radius: 10px; }
.gm-logout__avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 7px; background: #ff7a00; font-size: 16px; line-height: normal; font-weight: 700; color: #2f3137; }
.gm-logout__id { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; font-size: 14px; line-height: normal; white-space: nowrap; }
.gm-logout__name { overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #000; }
.gm-logout__email { overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #62676c; }
.gm-logout__text { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: #62676c; }
.gm-logout__actions { display: flex; flex-direction: column; gap: 10px; }
.gm-logout__btn { width: 100%; height: 48px; font-size: 16px; line-height: 24px; font-weight: 600; }
.gm-btn--secondary.gm-logout__btn { border: 1px solid var(--gm-color-border-strong); }
@media (prefers-reduced-motion: reduce) { .gm-logout, .gm-logout-scrim { transition: none; } }

/* ---------- Live search panel (Figma 559:12553) ----------
   While open, the page sits under the same frosted glass as the account menu.
   The header is lifted above that overlay and frosts itself, except the search
   box and its panel. */
html.gm-search-open { overflow: hidden; }
html.gm-search-open .gm-header { z-index: 1002; }
.gm-header::after {
	content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
	background: rgba(13, 27, 42, .28);
	-webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
	opacity: 0; visibility: hidden; transition: opacity var(--gm-dur, .25s) ease, visibility 0s linear var(--gm-dur, .25s);
}
html.gm-search-open .gm-header::after { opacity: 1; visibility: visible; transition: opacity var(--gm-dur, .25s) ease; }
html.gm-search-open .gm-search { z-index: 6; }
.gm-search-overlay { cursor: pointer; }

.gm-spanel {
	position: absolute; left: -1px; right: -1px; top: calc(100% + 17px); z-index: 7; /* 16px below the bar, outside its 1px border */
	max-height: calc(100vh - 200px); overflow: auto; overscroll-behavior: contain;
	background: var(--gm-color-bg-surface); border-radius: var(--gm-radius-md);
	box-shadow: 0 12px 32px rgba(13, 27, 42, .12);
	cursor: default; text-align: left;
	opacity: 0; transform: translateY(-6px); transition: opacity var(--gm-dur, .25s) ease, transform var(--gm-dur, .25s) var(--gm-ease, ease);
}
.gm-spanel.is-open { opacity: 1; transform: none; }
.gm-spanel[hidden], .gm-spanel [hidden] { display: none !important; }
.gm-spanel__sec { display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.gm-spanel__sec--results { padding: 42px 24px 24px; }
.gm-spanel__label { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--gm-color-text-secondary); }
.gm-spanel__none { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--gm-color-text-primary); }
.gm-spanel__rows { margin: 0; padding: 0; list-style: none; }
.gm-spanel__row {
	display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: var(--gm-radius-sm);
	font-size: 16px; line-height: 24px; font-weight: 500; color: var(--gm-color-text-on-brand); text-decoration: none;
	transition: background-color var(--gm-dur-fast, .15s) ease;
}
.gm-spanel__row span { flex: 1; min-width: 0; }
.gm-spanel__row img { flex: none; transition: transform var(--gm-dur, .25s) var(--gm-ease, ease); }
.gm-spanel__row:hover, .gm-spanel__row.is-active, .gm-spanel__row:focus-visible { background: var(--gm-color-bg-subtle); color: var(--gm-color-text-on-brand); outline: none; }
.gm-spanel__row:hover img, .gm-spanel__row.is-active img { transform: translateX(3px); }

/* Loading rows (559:12624) */
.gm-spanel__skel { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px; }
.gm-spanel__skel span { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #f5f7f8 0%, #eceff1 50%, #f5f7f8 100%) 0 0 / 200% 100%; animation: gm-skel 1.2s linear infinite; }
.gm-spanel__skel span + span { width: 256px; max-width: 60%; height: 8px; }
@keyframes gm-skel { to { background-position: -200% 0; } }

/* Best match cards (559:12583) */
.gm-sres-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-sres {
	display: flex; align-items: center; min-height: 166px; overflow: hidden;
	background: var(--gm-color-bg-subtle); border-radius: var(--gm-radius-xs);
	color: inherit; text-decoration: none; transition: background-color var(--gm-dur-fast, .15s) ease, box-shadow var(--gm-dur, .25s) ease;
}
.gm-sres:hover, .gm-sres.is-active, .gm-sres:focus-visible { background: #eef1f3; outline: none; box-shadow: inset 0 0 0 1px var(--gm-color-border-default); }
.gm-sres__media { position: relative; width: 146px; height: 166px; flex: none; }
.gm-sres__media img { position: absolute; left: 10px; top: 8px; width: 120.85px; height: 150px; max-width: none; object-fit: cover; transition: transform .4s var(--gm-ease, ease); }
.gm-sres:hover .gm-sres__media img { transform: scale(1.04); }
.gm-sres__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 0 18px 24px; align-self: center; padding-top: 17px; }
.gm-sres__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--gm-color-text-primary); }
.gm-sres__price { display: flex; flex-direction: column; }
.gm-sres__label { font-size: 12px; line-height: 16px; color: var(--gm-color-text-muted); }
.gm-sres__amount { display: flex; align-items: flex-start; color: var(--gm-color-text-primary); }
.gm-sres__cur { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .8px; }
.gm-sres__num { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -.2px; }
.gm-sres__was { display: flex; gap: 4px; min-height: 16px; font-size: 12px; line-height: 16px; color: var(--gm-color-text-muted); }

/* "See all results" (559:12617) */
.gm-spanel__all {
	display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 14px 20px;
	background: var(--gm-color-bg-subtle); border-radius: 0 0 var(--gm-radius-sm) var(--gm-radius-sm);
	font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; color: var(--gm-color-text-on-brand); text-decoration: none;
	transition: background-color var(--gm-dur-fast, .15s) ease;
}
.gm-spanel__all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-spanel__all:hover, .gm-spanel__all.is-active, .gm-spanel__all:focus-visible { background: #eceff1; color: var(--gm-color-text-on-brand); outline: none; }
.gm-spanel__all img { flex: none; transition: transform var(--gm-dur, .25s) var(--gm-ease, ease); }
.gm-spanel__all:hover img, .gm-spanel__all.is-active img { transform: translateX(3px); }

@media (max-width: 1100px) {
	.gm-spanel { top: calc(100% + 10px); max-height: calc(100vh - 220px); }
}
@media (max-width: 600px) {
	.gm-spanel__sec { padding: 16px; gap: 16px; }
	.gm-spanel__sec--results { padding: 20px 16px 16px; }
	.gm-sres { min-height: 120px; }
	.gm-sres__media { width: 104px; height: 120px; }
	.gm-sres__media img { left: 8px; top: 6px; width: 88px; height: 108px; }
	.gm-sres__info { padding: 12px 12px 12px 4px; gap: 8px; }
	.gm-sres__title { font-size: 16px; line-height: 24px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.gm-spanel, .gm-header::after { transition: none; }
	.gm-spanel__skel span { animation: none; }
}

/* Category menu */
.gm-catnav {
	display: flex; align-items: center; justify-content: center;
	padding: 20px var(--gm-gutter);
	border-bottom: 1px solid var(--gm-color-border-default);
	background: var(--gm-color-bg-surface);
}
.gm-catnav__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; line-height: 24px; }
.gm-catnav__item { width: var(--gm-w, auto); }
.gm-catnav__item > a {
	display: flex; align-items: center; justify-content: center; padding: 10px;
	font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap;
	color: var(--gm-color-text-secondary);
}
.gm-catnav__label { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
/* Invisible semibold copy reserves the hover width, so the bolder text never shifts the menu. */
.gm-catnav__label::before { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; }
/* Hover / keyboard focus: secondary navy text with a navy line beneath the label. */
.gm-catnav__label::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
	height: 2px; border-radius: 2px;
	background: var(--gm-color-action-secondary-default);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .2s ease;
}
.gm-catnav__item > a { transition: color .2s ease; }
.gm-catnav__item.is-current > a { color: var(--gm-color-action-primary-default); }
.gm-catnav__item > a:hover, .gm-catnav__item > a:focus-visible { color: var(--gm-color-action-secondary-default); font-weight: 600; }
.gm-catnav__item > a:hover .gm-catnav__label::after, .gm-catnav__item > a:focus-visible .gm-catnav__label::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .gm-catnav__label::after, .gm-catnav__item > a { transition: none; } }

/* ---------- Category mega menu (Figma 784:6392, 785:6631 / 6738 / 6982 / 7186 / 7394) ----------
   Full-width panel under the category bar; the page below sits under the same
   frosted glass as the account menu. Desktop pointer + keyboard only. */
.gm-catnav__item.is-open > a { color: var(--gm-color-action-secondary-default); font-weight: 600; }
.gm-catnav__item.is-open > a .gm-catnav__label::after { transform: scaleX(1); }
/* One white sheet stays open while the pointer moves between categories;
   only the content inside changes (it rises in from below, Back Market style). */
.gm-mega-sheet {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 3; height: var(--gm-mega-h, 358px);
	background: var(--gm-color-bg-surface);
	box-shadow: 0 18px 24px -12px rgba(13, 27, 42, .12);
	opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
	transition: opacity var(--gm-dur, .25s) ease, transform var(--gm-dur, .25s) var(--gm-ease, ease), height .3s var(--gm-ease, ease), visibility 0s linear var(--gm-dur, .25s);
}
html.gm-mega-open .gm-mega-sheet { opacity: 1; visibility: visible; transform: none; transition: opacity var(--gm-dur, .25s) ease, transform var(--gm-dur, .25s) var(--gm-ease, ease), height .3s var(--gm-ease, ease); }
.gm-mega {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 4;
	padding: 40px var(--gm-gutter);
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity .15s ease, transform .35s var(--gm-ease, ease), visibility 0s linear .35s;
}
.gm-catnav__item.is-open > .gm-mega {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .3s ease .06s, transform .4s var(--gm-ease, ease) .03s;
}
.gm-mega__in { display: flex; flex-direction: column; gap: 32px; width: 972px; max-width: 100%; margin: 0 auto; }
.gm-mega__top { display: flex; align-items: center; justify-content: space-between; }
.gm-mega__title { margin: 0; padding: 10px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--gm-color-text-secondary); white-space: nowrap; }
.gm-mega__all {
	display: flex; align-items: center; justify-content: center; width: 100px; padding: 10px;
	font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gm-color-text-secondary); text-decoration: none; white-space: nowrap;
	border-radius: var(--gm-radius-sm); transition: color var(--gm-dur-fast) ease, background-color var(--gm-dur-fast) ease;
}
.gm-mega__all:hover { color: var(--gm-color-action-secondary-default); text-decoration: underline; }
.gm-mega__all:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-mega__cards { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.gm-mega__card {
	display: flex; flex-direction: column; gap: 8px; width: 228px; border-radius: var(--gm-radius-md);
	filter: drop-shadow(0 2px 2px rgba(17, 15, 21, .05)); text-decoration: none;
}
.gm-mega__card:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-mega__media { display: flex; justify-content: center; padding: 18px 18px 0; background: var(--gm-color-bg-subtle); border-radius: var(--gm-radius-md); transition: filter var(--gm-dur) ease; }
.gm-mega__frame { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; padding: 0 12px; overflow: hidden; }
.gm-mega__art { display: inline-grid; grid-template-columns: max-content; grid-template-rows: max-content; flex: none; line-height: 0; transition: transform .4s var(--gm-ease, ease); }
.gm-mega__layer { position: relative; grid-area: 1 / 1; overflow: hidden; }
.gm-mega__layer img { position: absolute; max-width: none; }
.gm-mega__layer img.is-cover { object-fit: cover; }
.gm-mega__name { padding: 0 18px 24px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gm-color-text-primary); transition: color var(--gm-dur-fast) ease; }
.gm-mega__card:hover .gm-mega__media { filter: brightness(.975); }
.gm-mega__card:hover .gm-mega__art { transform: scale(1.05); }
.gm-mega__card:hover .gm-mega__name { color: var(--gm-color-action-secondary-default); }

/* "More" panel (Figma 865:13741): three link cards with coloured art */
/* Same card size as the category menus (.gm-mega__card: 228 × 202, art 228 × 146), with the Figma colours. */
.gm-more-card { display: flex; flex-direction: column; gap: 8px; width: 228px; border-radius: var(--gm-radius-md); filter: drop-shadow(0 2px 2px rgba(17, 15, 21, .05)); text-decoration: none; }
.gm-more-card:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); border-radius: var(--gm-radius-sm); }
.gm-more-card__media { position: relative; display: block; width: 228px; height: 146px; overflow: hidden; border-radius: var(--gm-radius-md); transition: filter var(--gm-dur) ease; }
.gm-more-card__media > *, .gm-more-card__media img { transition: transform .4s var(--gm-ease, ease); }
.gm-more-card__products { position: absolute; left: calc(50% - .5px); top: 50%; width: 171px; height: 104px; max-width: none; object-fit: cover; transform: translate(-50%, -50%); }
.gm-more-card__bag { position: absolute; overflow: hidden; }
.gm-more-card__bag img { position: absolute; max-width: none; }
.gm-more-card__bag--back { left: calc(50% + 32.12px - 39.13px); top: 27px; width: 78.26px; height: 91px; }
.gm-more-card__bag--back img { left: -23.49%; top: -23.42%; width: 150.7%; height: 162%; }
.gm-more-card__bag--front { left: calc(50% - 26.65px - 44.355px); top: 15px; width: 88.71px; height: 110px; }
.gm-more-card__bag--front img { left: -43%; top: -26.61%; width: 181%; height: 145.97%; }
.gm-more-card__acc { position: absolute; left: calc(50% + .5px); top: calc(50% - .5px); width: 127px; height: 127px; max-width: none; object-fit: cover; transform: translate(-50%, -50%); }
.gm-more-card:hover .gm-more-card__acc { transform: translate(-50%, -50%) scale(1.05); }
/* Four cards since Figma 1226:30386: 200 × 140 art. */
.gm-mega--more .gm-more-card { width: 200px; }
.gm-mega--more .gm-more-card__media { width: 200px; height: 140px; border-radius: var(--gm-radius-sm, 8px); }
.gm-mega--more .gm-more-card__name { padding: 0; }
.gm-more-card__icon { position: absolute; left: calc(50% - .5px); top: calc(50% + .5px); width: 77px; height: 77px; transform: translate(-50%, -50%); }
.gm-more-card__name { padding: 0 18px 24px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gm-color-text-primary); transition: color var(--gm-dur-fast) ease; }
.gm-more-card:hover .gm-more-card__media { filter: brightness(.97); }
.gm-more-card:hover .gm-more-card__products { transform: translate(-50%, -50%) scale(1.05); }
.gm-more-card:hover .gm-more-card__icon { transform: translate(-50%, -50%) scale(1.08); }
.gm-more-card:hover .gm-more-card__bag { transform: translateY(-3px); }
.gm-more-card:hover .gm-more-card__name { color: var(--gm-color-action-secondary-default); }

.gm-mega-scrim {
	position: fixed; inset: var(--gm-mega-top, 0) 0 0; z-index: 99; pointer-events: none;
	background: rgba(13, 27, 42, .28);
	-webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
	opacity: 0; transition: opacity var(--gm-dur, .25s) ease;
}
html.gm-mega-open .gm-mega-scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 1100px), (hover: none) { .gm-mega, .gm-mega-sheet, .gm-mega-scrim { display: none; } }
/* "Shop by budget" panel (Figma 1187:31029): 218 × 140 price cards, 20px apart */
.gm-budget-card { display: flex; flex-direction: column; gap: 8px; width: 218px; text-decoration: none; }
.gm-budget-card:hover, .gm-budget-card:focus { text-decoration: none; }
.gm-budget-card:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); border-radius: var(--gm-radius-sm); }
.gm-budget-card__media {
	display: flex; align-items: center; justify-content: center; height: 140px; border-radius: var(--gm-radius-sm, 8px);
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: 40px; line-height: 24px; font-weight: 700; font-variant-numeric: lining-nums; /* IvyPresto's figures sit on the line. */
	transition: filter var(--gm-dur) ease, transform .4s var(--gm-ease, ease);
}
.gm-budget-card__name { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gm-color-text-primary); transition: color var(--gm-dur-fast) ease; }
.gm-budget-card:hover .gm-budget-card__media { filter: brightness(.97); transform: translateY(-2px); }
.gm-budget-card:hover .gm-budget-card__name { color: var(--gm-color-action-secondary-default); }
@media (prefers-reduced-motion: reduce) { .gm-mega, .gm-mega-sheet, .gm-mega-scrim, .gm-mega__art, .gm-budget-card__media { transition: none; } .gm-mega { transform: none; } .gm-mega__card:hover .gm-mega__art { transform: none; } }

/* Header: narrower desktops */
/* Ten category items need 1310px at their set widths (+ 120px gutters); below that they size to their labels. */
@media (max-width: 1439px) {
	.gm-catnav__item { width: auto; }
	.gm-catnav__item > a { padding: 10px 14px; }
}
@media (max-width: 1260px) { .gm-catnav__item > a { padding: 10px; } } /* Keeps "More" inside the gutter down to 1101px. */
@media (max-width: 1380px) {
	.gm-header__bar { gap: 24px; }
	.gm-header__left { gap: 24px; flex: 1; min-width: 0; }
	.gm-search { flex: 1; width: auto; min-width: 0; }
}
/* Header: tablet & mobile */
@media (max-width: 1100px) {
	.gm-header__bar { flex-wrap: wrap; height: auto; padding: 12px var(--gm-gutter); gap: 12px; justify-content: space-between; }
	.gm-burger { display: block; order: 0; }
	.gm-header__left { display: contents; }
	.gm-logo { order: 1; margin-right: auto; }
	.gm-header__right { order: 2; gap: 0; }
	.gm-search { order: 3; flex: 1 1 100%; width: 100%; height: 56px; padding: 13px 16px; }
	.gm-search__btn { top: 6px; right: 6px; width: 96px; }
	.gm-search__input { font-size: 16px; padding-right: 100px; }
	.gm-help, .gm-account__text, .gm-account__chev { display: none; }
	.gm-account { width: 44px; }
	.gm-catnav__item { width: auto; }
	.gm-catnav { justify-content: flex-start; padding: 8px var(--gm-gutter); overflow-x: auto; scrollbar-width: none; }
	.gm-catnav::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
	.gm-header__bar { gap: 8px; }
	.gm-burger { margin-left: -10px; }
	.gm-logo { gap: 6.4px; }
	.gm-logo__icon { width: 22px; height: 23.35px; }
	.gm-logo__text { width: 136px; height: 15.39px; }
	.gm-header__right { margin-right: -10px; }
	.gm-actions { gap: 0; }
	.gm-action--compare { display: none; }
}

/* ---------- Footer ---------- */
.gm-footer {
	display: flex; flex-direction: column; gap: 28px;
	padding: 80px 0 40px;
	background: var(--gm-color-bg-inverse);
	color: var(--gm-color-text-inverse);
}
/* Figma: the four link columns run from x 480 to the frame edge, so the row has no right gutter. */
.gm-footer__top { display: flex; align-items: flex-start; gap: 71px; padding-right: 0; }
.gm-footer__brand { display: flex; flex-direction: column; gap: 24px; width: 349px; min-height: 270px; flex: none; }
.gm-footer__logo { display: flex; align-items: center; gap: 13.109px; text-decoration: none; }
.gm-footer__logo-icon { width: 41.826px; height: 44.405px; }
.gm-footer__logo .gm-logo__text { width: 278.064px; height: 31.475px; }
.gm-footer__company { margin: 0; font-size: 14px; line-height: 24px; font-weight: 400; color: var(--gm-color-text-inverse); }
.gm-footer__company strong { font-weight: 500; }
.gm-footer__contact { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; line-height: 20px; }
.gm-footer__contact li { display: flex; align-items: center; gap: 12px; }
.gm-footer__contact .gm-icon { width: 20px; height: 20px; }
.gm-footer__contact a, .gm-footer__contact span {
	font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; color: #b4b4b4; white-space: nowrap;
}
.gm-footer__contact a:hover { color: #fff; }
/* Columns share the space 250:250:250:210, which is exactly 250/250/250/210px at 1440. */
.gm-footer__cols { display: flex; align-items: flex-start; flex: 1 1 0; min-width: 0; max-width: 960px; }
.gm-footer__col { display: flex; flex-direction: column; gap: 12px; flex: 0 0 calc(100% * 250 / 960); min-width: 0; padding: 14px; }
.gm-footer__col--narrow { flex-basis: calc(100% * 210 / 960); }
.gm-footer__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--gm-color-text-inverse); }
.gm-footer__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; line-height: 24px; }
.gm-footer__links a, .gm-footer__links span { font-size: 16px; line-height: 24px; font-weight: 400; color: #e2e2e2; white-space: nowrap; }
.gm-footer__links a:hover { color: #fff; }
.gm-pay { display: flex; align-items: center; gap: 5px; }
.gm-pay__visa { width: 50px; height: 23.7px; }
.gm-pay__card {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 24px; padding: 6px; overflow: hidden;
	border: 1px solid #efefef; border-radius: var(--gm-radius-xs);
}
.gm-pay__mc { width: 20px; height: 12px; }
.gm-pay__pp { width: 34px; height: 9px; }
/* Apple Pay badge in the footer (Figma 722:7217): white logo + "Pay". */
.gm-pay__card:has(.gm-pay__apple) { gap: 4px; }
.gm-pay__apple { width: 12px; height: 15px; flex: none; }
.gm-footer .gm-pay .gm-pay__applepay { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", var(--gm-font-sans); font-size: 12px; line-height: 15px; font-weight: 600; color: #fff; }
.gm-footer__bottom { display: flex; flex-direction: column; gap: 24px; }
.gm-footer__divider { display: block; width: 100%; height: 1px; max-width: none; margin-top: -1px; }
.gm-footer__row { display: flex; align-items: center; justify-content: space-between; }
.gm-footer__copy { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--gm-color-text-inverse); white-space: pre; }
.gm-social { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.gm-social a, .gm-social__item { position: relative; display: block; width: 44px; height: 44px; }
.gm-social img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
.gm-social .gm-social__tiktok   { width: 21px; height: 24px; margin-left: .5px; }
.gm-social .gm-social__facebook { width: 29px; height: 29px; margin: .5px 0 0 .5px; }
.gm-social .gm-social__instagram { width: 24px; height: 24px; }
.gm-social .gm-social__linkedin { width: 44px; height: 44px; }

@media (max-width: 1250px) {
	.gm-footer__top { gap: 40px; }
	.gm-footer__links a, .gm-footer__links span { white-space: normal; }
}
@media (max-width: 1100px) {
	.gm-footer { padding-top: 56px; }
	.gm-footer__top { flex-direction: column; gap: 32px; padding-right: var(--gm-gutter); }
	.gm-footer__brand { width: 100%; min-height: 0; }
	.gm-footer__cols { display: grid; width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
	.gm-footer__col { padding: 0; }
}
@media (max-width: 480px) {
	.gm-footer__logo-icon { width: 33px; height: 35px; }
	.gm-footer__logo .gm-logo__text { width: 220px; height: 24.9px; }
	.gm-footer__contact a, .gm-footer__contact span { white-space: normal; }
	.gm-footer__row { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
}

/* ---------- Product card (Figma Product Cards, 190:7902) ---------- */
.gm-pcard {
	display: flex; flex-direction: column; gap: 8px;
	width: 256px; flex: none;
	background: var(--gm-color-bg-surface);
	border-radius: var(--gm-radius-md);
	box-shadow: var(--gm-shadow-card);
	color: inherit; text-decoration: none;
}
.gm-pcard:hover { color: inherit; }
.gm-pcard__media { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 18px 0; }
.gm-pcard__imgwrap { display: flex; align-items: flex-start; width: 128px; height: 128px; padding: 0 12px; overflow: hidden; }
.gm-pcard__img { width: 103.125px; height: 128px; max-width: none; object-fit: contain; }
.gm-pcard__imgwrap--art { align-items: center; }
.gm-pcard__art { position: relative; display: block; flex: none; }
.gm-pcard__layer { position: absolute; top: 0; display: block; overflow: hidden; }
.gm-pcard__layer img { position: absolute; display: block; max-width: none; }
.gm-pcard__layer .gm-pcard__fill { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-pcard__swatches { display: flex; align-items: center; justify-content: center; min-height: 16px; margin: 0; padding: 0; list-style: none; }
.gm-pcard__swatches li { padding: var(--gm-spacing-2xs); }
.gm-pcard__swatch {
	display: block; width: 12px; height: 12px;
	border: 1px solid rgba(17, 15, 21, .4);
	border-radius: var(--gm-radius-sm);
}
.gm-pcard__more { padding: 0 !important; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; color: #110f15; white-space: pre; }
.gm-pcard__body { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 24px; }
.gm-pcard__title {
	margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--gm-color-text-primary);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-pcard__price { display: flex; flex-direction: column; }
.gm-pcard__label { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gm-color-text-muted); white-space: nowrap; }
.gm-pcard__amount { display: flex; align-items: flex-start; color: var(--gm-color-text-primary); white-space: nowrap; }
.gm-pcard__cur { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .8px; }
.gm-pcard__num { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -.2px; }
.gm-pcard__was { display: flex; gap: 4px; min-height: 16px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gm-color-text-muted); white-space: nowrap; }
.gm-pcard__was s { text-decoration-thickness: from-font; }

/* ---------- Horizontal rail (product + article carousels) ---------- */
.gm-rail {
	display: flex; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
	/* Run off the right edge of the viewport, as in the Figma frame. */
	margin-right: calc(50% - 50vw);
	padding: 4px calc(50vw - 50%) 8px 0;
	margin-top: -4px; margin-bottom: -8px;
}
.gm-rail::-webkit-scrollbar { display: none; }
/*
 * Sideways-scrolling rows must never scroll up and down as well. overflow-x:
 * auto silently turns overflow-y into auto too, so a few pixels of card
 * shadow or hover lift made each row a tiny vertical scroller that caught the
 * mouse wheel / trackpad and "stuck" the page (client 2026-10-19).
 */
.gm-rail, .gm-guides__rail, .gm-cart__rail, .gm-catnav, .gm-otabs ul, .gm-orders-aside ul, .gm-account-tabs,
.gm-cmp-tabs, .gm-pdp-thumbs, .gm-landing .gm-assure, .gm-series-cmp, .gm-series-vs__box,
.gm-art-table, .gm-invoice__tablewrap { overflow-y: hidden; }
.gm-rail > * { scroll-snap-align: start; }

/* =========================================================================
   Motion: transitions, hover states and scroll reveal (site-wide).
   Everything here is switched off for prefers-reduced-motion at the end.
   ========================================================================= */
:root {
	--gm-ease:     cubic-bezier(.2, .7, .2, 1);
	--gm-dur-fast: .15s;
	--gm-dur:      .25s;
	--gm-dur-slow: .6s;
}

/* Scroll reveal: only hidden once gm.js has run, so content never vanishes without JS. */
.gm-js .gm-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--gm-dur-slow) var(--gm-ease), transform var(--gm-dur-slow) var(--gm-ease); transition-delay: var(--gm-d, 0ms); }
.gm-js .gm-reveal.is-in { opacity: 1; transform: none; }

/* Page entrance: the content under the header fades in (CSS only, works without JS). */
@keyframes gm-page-in { from { opacity: 0; } to { opacity: 1; } }
/* backwards, not both: a finished opacity animation that stays "filled" keeps a stacking context,
   which trapped fixed panels inside the page (PDP cart panel) under the header. */
#egs-content { animation: gm-page-in .45s ease-out backwards; }

/* Lazy images fade in (gm.js). */
.gm-img-fade { transition: opacity .45s ease; }
.gm-img-wait { opacity: 0; }

/* Smooth colour changes on every link and button; zero specificity, so a component's own transition wins. */
:where(#egs-content) :where(a, button, [role="button"], input, select, textarea) {
	transition: color var(--gm-dur-fast) ease, background-color var(--gm-dur-fast) ease, border-color var(--gm-dur-fast) ease, box-shadow var(--gm-dur) ease, opacity var(--gm-dur) ease;
}

/* Buttons */
.gm-btn { transition: background-color var(--gm-dur-fast) ease, box-shadow var(--gm-dur) var(--gm-ease), transform var(--gm-dur-fast) var(--gm-ease); }
.gm-btn--primary:hover { box-shadow: 0 6px 16px rgba(255, 122, 0, .28); transform: translateY(-1px); }
.gm-btn--primary:active { box-shadow: none; }
.gm-btn .gm-icon { transition: transform var(--gm-dur) var(--gm-ease); }
.gm-btn:hover .gm-icon { transform: translateX(3px); }

/* Round carousel arrows */
.gm-navbtn { transition: background-color var(--gm-dur-fast) ease, transform var(--gm-dur-fast) var(--gm-ease), box-shadow var(--gm-dur) var(--gm-ease); }
.gm-navbtn:not([disabled]):hover { transform: scale(1.06); box-shadow: 0 6px 14px rgba(13, 27, 42, .22); }
.gm-navbtn:not([disabled]):active { transform: scale(.96); box-shadow: none; }

/* Announcement + header */
.gm-announce__link { transition: color var(--gm-dur-fast) ease; }
.gm-announce__link:hover { color: var(--gm-color-action-primary-default); }
.gm-logo, .gm-footer__logo { transition: opacity var(--gm-dur) ease; }
.gm-logo:hover, .gm-footer__logo:hover { opacity: .85; }
.gm-search { transition: border-color var(--gm-dur) ease, box-shadow var(--gm-dur) ease; }
.gm-search:hover { border-color: var(--gm-color-border-strong); }
.gm-search:focus-within { border-color: var(--gm-color-border-focus); box-shadow: var(--gm-focus-ring); }
.gm-search__btn { transition: background-color var(--gm-dur-fast) ease, transform var(--gm-dur-fast) var(--gm-ease); }
.gm-search__btn:active { transform: scale(.97); }
.gm-help { transition: color var(--gm-dur-fast) ease; }
.gm-account__ic, .gm-action { border-radius: var(--gm-radius-full); transition: background-color var(--gm-dur) ease; }
.gm-account:hover .gm-account__ic, .gm-action:hover { background: var(--gm-color-bg-subtle); }
.gm-account__main { transition: color var(--gm-dur-fast) ease; }
.gm-account:hover .gm-account__main { color: var(--gm-color-action-secondary-default); }
.gm-account__chev { transition: transform var(--gm-dur) var(--gm-ease); }
.gm-account:hover .gm-account__chev { transform: translateY(2px); }
.gm-action > .gm-icon { transition: transform var(--gm-dur) var(--gm-ease); }
.gm-action:hover > .gm-icon { transform: scale(1.08); }
.gm-action__count { transition: transform var(--gm-dur) var(--gm-ease); }

/* Footer */
.gm-footer__links a, .gm-footer__contact a { transition: color var(--gm-dur-fast) ease; }
.gm-footer__links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color var(--gm-dur-fast) ease, background-size var(--gm-dur) var(--gm-ease); }
.gm-footer__links a:hover { background-size: 100% 1px; }
.gm-social a, .gm-social__item { transition: transform var(--gm-dur) var(--gm-ease), opacity var(--gm-dur) ease; }
.gm-social a:hover { transform: translateY(-2px); opacity: .85; }

/* Product card */
.gm-pcard { transition: box-shadow var(--gm-dur) var(--gm-ease), transform var(--gm-dur) var(--gm-ease); }
.gm-pcard:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17, 15, 21, .08); }
.gm-pcard__img, .gm-pcard__art { transition: transform .4s var(--gm-ease); }
.gm-pcard:hover .gm-pcard__img, .gm-pcard:hover .gm-pcard__art { transform: scale(1.05); }
.gm-pcard__title { transition: color var(--gm-dur-fast) ease; }
.gm-pcard:hover .gm-pcard__title { color: var(--gm-color-action-secondary-default); }

@media (prefers-reduced-motion: reduce) {
	.gm-js .gm-reveal { opacity: 1; transform: none; transition: none; }
	#egs-content { animation: none; }
	.gm-img-wait { opacity: 1; }
	:where(#egs-content) :where(a, button, [role="button"], input, select, textarea) { transition: none; }
	.gm-header *, .gm-footer *, .gm-main *, .gm-btn, .gm-navbtn, .gm-pcard { transition-duration: 0s !important; animation-duration: 0s !important; }
	.gm-btn--primary:hover, .gm-pcard:hover, .gm-navbtn:not([disabled]):hover, .gm-social a:hover { transform: none; }
	.gm-btn:hover .gm-icon, .gm-pcard:hover .gm-pcard__img, .gm-pcard:hover .gm-pcard__art, .gm-action:hover > .gm-icon { transform: none; }
}