.jl-shop-page {
	--jl-shop-ink: #162233;
	--jl-shop-muted: #5c6978;
	--jl-shop-line: #dfe6ec;
	--jl-shop-accent: #2d7a78;
	--jl-shop-gold: #b9854d;
	--jl-shop-surface: #ffffff;
	--jl-shop-warm: #fbf7f1;
	padding-bottom: 84px;
}

.jl-hub-page--shop {
	background:
		radial-gradient(circle at top left, rgba(185, 133, 77, 0.10), transparent 34%),
		radial-gradient(circle at top right, rgba(45, 122, 120, 0.09), transparent 28%),
		linear-gradient(180deg, #faf7f2 0%, #ffffff 36%);
}

.jl-shop-hero {
	padding-top: 54px;
}

.jl-shop-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
	grid-template-areas: "visual copy";
	gap: 24px;
	align-items: start;
}

.jl-shop-hero__content,
.jl-shop-hero__panel {
	border: 1px solid var(--jl-shop-line);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 24px 54px rgba(15, 23, 42, 0.07);
}

.jl-shop-hero__content {
	grid-area: copy;
	align-self: start;
	padding: 38px 40px;
	background:
		radial-gradient(circle at top left, rgba(185, 133, 77, 0.18), transparent 32%),
		linear-gradient(135deg, #fffdf9 0%, #f5faf9 100%);
}

.jl-shop-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: var(--jl-shop-muted);
	font-size: 14px;
}

.jl-shop-breadcrumbs a {
	color: var(--jl-shop-accent);
	text-decoration: none;
	font-weight: 600;
}

.jl-shop-breadcrumbs a:hover,
.jl-shop-breadcrumbs a:focus {
	text-decoration: underline;
}

.jl-shop-hero__footnote {
	margin: 20px 0 0;
	color: var(--jl-shop-muted);
	font-size: 15px;
	line-height: 1.7;
}

.jl-shop-hero__panel {
	grid-area: visual;
	align-self: start;
	display: grid;
	gap: 16px;
	align-content: start;
	padding: 18px;
	background:
		radial-gradient(circle at top left, rgba(45, 122, 120, 0.10), transparent 24%),
		linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.jl-shop-hero__mosaic {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 12px;
	margin-bottom: 0;
}

.jl-shop-hero__mosaic-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.jl-shop-hero__mosaic-link--primary {
	grid-row: span 2;
}

.jl-shop-hero__mosaic-link:focus-visible {
	outline: 0;
}

.jl-shop-hero__mosaic-tile {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 24px;
	min-height: 200px;
	background: linear-gradient(140deg, rgba(185, 133, 77, 0.12) 0%, rgba(45, 122, 120, 0.10) 100%);
	border: 1px solid rgba(223, 230, 236, 0.82);
	box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.jl-shop-hero__mosaic-tile--primary {
	min-height: 412px;
}

.jl-shop-hero__mosaic-link:hover .jl-shop-hero__mosaic-tile,
.jl-shop-hero__mosaic-link:focus-visible .jl-shop-hero__mosaic-tile {
	transform: translateY(-2px);
	border-color: rgba(45, 122, 120, 0.55);
	box-shadow: 0 22px 42px rgba(15, 23, 42, 0.10);
}

.jl-shop-hero__mosaic-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jl-shop-hero__mosaic-caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	padding: 12px 14px;
	border-radius: 18px;
	background: rgba(20, 33, 50, 0.80);
	color: #ffffff;
}

.jl-shop-hero__mosaic-caption span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.jl-shop-hero__mosaic-caption strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.35;
}

.jl-shop-hero__merchant-strip,
.jl-shop-hero__brand-strip {
	margin-top: 0;
	padding: 16px 18px;
	border: 1px solid rgba(27, 38, 59, 0.08);
	border-radius: 18px;
	background: var(--jl-shop-warm);
}

.jl-shop-hero__merchant-strip strong,
.jl-shop-hero__brand-strip strong {
	display: block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jl-shop-accent);
}

.jl-shop-hero__merchant-pills,
.jl-shop-hero__brand-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.jl-shop-hero__merchant-pills span,
.jl-shop-hero__brand-pills span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(223, 230, 236, 0.95);
	color: var(--jl-shop-ink);
	font-size: 13px;
	font-weight: 700;
}

.jl-shop-merchant-pill {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	appearance: none;
	border: 1px solid rgba(223, 230, 236, 0.95);
	background: rgba(255, 255, 255, 0.95);
	cursor: pointer;
	color: var(--jl-shop-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.jl-shop-merchant-pill:hover,
.jl-shop-merchant-pill:focus-visible,
.jl-shop-merchant-pill.is-active {
	border-color: rgba(45, 122, 120, 0.58);
	background: rgba(245, 250, 249, 0.98);
	color: var(--jl-shop-accent);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
	outline: 0;
}

.jl-shop-merchant-pill:focus-visible {
	box-shadow: 0 0 0 3px rgba(45, 122, 120, 0.12), 0 12px 22px rgba(15, 23, 42, 0.08);
}

.jl-shop-merchant-pill--more {
	border-style: dashed;
	text-decoration: none;
}

.jl-shop-merchant-pill--more:hover,
.jl-shop-merchant-pill--more:focus-visible {
	background: rgba(255, 255, 255, 0.98);
}

.jl-shop-shell {
	padding-bottom: 56px;
}

.jl-shop-story {
	margin-top: 40px;
}

.jl-shop-story__panel {
	padding: 32px 34px;
	border: 1px solid var(--jl-shop-line);
	border-radius: 28px;
	background:
		radial-gradient(circle at top left, rgba(185, 133, 77, 0.14), transparent 30%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 247, 241, 0.96) 100%);
	box-shadow: 0 22px 40px rgba(15, 23, 42, 0.05);
}

.jl-shop-story__grid {
	display: grid;
	grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
	gap: 26px 34px;
	align-items: start;
}

.jl-shop-story__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.jl-shop-story__eyebrow {
	margin: 0 0 10px;
	color: var(--jl-shop-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jl-shop-story__panel h2 {
	margin: 0;
	color: var(--jl-shop-ink);
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.12;
}

.jl-shop-story__body {
	max-width: 840px;
	color: var(--jl-shop-muted);
	font-size: 16px;
	line-height: 1.9;
}

.jl-shop-story__body p {
	margin: 0 0 16px;
}

.jl-shop-story__body p:last-child {
	margin-bottom: 0;
}

.jl-shop-guide-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jl-shop-toolbar {
	position: sticky;
	top: 18px;
	z-index: 20;
	padding: 18px 20px;
	border: 1px solid var(--jl-shop-line);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

#jl-shop-toolbar {
	scroll-margin-top: 120px;
}

.jl-shop-toolbar__search input {
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 1px solid var(--jl-shop-line);
	border-radius: 18px;
	background: #ffffff;
	font-size: 16px;
	color: var(--jl-shop-ink);
}

.jl-shop-toolbar__search input:focus {
	border-color: rgba(45, 122, 120, 0.55);
	box-shadow: 0 0 0 3px rgba(45, 122, 120, 0.10);
	outline: 0;
}

.jl-shop-toolbar__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.jl-shop-toolbar__filters button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--jl-shop-line);
	background: #ffffff;
	color: var(--jl-shop-ink);
	font-size: 13px;
	font-weight: 700;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.jl-shop-filter-label {
	display: inline-flex;
	align-items: center;
}

.jl-shop-filter-count {
	display: inline-flex;
	align-items: center;
	color: var(--jl-shop-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.jl-shop-toolbar__filters button:hover,
.jl-shop-toolbar__filters button:focus,
.jl-shop-toolbar__filters button.is-active {
	border-color: rgba(45, 122, 120, 0.58);
	color: var(--jl-shop-accent);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.jl-shop-toolbar__filters button[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.jl-shop-toolbar__filters button.is-active .jl-shop-filter-count {
	color: var(--jl-shop-accent);
}

.jl-shop-toolbar__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px 16px;
	margin-top: 14px;
}

.jl-shop-toolbar__merchant,
.jl-shop-toolbar__brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: min(100%, 280px);
	flex: 1 1 280px;
}

.jl-shop-toolbar__merchant span,
.jl-shop-toolbar__brand span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jl-shop-accent);
}

.jl-shop-toolbar__merchant select,
.jl-shop-toolbar__brand select {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--jl-shop-line);
	border-radius: 14px;
	background: #ffffff;
	color: var(--jl-shop-ink);
	font-size: 15px;
}

.jl-shop-toolbar__merchant select:focus,
.jl-shop-toolbar__brand select:focus {
	border-color: rgba(45, 122, 120, 0.55);
	box-shadow: 0 0 0 3px rgba(45, 122, 120, 0.10);
	outline: 0;
}

.jl-shop-toolbar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--jl-shop-ink);
}

.jl-shop-toolbar__toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--jl-shop-accent);
}

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

.jl-shop-toolbar__reset {
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid rgba(223, 230, 236, 0.95);
	background: #ffffff;
	color: var(--jl-shop-ink);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.jl-shop-toolbar__reset:hover,
.jl-shop-toolbar__reset:focus {
	border-color: rgba(45, 122, 120, 0.58);
	color: var(--jl-shop-accent);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.jl-shop-sections {
	display: grid;
	gap: 24px;
}

.jl-shop-group {
	padding-top: 2px;
}

.jl-shop-group__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.jl-shop-group__head h3 {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
	color: var(--jl-shop-ink);
}

.jl-shop-group__head p {
	margin: 8px 0 0;
	color: var(--jl-shop-muted);
	line-height: 1.65;
}

.jl-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.jl-shop-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	border: 1px solid var(--jl-shop-line);
	border-radius: 26px;
	background: #ffffff;
	color: var(--jl-shop-ink);
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.jl-shop-card:hover,
.jl-shop-card:focus {
	transform: translateY(-4px);
	border-color: rgba(45, 122, 120, 0.45);
	box-shadow: 0 28px 48px rgba(15, 23, 42, 0.11);
	text-decoration: none;
}

.jl-shop-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	background:
		linear-gradient(140deg, rgba(185, 133, 77, 0.12) 0%, rgba(45, 122, 120, 0.10) 100%),
		linear-gradient(180deg, #fffdf9 0%, #f8fbfb 100%);
}

.jl-shop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.jl-shop-card__placeholder {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(20, 33, 50, 0.65);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.jl-shop-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jl-shop-card__badge {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 11px;
	border-radius: 999px;
	background: rgba(20, 33, 50, 0.84);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

.jl-shop-card__badge--sale {
	background: rgba(185, 133, 77, 0.96);
}

.jl-shop-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 22px;
}

.jl-shop-card__eyebrow {
	margin: 0 0 8px;
	color: var(--jl-shop-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jl-shop-card__title {
	margin: 0 0 8px;
	color: var(--jl-shop-ink);
	font-size: 22px;
	line-height: 1.16;
}

.jl-shop-card__desc {
	margin: 0;
	color: var(--jl-shop-muted);
	font-size: 15px;
	line-height: 1.75;
}

.jl-shop-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.jl-shop-card__price {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--jl-shop-ink);
}

.jl-shop-card__variants {
	color: var(--jl-shop-muted);
	font-size: 14px;
}

.jl-shop-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--jl-shop-accent);
	font-size: 14px;
	font-weight: 700;
}

.jl-shop-card__cta::after {
	content: "->";
}

.jl-shop-empty {
	padding: 28px 24px;
	border: 1px dashed var(--jl-shop-line);
	border-radius: 24px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
	text-align: center;
}

.jl-shop-empty h3 {
	margin: 0 0 8px;
	color: var(--jl-shop-ink);
	font-size: 24px;
}

.jl-shop-empty p {
	margin: 0;
	color: var(--jl-shop-muted);
	font-size: 15px;
	line-height: 1.7;
}

.jl-shop-empty--filters {
	margin-top: 24px;
}

.jl-shop-empty--loading {
	margin-top: 20px;
}

.jl-shop-results {
	display: grid;
	gap: 24px;
	margin-top: 4px;
}

.jl-shop-load-more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.jl-shop-load-more__button {
	min-height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid rgba(223, 230, 236, 0.95);
	background: #ffffff;
	color: var(--jl-shop-ink);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
	cursor: pointer;
}

.jl-shop-load-more__button:hover,
.jl-shop-load-more__button:focus {
	border-color: rgba(45, 122, 120, 0.58);
	color: var(--jl-shop-accent);
	transform: translateY(-1px);
}

[data-shop-card][hidden],
[data-shop-section][hidden],
[data-shop-empty][hidden] {
	display: none !important;
}

@media (max-width: 980px) {
	.jl-shop-hero__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"visual";
	}

	.jl-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.jl-shop-hero__mosaic {
		grid-template-columns: 1fr;
	}

	.jl-shop-hero__mosaic-tile--primary {
		grid-row: auto;
		min-height: 280px;
	}
}

@media (max-width: 640px) {
	.jl-shop-page {
		padding-bottom: 64px;
	}

	.jl-shop-hero {
		padding-top: 36px;
	}

	.jl-shop-hero__content,
	.jl-shop-hero__panel,
	.jl-shop-toolbar {
		border-radius: 24px;
	}

	.jl-shop-hero__content,
	.jl-shop-hero__panel {
		padding: 26px 22px;
	}

	.jl-shop-toolbar {
		position: static;
		top: auto;
		z-index: auto;
		padding: 12px;
		box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
		backdrop-filter: none;
	}

	.jl-shop-toolbar__meta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.jl-shop-story__panel {
		padding: 24px 20px;
		border-radius: 24px;
	}

	.jl-shop-story__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.jl-shop-toolbar__merchant,
	.jl-shop-toolbar__brand,
	.jl-shop-toolbar__toggle,
	.jl-shop-toolbar__reset {
		width: 100%;
		flex: none;
		min-width: 0;
	}

	.jl-shop-toolbar__filters {
		margin-top: 12px;
		gap: 6px;
	}

	.jl-shop-toolbar__filters button {
		min-height: 36px;
		padding: 0 12px;
		font-size: 12px;
		gap: 6px;
	}

	.jl-shop-toolbar__merchant select,
	.jl-shop-toolbar__brand select {
		min-height: 40px;
		font-size: 14px;
	}

	.jl-shop-toolbar__toggle,
	.jl-shop-toolbar__reset {
		min-height: 40px;
	}

	.jl-shop-filter-count {
		font-size: 11px;
	}

	.jl-shop-group__head {
		display: block;
	}

	.jl-shop-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.jl-shop-card__media {
		min-height: 190px;
	}

	.jl-shop-card__body {
		padding: 18px;
	}
}