/* Product-list design: the mini-program's hierarchy, expressed as responsive Web components. */
.myopal-catalog {
	--catalog-gutter: clamp(0.875rem, 3.75vw, 1.5rem);
	--catalog-gap: 4%;
	--catalog-gold: #9a7334;
	--catalog-cream: #f6f2ea;
	padding: 0;
	background: var(--catalog-cream);
}
.myopal-catalog-top { padding: 0.625rem 0 1.5rem; background: var(--myopal-catalog-dark); }
.myopal-system-tabs {
	display: flex;
	max-width: 32rem;
	margin-inline: max(1.3125rem, env(safe-area-inset-left, 0px)) max(1.3125rem, env(safe-area-inset-right, 0px));
	padding: 0.25rem;
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: var(--myopal-radius-pill);
	background: rgb(255 255 255 / 8%);
}
.myopal-system-tabs a {
	flex: 1;
	padding: 0.5rem;
	border-radius: inherit;
	color: rgb(255 255 255 / 65%);
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
.myopal-system-tabs [aria-current] { background: var(--myopal-catalog-gold); color: #111; font-weight: 600; }
.myopal-category-nav {
	display: flex;
	gap: 1.625rem;
	align-items: center;
	max-width: var(--myopal-content-wide);
	margin: 1.4375rem auto 0;
	padding-inline: max(1.3125rem, env(safe-area-inset-left, 0px));
	overflow-x: auto;
	scrollbar-width: none;
}
.myopal-category-nav::-webkit-scrollbar { display: none; }
.myopal-category-nav :is(a, button) {
	position: relative;
	flex: 0 0 auto;
	min-height: 2.25rem;
	padding: 0 0 0.5rem;
	border: 0;
	background: none;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.myopal-category-nav [aria-current] { color: #f3d188; font-weight: 700; }
.myopal-category-nav [aria-current]::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: 1.625rem;
	height: 0.15625rem;
	border-radius: var(--myopal-radius-pill);
	background: var(--myopal-catalog-gold);
	transform: translateX(-50%);
}
.myopal-catalog-panel {
	position: relative;
	max-width: var(--myopal-content-wide);
	min-height: 55svh;
	margin: -0.875rem auto 0;
	padding: 0.5rem var(--catalog-gutter) 5.25rem;
	border-radius: 1.0625rem 1.0625rem 0 0;
	background: var(--catalog-cream);
}
.myopal-catalog-toolbar {
	position: sticky;
	inset-block-start: var(--myopal-header-bottom);
	z-index: 9;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	margin: 0 calc(-1 * var(--catalog-gutter)) 0.5rem;
	padding: 0.375rem var(--catalog-gutter);
	border-radius: 1.0625rem 1.0625rem 0 0;
	background: var(--catalog-cream);
}
.myopal-catalog-toolbar button {
	position: relative;
	display: flex;
	gap: 0.25rem;
	justify-content: center;
	min-width: 0;
	padding: 0.625rem 0.125rem;
	border: 0;
	background: none;
	color: #090909;
	font-size: 0.75rem;
	font-weight: 400;
}
.myopal-catalog-toolbar span { white-space: nowrap; }
.myopal-catalog-toolbar .myopal-icon { width:.75rem; height:.75rem; flex-shrink:0; opacity:.5; }
.myopal-catalog-toolbar [data-active] { color: var(--catalog-gold); font-weight: 600; }
.myopal-catalog-toolbar [data-active] .myopal-icon { opacity: 1; }
.myopal-catalog-toolbar [data-active]::after {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	align-self: flex-start;
	margin-block-start: 0.125rem;
	border-radius: 50%;
	background: #d4af37;
}
.myopal-catalog-count { margin-block-end: 0.75rem; padding-inline: 0.125rem; color: #8a7a62; font-size: 0.75rem; }
.myopal-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--catalog-gap);
	row-gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.myopal-catalog-pagination { min-height: 2.75rem; padding: 1rem 0; text-align: center; color: #9a8d78; font-size: 0.6875rem; }
.myopal-catalog-pagination > a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; }
.myopal-catalog-empty { display: grid; justify-items: center; align-content: center; gap: 0.5625rem; min-height: 17rem; padding: 2.5rem 1.25rem; text-align: center; }
.myopal-catalog-empty h2 { font-size: 0.9375rem; }
.myopal-catalog-empty p { color: #8a7a62; font-size: 0.75rem; }
.myopal-catalog-empty a { margin-block-start: 0.5rem; padding: 0.5rem 1.5rem; border-radius: 999px; background: #111; color: #f3d188; font-size: 0.75rem; text-decoration: none; }
.myopal-catalog-loading { padding: 0.5rem 0; color: var(--catalog-gold); font-size: 0.75rem; }
.myopal-catalog-loading::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-inline-end: 0.5rem; vertical-align: middle; border: 1px solid #d8b46a66; border-top-color: #9a7334; border-radius: 50%; animation: myopal-catalog-spin 800ms linear infinite; }
.myopal-catalog [aria-busy="true"] { opacity: 0.5; }
.myopal-catalog-noscript { padding: 1rem; font-size: 0.75rem; }

@keyframes myopal-catalog-spin { to { transform: rotate(1turn); } }
@media (min-width: 48rem) {
	.myopal-system-tabs { margin-inline: auto; }
	.myopal-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
	.myopal-category-nav { justify-content: center; }
	.myopal-catalog-toolbar { grid-template-columns: repeat(3, minmax(0, 12rem)); justify-content: center; }
}
@media (min-width: 75rem) {
	.myopal-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.myopal-catalog-loading::before { animation: none; }
}

.myopal-sheet-close .myopal-icon { width:1rem; height:1rem; }