/* ============================================================
   WooSearch — frontend modal stylesheet

   Every rule is scoped under .woosearch-modal and, where a theme is
   likely to compete (inputs, buttons, links), the selector is
   element-qualified so it outranks generic theme rules such as
   input[type="search"] (0,1,1) or .site button (0,2,0).

   ------------------------------------------------------------
   TABLE OF CONTENTS
   ------------------------------------------------------------
   1.  Custom properties & modal shell ....... [1. SHELL]
   2.  Hidden-state restore .................. [2. HIDDEN]
   3.  Backdrop & dialog box ................. [3. BOX]
   4.  Screen-reader utility ................. [4. A11Y]
   5.  Search field, input & close button .... [5. FIELD]
   6.  Section headings ...................... [6. HEADINGS]
   7.  Trending keyword chips ................ [7. TRENDING]
   8.  Result rows & thumbnails .............. [8. RESULTS]
   9.  Grid layout variant ................... [9. GRID]
   10. Loading, empty & error states ......... [10. STATES]
   11. Suggestions & view-all button ......... [11. SUGGEST]
   12. Background scroll lock ................ [12. LOCK]
   13. Responsive / media queries ............ [13. MEDIA]
   14. [woosearch] shortcode trigger ......... [14. SHORTCODE]
   ------------------------------------------------------------

   Note on !important: used in exactly three places, each of
   which is a functional requirement rather than a style
   preference — see [2. HIDDEN], [4. A11Y] and [12. LOCK].
   ============================================================ */

/* ============================================================
   [1. SHELL] Custom properties & modal shell
   ============================================================ */

.woosearch-modal {
	--woosearch-paper: #FFFFFF;
	--woosearch-paper-2: #F3F4F6;
	--woosearch-card: #FFFFFF;
	--woosearch-ink: #1E1E1E;
	--woosearch-ink-soft: #6B7280;
	--woosearch-line: rgba(30, 30, 30, .14);
	--woosearch-accent: #2271B1;
	--woosearch-radius: 16px;
	--woosearch-ease: cubic-bezier(.16, 1, .3, 1);
	/* Neutral placeholder palette, used only when a product has no image. */
	--woosearch-tint-1: #C7D2E4;
	--woosearch-tint-2: #D9CFE4;
	--woosearch-tint-3: #CFE0D6;
	--woosearch-tint-4: #E8D9C7;
	--woosearch-tint-5: #E0D3D3;
	--woosearch-danger: #B32D2E;
	--woosearch-cols-desktop: 3;
	--woosearch-cols-tablet: 2;
	--woosearch-cols-mobile: 1;

	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 10vh 20px 20px;
	margin: 0;
	font-family: inherit;
	line-height: 1.55;
	color: var(--woosearch-ink);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--woosearch-ease), visibility 0s .35s;
	box-sizing: border-box;
}

.woosearch-modal *,
.woosearch-modal *::before,
.woosearch-modal *::after {
	box-sizing: border-box;
}

.woosearch-modal[hidden] {
	display: none;
}

/* ============================================================
   [2. HIDDEN] Hidden-state restore
   ============================================================ */

/*
   !important #1 of 3 — REQUIRED, not cosmetic.
   The browser hides [hidden] elements with `[hidden] { display: none }`, which
   scores only (0,1,0). Scoped rules below such as `.woosearch-modal .woosearch-loading`
   score (0,2,0) and would silently defeat it, leaving the spinner, suggestions
   and "View all" button on screen forever. Restore the intended behaviour once,
   here, so every display-setting rule in this file stays safe to write.
*/
.woosearch-modal [hidden] {
	display: none !important;
}

.woosearch-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ============================================================
   [3. BOX] Backdrop & dialog box
   ============================================================ */

.woosearch-modal .woosearch-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	margin: 0;
	padding: 0;
}

.woosearch-modal .woosearch-box {
	position: relative;
	background: var(--woosearch-paper);
	border: 0;
	border-radius: var(--woosearch-radius);
	max-width: 620px;
	width: 100%;
	padding: 24px;
	margin: 0;
	max-height: 76vh;
	overflow: auto;
	transform: translateY(14px);
	transition: transform .35s var(--woosearch-ease);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.woosearch-modal.is-open .woosearch-box {
	transform: none;
}

/* ============================================================
   [4. A11Y] Screen-reader utility
   ============================================================ */

/*
   !important #2 of 3 — REQUIRED. This is the standard visually-
   hidden pattern; a theme setting `position: static` on spans
   would otherwise drop the accessible labels into the layout.
*/
.woosearch-modal .woosearch-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   [5. FIELD] Search field, input & close button
   ============================================================ */

.woosearch-modal .woosearch-field {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1.5px solid var(--woosearch-line);
	border-radius: 999px;
	padding: 4px 6px 4px 20px;
	margin: 0;
	background: var(--woosearch-card);
	box-shadow: none;
	transition: border-color .2s var(--woosearch-ease);
}

.woosearch-modal .woosearch-field:focus-within {
	border-color: var(--woosearch-ink);
}

.woosearch-modal .woosearch-field .woosearch-icon {
	width: 19px;
	height: 19px;
	flex: none;
	stroke: var(--woosearch-ink-soft);
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	display: block;
}

/*
   Element-qualified and triple-classed so it beats theme rules
   targeting input[type="search"] / input[type="text"].
*/
.woosearch-modal .woosearch-field input.woosearch-input,
.woosearch-modal .woosearch-field input[type="search"].woosearch-input,
.woosearch-modal .woosearch-field input[type="text"].woosearch-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	outline: none;
	padding: 11px 0;
	margin: 0;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--woosearch-ink);
}

.woosearch-modal .woosearch-field input.woosearch-input:focus,
.woosearch-modal .woosearch-field input.woosearch-input:focus-visible,
.woosearch-modal .woosearch-field input[type="search"].woosearch-input:focus,
.woosearch-modal .woosearch-field input[type="text"].woosearch-input:focus {
	border: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	outline: none;
	color: var(--woosearch-ink);
}

.woosearch-modal .woosearch-field input.woosearch-input::-webkit-search-cancel-button,
.woosearch-modal .woosearch-field input.woosearch-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.woosearch-modal .woosearch-field input.woosearch-input::placeholder {
	color: var(--woosearch-ink-soft);
	opacity: .75;
	font: inherit;
	font-size: 16px;
}

.woosearch-modal .woosearch-field button.woosearch-clear,
.woosearch-modal .woosearch-field button.woosearch-close {
	-webkit-appearance: none;
	appearance: none;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	flex: none;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: none;
	background-color: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--woosearch-ink-soft);
	cursor: pointer;
	transition: background-color .2s var(--woosearch-ease), color .2s var(--woosearch-ease);
}

.woosearch-modal .woosearch-field button.woosearch-close svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.woosearch-modal .woosearch-field button.woosearch-clear:hover,
.woosearch-modal .woosearch-field button.woosearch-close:hover,
.woosearch-modal .woosearch-field button.woosearch-clear:focus-visible,
.woosearch-modal .woosearch-field button.woosearch-close:focus-visible {
	background-color: var(--woosearch-paper-2);
	color: var(--woosearch-ink);
}

/* ============================================================
   [6. HEADINGS] Section headings
   ============================================================ */

.woosearch-modal .woosearch-heading {
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--woosearch-ink-soft);
	margin: 20px 0 10px;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
}

/* ============================================================
   [7. TRENDING] Trending keyword chips
   ============================================================ */

.woosearch-modal .woosearch-trending {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woosearch-modal button.woosearch-pill {
	-webkit-appearance: none;
	appearance: none;
	padding: 9px 18px;
	margin: 0;
	min-height: 0;
	border: 1.5px solid var(--woosearch-line);
	border-radius: 999px;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: var(--woosearch-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color .25s var(--woosearch-ease), color .25s var(--woosearch-ease), border-color .25s var(--woosearch-ease), transform .25s var(--woosearch-ease);
}

.woosearch-modal button.woosearch-pill:hover,
.woosearch-modal button.woosearch-pill:focus-visible {
	background-color: var(--woosearch-ink);
	color: var(--woosearch-paper);
	border-color: var(--woosearch-ink);
	transform: translateY(-2px);
}

.woosearch-modal .woosearch-trending--text {
	display: block;
}

.woosearch-modal .woosearch-trending--text button.woosearch-pill {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 0;
	border: 0;
	border-bottom: 1px solid var(--woosearch-line);
	border-radius: 0;
	font-weight: 500;
}

.woosearch-modal .woosearch-trending--text button.woosearch-pill:hover,
.woosearch-modal .woosearch-trending--text button.woosearch-pill:focus-visible {
	background: none;
	color: var(--woosearch-ink);
	transform: none;
	text-decoration: underline;
}

/* ============================================================
   [8. RESULTS] Result rows & thumbnails
   ============================================================ */

.woosearch-modal .woosearch-results {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.woosearch-modal a.woosearch-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 10px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s var(--woosearch-ease);
}

.woosearch-modal a.woosearch-row:hover,
.woosearch-modal a.woosearch-row:focus-visible,
.woosearch-modal a.woosearch-row.is-active {
	background-color: var(--woosearch-paper-2);
	color: inherit;
	text-decoration: none;
	outline: none;
}

.woosearch-modal .woosearch-thumb {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 6px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: var(--woosearch-paper-2);
}

.woosearch-modal .woosearch-thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0;
}

.woosearch-modal .woosearch-tint-1 { background-image: linear-gradient(140deg, var(--woosearch-tint-1), #fff); }
.woosearch-modal .woosearch-tint-2 { background-image: linear-gradient(140deg, var(--woosearch-tint-2), #fff); }
.woosearch-modal .woosearch-tint-3 { background-image: linear-gradient(140deg, var(--woosearch-tint-3), #fff); }
.woosearch-modal .woosearch-tint-4 { background-image: linear-gradient(140deg, var(--woosearch-tint-4), #fff); }
.woosearch-modal .woosearch-tint-5 { background-image: linear-gradient(140deg, var(--woosearch-tint-5), #fff); }

.woosearch-modal .woosearch-meta {
	min-width: 0;
	display: block;
}

.woosearch-modal .woosearch-title {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	display: block;
	line-height: 1.3;
	color: var(--woosearch-ink);
}

.woosearch-modal .woosearch-sub {
	font-size: 12px;
	color: var(--woosearch-ink-soft);
	display: block;
	line-height: 1.4;
}

.woosearch-modal .woosearch-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.woosearch-modal .woosearch-tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background-color: var(--woosearch-paper-2);
	color: var(--woosearch-ink-soft);
	line-height: 1.4;
}

.woosearch-modal .woosearch-price {
	margin-left: auto;
	font-size: 14px;
	white-space: nowrap;
	display: flex;
	gap: 6px;
	align-items: baseline;
	color: var(--woosearch-ink);
}

.woosearch-modal .woosearch-price del {
	color: var(--woosearch-ink-soft);
	font-size: 12.5px;
	opacity: .8;
	background: none;
}

.woosearch-modal .woosearch-price ins {
	text-decoration: none;
	font-weight: 600;
	background: none;
	color: inherit;
}

.woosearch-modal .woosearch-stock {
	font-size: 11px;
	color: var(--woosearch-ink-soft);
	display: block;
	margin-top: 2px;
}

.woosearch-modal .woosearch-stock.is-out {
	color: var(--woosearch-danger);
}

/* ============================================================
   [9. GRID] Grid layout variant
   ============================================================ */

.woosearch-modal .woosearch-results--grid {
	display: grid;
	grid-template-columns: repeat(var(--woosearch-cols-desktop), minmax(0, 1fr));
	gap: 10px;
}

.woosearch-modal .woosearch-results--grid a.woosearch-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--woosearch-line);
}

.woosearch-modal .woosearch-results--grid .woosearch-thumb {
	width: 100%;
	height: 110px;
	border-radius: 8px;
}

.woosearch-modal .woosearch-results--grid .woosearch-price {
	margin-left: 0;
}

/* ============================================================
   [10. STATES] Loading, empty & error states
   ============================================================ */

.woosearch-modal .woosearch-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 2px;
	font-size: 13.5px;
	color: var(--woosearch-ink-soft);
}

.woosearch-modal .woosearch-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--woosearch-line);
	border-top-color: var(--woosearch-ink);
	animation: woosearch-spin .7s linear infinite;
	flex: none;
}

@keyframes woosearch-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.woosearch-modal,
	.woosearch-modal .woosearch-box,
	.woosearch-modal button.woosearch-pill,
	.woosearch-modal a.woosearch-row {
		transition: none;
	}

	.woosearch-modal .woosearch-spinner {
		animation: none;
	}
}

.woosearch-modal .woosearch-empty,
.woosearch-modal .woosearch-error {
	font-size: 14px;
	color: var(--woosearch-ink-soft);
	padding: 14px 2px 4px;
	margin: 0;
	line-height: 1.5;
}

.woosearch-modal .woosearch-error {
	color: var(--woosearch-danger);
}

/* ============================================================
   [11. SUGGEST] Suggestions & view-all button
   ============================================================ */

.woosearch-modal .woosearch-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* Breathing room under the search field, and a rule separating the
	   suggestions from the result count that follows them. */
	margin: 18px 0 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--woosearch-line);
}

.woosearch-modal .woosearch-suggestion,
.woosearch-modal button.woosearch-suggestion,
.woosearch-modal a.woosearch-suggestion {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--woosearch-line);
	background-color: var(--woosearch-card);
	border-radius: 999px;
	padding: 6px 14px;
	margin: 0;
	min-height: 0;
	box-shadow: none;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--woosearch-ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.woosearch-modal button.woosearch-suggestion:hover,
.woosearch-modal a.woosearch-suggestion:hover,
.woosearch-modal button.woosearch-suggestion:focus-visible,
.woosearch-modal a.woosearch-suggestion:focus-visible {
	background-color: var(--woosearch-paper-2);
	color: var(--woosearch-ink);
	text-decoration: none;
}

.woosearch-modal .woosearch-suggestion .woosearch-suggestion-type {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--woosearch-ink-soft);
}

.woosearch-modal a.woosearch-viewall {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background-color: var(--woosearch-accent);
	color: var(--woosearch-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
	transition: transform .25s var(--woosearch-ease);
}

.woosearch-modal a.woosearch-viewall:hover,
.woosearch-modal a.woosearch-viewall:focus-visible {
	transform: translateY(-2px);
	color: var(--woosearch-ink);
	text-decoration: none;
}

/* ============================================================
   [12. LOCK] Background scroll lock
   ============================================================ */

/*
   !important #3 of 3 — REQUIRED. Themes commonly set overflow on
   html/body; without !important the page scrolls behind the open
   modal, which is a WCAG 2.4.3 focus-order problem on mobile.
*/

html.woosearch-locked,
html.woosearch-locked body {
	overflow: hidden !important;
}

/* ============================================================
   [14. SHORTCODE] [woosearch] trigger
   ------------------------------------------------------------
   The trigger is a <span role="button">, not a <button>, so that
   theme button styling cannot reach it. Themes commonly apply
   hover transforms, padding changes and min-widths to buttons,
   which made the search bar shift and resize on hover.

   Alignment lives on the wrapper and sizing lives on the control.
   Keeping them on separate elements means width and alignment can
   never fight each other — the earlier auto-margin approach broke
   exactly there.
   ============================================================ */

span.woosearch-sc-wrap {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: normal;
}

span.woosearch-sc-wrap--left   { text-align: left; }
span.woosearch-sc-wrap--center { text-align: center; }
span.woosearch-sc-wrap--right  { text-align: right; }

/* The control itself. Every property a theme might set on a generic
   inline element is restated, so it renders identically everywhere. */
span.woosearch-sc {
	--woosearch-sc-ink: #1E1E1E;
	--woosearch-sc-soft: #6B7280;
	--woosearch-sc-line: rgba(30, 30, 30, .18);
	--woosearch-sc-bg: #FFFFFF;

	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	vertical-align: middle;
	margin: 0;
	border: 1px solid var(--woosearch-sc-line);
	border-radius: 999px;
	background: var(--woosearch-sc-bg);
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: left;
	text-indent: 0;
	color: var(--woosearch-sc-ink);
	cursor: pointer;
	transition: border-color .2s ease;
	-webkit-user-select: none;
	user-select: none;
}

/* Hover and active are visually identical to the resting state: only the
   border reacts. Nothing moves, nothing resizes. */
span.woosearch-sc:hover,
span.woosearch-sc:active {
	border-color: var(--woosearch-sc-ink);
	background: var(--woosearch-sc-bg);
	color: var(--woosearch-sc-ink);
	box-shadow: none;
	transform: none;
	text-decoration: none;
}

/* Keyboard focus must stay visible — the control is operable by keyboard. */
span.woosearch-sc:focus-visible {
	outline: 2px solid var(--woosearch-sc-ink);
	outline-offset: 2px;
}

span.woosearch-sc .woosearch-sc-icon {
	width: 18px;
	height: 18px;
	flex: none;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

span.woosearch-sc .woosearch-sc-label {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: inherit;
	color: inherit;
}

/* --- bar: reads as a search field --- */

span.woosearch-sc--bar {
	width: 320px;
	padding: 11px 18px;
	color: var(--woosearch-sc-soft);
}

span.woosearch-sc--bar .woosearch-sc-label {
	flex: 1 1 auto;
}

/* --- button: a compact labelled control --- */

span.woosearch-sc--button {
	padding: 10px 20px;
	font-weight: 600;
}

/* --- icon: square, icon only --- */

span.woosearch-sc--icon {
	width: 42px;
	height: 42px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

span.woosearch-sc--icon .woosearch-sc-icon {
	width: 20px;
	height: 20px;
}

/* The bar is the only variant with an explicit width, so it is the only one
   that needs to collapse on narrow screens. */
@media (max-width: 480px) {
	span.woosearch-sc--bar {
		width: 100%;
	}
}

/* ============================================================
   [13. MEDIA] Responsive / media queries (grouped at the end)
   ============================================================ */

@media (max-width: 1024px) {
	.woosearch-modal .woosearch-results--grid {
		grid-template-columns: repeat(var(--woosearch-cols-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.woosearch-modal {
		padding: 0;
		align-items: stretch;
	}

	.woosearch-modal .woosearch-backdrop {
		background: var(--woosearch-paper);
	}

	.woosearch-modal .woosearch-box {
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
		padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
		box-shadow: none;
	}

	.woosearch-modal .woosearch-field {
		padding: 2px 4px 2px 16px;
	}

	/* Stay at 16px: anything smaller makes iOS Safari zoom on focus. */
	.woosearch-modal .woosearch-field input.woosearch-input,
	.woosearch-modal .woosearch-field input[type="search"].woosearch-input {
		padding: 9px 0;
		font-size: 16px;
	}

	.woosearch-modal .woosearch-field button.woosearch-clear,
	.woosearch-modal .woosearch-field button.woosearch-close {
		width: 32px;
		height: 32px;
	}

	.woosearch-modal .woosearch-results--grid {
		grid-template-columns: repeat(var(--woosearch-cols-mobile), minmax(0, 1fr));
	}
}
