/*
 * Product listing on phones (Figma "Bedsheets Listing" 1300:26635, "Sort By" 1300:44715), see
 * inc/mobile-listing.php. Template "Bedsheets Listing" (783); .archive.woocommerce = shop and product
 * category/tag archives (the product page reuses #bl-category-strip with its own styles).
 * html.sng-has-listbar / .sng-sheet-open come from mobile-listing.js. Phones only: 767px = mobile_landscape.
 */
@media (max-width: 767px) {
	/* ---------- Category strip: one swiping row of 60px circles with thin dividers (Figma) ---------- */
	.archive.woocommerce #brxe-mhvmig {
		padding: 0;
	}

	.archive.woocommerce #bl-category-strip {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: var(--space-20);
		width: 100%;
		max-width: none;
		padding: var(--space-15) var(--space-20);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.archive.woocommerce #bl-category-strip::-webkit-scrollbar {
		display: none;
	}

	.archive.woocommerce #bl-category-strip > .brxe-block {
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: center;
		gap: var(--space-10);
		width: auto;
		min-width: 60px;
	}

	.archive.woocommerce #bl-category-strip > .brxe-block > .brxe-block {
		width: 60px;
		height: 60px;
		overflow: hidden;
		border-radius: var(--radius-pill);
		background: var(--color-surface-sand);
	}

	.archive.woocommerce #bl-category-strip > .brxe-block > .brxe-block img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.archive.woocommerce #bl-category-strip > .brxe-block > .brxe-text-basic {
		font-family: var(--font-body);
		font-size: 13px;
		font-weight: 400;
		line-height: 1.6;
		color: var(--color-black);
		white-space: nowrap;
	}

	/* Dividers between categories (Figma 1×50 fading rule); hidden by the template on phones. */
	.archive.woocommerce #bl-category-strip > .brxe-div {
		display: block;
		flex: none;
		align-self: center;
		width: 1px;
		height: 50px;
		margin-top: -21px; /* Centre on the circles, not on circle + label. */
		background: linear-gradient(rgba(221, 210, 192, 0), var(--color-border-subtle), rgba(221, 210, 192, 0));
	}

	/* ---------- Product area on sand: chips, 2-column grid (Figma 175px cards, gap 12) ---------- */
	.archive.woocommerce #bl-shop-layout {
		padding: var(--space-20) var(--space-20) var(--space-40);
		background: var(--color-surface-sand);
	}

	.archive.woocommerce #brxe-17b7h3 {
		gap: var(--space-20);
		width: 100%;
	}

	/* The toolbar keeps only the active-filter tags; Filters / Sort move to the bottom bar. */
	.archive.woocommerce #brxe-xulix4 {
		gap: 0;
	}

	.archive.woocommerce #brxe-x3x08s,
	.archive.woocommerce #brxe-9i0ui4 {
		display: none;
	}

	.archive.woocommerce #brxe-xulix4:not(:has(.brxe-filter-active-filters li)) {
		display: none;
	}

	.sng-list-chips {
		display: flex;
		align-self: stretch;
		gap: var(--space-15);
		width: calc(100% + 2 * var(--space-20)); /* Full bleed; scrolls instead of widening the page. */
		min-width: 0;
		max-width: none;
		margin: 0 calc(var(--space-20) * -1);
		padding: 0 var(--space-20);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sng-list-chips::-webkit-scrollbar {
		display: none;
	}

	.sng-list-chip {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: var(--space-5);
		height: 44px;
		padding: var(--space-10) var(--space-15);
		border: var(--hairline-md) solid var(--color-border-subtle);
		border-radius: var(--radius-card);
		background: var(--color-surface-cream);
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--color-ink-muted);
		text-decoration: none;
		cursor: pointer;
	}

	.sng-list-chip:not(.sng-list-chip--luxury)::after {
		content: "";
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 7l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 7l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.sng-list-chip--luxury {
		color: var(--color-badge-luxury);
	}

	.sng-list-chip--luxury svg {
		width: 18px;
		height: 18px;
	}

	.sng-list-chip--luxury.is-active {
		border-color: var(--color-badge-luxury);
		background: var(--color-badge-luxury);
		color: var(--color-on-accent);
	}

	.archive.woocommerce #bl-product-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-20) 12px;
		width: 100%;
	}

	.archive.woocommerce #bl-product-grid > .brxe-iluywy {
		width: auto;
		min-width: 0;
	}

	/* Promo banner across both columns, after the first two rows (Figma "Festive Homes" 362×234). */
	.archive.woocommerce #bl-product-grid > .brxe-iluywy {
		order: 2;
	}

	.archive.woocommerce #bl-product-grid > .brxe-iluywy:nth-child(-n+4) {
		order: 0;
	}

	.archive.woocommerce #brxe-nqorc8 {
		order: 1;
		z-index: 0; /* Keep the banner's layered copy (z-index 2) under the fixed bottom bar. */
		grid-column: 1 / -1;
		min-height: 234px;
		height: auto;
		border-radius: var(--radius-card);
	}

	.archive.woocommerce #brxe-4q2ete {
		gap: var(--space-20);
		width: 211px;
		max-width: 60%;
		padding: var(--space-20);
	}

	.archive.woocommerce #brxe-idd16k {
		gap: var(--space-10);
		width: 100%;
	}

	.archive.woocommerce #brxe-lizgly {
		font-size: 24px;
		line-height: 1.3;
	}

	.archive.woocommerce #brxe-m2ccw7 {
		font-size: 14px;
		line-height: 1.5;
	}

	.archive.woocommerce #brxe-kgfkor {
		width: auto;
		min-height: 0;
		padding: var(--space-15) var(--space-20);
		font-size: 13px;
		line-height: 1.17;
	}

	/* Pagination: Bricks' AJAX pagination only (the WooCommerce one and the "Page x of y" lines repeat it;
	   none of them is in the phone design). */
	.archive.woocommerce #brxe-icrjjg,
	.archive.woocommerce #brxe-eadsem,
	.archive.woocommerce #brxe-2n8crx {
		display: none;
	}

	.archive.woocommerce #brxe-wurzfa {
		align-items: center;
		gap: var(--space-10);
	}

	/* ---------- SEO intro + buying guide under the grid ---------- */
	.archive.woocommerce #bl-page-head,
	.archive.woocommerce #bl-craft {
		padding: var(--space-40) var(--space-20);
	}

	.archive.woocommerce #brxe-cwktk1 {
		font-size: 24px;
		line-height: 1.2;
	}

	/* ---------- Bottom bar: Sort by | Shop | Filters (Figma), instead of the tabs ---------- */
	.sng-has-listbar #brxe-mnvlft,
	.sng-has-listbar #brxe-mnvrgt,
	.sng-has-listbar body #brxe-mnalft,
	.sng-has-listbar body #brxe-mnargt {
		display: none;
	}

	.sng-listbar-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-5);
		height: 44px;
		margin: 0 18px;
		padding: var(--space-10) var(--space-20);
		border: var(--hairline-md) solid var(--color-border-subtle);
		border-radius: var(--radius-card);
		background: var(--color-on-accent);
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 500;
		color: var(--color-ink);
		cursor: pointer;
	}

	.sng-listbar-btn svg {
		width: 18px;
		height: 18px;
	}

	.sng-listbar-btn--filters {
		color: var(--color-brand-deep);
	}

	/* ---------- Sort by sheet (Figma 1300:44715) ---------- */
	.sng-sheet-open,
	.sng-sheet-open body {
		overflow: hidden;
	}

	.sng-sort-sheet {
		position: fixed;
		inset: 0;
		z-index: 1000;
	}

	.sng-sort-sheet[hidden] {
		display: none;
	}

	.sng-sort-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(43, 32, 22, 0.45);
	}

	.sng-sort-sheet__panel {
		position: absolute;
		inset: auto 0 0;
		overflow: hidden;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		background: var(--color-surface-cream);
	}

	.sng-sort-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-15) var(--space-20);
		background: var(--color-on-accent);
	}

	.sng-sort-sheet__title {
		display: inline-flex;
		align-items: center;
		gap: var(--space-10);
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 500;
		color: var(--color-ink);
	}

	.sng-sort-sheet__title svg {
		width: 20px;
		height: 20px;
	}

	.sng-sort-sheet__close {
		padding: 0;
		border: 0;
		background: none;
		font-size: 28px;
		line-height: 1;
		color: var(--color-brand-deep);
		cursor: pointer;
	}

	.sng-sort-sheet__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-15);
		margin: 0;
		padding: var(--space-15) var(--space-20) var(--space-40);
		border: 0;
	}

	.sng-sort-sheet__option {
		display: flex;
		align-items: center;
		gap: var(--space-10);
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 500;
		color: var(--color-ink);
		cursor: pointer;
	}

	.sng-sort-sheet__option input {
		width: 18px;
		height: 18px;
		margin: 0;
		accent-color: var(--color-brand-deep);
	}
}