/* ==========================================================================
   Peelerie — Filter bar, panel and chips (version 1.2)
   Loaded on collections, the shop and product search only. Uses the theme tokens, so it follows
   whichever mood is active (Midnight Editorial by default).
   ========================================================================== */

/* Bar ---------------------------------------------------------------------- */
.pa-fbar { --pa-fbar-bg: var(--pa-bg, #fff); border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); background: var(--pa-fbar-bg); }
.pa-fbar__wrap { max-width: var(--pa-wrap, 1440px); margin: 0 auto; padding: 0 var(--pa-gutter, 24px); min-height: 60px; display: flex; align-items: center; gap: 24px; }
.pa-fbar__btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; margin: 0;
	background: none; border: 0; color: var(--pa-ink); cursor: pointer;
	font: 500 12px/1 var(--pa-text, inherit); letter-spacing: .18em; text-transform: uppercase;
}
.pa-fbar__btn:hover span:first-of-type, .pa-fbar__btn:focus-visible span:first-of-type { text-decoration: underline; text-underline-offset: 5px; }
.pa-fbar__btn:focus-visible { outline: 1px solid var(--pa-ink); outline-offset: 4px; }
.pa-fbar__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--pa-ink); color: var(--pa-bg, #fff); font-size: 11px; letter-spacing: 0; }
.pa-fbar__count { margin: 0 !important; font-size: 13px; letter-spacing: .04em; color: var(--pa-muted); }
.pa-fbar__sort { margin-left: auto; }
.pa-fbar__sort .woocommerce-ordering { margin: 0 !important; float: none; }
.pa-fbar__sort select.orderby { min-height: 44px; border: 0; background-color: transparent; color: var(--pa-ink); font: 13px/1.2 var(--pa-text, inherit); letter-spacing: .04em; padding-right: 22px; cursor: pointer; }
.pa-fbar__sort .nice-select { border: 0; background: transparent; font-size: 13px; letter-spacing: .04em; min-height: 44px; line-height: 44px; }

/* Applied filters */
.pa-fchips { list-style: none; max-width: var(--pa-wrap, 1440px); margin: 0 auto; padding: 0 var(--pa-gutter, 24px) 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pa-fchips li { margin: 0; }
.pa-fchips a { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; border: 1px solid var(--pa-line-2); color: var(--pa-ink); font-size: 13px; text-decoration: none; transition: border-color .2s; }
.pa-fchips a span { font-size: 16px; line-height: 1; color: var(--pa-muted); }
.pa-fchips a:hover, .pa-fchips a:focus-visible { border-color: var(--pa-ink); }
.pa-fchips__clear a { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; padding: 0 4px; }

/* The listing sits directly under the bar: the intro band steps aside once a customer filters. */
body.pa-filtered .pa-colintro { display: none; }

/* Nothing matches */
.pa-fempty { max-width: 560px; margin: 48px auto 96px; text-align: center; }
.pa-fempty .pa-display { font-family: var(--pa-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 12px; }
.pa-fempty p { color: var(--pa-muted); }
.pa-fempty .pa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; margin-top: 12px; background: var(--pa-btn, #0a0a0a); color: var(--pa-btn-ink, #fff); text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* Panel -------------------------------------------------------------------- */
html.pa-filter-open, html.pa-filter-open body { overflow: hidden; }
.pa-filter { position: fixed; inset: 0; z-index: 100000; }
.pa-filter[hidden] { display: none; }
.pa-filter__scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, .45); opacity: 0; transition: opacity .28s ease; }
.pa-filter__sheet {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
	display: flex; flex-direction: column; margin: 0;
	background: var(--pa-bg, #fff); color: var(--pa-ink);
	transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .6, .2, 1);
	box-shadow: -24px 0 48px rgba(0, 0, 0, .12);
}
.pa-filter.is-open .pa-filter__scrim { opacity: 1; }
.pa-filter.is-open .pa-filter__sheet { transform: none; }
.pa-filter__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--pa-line); }
.pa-filter__title { margin: 0 !important; font-family: var(--pa-display) !important; font-weight: 400 !important; font-size: 28px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pa-ink) !important; }
.pa-filter__x { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px -10px 0; background: none; border: 0; color: var(--pa-ink); cursor: pointer; }
.pa-filter__x:focus-visible { outline: 1px solid var(--pa-ink); }
.pa-filter__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 24px; }
.pa-filter__none { color: var(--pa-muted); margin-top: 24px; }

.pa-filter__group { border-bottom: 1px solid var(--pa-line); }
.pa-filter__group summary {
	list-style: none; display: flex; align-items: center; gap: 10px; min-height: 60px; cursor: pointer;
	font: 500 12px/1 var(--pa-text, inherit); letter-spacing: .18em; text-transform: uppercase; color: var(--pa-ink);
}
.pa-filter__group summary::-webkit-details-marker { display: none; }
.pa-filter__group summary::after { content: ""; margin-left: auto; width: 11px; height: 11px; background: linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 11px no-repeat; transition: transform .2s; }
.pa-filter__group[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat; }
.pa-filter__group summary:focus-visible { outline: 1px solid var(--pa-ink); outline-offset: 2px; }
.pa-filter__sel { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pa-ink); color: var(--pa-bg, #fff); font-size: 10px; letter-spacing: 0; }
.pa-filter fieldset { margin: 0; padding: 0 0 18px; border: 0; min-width: 0; }
.pa-filter fieldset ul { list-style: none; margin: 0; padding: 0; }
.pa-filter fieldset li { position: relative; margin: 0; }
.pa-filter fieldset input[type="checkbox"], .pa-filter fieldset input[type="radio"] { position: absolute !important; top: 12px; left: 0; opacity: 0 !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; -webkit-appearance: none; appearance: none; pointer-events: none; }
.pa-filter fieldset label {
	display: flex; align-items: center; gap: 14px; min-height: 40px; cursor: pointer;
	font-size: 15px; line-height: 1.3; color: var(--pa-ink); margin: 0; padding: 0; text-transform: none; letter-spacing: 0;
}
.pa-filter fieldset label::before { content: ""; flex: none; width: 16px; height: 16px; border: 1px solid var(--pa-line-2); background: var(--pa-bg, #fff) center / 10px 10px no-repeat; transition: background-color .15s, border-color .15s; }
.pa-filter fieldset input[type="radio"] + label::before { border-radius: 50%; }
.pa-filter fieldset input:checked + label::before { border-color: var(--pa-ink); background-color: var(--pa-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E"); }
.pa-filter fieldset input[type="radio"]:checked + label::before { background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px); }
.pa-filter fieldset input:focus-visible + label::before { outline: 1px solid var(--pa-ink); outline-offset: 3px; }
.pa-filter fieldset label:hover::before { border-color: var(--pa-ink); }
.pa-filter__n { margin-left: auto; font-size: 13px; color: var(--pa-muted); font-variant-numeric: tabular-nums; }

.pa-filter__foot { display: flex; align-items: center; gap: 20px; padding: 16px 28px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pa-line); background: var(--pa-bg, #fff); }
.pa-filter__clear { color: var(--pa-ink); font-size: 13px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.pa-filter__apply {
	flex: 1; min-height: 52px; border: 0; cursor: pointer;
	background: var(--pa-btn, #0a0a0a); color: var(--pa-btn-ink, #fff);
	font: 500 12px/1 var(--pa-text, inherit); letter-spacing: .18em; text-transform: uppercase;
}
.pa-filter__apply:focus-visible { outline: 2px solid var(--pa-ink); outline-offset: 2px; }
.pa-filter__apply[aria-busy="true"] { opacity: .7; }

@media (max-width: 767px) {
	.pa-fbar__wrap { gap: 12px; min-height: 56px; }
	.pa-fbar__count { display: none; }
	.pa-fchips { padding-bottom: 12px; }
	.pa-filter__sheet { width: 100vw; box-shadow: none; }
	.pa-filter__head, .pa-filter__body, .pa-filter__foot { padding-left: 20px; padding-right: 20px; }
}
/* Phones: a shorter collection intro, so the first pieces appear sooner. */
@media (max-width: 600px) {
	body.pa-mood-editorial .pa-colintro { gap: 18px; margin-bottom: 28px; padding-bottom: 28px; }
	body.pa-mood-editorial .pa-colintro__media { aspect-ratio: 21 / 9; }
	body.pa-mood-editorial .pa-colintro .pa-eyebrow { display: none; }
	body.pa-mood-editorial .pa-colintro__text { font-size: 21px; }
	body.pa-mood-editorial .pa-colintro__count { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.pa-filter__sheet, .pa-filter__scrim { transition: none; }
}