/**
 * RAA Mobile Listing: Miele design for category pages on phones.
 * Everything is scoped to body.raa-ml (shop + product taxonomy pages) and to
 * max-width 992px, so desktop stays exactly as the theme draws it.
 */

/* Instalments label (any viewport, only printed when set in Settings > Listare mobil). */
.raa-ml-rate {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 8px;
	border-radius: 4px;
	background: #f7eff0;
	color: #8c0014;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.raa-ml-desc,
.raa-ml-sentinel,
.raa-ml-bar,
.raa-ml-active,
.raa-ml-backdrop,
.raa-ml-panel,
.raa-ml-up {
	display: none;
}

@media (max-width: 992px) {

	body.raa-ml {
		--ml-text: #111;
		--ml-accent: #8c0014;
		--ml-accent-dark: #6e0010;
		--ml-muted: #606060;
		--ml-line: #e2e2e2;
		--ml-soft: #f5f5f5;
		--ml-r: 4px;
		--ml-top: 0px;
	}

	body.raa-ml.sticky-m { --ml-top: 52px; }
	/* Not for .m-search-toggled: the opened search panel overlays the dimmed page, and moving the
	   bar under it made the listing jump 60px each time search opened or closed. */
	body.raa-ml.sticky-m.m-search-bh { --ml-top: 112px; }

	/* Shoptimizer floats the search results column right at every width. A float shrinks to its
	   content, so the full-bleed chip bar stretched it to ~800px and pushed the results off the
	   left edge of the screen. */
	.raa-ml.search-results .content-area {
		float: none;
	}

	/* The bar replaces the theme's "Show Filters" strip and the sort dropdown. */
	.raa-ml .mobile-filter,
	.raa-ml .woocommerce-ordering,
	.raa-ml .woocommerce-result-count,
	.raa-ml .raa-pro-results > label:has(select.orderby),
	.raa-ml .shoptimizer-sorting:has(~ div[class^="columns-"]) .woocommerce-pagination {
		display: none !important;
	}

	/* ---------- Chip bar ---------- */

	.raa-ml-sentinel {
		display: block;
		height: 1px;
		scroll-margin-top: calc(var(--ml-top) + 8px);
	}

	.raa-ml-bar {
		display: block;
		position: sticky;
		/* Above the cards (badges, hearts, skeleton go up to 5), below the sticky site header (9)
		   so the header's search suggestions drop down over the bar. */
		z-index: 8;
		top: var(--ml-top);
		/* Full bleed from any container padding; a fixed -1.3em overshot the theme's padding and scrolled the page sideways. */
		margin: 0 calc(50% - 50vw) 10px;
		padding: 8px calc(50vw - 50%);
		background: #fff;
		transition: box-shadow .2s;
	}

	.raa-ml-bar.is-stuck {
		box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .25);
	}

	.raa-ml-chips {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.raa-ml-chips::-webkit-scrollbar { display: none; }

	.raa-ml-chip {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 6px;
		height: 40px;
		margin: 0;
		padding: 0 14px;
		border: 1px solid var(--ml-line);
		border-radius: 20px;
		background: #fff;
		color: var(--ml-text);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.raa-ml-chip[hidden] { display: none; }

	.raa-ml-chip:focus-visible,
	.raa-ml-tab:focus-visible,
	.raa-ml-btn:focus-visible,
	.raa-ml-close:focus-visible,
	.raa-ml-up:focus-visible {
		outline: 2px solid var(--ml-text);
		outline-offset: 2px;
	}

	.raa-ml-chip svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.6;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.raa-ml-chip.is-on {
		border-color: var(--ml-text);
		background: var(--ml-text);
		color: #fff;
	}

	.raa-ml-view {
		justify-content: center;
		width: 48px;
		padding: 0;
	}

	/* The toggle shows the view you switch to. */
	html.raa-view-list .raa-ml-i-list,
	html.raa-view-grid .raa-ml-i-grid {
		display: none;
	}

	.raa-ml-badge {
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--ml-accent);
		color: #fff;
		font-size: 11px;
		line-height: 18px;
		text-align: center;
	}

	.raa-ml-badge[hidden] { display: none; }

	/* ---------- Active filters under the bar ---------- */

	.raa-ml-active {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0 0 12px;
	}

	.raa-ml-active:empty,
	.raa-ml-active:not(:has(li, a)) {
		display: none;
	}

	.raa-ml-active ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.raa-ml-active li {
		display: contents;
	}

	.raa-ml-active .facetwp-selection-label {
		display: none;
	}

	/* Active filters: Miele red pills. body.raa-ml beats FacetWP's own pill rule, whose dark
	   close PNG sat flush against the right edge. */
	body.raa-ml .raa-ml-active .facetwp-selection-value,
	body.raa-ml .raa-ml-pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 7px 14px 7px 16px;
		border: 0;
		border-radius: 18px;
		background: var(--ml-accent) none;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
		cursor: pointer;
	}

	body.raa-ml .raa-ml-active .facetwp-selection-value::after,
	body.raa-ml .raa-ml-pill::after {
		content: "×";
		color: #fff;
		font-size: 17px;
		font-weight: 400;
		line-height: 1;
	}

	body.raa-ml .raa-ml-active .facetwp-selection-value:active,
	body.raa-ml .raa-ml-pill:active {
		background-color: var(--ml-accent-dark);
	}

	/* ---------- Bottom sheets ---------- */

	/* Lock the page on <html> only: overflow on <body> too makes body the scroll container of
	   the sticky header and chip bar, which then jumped off screen while a sheet was open. */
	html.raa-ml-open {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.raa-ml-backdrop {
		display: block;
		position: fixed;
		z-index: 1000;
		inset: 0;
		background: rgba(17, 17, 17, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s, visibility .25s;
		touch-action: none;
	}

	html.raa-ml-open .raa-ml-backdrop {
		opacity: 1;
		visibility: visible;
	}

	body.raa-ml .raa-ml-sheet,
	.raa-ml-panel {
		display: flex;
		position: fixed;
		z-index: 1001;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		flex-direction: column;
		width: auto;
		height: 80vh;
		height: 80dvh;
		margin: 0;
		padding: 0;
		border-radius: 12px 12px 0 0;
		background: #fff;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
		color: var(--ml-text);
		font-size: 14px;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
	}

	.raa-ml-panel.raa-ml-sort {
		height: auto;
		max-height: 80dvh;
	}

	body.raa-ml .raa-ml-sheet.is-open,
	.raa-ml-panel.is-open {
		transform: none;
		visibility: visible;
	}

	.raa-ml-head {
		display: flex;
		position: relative;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		padding: 18px 8px 10px 16px;
		border-bottom: 1px solid var(--ml-line);
	}

	/* Drag handle look. */
	.raa-ml-head::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		border-radius: 2px;
		background: #d4d4d4;
	}

	.raa-ml-title {
		margin: 0;
		color: var(--ml-text);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
	}

	.raa-ml-close {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.raa-ml-close::before,
	.raa-ml-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 1.5px;
		margin: -1px 0 0 -9px;
		background: var(--ml-text);
		transform: rotate(45deg);
	}

	.raa-ml-close::after { transform: rotate(-45deg); }

	.raa-ml-body {
		display: flex;
		flex: 1;
		min-height: 0;
	}

	.raa-ml-rail {
		flex: 0 0 132px;
		overflow-y: auto;
		border-right: 1px solid var(--ml-line);
		background: var(--ml-soft);
	}

	.raa-ml-tab {
		display: block;
		width: 100%;
		min-height: 52px;
		margin: 0;
		padding: 10px 8px 10px 12px;
		border: 0;
		border-left: 4px solid transparent;
		border-bottom: 1px solid var(--ml-line);
		border-radius: 0;
		background: transparent;
		color: var(--ml-text);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
		cursor: pointer;
	}

	.raa-ml-tab.is-active {
		border-left-color: var(--ml-accent);
		background: #fff;
	}

	.raa-ml-tab small {
		display: block;
		margin-top: 3px;
		color: var(--ml-accent);
		font-size: 11px;
	}

	.raa-ml-single .raa-ml-rail { display: none; }

	/* The sidebar itself becomes the options pane. */
	body.raa-ml .raa-ml-sheet #secondary {
		position: static;
		z-index: auto;
		flex: 1;
		min-width: 0;
		width: auto !important;
		height: auto;
		margin: 0;
		padding: 12px 16px 16px;
		overflow-y: auto;
		opacity: 1;
		visibility: visible;
		transition: none;
		overscroll-behavior: contain;
	}

	.raa-ml-sheet #secondary > .widget:not(.raa-ml-on),
	.raa-ml-sheet #secondary .raa-ml-off,
	.raa-ml-sheet #secondary .facet-label,
	.raa-ml-sheet #secondary .widget-title,
	.raa-ml-sheet .raa-pro-filter-heading,
	.raa-ml-sheet .raa-pro-form > .button,
	.raa-ml-sheet .raa-pro-reset,
	.raa-ml-sheet .raa-pro-chips {
		display: none !important;
	}

	.raa-ml-sheet #secondary > .widget.raa-ml-on {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.raa-ml-sheet .raa-pro-filters fieldset {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.raa-ml-sheet .raa-pro-filters legend { display: none; }

	/* Comfortable tap rows for FacetWP checkboxes and pro-filter choices. */
	.raa-ml-sheet .facetwp-checkbox {
		margin: 0;
		padding-top: 11px;
		padding-bottom: 11px;
		border-bottom: 1px solid var(--ml-line);
		background-position: 0 50%;
		font-size: 14px;
	}

	.raa-ml-sheet .raa-pro-choice {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		border-bottom: 1px solid var(--ml-line);
	}

	.raa-ml-sheet .raa-pro-choice small {
		margin-left: auto;
		color: var(--ml-muted);
	}

	.raa-ml-sheet input[type="checkbox"],
	.raa-ml-option input {
		accent-color: var(--ml-accent);
	}

	.raa-ml-foot {
		display: flex;
		flex: 0 0 auto;
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--ml-line);
		background: #fff;
	}

	.raa-ml-btn {
		flex: 1;
		height: 48px;
		margin: 0;
		padding: 0 16px;
		border: 1px solid var(--ml-text);
		border-radius: var(--ml-r);
		background: var(--ml-text);
		color: #fff;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.raa-ml-btn-ghost {
		flex: 0 0 auto;
		background: #fff;
		color: var(--ml-text);
	}

	.raa-ml-btn[hidden] { display: none; }

	html.raa-ml-loading .raa-ml-foot .raa-ml-btn:not(.raa-ml-btn-ghost) { opacity: .6; }

	.raa-ml-options {
		overflow-y: auto;
		padding: 0 0 calc(8px + env(safe-area-inset-bottom));
	}

	.raa-ml-option {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		margin: 0;
		padding: 0 16px;
		border-bottom: 1px solid var(--ml-line);
		font-size: 15px;
		cursor: pointer;
	}

	.raa-ml-option input {
		width: 20px;
		height: 20px;
		margin: 0;
	}

	/* ---------- Loading skeleton (FacetWP refresh, pro filters aria-busy) ---------- */

	.raa-ml .sfwp-loading-overlay { display: none !important; }

	html.raa-ml-loading .raa-ml ul.products li.product,
	.raa-ml #raa-pro-catalog[aria-busy] ul.products li.product {
		position: relative;
		pointer-events: none;
	}

	html.raa-ml-loading .raa-ml ul.products li.product::after,
	.raa-ml #raa-pro-catalog[aria-busy] ul.products li.product::after {
		content: "";
		position: absolute;
		z-index: 5;
		inset: 0;
		background: linear-gradient(100deg, #f1f1f1 30%, #fafafa 50%, #f1f1f1 70%);
		background-size: 300% 100%;
		animation: raa-ml-shimmer 1.2s linear infinite;
	}

	@keyframes raa-ml-shimmer {
		from { background-position: 100% 0; }
		to { background-position: 0 0; }
	}

	/* ---------- Back to top ---------- */

	.raa-ml-up {
		display: block;
		position: fixed;
		z-index: 90;
		right: 16px;
		bottom: calc(84px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--ml-line);
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .2s, transform .2s, visibility .2s;
		cursor: pointer;
	}

	.raa-ml-up::before {
		content: "";
		position: absolute;
		top: 18px;
		left: 16px;
		width: 10px;
		height: 10px;
		border-top: 1.5px solid var(--ml-text);
		border-left: 1.5px solid var(--ml-text);
		transform: rotate(45deg);
	}

	.raa-ml-up.is-on {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	html.raa-ml-open .raa-ml-up { visibility: hidden; }
}

/* ---------- Product cards on phones ---------- */

@media (max-width: 767px) {

	.raa-ml ul.products {
		column-gap: 12px;
	}

	/* Same title height in every card so grid rows line up. */
	.raa-ml ul.products li.product .woocommerce-loop-product__title a {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.raa-ml ul.products li.product .sale-item.product-label {
		border-radius: 2px;
		background: var(--ml-accent);
		color: #fff;
		font-weight: 700;
	}

	/* 1 per row: image left, details right, compact cart button beside the price. */
	html.raa-view-list .raa-ml ul.products {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	html.raa-view-list .raa-ml ul.products li.product {
		display: grid;
		position: relative;
		grid-template-columns: 46% minmax(0, 1fr);
		column-gap: 14px;
		align-items: stretch;
		/* At most 2 products per screen: half of what is left under the header and chip bar.
		   --ml-vh is the screen height measured once in JS: Some mobile browsers (Edge) recompute vh/svh while the
		   toolbar collapses, which made every row grow on scroll down and shrink on scroll up. */
		min-height: calc((var(--ml-vh, 100svh) - var(--ml-top) - 60px) / 2);
		height: auto;
		padding: 16px 0;
		border-bottom: 1px solid var(--ml-line);
		cursor: pointer;
	}

	html.raa-view-list .raa-ml ul.products li.product:first-child { padding-top: 4px; }

	/* Static so the wishlist heart anchors to the card corner, not the image. */
	html.raa-view-list .raa-ml ul.products li.product .woocommerce-image__wrapper {
		display: flex;
		position: static;
		grid-column: 1;
		align-items: center;
		margin: 0;
	}

	/* ...but the sale badge (inside the image link) stays on the image. */
	html.raa-view-list .raa-ml ul.products li.product .woocommerce-image__wrapper > a {
		position: relative;
		width: 100%;
	}

	html.raa-view-list .raa-ml ul.products li.product .woocommerce-card__header {
		display: flex;
		grid-column: 2;
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	html.raa-view-list .raa-ml ul.products li.product .product__categories { display: none; }

	html.raa-view-list .raa-ml ul.products li.product .rbp-wishlist-toggle--loop {
		top: 10px;
		right: -6px;
		background: transparent;
		box-shadow: none;
	}

	html.raa-view-list .raa-ml ul.products li.product .rbp-compare-toggle {
		order: 9;
		align-self: flex-start;
		width: auto;
		margin-top: 10px;
	}

	html.raa-view-list .raa-ml ul.products li.product .woocommerce-loop-product__title {
		margin: 0 0 6px;
		padding-right: 32px;
		font-size: 15px;
		line-height: 1.35;
	}

	html.raa-view-list .raa-ml ul.products li.product .raa-ml-desc {
		display: -webkit-box;
		overflow: hidden;
		margin: 0 0 6px;
		color: var(--ml-muted);
		font-size: 13px;
		line-height: 1.4;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	html.raa-view-list .raa-ml ul.products li.product .star-rating,
	html.raa-view-list .raa-ml ul.products li.product .shoptimizer_ratingContainer {
		margin: 0 0 4px;
	}

	html.raa-view-list .raa-ml ul.products li.product .product-stock-status { margin-top: 2px; }

	html.raa-view-list .raa-ml ul.products li.product .product-stock-status p.stock { font-size: 12px; }

	html.raa-view-list .raa-ml ul.products li.product .price {
		display: block;
		margin: auto 56px 0 0;
		padding-top: 8px;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.25;
	}

	html.raa-view-list .raa-ml ul.products li.product .price del {
		display: block;
		color: var(--ml-muted);
		font-size: 12px;
		font-weight: 400;
		opacity: 1;
	}

	html.raa-view-list .raa-ml ul.products li.product .price ins {
		color: var(--ml-accent);
		text-decoration: none;
	}

	/* Price goes to the bottom of the details column, after stock and badges. */
	html.raa-view-list .raa-ml ul.products li.product .woocommerce-card__header > .price { order: 10; }

	html.raa-view-list .raa-ml ul.products li.product .button,
	html.raa-view-list .raa-ml ul.products li.product .added_to_cart {
		order: 11;
	}

	html.raa-view-list .raa-ml ul.products li.product .button {
		position: absolute;
		right: 0;
		bottom: 16px;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border-radius: var(--ml-r);
		font-size: 0;
		line-height: 0;
		opacity: 1;
	}

	html.raa-view-list .raa-ml ul.products li.product .button::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 22px;
		margin: -11px 0 0 -11px;
		background: currentColor;
		-webkit-mask: var(--ml-icon) center / contain no-repeat;
		mask: var(--ml-icon) center / contain no-repeat;
		--ml-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	}

	html.raa-view-list .raa-ml ul.products li.product .add_to_cart_button::before {
		--ml-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1.5 1.5 0 001.5 1.2h8.7a1.5 1.5 0 001.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17.5' cy='20' r='1.2'/%3E%3C/svg%3E");
	}

	html.raa-view-list .raa-ml ul.products li.product .button.loading::before { opacity: .4; }

	html.raa-view-list .raa-ml ul.products li.product .added_to_cart {
		width: auto;
		margin-top: 6px;
		padding: 0;
		background: none;
		color: var(--ml-text);
		font-size: 12px;
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.raa-ml-sheet,
	.raa-ml-panel,
	.raa-ml-backdrop,
	.raa-ml-up {
		transition: none !important;
	}

	html.raa-ml-loading .raa-ml ul.products li.product::after,
	.raa-ml #raa-pro-catalog[aria-busy] ul.products li.product::after {
		animation: none;
	}
}