/* ==========================================================================
   Collection pages: short hero, tiles carousel, filter bar, grid, pager
   ========================================================================== */

/* Optional banner (2400x500): short so products show without scrolling */
.dc-chero { position: relative; height: clamp(140px, 20.8vw, 380px); overflow: hidden; background: var(--g100); }
.dc-chero__img { width: 100%; height: 100%; object-fit: cover; }

.dc-collection { padding-top: 18px; }
.dc-collection__head { margin-bottom: 16px; }
.dc-collection__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.dc-collection__intro { margin-top: 6px; color: var(--g600); }
.dc-collection .dc-carousel--tiles { margin-bottom: 18px; }
.dc-collection__seo { margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--g100); color: var(--g700); font-size: 15px; }

/* ---------- Filter bar ---------- */
.dc-filters { position: relative; margin-bottom: 18px; }
@media (min-width: 1000px) { .dc-filters { z-index: 20; } }
.dc-filters__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 0; border-block: 1px solid var(--g200);
}
.dc-filters__open { gap: 6px; }
.dc-filters__open .dc-icon { width: 18px; height: 18px; }

.dc-sort { display: flex; align-items: center; gap: 8px; }
.dc-sort__label { font-size: 13px; font-weight: 600; color: var(--g600); white-space: nowrap; }
.dc-sort .dc-select { width: auto; min-width: 170px; }

.dc-filters__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; }
.dc-filters__count { font-size: 14px; color: var(--g600); }
.dc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px;
	border-radius: var(--r-pill); background: var(--g100); color: var(--ink);
	font-size: 13px; font-weight: 600; text-decoration: none;
}
.dc-chip:hover { background: var(--g200); text-decoration: none; }
.dc-chip .dc-icon { width: 14px; height: 14px; }
.dc-chips__clear { font-size: 13px; font-weight: 600; }

/* Checkbox rows + MagSafe toggle */
.dc-check { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.dc-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dc-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-toggle__ui {
	position: relative; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--g300);
	transition: background .2s;
}
.dc-toggle__ui::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s var(--ease);
}
.dc-toggle input:checked + .dc-toggle__ui { background: var(--black); }
.dc-toggle input:checked + .dc-toggle__ui::after { transform: translateX(16px); }
.dc-toggle input:focus-visible + .dc-toggle__ui { outline: 2px solid var(--link); outline-offset: 2px; }

.dc-fgroup__label { display: block; margin-bottom: 6px; font-size: 13px; }
.dc-fdrop__btn { list-style: none; cursor: pointer; }
.dc-fdrop__btn::-webkit-details-marker { display: none; }

/* ---------- Mobile: filters slide in from the left ---------- */
@media (max-width: 999px) {
	.dc-fpanel {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
		width: min(90vw, 400px); display: flex; flex-direction: column; gap: 0;
		background: var(--white); overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-102%); transition: transform .3s var(--ease);
	}
	.dc-filters.is-open .dc-fpanel { transform: none; }
	.dc-fpanel__overlay { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .5); }
	.dc-fpanel__top {
		position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
		padding: 10px 8px 10px var(--gutter); background: var(--black); color: var(--white);
	}
	.dc-fpanel__top .dc-iconbtn { color: var(--white); }
	.dc-fpanel__title { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
	.dc-fgroup { padding: 14px var(--gutter); border-bottom: 1px solid var(--g100); }
	.dc-fdrop__btn { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; }
	.dc-fdrop[open] .dc-fdrop__btn .dc-icon { transform: rotate(180deg); }
	.dc-fdrop__panel { padding-top: 8px; }
	.dc-toggle { display: flex; justify-content: space-between; flex-direction: row-reverse; }
	.dc-fpanel__foot { position: sticky; bottom: 0; margin-top: auto; padding: 14px var(--gutter) 20px; background: var(--white); border-top: 1px solid var(--g200); display: grid; gap: 10px; justify-items: center; }
	.dc-fpanel__clear { font-size: 14px; font-weight: 600; }
	.dc-sort__label { display: none; }
	.dc-sort .dc-select { min-width: 0; max-width: 52vw; }
}

/* ---------- Desktop: filters sit in one row as dropdowns ---------- */
@media (min-width: 1000px) {
	.dc-filters__open, .dc-fpanel__top, .dc-fpanel__overlay, .dc-fpanel__foot { display: none !important; }
	.dc-fpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
	.dc-fgroup--select { display: flex; align-items: center; gap: 8px; }
	.dc-fgroup--select .dc-fgroup__label { margin: 0; white-space: nowrap; color: var(--g600); }
	.dc-fgroup--select .dc-select { width: auto; min-width: 210px; min-height: 40px; }
	.dc-fdrop { position: relative; }
	.dc-fdrop__btn {
		display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 14px;
		border: 1px solid var(--g300); border-radius: var(--r); background: var(--white);
		font-size: 14px; font-weight: 600; white-space: nowrap;
	}
	.dc-fdrop__btn .dc-icon { width: 16px; height: 16px; transition: transform .2s; }
	.dc-fdrop[open] .dc-fdrop__btn, .dc-fdrop[data-has] .dc-fdrop__btn { border-color: var(--black); }
	.dc-fdrop[open] .dc-fdrop__btn .dc-icon { transform: rotate(180deg); }
	.dc-fdrop__panel {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
		min-width: 220px; max-height: 360px; overflow-y: auto; padding: 10px 14px;
		background: var(--white); border: 1px solid var(--g200); border-radius: var(--r);
		box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
	}
	.dc-toggle { min-height: 40px; padding: 0 12px; border: 1px solid var(--g300); border-radius: var(--r); }
	.dc-filters__bar { align-items: center; }
}

/* ---------- Pager ---------- */
.dc-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.dc-pager__a {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px;
	border: 1px solid var(--g300); border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 600;
}
.dc-pager a.dc-pager__a:hover { border-color: var(--black); text-decoration: none; }
.dc-pager .is-current { background: var(--black); border-color: var(--black); color: var(--white); }
.dc-pager .dots { border: 0; }
.dc-pager .dc-icon { width: 18px; height: 18px; }

/* Product-type tiles above the grid: compact so products stay above the fold */
@media (min-width: 1000px) {
	.dc-collection .dc-carousel--tiles .dc-carousel__track { grid-auto-columns: 128px; }
}
@media (max-width: 999px) {
	.dc-collection .dc-carousel--tiles .dc-carousel__track { grid-auto-columns: 27%; gap: 10px; }
	.dc-collection .dc-tile__label { font-size: 12.5px; }
}