/*
 * Drawers built on the native <dialog> element (focus trap, Escape and
 * inert background come from the browser). Open/close transitions use
 * @starting-style and allow-discrete; browsers without support simply
 * show and hide without animation.
 */

html:has(dialog.drawer[open]) {
	overflow: hidden;
}

.drawer {
	position: fixed;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--qilaada-color-white);
	color: var(--qilaada-color-text);
	overflow: hidden;
	transition:
		transform 0.32s var(--qilaada-ease),
		overlay 0.32s allow-discrete,
		display 0.32s allow-discrete;
}

.drawer::backdrop {
	background: var(--qilaada-overlay);
	opacity: 0;
	transition:
		opacity 0.32s var(--qilaada-ease),
		overlay 0.32s allow-discrete,
		display 0.32s allow-discrete;
}

.drawer[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.drawer[open]::backdrop {
		opacity: 0;
	}
}

/* Sides */
.drawer--left,
.drawer--right {
	top: 0;
	bottom: 0;
	width: min(24rem, 100vw - 3rem);
	height: 100dvh;
}

.drawer--left {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(-100%);
}

.drawer--right {
	inset-inline-end: 0;
	inset-inline-start: auto;
	width: min(26.25rem, 100vw);
	transform: translateX(100%);
}

/* Top drawer (search): opens under the header, which stays visible and
   undimmed as on the reference (theme.js sets --qilaada-drawer-top). The page
   below is dimmed by the drawer's own shadow, clipped at its top edge. */
.drawer--top {
	top: var(--qilaada-drawer-top, 0px);
	inset-inline-end: 0;
	bottom: auto;
	inset-inline-start: 0;
	width: 100%;
	height: auto;
	max-height: calc(100dvh - var(--qilaada-drawer-top, 0px));
	overflow-y: auto;
	box-shadow: 0 0 0 100vmax var(--qilaada-overlay);
	clip-path: inset(0 0 -100vmax 0);
	transform: translateY(-100%);
}

.drawer--top::backdrop {
	background: transparent;
}

.drawer[open] {
	transform: none;
}

@starting-style {
	.drawer--left[open] {
		transform: translateX(-100%);
	}

	.drawer--right[open] {
		transform: translateX(100%);
	}

	.drawer--top[open] {
		transform: translateY(-100%);
	}
}

/* Drawer layout */
.drawer__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qilaada-space-4);
	min-height: 3.75rem;
	padding: var(--qilaada-space-2) var(--qilaada-space-3) var(--qilaada-space-2) var(--qilaada-space-6);
	border-bottom: 1px solid var(--qilaada-color-gray-20);
}

.drawer__preview-note {
	margin: 0 0 var(--qilaada-space-4);
	padding: var(--qilaada-space-3) var(--qilaada-space-4);
	border-inline-start: 2px solid var(--qilaada-color-ink);
	background: var(--qilaada-color-tile);
	font-size: var(--qilaada-text-sm);
}

.drawer__title {
	margin: 0;
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-sm);
	letter-spacing: var(--qilaada-heading-tracking);
	text-transform: uppercase;
}

.drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--qilaada-space-2) var(--qilaada-space-6) var(--qilaada-space-6);
}

.drawer__footer {
	padding: var(--qilaada-space-4) var(--qilaada-space-6);
	border-top: 1px solid var(--qilaada-color-gray-20);
}

.drawer__account {
	display: inline-flex;
	align-items: center;
	gap: var(--qilaada-space-3);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--qilaada-nav-tracking);
}

/* Count inside a drawer title reads as "Cart (2)". */
.drawer__title .qilaada-cart-count {
	position: static;
	display: inline;
	padding: 0;
	background: none;
	color: var(--qilaada-color-muted);
	font-size: inherit;
	font-weight: inherit;
}

.drawer__title .qilaada-cart-count[data-count="0"] {
	display: none;
}

.drawer__title .qilaada-cart-count > span[aria-hidden]::before {
	content: "(";
}

.drawer__title .qilaada-cart-count > span[aria-hidden]::after {
	content: ")";
}

/* Mobile navigation */
.mobile-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__item {
	border-bottom: 1px solid var(--qilaada-color-gray-20);
}

.mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--qilaada-space-4);
	font-size: var(--qilaada-text-base);
	letter-spacing: var(--qilaada-nav-tracking);
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.mobile-nav__link::-webkit-details-marker {
	display: none;
}

.mobile-nav__group[open] > .mobile-nav__link .icon--chevron-down {
	transform: rotate(180deg);
}

.mobile-nav__column {
	padding-bottom: var(--qilaada-space-4);
}

.mobile-nav__title {
	margin: 0 0 var(--qilaada-space-2);
	color: var(--qilaada-color-muted);
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	letter-spacing: var(--qilaada-heading-tracking);
	text-transform: uppercase;
}

.mobile-nav__sublinks {
	display: grid;
	gap: var(--qilaada-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__sublinks a {
	display: block;
	padding-block: var(--qilaada-space-1);
	text-decoration: none;
}

.mobile-nav__sublinks a[aria-current="page"] {
	text-decoration: underline;
}

/* Search drawer: a 57px bar with the icon, a capitals placeholder and close. */
.header-search {
	display: flex;
	align-items: center;
	gap: var(--qilaada-space-2);
	min-height: 3.5625rem;
}

input.header-search__input::placeholder {
	color: var(--qilaada-color-muted);
	font-family: var(--qilaada-font-heading);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.header-search > .icon-button:first-child {
	margin-inline-start: calc(-1 * var(--qilaada-space-3));
}

.header-search > .icon-button:last-child {
	margin-inline-end: calc(-1 * var(--qilaada-space-3));
}

input.header-search__input {
	flex: 1;
	min-width: 0;
	padding: var(--qilaada-space-3) 0;
	border: 0;
	background: transparent;
	font-size: var(--qilaada-text-lg); /* 16px+ avoids iOS zoom on focus. */
	letter-spacing: 0.04em;
}

input.header-search__input:focus-visible {
	outline: none;
}

input.header-search__input::-webkit-search-cancel-button {
	display: none;
}

.search-results {
	padding-block: 0 var(--qilaada-space-8);
	border-top: 1px solid var(--qilaada-color-gray-20);
}

.search-results:has([data-search-results][hidden]):has(.search-results__status:empty) {
	display: none;
}

.search-results__status {
	margin: 0;
	color: var(--qilaada-color-muted);
	font-size: var(--qilaada-text-sm);
}

.search-results__status:empty {
	display: none;
}

.search-results__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qilaada-space-6) var(--qilaada-space-4);
	margin: var(--qilaada-space-4) 0 var(--qilaada-space-6);
	padding: 0;
	list-style: none;
}

.search-result {
	display: block;
	text-decoration: none;
}

.search-result__media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--qilaada-ratio-product);
	margin-bottom: var(--qilaada-space-3);
	background: var(--qilaada-color-beige-50);
}

.search-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-result__name {
	display: block;
	font-size: var(--qilaada-text-sm);
	line-height: 1.4;
}

.search-result__price {
	display: block;
	margin-top: var(--qilaada-space-1);
	color: var(--qilaada-color-muted);
	font-size: var(--qilaada-text-sm);
}

.search-result:hover .search-result__name {
	text-decoration: underline;
}

@media (min-width: 640px) {
	.search-results__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.header-search {
		min-height: var(--qilaada-header-height);
	}

	.search-results__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Mini-cart (woocommerce/cart/mini-cart.php), as on the reference's cart
   drawer: free-shipping bar, products, "Complete with", then a footer kept at
   the bottom with the order note, notes and the two buttons. */
.cart-drawer.drawer--right {
	width: min(26.25rem, 100vw - 3rem);
}

.widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.widget_shopping_cart_content.is-updating {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--qilaada-duration) var(--qilaada-ease);
}

.free-shipping-bar {
	display: grid;
	gap: var(--qilaada-space-2);
	padding-block: var(--qilaada-space-3) var(--qilaada-space-2);
	text-align: center;
}

.free-shipping-bar__text {
	margin: 0;
	color: rgb(28 28 28 / 0.65);
	font-size: var(--qilaada-text-sm);
}

.free-shipping-bar__track {
	position: relative;
	height: 0.25rem;
	overflow: hidden;
	border-radius: 9999px;
	background: var(--qilaada-color-gray-20);
}

.free-shipping-bar__track > span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--progress, 0) * 100%);
	border-radius: inherit;
	background: var(--qilaada-color-ink);
	transition: width var(--qilaada-duration) var(--qilaada-ease);
}

.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Image on the left; name, price, then quantity and "Remove" beside it. */
.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--qilaada-space-4);
	padding-block: var(--qilaada-space-4);
	border-bottom: 1px solid var(--qilaada-color-gray-20);
	font-size: var(--qilaada-text-sm);
}

.mini-cart-item__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--qilaada-ratio-product);
	object-fit: cover;
	background: var(--qilaada-color-beige-50);
}

.mini-cart-item__info {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--qilaada-space-1);
}

.mini-cart-item__title {
	color: var(--qilaada-color-ink);
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.mini-cart-item__title:hover {
	text-decoration: underline;
}

.mini-cart-item__price {
	margin: 0;
	color: rgb(28 28 28 / 0.65);
	font-size: var(--qilaada-text-xs);
	letter-spacing: 0.08em;
}

.woocommerce-mini-cart-item .variation {
	margin: 0;
	color: var(--qilaada-color-muted);
	font-size: var(--qilaada-text-xs);
}

.mini-cart-item__actions {
	display: flex;
	align-items: center;
	gap: var(--qilaada-space-4);
	margin-top: var(--qilaada-space-2);
}

.woocommerce-mini-cart-item a.remove {
	color: var(--qilaada-color-text);
	font-size: var(--qilaada-text-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-mini-cart-item a.remove:hover {
	color: var(--qilaada-color-muted);
}

/* "Complete with": small image, name and price, and an outlined button. */
.mini-cart-suggestions {
	padding-block: var(--qilaada-space-6) var(--qilaada-space-4);
}

.mini-cart-suggestions__title {
	margin: 0 0 var(--qilaada-space-3);
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mini-cart-suggestions__list {
	display: grid;
	gap: var(--qilaada-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-cart-suggestion {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--qilaada-space-3);
}

.mini-cart-suggestion__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	background: var(--qilaada-color-beige-50);
}

.mini-cart-suggestion__info {
	display: grid;
	gap: var(--qilaada-space-1);
	min-width: 0;
}

.mini-cart-suggestion__title {
	overflow: hidden;
	color: var(--qilaada-color-ink);
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.mini-cart-suggestion__price {
	margin: 0;
	color: rgb(28 28 28 / 0.65);
	font-size: var(--qilaada-text-xs);
}

/* Outlined and subdued, filling with black on hover (base.css .button-fill--outline). */
.mini-cart-suggestion .mini-cart-suggestion__button {
	min-height: 2.25rem;
	padding: var(--qilaada-space-2) var(--qilaada-space-3);
	border-color: var(--qilaada-color-gray-20);
	color: rgb(28 28 28 / 0.65);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mini-cart-suggestion .added_to_cart {
	display: none;
}

/* Footer: stays at the bottom of the drawer while the products scroll. */
.mini-cart-footer {
	position: sticky;
	bottom: calc(-1 * var(--qilaada-space-6));
	display: grid;
	gap: var(--qilaada-space-2);
	margin: auto calc(-1 * var(--qilaada-space-6)) calc(-1 * var(--qilaada-space-6));
	padding: var(--qilaada-space-4) var(--qilaada-space-6) var(--qilaada-space-6);
	border-top: 1px solid var(--qilaada-color-gray-20);
	background: var(--qilaada-color-white);
}

.mini-cart-note__toggle {
	width: max-content;
	color: var(--qilaada-color-ink);
	font-size: var(--qilaada-text-sm);
	list-style: none;
	cursor: pointer;
}

.mini-cart-note__toggle::-webkit-details-marker {
	display: none;
}

.mini-cart-note__toggle:hover {
	color: var(--qilaada-color-muted);
}

.mini-cart-note__form {
	display: grid;
	gap: var(--qilaada-space-2);
	margin-top: var(--qilaada-space-3);
}

.mini-cart-note__label {
	font-size: var(--qilaada-text-xs);
}

.mini-cart-note__form textarea {
	width: 100%;
	min-height: 5rem;
	padding: var(--qilaada-space-2) var(--qilaada-space-3);
	border: 1px solid var(--qilaada-color-gray-20);
	font: inherit;
	font-size: var(--qilaada-text-sm);
	resize: vertical;
}

.mini-cart-note__form .button {
	justify-self: start;
}

.mini-cart-footer__note {
	margin: 0;
	color: rgb(28 28 28 / 0.65);
	font-size: var(--qilaada-text-sm);
}

.woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--qilaada-space-2);
	margin: var(--qilaada-space-2) 0 0;
}

/* Black, emptying to white on hover (base.css .button-fill). */
.woocommerce-mini-cart__buttons .button {
	width: 100%;
}

/* "Checkout · total". */
.woocommerce-mini-cart__buttons .checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--qilaada-space-3);
}

.mini-cart__checkout-total {
	display: inline-flex;
	align-items: center;
	gap: var(--qilaada-space-3);
}

.mini-cart__checkout-total::before {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: currentColor;
}

.mini-cart-empty-action {
	margin: 0;
	text-align: center;
}

.woocommerce-mini-cart__empty-message {
	margin: 0;
	padding-block: var(--qilaada-space-12);
	color: var(--qilaada-color-muted);
	text-align: center;
}

/* Wishlist drawer (header heart): saved products two to a row. */
.wishlist-drawer .drawer__body {
	padding-top: var(--qilaada-space-6);
}

.wishlist-drawer ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 0.75rem;
	margin: 0;
}

.wishlist-drawer .product-card {
	text-align: start;
}

.wishlist-drawer .wishlist__empty {
	padding: var(--qilaada-space-4) 0;
	text-align: center;
}

.wishlist-drawer .empty-state__title {
	font-size: var(--qilaada-text-base);
}