/* Shelf Catalog — neutral styles that inherit your theme's fonts and colors. */
.shelfcat {
	--sc-line: color-mix(in srgb, currentColor 14%, transparent);
	--sc-soft: color-mix(in srgb, currentColor 5%, transparent);
	--sc-muted: color-mix(in srgb, currentColor 65%, transparent);
	--sc-radius: 8px;
}
.shelfcat-h { margin-top: 2em; }
.shelfcat-count { font-size: .6em; font-weight: 500; color: var(--sc-muted); vertical-align: middle; }

/* Brand / product header */
.shelfcat-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 1.5em; }
.shelfcat-logo { flex: 0 0 auto; width: 200px; max-width: 100%; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 16px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: #fff; box-sizing: border-box; }
.shelfcat-logo img, .shelfcat-tile-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.shelfcat-facts { flex: 1 1 260px; min-width: 0; margin: 0; display: grid; gap: 6px; }
.shelfcat-facts > div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sc-line); }
.shelfcat-facts dt { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); margin: 0; }
.shelfcat-facts dd { margin: 0; }

.shelfcat-monogram { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #2d3142; color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .02em; }

/* Flavor chips */
.shelfcat-chips { list-style: none; margin: .5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.shelfcat-chips li { margin: 0; }
.shelfcat-chips a, .shelfcat-more { display: inline-block; padding: 3px 10px; border: 1px solid var(--sc-line); border-radius: 999px; font-size: .85em; text-decoration: none; color: inherit; }
.shelfcat-chips a:hover, .shelfcat-chips a:focus-visible { background: var(--sc-soft); }
.shelfcat-more { border-style: dashed; color: var(--sc-muted); }

/* Product cards */
.shelfcat-cards { list-style: none; margin: 1em 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.shelfcat-card { margin: 0; padding: 14px 16px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); min-width: 0; }
.shelfcat-card-title { font-size: 1.05em; margin: 0 0 .25em; }
.shelfcat-card-meta { margin: 0; font-size: .85em; color: var(--sc-muted); }

/* Brand tiles */
.shelfcat-jump ul { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.shelfcat-tiles { list-style: none; margin: 1em 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shelfcat-tiles--small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.shelfcat-tile { margin: 0; }
.shelfcat-tile a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 14px 10px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); text-decoration: none; color: inherit; text-align: center; box-sizing: border-box; }
.shelfcat-tile a:hover, .shelfcat-tile a:focus-visible { background: var(--sc-soft); }
.shelfcat-tile-logo { width: 100%; height: 72px; display: grid; place-items: center; background: #fff; border-radius: 6px; padding: 6px; box-sizing: border-box; }
.shelfcat-tiles--small .shelfcat-tile-logo { height: 52px; }
.shelfcat-tile-name { font-weight: 600; line-height: 1.25; }
.shelfcat-tile-count { font-size: .8em; color: var(--sc-muted); }

/* Notices */
.shelfcat-cta { margin-top: 1.5em; padding: 12px 16px; border-radius: var(--sc-radius); background: var(--sc-soft); }
.shelfcat-warning { margin-top: 2em; padding: 12px 16px; border: 2px solid currentColor; font-weight: 700; }
.shelfcat-age { font-size: .85em; color: var(--sc-muted); }

@media (max-width: 480px) {
	.shelfcat-logo { width: 100%; }
	.shelfcat-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Monograms inside tiles stay within the logo box */
.shelfcat-tile-logo .shelfcat-monogram { width: 52px; height: 52px; font-size: 18px; }
.shelfcat-tiles--small .shelfcat-tile-logo .shelfcat-monogram { width: 40px; height: 40px; font-size: 14px; }
.shelfcat-logo a { text-decoration: none; display: grid; place-items: center; width: 100%; height: 100%; }
.shelfcat [hidden] { display: none !important; }