/* ==========================================================================
   Eyewear UX — shop archive (filters, toolbar, grid)
   ========================================================================== */

.ey-archive {
	background: #fff;
	padding-bottom: clamp(30px, 5vw, 60px);
}

/* ---------- head ---------- */

.ey-archive__head {
	background: var(--ey-cream);
	border-bottom: 1px solid var(--ey-line);
	padding: clamp(16px, 2.4vw, 30px) 0 clamp(18px, 2.6vw, 32px);
	margin-bottom: clamp(20px, 3vw, 32px);
}

.ey-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: var(--ey-muted);
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.ey-crumbs a {
	color: var(--ey-muted);
}

.ey-crumbs a:hover {
	color: var(--ey-gold-2);
}

.ey-crumbs__current {
	color: var(--ey-ink-2);
	font-weight: 600;
}

.ey-archive__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ey-archive__title {
	margin: 0 0 6px;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 700;
	color: var(--ey-ink);
	line-height: 1.5;
}

.ey-archive__desc {
	margin: 0;
	max-width: 62ch;
	font-size: .88rem;
	line-height: 1.95;
	color: var(--ey-muted);
}

.ey-archive__count {
	margin: 0;
	padding: 8px 14px;
	border-radius: var(--ey-radius-pill);
	background: #fff;
	border: 1px solid var(--ey-line);
	font-size: .8rem;
	font-weight: 700;
	color: var(--ey-ink-2);
	white-space: nowrap;
}

/* ---------- body ---------- */

.ey-archive__body {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 34px);
	align-items: start;
}

.ey-archive__main {
	--ey-cols: 3;
	min-width: 0;
}

.ey-archive__main ul.products {
	--ey-cols: 3;
	margin-bottom: 10px;
}

/* ---------- filters ---------- */

.ey-filters {
	position: sticky;
	top: calc(var(--ey-hh) + 8px);
	display: grid;
	gap: 18px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ey-line);
	border-radius: var(--ey-radius);
	box-shadow: var(--ey-shadow-sm);
}

.ey-filters__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ey-line);
}

.ey-filters__head strong {
	font-size: .95rem;
	color: var(--ey-ink);
}

.ey-filters__reset {
	margin-inline-start: auto;
	font-size: .78rem;
	font-weight: 700;
	color: var(--ey-err);
}

.ey-filters__close {
	display: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ey-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ey-ink);
	cursor: pointer;
}

.ey-filter__title {
	margin: 0 0 10px;
	font-size: .84rem;
	font-weight: 700;
	color: var(--ey-ink);
}

.ey-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.ey-filter__list li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 8px;
	font-size: .83rem;
	color: var(--ey-text);
	transition: background .16s var(--ey-ease), color .16s var(--ey-ease);
}

.ey-filter__list li a:hover {
	background: var(--ey-cream);
	color: var(--ey-ink);
}

.ey-filter__list li a.is-active {
	background: var(--ey-gold-soft);
	color: var(--ey-ink);
	font-weight: 700;
}

.ey-check {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 1.5px solid var(--ey-line);
	border-radius: 6px;
	background: #fff;
	color: #fff;
}

.ey-filter__list li a.is-active .ey-check {
	background: var(--ey-gold-2);
	border-color: var(--ey-gold-2);
}

.ey-filter__name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ey-filter__n {
	font-size: .72rem;
	color: var(--ey-muted);
}

.ey-filter__price-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 10px;
}

.ey-filter__price-row label {
	display: grid;
	gap: 4px;
	font-size: .74rem;
	color: var(--ey-muted);
}

.ey-filter__price-row input {
	min-height: 40px;
	padding: 8px 10px;
	font-size: .82rem;
	border-radius: 10px;
	width: 100%;
}

.ey-filter__price .ey-btn {
	width: 100%;
}

.ey-filter__help {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--ey-cream);
}

.ey-filter__help p {
	margin: 0 0 6px;
	font-size: .8rem;
	color: var(--ey-ink-2);
	font-weight: 600;
}

.ey-filter__help a {
	font-size: .78rem;
	font-weight: 700;
	color: var(--ey-gold-2);
}

.ey-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 16px;
	margin-bottom: 14px;
	border: 1px solid var(--ey-line);
	border-radius: var(--ey-radius-pill);
	background: #fff;
	font-family: inherit;
	font-size: .86rem;
	font-weight: 700;
	color: var(--ey-ink);
	cursor: pointer;
}

.ey-badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 99px;
	background: var(--ey-gold);
	color: #fff;
	font-size: .7rem;
}

/* ---------- toolbar ---------- */

.ey-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 18px;
	background: var(--ey-cream);
	border: 1px solid var(--ey-line);
	border-radius: var(--ey-radius-sm);
}

.ey-toolbar__count {
	margin: 0;
	font-size: .82rem;
	color: var(--ey-muted);
}

.ey-toolbar__count b {
	color: var(--ey-ink);
}

.ey-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ey-toolbar__sort label {
	font-size: .8rem;
	color: var(--ey-muted);
}

.ey-toolbar__sort select {
	min-height: 40px;
	padding: 6px 12px;
	font-size: .82rem;
	border-radius: 10px;
	background: #fff;
}

/* ---------- empty state ---------- */

.ey-empty {
	padding: clamp(30px, 5vw, 56px);
	text-align: center;
	border: 1px dashed var(--ey-line);
	border-radius: var(--ey-radius);
	background: var(--ey-cream);
}

.ey-empty__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #fff;
	color: var(--ey-gold-2);
	border: 1px solid var(--ey-line);
}

.ey-empty h2 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: var(--ey-ink);
}

.ey-empty p {
	margin: 0 auto 18px;
	max-width: 46ch;
	font-size: .86rem;
	color: var(--ey-muted);
	line-height: 1.95;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
	.ey-archive__main ul.products {
		--ey-cols: 2;
	}
}

@media (max-width: 1024px) {
	.ey-archive__body {
		grid-template-columns: 1fr;
	}

	.ey-filter-toggle {
		display: inline-flex;
	}

	.ey-filters {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 150;
		width: min(330px, 90vw);
		max-height: 100vh;
		overflow-y: auto;
		border-radius: 0;
		transform: translateX(100%);
		transition: transform .28s var(--ey-ease);
		box-shadow: -20px 0 50px rgba(11, 18, 32, .18);
	}

	.ey-filters.is-open {
		transform: translateX(0);
	}

	.ey-filters__close {
		display: grid;
	}

	.ey-archive__main ul.products {
		--ey-cols: 2;
	}

	.ey-archive__head {
		padding-block: 16px 20px;
	}
}

@media (max-width: 560px) {
	.ey-archive__main ul.products {
		--ey-cols: 2;
	}

	.ey-archive__main ul.products li.product .button {
		font-size: .74rem;
	}

	.ey-toolbar {
		padding: 10px 12px;
	}

	.ey-toolbar__sort {
		width: 100%;
	}

	.ey-toolbar__sort select {
		flex: 1 1 auto;
	}
}


/* ==========================================================================
   Archive polish pass — real shop rhythm on every breakpoint
   ========================================================================== */

@media (min-width: 1025px) {
	.ey-archive__main ul.products {
		--ey-cols: 3;
	}
}

@media (max-width: 1024px) {
	.ey-archive__main ul.products {
		--ey-cols: 3;
	}

	.ey-archive__head {
		padding: 14px 0 18px;
		margin-bottom: 18px;
	}

	.ey-archive__desc {
		font-size: .84rem;
	}

	.ey-filter-toggle {
		position: sticky;
		top: calc(var(--ey-hh) + 6px);
		z-index: 40;
		background: #fff;
		box-shadow: 0 6px 18px rgba(11, 18, 32, .08);
	}
}

@media (max-width: 900px) {
	.ey-archive__main ul.products {
		--ey-cols: 2;
	}
}

@media (max-width: 600px) {
	.ey-archive__head {
		padding: 12px 0 14px;
		margin-bottom: 14px;
	}

	.ey-archive__intro {
		gap: 8px;
		align-items: flex-start;
	}

	.ey-archive__title {
		font-size: 1.15rem;
		margin-bottom: 2px;
	}

	.ey-archive__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: .78rem;
		line-height: 1.8;
	}

	.ey-archive__count {
		padding: 5px 10px;
		font-size: .72rem;
	}

	.ey-crumbs {
		font-size: .7rem;
		margin-bottom: 8px;
	}

	.ey-toolbar {
		padding: 8px 10px;
		gap: 8px;
		margin-bottom: 12px;
	}

	.ey-toolbar__count {
		font-size: .76rem;
	}

	.ey-toolbar__sort {
		width: 100%;
		gap: 6px;
	}

	.ey-toolbar__sort label {
		font-size: .74rem;
	}

	.ey-toolbar__sort select {
		min-height: 36px;
		font-size: .76rem;
		padding: 4px 8px;
	}

	.ey-archive__main ul.products {
		--ey-cols: 2;
		gap: 10px;
		margin-bottom: 16px;
	}

	.ey-archive__main ul.products li.product .button {
		min-height: 34px;
		padding: 6px 8px;
		margin: 6px 10px 10px;
		width: calc(100% - 20px);
	}

	.ey-archive__main ul.products li.product .woocommerce-loop-product__title {
		padding: 8px 10px 2px;
		min-height: 3.6em;
		font-size: .8rem;
		line-height: 1.6;
	}

	.ey-archive__main ul.products li.product .price {
		padding: 0 10px 2px;
		font-size: .84rem;
	}

	.ey-archive__main ul.products li.product .price .woocommerce-Price-currencySymbol {
		font-size: .68rem;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.ey-archive__main ul.products li.product .woocommerce-loop-product__title {
		font-size: .88rem;
		min-height: 3.2em;
	}
}


/* the archive body is a grid item: it must fill the row */
.ey-archive > .ey-archive__body {
	width: 100%;
}