/* ═══════════════════════════════════════════
   ROYSEN · Каталог (Figma: Catalog)
   ═══════════════════════════════════════════ */

.catalog{ padding:24px 0 100px; position:relative; }
.catalog__title{
	font-size:clamp(72px, 6.6vw, 96px);
	font-weight:500; line-height:1.05; text-transform:uppercase;
	margin:6px 0 32px;
}

/* ─── Чипси категорій ─── */
.catalog-chips{
	display:flex; flex-wrap:wrap; gap:8px;
	margin-bottom:24px;
}
.catalog-chip{
	display:inline-flex; align-items:center; justify-content:center;
	padding:12px 20px;
	font-size:14px; font-weight:500; text-transform:uppercase;
	text-decoration:none; white-space:nowrap;
	border:1px solid var(--ink);
	opacity:.6;
	transition:opacity .2s, background .2s, border-color .2s;
}
.catalog-chip:hover{ opacity:1; }
.catalog-chip.is-active{
	background:var(--yellow); border-color:var(--yellow); opacity:1;
	flex:1 0 auto; text-align:center; justify-content:center;
}

/* ─── Панель фільтри/сортування ─── */
.catalog-bar{
	display:flex; align-items:center; justify-content:space-between;
	border-top:1px solid rgba(17,17,17,.1);
	border-bottom:1px solid rgba(17,17,17,.1);
	padding:24px 0;
	margin-bottom:32px;
}
.catalog-bar__filters{
	display:inline-flex; align-items:center; gap:8px;
	background:none; border:none; padding:0;
	font-size:14px; font-weight:500; text-transform:uppercase;
}
.catalog-bar__filters svg{ width:17px; height:13px; }
.catalog-bar__sort form{ margin:0; }
.catalog-bar__sort select{
	appearance:none; -webkit-appearance:none;
	background:transparent; border:none;
	font-size:14px; text-transform:uppercase;
	padding-right:20px; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right center; background-size:10px 6px;
}
.catalog-bar__sort select:focus{ outline:none; }

/* ─── Панель розмірів ─── */
.catalog-filters{
	display:flex; align-items:center; gap:24px;
	padding:0 0 24px;
	margin:-8px 0 24px;
	border-bottom:1px solid rgba(17,17,17,.1);
}
.catalog-filters__sizes{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.catalog-size{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; padding:10px 12px;
	border:1px solid var(--line);
	font-size:14px; text-decoration:none;
	transition:border-color .2s, background .2s;
}
.catalog-size:hover{ border-color:var(--ink); }
.catalog-size.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.catalog-filters__reset{
	font-size:12px; text-transform:uppercase; letter-spacing:.06em;
	text-decoration:underline; text-underline-offset:3px;
}

/* ─── Сітка + «показати ще» ─── */
.catalog-grid{ gap:48px 8px; }
.catalog-more{ margin-top:56px; text-align:center; }
.catalog-more .r-btn{ min-width:220px; }
.catalog-more__count{ margin-top:14px; font-size:12px; color:var(--faint); letter-spacing:.06em; }
.catalog-empty{ padding:48px 0; color:var(--muted); }

/* панель фільтрів прихована, поки не відкрита кнопкою */
.catalog-filters[hidden]{ display:none; }