/**
 * Brina Shop / All Products V2 (inc/brina-shop.php). Loaded on the shop page
 * only; every selector is .brina-shop*, so no other page or shared card
 * variant changes. Open product grid (no boxed cards), filter sidebar that
 * becomes a drawer below 1100px, columns from the grid's own width.
 */

.brina-shop {
	--shop-ink: #111827;
	--shop-ink-2: #374151;
	--shop-muted: #6B7280;
	--shop-line: #E5E7EB;
	--shop-soft: #F6F7FB;
	--shop-brand: #4A3BD6;
	--shop-accent: #5B4CF0;
	--shop-sale: #C92F55;
	--shop-focus: #5B4CF0;
	box-sizing: border-box;
	width: 100%;
	max-width: 1640px;
	margin: 0 auto;
	padding: 20px 0 56px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--shop-ink);
}

.brina-shop *,
.brina-shop *::before,
.brina-shop *::after { box-sizing: border-box; }

.brina-shop :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--shop-focus);
	outline-offset: 2px;
}

/* ---- Page shell (shop + product search only) ---------------------------
   Bricks already lays the page out as a flex column (header, main with
   flex: 1, footer); without a minimum height, a short result page (e.g. a
   filter with few products) leaves blank space under the footer on tall
   screens. With the body at least one viewport tall the main area takes
   that space and the footer stays at the bottom, in normal flow. */
body.post-type-archive-product {
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---- Head + toolbar ---------------------------------------------------- */

.brina-shop__head {
	display: grid;
	gap: 6px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--shop-line);
}

.brina-shop .brina-shop__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--shop-ink);
}

.brina-shop__subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--shop-muted);
}

.brina-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.brina-shop__count {
	margin: 0;
	font-size: 14px;
	color: var(--shop-muted);
}

.brina-shop__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

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

.brina-shop__sort label {
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-ink-2);
	white-space: nowrap;
}

.brina-shop__sort select {
	min-height: 40px;
	padding: 0 34px 0 12px;
	font: inherit;
	font-size: 14px;
	color: var(--shop-ink);
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px;
	border: 1px solid #CDD3E0;
	border-radius: 10px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.brina-shop__filters-open {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-ink);
	background: #FFFFFF;
	border: 1px solid #CDD3E0;
	border-radius: 10px;
	cursor: pointer;
}

.brina-shop__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: #FFFFFF;
	background: var(--shop-accent);
	border-radius: 999px;
}

.brina-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	background: #101C3D;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.brina-shop-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Layout ------------------------------------------------------------ */

.brina-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.brina-shop__main {
	min-width: 0;
	container-type: inline-size;
}

@media (min-width: 1100px) {
	.brina-shop__layout {
		grid-template-columns: 232px minmax(0, 1fr);
		gap: 32px;
	}
}

/* ---- Filters ----------------------------------------------------------- */

.brina-shop__filters {
	display: grid;
	gap: 4px;
	align-content: start;
}

.brina-shop__filters-head {
	display: none;
}

.brina-shop .brina-shop__filters-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.brina-shop__filter-form {
	display: grid;
	gap: 4px;
	margin: 0;
}

.brina-shop-filter {
	min-width: 0;
	margin: 0;
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--shop-line);
}

.brina-shop__filters > .brina-shop-filter:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.brina-shop .brina-shop-filter__title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--shop-ink-2);
}

.brina-shop-cats,
.brina-shop-checks,
.brina-shop-cats__sub {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brina-shop-cats__sub {
	margin: 1px 0 2px 12px;
	padding-left: 8px;
	border-left: 1px solid var(--shop-line);
}

.brina-shop-checks.is-long {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 4px;
}

.brina-shop-cat,
.brina-shop-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 4px 8px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--shop-ink-2);
	text-decoration: none;
	border-radius: 8px;
	cursor: pointer;
}

.brina-shop-cat > span:first-child,
.brina-shop-check > span:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
}

.brina-shop-cat:hover,
.brina-shop-check:hover {
	background: var(--shop-soft);
	color: var(--shop-ink);
}

.brina-shop-cat.is-active {
	font-weight: 700;
	color: var(--shop-brand);
	background: #F1EFFE;
}

.brina-shop-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--shop-accent);
	flex: 0 0 auto;
}

.brina-shop-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--shop-muted);
}

.brina-shop-range {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.brina-shop-range label {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 8px;
	font-size: 13px;
	color: var(--shop-muted);
	background: #FFFFFF;
	border: 1px solid #CDD3E0;
	border-radius: 8px;
}

.brina-shop-range input {
	width: 100%;
	min-width: 0;
	height: 36px;
	padding: 0;
	font: inherit;
	font-size: 14px;
	color: var(--shop-ink);
	background: transparent;
	border: 0;
	outline: 0;
}

.brina-shop-range label:focus-within {
	outline: 2px solid var(--shop-focus);
	outline-offset: 1px;
}

.brina-shop-range__to { color: var(--shop-muted); }

.brina-shop-range__go {
	min-height: 38px;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--shop-ink);
	background: #FFFFFF;
	border: 1px solid #CDD3E0;
	border-radius: 8px;
	cursor: pointer;
}

.brina-shop__filter-submit {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0 0;
	border-top: 1px solid var(--shop-line);
}

/* With scripting the filters apply on change; the button stays for
   keyboard users who prefer an explicit submit. */
.brina-shop.is-enhanced .brina-shop__filter-submit .brina-shop-btn {
	background: #FFFFFF;
	color: var(--shop-ink);
	border: 1px solid #CDD3E0;
}

/* Desktop sidebar density (≥1100px only; the drawer below keeps the rules
   above). Hierarchy: section title 15/700 > option 14/500 (top-level
   category 600) > count 13/500 muted. Rows 28px (≈9px between lines),
   ≈20px between a section's last row and the next title (existing
   title-on-divider style kept). Visual only: markup,
   inputs and URLs are unchanged. */
@media (min-width: 1100px) {
	.brina-shop__filters,
	.brina-shop__filter-form { gap: 0; }

	/* A <legend> sits on the fieldset's top divider, so top padding would
	   land below the title: space goes below each section instead. */
	.brina-shop-filter { padding: 2px 0 20px; }

	.brina-shop .brina-shop-filter__title {
		margin: 0 0 6px;
		font-size: 15px;
		line-height: 1.3;
		letter-spacing: 0;
		text-transform: none;
		color: var(--shop-ink);
	}

	.brina-shop-cats,
	.brina-shop-checks,
	.brina-shop-cats__sub { gap: 0; }

	.brina-shop-cats__sub {
		margin: 0 0 2px 10px;
		padding-left: 6px;
	}

	.brina-shop-cat,
	.brina-shop-check {
		gap: 9px;
		min-height: 28px;
		margin: 0; /* labels inherit a global form margin-bottom */
		padding: 4px 8px;
		font-weight: 500;
		line-height: 1.35;
		border-radius: 6px;
	}

	/* Top-level categories carry slightly more authority than children. */
	.brina-shop-cats:not(.brina-shop-bands) > li > .brina-shop-cat:not(.is-active) {
		font-weight: 600;
		color: var(--shop-ink);
	}

	.brina-shop-check:has(input:checked) { color: var(--shop-ink); font-weight: 600; }

	.brina-shop-count {
		font-size: 13px;
		font-weight: 500;
	}

	/* Brina checkbox: native input (keyboard, forms, a11y unchanged), drawn flat. */
	.brina-shop-check input {
		appearance: none;
		-webkit-appearance: none;
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		padding: 0;
		background: #FFFFFF;
		border: 1.5px solid #9AA1B2;
		border-radius: 4px;
		cursor: pointer;
		transition: border-color .12s ease, background-color .12s ease;
	}

	.brina-shop-check:hover input { border-color: #101C3D; }

	.brina-shop-check input:checked {
		background: #101C3D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l2.9 2.9 6.1-6.2' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
		border-color: #101C3D;
	}

	.brina-shop-range { margin-top: 8px; }

	.brina-shop-range label {
		font-weight: 500;
		border-radius: 6px;
	}

	.brina-shop-range input {
		height: 32px;
		font-weight: 500;
	}

	.brina-shop-range__go {
		min-height: 34px;
		font-size: 14px;
		border-radius: 6px;
	}

	.brina-shop-range label:hover,
	.brina-shop-range__go:hover { border-color: #101C3D; }

	.brina-shop__filter-submit { padding-top: 12px; }
}

@media (min-width: 1100px) and (forced-colors: active) {
	.brina-shop-check input { appearance: auto; -webkit-appearance: auto; }
}

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

.brina-shop__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.brina-shop__active-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--shop-muted);
}

.brina-shop__active ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brina-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 10px 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--shop-ink);
	text-decoration: none;
	background: #F1EFFE;
	border: 1px solid #DDD6FE;
	border-radius: 999px;
}

.brina-shop-chip:hover { border-color: var(--shop-accent); }

/* ---- Grid -------------------------------------------------------------- */

.brina-shop-grid {
	--shop-cols: 2;
	display: grid;
	grid-template-columns: repeat(var(--shop-cols), minmax(0, 1fr));
	gap: 28px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 520px)  { .brina-shop-grid { --shop-cols: 3; } }
@container (min-width: 860px)  { .brina-shop-grid { --shop-cols: 4; } }
@container (min-width: 1000px) { .brina-shop-grid { --shop-cols: 5; gap: 30px 20px; } }
@container (min-width: 1250px) { .brina-shop-grid { --shop-cols: 6; } }

.brina-shop-grid__item {
	display: flex;
	min-width: 0;
	margin: 0;
}

/* ---- Card (Shop variant; open, no box) --------------------------------- */

.brina-shop .brina-shop-card {
	flex: 1 1 auto;
	gap: 10px;
	border-radius: 12px;
}

.brina-shop .brina-shop-card:focus-within {
	outline: none;
}

.brina-shop .brina-shop-card:has(.brina-card__link:focus-visible) {
	outline: 2px solid var(--shop-focus);
	outline-offset: 4px;
}

.brina-shop-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--shop-soft);
	border-radius: 12px;
}

.brina-shop-card__media .brina-card__img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .2s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.brina-shop-card:hover .brina-shop-card__media .brina-card__img { transform: scale(1.03); }
}

.brina-shop-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	border-radius: 6px;
	pointer-events: none;
}

.brina-shop-card__badge.is-sale { color: #FFFFFF; background: var(--shop-sale); }
.brina-shop-card__badge.is-new  { color: #1E3A8A; background: #DBEAFE; }
.brina-shop-card__badge.is-best { color: #FFFFFF; background: #101C3D; }

.brina-shop .brina-shop-card .brina-wishlist {
	top: 4px;
	right: 4px;
}

.brina-shop-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 0 2px;
}

.brina-shop-card__brand {
	margin: 0;
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--shop-muted);
}

.brina-shop .brina-shop-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--shop-ink);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow-wrap: anywhere;
}

.brina-shop .brina-shop-card__title a {
	color: inherit;
	text-decoration: none;
}

.brina-shop-card:hover .brina-shop-card__title a { text-decoration: underline; text-underline-offset: 2px; }

.brina-shop .brina-card__rating { margin: 0; }

.brina-shop-card__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 2px 0 0;
}

.brina-shop-card__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--shop-ink);
}

.brina-shop-card__price del {
	order: 2;
	font-size: 13px;
	font-weight: 500;
	color: var(--shop-muted);
}

.brina-shop-card__price ins {
	order: 1;
	text-decoration: none;
	color: var(--shop-sale);
}

.brina-shop-card__off {
	font-size: 12px;
	font-weight: 700;
	color: var(--shop-sale);
}

.brina-shop-card__options,
.brina-shop-card__stock {
	margin: 0;
	font-size: 12.5px;
	color: var(--shop-muted);
}

.brina-shop-card__stock { font-weight: 600; color: #8A1C1C; }

.brina-shop-card__actions {
	position: relative;
	z-index: 2; /* above the stretched card link */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.brina-shop-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--shop-ink);
	text-decoration: none;
	background: #FFFFFF;
	border: 1px solid #CDD3E0;
	border-radius: 999px;
	transition: border-color .15s ease, background-color .15s ease;
}

.brina-shop-card__action:hover { border-color: var(--shop-ink); }

.brina-shop-card__action.is-cart {
	color: #FFFFFF;
	background: #101C3D;
	border-color: #101C3D;
}

.brina-shop-card__action.is-cart:hover { background: #1B2A55; }

.brina-shop-card__action.loading { opacity: .6; pointer-events: none; }

.brina-shop-card__action.added::after { content: " \2713"; }

/* WooCommerce's "View cart" link after an AJAX add. */
.brina-shop-card__actions .added_to_cart {
	font-size: 13px;
	font-weight: 600;
	color: var(--shop-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Empty + pagination ------------------------------------------------ */

.brina-shop__empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--shop-soft);
	border-radius: 14px;
}

.brina-shop__empty p { margin: 0 0 8px; }

.brina-shop-pager { margin: 40px 0 0; }

.brina-shop-pager ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brina-shop-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-ink);
	text-decoration: none;
	border: 1px solid var(--shop-line);
	border-radius: 10px;
}

.brina-shop-page:hover { border-color: var(--shop-ink); }
.brina-shop-page.is-current { color: #FFFFFF; background: #101C3D; border-color: #101C3D; }
.brina-shop-page.is-gap { border: 0; min-width: 20px; padding: 0; }

/* ---- Below 1100px: filters in a drawer -------------------------------- */

@media (max-width: 1099.98px) {
	.brina-shop {
		padding-top: 12px;
	}

	.brina-shop__filters-open { display: inline-flex; }

	.brina-shop__filters {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1000;
		width: min(360px, 88vw);
		padding: 16px 18px 24px;
		overflow-y: auto;
		background: #FFFFFF;
		box-shadow: 0 0 40px rgba(16, 28, 61, .25);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform .22s ease, visibility 0s linear .22s;
	}

	.brina-shop.is-filters-open .brina-shop__filters {
		transform: none;
		visibility: visible;
		transition: transform .22s ease;
	}

	.brina-shop__filters-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 8px;
	}

	.brina-shop__filters-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--shop-ink);
		background: none;
		border: 0;
		border-radius: 10px;
		cursor: pointer;
	}

	.brina-shop__scrim:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(16, 28, 61, .35);
	}

	.brina-shop__filter-submit {
		position: sticky;
		bottom: -24px;
		padding-bottom: 16px;
		background: #FFFFFF;
	}

	.brina-shop.is-enhanced .brina-shop__filter-submit .brina-shop-btn {
		color: #FFFFFF;
		background: #101C3D;
		border: 0;
	}
}

@media (max-width: 599.98px) {
	.brina-shop__toolbar { align-items: stretch; }
	.brina-shop__tools { width: 100%; }
	.brina-shop__sort { flex: 1 1 auto; }
	.brina-shop__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.brina-shop__sort select { width: 100%; }
	.brina-shop-card__price { font-size: 16px; }
	.brina-shop-card__action { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.brina-shop *,
	.brina-shop *::before,
	.brina-shop *::after { transition: none !important; }
}