/* =========================================================================
   DecantQ search — a full-screen sheet on phones, a centred panel on computers
   ====================================================================== */

/* ---------- Header button ---------- */
@media (max-width: 480px) {
	/* phones: search beside the cart, balancing the menu and language buttons on the other side */
	/* (beats the header's icon reset .dq-hd.dq-hd .dq-hd__icon, which zeroes margins) */
	.dq-hd.dq-hd .dq-hd__icon.dq-hd__search {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-inline-end: 44px;
	}
}

/* ---------- Dialog ---------- */
html.dq-search-open,
html.dq-search-open body {
	overflow: hidden;
}
.dq-search {
	position: fixed;
	inset: 0;
	z-index: 100000;
	color: var(--dq-ink, #2b211b);
	font-family: inherit;
}
.dq-search[hidden] {
	display: none;
}
.dq-search__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 26, 21, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.dq-search.is-open .dq-search__backdrop {
	opacity: 1;
}
.dq-search__panel {
	position: absolute;
	top: clamp(56px, 9vh, 96px);
	right: 50%;
	display: flex;
	flex-direction: column;
	width: min(760px, 92vw);
	max-height: calc(100vh - clamp(56px, 9vh, 96px) - 40px);
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 40px 80px -30px rgba(20, 14, 10, 0.55);
	opacity: 0;
	transform: translate(50%, -10px);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dq-search.is-open .dq-search__panel {
	opacity: 1;
	transform: translate(50%, 0);
}
/* loading line */
.dq-search__panel::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(-90deg, transparent, #c89c4c, transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	opacity: 0;
}
.dq-search.is-loading .dq-search__panel::before {
	opacity: 1;
	animation: dq-search-load 0.9s linear infinite;
}
@keyframes dq-search-load {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

/* ---------- Search bar ---------- */
.dq-search.dq-search .dq-search__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 20px 10px 14px;
	border-bottom: 1px solid var(--dq-line, #e6e0da);
}
.dq-search__glass {
	flex: none;
	color: var(--dq-amber, #93461a);
}
.dq-search.dq-search .dq-search__input {
	flex: 1;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	color: var(--dq-ink, #2b211b);
	-webkit-appearance: none;
	appearance: none;
}
.dq-search .dq-search__input::-webkit-search-cancel-button {
	display: none;
}
.dq-search .dq-search__input::placeholder {
	color: #9a8e84;
}
.dq-search.dq-search .dq-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dq-panel, #f3f1ee);
	color: var(--dq-ink, #2b211b);
	cursor: pointer;
}
.dq-search .dq-search__clear[hidden] {
	display: none;
}
.dq-search.dq-search .dq-search__cancel {
	flex: none;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-amber, #93461a);
	cursor: pointer;
}

/* ---------- Body ---------- */
.dq-search__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 20px 22px;
}
.dq-search__block + .dq-search__block {
	margin-top: 22px;
}
.dq-search.dq-search .dq-search__label {
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-muted, #6e6258);
}
.dq-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dq-search.dq-search .dq-search__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--dq-line, #e6e0da);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-ink, #2b211b);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dq-search.dq-search .dq-search__chip:hover {
	border-color: var(--dq-ink, #2b211b);
}
.dq-search.dq-search .dq-search__chip.is-recent {
	background: var(--dq-panel, #f3f1ee);
	border-color: transparent;
	font-weight: 500;
}
.dq-search__families {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.dq-search.dq-search .dq-search__family {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 72px;
	padding: 12px 14px;
	border-radius: 16px;
	background: #f3ece3;
	text-decoration: none;
	color: var(--dq-ink, #2b211b);
	transition: transform 0.2s ease;
}
.dq-search.dq-search .dq-search__family:hover {
	transform: translateY(-2px);
}
.dq-search .dq-search__family.tone-amber { background: #f6eadc; }
.dq-search .dq-search__family.tone-rose  { background: #f8ebe8; }
.dq-search .dq-search__family.tone-gold  { background: #f6efdd; }
.dq-search .dq-search__family.tone-sage  { background: #edf0e8; }
.dq-search .dq-search__family.tone-ink   { background: #2b211b; color: #f3e6d4; }
.dq-search.dq-search .dq-search__family span {
	font-family: var(--dq-display, Georgia), serif;
	font-size: 1.05rem;
	line-height: 1.2;
}
.dq-search.dq-search .dq-search__family small {
	font-size: 12px;
	line-height: 1.35;
	opacity: 0.75;
}

/* ---------- Results ---------- */
.dq-search__results[hidden],
.dq-search__start[hidden] {
	display: none;
}
.dq-search__group + .dq-search__group {
	margin-top: 18px;
}
.dq-search__places,
.dq-search__products {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dq-search.dq-search .dq-search__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 14px;
	color: var(--dq-ink, #2b211b);
	text-decoration: none;
	outline: 0;
}
.dq-search.dq-search .dq-search__item:hover,
.dq-search.dq-search .dq-search__item.is-active {
	background: var(--dq-panel, #f3f1ee);
}
.dq-search.dq-search .dq-search__item.is-active {
	box-shadow: inset 0 0 0 2px var(--dq-amber, #93461a);
}
.dq-search.dq-search .dq-search__place-name {
	font-size: 15.5px;
	font-weight: 600;
}
.dq-search.dq-search .dq-search__place-meta {
	margin-inline-start: auto;
	font-size: 13px;
	color: var(--dq-muted, #6e6258);
}
.dq-search__thumb {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--dq-line, #e6e0da);
}
.dq-search__thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.dq-search__noimg {
	width: 14px;
	height: 30px;
	border-radius: 3px 3px 5px 5px;
	background: linear-gradient(-180deg, #d8b46c 0 28%, #e9c79b 28% 45%, #b8743a 45%);
}
.dq-search__who {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}
.dq-search.dq-search .dq-search__brand {
	font-size: 12px;
	font-weight: 700;
	color: var(--dq-amber, #93461a);
}
.dq-search.dq-search .dq-search__name {
	overflow: hidden;
	font-family: var(--dq-display, Georgia), serif;
	font-size: 1.05rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dq-search.dq-search .dq-search__price {
	flex: none;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--dq-ink, #2b211b);
}
.dq-search.dq-search .dq-search__item.is-all {
	justify-content: space-between;
	margin-top: 12px;
	border: 1px solid var(--dq-line, #e6e0da);
	font-size: 15px;
	font-weight: 700;
	color: var(--dq-amber, #93461a);
}
.dq-search.dq-search .dq-search__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--dq-muted, #6e6258);
}
.dq-search__none {
	padding: 22px 6px 8px;
	text-align: center;
}
.dq-search.dq-search .dq-search__none-title {
	margin: 0;
	font-family: var(--dq-display, Georgia), serif;
	font-size: 1.3rem;
	line-height: 1.3;
}
.dq-search.dq-search .dq-search__none-text {
	max-width: 42ch;
	margin: 8px auto 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dq-muted, #6e6258);
}
.dq-search.dq-search .dq-search__wa {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--dq-amber, #93461a);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.dq-search :is(.dq-search__chip, .dq-search__family, .dq-search__cancel, .dq-search__clear, .dq-search__wa):focus-visible {
	outline: 2px solid var(--dq-amber, #93461a);
	outline-offset: 2px;
}

/* ---------- Phones: a full-screen sheet ---------- */
@media (max-width: 719px) {
	.dq-search__panel {
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
		transform: translateY(-12px);
	}
	.dq-search.is-open .dq-search__panel {
		transform: none;
	}
	.dq-search.dq-search .dq-search__bar {
		padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 10px;
	}
	.dq-search.dq-search .dq-search__input {
		height: 48px;
		font-size: 17px; /* 16px or more: iPhone does not zoom into the field */
	}
	.dq-search__body {
		padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.dq-search__families {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dq-search__thumb {
		width: 48px;
		height: 48px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dq-search__panel,
	.dq-search__backdrop {
		transition: none;
	}
	.dq-search.is-loading .dq-search__panel::before {
		animation: none;
	}
}


/* v4.7: the kit's capitals, letter-spacing and field borders never reach the search */
.dq-search.dq-search :is(a, p, span, small, button, input, label, strong) {
	letter-spacing: normal;
	text-transform: none;
}
.dq-search.dq-search .dq-search__bar input.dq-search__input,
.dq-search.dq-search .dq-search__bar input.dq-search__input:focus {
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
}
/* the price sits under the name, so the name keeps the full width on phones */
.dq-search.dq-search .dq-search__who .dq-search__price {
	margin-top: 1px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dq-muted, #6e6258);
}
/* the kit's typeface never reaches the search either (display titles keep --dq-display via their own rules) */
.dq-search.dq-search :is(a, p, span, small, button, input, label, strong) {
	font-family: inherit;
}
.dq-search.dq-search .dq-search__family span,
.dq-search.dq-search .dq-search__name,
.dq-search.dq-search .dq-search__none-title {
	font-family: var(--dq-display, Georgia), serif;
}