/* ==========================================================================
   Gertrudes — search results page (2026-08-23)
   --------------------------------------------------------------------------
   Chrome for product/search.twig: the results header, the Search Criteria
   disclosure and the empty state. The product grid itself is the shared
   card system in plaza/module/gtr-home-modules.css — nothing here touches it.

   The page previously opened with a bare "Search" h1 over a raw Bootstrap 3
   form (four fields, two loose checkboxes, a blue button) and only then the
   results, so the answer was the fourth thing on screen and the header search
   field and this panel disagreed about what had been searched. The template
   now leads with the query and the count, and folds the criteria into a
   native <details> — same ids and names, so search.twig's inline script and
   every admin-set option keep working; no JS added, and Bootstrap 3's
   clearMenus (which closes .dropdown panels on inside clicks) cannot reach a
   <details>.

   Sized in px and scoped under .gtr-searchpage: this page renders under BOTH
   headers, and desktop does not load theme_font.css, so var(--main-color) and
   friends resolve to nothing there. Palette matches gtr-search.css so the
   overlay and the page it lands on read as one feature.
   ========================================================================== */

.gtr-searchpage {
	--sp-ink: #2f2a26;
	--sp-muted: #6f6862;
	--sp-orange: #c73e12;
	--sp-orange-deep: #a53100;
	--sp-field: #f4efe9;
	--sp-field-hover: #ece4db;
	--sp-line: #efe8e2;
	--sp-surface: #faf5f0;
}

/* Accessible name for the results region — the visible heading is the
   results header below, so this string stays in the outline, not on screen. */
.gtr-searchpage__vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   1. Results header
   -------------------------------------------------------------------------- */
.gtr-searchpage__head {
	margin: 0 0 18px;
}

/* PAGE-level title (level 1), per plaza/gtr-sectionhead.css. */
.gtr-searchpage__title {
	margin: 0;
	color: var(--gt-title-ink, #2f2a26);
	font-family: var(--gt-title-face, Prata, Georgia, serif);
	font-size: var(--gt-title-page, clamp(26px, 3.2vw, 36px));
	font-weight: 400;
	line-height: var(--gt-title-lh, 1.2);
	letter-spacing: var(--gt-title-ls, -0.01em);
}

/* The query itself is the subject of the sentence — give it the weight. */
.gtr-searchpage__term {
	color: var(--sp-orange);
	overflow-wrap: anywhere;
}

.gtr-searchpage__count {
	margin: 8px 0 0;
	color: var(--sp-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   2. Search Criteria disclosure
   -------------------------------------------------------------------------- */
.gtr-searchpage__refine {
	margin: 0 0 26px;
}

/* Both markers have to go: WebKit paints ::-webkit-details-marker, everyone
   else the list-item disclosure triangle. */
.gtr-searchpage__refine-toggle::-webkit-details-marker { display: none; }

.gtr-searchpage__refine-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sp-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}

.gtr-searchpage__refine-toggle:hover {
	background: var(--sp-surface);
	border-color: var(--sp-orange);
}

.gtr-searchpage__chev {
	width: 15px;
	height: 15px;
	transition: transform 200ms ease;
}

.gtr-searchpage__refine[open] .gtr-searchpage__chev {
	transform: rotate(180deg);
}

.gtr-searchpage__body {
	margin-top: 14px;
	padding: 20px;
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	background: var(--sp-surface);
}

.gtr-searchpage__fields {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 16px;
}

.gtr-searchpage__field {
	min-width: 0;
}

.gtr-searchpage__label {
	display: block;
	margin: 0 0 6px;
	color: var(--sp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* .form-control stays on both controls (Bootstrap 3 is the base and other
   sheets reach for it) — restyled here rather than removed. */
.gtr-searchpage__field .form-control {
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--sp-ink);
	font-size: 15px;
}

.gtr-searchpage__field .form-control:focus {
	border-color: var(--sp-orange);
	box-shadow: 0 0 0 3px rgba(199, 62, 18, 0.15);
}

.gtr-searchpage__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 16px 0 0;
}

.gtr-searchpage__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sp-ink);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

/* A disabled sub-category box is not a bug: search.twig's inline script
   disables it while the category is "All Categories". Say so visually. */
.gtr-searchpage__check input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--sp-orange);
	cursor: pointer;
}

.gtr-searchpage__check input:disabled {
	cursor: not-allowed;
}

.gtr-searchpage__check input:disabled + span {
	color: var(--sp-muted);
	opacity: 0.6;
}

/* The id is on the selector on purpose: stylesheet.css:1240 sets
   `#button-search{margin-bottom:3rem}`, and an id outranks any class no
   matter which file loads later. */
#button-search.gtr-searchpage__submit {
	min-height: 46px;
	margin: 18px 0 0;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sp-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 180ms ease, box-shadow 180ms ease;
}

#button-search.gtr-searchpage__submit:hover,
#button-search.gtr-searchpage__submit:active,
#button-search.gtr-searchpage__submit:focus {
	background: var(--sp-orange-deep);
	color: #fff;
	box-shadow: 0 4px 14px rgba(35, 27, 25, 0.22);
}

/* --------------------------------------------------------------------------
   3. Empty state
   -------------------------------------------------------------------------- */
.gtr-searchpage__empty {
	max-width: 560px;
	margin: 8px auto 48px;
	padding: 36px 24px;
	text-align: center;
}

.gtr-searchpage__empty-icon {
	width: 44px;
	height: 44px;
	color: var(--sp-orange);
	opacity: 0.65;
}

.gtr-searchpage__empty-title {
	margin: 16px 0 6px;
	color: var(--sp-ink);
	font-size: 17px;
	font-weight: 700;
}

.gtr-searchpage__empty-hint {
	margin: 0 0 22px;
	color: var(--sp-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.gtr-searchpage__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 8px;
}

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

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

/* --------------------------------------------------------------------------
   4. Phones
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.gtr-searchpage__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.gtr-searchpage__body {
		padding: 16px;
	}

	.gtr-searchpage__checks {
		flex-direction: column;
		gap: 12px;
	}

	/* Full-width primary action — the standard phone target. */
	#button-search.gtr-searchpage__submit {
		display: block;
		width: 100%;
	}

	.gtr-searchpage__empty {
		padding: 24px 8px;
	}
}

/* --------------------------------------------------------------------------
   5. Focus + reduced motion
   -------------------------------------------------------------------------- */
/* !important answers stylesheet.css:7's global *:focus{outline:none !important}
   (same precedent as gtr-nav.css §11 and gtr-search.css §6). */
.gtr-searchpage__refine-toggle:focus-visible,
#button-search.gtr-searchpage__submit:focus-visible,
.gtr-searchpage__pill:focus-visible,
.gtr-searchpage__check input:focus-visible {
	outline: 2px solid var(--sp-orange) !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gtr-searchpage__refine-toggle,
	.gtr-searchpage__chev,
	#button-search.gtr-searchpage__submit,
	.gtr-searchpage__pill {
		transition: none;
	}
}