/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: header.css
 * Description: Global Header, Navigation, Search and Drawer
 *
 * Depends:
 * tokens.css
 * spacing.css
 * typography.css
 * motion.css
 * controls.css
 *
 * Version:
 * 4.1.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   HEADER SEMANTIC TOKENS
========================================================== */

:root {

	--gm-header-bg:
		var(--gm-color-white);

	--gm-header-ink:
		var(--gm-color-text);

	--gm-header-muted:
		var(--gm-color-text-light);

	--gm-header-line:
		var(--gm-color-border);

	--gm-header-soft:
		var(--gm-color-background-soft);

	--gm-header-accent:
		var(--gm-color-primary);

	--gm-header-height:
		92px;

}


/* ==========================================================
   SKIP LINK
========================================================== */

.gm-skip-link {

	position: fixed;

	top: var(--gm-space-xs);
	left: var(--gm-space-xs);

	z-index: var(--gm-z-loader);

	padding:
		var(--gm-space-xs)
		var(--gm-space-md);

	border-radius: var(--gm-radius-sm);

	background: var(--gm-color-white);

	color: var(--gm-color-text);

	font-family: var(--gm-font-family);

	font-size: var(--gm-font-size-sm);

	font-weight: var(--gm-font-weight-medium);

	text-decoration: none;

	transform: translateY(-150%);

	transition:
		transform
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-skip-link:focus,
.gm-skip-link:focus-visible {

	transform: translateY(0);

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}


/* ==========================================================
   SERVICE BAR
========================================================== */

.gm-service {

	position: relative;

	z-index: calc(var(--gm-z-header) + 2);

	min-height: 34px;

	border-bottom:
		1px solid var(--gm-header-line);

	background: var(--gm-header-soft);

	color: var(--gm-header-muted);

}

.gm-service-shell {

	display: flex;

	width:
		min(
			calc(100% - var(--gm-space-2xl)),
			var(--gm-container-width)
		);

	min-height: 34px;

	margin-inline: auto;

	align-items: center;

	justify-content: center;

	gap: var(--gm-space-md);

}

.gm-service-item {

	display: inline-flex;

	align-items: center;

	gap: var(--gm-space-xs);

	color: inherit;

	font-family: var(--gm-font-family);

	font-size: 11px;

	font-weight: var(--gm-font-weight-medium);

	line-height: 1.3;

	letter-spacing: .025em;

	text-decoration: none;

	white-space: nowrap;

}

.gm-service-item svg {

	width: 17px;
	height: 17px;

	flex: 0 0 auto;

}

.gm-service-link {

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-service-link:hover,
.gm-service-link:focus-visible {

	color: var(--gm-header-ink);

}

.gm-service-link:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}

.gm-service-divider {

	display: block;

	width: 1px;
	height: 11px;

	background: var(--gm-header-line);

}


/* ==========================================================
   HEADER SHELL
========================================================== */

.gm-header {

	position: sticky;

	top: 0;

	z-index: var(--gm-z-header);

	width: 100%;

	background:
		rgba(255, 255, 255, .97);

	color: var(--gm-header-ink);

	box-shadow:
		0 1px 0 var(--gm-header-line);

	backdrop-filter: blur(16px);

	-webkit-backdrop-filter: blur(16px);

}

.gm-header-main {

	position: relative;

	background: var(--gm-header-bg);

}


/* ==========================================================
   HEADER MAIN ROW
========================================================== */

.gm-headrow {

	position: relative;

	display: grid;

	min-height: var(--gm-header-height);

	grid-template-columns:
		minmax(250px, 1fr)
		auto
		minmax(250px, 1fr);

	align-items: center;

	gap: var(--gm-space-xl);

}

.gm-head-start,
.gm-head-actions {

	display: flex;

	align-items: center;

}

.gm-head-start {

	justify-content: flex-start;

	gap: var(--gm-space-lg);

}

.gm-head-actions {

	justify-content: flex-end;

	gap: var(--gm-space-lg);

}


/* ==========================================================
   HEADER CONTROLS
========================================================== */

.gm-header-control {

	display: inline-flex;

	min-height: 42px;

	padding: 0;

	align-items: center;

	gap: var(--gm-space-xs);

	border: 0;

	background: transparent;

	color: var(--gm-header-ink);

	font: inherit;

	text-decoration: none;

	cursor: pointer;

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),
		opacity
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-header-control:hover,
.gm-header-control:focus-visible {

	color: var(--gm-header-accent);

}

.gm-header-control:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}

.gm-header-control svg {

	width: 21px;
	height: 21px;

}

.gm-control-label {

	font-family: var(--gm-font-family);

	font-size: 13px;

	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

	letter-spacing: .01em;

}


/* ==========================================================
   MENU ICON
========================================================== */

.gm-menu-lines {

	display: flex;

	width: 23px;
	height: 17px;

	flex-direction: column;

	justify-content: center;

	gap: 6px;

}

.gm-menu-lines span {

	display: block;

	width: 23px;
	height: 1.5px;

	background: currentColor;

	transition:
		width
		var(--gm-motion-normal)
		var(--gm-motion-smooth),
		transform
		var(--gm-motion-normal)
		var(--gm-motion-smooth);

}

.gm-menu-lines span:last-child {

	width: 16px;

}

.gm-menu:hover .gm-menu-lines span:last-child,
.gm-menu:focus-visible .gm-menu-lines span:last-child {

	width: 23px;

}


/* ==========================================================
   SEARCH TRIGGER
========================================================== */

.gm-search {

	color: var(--gm-header-muted);

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-search:hover,
.gm-search:focus-visible {

	color: var(--gm-header-accent);

}


/* ==========================================================
   LOGO
========================================================== */

.gm-logo {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

}

.gm-logo img {

	display: block;

	width: auto;
	height: 47px;

	max-width: 220px;

	object-fit: contain;

	transition:
		height
		var(--gm-motion-normal)
		var(--gm-motion-smooth),
		opacity
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-logo:hover img {

	opacity: .84;

}

.gm-logo:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.gm-header-action {

	position: relative;

	display: inline-flex;

	min-height: 44px;

	align-items: center;

	gap: var(--gm-space-xs);

	color: var(--gm-header-ink);

	text-decoration: none;

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),
		opacity
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-header-action:hover,
.gm-header-action:focus-visible {

	color: var(--gm-header-accent);

}

.gm-header-action:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}

.gm-action-icon {

	position: relative;

	display: grid;

	width: 25px;
	height: 28px;

	flex: 0 0 auto;

	place-items: center;

}

.gm-action-icon svg {

	width: 22px;
	height: 22px;

}

.gm-action-label {

	font-family: var(--gm-font-family);

	font-size: var(--gm-font-size-xs);

	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

	letter-spacing: .01em;

}


/* ==========================================================
   CART COUNT
========================================================== */

.gm-cart-count {

	position: absolute;

	top: -4px;
	right: -8px;

	display: grid;

	min-width: 17px;
	height: 17px;

	padding:
		0
		var(--gm-space-2xs);

	place-items: center;

	border:
		2px solid var(--gm-color-white);

	border-radius: var(--gm-radius-pill);

	background: var(--gm-header-accent);

	color: var(--gm-color-white);

	font-family: var(--gm-font-family);

	font-size: 9px;

	font-weight: var(--gm-font-weight-bold);

	line-height: 1;

}

/* ==========================================================
   MAIN NAVIGATION
========================================================== */

.gm-nav {

	position: relative;

	border-top:
		1px solid var(--gm-header-line);

	background: var(--gm-header-bg);

}

.gm-nav-inner {

	display: flex;

	min-height: 47px;

	align-items: center;
	justify-content: center;

	gap:
		clamp(
			var(--gm-space-lg),
			3vw,
			var(--gm-space-2xl)
		);

	overflow-x: auto;

	scrollbar-width: none;

}

.gm-nav-inner::-webkit-scrollbar {

	display: none;

}

.gm-nav a {

	position: relative;

	display: inline-flex;

	min-height: 47px;

	flex: 0 0 auto;

	align-items: center;

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: var(--gm-font-size-xs);

	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

	letter-spacing: .015em;

	text-decoration: none;

	white-space: nowrap;

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-nav a:hover,
.gm-nav a:focus-visible {

	color: var(--gm-header-accent);

}

.gm-nav a:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}

.gm-nav a::after {

	position: absolute;

	right: 0;
	bottom: -1px;
	left: 0;

	height: 1.5px;

	background: var(--gm-header-accent);

	content: "";

	transform: scaleX(0);

	transform-origin: center;

	transition:
		transform
		var(--gm-motion-normal)
		var(--gm-motion-smooth);

}

.gm-nav a:hover::after,
.gm-nav a:focus-visible::after {

	transform: scaleX(1);

}


/* ==========================================================
   ACTIVE NAVIGATION STATE
========================================================== */

.gm-nav .current-menu-item > a,
.gm-nav .current-menu-ancestor > a,
.gm-nav .current_page_item > a,
.gm-nav .current_page_parent > a {

	color: var(--gm-header-accent);

}


/* ==========================================================
   MEGA MENU — BASE
========================================================== */

.gm-mega-item,
.gm-mega-control {

	display: contents;

}

.gm-mega-toggle,
.gm-mega-layer {

	display: none;

}

.gm-mega-toggle span {

	width: 7px;
	height: 7px;

	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;

	transform:
		translateY(-2px)
		rotate(45deg);

	transition:
		transform
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}


/* ==========================================================
   MEGA MENU — DESKTOP
========================================================== */

@media (min-width: 1081px) {

	/* ======================================================
	   Desktop navigation geometry
	====================================================== */

	.gm-nav-inner {

		width: min(100%, 1480px);

		min-height: 54px;

		margin-inline: auto;

		padding-inline: var(--gm-space-xl);

		justify-content: flex-start;

		gap:
			clamp(
				var(--gm-space-lg),
				2.1vw,
				34px
			);

		overflow: visible;

		scroll-padding-inline:
			var(--gm-space-xl);

	}

	.gm-nav a {

		min-height: 54px;

		font-size: 13px;

		font-weight: var(--gm-font-weight-medium);

		letter-spacing: .01em;

	}

	.gm-nav a::after {

		height: 2px;

	}


	/* ======================================================
	   Mega item / control
	====================================================== */

	.gm-mega-item,
	.gm-mega-control {

		display: flex;

		align-items: center;

	}

	.gm-mega-item {

		position: relative;

	}

	.gm-mega-control {

		gap: 2px;

	}


	/* ======================================================
	   Mega toggle
	====================================================== */

	.gm-mega-toggle {

		display: grid;

		width: 24px;
		min-width: 24px;

		height: 47px;

		padding: 0;

		place-items: center;

		border: 0;

		background: transparent;

		color: var(--gm-header-muted);

		cursor: pointer;

	}

	.gm-mega-toggle span {

		width: 7px;
		height: 7px;

		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;

		transform:
			translateY(-2px)
			rotate(45deg);

		transition:
			transform
			var(--gm-motion-fast)
			var(--gm-motion-smooth);

	}

	.gm-mega-item.is-open
	.gm-mega-toggle span {

		transform:
			translateY(2px)
			rotate(225deg);

	}

	.gm-mega-toggle:focus-visible {

		outline: var(--gm-focus-ring);

		outline-offset: var(--gm-focus-ring-offset);

		border-radius: var(--gm-radius-md);

	}


	/* ======================================================
	   Mega layer
	====================================================== */

	.gm-mega-layer {

		position: fixed;

		top: var(--gm-mega-top, 0);
		right: 0;
		left: 0;

		z-index: var(--gm-z-modal);

		display: block;

		visibility: hidden;

		opacity: 0;

		pointer-events: none;

		transform:
			translateY(
				calc(
					var(--gm-motion-distance-xs) * -1
				)
			);

		transition:
			opacity
			var(--gm-motion-fast)
			var(--gm-ease-standard),
			transform
			var(--gm-motion-fast)
			var(--gm-ease-standard),
			visibility
			var(--gm-motion-fast)
			var(--gm-ease-standard);

	}

	.gm-mega-layer.is-open {

		visibility: visible;

		opacity: 1;

		pointer-events: auto;

		transform: translateY(0);

	}


	/* ======================================================
	   Mega surface
	====================================================== */

	.gm-mega-surface {

		max-height:
			calc(
				100vh -
				var(--gm-mega-top, 0px) -
				var(--gm-space-md)
			);

		overflow-y: auto;

		border-top:
			1px solid var(--gm-header-line);

		border-bottom:
			1px solid var(--gm-header-line);

		background: var(--gm-color-white);

		box-shadow: var(--gm-shadow-md);

	}


	/* ======================================================
	   Mega content
	====================================================== */

	.gm-mega-content:not([hidden]) {

		display: grid;

		padding-top: var(--gm-space-xl);
		padding-bottom: var(--gm-space-xl);

		/*
		 * Promo visuals are intentionally hidden in
		 * the current production design.
		 */
		grid-template-columns: 1fr;

		gap: var(--gm-space-xl);

	}


	/* ======================================================
	   Mega sections
	====================================================== */

	.gm-mega-sections {

		display: grid;

		grid-template-columns:
			repeat(
				4,
				minmax(130px, 1fr)
			);

		gap: var(--gm-space-lg);

	}

	.gm-mega-section {

		min-width: 0;

		padding-right: var(--gm-space-lg);

		border-right:
			1px solid var(--gm-header-line);

	}

	.gm-mega-section:last-child {

		padding-right: 0;

		border-right: 0;

	}


	/* ======================================================
	   Section title
	====================================================== */

	.gm-mega-section-title,
	.gm-mega-section-title:visited {

		min-height: 0;

		margin-bottom: var(--gm-space-md);

		color: var(--gm-header-ink);

		font-family: var(--gm-font-family);

		font-size: 13px;

		font-weight: var(--gm-font-weight-medium);

		line-height: 1.45;

		letter-spacing: 0;

		text-decoration: none;

		white-space: normal;

	}


	/* ======================================================
	   Section links
	====================================================== */

	.gm-mega-section-links {

		display: grid;

		gap: var(--gm-space-xs);

	}

	.gm-mega-layer
	.gm-mega-section-links a,
	.gm-mega-layer
	.gm-mega-section-links a:visited {

		min-height: 0;

		color: var(--gm-header-muted);

		font-family: var(--gm-font-family);

		font-size: 13px;

		font-weight: var(--gm-font-weight-regular);

		line-height: 1.5;

		letter-spacing: 0;

		text-decoration: none;

		white-space: normal;

	}

	.gm-mega-layer a::after {

		display: none;

	}

	.gm-mega-layer a:hover,
	.gm-mega-layer a:focus-visible {

		color: var(--gm-header-accent);

	}

	.gm-mega-layer a:focus-visible {

		outline: var(--gm-focus-ring);

		outline-offset: var(--gm-focus-ring-offset);

		border-radius: var(--gm-radius-md);

	}


	/* ======================================================
	   Mega variants
	====================================================== */

	.gm-mega-content--cards,
	.gm-mega-content--compact,
	.gm-mega-content--guide,
	.gm-mega-content--links {

		grid-template-columns: 1fr;

	}

	.gm-mega-content--compact {

		width:
			min(
				calc(
					100% -
					var(--gm-space-2xl)
				),
				620px
			);

		margin-left: auto;

	}

	.gm-mega-content--campaign
	.gm-mega-sections {

		grid-template-columns:
			minmax(220px, 1fr);

	}


	/* ======================================================
	   Promo
	   Currently disabled by design.
	====================================================== */

	.gm-mega-promo {

		display: none !important;

	}


	/* ======================================================
	   Scrolled state
	====================================================== */

	body.gm-header-scrolled
	.gm-mega-toggle {

		height: 41px;

	}

	body.gm-header-scrolled
	.gm-nav-inner,
	body.gm-header-scrolled
	.gm-nav a {

		min-height: 44px;

	}

}

/* ==========================================================
   GLOBAL SEARCH
========================================================== */

.gm-search-layer {

	position: fixed;

	top: var(--gm-search-top, 0);
	right: 0;
	bottom: 0;
	left: 0;

	/*
	 * Search header üstünde, drawer altında çalışır.
	 * Bu değer mevcut üretim stacking davranışını korur.
	 */
	z-index: 950;

	visibility: hidden;

	background:
		rgba(24, 22, 19, .16);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		visibility
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-search-layer.is-open {

	visibility: visible;

	opacity: 1;

	pointer-events: auto;

}


/* ==========================================================
   SEARCH SURFACE
========================================================== */

.gm-search-surface {

	padding:
		var(--gm-space-lg)
		var(--gm-space-lg);

	border-top:
		1px solid var(--gm-header-line);

	border-bottom:
		1px solid var(--gm-header-line);

	background:
		rgba(255, 255, 255, .985);

	box-shadow:
		0 16px 36px rgba(24, 22, 19, .045);

}


/* ==========================================================
   SEARCH FORM
========================================================== */

.gm-search-form {

	position: relative;

	display: grid;

	width:
		min(
			calc(100% - var(--gm-space-xl)),
			980px
		);

	min-height: 62px;

	margin-inline: auto;

	grid-template-columns:
		minmax(0, 1fr)
		54px;

	align-items: center;

	gap: 0;

}


/* ==========================================================
   ACCESSIBLE LABEL
========================================================== */

.gm-search-label {

	position: absolute;

	width: 1px;
	height: 1px;

	overflow: hidden;

	clip: rect(0 0 0 0);

	clip-path: inset(50%);

	white-space: nowrap;

}


/* ==========================================================
   SEARCH FIELD
========================================================== */

.gm-search-field {

	position: relative;

	z-index: 1;

	display: flex;

	min-width: 0;
	min-height: 62px;

	padding:
		0
		66px
		0
		var(--gm-space-lg);

	align-items: center;

	gap: var(--gm-space-sm);

	grid-column: 1 / 3;
	grid-row: 1;

	border:
		1px solid var(--gm-color-border);

	border-radius: var(--gm-radius-pill);

	background: var(--gm-color-white);

	box-shadow:
		0 1px 2px rgba(24, 22, 19, .02),
		0 5px 18px rgba(24, 22, 19, .025);

	transition:
		border-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		box-shadow
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-search-field svg {

	width: 22px;
	height: 22px;

	flex: 0 0 auto;

	color: var(--gm-header-muted);

}


/* ==========================================================
   SEARCH INPUT
========================================================== */

.gm-search-field input,
.gm-search-field input[type="search"] {

	width: 100%;
	min-width: 0;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	outline: 0;

	background: transparent;

	box-shadow: none;

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: var(--gm-font-size-md);

	font-weight: var(--gm-font-weight-regular);

	line-height: 1.4;

	-webkit-appearance: none;

	appearance: none;

}

.gm-search-field input:focus,
.gm-search-field input[type="search"]:focus {

	border: 0;

	outline: 0;

	background: transparent;

	box-shadow: none;

}

.gm-search-field input::placeholder {

	color: var(--gm-header-muted);

	opacity: .68;

}

.gm-search-field
input[type="search"]::-webkit-search-cancel-button {

	display: none;

}


/* ==========================================================
   SEARCH FOCUS
========================================================== */

.gm-search-field:focus-within {

	border-color: var(--gm-color-primary);

	background: var(--gm-color-white);

	box-shadow:
		0 0 0 1px rgba(245, 130, 32, .04),
		0 7px 22px rgba(24, 22, 19, .05);

}


/* ==========================================================
   SEARCH SUBMIT
========================================================== */

button.gm-search-submit {

	position: relative;

	z-index: 2;

	display: grid;

	width: 46px;
	min-width: 46px;

	height: 46px;
	min-height: 46px;

	padding: 0;

	grid-column: 2;
	grid-row: 1;

	place-items: center;

	border: 0;

	border-radius: 50%;

	background: var(--gm-color-text);

	color: var(--gm-color-white);

	overflow: visible;

	font-family: var(--gm-font-family);

	font-size: 11px;

	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

	letter-spacing: 0;

	box-shadow: none;

	cursor: pointer;

	-webkit-appearance: none;

	appearance: none;

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		transform
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

button.gm-search-submit::before,
button.gm-search-submit::after {

	display: none;

	content: none;

}

button.gm-search-submit:hover {

	background: var(--gm-color-black);

}

button.gm-search-submit:active {

	transform:
		scale(
			var(--gm-motion-scale-press)
		);

}

button.gm-search-submit:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}


/* ==========================================================
   SEARCH CLOSE
   Intentionally disabled in the current production UI.
========================================================== */

button.gm-search-close {

	display: none;

}


/* ==========================================================
   SEARCH — MOBILE
========================================================== */

@media (max-width: 767px) {

	.gm-search-surface {

		padding:
			var(--gm-space-sm)
			var(--gm-space-sm);

	}

	.gm-search-form {

		width: 100%;

		min-height: 58px;

		grid-template-columns:
			minmax(0, 1fr)
			48px;

	}

	.gm-search-field {

		min-height: 58px;

		padding:
			0
			60px
			0
			var(--gm-space-md);

		grid-column: 1 / 3;

	}

	.gm-search-field svg {

		width: 20px;
		height: 20px;

	}

	.gm-search-field input,
	.gm-search-field input[type="search"] {

		font-size: var(--gm-font-size-md);

	}

	button.gm-search-submit {

		width: 42px;
		min-width: 42px;

		height: 42px;
		min-height: 42px;

		grid-column: 2;

		font-size: 10px;

	}

}


/* ==========================================================
   DRAWER
========================================================== */

.gm-drawer {

	position: fixed;

	top: 0;
	left: 0;

	z-index: 2001;

	display: flex;

	width:
		min(
			430px,
			calc(100vw - 34px)
		);

	height: 100dvh;

	padding:
		0
		28px
		28px;

	flex-direction: column;

	overflow-y: auto;

	background: var(--gm-color-white);

	color: var(--gm-header-ink);

	box-shadow:
		30px 0 80px rgba(32, 29, 24, .16);

	transform: translateX(-105%);

	transition:
		transform
		var(--gm-motion-slow)
		var(--gm-motion-bounce);

}

.gm-drawer.open {

	transform: translateX(0);

}


/* ==========================================================
   DRAWER LINKS — GLOBAL RESET
========================================================== */

.gm-drawer a,
.gm-drawer a:visited {

	color: var(--gm-header-ink);

	text-decoration: none;

}


/* ==========================================================
   DRAWER HEADER
========================================================== */

.gm-drawer-header {

	display: flex;

	min-height: 88px;

	align-items: center;

	justify-content: space-between;

	border-bottom:
		1px solid var(--gm-header-line);

}

.gm-drawer-logo img {

	display: block;

	width: auto;
	height: 42px;

	max-width: 210px;

}


/* ==========================================================
   DRAWER CLOSE
========================================================== */

.gm-drawer-close {

	display: grid;

	width: 42px;
	height: 42px;

	padding: 0;

	place-items: center;

	border: 0;

	border-radius: 50%;

	background: transparent;

	color: var(--gm-header-ink);

	cursor: pointer;

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		transform
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-close:hover,
.gm-drawer-close:focus-visible {

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

	transform: rotate(3deg);

}

.gm-drawer-close svg {

	width: 25px;
	height: 25px;

}


/* ==========================================================
   DRAWER SEARCH
========================================================== */

.gm-drawer-search {

	padding:
		var(--gm-space-lg)
		0
		18px;

}

.gm-drawer-search a {

	display: flex;

	min-height: 54px;

	padding:
		0
		17px;

	align-items: center;

	gap: var(--gm-space-sm);

	border:
		1px solid var(--gm-color-border);

	border-radius: var(--gm-radius-sm);

	background: var(--gm-color-background-soft);

	color: var(--gm-header-muted);

	transition:
		border-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		box-shadow
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-search a:hover,
.gm-drawer-search a:focus-visible {

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-primary) 45%,
			var(--gm-color-border)
		);

	background: var(--gm-color-white);

	color: var(--gm-header-accent);

	box-shadow: var(--gm-shadow-sm);

}

.gm-drawer-search svg {

	width: 20px;
	height: 20px;

}

.gm-drawer-search span {

	font-family: var(--gm-font-family);

	font-size: 14px;

	font-weight: var(--gm-font-weight-medium);

}


/* ==========================================================
   DRAWER NAVIGATION
========================================================== */

.gm-drawer-nav {

	display: flex;

	flex-direction: column;

	gap: 6px;

}

.gm-drawer-nav a,
.gm-drawer-nav a:visited {

	display: flex;

	min-height: 62px;

	margin: 0;

	padding:
		0
		var(--gm-space-sm);

	align-items: center;

	justify-content: space-between;

	border: 0;

	border-radius: var(--gm-radius-sm);

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: 15px;

	font-weight: var(--gm-font-weight-medium);

	text-decoration: none;

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		padding-left
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-nav a:hover,
.gm-drawer-nav a:focus-visible {

	padding-left: var(--gm-space-md);

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

}


/* ==========================================================
   DRAWER NAVIGATION ARROW
========================================================== */

.gm-drawer-nav a > span:last-child {

	color: var(--gm-header-muted);

	font-size: 21px;

	transition:
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		transform
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-nav a:hover > span:last-child,
.gm-drawer-nav a:focus-visible > span:last-child {

	color: var(--gm-header-accent);

	transform: translateX(4px);

}


/* ==========================================================
   ACTIVE DRAWER ITEM
========================================================== */

.gm-drawer-nav .current-menu-item > a,
.gm-drawer-nav .current-menu-ancestor > a,
.gm-drawer-nav .current_page_item > a {

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

}

.gm-drawer-nav .current-menu-item > a::before,
.gm-drawer-nav .current-menu-ancestor > a::before,
.gm-drawer-nav .current_page_item > a::before {

	width: 3px;
	height: 22px;

	margin-right: var(--gm-space-xs);

	border-radius: var(--gm-radius-pill);

	background: var(--gm-header-accent);

	content: "";

}


/* ==========================================================
   DRAWER ACCORDION
========================================================== */

.gm-drawer-nav-item {

	border-radius: var(--gm-radius-sm);

}

.gm-drawer-nav-toggle {

	display: flex;

	width: 100%;

	min-height: 62px;

	padding:
		0
		var(--gm-space-sm);

	align-items: center;

	justify-content: space-between;

	border: 0;

	border-radius: var(--gm-radius-sm);

	background: transparent;

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: 15px;

	font-weight: var(--gm-font-weight-medium);

	text-align: left;

	cursor: pointer;

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-nav-toggle:hover,
.gm-drawer-nav-toggle:focus-visible,
.gm-drawer-nav-item.is-open > .gm-drawer-nav-toggle {

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

}

.gm-drawer-nav-chevron {

	width: 8px;
	height: 8px;

	flex: 0 0 auto;

	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;

	transform: rotate(45deg);

	transition:
		transform
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-nav-item.is-open
.gm-drawer-nav-chevron {

	transform: rotate(225deg);

}


/* ==========================================================
   DRAWER ACCORDION PANEL
========================================================== */

.gm-drawer-nav-panel {

	max-height: 0;

	overflow: hidden;

	visibility: hidden;

	opacity: 0;

	transition:
		max-height
		var(--gm-motion-normal)
		var(--gm-ease-standard),
		opacity
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		visibility
		var(--gm-motion-normal)
		var(--gm-ease-standard);

}

.gm-drawer-nav-item.is-open >
.gm-drawer-nav-panel {

	visibility: visible;

	opacity: 1;

}

.gm-drawer-nav-panel-inner {

	padding:
		0
		var(--gm-space-sm)
		var(--gm-space-lg)
		var(--gm-space-lg);

}


/* ==========================================================
   DRAWER SUBNAV
========================================================== */

.gm-drawer-nav
.gm-drawer-parent-link {

	padding:
		var(--gm-space-xs)
		0
		var(--gm-space-md);

	color: var(--gm-header-accent);

	font-family: var(--gm-font-family);

	font-size: var(--gm-font-size-xs);

	font-weight: var(--gm-font-weight-medium);

}

.gm-drawer-nav-section +
.gm-drawer-nav-section {

	margin-top: var(--gm-space-lg);

}

.gm-drawer-nav
.gm-drawer-section-title {

	margin-bottom: var(--gm-space-xs);

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: 13px;

	font-weight: var(--gm-font-weight-medium);

}

.gm-drawer-nav
.gm-drawer-child-link {

	padding:
		var(--gm-space-2xs)
		0;

	color: var(--gm-header-muted);

	font-family: var(--gm-font-family);

	font-size: 13px;

	font-weight: var(--gm-font-weight-regular);

}

.gm-drawer-nav
.gm-drawer-parent-link:hover,
.gm-drawer-nav
.gm-drawer-parent-link:focus-visible,
.gm-drawer-nav
.gm-drawer-section-title:hover,
.gm-drawer-nav
.gm-drawer-section-title:focus-visible,
.gm-drawer-nav
.gm-drawer-child-link:hover,
.gm-drawer-nav
.gm-drawer-child-link:focus-visible {

	padding-left: 0;

	background: transparent;

	color: var(--gm-header-accent);

}

.gm-drawer-nav-item.current-menu-ancestor >
.gm-drawer-nav-toggle {

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

}


/* ==========================================================
   DRAWER ACTIONS
========================================================== */

.gm-drawer-actions {

	display: grid;

	margin-top: var(--gm-space-xl);

	padding-top: var(--gm-space-lg);

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: var(--gm-space-xs);

	border-top:
		1px solid var(--gm-color-border);

}

.gm-drawer-actions a,
.gm-drawer-actions a:visited {

	display: flex;

	min-height: 58px;

	padding:
		var(--gm-space-xs)
		var(--gm-space-xs);

	flex-direction: column;

	align-items: center;

	justify-content: center;

	gap: var(--gm-space-2xs);

	border:
		1px solid var(--gm-color-border);

	border-radius: var(--gm-radius-sm);

	background: var(--gm-color-white);

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: 11px;

	font-weight: var(--gm-font-weight-medium);

	text-align: center;

	text-decoration: none;

	transition:
		border-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		background-color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		color
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		transform
		var(--gm-motion-fast)
		var(--gm-ease-standard),
		box-shadow
		var(--gm-motion-fast)
		var(--gm-ease-standard);

}

.gm-drawer-actions a:hover,
.gm-drawer-actions a:focus-visible {

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-primary) 35%,
			var(--gm-color-border)
		);

	background: var(--gm-color-background-soft);

	color: var(--gm-header-accent);

	transform: translateY(-2px);

	box-shadow: var(--gm-shadow-sm);

}


/* ==========================================================
   DRAWER ACTION BADGE
========================================================== */

.gm-drawer-actions a span {

	display: grid;

	min-width: 18px;
	height: 18px;

	padding:
		0
		5px;

	place-items: center;

	border-radius: var(--gm-radius-pill);

	background: var(--gm-color-primary);

	color: var(--gm-color-white);

	font-size: 9px;

	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

}


/* ==========================================================
   DRAWER FOOTER
========================================================== */

.gm-drawer-footer {

	margin-top: var(--gm-space-lg);

	padding:
		var(--gm-space-lg)
		var(--gm-space-2xs)
		var(--gm-space-2xs);

	border-top:
		1px solid var(--gm-color-border);

}

.gm-drawer-footer-title {

	margin-bottom: var(--gm-space-sm);

	color: var(--gm-header-muted);

	font-family: var(--gm-font-family);

	font-size: 11px;

	font-weight: var(--gm-font-weight-semibold);

	line-height: 1.3;

	letter-spacing: .12em;

	text-transform: uppercase;

}

.gm-drawer-service {

	display: flex;

	min-height: 34px;

	align-items: flex-start;

	gap: var(--gm-space-xs);

	color: var(--gm-header-ink);

	font-family: var(--gm-font-family);

	font-size: 12px;

	line-height: 1.5;

}

.gm-drawer-service >
span:first-child {

	display: grid;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	margin-top: 1px;

	place-items: center;

	border-radius: 50%;

	background: var(--gm-color-background-soft);

	color: var(--gm-color-primary);

	font-size: 10px;

	font-weight: var(--gm-font-weight-bold);

}


/* ==========================================================
   DRAWER OVERLAY
========================================================== */

.gm-overlay {

	position: fixed;

	inset: 0;

	z-index: 2000;

	display: block;

	width: 100%;
	height: 100%;

	padding: 0;

	border: 0;

	background:
		rgba(25, 22, 18, .50);

	opacity: 0;

	visibility: hidden;

	cursor: pointer;

	backdrop-filter: blur(2px);

	-webkit-backdrop-filter: blur(2px);

	transition:
		opacity
		var(--gm-motion-normal)
		var(--gm-ease-standard),
		visibility
		var(--gm-motion-normal)
		var(--gm-ease-standard);

}

.gm-overlay.open {

	opacity: 1;

	visibility: visible;

}


/* ==========================================================
   DRAWER ACCESSIBILITY
========================================================== */

.gm-drawer a:focus-visible,
.gm-drawer button:focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}


/* ==========================================================
   DRAWER — MOBILE
========================================================== */

@media (max-width: 767px) {

	.gm-drawer {

		width:
			min(
				390px,
				calc(100vw - 18px)
			);

		padding-right: 20px;
		padding-left: 20px;

	}

	.gm-drawer-header {

		min-height: 78px;

	}

	.gm-drawer-logo img {

		height: 36px;

	}

	.gm-drawer-search {

		padding-top: 18px;

	}

	.gm-drawer-nav a,
	.gm-drawer-nav-toggle {

		min-height: 58px;

		font-size: 14px;

	}

	.gm-drawer-nav
	.gm-drawer-parent-link,
	.gm-drawer-nav
	.gm-drawer-section-title,
	.gm-drawer-nav
	.gm-drawer-child-link {

		min-height: 0;

	}

	.gm-drawer-actions {

		gap: 7px;

	}

	.gm-drawer-actions a {

		min-height: 54px;

		font-size: 10px;

	}

	.gm-drawer-footer {

		margin-top: 20px;

		padding-top: 18px;

	}

	.gm-drawer-service {

		font-size: 11px;

	}

}

/* ==========================================================
   RESPONSIVE HEADER
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1081px) {

	:root {

		--gm-header-height: 78px;

	}


	/* ======================================================
	   Service Bar
	====================================================== */

	.gm-service,
	.gm-service-shell {

		min-height: 36px;

	}

	.gm-service-shell {

		width:
			min(
				calc(100% - var(--gm-space-2xl)),
				var(--gm-container-width)
			);

		gap: var(--gm-space-lg);

	}

	.gm-service-item {

		font-size: 11px;

		letter-spacing: .02em;

	}


	/* ======================================================
	   Main Header Geometry
	====================================================== */

	.gm-headrow {

		width:
			min(
				calc(100% - var(--gm-space-2xl)),
				var(--gm-container-width)
			);

		min-height: var(--gm-header-height);

		margin-inline: auto;

		grid-template-columns:
			minmax(270px, 1fr)
			auto
			minmax(270px, 1fr);

		gap: var(--gm-space-xl);

	}

	.gm-head-start,
	.gm-head-actions {

		gap: var(--gm-space-lg);

	}


	/* ======================================================
	   Logo
	====================================================== */

	.gm-logo img {

		height: 62px;

		max-width: 270px;

	}


	/* ======================================================
	   Desktop Labels
	====================================================== */

	.gm-control-label,
	.gm-action-label {

		font-size: var(--gm-font-size-xs);

		font-weight: var(--gm-font-weight-medium);

	}


	/* ======================================================
	   Header Surface
	====================================================== */

	.gm-header {

		box-shadow:
			0 1px 0 var(--gm-header-line),
			0 12px 35px rgba(0, 0, 0, .03);

	}


	/* ======================================================
	   Scrolled State
	====================================================== */

	body.gm-header-scrolled
	.gm-headrow {

		min-height: 66px;

	}

	body.gm-header-scrolled
	.gm-logo img {

		height: 48px;

	}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1080px) {

	.gm-headrow {

		grid-template-columns:
			1fr
			auto
			1fr;

		gap: var(--gm-space-md);

	}

	.gm-head-start,
	.gm-head-actions {

		gap: var(--gm-space-md);

	}

	.gm-control-label,
	.gm-action-label {

		display: none;

	}

	.gm-header-control,
	.gm-header-action {

		justify-content: center;

	}

	.gm-logo img {

		height: 43px;

		max-width: 200px;

	}

	.gm-nav-inner {

		justify-content: flex-start;

	}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

	:root {

		--gm-header-height: 66px;

	}


	/* ======================================================
	   Service Bar
	====================================================== */

	.gm-service {

		min-height: 31px;

	}

	.gm-service-shell {

		width:
			calc(
				100% -
				var(--gm-space-lg)
			);

		min-height: 31px;

	}

	.gm-service-primary {

		font-size: 10px;

		letter-spacing: 0;

	}

	.gm-service-primary svg {

		width: 15px;
		height: 15px;

	}

	.gm-service-divider,
	.gm-service-item:not(.gm-service-primary) {

		display: none;

	}


	/* ======================================================
	   Header Row
	====================================================== */

	.gm-headrow {

		width:
			calc(
				100% -
				var(--gm-space-lg)
			);

		min-height: var(--gm-header-height);

		grid-template-columns:
			78px
			minmax(0, 1fr)
			78px;

		gap: 0;

	}

	.gm-head-start,
	.gm-head-actions {

		gap: 13px;

	}


	/* ======================================================
	   Controls
	====================================================== */

	.gm-menu,
	.gm-search,
	.gm-header-action {

		width: 30px;

		min-height: 42px;

	}

	.gm-menu-lines {

		width: 21px;

	}

	.gm-menu-lines span {

		width: 21px;

	}

	.gm-menu-lines span:last-child {

		width: 14px;

	}


	/* ======================================================
	   Logo
	====================================================== */

	.gm-logo img {

		width: auto;

		height: 36px;

		max-width: 154px;

	}


	/* ======================================================
	   Mobile Actions
	====================================================== */

	.gm-whatsapp,
	.gm-favorites {

		display: none;

	}

	.gm-head-actions {

		justify-content: flex-end;

	}

	.gm-action-icon {

		width: 25px;

	}

	.gm-cart-count {

		top: -3px;

		right: -7px;

	}


	/* ======================================================
	   Desktop Nav Disabled
	====================================================== */

	.gm-nav {

		display: none;

	}


	/* ======================================================
	   Mobile Scrolled State
	====================================================== */

	body.gm-header-scrolled
	.gm-headrow {

		min-height: 58px;

	}

	body.gm-header-scrolled
	.gm-logo img {

		height: 32px;

	}

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 390px) {

	.gm-headrow {

		width:
			calc(
				100% -
				18px
			);

		grid-template-columns:
			72px
			minmax(0, 1fr)
			72px;

	}

	.gm-head-start,
	.gm-head-actions {

		gap: 9px;

	}

	.gm-logo img {

		height: 33px;

		max-width: 142px;

	}

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-header *,
	.gm-drawer,
	.gm-overlay,
	.gm-search-layer,
	.gm-mega-layer,
	.gm-drawer-nav-panel,
	.gm-drawer-nav-chevron,
	.gm-drawer-nav-toggle {

		scroll-behavior: auto;

		transition: none !important;

	}

}