/* ============================================================================
   gtr-header.css — redesigned desktop header (PRD: docs/task/…PRD….md)
   Loaded LAST by common/header.twig, after stylesheet.css / header2.css /
   theme.css, so every rule here wins at equal specificity without !important.
   The only sanctioned !important uses answer the ptmenu module's inline
   #pt-menu-<id> ID-specificity styles (architecture doc §4).
   Scope: every selector is prefixed .gtr-header — nothing leaks to page body.
   Sections: 1 tokens · 2 shared · 3 utility bar · 4 primary row · 5 menu
             6 actions · 7 search overlay · 8 FB bar · 9 <992 tablet
             10 accessibility
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
.gtr-header {
	--gtr-orange: #e85224;        /* brand accent — icons, large elements only */
	--gtr-orange-strong: #c73e12; /* AA on white — interactive text, badges    */
	--gtr-ink: #2f2a26;
	--gtr-muted: #6f6862;
	--gtr-border: #ece6df;
	--gtr-surface: #f7f4f0;
	--gtr-transition: 180ms ease;
}

/* 2. Shared ---------------------------------------------------------------- */
/* Smart sticky header (approved 2026-08-15): the header sticks; the Facebook
   bar collapses while scrolling down and returns on scroll up
   (body.gtr-scroll-down, toggled by the scroll watcher in header2.twig). */
.gtr-header {
	position: sticky;
	top: 0;
	z-index: 300;
	background: #fff;
	transition: top 280ms ease;
}
/* Nike-style hide-on-scroll (2026-08-21): scrolling down slides the whole
   sticky header up by the utility bar's height (--gtr-topbar-h, measured by
   the script in header2.twig) while the Facebook strip collapses (§8) — only
   the main navbar stays pinned. Scrolling up restores all three rows. */
body.gtr-scroll-down .gtr-header {
	top: calc(-1 * var(--gtr-topbar-h, 40px));
}
/* Keep keyboard focus out of the off-screen strip: visibility flips only
   after the 280ms slide finishes; restoring is instant. */
body.gtr-scroll-down .gtr-utility {
	visibility: hidden;
	transition: visibility 0s 280ms;
}
.gtr-header a { text-decoration: none; }
/* One icon system: inline Feather-style SVGs (stroke 2, currentColor) in the
   markup; the two module/AJAX-owned glyphs (search button, cart bag) are the
   same shapes as CSS masks so they inherit color identically. */
.gtr-icon {
	display: block;
	width: 22px; height: 22px;
	flex: 0 0 auto;
}
.gtr-icon--sm { width: 15px; height: 15px; }
.gtr-vh {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.gtr-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--gtr-orange-strong);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}

/* 3. Utility bar ------------------------------------------------------------ */
.gtr-utility {
	position: relative;
	z-index: 40;
	background: var(--gtr-surface);
	border-bottom: 1px solid var(--gtr-border);
	font-size: 12.5px;
	/* Topmost pixel row of the page. No-op until the site opts into
	   viewport-fit=cover (or is installed as a PWA), but written so the strip
	   already clears a notch on the day it does — see header-mobile.css §3 for
	   the same treatment on the phone header. */
	padding-top: env(safe-area-inset-top);
}
.gtr-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
	gap: 16px;
}
.gtr-utility__group {
	display: flex;
	align-items: center;
	min-width: 0;
}
.gtr-utility__group--left  { gap: 18px; }
.gtr-utility__group--right > * {
	padding-left: 16px;
	margin-left: 16px;
	border-left: 1px solid var(--gtr-border);
}
.gtr-utility__group--right > *:first-child {
	padding-left: 0; margin-left: 0; border-left: 0;
}
.gtr-utility__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gtr-ink);
	line-height: 38px;
	transition: color var(--gtr-transition);
}
.gtr-utility__link:hover,
.gtr-utility__link:focus { color: var(--gtr-orange-strong); }
.gtr-utility__link .gtr-icon { color: var(--gtr-muted); transition: color var(--gtr-transition); }
.gtr-utility__link:hover .gtr-icon { color: inherit; }

/* Currency / language / account modules, restyled (they arrive white-on-orange
   from header2.css .header-dropdown rules). */
.gtr-utility .header-dropdown .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	line-height: 38px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--gtr-ink);
	background: transparent !important;
	text-transform: none;
	transition: color var(--gtr-transition);
}
.gtr-utility .header-dropdown .dropdown-toggle:hover,
.gtr-utility .header-dropdown .dropdown-toggle:focus { color: var(--gtr-orange-strong); }
.gtr-utility .header-dropdown .dropdown-toggle img {
	width: 18px; height: auto;
	border-radius: 2px;
	display: inline-block;
}
.gtr-utility .header-dropdown .dropdown-toggle .icon-right {
	font-size: 10px !important;
	margin: 0;
	color: var(--gtr-muted);
}
.gtr-utility .header-dropdown .dropdown-menu {
	margin-top: 0;
	font-size: 12.5px;
	min-width: 150px;
}
.gtr-utility .btn-group { position: relative; }

/* 4. Primary row ------------------------------------------------------------ */
/* No z-index here: it would create a stacking context that traps the fixed
   cart drawer (z-index 1300) below the utility strip (z-index 40). With
   z-index auto the drawer escapes to the header's context and wins; the
   utility strip still paints above the main row for its dropdowns. */
.gtr-main {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--gtr-border);
}
.gtr-main__inner {
	display: flex;
	align-items: center;
	min-height: 84px;
	gap: 20px;
}
.gtr-header #logo {
	padding: 0;
	margin: 0;
	max-width: none;
	float: none;
	flex: 0 0 auto;
}
.gtr-logo img {
	display: block;
	max-height: 70px;
	width: auto;
}
.gtr-burger { display: none; }

/* 5. Category menu (ptmenu module, restyled in place) ----------------------- */
.gtr-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}
.gtr-nav .horizontal-menu { display: block; }
/* The ptmenu root ships with Bootstrap's .visible-lg (display:none !important
   below 1200). The desktop breakpoint is 992 — Bootstrap's own lg boundary,
   where .container grows to 970px and the nav fits; small laptops land here.
   Below 992 (true tablets) the burger layout takes over. */
@media (min-width: 992px) {
	.gtr-nav .visible-lg { display: block !important; }
}
.gtr-nav .ul-top-items {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
}
.gtr-nav .ul-top-items .li-top-item {
	padding: 28px 0; /* vertical padding = hover bridge down to the dropdowns */
	margin: 0;
}
/* Orange interaction states — the module's inline #pt-menu-<id> styles carry
   the jewelry theme's bronze (#C1906F); ID specificity forces !important here. */
.gtr-nav .ul-top-items .li-top-item:hover .a-top-link,
.gtr-nav .ul-top-items .li-top-item:hover .a-top-link i,
.gtr-nav .ul-top-items .li-top-item.active .a-top-link {
	color: var(--gtr-orange-strong) !important;
}
.gtr-nav .ul-top-items .li-top-item > a > span:after {
	background: var(--gtr-orange-strong) !important;
}
.gtr-nav .a-top-link { white-space: nowrap; }
/* 992–1280: 8 labels + logo + icons get tight — close up the gaps before the
   layout switch, never let labels wrap (PRD §40). Inline #pt-menu-<id> styles
   set the padding, so !important is required. */
@media (min-width: 992px) and (max-width: 1280px) {
	.gtr-main__inner { gap: 12px; }
	.gtr-nav .ul-top-items .li-top-item .a-top-link {
		padding: 5px 9px !important;
		font-size: 1.3rem !important;
	}
	.gtr-logo img { max-height: 56px; }
	.gtr-iconlink, .gtr-cart { width: 40px; }
}
/* 992–1120 (small laptops, 970px container): hardest squeeze — smaller type,
   carets dropped, compact logo and icon boxes. */
@media (min-width: 992px) and (max-width: 1120px) {
	.gtr-main__inner { gap: 8px; }
	.gtr-nav .ul-top-items .li-top-item .a-top-link {
		padding: 5px 6px !important;
		font-size: 1.2rem !important;
	}
	.gtr-nav .ul-top-items .li-top-item > a > i { display: none; }
	.gtr-logo img { max-height: 48px; }
	.gtr-iconlink, .gtr-cart { width: 36px; }
	.gtr-cart #cart > .btn:before,
	.gtr-iconlink .gtr-icon { width: 20px; height: 20px; }
}
.gtr-nav .mega-menu-container,
.gtr-nav .ul-second-items {
	border: 1px solid var(--gtr-border);
	border-top: 2px solid var(--gtr-orange-strong);
	box-shadow: 0 14px 30px rgba(47, 42, 38, 0.10);
}

/* 6. Store actions ----------------------------------------------------------- */
.gtr-actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 2px;
}
.gtr-iconlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	color: var(--gtr-ink);
	font-size: 21px;
	transition: color var(--gtr-transition);
}
.gtr-iconlink:hover,
.gtr-iconlink:focus { color: var(--gtr-orange-strong); }
.gtr-iconlink .gtr-badge,
.gtr-cart .gtr-badge {
	position: absolute;
	top: 1px; right: 1px;
}
/* Old header2.css styles #wishlist-total by ID: white text (for the old orange
   bar), inline-block + vertical-align:top (which floats it above the flex row),
   and an Ionicons heart via :before. Neutralize all of it at ID specificity. */
.gtr-header #wishlist-total {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin: 0;
	line-height: 1;
	vertical-align: middle;
	text-transform: none;
	color: var(--gtr-ink);
}
.gtr-header #wishlist-total:hover,
.gtr-header #wishlist-total:focus { color: var(--gtr-orange-strong); }
.gtr-header #wishlist-total:before { content: none; }

/* Cart: keep the module's #cart > button / #cart > ul contract. The button's
   innerHTML is replaced wholesale by common.js, so the bag glyph must live in
   CSS :before and the badge outside the button. */
.gtr-cart {
	position: relative;
	width: 44px; height: 44px;
	flex: 0 0 auto;
}
.gtr-cart #cart {
	display: block;
	width: 100%; height: 100%;
	margin: 0;
}
.gtr-cart #cart > .btn {
	display: block;
	width: 100%; height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--gtr-ink);
	/* font-size 0, not 21px: Bootstrap's .button('loading') swaps the button
	   content for the bare data-loading-text STRING — a text node no span
	   selector can hide. Zeroing the font kills any raw text (the "Loadi…"
	   overlap next to the bag) while the :before icon keeps its own 22px
	   mask box and screen readers still get the text. */
	font-size: 0;
	line-height: 44px;
	text-align: center;
	transition: color var(--gtr-transition);
}
.gtr-cart #cart > .btn:hover { color: var(--gtr-orange-strong); }
/* While the add/update request is in flight Bootstrap disables the button —
   pulse the bag as the busy affordance instead of injected text. */
.gtr-cart #cart > .btn[disabled]:before,
.gtr-cart #cart > .btn.disabled:before {
	animation: gtr-cart-busy 800ms ease-in-out infinite;
}
@keyframes gtr-cart-busy {
	50% { opacity: .3; }
}
.gtr-cart #cart > .btn:before {
	content: "";
	display: inline-block;
	width: 22px; height: 22px;
	margin: 0;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gtr-cart #cart > .btn #cart-total,
.gtr-cart #cart > .btn span {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
/* The mini cart opens as a right-side drawer above everything — Bootstrap's
   .open mechanics still drive it, but it no longer fights the sticky header
   (z-index 1300 > header 300). */
.gtr-cart #cart > .dropdown-menu {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	left: auto;
	width: min(92vw, 380px);
	margin: 0;
	padding: 56px 20px 20px;
	border: 0;
	border-radius: 0;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1300;
}
.gtr-cart .cart-dropdown-menu-close {
	position: absolute;
	top: 10px; right: 12px;
	width: 40px; height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 22px;
	color: var(--gtr-ink);
	cursor: pointer;
	z-index: 2;
}
.gtr-cart .cart-dropdown-menu-close:hover { color: var(--gtr-orange-strong); }
/* The theme skins the dropdown with a decorative pseudo-element "handle". */
.gtr-cart #cart > .dropdown-menu:before,
.gtr-cart #cart > .dropdown-menu:after {
	display: none;
	content: none;
}
/* The basket's rows, totals and action buttons moved to
   plaza/cart/gtr-cart.css §4 on 2026-08-22 — `common/cart.twig` renders on
   BOTH headers, so one sheet owns the whole widget body and the two headers
   keep only their own panel geometry (above). The former .cart-actions
   block lived here and had to be duplicated in header-mobile.css §9; it is
   deliberately not replaced. */
/* The Messenger bubble yields while the cart drawer is open (its maxed
   z-index cannot be out-stacked; :has() is progressive enhancement). */
body:has(.gtr-cart #cart.open) .messenger-float,
body:has(.gtr-cart #cart.open) #fb-root .fb_dialog,
body:has(.gtr-cart #cart.open) #fb-root iframe {
	visibility: hidden !important;
}

/* 7. Search (was: the module's dark fullscreen dropdown) ---------------------
   Replaced 2026-08-22 by the Nike-style search takeover — trigger button
   `.gtr-searchlay-open` in the actions cluster, overlay markup at the end
   of the .gtr-main <header> (duplicated in header_mobile.twig), all styling
   in plaza/header/gtr-search.css, behavior in
   javascript/plaza/gtr-search/gtr-search.js. */

/* 8. Announcement bar (was: Facebook marquee strip) --------------------------
   Replaced 2026-08-22 by the expandable announcement bar — markup in
   header2.twig AND header_mobile.twig (identical copies), all styling in
   plaza/header/gtr-annbar.css, behavior in
   javascript/plaza/gtr-annbar/gtr-annbar.js. The scroll-down collapse for
   both headers' body classes lives in that file too. */

/* 9. Below the desktop breakpoint — true tablets (768–991px), which get this
   template server-side: burger + centered logo + actions + search row, and
   the Phase C drawer. Small laptops (≥992px) stay on the desktop layout. --- */
@media (max-width: 991.98px) {
	.gtr-nav { display: none; }
	.gtr-utility__link { display: none; } /* icons cover these below 992 */
	.gtr-main__inner {
		flex-wrap: wrap;
		min-height: 64px;
		gap: 10px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.gtr-burger {
		display: flex;
		align-items: center;
		order: 1;
	}
	/* The mobile-menu module paints its own bar via inline #pt-menu-<id> CSS —
	   ID specificity again, hence !important. */
	.gtr-burger .pt-menu-bar {
		background: transparent !important;
		color: var(--gtr-ink) !important;
		padding: 0 !important;
	}
	.gtr-burger .pt-menu-bar i {
		color: var(--gtr-ink);
		font-size: 26px;
		width: 44px;
		line-height: 44px;
		text-align: center;
	}
	.gtr-header #logo {
		order: 2;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}
	.gtr-logo img { max-height: 52px; }
	.gtr-actions { order: 3; }
	/* While the tablet drawer is open, the Messenger bubble yields (its maxed
	   z-index cannot be out-stacked). :has() is progressive enhancement —
	   older browsers simply keep the bubble. */
	body:has(.gtr-burger .pt-menu-bar.opened) .messenger-float,
	body:has(.gtr-burger .pt-menu-bar.opened) #fb-root .fb_dialog,
	body:has(.gtr-burger .pt-menu-bar.opened) #fb-root iframe {
		visibility: hidden !important;
	}

	/* --- Phase C: tablet drawer ------------------------------------------
	   The burger opens the ptmenu module's built-in fixed panel (header2.css
	   .mobile-menu rules: white panel from the left, dark scrim, close X
	   fixed top-right). These rules bring it to Phase B drawer parity:
	   85vw/360px panel, 52px full rows, plain right chevrons, indented
	   sub-lists. The module's inline #pt-menu-<id> styles force !important
	   on the row geometry, as documented. */
	.gtr-burger .mobile-menu .ul-top-items {
		width: 85vw;
		max-width: 360px;
		padding: 1.2rem 2rem calc(2.4rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	}
	/* The module's own "Mobile Menu" heading duplicates context — the close X
	   and the category list are enough, matching the phone drawer. */
	.gtr-burger .menu-mobile-title { display: none; }
	.gtr-burger .mobile-menu .li-top-item {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.gtr-burger .mobile-menu .li-top-item .a-top-link {
		display: flex !important;
		align-items: center;
		min-height: 52px;
		padding: 8px 44px 8px 0 !important;
		border-bottom: 1px solid var(--gtr-border);
		line-height: 1.3;
	}
	.gtr-burger .mobile-menu .a-click-show {
		top: 50%;
		right: 0;
		width: 44px;
		height: 44px;
		margin-top: -22px;
		line-height: 44px;
		border: 0;
		background: transparent;
		color: var(--gtr-muted);
		border-radius: 8px;
	}
	.gtr-burger .mobile-menu .a-click-show:hover {
		background: transparent;
		color: var(--gtr-orange-strong);
		border: 0;
	}
	.gtr-burger .mobile-menu .ul-second-items,
	.gtr-burger .mobile-menu .ul-third-items {
		padding-left: 1.6rem;
	}
	.gtr-burger .mobile-menu .a-second-link,
	.gtr-burger .mobile-menu .a-third-link {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 4px 0;
		color: var(--gtr-muted);
	}
}
@media (max-width: 479.98px) {
	.gtr-utility__inner { justify-content: center; }
}

/* 10b. Back-to-top ------------------------------------------------------------
   Overrides stylesheet.css's #back-top (tan-on-tan arrow at bottom:10%,
   where it collided with the Messenger bubble). Brand color, white arrow
   (5.1:1), stacked above the chat widget with a clear gap. */
#back-top {
	right: 24px;
	bottom: 96px;
	width: 44px;
	height: 44px;
	line-height: 42px;
	border: 0;
	border-radius: 50%;
	background: #c73e12;
	color: #fff;
	font-size: 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	z-index: 250;
}
#back-top:hover {
	background: #a83210;
	color: #fff;
}

/* 10. Accessibility ---------------------------------------------------------- */
.gtr-header a:focus-visible,
.gtr-header button:focus-visible {
	outline: 2px solid var(--gtr-orange-strong);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.gtr-header, .gtr-header * { transition: none !important; }
}