/* =============================== APCHIP SHOP — Sidebar + responsive offcanvas =============================== */
/*
 * Layout matrix:
 *  - >= 1000px : inline sidebar on the left, products in a flexible right column.
 *                Trigger button is hidden. Body class .apchip-shop-filter-open is a no-op.
 *  - <  1000px : sidebar slides in from the right as a fixed offcanvas drawer.
 *                Trigger button is visible. .apchip-shop-filter-open on body activates the drawer.
 *
 * Salient native breakpoints used elsewhere on the site: 690 / 999 / 1000 / 1200.
 * We pivot at 1000px to align with Salient's tablet/desktop boundary.
 */

/* ---- Layout: shop archive container with sidebar + product grid ----
 *
 * The aside is rendered by apchip-shop-filter.php (mu-plugin) on
 * `woocommerce_before_main_content` priority 11, AFTER Salient's no-sidebar wrapper
 * (`nectar_shop_wrapper_start` @ priority 10) opens the chain:
 *
 *   .container-wrap > .container.main-content > .row > [content]
 *
 * In `main_shop_layout=no-sidebar` mode Salient does NOT emit a `.full-width-content.nectar-shop-outer`
 * inner wrapper — `.row` itself is the content container. So we promote `.row` to a 2-col grid
 * and pin our aside to column 1; all other archive children (header, notices, products UL,
 * pagination) flow into column 2. The hidden trigger button + backdrop are excluded to avoid
 * `display:none` elements claiming grid tracks.
 * (Phase 1.2 FSRL fix — 2026-05-14.)
 */
@media (min-width: 1000px) {
	body.woocommerce.archive .container.main-content > .row,
	body.tax-product_cat .container.main-content > .row {
		display: grid;
		grid-template-columns: minmax(220px, 280px) 1fr;
		column-gap: 2.5rem;
		/* R15 (2026-05-15): row-gap MUST be 0 because the sidebar uses
		 * `grid-row: 1 / span 99` to span all implicit rows of column 2.
		 * With `gap: 2.5rem` shorthand (column + row), 98 of those 99
		 * implicit row tracks accumulate 40px row-gap each = 3920px of
		 * empty whitespace below the products grid. Splitting column-gap
		 * and row-gap eliminates the accumulation. Right-column items
		 * (products, pagination) have their own natural top margins. */
		row-gap: 0;
		align-items: start;
	}
	body.woocommerce.archive .container.main-content > .row > *:not(#apchip-shop-sidebar):not(.apchip-shop-filter-trigger):not(.apchip-shop-filter-backdrop),
	body.tax-product_cat .container.main-content > .row > *:not(#apchip-shop-sidebar):not(.apchip-shop-filter-trigger):not(.apchip-shop-filter-backdrop) {
		grid-column: 2;
		min-width: 0;
	}
	body.woocommerce.archive #apchip-shop-sidebar,
	body.tax-product_cat #apchip-shop-sidebar {
		grid-column: 1;
		grid-row: 1 / span 99;
	}
}

/* ---- Sidebar visual styles (shared inline + offcanvas) ---- */
.apchip-shop-sidebar {
	position: relative;
	background: #fff;
	color: #333333; /* was #1c1f2e — normalized to brand neutral-dark token (2026-05-12 iter 2) */
	z-index: 60;
}
.apchip-shop-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.apchip-shop-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem 0.75rem;
}
.apchip-shop-sidebar__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.apchip-shop-sidebar__close {
	background: transparent;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	padding: 0.25rem 0.4rem;
	display: none;
}
.apchip-shop-sidebar__form {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 1.5rem 1.5rem;
}
.apchip-shop-sidebar__panel {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.apchip-shop-sidebar__panel:first-of-type { border-top: 1px solid rgba(0,0,0,0.1); }
.apchip-shop-sidebar__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	cursor: pointer;
	list-style: none;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.apchip-shop-sidebar__summary::-webkit-details-marker { display: none; }
.apchip-shop-sidebar__summary::marker { content: ''; }
.apchip-shop-sidebar__panel-icon {
	width: 1rem;
	height: 1rem;
	position: relative;
	transition: transform 0.25s ease;
}
.apchip-shop-sidebar__panel-icon::before,
.apchip-shop-sidebar__panel-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.85rem;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.apchip-shop-sidebar__panel-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.apchip-shop-sidebar__panel[open] .apchip-shop-sidebar__panel-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.apchip-shop-sidebar__panel-body { padding: 0.25rem 0 1rem; margin: 0; }

.apchip-shop-sidebar__search-input {
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 4px;
	font: inherit;
}
.apchip-shop-sidebar__search-input:focus { outline: 2px solid var(--accent-color, #fcb034); outline-offset: 2px; }

.apchip-shop-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
/* R-CSS 2026-05-15 — kill Salient/WC `disc` cascade on filter list items. WP/Salient
 * sets list-style on .woocommerce ul li with enough specificity to override our parent
 * ul `none`. Resetting on the LI itself is the durable fix. */
.apchip-shop-sidebar__item,
.apchip-shop-sidebar__list > li {
	list-style: none !important;
	list-style-type: none !important;
}
.apchip-shop-sidebar__item label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0;
}
.apchip-shop-sidebar__item input[type="checkbox"] { accent-color: var(--accent-color, #fcb034); }
.apchip-shop-sidebar__item--child label { padding-left: 0.5rem; opacity: 0.85; }

.apchip-shop-sidebar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1rem;
}
.apchip-shop-sidebar__apply { flex: 0 0 auto; }
.apchip-shop-sidebar__clear { font-size: 0.9rem; text-decoration: underline; }

/* R11 2026-05-15 — when JS is active, AJAX-on-change handler is wired; hide the
 * Apply button (kept in DOM for JS-disabled fallback per Tier 1F). Body class set
 * by apchip-shop-filter-ajax.js on DOMContentLoaded. */
body.apchip-has-js-filter .apchip-shop-sidebar__apply { display: none; }
body.apchip-has-js-filter .apchip-shop-sidebar__actions { padding-top: 0.5rem; justify-content: flex-end; }

/* R11 — subtle pending state on the sidebar while AJAX request is in-flight */
.apchip-shop-sidebar.is-apchip-pending { pointer-events: none; opacity: 0.7; transition: opacity 0.15s ease; }
.apchip-shop-sidebar.is-apchip-pending::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid #fcb034;
	border-top-color: transparent;
	border-radius: 50%;
	animation: apchip-spin 0.7s linear infinite;
	pointer-events: none;
}
@keyframes apchip-spin { to { transform: rotate(360deg); } }

/* R11 — products grid pending state (matches sidebar) */
ul.products.is-apchip-pending { opacity: 0.5; transition: opacity 0.15s ease; pointer-events: none; }

/* ---- Filter trigger button (mobile only) ---- */
.apchip-shop-filter-trigger {
	display: none;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0.75rem;
	padding: 0.6rem 1.1rem;
	background: var(--accent-color, #fcb034);
	color: #fff;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	z-index: 10;
}
.apchip-shop-filter-trigger__icon { width: 1rem; height: 1rem; position: relative; }
.apchip-shop-filter-trigger__icon::before,
.apchip-shop-filter-trigger__icon::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
}
.apchip-shop-filter-trigger__icon::before { top: 4px; }
.apchip-shop-filter-trigger__icon::after { bottom: 4px; }
.apchip-shop-filter-trigger__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	margin-left: 0.25rem;
}

/* ---- Backdrop (mobile only) ---- */
.apchip-shop-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 30, 0.55);
	z-index: 70;
}

/* ---- Mobile / tablet (<1000px) — offcanvas behavior ---- */
@media (max-width: 999.98px) {
	.apchip-shop-filter-trigger { display: inline-flex; }
	.apchip-shop-sidebar__close { display: inline-flex; }

	.apchip-shop-sidebar {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(360px, 88vw);
		max-width: 100%;
		background: #fff;
		box-shadow: -8px 0 32px rgba(0,0,0,0.18);
		transform: translateX(110%);
		transition: transform 0.3s ease;
		z-index: 80;
		overflow-y: auto;
	}
	body.apchip-shop-filter-open .apchip-shop-sidebar { transform: translateX(0); }
	body.apchip-shop-filter-open .apchip-shop-filter-backdrop { display: block; }

	body.apchip-shop-filter-open { overflow: hidden; }
}

/* =============================== APCHIP SHOP — Active-filter chips (R2 — 2026-05-15) =============================== */
/*
 * Renders above the product grid via woocommerce_before_shop_loop @ priority 5.
 * One chip per active filter. Click removes that filter from URL.
 * Design grounded in 2026 practitioner research:
 *  - Chips above the grid (Baymard 2026)
 *  - Labeled `Facet: Value` (BTNG 2026)
 *  - <a> with aria-label="Remove [Facet: Value]" — degrades to a link without JS
 *  - aria-live="polite" on container (set in PHP) — result count announces
 *  - Focus management on chip removal handled by inline JS
 */
.apchip-shop-filter-active-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
}
.apchip-shop-filter-active-chips__label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #555555;
	margin-right: 0.25rem;
}
.apchip-shop-filter-active-chips__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}
.apchip-shop-filter-active-chips__item {
	margin: 0;
	padding: 0;
	/* R-CSS 2026-05-15 — extends bullet kill to chip strip. Same Salient/WC `disc`
	 * leak as .apchip-shop-sidebar__item; visible at 375 where chips wrap below label. */
	list-style: none !important;
	list-style-type: none !important;
}
/* R12 2026-05-15 — chip visual upgrade. Active filters are removable affordances —
 * use brand orange on a darker base by default (signaling "active applied state"),
 * darken-and-emphasize on hover/focus. More prominent, more tab-like. */
.apchip-shop-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.7rem 0.45rem 0.9rem;
	background: #fcb034;
	border: 1px solid #fcb034;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	color: #333333;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.apchip-shop-filter-chip:hover,
.apchip-shop-filter-chip:focus-visible {
	background: #333333;
	color: #fcb034;
	border-color: #333333;
	text-decoration: none;
	outline: none;
	transform: translateY(-1px);
}
.apchip-shop-filter-chip:focus-visible {
	box-shadow: 0 0 0 3px rgba(252, 176, 52, 0.4);
}
.apchip-shop-filter-chip__facet {
	font-weight: 700;
	margin-right: 0.25rem;
	opacity: 0.85;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.apchip-shop-filter-chip__value { font-weight: 600; }
.apchip-shop-filter-chip__x {
	font-size: 1.15rem;
	line-height: 1;
	padding-left: 0.2rem;
	margin-left: 0.1rem;
	border-left: 1px solid rgba(0,0,0,0.15);
	padding-left: 0.4rem;
	display: inline-block;
}
.apchip-shop-filter-chip:hover .apchip-shop-filter-chip__x,
.apchip-shop-filter-chip:focus-visible .apchip-shop-filter-chip__x {
	border-left-color: rgba(252, 176, 52, 0.35);
}
.apchip-shop-filter-active-chips__clear-all {
	font-size: 0.85rem;
	text-decoration: underline;
	color: #555555;
	margin-left: 0.25rem;
}
.apchip-shop-filter-active-chips__clear-all:hover,
.apchip-shop-filter-active-chips__clear-all:focus-visible {
	color: #fcb034;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =============================== APCHIP SHOP — Loop card meta + price hide =============================== */
/*
 * Source design suppresses price on the shop card (catalog mode) and shows
 * SKU + cut size below the title. We hook woocommerce_after_shop_loop_item_title
 * in salient-child/functions.php to render those lines; we hide WC's native price
 * here so the card stays tidy.
 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price { display: none !important; }

.apchip-shop-card-meta {
	margin: 0.4rem 0 0.6rem;
	font-size: 0.92rem;
	line-height: 1.4;
}
.apchip-shop-card-meta__sku { margin: 0; font-weight: 600; opacity: 0.85; }
.apchip-shop-card-meta__cut { margin: 0; opacity: 0.7; }