/* =============================================================
   ADORNCROFT – SINGLE PRODUCT PAGE
   Ported directly from the Figma export (4.0. Product Page/Desktop).
   Relies on the --ac-* variables + .ac-btn / .ac-product-card
   defined in product-lister.css (loaded as a dependency).
   ============================================================= */

/* ── Astra full-width resets ────────────────────────────────── */
.single-product #page,
.single-product .site,
.single-product .ast-container,
.single-product .site-content,
.single-product #primary,
.single-product #content,
.single-product .site-main,
.single-product .entry-content,
.single-product article,
.single-product .ast-woocommerce-container,
.single-product div.product {
	max-width  : 100% !important;
	width      : 100% !important;
	min-width  : 0 !important; /* flex items default to min-width:auto, letting the related-products track inflate the page width */
	margin     : 0 !important;
	padding    : 0 !important;
	background : var(--ac-cream) !important;
	box-sizing : border-box !important;
}

.single-product h1.entry-title,
.single-product .ast-page-title-wrap,
.single-product .woocommerce-breadcrumb,
.single-product .summary > *,
.single-product div.images { display: none !important; }

.ac-product-page * { box-sizing: border-box; }
.ac-product-page {
	background: var(--ac-cream); font-family: var(--ac-font-b); color: var(--ac-dark); overflow-x: clip;
	/* .ast-container is display:flex, so this is a flex item: without min-width:0 it
	   sizes to its max-content width (hero flex-basis sums to ~1440px) and clips. */
	width: 100%; max-width: 100%; min-width: 0;
}
.ac-product-page h1, .ac-product-page h2, .ac-product-page h3 { margin: 0; padding: 0; font-family: var(--ac-font-h); }
.ac-product-page p { margin: 0; }

.ac-section-heading {
	font-size      : 32px;
	line-height    : 42px;
	font-weight    : 700;
	text-align     : center;
	max-width      : 1120px;
	margin         : 0 auto;
	padding        : 0 20px;
	color          : var(--ac-dark);
	letter-spacing : var(--ac-ls-h);
}
.ac-section-intro { display: flex; justify-content: center; padding: 60px 160px; background: var(--ac-cream); }
.ac-why-us        .ac-section-intro { padding: 80px 160px 60px; }
.ac-related-products .ac-section-intro { padding: 80px 160px 40px; background: var(--ac-sand); }

/* ── Hero: gallery + buy box ─────────────────────────────────── */
.ac-product-hero {
	display        : flex;
	gap            : 60px;
	padding        : 30px 77px 40px 20px;
	align-items    : flex-start;
	background     : var(--ac-cream);
	box-sizing     : border-box;
}

.ac-product-gallery { flex: 1 1 0; max-width: 53.8%; min-width: 0; display: flex; flex-direction: column; }
.ac-product-main { width: 100%; aspect-ratio: 690 / 725; background-size: cover; background-position: center; }
.ac-product-thumbs { display: flex; height: 130px; }
.ac-product-thumb {
	flex: 0 0 115px; width: 115px; height: 130px; border: 1px solid var(--ac-cream);
	background-size: cover; background-position: center; cursor: pointer; padding: 0;
	opacity: 0.55; transition: opacity 0.2s ease;
}
.ac-product-thumb:hover { opacity: 1; }
.ac-product-thumb.is-active { border-color: var(--ac-dark); opacity: 1; }

.ac-product-buybox { flex: 1 1 0; max-width: 46.2%; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 20px; }
.ac-product-buybox > * { min-width: 0; }
.ac-product-title  { font-size: 32px; line-height: 42px; font-weight: 700; color: var(--ac-dark); letter-spacing: var(--ac-ls-h); }
.ac-product-price  { font-size: 16px; line-height: 26px; }

.ac-product-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; width: 508px; max-width: 100%; }

.ac-qty-box {
	flex: 0 0 118px; width: 118px; height: 38px; box-sizing: border-box;
	display: flex; align-items: center; gap: 8px; padding-left: 12px;
	background: var(--ac-cream); border: 1px solid var(--ac-dark); font-size: 12px;
}
.ac-qty-box label { white-space: nowrap; }
.ac-qty-box input[type="number"] {
	flex: 1; width: auto !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
	min-width: 0 !important;
	border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important;
	font: inherit !important; font-size: 12px !important; text-align: left !important; box-sizing: border-box !important;
	-moz-appearance: textfield; appearance: none;
}
.ac-qty-box input[type="number"]::-webkit-inner-spin-button,
.ac-qty-box input[type="number"]::-webkit-outer-spin-button { margin: 0; }

.ac-size-picker { position: relative; flex: 0 0 112px; width: 112px; height: 36px; }
.ac-size-picker .ac-size-toggle { width: 112px; height: 36px; white-space: nowrap; color: var(--ac-dark) !important; }
.ac-size-toggle,
.ac-size-toggle:focus,
.ac-size-toggle:focus-visible { outline: none !important; box-shadow: none !important; }
.ac-size-dropdown {
	display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 260px;
	background: var(--ac-cream); border: 1px solid var(--ac-dark); margin-top: 4px;
	outline: none;
}
.ac-size-dropdown.is-open { display: block; }
.ac-size-option {
	display: block; width: 100%; text-align: left; background: none; border: none;
	padding: 10px 16px; cursor: pointer; font: inherit; border-bottom: 1px solid rgba(43,42,41,0.1);
	color: var(--ac-dark);
	outline: none;
}
.ac-size-option:hover,
.ac-size-option:focus,
.ac-size-option:focus-visible {
	background      : rgba(227, 232, 214, 0.4);
	color           : var(--ac-dark);
	outline         : none !important;
	box-shadow      : none !important;
	border-color    : rgba(43,42,41,0.1) !important;
}

.ac-order-box { flex: 0 0 150px; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ac-order-box .ac-start-order-btn { width: 144px; height: 36px; font-size: 12px; line-height: 14px; }
.ac-secure-note { font-size: 12px; line-height: 16px; text-align: center; white-space: nowrap; }

.ac-fabric-order-box { display: flex; flex-wrap: wrap; gap: 12px; }
.ac-fabric-order-box .ac-btn { height: 44px; padding: 0 24px; font-size: 13px; }
.ac-fabric-order-box .ac-btn--outline,
.ac-sticky-sample-btn.ac-btn--outline { color: var(--ac-dark) !important; border-color: var(--ac-dark); }

.ac-product-financing { flex: 0 0 80px; width: 80px; height: 32px; display: flex; align-items: center; justify-content: center; }
.ac-product-financing img { width: 80px; height: 32px; object-fit: contain; }

.ac-product-dimensions, .ac-product-delivery, .ac-product-fabric-count { font-size: 16px; line-height: 26px; }
.ac-product-controls + p { margin-top: 24px; }
.ac-product-dimensions + .ac-product-delivery { margin-top: 8px; }

.ac-product-fabric-row {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	background: var(--ac-cream); border: 1px solid var(--ac-dark); border-radius: 8px; padding: 8px 16px 8px 8px;
}
.ac-product-fabric-info { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 1.3; }
.ac-product-fabric-info img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.ac-product-fabric-decide-placeholder {
	width: 64px; height: 64px; border-radius: 4px; flex-shrink: 0;
	background: rgba(43, 42, 41, 0.68); color: #fff;
	align-items: center; justify-content: center; padding: 4px;
	font-family: var(--ac-font-b); font-weight: 700; font-size: 10px; line-height: 1.2; text-align: center; text-transform: uppercase;
}
.ac-product-fabric-decide-placeholder:not([hidden]) { display: flex; }
.ac-product-fabric-name { font-weight: 700; }
.ac-explore-fabrics-link,
.ac-product-fabric-row a.ac-explore-fabrics-link {
	font-family: var(--ac-font-b) !important;
	font-size: 16px !important;
	line-height: 21px !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	white-space: nowrap;
	color: var(--ac-dark) !important;
}

.ac-product-usps { display: flex; flex-direction: column; gap: 8px; }
.ac-product-usp {
	display: flex; align-items: center; gap: 15px; background: var(--ac-sand);
	padding: 16px 24px; min-height: 72px;
}
.ac-product-usp .ac-usp-icon {
	flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.ac-product-usp .ac-usp-icon img { max-width: 40px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.ac-product-usp span:last-child { font-size: 16px; line-height: 21px; font-weight: 500; }

/* ── Product Information (accordion + large image) ───────────── */
.ac-product-info { background: var(--ac-cream); padding-bottom: 40px; }
.ac-product-info-inner { display: flex; gap: 24px; padding: 0 20px; align-items: stretch; box-sizing: border-box; }
.ac-info-accordion { flex: 1 1 0; max-width: 47.7%; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.ac-product-info-image { flex: 1 1 0; max-width: 52.3%; min-width: 0; background-size: cover; background-position: center; min-height: 728px; }

.ac-accordion-item { display: flex; flex-direction: column; gap: 24px; }
.ac-accordion-trigger {
	display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 24px;
	background: none; border: none; padding: 0; cursor: pointer; font-family: var(--ac-font-h); font-weight: 600;
	font-size: 24px; line-height: 29px; color: var(--ac-dark); text-align: left;
	outline: none; box-shadow: none; user-select: none;
}
.ac-accordion-trigger:hover,
.ac-accordion-trigger:focus,
.ac-accordion-trigger:active {
	background: none !important; color: var(--ac-dark) !important; outline: none !important; box-shadow: none !important;
}
.ac-accordion-item::after { content: ''; display: block; width: 100%; height: 1px; background: var(--ac-dark); order: 1; }
.ac-accordion-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.ac-accordion-icon::before, .ac-accordion-icon::after {
	content: ''; position: absolute; background: var(--ac-dark);
}
.ac-accordion-icon::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.ac-accordion-icon::after  { top: 0; left: 7px; width: 1.5px; height: 16px; transition: transform 0.42s ease; }
.ac-accordion-item.is-open .ac-accordion-icon::after { transform: scaleY(0); }

.ac-accordion-body {
	display            : grid;
	grid-template-rows : 0fr;
	order              : 2;
	font-size          : 16px;
	line-height        : 26px;
	transition         : grid-template-rows 0.42s ease;
}
.ac-accordion-body > * { overflow: hidden; min-height: 0; }
.ac-accordion-item.is-open .ac-accordion-body { grid-template-rows: 1fr; }

/* ── Why Buy From Us ─────────────────────────────────────────── */
.ac-why-us { background: var(--ac-cream); }
.ac-why-us .ac-stats-band {
	background: var(--ac-cream); padding: 0 10% 60px; gap: 14px; flex-wrap: nowrap; align-items: stretch;
	box-sizing: border-box;
}
.ac-why-us .ac-stats-item {
	background: var(--ac-sand); flex: 1 1 0; min-height: 268px;
	padding: 24px 32px 43px; gap: 14px; box-sizing: border-box;
	align-items: center; text-align: center;
}
.ac-why-us .ac-stats-title, .ac-why-us .ac-stats-desc { color: var(--ac-dark); text-align: center; }
.ac-why-us .ac-stats-title {
	display: flex; align-items: center; justify-content: center;
	min-height: calc(29px * 2); width: 100%; box-sizing: border-box;
}
.ac-why-us .ac-stats-desc { color: rgba(43,42,41,0.68); max-width: 293.33px; }

/* ── You May Also Like ───────────────────────────────────────── */
.ac-related-products { background: var(--ac-sand); }
.ac-related-track-wrap { width: 100%; max-width: 100%; min-width: 0; contain: inline-size; overflow-x: auto; overflow-y: hidden; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ac-related-track-wrap::-webkit-scrollbar { display: none; }
.ac-related-track-wrap.is-dragging { cursor: grabbing; user-select: none; }
.ac-related-track-wrap.is-dragging .ac-related-card { pointer-events: none; }
.ac-related-track { display: flex; gap: 1px; background: #EDEAE9; width: max-content; }
.ac-related-card {
	flex: 0 0 300px; width: 300px; min-height: 350px; position: relative; display: flex; align-items: flex-end;
	background-size: cover; background-position: center; padding: 24px; overflow: hidden; color: var(--ac-cream); text-decoration: none;
}
.ac-related-card:hover,
.ac-related-card:focus,
.ac-related-card:visited,
.ac-related-card:hover .ac-related-name,
.ac-related-card:hover .ac-related-price { color: var(--ac-cream); }
.ac-related-overlay { position: absolute; inset: 0; background: linear-gradient(-180deg, rgba(43,42,41,0) 50%, rgba(43,42,41,0.8) 90%); }
.ac-related-body { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.ac-related-name { font-family: var(--ac-font-h); font-size: 18px; line-height: 23px; font-weight: 700; color: var(--ac-cream); }
.ac-related-price { font-family: var(--ac-font-b); font-size: 16px; line-height: 21px; font-weight: 400; }
.ac-related-body .ac-btn { align-self: flex-start; }

/* ── "Let's design something beautiful" split (image left, text right on this page) ── */
.ac-product-page .ac-split-text { order: 2; }
.ac-product-page .ac-split-img  { order: 1; }

/* ── FAQ (reuses .ac-faq from product-lister.css, sand background here) ── */
.ac-faq-wrap { background: var(--ac-sand); }
.ac-faq-wrap .ac-faq { padding: 80px 160px 60px; gap: 8px; box-sizing: border-box; }

/* ── Shared button classes (fallback if product-lister.css isn't loaded) ── */
.ac-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: .5px; cursor: pointer; border: 1px solid var(--ac-dark); background: var(--ac-cream); color: var(--ac-dark); text-decoration: none; line-height: 14px; transition: background 0.2s ease, color 0.2s ease; }
.ac-btn--dark { background: var(--ac-dark); color: var(--ac-cream); border-color: var(--ac-dark); }
.ac-btn--outline { background: transparent; }
.ac-btn--outline-light { border-color: #E3E8D6; color: var(--ac-cream); background: transparent; }
.ac-btn--added { background: #2e7d32 !important; border-color: #2e7d32 !important; }

/* Misty Green hover fill — border stays Charcoal Black, only the fill + text swap (per Figma "Type=Primary, State=Hover") */
.ac-product-page .ac-btn--dark:hover,
.ac-product-page .ac-start-order-btn:hover {
	background   : #E3E8D6 !important;
	color        : var(--ac-dark) !important;
	border-color : var(--ac-dark) !important;
	opacity      : 1;
}
.ac-product-page .ac-btn--outline:hover,
.ac-product-page .ac-btn--outline:focus,
.ac-product-page .ac-size-toggle:hover,
.ac-product-page .ac-size-toggle:focus,
.ac-product-page .ac-size-toggle:active {
	background   : #E3E8D6 !important;
	color        : var(--ac-dark) !important;
	border-color : var(--ac-dark) !important;
	outline      : none !important;
	box-shadow   : none !important;
}
.ac-product-page .ac-btn--outline-light:hover {
	background   : rgba(227, 232, 214, 0.4) !important;
	color        : var(--ac-cream) !important;
	border-color : #E3E8D6 !important;
}

@media (max-width: 1200px) {
	.ac-section-intro, .ac-why-us .ac-stats-band, .ac-faq-wrap .ac-faq { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 980px) {
	.ac-section-intro { padding: 40px 16px 24px !important; }
	.ac-product-hero { flex-direction: column; padding: 16px; gap: 24px; }
	.ac-product-gallery, .ac-product-buybox { flex: none; width: 100%; max-width: 100%; }
	/* Gallery bleeds out of the hero's 16px padding so the main image is
	   edge-to-edge; negative margins mirror the padding exactly. Sizes per
	   the Figma mobile spec: 350px image + 75px thumbnail strip. */
	.ac-product-gallery { width: calc(100% + 32px); max-width: none; margin: -16px -16px 0; }
	.ac-product-main { height: auto; aspect-ratio: 360 / 350; }
	.ac-product-thumbs { height: 75px; overflow-x: auto; filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.16)); }
	.ac-product-thumb { flex: 0 0 75px; width: 75px; height: 75px; }
	.ac-product-title { font-size: 24px; line-height: 32px; }
	.ac-product-controls { flex-wrap: wrap; }
	.ac-product-info-inner { flex-direction: column; padding: 0 16px; }
	.ac-info-accordion { flex: none; width: 100%; max-width: 100%; }
	.ac-product-info-image { flex: none; width: 100%; max-width: 100%; min-height: 332px; }
	.ac-why-us .ac-stats-band, .ac-faq-wrap .ac-faq { padding-left: 16px; padding-right: 16px; }
	.ac-why-us .ac-stats-band { flex-direction: column; align-items: center; }
	.ac-why-us .ac-stats-item { flex: none; width: 100%; max-width: 100%; min-height: 0; }
	.ac-why-us .ac-stats-desc { max-width: 100%; }
}

@media (max-width: 600px) {
	/* Figma mobile spec (Frame 105): Qty + Start order/Affirm on one row,
	   Custom size as a full-width row below. */
	.ac-product-controls { gap: 12px 16px; }

	.ac-qty-box { flex: 0 0 61px; width: 61px; gap: 4px; padding-left: 8px; }
	.ac-qty-box label { font-size: 11px; }
	.ac-qty-box input[type="number"] { font-size: 11px !important; }

	.ac-order-box { flex: 1 1 0; width: auto; min-width: 0; }
	.ac-order-box .ac-start-order-btn { width: 100%; }

	.ac-product-financing { flex: 0 0 80px; }

	.ac-size-picker { order: 10; flex: 1 1 100%; width: 100%; height: 38px; }
	.ac-size-picker .ac-size-toggle { width: 100%; height: 38px; }
	.ac-size-dropdown { min-width: 100%; }

	.ac-product-controls--fabric .ac-fabric-order-box { flex-direction: column; width: 100%; }
	.ac-product-controls--fabric .ac-fabric-order-box .ac-btn { width: 100%; }

	/* "Let's design something beautiful" split, after the FAQ — Figma spec is
	   left-aligned text (Frame 1: align-items flex-start), not centered. */
	.ac-product-page .ac-split-text,
	.ac-product-page .ac-split-inner {
		align-items : flex-start;
		text-align  : left;
	}
	.ac-product-page .ac-split .ac-btn--dark { align-self: flex-start; }
}

/* ── Sticky bottom CTA ──────────────────────────────────────────────
   Hidden until the user scrolls past the buy box, hidden again once
   the footer scrolls into view. */
.ac-sticky-cta {
	position       : fixed;
	left           : 0;
	right          : 0;
	bottom         : 0;
	z-index        : 999;
	background     : var(--ac-cream);
	box-shadow     : 0px 0px 16px 0px rgba(0, 0, 0, 0.16);
	transform      : translateY(100%);
	opacity        : 0;
	pointer-events : none;
	transition     : transform 0.25s ease, opacity 0.25s ease;
}
.ac-sticky-cta.is-visible {
	transform      : translateY(0);
	opacity        : 1;
	pointer-events : auto;
}
.ac-sticky-cta.is-docked {
	position : absolute;
	bottom   : auto;
}
.ac-sticky-cta-inner {
	display         : flex;
	flex-direction  : row;
	gap             : 28px;
	justify-content : flex-start;
	align-items     : flex-start;
	padding         : 24px 20px;
}
.ac-sticky-qty-box { flex: none; width: 118px; height: 38px; }
.ac-sticky-size-btn { flex: none; width: 112px; height: 36px; white-space: nowrap; color: var(--ac-dark) !important; border-color: var(--ac-dark) !important; }
.ac-sticky-order-frame {
	display         : flex;
	flex-direction  : row;
	justify-content : center;
	align-items     : center;
	gap             : 7px;
	flex            : none;
	width           : 290px;
	height          : 36px;
}
.ac-sticky-order-frame .ac-sticky-start-order-btn { flex: none; width: 150px; height: 36px; }
.ac-sticky-order-frame .ac-secure-note { flex: none; width: 133px; }
.ac-sticky-financing { flex: none; width: 80px; height: 32px; object-fit: contain; align-self: center; }

.ac-sticky-cta-inner--fabric { padding-left: 60px; }

@media (max-width: 600px) {
	.ac-sticky-cta-inner {
		display               : grid;
		grid-template-columns : 53px 1fr auto;
		grid-template-rows    : auto auto;
		column-gap            : 16px;
		row-gap               : 12px;
		padding               : 18px 20px;
	}
	.ac-sticky-qty-box { grid-column: 1; grid-row: 1; width: 53px; height: 38px; align-self: start; }
	.ac-sticky-order-frame {
		grid-column     : 2; grid-row: 1;
		display         : flex; flex-direction: column; align-items: center; justify-content: flex-start;
		gap             : 6px; width: 100%; max-width: 100%; height: auto;
	}
	.ac-sticky-order-frame .ac-sticky-start-order-btn { flex: none; width: 100%; }
	.ac-sticky-order-frame .ac-secure-note { width: 100%; white-space: normal; font-size: 14px; line-height: 19px; }
	.ac-sticky-financing { grid-column: 3; grid-row: 1; align-self: start; width: 60px; height: auto; }
	.ac-sticky-cta-inner--fabric { display: flex; padding-left: 20px; }
	.ac-sticky-cta-inner--fabric .ac-fabric-order-box { flex-wrap: nowrap; width: 100%; }
	.ac-sticky-cta-inner--fabric .ac-fabric-order-box .ac-btn { flex: 1 1 0; width: auto; padding: 0 12px; white-space: nowrap; }
	.ac-sticky-size-btn { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 38px; }
}

/* ── "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; }
.ac-fabrics-modal:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.ac-fabrics-modal-overlay { position: absolute; inset: 0; background: rgba(43, 42, 41, 0.55); }

.ac-fabrics-modal-card {
	position: relative; width: min(1400px, calc(100vw - 40px)); height: min(920px, calc(100vh - 40px));
	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; }

.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;
}
.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: hidden;
	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; }
.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;
}
.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-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) {
	.ac-fabrics-modal-card { flex-direction: column; overflow-y: auto; }
	.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;
	}
	.ac-fabrics-modal-sidebar.is-open { display: flex; max-height: 50vh; overflow-y: auto; }
	.ac-fabrics-modal-main { overflow: visible; }
	.ac-fabrics-modal-scroll { padding: 24px 16px 40px; gap: 24px; }
	.ac-fabrics-grid {
		overflow-y: visible;
		grid-template-columns: repeat(auto-fill, 70px);
		grid-auto-rows: 70px;
		gap: 8px;
	}
	.ac-fabric-tile { width: 70px; height: 70px; }
	.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-fabrics-modal-footer { padding: 16px 20px; flex-wrap: wrap; justify-content: center; }
	.ac-fabrics-cta-group { gap: 16px; }
}