/**
 * DELTITECH overlays (v1.0.232) — loaded on every page.
 *
 * 1. Admin-bar offset. Logged-in users get the WordPress admin bar pinned
 *    over the top of the page; Glozin's panels and modals start at the very
 *    top, so their header and X close button slid in underneath it. They now
 *    start below the visible part of the bar (`--dt-admin-bar`, kept up to
 *    date by dt-overlays.js).
 * 2. Quick view.
 *    - Size fix. The deltitech-size-selector plugin hides every native
 *      shoe-size row and rebuilds a picker only for the page's main product
 *      form, once, on DOMContentLoaded. Quick views load later by AJAX, so on
 *      product pages the quick view's size row stayed invisible. Inside the
 *      quick view the native WCBoost size buttons show again.
 *    - Rounded sheet, size buttons and add-to-cart pill as on the product page.
 * 3. Search modal: a rounded top sheet with a large pill field, the X on the
 *    field's row, "Shop by brand" chips, chip-style suggestions and clean
 *    product cards.
 */

html {
	--dt-admin-bar: 0px;
}

/* =========================================================================
 * 1. Admin-bar offset
 * ====================================================================== */

body.admin-bar .offscreen-panel > .panel__container,
body.admin-bar .offscreen-panel > .sidebar__container {
	top: var(--dt-admin-bar) !important;
	height: calc(100% - var(--dt-admin-bar)) !important;
	max-height: calc(100% - var(--dt-admin-bar)) !important;
}

body.admin-bar #search-modal .modal__container {
	top: var(--dt-admin-bar) !important;
}

/* =========================================================================
 * 2. Quick view
 * ====================================================================== */

#quick-view-modal .variations tr:has(select[data-attribute_name*="shoe-size"]),
#quick-view-modal .variations tr:has(select[name*="shoe-size"]) {
	visibility: visible !important;
}

#quick-view-modal {
	--dt-ink: #0a0c10;
	--dt-muted: #6b7280;
	--dt-line: rgba(10, 12, 16, 0.1);
	--dt-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

#quick-view-modal .modal__container--quickview {
	border-radius: 28px;
	overflow: hidden;
}

#quick-view-modal .product-quickview .product_title,
#quick-view-modal .product-quickview .entry-title {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* On product pages, the page's own table rules (fixed layout, flex cells)
   also hit the quick view and squeeze the size cell to one column. */
#quick-view-modal .product-quickview table.variations,
#quick-view-modal .product-quickview table.variations tbody,
#quick-view-modal .product-quickview table.variations tr,
#quick-view-modal .product-quickview table.variations th,
#quick-view-modal .product-quickview table.variations td {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	table-layout: auto !important;
}

#quick-view-modal .product-quickview table.variations td.value {
	padding-top: 8px !important;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches {
	display: block !important;
	width: 100% !important;
}

#quick-view-modal .product-quickview .variations th.label,
#quick-view-modal .product-quickview .variations .label label {
	font-size: 13px;
	font-weight: 600;
	color: var(--dt-ink);
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__wrapper {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__item {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 6px !important;
	border: 1px solid var(--dt-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--dt-ink) !important;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__item:hover {
	border-color: rgba(10, 12, 16, 0.45) !important;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__item.selected {
	border-color: var(--dt-ink) !important;
	background: var(--dt-ink) !important;
	color: #fff !important;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__item.disabled {
	opacity: 0.35 !important;
	text-decoration: line-through;
}

#quick-view-modal .product-quickview .wcboost-variation-swatches__item .wcboost-variation-swatches__name {
	color: inherit !important;
}

#quick-view-modal .product-quickview .reset_variations {
	font-size: 12px;
	color: var(--dt-muted);
}

#quick-view-modal .product-quickview .single_add_to_cart_button {
	height: 52px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dt-ink) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 14px 32px -14px rgba(10, 12, 16, 0.6) !important;
	transition: transform 0.5s var(--dt-spring), box-shadow 0.4s var(--dt-ease) !important;
}

#quick-view-modal .product-quickview .single_add_to_cart_button:not(.gz-ios-loading),
#quick-view-modal .product-quickview .single_add_to_cart_button:not(.gz-ios-loading):hover,
#quick-view-modal .product-quickview .single_add_to_cart_button:not(.gz-ios-loading) *:not(.gz-ios-loader):not(.btn-fill) {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

#quick-view-modal .product-quickview .single_add_to_cart_button .btn-fill {
	background: linear-gradient(180deg, #22262d 0%, #0d0f13 100%) !important;
}

#quick-view-modal .product-quickview .single_add_to_cart_button.disabled,
#quick-view-modal .product-quickview .single_add_to_cart_button.wc-variation-selection-needed {
	background: #3a3f47 !important;
}

@media (hover: hover) and (pointer: fine) {
	#quick-view-modal .product-quickview .single_add_to_cart_button:not(.disabled):hover {
		transform: translateY(-1px);
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 0 1px rgba(76, 217, 100, 0.25), 0 18px 40px -14px rgba(76, 217, 100, 0.55) !important;
	}
}

#quick-view-modal .product-quickview .quantity {
	border-radius: 999px !important;
}

@media (max-width: 767px) {
	#quick-view-modal .modal__container--quickview {
		border-radius: 28px 28px 0 0;
	}

	#quick-view-modal .product-quickview .wcboost-variation-swatches__wrapper {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================================
 * 3. Search modal
 * ====================================================================== */

#search-modal {
	--dt-ink: #0a0c10;
	--dt-ink-2: #2b3038;
	--dt-muted: #6b7280;
	--dt-stone: #f2f4f7;
	--dt-tile: #f6f6f6;
	--dt-line: rgba(10, 12, 16, 0.08);
	--dt-green: #4cd964;
	--dt-green-deep: #1a8030;
	--dt-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dt-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: var(--dt-font);
}

#search-modal .modal__backdrop {
	background-color: rgba(10, 12, 16, 0.34) !important;
}

/* Desktop: a sheet that drops from the top and ends with its content. */
@media (min-width: 1200px) {
	#search-modal .modal__container {
		height: auto !important;
		max-height: calc(100% - var(--dt-admin-bar) - 40px) !important;
		border-radius: 0 0 32px 32px;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}
}

/* Tablet / mobile: Glozin's full-height side sheet, offset below the bar. */
@media (max-width: 1199px) {
	body.admin-bar #search-modal .modal__container {
		height: calc(100% - var(--dt-admin-bar)) !important;
	}
}

#search-modal .modal__header {
	padding: 28px 0 6px !important;
	border: 0 !important;
}

#search-modal .search-modal__title {
	display: none !important;
}

#search-modal .modal__header .container-xxl > .d-flex,
#search-modal .modal__content > .container-xxl {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

#search-modal .modal__header .container-xxl > .d-flex {
	align-items: center !important;
	gap: 12px !important;
}

/* Field ------------------------------------------------------------------ */

#search-modal .search-modal__form {
	position: relative;
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

#search-modal .search-modal__field {
	height: 60px !important;
	margin: 0 !important;
	padding: 0 112px 0 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dt-stone) !important;
	box-shadow: inset 0 0 0 1px var(--dt-line) !important;
	font-family: var(--dt-font) !important;
	font-size: 17px !important;
	color: var(--dt-ink) !important;
	transition: background-color 0.25s var(--dt-ease), box-shadow 0.25s var(--dt-ease) !important;
}

#search-modal .search-modal__field::placeholder {
	color: #8b919b;
}

#search-modal .search-modal__field:focus {
	background: #fff !important;
	box-shadow: inset 0 0 0 1.5px var(--dt-ink), 0 0 0 5px rgba(76, 217, 100, 0.2) !important;
	outline: 0 !important;
}

#search-modal .search-modal__button {
	top: 8px !important;
	right: 8px !important;
	inset-inline-end: 8px !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--dt-ink) !important;
	color: #fff !important;
	transition: transform 0.5s var(--dt-spring), background-color 0.3s !important;
}

#search-modal .search-modal__button:hover {
	transform: scale(1.06);
	background: var(--dt-green-deep) !important;
}

#search-modal .search-modal__button .glozin-svg-icon,
#search-modal .search-modal__button svg {
	color: #fff !important;
	fill: currentColor;
}

/* "Clear" X inside the field. */
#search-modal .close-search-results {
	top: 8px !important;
	right: 58px !important;
	inset-inline-end: 58px !important;
	width: 44px !important;
	height: 44px !important;
	color: var(--dt-muted) !important;
}

/* Close X: on the field's row, vertically centred with it (it used to sit
   in the sheet's top corner, above the field). */
html body #search-modal .modal__header .modal__button-close,
html body #search-modal .modal__header .modal__button-close.gz-mc-style-close {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	inset-inline-end: auto !important;
	flex: none;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 48px !important;
	max-height: 48px !important;
	margin: 0 !important;
}

/* Content ---------------------------------------------------------------- */

#search-modal .modal__content {
	padding-bottom: 32px !important;
}

#search-modal .header-search__suggestion-label,
#search-modal .results-content-title.h5,
#search-modal .results-categories h5 {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px !important;
	font-family: var(--dt-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--dt-green-deep) !important;
}

#search-modal .header-search__suggestion-label::before,
#search-modal .results-content-title.h5::before,
#search-modal .results-categories h5::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Shop by brand chips (hidden while live results show). */
#search-modal .dt-search-brands {
	margin-top: 22px;
}

#search-modal:has(.modal__content-results > *) .dt-search-brands {
	display: none;
}

#search-modal .dt-shop-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#search-modal .dt-shop-chips__list > li {
	margin: 0;
}

#search-modal .dt-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 16px 0 5px;
	border-radius: 999px;
	background: var(--dt-stone);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--dt-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s, transform 0.5s var(--dt-spring);
}

#search-modal .dt-shop-chip:not(:has(.dt-shop-chip__logo)) {
	padding-left: 16px;
}

#search-modal .dt-shop-chip:hover {
	background: #e7ebf1;
	transform: translateY(-1px);
}

#search-modal .dt-shop-chip__logo {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
}

#search-modal .dt-shop-chip__logo img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

#search-modal .dt-shop-chip__count {
	font-size: 12px;
	font-weight: 500;
	color: var(--dt-muted);
}

#search-modal .header-search__products {
	margin-top: 8px;
}

#search-modal .header-search__trending-links a {
	border-radius: 999px !important;
}

/* Live results ----------------------------------------------------------- */

#search-modal .results-content {
	gap: clamp(24px, 3vw, 48px) !important;
}

#search-modal .results-content__left {
	flex: 0 0 220px;
}

#search-modal .results-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
}

#search-modal .results-list .result-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dt-ink);
	text-decoration: none;
	transition: background-color 0.2s;
}

#search-modal .results-list .result-title::after {
	content: "→";
	color: var(--dt-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s, transform 0.3s var(--dt-ease);
}

#search-modal .results-list .result-title:hover {
	background: var(--dt-stone);
}

#search-modal .results-list .result-title:hover::after {
	opacity: 1;
	transform: none;
}

#search-modal .results-content-title.fs-18 {
	margin-bottom: 18px !important;
	font-size: 15px !important;
	color: var(--dt-muted) !important;
}

#search-modal .results-content-title.fs-18 span {
	font-weight: 600 !important;
	color: var(--dt-ink) !important;
}

#search-modal .results-content-suggestions {
	gap: 8px !important;
	margin-bottom: 26px !important;
}

/* inline-block, not flex: flex would drop the space before <mark>. */
#search-modal .results-content-suggestions .result-title {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	white-space: nowrap;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--dt-stone);
	font-size: 14px;
	color: var(--dt-ink-2);
	text-decoration: none;
	transition: background-color 0.2s;
}

#search-modal .results-content-suggestions .result-title:hover {
	background: #e7ebf1;
}

#search-modal mark {
	padding: 0;
	background: none !important;
	font-weight: 600;
	color: var(--dt-ink) !important;
}

#search-modal .modal__content-results .gz-button {
	height: 52px !important;
	padding: 0 30px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dt-ink) !important;
	font-family: var(--dt-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
}

/* Product cards (popular products + results) ----------------------------- */

html body #search-modal ul.products li.product .product-inner {
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body #search-modal ul.products li.product .product-thumbnail {
	border-radius: 18px !important;
	background: var(--dt-tile) !important;
	overflow: hidden !important;
}

html body #search-modal ul.products li.product .product-summary {
	align-items: flex-start !important;
	padding: 12px 4px 0 !important;
	margin: 0 !important;
	text-align: left !important;
}

html body #search-modal ul.products li.product .product-summary > *:not(#dt) {
	text-align: left !important;
	justify-content: flex-start !important;
}

html body #search-modal ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 !important;
	font-family: var(--dt-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

html body #search-modal ul.products li.product .woocommerce-loop-product__title a {
	color: var(--dt-ink) !important;
}

html body #search-modal ul.products li.product .price {
	margin-top: 6px !important;
	font-family: var(--dt-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--dt-ink) !important;
}

@media (max-width: 1199px) {
	#search-modal .modal__header {
		padding: 18px 0 4px !important;
	}

	#search-modal .search-modal__field {
		height: 54px !important;
		padding-left: 20px !important;
		font-size: 16px !important;
	}

	#search-modal .search-modal__button,
	#search-modal .close-search-results {
		top: 6px !important;
		width: 42px !important;
		height: 42px !important;
	}

	#search-modal .search-modal__button {
		right: 6px !important;
		inset-inline-end: 6px !important;
	}

	#search-modal .close-search-results {
		right: 52px !important;
		inset-inline-end: 52px !important;
	}

	html body #search-modal .modal__header .modal__button-close,
	html body #search-modal .modal__header .modal__button-close.gz-mc-style-close {
		width: 44px !important;
		min-width: 44px !important;
		max-width: 44px !important;
		height: 44px !important;
		max-height: 44px !important;
	}

	#search-modal .results-content__left {
		flex: none;
	}

	#search-modal .dt-shop-chips__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0;
		padding: 0 0 4px;
	}

	#search-modal .dt-shop-chips__list::-webkit-scrollbar {
		display: none;
	}

	#search-modal .dt-shop-chips__list > li {
		flex: none;
	}
}
