/* ==========================================================================
   Gertrudes — search overlay (2026-08-22, Nike-style takeover)
   --------------------------------------------------------------------------
   One overlay for BOTH headers: white sheet slides from the top with a big
   rounded search field, a Cancel control, and "Popular Search Terms" pills
   (curated from real catalog terms — every pill returns results). Markup is
   duplicated in header2.twig and header_mobile.twig (the Twig loader cannot
   include partials); behavior in javascript/plaza/gtr-search/gtr-search.js.

   TWO different search widgets render inside .gtr-searchlay__field:
   - Desktop (header2.twig): the ptsearch module `#search-by-category` —
     its own inline JS (AJAX suggestions, Search button navigation) binds by
     id/class, so it keeps working wherever the widget renders. Its category
     filter and dropdown-toggle chrome are hidden here; `.cate-selected`
     stays in the DOM at data-value 0 (All Categories) for the module JS.
   - Phone (header_mobile.twig): the stock `#search` input-group, driven by
     common.js — which is why the overlay must stay INSIDE the <header>
     element (common.js reads `header #search input[name="search"]`).
   Both are restyled to the same pill field; neither widget's markup or
   script is touched.
   ========================================================================== */

:root {
	--gs-ink: #2f2a26;
	--gs-muted: #6f6862;
	--gs-orange: #c73e12;
	--gs-field: #f4efe9;
	--gs-field-hover: #ece4db;
	--gs-line: #efe8e2;
}

/* Trigger button (desktop actions cluster) — explicit colors because the
   generated plaza/theme.css styles bare button{} dark with a tan hover. */
.gtr-searchlay-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gs-ink);
	cursor: pointer;
	transition: color 180ms ease;
}

.gtr-searchlay-open:hover,
.gtr-searchlay-open:active {
	background: transparent;
	color: var(--gs-orange);
}

/* --------------------------------------------------------------------------
   1. Overlay shell
   -------------------------------------------------------------------------- */
.gtr-searchlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.gtr-searchlay[hidden] { display: none; }

.gtr-searchlay__scrim {
	position: absolute;
	inset: 0;
	background: rgba(35, 27, 25, 0.5);
}

.gtr-searchlay__sheet {
	position: relative;
	max-height: 100%;
	overflow-y: auto;
	padding: 18px 24px 44px;
	background: #fff;
	box-shadow: 0 24px 48px rgba(35, 27, 25, 0.18);
	animation: gs-sheet-in 240ms ease;
}

@keyframes gs-sheet-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.gtr-searchlay__bar {
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: 1200px;
	margin: 0 auto;
}

.gtr-searchlay__logo {
	flex: 0 0 auto;
	line-height: 0;
}

.gtr-searchlay__logo img {
	width: auto;
	max-height: 52px;
}

.gtr-searchlay__field {
	position: relative;
	flex: 1 1 auto;
	max-width: 760px;
	margin: 0 auto;
}

.gtr-searchlay__cancel {
	flex: 0 0 auto;
	padding: 10px 6px;
	border: 0;
	background: transparent;
	color: var(--gs-ink);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color 160ms ease;
}

.gtr-searchlay__cancel:hover,
.gtr-searchlay__cancel:active {
	background: transparent;
	color: var(--gs-orange);
}

/* --------------------------------------------------------------------------
   2. The field — one look for both widgets
   -------------------------------------------------------------------------- */
/* Shared magnifier (mask, so it inherits color) for both submit buttons.
   Desktop selectors below carry the #gtr-searchlay prefix on purpose:
   header2.css styles this widget with double-ID selectors
   (#search-by-category .search-container #text-search, absolute
   #sp-btn-search, 40%-width .search-ajax) that outrank plain class scoping —
   the overlay id ties or beats them, and this file loads later. */
#gtr-searchlay .search-container #btn-search-category:before,
.gtr-searchlay__field #search .btn:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	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%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%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%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Desktop widget: ptsearch #search-by-category ---- */
#gtr-searchlay #search-by-category {
	position: relative;
	width: 100%;
	margin: 0;
	float: none;
}

#gtr-searchlay .search-button { display: none; }

/* The module wraps everything in a Bootstrap .dropdown-menu — flatten it. */
#gtr-searchlay .search-content {
	display: block;
	position: static;
	float: none;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#gtr-searchlay .search-container {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: none;
	padding: 0;
	border-radius: 999px;
	background: var(--gs-field);
	transition: background 160ms ease;
}

/* Focus indication lives on the pill, not the input: a rounded soft ring
   (box-shadow follows the radius) instead of the browser's rectangle. The
   input itself is excluded from the outline rules in §6. */
#gtr-searchlay .search-container:focus-within {
	background: var(--gs-field-hover);
	box-shadow: 0 0 0 2px rgba(199, 62, 18, 0.35);
}

#gtr-searchlay .categories-container { display: none; }

#gtr-searchlay .search-container #text-search {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 48px;
	margin: 0;
	/* Right padding clears the overlay's own clear (×) button — §7. */
	padding: 0 46px 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gs-ink);
	font-size: 16px;
}

/* header2.css pins this absolute over the field's left edge — restore it to
   the flex flow so the flattened pill lays out [magnifier][input]. */
#gtr-searchlay #sp-btn-search {
	position: static;
	order: 1;
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	padding: 0;
}

#gtr-searchlay #btn-search-category {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 48px;
	margin: 0;
	padding: 0 0 0 6px;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--gs-muted);
	cursor: pointer;
}

#gtr-searchlay #btn-search-category:hover,
#gtr-searchlay #btn-search-category:active {
	background: transparent;
	color: var(--gs-orange);
}

#gtr-searchlay #btn-search-category .hidden-xs { display: none; }

/* Live suggestions: a white card under the field, full field width
   (header2.css caps it at 40%/600px — undo). :empty hides the border when
   the module has cleared the results. */
#gtr-searchlay .search-ajax {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
	background: transparent;
}

#gtr-searchlay .ajax-result-container {
	max-height: 46vh;
	overflow-y: auto;
	border: 1px solid var(--gs-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(35, 27, 25, 0.14);
}

#gtr-searchlay .ajax-result-container:empty { display: none; }

/* The list inside the card brings its own border/height caps — the card
   owns those now. */
#gtr-searchlay .search-ajax .ajax-result-container .ajax-result-list {
	border: 0;
	max-height: none;
}

#gtr-searchlay .ajax-loader-container {
	position: absolute;
	top: -56px;
	right: 16px;
}

/* ---- Phone widget: stock #search input-group ---- */
.gtr-searchlay__field #search {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 999px;
	background: var(--gs-field);
	transition: background 160ms ease;
}

.gtr-searchlay__field #search:focus-within {
	background: var(--gs-field-hover);
	box-shadow: 0 0 0 2px rgba(199, 62, 18, 0.35);
}

.gtr-searchlay__field #search .form-control {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	/* Right padding clears the overlay's own clear (×) button — §7. */
	padding: 0 46px 0 4px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gs-ink);
	font-size: 16px;
}

.gtr-searchlay__field #search .input-group-btn {
	order: 1;
	display: block;
	width: auto;
}

.gtr-searchlay__field #search .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 48px;
	margin: 0;
	padding: 0 0 0 6px;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--gs-muted);
	cursor: pointer;
}

.gtr-searchlay__field #search .btn:hover,
.gtr-searchlay__field #search .btn:active {
	background: transparent;
	color: var(--gs-orange);
}

.gtr-searchlay__field #search .btn i { display: none; }

/* --------------------------------------------------------------------------
   3. Suggestion panel — recent searches, then popular terms
   -------------------------------------------------------------------------- */
/* One column aligned with the field above it, so the sheet reads as a single
   stack: what you searched before, then what other people search for. */
.gtr-searchlay__panel {
	max-width: 760px;
	margin: 0 auto;
}

.gtr-searchlay__recent,
.gtr-searchlay__terms {
	margin-top: 28px;
}

.gtr-searchlay__recent[hidden] { display: none; }

.gtr-searchlay__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.gtr-searchlay__label {
	margin: 0 0 14px;
	color: var(--gs-muted);
	font-size: 14px;
}

.gtr-searchlay__clearall {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gs-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 160ms ease;
}

.gtr-searchlay__clearall:hover,
.gtr-searchlay__clearall:active {
	background: transparent;
	color: var(--gs-orange);
}

.gtr-searchlay__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
}

.gtr-searchlay__pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--gs-field);
	color: var(--gs-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 160ms ease;
}

.gtr-searchlay__pill:hover,
.gtr-searchlay__pill:focus {
	background: var(--gs-field-hover);
	color: var(--gs-ink);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Scroll lock + Messenger yield while open (drawer precedent)
   -------------------------------------------------------------------------- */
body.gtr-search-open { overflow: hidden; }

body.gtr-search-open .messenger-float,
body.gtr-search-open #fb-root .fb_dialog,
body.gtr-search-open #fb-root iframe {
	visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   5. Phones: full-screen white sheet, no logo (Nike mobile pattern)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.gtr-searchlay__sheet {
		min-height: 100%;
		padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	}

	.gtr-searchlay__logo { display: none; }

	.gtr-searchlay__bar { gap: 12px; }

	.gtr-searchlay__recent,
	.gtr-searchlay__terms { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   6. Focus + reduced motion
   -------------------------------------------------------------------------- */
/* !important answers stylesheet.css:7's global *:focus{outline:none !important}.
   Inputs are excluded — their focus ring is the pill's :focus-within
   box-shadow above, which follows the rounded shape. */
.gtr-searchlay button:focus-visible,
.gtr-searchlay a:focus-visible,
.gtr-searchlay-open:focus-visible {
	outline: 2px solid var(--gs-orange) !important;
	outline-offset: 2px;
}

.gtr-searchlay input:focus,
.gtr-searchlay input:focus-visible {
	outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gtr-searchlay__sheet { animation: none; }

	.gtr-searchlay-open,
	.gtr-searchlay__cancel,
	.gtr-searchlay__pill,
	.gtr-searchlay__field .search-container,
	.gtr-searchlay__field #search {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   7. Clear (×) inside the field
   --------------------------------------------------------------------------
   Lives in the overlay markup, NOT inside the widgets: common.js binds the
   phone submit with $('#search input').parent().find('button'), so a second
   <button> inside #search would navigate on click. Sitting in
   .gtr-searchlay__field (position:relative) it is a sibling of both widgets
   and one rule positions it over either pill.
   -------------------------------------------------------------------------- */
.gtr-searchlay__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(47, 42, 38, 0.08);
	color: var(--gs-ink);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.gtr-searchlay__clear[hidden] { display: none; }

.gtr-searchlay__clear:hover,
.gtr-searchlay__clear:active {
	background: rgba(199, 62, 18, 0.14);
	color: var(--gs-orange);
}

.gtr-searchlay__clear svg {
	width: 15px;
	height: 15px;
}

/* type="search" (set by gtr-search.js for the phone keyboard's Search key)
   brings WebKit's own cancel button — the one above is the styled one. */
.gtr-searchlay__field input::-webkit-search-cancel-button,
.gtr-searchlay__field input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Recent-search pills carry their own remove control, so the pill becomes a
   two-part shape: the term is the link, the × drops it from history. */
.gtr-searchlay__pill--recent {
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.gtr-searchlay__pill-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 6px 10px 18px;
	color: inherit;
	text-decoration: none;
}

.gtr-searchlay__pill-go:before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--gs-muted);
	-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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gtr-searchlay__pill-go:hover,
.gtr-searchlay__pill-go:focus {
	color: inherit;
	text-decoration: none;
}

.gtr-searchlay__pill-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gs-muted);
	cursor: pointer;
	transition: color 160ms ease;
}

.gtr-searchlay__pill-x:hover,
.gtr-searchlay__pill-x:active {
	background: transparent;
	color: var(--gs-orange);
}

/* --------------------------------------------------------------------------
   8. Live suggestions — one list for both headers
   --------------------------------------------------------------------------
   The desktop module fills .ajax-result-container from its own inline script;
   gtr-search.js builds the identical container for the phone widget and fills
   it from the same ptsearch endpoint. Everything below is scoped to
   #gtr-searchlay so it outranks header2.css's
   `.ajax-result-item .product-info .detail ...` chains on desktop while being
   the only styling the phone list has.
   -------------------------------------------------------------------------- */
#gtr-searchlay .ajax-result-list {
	display: block;
	margin: 0;
	padding: 6px;
	list-style: none;
}

/* plaza/search/ajaxresult.twig emits a <div style="clear:both"> after every
   second item to clear its col-*-6 float. The list is a single column here,
   so those spacers only add blank rows. */
#gtr-searchlay .ajax-result-list > div { display: none; }

#gtr-searchlay .ajax-result-item {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* This theme's ajaxresult markup reuses the catalog card classes
   (.product-thumb > .product-item > .caption), which stylesheet.css dresses
   as a bordered white tile with centred, heavily padded text and a 2-line
   clamp. A suggestion row is not a card: everything the card sets is reset
   here. The #gtr-searchlay prefix is what wins — an id outranks any number
   of the card sheet's classes, and this file loads later. */
#gtr-searchlay .ajax-result-item .product-thumb {
	margin: 0;
	padding: 0;
}

#gtr-searchlay .ajax-result-item .product-item {
	position: static;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	text-align: left;
	transition: background 140ms ease;
}

#gtr-searchlay .ajax-result-item:hover .product-item,
#gtr-searchlay .ajax-result-item.is-active .product-item {
	border: 0;
	background: var(--gs-field);
}

#gtr-searchlay .ajax-result-item a.product-image {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	margin: 0;
	padding: 0;
	line-height: 0;
}

#gtr-searchlay .ajax-result-item a.product-image .product-image {
	width: 52px;
	margin: 0;
	padding: 0;
	overflow: visible;
}

#gtr-searchlay .ajax-result-item img {
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 10px;
	object-fit: cover;
	background: var(--gs-field);
}

#gtr-searchlay .ajax-result-item .caption {
	flex: 1 1 auto;
	display: block;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

#gtr-searchlay .ajax-result-item .caption h4 {
	display: block;
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
}

#gtr-searchlay .ajax-result-item .caption h4 a {
	display: block;
	overflow: hidden;
	color: var(--gs-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: ellipsis;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

#gtr-searchlay .ajax-result-item .caption .price {
	margin: 2px 0 0;
	padding: 0;
	color: var(--gs-orange);
	font-size: 13.5px;
	font-weight: 700;
}

#gtr-searchlay .ajax-result-item .caption .price-new {
	color: var(--gs-orange);
}

#gtr-searchlay .ajax-result-item .caption .price-old {
	margin-left: 6px;
	color: var(--gs-muted);
	font-weight: 400;
	text-decoration: line-through;
}

/* Ex-tax line: noise at suggestion size, and the results page states it. */
#gtr-searchlay .ajax-result-item .caption .price-tax { display: none; }

#gtr-searchlay .ajax-result-msg {
	margin: 0;
	padding: 18px 20px;
	color: var(--gs-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   9. Submit feedback
   --------------------------------------------------------------------------
   Pressing Enter closes the sheet and drops the keyboard immediately, so the
   wait for the results page needs a signal of its own: the slim indeterminate
   bar every modern site uses. gtr-search.js appends it to <body> on submit;
   the navigation (or a bfcache restore) removes it.
   -------------------------------------------------------------------------- */
.gtr-search-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	height: 3px;
	overflow: hidden;
	background: rgba(199, 62, 18, 0.16);
	pointer-events: none;
}

.gtr-search-progress:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: var(--gs-orange);
	animation: gs-progress 1100ms ease-in-out infinite;
}

@keyframes gs-progress {
	from { transform: translateX(-100%); }
	to   { transform: translateX(320%); }
}

/* Submitting an empty field does not load a results page for "" — the field
   flicks instead, so the sheet explains itself without an error message. */
.gtr-searchlay.is-nudge .search-container,
.gtr-searchlay.is-nudge #search {
	animation: gs-nudge 400ms ease;
}

@keyframes gs-nudge {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-5px); }
	60%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.gtr-search-progress:before,
	.gtr-searchlay.is-nudge .search-container,
	.gtr-searchlay.is-nudge #search {
		animation: none;
	}

	.gtr-search-progress:before { width: 100%; opacity: 0.65; }

	.gtr-searchlay__clear,
	.gtr-searchlay__clearall,
	.gtr-searchlay__pill-x,
	#gtr-searchlay .ajax-result-item .product-item {
		transition: none;
	}
}