/* =========================================================================
   SJ Kids Outfit - Shop archive
   Filter rail + product grid. The card itself is styled in
   woocommerce.css, shared with the homepage rows.
   ========================================================================= */

.sj-shop {
	display: grid;
	gap: var(--sj-sp-6);
	grid-template-columns: 1fr;
	padding-block: var(--sj-sp-6) var(--sj-sp-12);
}
@media (min-width: 1024px) {
	/* the reference's narrow rail; the grid takes what is left */
	.sj-shop { grid-template-columns: 210px minmax(0, 1fr); gap: var(--sj-sp-8); }
}

/* -------------------------------------------------------------------------
   Head + toolbar
   ------------------------------------------------------------------------- */
.sj-shop__head { margin-bottom: var(--sj-sp-5); }
.sj-shop__title {
	margin: 0;
	font-size: var(--sj-fs-2xl);
	color: var(--sj-ink);
}

.sj-shop__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sj-sp-4);
	margin-bottom: var(--sj-sp-6);
	padding-bottom: var(--sj-sp-4);
	border-bottom: 1px solid var(--sj-border);
}
.sj-shop__count {
	margin: 0;
	font-size: 14px;
	color: var(--sj-meta);
}

/* The ordering select is WooCommerce's own markup. */
.sj-shop__bar .woocommerce-ordering { margin: 0 0 0 auto; }
.sj-shop__bar .woocommerce-ordering select {
	min-height: 40px;
	padding: 0 var(--sj-sp-4);
	background: var(--sj-surface);
	border: 1px solid var(--sj-border-strong);
	border-radius: var(--sj-r-sm);
	font-family: var(--sj-font);
	font-size: 14px;
	color: var(--sj-ink);
}

/* Filter button: phones only, where the rail is collapsed. */
.sj-shop__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sj-sp-2);
	min-height: 40px;
	padding: 0 var(--sj-sp-4);
	background: var(--sj-surface);
	border: 1px solid var(--sj-border-strong);
	border-radius: var(--sj-r-sm);
	color: var(--sj-ink);
	font-family: var(--sj-font);
	font-size: 14px;
	cursor: pointer;
}
.sj-shop__filter-toggle svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .sj-shop__filter-toggle { display: none; } }

/* -------------------------------------------------------------------------
   Filter rail
   ------------------------------------------------------------------------- */
/* Collapsed on phones until the Filter button opens it; always open from
   1024px, where it has a column of its own. */
.sj-shop__side { display: none; }
.sj-shop__side.is-open { display: block; }
@media (min-width: 1024px) {
	.sj-shop__side,
	.sj-shop__side.is-open { display: block; }
}

.sj-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sj-sp-3);
	margin-bottom: var(--sj-sp-5);
	padding-bottom: var(--sj-sp-3);
	border-bottom: 1px solid var(--sj-border);
}
.sj-filters__title {
	margin: 0;
	font-size: var(--sj-fs-lg);
	color: var(--sj-ink);
}
.sj-filters__clear {
	color: var(--sj-primary);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sj-fgroup { margin-bottom: var(--sj-sp-6); }
.sj-fgroup__title {
	margin: 0 0 var(--sj-sp-3);
	font-size: 15px;
	font-weight: var(--sj-fw-semi);
	color: var(--sj-ink);
}

.sj-fgroup__list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* long attribute lists scroll rather than pushing the grid down */
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sj-fgroup__list li { margin: 0 0 var(--sj-sp-2); }
.sj-fgroup__list a {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-2);
	color: var(--sj-body);
	font-size: 14px;
	text-decoration: none;
	line-height: 1.4;
}
.sj-fgroup__list a:hover { color: var(--sj-primary); }
.sj-fgroup__count { color: var(--sj-muted); font-size: 13px; }

/* A link that behaves like a checkbox, so filtering works without JS. */
.sj-fcheck__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var(--sj-border-input);
	border-radius: 3px;
	background: var(--sj-surface);
}
.sj-fcheck.is-on { color: var(--sj-primary); font-weight: var(--sj-fw-medium); }
.sj-fcheck.is-on .sj-fcheck__box {
	position: relative;
	background: var(--sj-primary);
	border-color: var(--sj-primary);
}
.sj-fcheck.is-on .sj-fcheck__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4.5px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* Price ------------------------------------------------------------------ */
.sj-fprice__range { margin: 0 0 var(--sj-sp-3); font-size: 14px; color: var(--sj-body); }
.sj-fprice__fields { display: flex; gap: var(--sj-sp-2); margin-bottom: var(--sj-sp-3); }
.sj-fprice__fields input {
	width: 100%;
	min-width: 0;
	min-height: 36px;
	padding: 0 var(--sj-sp-2);
	background: var(--sj-surface);
	border: 1px solid var(--sj-border-strong);
	border-radius: var(--sj-r-sm);
	font-family: var(--sj-font);
	font-size: 14px;
	color: var(--sj-ink);
}

/* -------------------------------------------------------------------------
   Grid footer
   ------------------------------------------------------------------------- */
.sj-shop__progress {
	margin: var(--sj-sp-8) auto 0;
	max-width: 320px;
	text-align: center;
}
.sj-shop__progress p { margin: 0 0 var(--sj-sp-2); font-size: 13px; color: var(--sj-meta); }
.sj-shop__bar-track {
	display: block;
	height: 3px;
	background: var(--sj-border-strong);
	border-radius: var(--sj-r-pill);
	overflow: hidden;
}
.sj-shop__bar-fill {
	display: block;
	height: 100%;
	background: var(--sj-primary);
}

.sj-shop .woocommerce-pagination { margin-top: var(--sj-sp-6); text-align: center; }
.sj-shop .woocommerce-pagination ul {
	display: inline-flex;
	gap: var(--sj-sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}
.sj-shop .woocommerce-pagination li { border: 0; }
.sj-shop .woocommerce-pagination a,
.sj-shop .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 var(--sj-sp-2);
	border: 1px solid var(--sj-border-strong);
	border-radius: var(--sj-r-sm);
	color: var(--sj-body);
	font-size: 14px;
	text-decoration: none;
}
.sj-shop .woocommerce-pagination .current {
	background: var(--sj-primary);
	border-color: var(--sj-primary);
	color: #fff;
}

.sj-shop__empty { margin-top: var(--sj-sp-5); }