/* Prosecco co.com — Shop filter drawer. Design ported from prosecco.co.it. */

/* ── Trigger bar ──────────────────────────────────────────────────────────── */
.pcf-bar {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 24px; flex-wrap: wrap; width: 100%;
}
.pcf-active { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.pcf-bar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.pcf-count {
	color: #a0a0a0; font-size: 10px; text-transform: uppercase;
	letter-spacing: .35em; font-weight: 300; margin: 0;
}
@media (max-width: 767px) { .pcf-count { display: none; } }

.pcf-trigger {
	display: inline-flex; align-items: center; gap: 10px;
	background: #1a1a1a; border: 1px solid rgba(255,255,255,.1);
	color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .1em; padding: 10px 20px; border-radius: 999px;
	cursor: pointer; transition: border-color .2s; line-height: 1;
}
.pcf-trigger:hover { border-color: rgba(201,168,76,.5); }
.pcf-trigger svg { width: 14px; height: 14px; color: #C9A84C; }

.pcf-badge {
	background: #C9A84C; color: #000; font-size: 10px; font-weight: 900;
	padding: 2px 8px; border-radius: 999px; line-height: 1;
}
.pcf-hidden { display: none !important; }

/* ── Active pills ─────────────────────────────────────────────────────────── */
.pcf-active-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px 4px 12px;
	border: 1px solid rgba(201,168,76,.5); border-radius: 999px;
	background: rgba(201,168,76,.08); color: #C9A84C;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; transition: background .15s;
}
.pcf-active-pill:hover { background: rgba(201,168,76,.15); color: #C9A84C; }
.pcf-active-pill .pcf-x { font-size: 14px; line-height: 1; opacity: .7; }
.pcf-active-pill:hover .pcf-x { opacity: 1; }

/* ── Backdrop + panel ─────────────────────────────────────────────────────── */
.pcf-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.7);
	z-index: 99998; opacity: 0; transition: opacity .3s ease;
}
.pcf-panel {
	position: fixed; top: 0; right: 0; height: 100%; width: 100%;
	max-width: 420px; z-index: 99999; display: flex; flex-direction: column;
	background: #1a1a1a; box-shadow: -8px 0 40px rgba(0,0,0,.6);
	transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.pcf-panel.pcf-open { transform: translateX(0); }

.pcf-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.pcf-panel-title { display: flex; align-items: center; gap: 12px; }
.pcf-panel-title svg { width: 16px; height: 16px; color: #C9A84C; }
.pcf-panel-title h2 {
	color: #fff; font-weight: 900; font-size: 14px; text-transform: uppercase;
	letter-spacing: .12em; margin: 0;
}
.pcf-close {
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.1); background: transparent;
	color: #a0a0a0; font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: color .2s, border-color .2s;
}
.pcf-close:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* ── Form body ────────────────────────────────────────────────────────────── */
.pcf-form {
	flex: 1; overflow-y: auto; padding: 20px 24px;
	display: flex; flex-direction: column; gap: 28px;
}
.pcf-section { margin: 0; }
.pcf-section-title {
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: #a0a0a0; margin: 0 0 12px;
}

.pcf-search {
	width: 100%; background: #111; border: 1px solid #2a2a2a; color: #e8e8e8;
	padding: 8px 12px; border-radius: 8px; font-size: 13px; outline: none;
	margin-bottom: 10px; transition: border-color .15s; box-sizing: border-box;
}
.pcf-search:focus { border-color: rgba(201,168,76,.5); }

.pcf-scroll {
	max-height: 210px; overflow-y: auto;
	scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.25) rgba(255,255,255,.04);
	border: 1px solid #2a2a2a; border-radius: 8px;
}
.pcf-option {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; cursor: pointer; font-size: 13px; color: #e8e8e8;
	transition: background .12s; position: relative; margin: 0;
}
.pcf-option:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.04); }
.pcf-option:hover { background: rgba(255,255,255,.04); }
.pcf-option input[type="radio"] { accent-color: #C9A84C; width: 14px; height: 14px; flex-shrink: 0; margin: 0; }
.pcf-option:has(input:checked) { background: rgba(201,168,76,.07); color: #C9A84C; }
.pcf-opt-count { margin-left: auto; font-size: 11px; color: #555; }

/* ── Number pairs (price) ─────────────────────────────────────────────────── */
.pcf-num-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcf-num {
	background: #111; border: 1px solid #2a2a2a; color: #e8e8e8;
	padding: 9px 12px; border-radius: 8px; font-size: 13px; outline: none;
	width: 100%; transition: border-color .15s; -moz-appearance: textfield; box-sizing: border-box;
}
.pcf-num::-webkit-outer-spin-button,
.pcf-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pcf-num:focus { border-color: rgba(201,168,76,.5); }
.pcf-num::placeholder { color: #444; }

/* ── Pills (sort) ─────────────────────────────────────────────────────────── */
.pcf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pcf-pill { position: relative; display: inline-flex; margin: 0; }
.pcf-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pcf-pill span {
	display: inline-block; padding: 7px 16px;
	border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	cursor: pointer; color: #c0c0c0; transition: all .15s; white-space: nowrap; user-select: none;
}
.pcf-pill span:hover { border-color: rgba(201,168,76,.5); color: #C9A84C; }
.pcf-pill input:checked + span { border-color: #C9A84C; background: rgba(201,168,76,.1); color: #C9A84C; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.pcf-panel-foot {
	padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.08);
	flex-shrink: 0; display: flex; align-items: center; gap: 16px;
}
.pcf-apply {
	flex: 1; background: #C9A84C; color: #000; font-weight: 900; font-size: 12px;
	text-transform: uppercase; letter-spacing: .12em; padding: 14px 24px;
	border: none; border-radius: 999px; cursor: pointer; transition: background .2s;
}
.pcf-apply:hover { background: #d4b55e; }
.pcf-reset {
	color: #a0a0a0; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .1em; text-decoration: none; white-space: nowrap; transition: color .2s;
}
.pcf-reset:hover { color: #fff; }

body.pcf-locked { overflow: hidden; }