/* =============================================================
   ADORNCROFT — "Explore Fabrics" picker modal
   Extracted from product-single.css so the same picker can be used
   outside the product page (e.g. the collection hero's "Get free fabric
   swatches" link). Markup: ac_fabrics_modal_markup() in inc/single-product.php
   Behaviour: js/fabrics-modal.js
   ============================================================= */

/* ── "Explore Fabrics" filter modal ──────────────────────────────
   Ported from the Figma export (4.1. Product Page - Fabrics/Desktop). */
.ac-fabrics-modal { display: none; position: fixed; inset: 0; z-index: 1000; }
/* The 20px padding here is what insets the card from the screen edges. The card
   is then sized as a percentage of THIS box rather than with vh maths — see the
   note on .ac-fabrics-modal-card below. */
.ac-fabrics-modal:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 20px; }
.ac-fabrics-modal, .ac-fabrics-modal * { box-sizing: border-box; }
/* Self-contained resets. This markup used to live only on the product page,
   where `.ac-product-page p { margin: 0 }` zeroed things for it. Now that the
   modal renders on collection pages too it has to stand on its own — the
   theme's global `p { margin-bottom: 1.75em }` was otherwise adding 42px under
   the "Fabrics" heading (1.75em of its 24px font), which read as a big empty
   gap above the swatch grid. */
.ac-fabrics-modal p,
.ac-fabrics-modal h1,
.ac-fabrics-modal h2,
.ac-fabrics-modal h3,
.ac-fabrics-modal h4 { margin: 0; padding: 0; }
.ac-fabrics-modal-overlay { position: absolute; inset: 0; background: rgba(43, 42, 41, 0.55); }

.ac-fabrics-modal-card {
	/* Sized against the fixed overlay (100%), NOT the viewport.
	   `calc(100vh - 40px)` was wrong on phones: mobile browsers resolve 100vh to
	   the LARGE viewport — the height as if the address bar were hidden — so the
	   card was taller than the visible screen and its bottom, including the
	   pinned footer, sat below the fold. That's what made the fabric grid look
	   like it ran on forever. The overlay is position:fixed inset:0, so its box
	   is exactly the visible area; percentages of it can't overflow. */
	position: relative; width: min(1400px, 100%); height: min(920px, 100%); max-height: 100%;
	background: var(--ac-cream); border: 1px solid rgba(43, 42, 41, 0.68); border-radius: 8px;
	display: flex; overflow: hidden; font-family: var(--ac-font-b);
}

.ac-fabrics-modal-close {
	position: absolute; top: 20px; right: 20px; z-index: 1;
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	background: none !important; border: none !important; border-radius: 0 !important; cursor: pointer;
	font-size: 24px; line-height: 1; color: var(--ac-dark) !important;
}
.ac-fabrics-modal-close:hover,
.ac-fabrics-modal-close:focus {
	background: none !important; border: none !important; color: var(--ac-dark) !important; outline: none;
}

/* Mobile-only "Filters" toggle — hidden on desktop, shown/wired below 900px. */
.ac-fabrics-filter-toggle {
	display: none; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 11px 16px;
	background: var(--ac-cream) !important; border: 1px solid var(--ac-dark) !important; border-radius: 0 !important; color: var(--ac-dark) !important;
	font-family: var(--ac-font-b); font-weight: 700; font-size: 12px; line-height: 14px; text-transform: uppercase;
	cursor: pointer;
}
.ac-fabrics-filter-toggle:hover, .ac-fabrics-filter-toggle:focus {
	background: var(--ac-cream) !important; border-color: var(--ac-dark) !important; color: var(--ac-dark) !important; outline: none;
}
.ac-fabrics-filter-toggle svg { flex-shrink: 0; }

.ac-fabrics-modal-sidebar {
	flex: 0 0 274px; padding: 60px 40px 60px 60px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 32px;
	border-right: 1px solid rgba(43, 42, 41, 0.68);
}
.ac-fabrics-filter-group { display: flex; flex-direction: column; gap: 16px; }
.ac-fabrics-filter-label { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--ac-dark); }
.ac-fabrics-filter-options { display: flex; flex-direction: column; gap: 16px; }

/* Checkbox itself reuses the PLP's .ac-filter-option style (product-lister.css,
   loaded as a dependency on this page too) — just re-scoped type size/spacing
   here to match this modal's own Figma spec. */
.ac-fabrics-modal-sidebar .ac-filter-option label { gap: 16px; font-size: 12px; line-height: 17px; }
/* An option that would return no fabrics given the current selection. Faded
   and non-interactive rather than hidden, so the list doesn't reshuffle under
   the visitor's cursor and they can still see what exists. */
.ac-fabrics-modal-sidebar .ac-filter-option.is-unavailable label { opacity: 0.35; cursor: not-allowed; }
.ac-fabrics-modal-sidebar .ac-filter-option.is-unavailable input { cursor: not-allowed; }

.ac-fabrics-modal-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ac-fabrics-modal-scroll { flex: 1 1 0; min-height: 0; padding: 60px 60px 24px; display: flex; flex-direction: column; gap: 24px; }
.ac-fabrics-modal-heading { font-family: var(--ac-font-h); font-weight: 600; font-size: 24px; line-height: 29px; color: var(--ac-dark); }

.ac-fabrics-grid {
	flex: 1 1 0; min-height: 0; overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, 102px);
	grid-auto-rows: 102px;
	gap: 16px; align-content: start; justify-content: start;
	padding: 12px 12px 0 0; box-sizing: border-box;
}
.ac-fabric-tile {
	position: relative; width: 102px; height: 102px; min-width: 0; min-height: 0;
	border-radius: 8px; border: 1px solid rgb(217, 217, 217); overflow: visible;
	background: none !important; padding: 0; cursor: pointer; display: block;
}
.ac-fabric-tile:hover, .ac-fabric-tile:focus { background: none !important; border-color: rgb(217, 217, 217); outline: none; }
.ac-fabric-tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
.ac-fabric-pin-badge {
	position: absolute; z-index: 3; top: -10px; right: -10px;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #2B2A29; color: #F7F3EE;
	box-shadow: 0 0 0 2px #F7F3EE;
	pointer-events: none;
}
.ac-fabric-pin-badge svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.ac-fabric-tile--decide-later {
	background: rgba(43, 42, 41, 0.68) !important; border: none !important; color: #fff !important;
	font-family: var(--ac-font-b); font-weight: 700; font-size: 20px; line-height: 1.3; text-align: center; text-transform: uppercase;
	display: flex; align-items: center; justify-content: center; padding: 8px;
}
.ac-fabric-tile--decide-later:hover,
.ac-fabric-tile--decide-later:focus {
	background: rgba(43, 42, 41, 0.68) !important; border: none !important; color: #fff !important; outline: none;
}
/* Once the free-swatch cap is reached, the tiles that aren't picked go quiet —
   same affordance as .ac-filter-option.is-unavailable above, so "you can't add
   this right now" reads the same way throughout the modal. */
.ac-fabric-tile.is-unselectable { opacity: 0.35; cursor: not-allowed; }

.ac-fabric-tile.is-selected { outline: 3px solid var(--ac-dark); outline-offset: -3px; }
.ac-fabric-tile.is-selected::after {
	content: '\2713'; position: absolute; top: 4px; right: 4px;
	width: 20px; height: 20px; border-radius: 50%; background: var(--ac-dark); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
}
.ac-fabric-tile.is-pinned.is-selected::after { top: auto; right: 4px; bottom: 4px; }

.ac-fabrics-modal-footer {
	flex: none; display: flex; align-items: flex-start; gap: 28px;
	padding: 24px 20px; background: var(--ac-cream); box-shadow: 0px -10px 16px rgba(0, 0, 0, 0.16);
}
.ac-fabrics-cta-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ac-fabrics-cta-btn {
	display: flex; align-items: center; justify-content: center;
	padding: 11px 16px; background: var(--ac-dark) !important; border: none; border-radius: 0 !important; cursor: pointer;
	font-family: var(--ac-font-b) !important; font-weight: 700 !important; font-size: 12px !important; line-height: 14px !important;
	text-align: center; text-transform: uppercase !important; color: var(--ac-cream) !important; white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.ac-fabrics-cta-btn:not(:disabled):hover { opacity: 0.85; }
.ac-fabrics-cta-btn:disabled {
	background: rgba(43, 42, 41, 0.25) !important; color: rgba(43, 42, 41, 0.5) !important; cursor: not-allowed;
}
.ac-fabrics-cta-caption { font-family: var(--ac-font-b); font-size: 12px; line-height: 17px; color: var(--ac-dark); text-align: center; }

@media (max-width: 900px) {
	/* Keep the DESKTOP scrolling model on mobile: the card stays a fixed-height
	   box that clips, and the fabric grid scrolls inside it, so the footer CTA
	   stays pinned and visible.

	   It previously tried to scroll the whole card instead (card overflow-y:auto
	   with the grid set to overflow:visible), but .ac-fabrics-modal-main is
	   flex:1 1 0 inside a fixed-height card — so it only ever got the leftover
	   space, and the grid poured out of it, painting over the footer and running
	   on past the bottom of the card. */
	.ac-fabrics-modal-card { flex-direction: column; overflow: hidden; }
	.ac-fabrics-filter-toggle { display: flex; margin: 16px 16px 0; width: auto; }
	.ac-fabrics-modal-sidebar {
		display: none;
		flex: none; width: 100%; padding: 24px 16px; border-right: none; border-bottom: 1px solid rgba(43, 42, 41, 0.68);
		flex-direction: column; gap: 24px; overflow-y: visible;
	}
	/* 40% of the CARD, not 50vh — the card is now the sizing reference, and a vh
	   value here could push the grid out of it on a short screen. */
	.ac-fabrics-modal-sidebar.is-open { display: flex; max-height: 40%; overflow-y: auto; }
	.ac-fabrics-modal-main { overflow: hidden; min-height: 0; }
	.ac-fabrics-modal-scroll { padding: 24px 16px; gap: 16px; min-height: 0; }
	.ac-fabrics-grid {
		/* Scrolls itself, as on desktop — not overflow:visible, which is what
		   let it escape the card. justify-content:center so the smaller tiles
		   sit centred rather than hugging the left edge on a narrow screen. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: repeat(auto-fill, 70px);
		grid-auto-rows: 70px;
		gap: 8px;
		padding: 10px 10px 0 0;
		justify-content: center;
	}
	.ac-fabric-tile { width: 70px; height: 70px; }
	.ac-fabric-pin-badge { top: -8px; right: -8px; width: 22px; height: 22px; }
	.ac-fabric-pin-badge svg { width: 11px; height: 11px; }
	.ac-fabric-tile--decide-later { font-size: 14px; line-height: 1.2; padding: 4px; }
	.ac-fabric-tile.is-selected::after { width: 18px; height: 18px; top: 3px; right: 3px; font-size: 11px; }
	.ac-fabric-tile.is-pinned.is-selected::after { top: auto; right: 3px; bottom: 3px; }
	.ac-fabrics-modal-footer { padding: 16px 20px; flex-wrap: wrap; justify-content: center; }
	.ac-fabrics-cta-group { gap: 16px; }
}