/* Niche Store Builder – front end. Inherits theme fonts and colours where possible. */
.nsb { --nsb-accent: var(--wp--preset--color--primary, #0b6bcb); --nsb-border: rgba(127,127,127,.25); --nsb-muted: rgba(127,127,127,.95); }
.nsb *, .nsb *::before, .nsb *::after { box-sizing: border-box; }
.nsb-crumbs { font-size: .875em; margin: 0 0 1em; color: var(--nsb-muted); }
.nsb-crumbs a { text-decoration: none; }
.nsb-sep { margin: 0 .35em; }
.nsb-disclosure { font-size: .8em; color: var(--nsb-muted); border-left: 3px solid var(--nsb-border); padding: .25em .75em; margin: 0 0 1.25em; }
.nsb-intro { margin-bottom: 1.5em; }
.nsb-h { font-size: 1.25em; margin: 1.5em 0 .75em; }

.nsb-search { display: flex; gap: .5em; margin: 0 0 1.5em; max-width: 640px; }
.nsb-search input[type=search] { flex: 1; min-width: 0; padding: .6em .8em; border: 1px solid var(--nsb-border); border-radius: 6px; font: inherit; }
.nsb-search button { padding: .6em 1.1em; border: 0; border-radius: 6px; background: var(--nsb-accent); color: #fff; font: inherit; cursor: pointer; }

.nsb-grid, .nsb-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.nsb-card { display: flex; flex-direction: column; border: 1px solid var(--nsb-border); border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--base, transparent); margin: 0; }
.nsb-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; padding: .5rem; }
.nsb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nsb-body { display: flex; flex-direction: column; gap: .35rem; padding: .75rem; flex: 1; }
.nsb-title { font-size: .95em; line-height: 1.35; margin: 0; font-weight: 600; }
.nsb-title a { text-decoration: none; color: inherit; }
.nsb-title a:hover { text-decoration: underline; }
.nsb-price { margin: 0; font-weight: 700; font-size: 1.1em; }
.nsb-ship { display: block; font-weight: 400; font-size: .75em; color: var(--nsb-muted); }
.nsb-meta { margin: 0; font-size: .8em; color: var(--nsb-muted); }
.nsb-btn { margin-top: auto; display: block; text-align: center; padding: .55em .75em; border-radius: 6px; background: var(--nsb-accent); color: #fff !important; text-decoration: none !important; font-size: .9em; font-weight: 600; }
.nsb-src-amazon .nsb-btn { background: #f7b500; color: #111 !important; }
.nsb-btn:hover { filter: brightness(1.08); }
.nsb-noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(127,127,127,.08) 0 10px, transparent 10px 20px); }

.nsb-cats li { margin: 0; }
.nsb-cats a { display: flex; flex-direction: column; border: 1px solid var(--nsb-border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; height: 100%; }
.nsb-cat-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #fff; padding: .5rem; }
.nsb-cat-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nsb-cat-name { padding: .65rem .75rem; font-weight: 600; }
.nsb-cats a:hover .nsb-cat-name { text-decoration: underline; }

.nsb-pages { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.5em 0; }
.nsb-pages a, .nsb-pages span { padding: .4em .75em; border: 1px solid var(--nsb-border); border-radius: 6px; text-decoration: none; }
.nsb-pages span[aria-current] { background: var(--nsb-accent); color: #fff; border-color: var(--nsb-accent); }

.nsb-catnav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nsb-catnav a { display: inline-block; padding: .35em .8em; border: 1px solid var(--nsb-border); border-radius: 999px; text-decoration: none; font-size: .9em; }
.nsb-pricenote { font-size: .75em; color: var(--nsb-muted); margin-top: 1em; }
.nsb-empty { padding: 1em; border: 1px dashed var(--nsb-border); border-radius: 8px; }
.nsb-admin-error { padding: .75em 1em; margin-bottom: 1em; border-left: 4px solid #d63638; background: rgba(214,54,56,.08); font-size: .875em; }

@media (max-width: 480px) {
	.nsb-grid, .nsb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.nsb-body { padding: .55rem; }
}