/**
 * AfriÉlan Studio — Shop layout (assets/css/shop.css)
 * Full-width banner  ->  toolbar (Filters | count | Sort)  ->  product grid,
 * with every filter in a slide-out panel (like a boutique "Filter and sort").
 * Colours, fonts and radius come ONLY from design-tokens.css (--brand-*).
 * Loaded after homepage.css (see inc/shop-filters.php), so it restyles the
 * shop pieces defined there. Applies to Shop, category and tag pages.
 * Markup: archive-product.php, ael_render_shop_sidebar() + ael_render_shop_toolbar()
 * in inc/shop-filters.php, template-parts/content-product-card.php.
 */

/* ---------------------------------------------------------------------
   0. Edge-to-edge page. Astra pads its content container on the sides,
   which would keep the banner from touching the screen edges. The
   banner / layout below add their own gutter instead.
--------------------------------------------------------------------- */
body.post-type-archive-product .site-content > .ast-container,
body.tax-product_cat .site-content > .ast-container,
body.tax-product_tag .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
}
/* Only the banner carries a breadcrumb. */
body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb,
body.post-type-archive-product .ast-breadcrumbs-wrapper,
body.tax-product_cat .ast-breadcrumbs-wrapper,
body.tax-product_tag .ast-breadcrumbs-wrapper { display: none; }

/* ---------------------------------------------------------------------
   1. Banner (picture + breadcrumb + title + lede)
--------------------------------------------------------------------- */
.ael-shop-banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 28vw, 360px);
	padding: 64px var(--ael-gutter) 44px;
	box-sizing: border-box;
	text-align: center;
	color: var(--brand-accent-ink);
	background: var(--brand-dark-bg) center / cover no-repeat;
}
.ael-shop-banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(31, 27, 22, .62), rgba(31, 27, 22, .45));
}
.ael-shop-banner__inner { width: 100%; max-width: 760px; }
.ael-shop-banner__title {
	margin: 0 0 12px;
	font-family: var(--brand-font-display);
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--brand-accent-ink);
}
.ael-shop-banner__text {
	margin: 0 auto;
	max-width: 620px;
	font-family: var(--brand-font-body);
	font-size: .95rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
}
.ael-shop-crumbs {
	position: absolute;
	top: 18px;
	left: var(--ael-gutter);
	right: var(--ael-gutter);
	margin: 0;
	text-align: left;
	font-family: var(--brand-font-body);
	font-size: .72rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .88);
}
.ael-shop-crumbs a { color: inherit; text-decoration: none; }
.ael-shop-crumbs a:hover { color: var(--brand-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ael-crumb-sep { margin: 0 8px; opacity: .6; }

/* ---------------------------------------------------------------------
   2. Page body: one full-width column (filters live in the panel)
--------------------------------------------------------------------- */
.ael-shop-wrap {
	max-width: var(--ael-page-max);
	margin: 0 auto;
	padding: 28px var(--ael-gutter) 72px;
	box-sizing: border-box;
}
.ael-shop-wrap .ael-shop-main { margin-top: 0; min-width: 0; }
.ael-shop-intro {
	max-width: 760px;
	margin: 0 0 24px;
	font-family: var(--brand-font-body);
	font-size: .95rem;
	line-height: 1.7;
	color: var(--brand-ink-soft);
}

/* ---------------------------------------------------------------------
   3. Toolbar:  [ Filters ]  8 products ............ Sort by [ v ]
--------------------------------------------------------------------- */
.ael-shop-wrap .ael-shop-toolbar {
	display: flex;
	flex-direction: row; /* homepage.css switches the toolbar to a column on phones */
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px 20px;
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--brand-line);
}
.ael-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--brand-ink);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand-ink);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ael-filters-toggle:hover,
.ael-filters-toggle:focus-visible { background: var(--brand-ink); color: var(--brand-accent-ink); }
.ael-filters-toggle:hover .ael-filters-toggle__icon circle,
.ael-filters-toggle:focus-visible .ael-filters-toggle__icon circle { fill: var(--brand-ink); }
.ael-filters-toggle__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--brand-accent);
	font-size: .68rem;
	letter-spacing: 0;
	color: var(--brand-accent-ink);
}
.ael-shop-count {
	font-family: var(--brand-font-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand-ink-soft);
}
.ael-shop-wrap .ael-shop-toolbar .woocommerce-ordering {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 0 0 0 auto;
}
.ael-shop-wrap .ael-shop-toolbar .woocommerce-ordering::before {
	content: "Sort by";
	font-family: var(--brand-font-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand-ink-soft);
}
.ael-shop-wrap .ael-shop-toolbar select {
	padding: 9px 30px 9px 12px;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background-color: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .82rem;
	color: var(--brand-ink);
	cursor: pointer;
}

/* active filter chips */
.ael-shop-main .ael-active-filters { margin: 0 0 22px; }
.ael-shop-main .ael-filter-pill {
	padding: 6px 10px 6px 14px;
	border: 1px solid var(--brand-line);
	border-radius: 999px;
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .76rem;
	color: var(--brand-ink);
}
.ael-shop-main .ael-pill-x { color: var(--brand-ink-soft); }
.ael-shop-main .ael-pill-x:hover { color: var(--brand-accent); }
.ael-shop-main .ael-clear-all {
	font-family: var(--brand-font-body);
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brand-ink-soft);
}
.ael-shop-main .ael-clear-all:hover { color: var(--brand-accent); }

/* ---------------------------------------------------------------------
   4. Product grid (the card itself is styled in product-card.css)
--------------------------------------------------------------------- */
.ael-shop-wrap .ael-shop-main ul.products,
.ael-shop-wrap .ael-shop-main .products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	justify-content: stretch;
	gap: 40px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's float-clearing pseudo elements would become empty grid cells. */
.ael-shop-main ul.products::before,
.ael-shop-main ul.products::after { content: none !important; display: none !important; }

/* pagination */
.ael-shop-main .woocommerce-pagination { margin: 44px 0 0; text-align: center; }
.ael-shop-main .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.ael-shop-main .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; float: none; }
.ael-shop-main .woocommerce-pagination .page-numbers a,
.ael-shop-main .woocommerce-pagination .page-numbers span {
	display: inline-block;
	min-width: 40px;
	padding: 9px 12px;
	box-sizing: border-box;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .85rem;
	text-align: center;
	text-decoration: none;
	color: var(--brand-ink);
}
.ael-shop-main .woocommerce-pagination .page-numbers a:hover { border-color: var(--brand-ink); }
.ael-shop-main .woocommerce-pagination .page-numbers .current {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: var(--brand-accent-ink);
}

@media (max-width: 1280px) {
	.ael-shop-wrap .ael-shop-main ul.products,
	.ael-shop-wrap .ael-shop-main .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
	.ael-shop-wrap .ael-shop-main ul.products,
	.ael-shop-wrap .ael-shop-main .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 14px; }
}

/* ---------------------------------------------------------------------
   5. Filter panel: slides in from the left on every screen size
--------------------------------------------------------------------- */
.ael-shop-wrap .ael-shop-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: min(92vw, 400px);
	max-height: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: var(--brand-surface);
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 40px rgba(34, 32, 29, .25);
	transform: translateX(-104%);
	visibility: hidden;
	transition: transform .28s ease, visibility 0s linear .28s;
}
body.ael-filters-open .ael-shop-wrap .ael-shop-sidebar {
	transform: none;
	visibility: visible;
	transition: transform .28s ease;
}
body.admin-bar .ael-shop-wrap .ael-shop-sidebar { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ael-shop-wrap .ael-shop-sidebar { top: 46px; }
}
.ael-shop-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(31, 27, 22, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}
body.ael-filters-open .ael-shop-overlay { opacity: 1; pointer-events: auto; }
body.ael-filters-open { overflow: hidden; }

.ael-sidebar-head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--brand-line);
	font-family: var(--brand-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}
.ael-sidebar-close {
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--brand-ink);
	cursor: pointer;
}
.ael-sidebar-close:hover { background: none; color: var(--brand-accent); }

/* search box (top of the panel, always visible) */
.ael-shop-sidebar .ael-search-bar {
	flex: 0 0 auto;
	justify-content: stretch;
	padding: 16px 22px;
	border-bottom: 1px solid var(--brand-line);
}
.ael-shop-sidebar .ael-search-bar input[type="text"] {
	flex: 1;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	background: var(--brand-surface);
	color: var(--brand-ink);
}
.ael-shop-sidebar .ael-search-btn { padding: 10px 14px; }

/* the filter form: scrolling body + pinned footer */
.ael-shop-sidebar .ael-filter-form {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.ael-filter-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 22px 8px;
	scrollbar-width: thin;
}
.ael-filter-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 22px;
	border-top: 1px solid var(--brand-line);
	background: var(--brand-surface);
}
.ael-filter-clear {
	font-family: var(--brand-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--brand-ink-soft);
}
.ael-filter-clear:hover { color: var(--brand-accent); }
.ael-apply { flex: 1; width: auto; text-align: center; }

/* filter groups */
.ael-fgroup { margin: 0 0 30px; }
.ael-fgroup__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--brand-font-body);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}
.ael-fgroup__title::before {
	content: "";
	width: 12px;
	height: 2px;
	background: var(--brand-ink);
}
.ael-fgroup__title label {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}
.ael-fselect {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background-color: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .85rem;
	color: var(--brand-ink);
}

/* category pills (with pictures) */
.ael-shop-sidebar .ael-categories {
	max-width: none;
	margin: 0 0 30px;
	padding: 0;
}
.ael-shop-sidebar .ael-categories-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: .72rem;
	letter-spacing: .14em;
	color: var(--brand-ink);
}
.ael-shop-sidebar .ael-categories-heading::before {
	content: "";
	width: 12px;
	height: 2px;
	background: var(--brand-ink);
}
.ael-shop-sidebar .ael-categories-grid { gap: 8px; }
.ael-shop-sidebar .ael-category-pill { padding: 5px 14px; font-size: .8rem; }
.ael-shop-sidebar .ael-category-pill:has(.ael-category-pill__img) { padding: 4px 14px 4px 5px; }

/* price: dual slider + number boxes */
.ael-price-note {
	margin: 0 0 14px;
	font-family: var(--brand-font-body);
	font-size: .8rem;
	color: var(--brand-ink-soft);
}
.ael-range { position: relative; height: 22px; margin: 0 0 16px; }
.ael-range__track {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--brand-line);
}
.ael-range__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--brand-accent); }
.ael-range__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 22px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.ael-range__input::-webkit-slider-runnable-track { background: transparent; height: 22px; }
.ael-range__input::-moz-range-track { background: transparent; height: 22px; }
.ael-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border: 2px solid var(--brand-accent);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	cursor: grab;
}
.ael-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 12px;
	height: 12px;
	border: 2px solid var(--brand-accent);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	cursor: grab;
}
.ael-range__input:focus-visible { outline: none; }
.ael-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.ael-price-fields { display: flex; gap: 10px; }
.ael-price-fields label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	font-family: var(--brand-font-body);
	font-size: .75rem;
	color: var(--brand-ink-soft);
}
.ael-price-fields input {
	width: 100%;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .85rem;
	color: var(--brand-ink);
}

/* ---------------------------------------------------------------------
   6. Phones
--------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ael-shop-banner { padding: 56px var(--ael-gutter) 30px; min-height: 200px; }
	.ael-shop-wrap { padding-top: 20px; }
	.ael-shop-wrap .ael-shop-toolbar { gap: 12px; }
	.ael-shop-wrap .ael-shop-toolbar .woocommerce-ordering::before { display: none; }
	.ael-shop-wrap .ael-shop-toolbar select { max-width: 150px; }
	.ael-shop-count { order: 3; flex-basis: 100%; }
	.ael-shop-wrap .ael-shop-main ul.products,
	.ael-shop-wrap .ael-shop-main .products { gap: 26px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ael-shop-wrap .ael-shop-sidebar,
	.ael-shop-overlay
}