/**
 * Shop archive (PLP) — enqueued on is_shop() || is_product_taxonomy().
 *
 * Ports HTML/css/product-list.css with one key adaptation: FacetWP emits
 * its own markup (.facetwp-checkbox, .facetwp-counter, .facetwp-selection-*)
 * which we style here instead of overriding the plugin templates.
 *
 * Skipped from the static reference (handled in other phases):
 *   - .price-filter__slider* (Phase 1 — using Range List checkboxes, not slider)
 *   - mobile drawer animation polish (Phase 7)
 */

/* ----------------------------------------------------------------------- */
/* Shop section + sidebar layout                                            */
/* ----------------------------------------------------------------------- */
.shop-section {
	padding: 80px 0;
}

.shop-section > .container-fluid {
	padding-inline: 80px;
}

.shop-sidebar__wrapper {
	position: relative;
}

.shop-sidebar {
	background: var(--white);
	padding-right: 30px;
}

/* Shop-specific widget area — sits below the FacetWP filter blocks.
   See template-parts/shop/sidebar-widgets.php + the
   `ellisons-shop-sidebar` registration in inc/setup.php. */
.shop-sidebar__widgets {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--border-color-2);
}

.shop-sidebar__widget {
	margin-bottom: 22px;
}

.shop-sidebar__widget:last-child {
	margin-bottom: 0;
}

.shop-sidebar__widget-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 15px;
}

.shop-sidebar__widget img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ----------------------------------------------------------------------- */
/* Filter block — shared chrome                                             */
/* ----------------------------------------------------------------------- */
.filter-block {
	margin-bottom: 22px;
}

.filter-block:not(:first-child) {
	border-top: 1px solid var(--border-color-2);
	padding-top: 22px;
}

.filter-block__title {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 25px;
}

/* Active filters block hides itself when no selections exist. :has() is
   supported in every shipping browser we care about; if a fallback is ever
   needed, swap to a JS toggle on facetwp-loaded. */
.filter-block--active:not(:has(.facetwp-selection-value)) {
	display: none;
}

/* When the active-filters block is empty (and therefore display:none'd
   above), the next .filter-block is visually first — drop the divider
   so it doesn't float at the top with nothing above it. The base
   `:not(:first-child)` rule still adds the divider in DOM order, so we
   undo it here for the no-selections case. */
.filter-block--active:not(:has(.facetwp-selection-value)) + .filter-block {
	border-top: 0;
	padding-top: 0;
}

.filter-block__clear-btn {
	background: var(--transparent);
	border: 1px solid var(--border-color);
	padding: 8px 15px;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--text-primary);
	margin-top: 0;
	margin-left: auto;
	display: block;
}

/* ----------------------------------------------------------------------- */
/* FacetWP — selections (active filters)                                    */
/* Layout per Image #8: one value per row (no facet-name prefix), dark      */
/* circle × on the right, full-width divider, CLEAR button right-aligned   */
/* below the divider.                                                      */
/* ----------------------------------------------------------------------- */

/* FacetWP groups selections by facet (<li> per facet, multiple <span> per
   value inside). Stack them all as a flat list of values. */
.filter-block--active .facetwp-selections {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--border-color);
}

.filter-block--active .facetwp-selections > ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.filter-block--active .facetwp-selections > ul > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
}

/* Mockup shows values only — hide the "Stone Cut:" / "Price:" prefix. */
.filter-block--active .facetwp-selection-label {
	display: none !important;
}

/* Each selection — value on the left, × pinned to the right edge of the
   row. !important on the layout props because FacetWP's front.css ships
   `.facetwp-selections .facetwp-selection-value { display: inline-block }`
   at the same specificity, and it can win the cascade depending on load
   order — which collapses our flex layout and pulls the × inline next to
   the label. */
.filter-block--active .facetwp-selection-value {
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	gap: 8px;
	width: 100% !important;
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 !important;
	padding: 0;
	/* FacetWP front.css paints icon-close.png as the background-image on
	   this element. We render our own circular × via ::after below, so
	   suppress theirs to avoid a duplicate close mark. */
	background: none !important;
	padding-right: 0 !important;
}

.filter-block--active .facetwp-selection-value:hover {
	color: var(--text-primary);
}

/* Dark filled circle × on the right end of each row. */
.filter-block--active .facetwp-selection-value::after {
	content: "×";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: var(--text-primary);
	color: var(--white);
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}

/* ----------------------------------------------------------------------- */
/* FacetWP — checkboxes (used by colors, tags as chips, etc.)              */
/* Render .facetwp-checkbox as our custom-checkbox row pattern.            */
/* ----------------------------------------------------------------------- */
.filter-block .facetwp-facet {
	margin: 0;
}

.filter-block .facetwp-checkbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	/* FacetWP front.css ships a 14×14 checkbox.png / checkbox-on.png sprite
	   as the background; we draw our own via ::before, so suppress theirs
	   in both states (otherwise the .checked state shows a dark stripe
	   where checkbox-on.png paints behind our ::before). */
	background: none !important;
	padding: 0;
	gap: 8px;
	position: relative;
	padding-left: 28px;
	user-select: none;
}

.filter-block .facetwp-checkbox:last-child {
	margin-bottom: 0;
}

/* Square check graphic — matches the mockup (Image #2). Border-radius
   sits at 2px for a subtle softness without reading as a circle/radio. */
.filter-block .facetwp-checkbox::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 16px;
	width: 16px;
	background-color: var(--transparent);
	border: 1px solid var(--border-color-5);
	border-radius: 2px;
}

.filter-block .facetwp-checkbox.checked {
	color: var(--text-primary);
}

.filter-block .facetwp-checkbox.checked::before {
	border-color: var(--text-primary);
	background-color: var(--text-primary);
}

.filter-block .facetwp-checkbox.checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 5px;
	width: 5px;
	height: 9px;
	border-bottom: 1.5px solid var(--white);
	border-right: 1.5px solid var(--white);
	transform: translateY(-65%) rotate(45deg);
}

/* FacetWP counts — small grey N to the right of each checkbox. */
.filter-block .facetwp-counter {
	font-size: 11px;
	color: var(--text-secondary);
	margin-left: auto;
}

/* "See N more" / "See less" — FacetWP's soft_limit toggle. Renders as
   <a class="facetwp-toggle"> below the checkbox list. We style it as a
   small underlined accent link matching the filter chrome. */
.filter-block .facetwp-toggle {
	display: inline-block;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 500;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px solid var(--text-primary);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.filter-block .facetwp-toggle:hover,
.filter-block .facetwp-toggle:focus {
	color: var(--gold-color);
	border-bottom-color: var(--gold-color);
}

/* Toggle pair — FacetWP swaps .facetwp-hidden between the two <a>s when
   the user expands / collapses, and on the .facetwp-overflow wrapper
   that holds the items past soft_limit. !important so a sibling layout
   rule on the same element (e.g. display:flex on .facetwp-overflow)
   can't beat us in the cascade. */
.filter-block .facetwp-hidden {
	display: none !important;
}

/* ----------------------------------------------------------------------- */
/* FacetWP — price (Range List facet renders as checkboxes or radios)      */
/* ----------------------------------------------------------------------- */
.filter-block--price .facetwp-radio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	gap: 8px;
	position: relative;
	padding-left: 28px;
	background: none;
}

.filter-block--price .facetwp-radio::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 16px;
	width: 16px;
	border: 1px solid var(--border-color-5);
	border-radius: 50%;
}

.filter-block--price .facetwp-radio.checked {
	color: var(--text-primary);
}

.filter-block--price .facetwp-radio.checked::before {
	border-color: var(--border-color-6);
}

.filter-block--price .facetwp-radio.checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 5px;
	height: 8px;
	border-bottom: 1px solid var(--gold-color);
	border-right: 1px solid var(--gold-color);
	transform: translateY(-65%) rotate(45deg);
}

/* ----------------------------------------------------------------------- */
/* FacetWP — star rating                                                    */
/* ----------------------------------------------------------------------- */
.filter-block--rating .facetwp-star {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	color: var(--warning-orange);
	font-size: 12px;
	gap: 2px;
}

.filter-block--rating .facetwp-star:last-child {
	margin-bottom: 0;
}

.filter-block--rating .facetwp-counter {
	color: var(--text-secondary);
	font-size: 11px;
	margin-left: auto;
}

/* ----------------------------------------------------------------------- */
/* Product card — shop / WC path extensions                                 */
/* The base .product-card--classic CSS in style.css targets <a> only        */
/* because the homepage trending uses <a> for all three buttons. The shop  */
/* card swaps the wishlist <a> for a <button class="wishlist-toggle"> and  */
/* needs the same dark-pill chrome to remain visually consistent.          */
/* ----------------------------------------------------------------------- */
/* Both buttons in this slot — wishlist-toggle (always a button) and the
   out-of-stock variant of product-card__add-cart-btn (button so a slow
   JS bind can't accidentally navigate to the unavailable PDP) — share
   the same dark-pill chrome as the sibling <a> buttons styled in
   style.css:447. Grouped so a future style change only edits one place. */
.product-card--classic .product-card__btns-wrap > button.wishlist-toggle,
.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn {
	appearance: none;
	font: inherit;
	border: 0;
	background-color: var(--offblack-1b);
	color: var(--white);
	min-width: 1px;
	margin: 0 4px;
	border-radius: 4px;
	width: 37px;
	height: 37px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0;
	line-height: 38px;
	cursor: pointer;
	transform: translateY(15px);
	transition: all 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Stagger the slide-in so the row reads left-to-right on hover. Mirrors
   the nth-child delays in style.css:468/472 for the <a> variants. */
.product-card--classic .product-card__btns-wrap > button.wishlist-toggle:nth-child(1) {
	transition-delay: 0s, 0.1s, 0.1s;
}

.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn:nth-child(3) {
	transition-delay: 0s, 0.3s, 0.3s;
}

.product-card--classic:hover .product-card__btns-wrap > button.wishlist-toggle,
.product-card--classic:hover .product-card__btns-wrap > button.product-card__add-cart-btn {
	opacity: 1;
	transform: translateY(0px);
}

.product-card--classic .product-card__btns-wrap > button.wishlist-toggle:hover,
.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn:hover {
	background-color: var(--white);
	color: var(--text-muted-4e);
	box-shadow: 0 0 6px -2px var(--black-70);
}

/* Match the SVG sizing of the <a> button SVGs. The wishlist toggle's
   default 24x24 is too large for the 37x37 pill; FA's add-to-cart SVG
   also lands here once FA's auto-replace converts the <i>. */
.product-card--classic .product-card__btns-wrap > button.wishlist-toggle svg,
.product-card--classic .product-card__btns-wrap > button.wishlist-toggle i,
.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn svg,
.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn i {
	width: 16px;
	height: 16px;
	font-size: 14px;
}

/* Wishlist active state — keep the heart filled red even after the hover
   colour swap on the pill background. */
.product-card--classic .product-card__btns-wrap > button.wishlist-toggle[aria-pressed="true"] .lucide-heart {
	fill: var(--danger-red-border, #c0392b);
	stroke: var(--danger-red-border, #c0392b);
}

@media (max-width: 1199.98px) {
	.product-card--classic .product-card__btns-wrap > button.wishlist-toggle,
	.product-card--classic .product-card__btns-wrap > button.product-card__add-cart-btn {
		width: 33.33%;
		opacity: 1;
		transform: none;
		margin: 0;
		border-radius: 0;
	}
}

/* The .product-card--classic thumb in the WC path is wrapped in an <a>
   for navigation — strip default link decoration so the image and hover
   image stack as in the static design. */
.product-card--classic a.product-card__thumb {
	display: block;
	text-decoration: none;
	position: relative;
}

.product-card--classic a.product-card__thumb img {
	max-width: 100%;
	width: 100%;
/*	height: auto;*/
}

/* The base style.css hides .product-card__add-cart-btn globally — that
   rule is for the Feature Products variant (which uses a slide-up
   bottom CTA instead of an inline icon). For .product-card--classic
   (shop + Trending) the cart icon shows alongside heart + eye at every
   breakpoint, so restore display here. Same specificity as the hide
   rule; product-list.css loads after style.css so we win source order. */
.product-card--classic .product-card__btns-wrap .product-card__add-cart-btn {
	display: flex;
}

/* WC + wpc-ajax-add-to-cart inject an <a class="added_to_cart wc-forward">
   "View cart" link next to the cart icon after a successful add. Our
   toast already confirms the add and the header cart badge updates, so
   the inline link is visual clutter on the card. Hide it everywhere
   it might appear inside a product card. */
.product-card .added_to_cart,
.product-card__btns-wrap .added_to_cart {
	display: none !important;
}


/* Title — wrapped in <a> on the WC path so clicking the name navigates
   to the PDP. The base h6 rule in style.css colors the heading but the
   inner <a> inherits default link styling. Force the link to follow
   the h6 token + add a gold hover matching the rest of the design. */
.product-card--classic .product-card__bottom h6 {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 0;
	line-height: 1.4;
}

.product-card--classic .product-card__bottom h6 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.product-card--classic .product-card__bottom h6 a:hover,
.product-card--classic .product-card__bottom h6:hover a {
	color: var(--gold-color);
}

/* Price — WC's get_price_html() nests amounts as
   <span class="woocommerce-Price-amount amount"><bdi>£500</bdi></span>
   (and wraps sale prices in <del>/<ins>). WC's own CSS sets defaults on
   .woocommerce-Price-amount which can win over .product-card__price.
   Push our design tokens through every layer. */
.product-card--classic .product-card__price,
.product-card--classic .product-card__price .woocommerce-Price-amount,
.product-card--classic .product-card__price bdi,
.product-card--classic .product-card__price ins {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
	text-decoration: none;
	opacity: 1;
}

.product-card--classic .product-card__price del,
.product-card--classic .product-card__price del .woocommerce-Price-amount,
.product-card--classic .product-card__price del bdi {
	color: var(--text-muted-aaaaaa);
	margin-right: 6px;
}

/* ----------------------------------------------------------------------- */
/* Toolbar — top bar (mobile sidebar toggle + result count + sort)         */
/* ----------------------------------------------------------------------- */
/* Refine-search box — only on product search results (is_search()). Sits
   above the toolbar, pre-filled with the current term. */
.shop-search-refine {
	margin-bottom: 28px;
}

.shop-search-refine__field {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 10px;
	max-width: 560px;
}

.shop-search-refine__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--text-secondary);
	pointer-events: none;
}

.shop-search-refine__input.form-control {
	flex: 1 1 auto;
	height: 48px;
	padding-left: 42px;
	border: 1px solid var(--border-color-4);
	border-radius: 2px;
	font-size: 14px;
}

.shop-search-refine__input.form-control:focus {
	border-color: var(--gold-color);
	box-shadow: none;
}

.shop-search-refine__btn.btn-black {
	flex: 0 0 auto;
	padding-inline: 28px;
	white-space: nowrap;
}

.shop-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}

.shop-top-bar__left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 1;
}

.shop-top-bar__toggle-btn {
	background: var(--transparent);
	border: 1px solid var(--text-primary);
	padding: 8px 20px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
}

.shop-top-bar__result-count,
.shop-top-bar .facetwp-counts {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
}

.shop-top-bar__seprator {
	color: var(--border-color);
	font-size: 14px;
	line-height: 1;
}

/* Column-count toggle — three icons (2/3/4 bars) representing grid cols.
   JS toggles .shop-grid--cols-N on .shop-grid; CSS in the grid-overrides
   block below reflows the columns. Choice persists in localStorage. */
.shop-top-bar__layout {
	display: flex;
	align-items: center;
	gap: 10px;
}

.shop-top-bar__layout .shop-top-bar__col {
	display: flex;
	align-items: center;
	gap: 2px;
	text-decoration: none;
	cursor: pointer;
}

.shop-top-bar__layout .shop-top-bar__col > span {
	display: inline-block;
	width: 6px;
	height: 11px;
	border: 1px solid var(--border-color-4);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.shop-top-bar__layout .shop-top-bar__col:hover > span {
	border-color: var(--gray-8f);
}

.shop-top-bar__layout .shop-top-bar__col--active > span {
	background-color: var(--gray-8f);
	border-color: var(--gray-8f);
}

.shop-top-bar__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.shop-top-bar__sort {
	margin: 0;
}

.shop-top-bar__sort .form-select {
	border: 1px solid var(--border-color);
	font-size: 13px;
	color: var(--text-secondary);
	border-radius: 0;
	padding: 8px 40px 8px 15px;
	box-shadow: none;
	min-width: 200px;
}

.shop-top-bar__sort .form-select:focus {
	border-color: var(--text-primary);
	box-shadow: none;
}

/* ----------------------------------------------------------------------- */
/* FacetWP loading state (Phase 9 — perceived performance)                  */
/* FacetWP adds .is-loading to each .facetwp-facet during AJAX refresh.    */
/* We use :has() at the body level to detect when ANY facet is loading and */
/* overlay the entire result grid with a translucent veil so the user      */
/* gets feedback that filtering is in flight — cards stay faintly visible. */
/* ----------------------------------------------------------------------- */
.facetwp-template {
	position: relative;
}

body:has(.facetwp-facet.is-loading) .facetwp-template::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 4;
	pointer-events: none;
	animation: ellisons-fwp-fade-in 0.18s ease;
}

/* Block interactions on the cards underneath while loading — no
   double-clicking add-to-cart etc. during refresh. */
body:has(.facetwp-facet.is-loading) .facetwp-template > * {
	pointer-events: none;
}

@keyframes ellisons-fwp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ----------------------------------------------------------------------- */
/* Shop grid column overrides — toggle controlled by .shop-top-bar__layout */
/* (set via JS, persisted in localStorage). Only applies at xl+ where the  */
/* toggle is visible; smaller breakpoints fall back to the Bootstrap        */
/* col-12 / col-sm-6 / col-lg-4 defaults from content-product.php.         */
/* ----------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.shop-grid.shop-grid--cols-2 > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.shop-grid.shop-grid--cols-3 > [class*="col-"] {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	.shop-grid.shop-grid--cols-4 > [class*="col-"] {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* ----------------------------------------------------------------------- */
/* Term header — category description + thumbnail (Phase 6)                */
/* Tag / attribute archives don't render this; only product categories.    */
/* ----------------------------------------------------------------------- */
.shop-term-header {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 30px;
}

.shop-term-header__thumb {
	flex-shrink: 0;
	max-width: 180px;
}

.shop-term-header__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.shop-term-header__description {
	flex: 1;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.7;
}

.shop-term-header__description p {
	margin: 0 0 12px;
}

.shop-term-header__description p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------- */
/* Category SEO content — title + description rendered BELOW the product    */
/* grid (template-parts/shop/term-content.php). Separated from the grid by  */
/* a top border; description constrained to a comfortable reading measure.  */
/* ----------------------------------------------------------------------- */
.shop-term-content {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--border-color-2);
}

.shop-term-content__title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 400;
	color: var(--text-primary);
}

/* Content typography matched to the Hongo content pages (e.g. privacy
   policy) — full width (no max-width), 16px / 1.75, grey body. Font family
   stays the theme's. */
.shop-term-content__description {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
}

.shop-term-content__description p {
	margin: 0 0 20px;
}

.shop-term-content__description p:last-child {
	margin-bottom: 0;
}

.shop-term-content__description img {
	max-width: 100%;
	height: auto;
}

.shop-term-content__description a {
	color: var(--gold-color);
}

/* ----------------------------------------------------------------------- */
/* Empty state — no products found (Phase 6)                                */
/* Lives inside .facetwp-template so FacetWP swaps it in when filtering    */
/* returns 0 results.                                                      */
/* ----------------------------------------------------------------------- */
.shop-empty-state {
	padding: 60px 0;
	text-align: center;
}

.shop-empty-state__message {
	margin: 0 0 24px;
	color: var(--text-secondary);
	font-size: 14px;
}

/* ----------------------------------------------------------------------- */
/* Pagination — FacetWP pager + fallback paginate_links() (Phase 6)         */
/* ----------------------------------------------------------------------- */
/* Wrapper list — paginate_links( type=list ) outputs <ul class="page-numbers">
   so the UL itself carries .page-numbers too; we only flex it here and
   style the anchors/spans below (otherwise the UL picks up the box +
   border and renders as a full-width rectangle). The nav drops the
   `woocommerce-pagination` class (see loop/pagination.php) so WC's own
   `.woocommerce nav.woocommerce-pagination ul { border }` never applies. */
.facetwp-pager,
.shop-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.shop-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	list-style: none;
}

.facetwp-pager .facetwp-page,
.shop-pagination a.page-numbers,
.shop-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	font-size: 13px;
	line-height: 1;
	background: var(--white);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.facetwp-pager .facetwp-page:hover,
.facetwp-pager .facetwp-page.active,
.shop-pagination a.page-numbers:hover,
.shop-pagination span.page-numbers.current {
	background: var(--text-primary);
	border-color: var(--text-primary);
	color: var(--white);
}

.shop-pagination span.page-numbers.dots {
	border: 0;
	background: transparent;
	cursor: default;
}

/* ----------------------------------------------------------------------- */
/* Mobile off-canvas backdrop + sidebar drawer (Phase 3 markup +           */
/* mechanics, Phase 7 a11y polish: focus management, body scroll lock).    */
/* ----------------------------------------------------------------------- */

/* Body scroll lock while the drawer is open. JS adds .shop-sidebar-open
   to <body> + writes inline `top: -{scrollY}px` so Safari iOS doesn't
   rubber-band the page behind the drawer (overflow:hidden alone doesn't
   suppress momentum scroll on iOS). On close, JS removes both and calls
   window.scrollTo() to restore the saved offset. */
body.shop-sidebar-open {
	position: fixed;
	overflow: hidden;
	left: 0;
	right: 0;
	width: 100%;
}

/* The backdrop is fixed-positioned and the drawer slides over it. Disable
   pointer events on the drawer when it's hidden off-screen so taps fall
   through to the page content below. */
@media (max-width: 1199.98px) {
	.shop-sidebar:not(.is-active) {
		pointer-events: none;
	}
	.shop-sidebar.is-active {
		pointer-events: auto;
	}
}

.shop-sidebar__backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--black-70);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.shop-sidebar__backdrop.is-active {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1599.98px) {
	.shop-section > .container-fluid {
		padding-inline: 20px;
	}
}

@media (max-width: 1199.98px) {
	.shop-sidebar {
		position: fixed;
		top: 120px;
		left: -320px;
		width: 320px;
		height: 100vh;
		background: var(--white);
		z-index: 11;
		overflow-y: auto;
		transition: left 0.3s ease;
		padding: 30px;
		padding-top: 0;
		scrollbar-width: thin;
		scrollbar-color: var(--text-muted-888) var(--gray-f1);
	}

	.shop-sidebar::-webkit-scrollbar {
		width: 8px;
	}

	.shop-sidebar::-webkit-scrollbar-track {
		background: var(--gray-f1);
	}

	.shop-sidebar::-webkit-scrollbar-thumb {
		background: var(--text-muted-888);
		border-radius: 6px;
	}

	.shop-sidebar::-webkit-scrollbar-thumb:hover {
		background: var(--gray-555);
	}

	.shop-sidebar.is-active {
		left: 0;
	}

	.shop-sidebar__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-inline: -17px;
		margin-bottom: 0;
		padding-bottom: 15px;
		position: sticky;
		top: 0;
		background-color: var(--white);
		z-index: 12;
	}

	.shop-sidebar__title {
		font-size: 16px;
		font-weight: 500;
		margin: 0;
		text-transform: uppercase;
	}

	.shop-sidebar__close {
		background: var(--black);
		border: 0;
		color: var(--white);
		font-size: 20px;
		width: 40px;
		height: 40px;
		line-height: 1;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 991.98px) {
	.shop-section {
		padding: 60px 0;
	}

	.shop-sidebar {
		top: 60px;
	}
}

@media (max-width: 767.98px) {
	.shop-section {
		padding: 40px 0;
	}

	.shop-top-bar {
		flex-direction: column;
		align-items: start;
	}

	.shop-top-bar__left {
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		width: 100%;
	}

	.shop-top-bar__right,
	.shop-top-bar__sort,
	.shop-top-bar__sort .form-select,
	.shop-top-bar__toggle-btn {
		width: 100%;
	}

	.shop-top-bar__toggle-btn {
		justify-content: center;
	}
}

/* ==========================================================================
   Switcher facet — iOS-style binary toggle
   ==========================================================================
   Rendered by the custom `switcher` facet type (inc/facetwp-switcher-
   facet.php). Sits inside the standard `.filter-block` shell on the shop
   sidebar; the `<label>` element wraps an :checked-sibling-driven track +
   knob so the swap is pure CSS — no JS state mirror. */

.facetwp-type-switcher .facetwp-switcher {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	cursor: pointer;
	user-select: none;
}

/* Visually hidden but keyboard-reachable input. Source value the toggle
   sends to FacetWP lives on data-value (read by product-list.js). */
.facetwp-type-switcher .facetwp-switcher__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.facetwp-type-switcher .facetwp-switcher__label {
	flex: 1;
	font-size: 14px;
	color: var(--text-primary);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.facetwp-type-switcher .facetwp-switcher__toggle {
	flex: 0 0 auto;
	position: relative;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background-color: var(--surface-e4e4e4, #e4e4e4);
	transition: background-color 0.2s ease;
}

.facetwp-type-switcher .facetwp-switcher__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

/* ON state — track turns dark, knob slides right. The input sits BEFORE
   the toggle in DOM order, so `:checked ~ .facetwp-switcher__toggle`
   works as a sibling selector. */
.facetwp-type-switcher .facetwp-switcher__input:checked ~ .facetwp-switcher__toggle {
	background-color: var(--text-primary);
}

.facetwp-type-switcher .facetwp-switcher__input:checked ~ .facetwp-switcher__toggle .facetwp-switcher__knob {
	transform: translateX(16px);
}

.facetwp-type-switcher .facetwp-switcher:hover .facetwp-switcher__toggle {
	background-color: var(--text-muted-aaaaaa, #aaa);
}

.facetwp-type-switcher .facetwp-switcher__input:checked ~ .facetwp-switcher__toggle:hover,
.facetwp-type-switcher .facetwp-switcher:hover .facetwp-switcher__input:checked ~ .facetwp-switcher__toggle {
	background-color: var(--text-primary);
}

.facetwp-type-switcher .facetwp-switcher__input:focus-visible ~ .facetwp-switcher__toggle {
	outline: 2px solid var(--gold-color);
	outline-offset: 2px;
}