/* ===========================================================================
 * Browseshop stylesheet (NP-21562)
 * ---------------------------------------------------------------------------
 * Visitor view of a user's shop. Self-contained: does NOT inherit anything
 * from market.css. Rules that look similar to market.css are intentionally
 * duplicated (with .bsp- prefix) so the two surfaces can evolve independently.
 *
 * PHP-dependent rules (@font-face URLs that interpolate IMAGE_HOST) stay
 * inline in browseshop.inc. Everything here is environment-agnostic.
 * =========================================================================== */


/* =====================================================================
 * Page wrapper — typography reset (duplicated from market.css pattern,
 * scoped to .bsp-page only). No form-input / table / generic-button
 * styling because browseshop has none of those (no edit, till, wizard,
 * sales). Only the chrome bits that the visitor view actually needs.
 * ===================================================================== */
.bsp-page {
	padding-inline: 16px;
	font-family: "Museo Sans Rounded", Verdana, Arial, sans-serif;
	color: #1c1a17;
	font-size: 12px;
	line-height: 1.5;
}

.bsp-page b,
.bsp-page strong {
	font-family: "Museo Sans Rounded Bold", Verdana, Arial, sans-serif;
	letter-spacing: 0.01em;
}

.bsp-page h1,
.bsp-page h2,
.bsp-page h3 {
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
	font-weight: 500;
	color: #1c1a17;
}

.bsp-page a {
	color: #4a3a00;
	font-family: "Museo Sans Rounded Bold", sans-serif;
	text-decoration: none;
}
.bsp-page a:hover { color: #b33a1c; text-decoration: underline; }


/* =====================================================================
 * Pagination (.bsp-pagination) — pill style DUPLICATED from the Safety
 * Deposit Box pager (safetydeposit.css .sdb-pagination*), re-prefixed
 * .bsp- so the two surfaces stay independent (no shared class).
 * Browseshop is server-rendered (non-Vue): the optional "Go to" jump
 * uses a plain <input>, not SDB's np-numeric-stepper. Buttons may be
 * <a> (page links) or <button> — hence the --current / --disabled
 * modifier aliases alongside SDB's .active / :disabled.
 * ===================================================================== */
.bsp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;   /* sits inside .bsp-grid-toolbar / .bsp-pager-foot flex rows; they own the spacing */
	flex-wrap: wrap;
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
}
.bsp-pagination-label {
	font-size: 16px;
	color: #000;
	margin-right: 4px;
}
.bsp-pagination-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.bsp-pagination-btn {
	min-width: 30px;          /* circle for single digits; grows for 2–3 digit pages */
	height: 30px;
	box-sizing: border-box;
	border-radius: 15px;      /* >= half-height keeps the stadium/pill shape when wide */
	border: none;
	background: #ffeeaf;
	color: #1c1a17;
	cursor: pointer;
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 9px;
	flex-shrink: 0;
	text-decoration: none;
	transition: background 0.15s;
}
.bsp-pagination-btn:hover    { background: #fed123; }
.bsp-pagination-btn.active,
.bsp-pagination-btn--current { background: #fed123; color: #000; cursor: default; }
.bsp-pagination-prev,
.bsp-pagination-next         { padding: 0 12px; }

/* Override the global .bsp-page a / a:hover link styling (coffee colour +
 * red underline) so the pager links read as buttons, not text links. */
.bsp-page a.bsp-pagination-btn,
.bsp-page a.bsp-pagination-btn:hover {
	color: #1c1a17;
	text-decoration: none;
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
}
.bsp-page a.bsp-pagination-btn:hover { background: #fed123; }
.bsp-pagination-btn:disabled,
.bsp-pagination-btn--disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}
.bsp-pagination-dots {
	font-size: 16px;
	color: #000;
}
.bsp-pagination-jump {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
}
.bsp-pagination-jump-label,
.bsp-pagination-jump-total {
	font-size: 14px;
	color: #000;
}
.bsp-pagination-jump-input {
	width: 48px;
	height: 24px;
	border: 1px solid rgba(28, 26, 23, 0.3);
	border-radius: 6px;
	text-align: center;
	font: inherit;
	font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
	.bsp-pagination-btn { transition: none; }
}
/* ≤1024px: drop the jump field to its own row, centred, so it doesn't
   crowd the page buttons on narrower viewports. */
@media (max-width: 1024px) {
	.bsp-pagination-jump {
		width: 100%;
		justify-content: center;
		margin: 8px 0 0;
	}
}


/* =====================================================================
 * NpButton sizing (desktop)
 * ---------------------------------------------------------------------
 * Fixed widths so "Cancel" / "Buy" / "Report shop" all render at the
 * same size regardless of label length. Mobile keeps content-width
 * (stacks full-width inside the modal — see the responsive block at the
 * bottom of this file).
 * ===================================================================== */
@media screen and (min-width: 721px) {
	/* Fixed label-button width, but never the circular icon buttons
	 * (back / help "?") — those keep their intrinsic square size from the
	 * global q-button__2020 / back-button-circle__2020 chrome. */
	.bsp-page .button-default__2020:not(.q-button__2020):not(.back-button-circle__2020) {
		width: 220px;
	}

	/* Paired action rows in empty/price-alert states — same width, centred.
	 * (Modal action buttons get their width from .bsp-popup__actions in
	 * the modals block below.) */
	.bsp-empty__actions,
	.bsp-price-alert__actions {
		justify-content: center;
	}
	.bsp-empty__actions       .button-default__2020,
	.bsp-price-alert__actions .button-default__2020 {
		width: 140px;
		flex: 0 0 auto;
	}
}

/* "Back to the Shops" CTA — render the label in TP Cafeteria (display
 * serif) instead of the default button face. Targets every back-to-shop
 * link by href so we don't have to thread a class through five empty-state
 * branches. */
.bsp-page a.button-default__2020[href="/market_map.phtml"],
.bsp-page a.button-default__2020[href="/market_map.phtml"] * {
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif !important;
	letter-spacing: 0.02em;
}
/* Kill the global .bsp-page a:hover red+underline — the NpButton chrome
 * owns the button's own colour/decoration, so we just cancel the override. */
.bsp-page a.button-default__2020[href="/market_map.phtml"]:hover,
.bsp-page a.button-default__2020[href="/market_map.phtml"]:hover * {
	color: inherit;
	text-decoration: none;
}


/* =====================================================================
 * Menubar — quickstock-style gray nav bar. DUPLICATED from market.css
 * (.mkt-menubar / .mkt-navlist / .mkt-nav-icon), re-prefixed .bsp- so the
 * two surfaces stay independent. The companion markup pattern lives in
 * neopets/np-templates/views/quickstock.inc (.qs-menubar) — the comment
 * in market.css notes that mkt and qs mirror each other but never share.
 *
 * Outer .bsp-menubar is the padded flex row.
 * Inner .bsp-navlist is the pill-shaped list rendered in two flavours:
 *   - default (desktop): white text links, space-between
 *   - .mobile:           icon-only spans, shown on narrow viewports
 * ===================================================================== */
.bsp-menubar {
	display: flex;
	flex-wrap: wrap;          /* lets the toggle bar + list stack on mobile */
	width: 100%;
	margin: 4px auto 8px;
	padding-inline: 16px;
	box-sizing: border-box;
}

/* Mobile nav disclosure — checkbox-hack toggle. Pure display:none/flex
 * switching (robust everywhere), unlike <details> whose closed content uses
 * content-visibility that can't be force-shown on desktop. The checkbox is
 * the state; the label is the tappable bar; the list is the panel.
 *
 * Desktop: toggle hidden, list always shown (base .bsp-navlist display:flex).
 * Mobile : toggle shown, list collapsed until the checkbox is checked. */
.bsp-nav__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bsp-nav__toggle {
	display: none;            /* shown only inside the mobile media query */
	cursor: pointer;
}

/* Full shopping-utility nav (17 links ported from shoptoolbar.inc). Text
 * links that WRAP onto as many rows as the viewport needs — no icon row,
 * because we don't have an icon for every destination. Pill bar matches the
 * inventory page's gray .inv-menubar / .inv-menulinks treatment. */
.bsp-navlist {
	width: 100%;
	margin: 0;
	padding: 0.5em 0.6em;
	background: linear-gradient(#e8a41d, #c18000);
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	gap: 0.35em 0.4em;
	box-sizing: border-box;
}

.bsp-navlist li {
	display: flex;
	align-items: center;
}

/* Links rendered as raised pill "buttons" so they unmistakably read as
 * tappable controls, not a run of text: a solid lighter-than-bar fill, a 1px
 * top highlight + bottom drop-shadow for a tactile raised look, and a real
 * press (translateY + flattened shadow) on hover/active. Suits the playful
 * classic-Neopets toolbar vibe. */
.bsp-navlist a {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	background: linear-gradient(#f5c030, #e8a41d);
	border: 1px solid rgba(161, 104, 0, 0.35);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 2px 3px rgba(100, 60, 0, 0.25);
	font-family: "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	font-size: 12pt;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.bsp-navlist a:hover,
.bsp-navlist a:focus-visible {
	background: linear-gradient(#fdd040, #f5c030);
	color: #4a3a00;
	text-decoration: none;   /* override the generic .bsp-page a:hover underline */
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 4px 7px rgba(100, 60, 0, 0.3);
	outline: none;
}

/* Pressed — sink the button into the bar. */
.bsp-navlist a:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 2px rgba(100, 60, 0, 0.35),
		0 1px 1px rgba(100, 60, 0, 0.15);
}

/* Active link — dark amber chip so the current section stands out against the golden bar. */
.bsp-navlist a.is-active {
	background: linear-gradient(#7a5500, #5a3d00);
	border-color: rgba(28, 20, 0, 0.4);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.bsp-navlist a.is-active:hover,
.bsp-navlist a.is-active:focus-visible {
	background: linear-gradient(#8a6200, #6a4800);
	color: #fff;
}

@media screen and (max-width: 640px) {
	/* The 17-link block buried the shop on phones, so it collapses behind a
	 * tappable bar. Tap to reveal the full chip block (full discoverability
	 * on demand); collapsed by default so the shop is visible immediately. */
	.bsp-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 9px 14px;
		box-sizing: border-box;
		background: linear-gradient(#e8a41d, #c18000);
		border-radius: 5px;
		font: 700 11pt/1 "Museo Sans Rounded Bold", sans-serif;
		color: #4a3a00;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	/* Focus ring follows the checkbox's focus (it's the real control). */
	.bsp-nav__cb:focus-visible + .bsp-nav__toggle {
		outline: 2px solid #fde68a;
		outline-offset: 2px;
	}

	/* Chevron — CSS triangle that flips when the panel is open. */
	.bsp-nav__toggle-chevron {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #4a3a00;
		transition: transform 0.18s ease;
	}
	.bsp-nav__cb:checked + .bsp-nav__toggle .bsp-nav__toggle-chevron {
		transform: rotate(180deg);
	}

	/* Collapsed by default (overrides the base .bsp-navlist display:flex). */
	.bsp-navlist {
		display: none;
	}

	/* Checked → reveal the list below the bar as the wrapping chip block. */
	.bsp-nav__cb:checked ~ .bsp-navlist {
		display: flex;
		margin-top: 6px;
		gap: 0.3em 0.35em;
		padding: 0.55em 0.5em;
	}
	.bsp-navlist a {
		font-size: 10.5pt;
		padding: 4px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsp-nav__toggle-chevron { transition: none; }
}


/* =====================================================================
 * Shop sub-nav — owner "Jump to:" bar. DUPLICATED from market.css
 * (.mkt-subnav), re-prefixed .bsp- so the two surfaces stay independent
 * (NP-40093). Same raised-chip design as the hub .bsp-navlist above: pill
 * buttons on an amber bar. Only 7 links, so they wrap on mobile — no
 * collapse toggle needed.
 * ===================================================================== */
.bsp-subnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35em 0.4em;
	margin: 0 16px 12px;
	padding: 0.5em 0.6em;
	background: linear-gradient(#e8a41d, #c18000);
	border-radius: 5px;
	box-sizing: border-box;
}

/* "Jump to:" eyebrow — dark label on the amber bar. */
.bsp-subnav__label {
	display: inline-flex;
	align-items: center;
	margin-right: 4px;
	padding-left: 4px;
	font-family: "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	font-size: 9pt;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	white-space: nowrap;
}

/* Chip buttons — identical treatment to .bsp-navlist a above. */
.bsp-subnav__link {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	background: linear-gradient(#f5c030, #e8a41d);
	border: 1px solid rgba(161, 104, 0, 0.35);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 2px 3px rgba(100, 60, 0, 0.25);
	font-family: "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	font-size: 12pt;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.bsp-subnav__link:hover,
.bsp-subnav__link:focus-visible {
	background: linear-gradient(#fdd040, #f5c030);
	color: #4a3a00;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 4px 7px rgba(100, 60, 0, 0.3);
	outline: none;
}

/* Pressed — sink the chip into the bar. */
.bsp-subnav__link:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 2px rgba(100, 60, 0, 0.35),
		0 1px 1px rgba(100, 60, 0, 0.15);
}

/* Active chip — dark amber so it punches through the golden bar. */
.bsp-subnav__link.is-active {
	background: linear-gradient(#7a5500, #5a3d00);
	border-color: rgba(28, 20, 0, 0.4);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.bsp-subnav__link.is-active:hover,
.bsp-subnav__link.is-active:focus-visible {
	background: linear-gradient(#8a6200, #6a4800);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.bsp-subnav__link { transition: none; }
}

@media screen and (max-width: 640px) {
	/* Keep the same 16px side gutter + rounding as the hub nav above. Only 7
	   links — they wrap. */
	.bsp-subnav {
		margin: 0 16px 8px;
		gap: 0.3em 0.35em;
		padding: 0.5em 0.45em;
	}
	.bsp-subnav__link {
		font-size: 10.5pt;
		padding: 4px 10px;
	}
}


/* =====================================================================
 * Page header — shop name + owner + report button
 * ===================================================================== */
.bsp-header {
	margin: 8px auto 18px;
	padding: 4px 0 14px;
	max-width: 980px;
	border-bottom: 1px solid rgba(28, 26, 23, 0.12);
}

/* Title row mirrors the closet header pattern (closet.css
 * .closet-header-title-row): centred title with the back-button pinned
 * left and the help "?" pinned right via absolute positioning, so the
 * title stays optically centred regardless of either button's width. */
.bsp-header__title-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
}

.bsp-header__back {
	position: absolute;
	left: 0;
	flex-shrink: 0;
}

/* .bsp-header--bare is the error / empty display-mode header (invalid shop,
 * no shop, frozen, error). It needs no rules of its own: it reuses .bsp-header
 * (box + divider) and .bsp-header__title-row, with .bsp-header__back pinned
 * left — so the back button lands at the exact same place below the menubar as
 * on a normal shop, just without the shop title / owner / report in the centre
 * (NP-40089). The modifier class stays as a semantic hook for future targeting. */

/* Centred title block; padded so a long shop name never slides under the
 * absolutely-positioned side buttons. */
.bsp-header__id {
	min-width: 0;
	max-width: 100%;
	padding: 0 56px;
	text-align: center;
}

.bsp-header__name {
	margin: 0;
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
	font-weight: 500;
	font-size: 36px;
	line-height: 1.15;
	color: #1c1a17;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.bsp-header__owner {
	margin: 6px 0 0;
	font: 500 13px/1.4 "Museo Sans Rounded", sans-serif;
	color: #7a7060;
}

.bsp-header__owner a {
	color: #4a3a00;
	font-family: "Museo Sans Rounded Bold", sans-serif;
	text-decoration: none;
	border-bottom: 1px dotted #7a7060;
}

.bsp-header__owner a:hover {
	color: #b33a1c;
	border-bottom-color: #b33a1c;
}

/* Report shop — a low-emphasis text link sitting with the owner attribution,
 * NOT a page-dominating red button (NP-39668). Recedes to a muted grey when
 * idle; only reveals its marketplace-red "report" intent on hover/focus. */
.bsp-report-link {
	-webkit-appearance: none;
	appearance: none;
	/* Pinned to the right end of the header row (NP — Devon Tuck). Resolves
	 * against .bsp-header__title-row (the nearest positioned ancestor). */
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 2px;
	background: none;
	border: 0;
	cursor: pointer;
	font: 500 12px/1 "Museo Sans Rounded", sans-serif;
	letter-spacing: 0.01em;
	color: #9a907e;
	text-decoration: none;
	transition: color 0.15s ease;
}

.bsp-report-link__icon {
	width: 12px;
	height: 12px;
	display: block;
	opacity: 0.85;
}

.bsp-report-link__label {
	border-bottom: 1px dotted transparent;
	padding-bottom: 1px;
}

.bsp-report-link:hover,
.bsp-report-link:focus-visible {
	color: #b33a1c;
}

.bsp-report-link:hover .bsp-report-link__label,
.bsp-report-link:focus-visible .bsp-report-link__label {
	border-bottom-color: #b33a1c;
}

.bsp-report-link:focus { outline: none; }

.bsp-report-link:focus-visible {
	outline: 2px solid rgba(179, 58, 28, 0.4);
	outline-offset: 3px;
	border-radius: 3px;
}


/* =====================================================================
 * Reported-shop banner (top of page on ?reported=true)
 * ===================================================================== */
.bsp-reported-alert {
	max-width: 980px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	background: #fbf7ee;
	border: 1px solid rgba(60, 107, 71, 0.4);
	border-left: 4px solid #3c6b47;
	border-radius: 6px;
	font: 500 13px/1.4 "Museo Sans Rounded", sans-serif;
	color: #1c4022;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bsp-reported-alert strong {
	font-family: "Museo Sans Rounded Bold", sans-serif;
}


/* =====================================================================
 * Shopkeeper hero — legacy style: centred 150x150 sprite + bold one-liner
 * "{name} says '{greeting}'". Kept minimal on purpose; the hero is the
 * shop's "doorway", not a redesigned card. Typography comes from .bsp-page.
 * ===================================================================== */
.bsp-hero {
	text-align: center;
	margin: 0 0 16px;
}

.bsp-hero img {
	display: inline-block;
}


/* =====================================================================
 * Description (inline render — same as legacy)
 *
 * Rendered directly into page flow so shop owners' <body bgcolor>,
 * <body background>, <body text>, <body link>, <body style>, or
 * <style>body { ... }</style> blocks affect the OUTER page body — that's
 * the historical behaviour these shops were built around. No iframe.
 *
 * We do NOT box this in a coloured container by default. If we did, the
 * user's body styling would still apply to the page chrome but their
 * decorative bg would visually fight with our container. Letting the
 * description own the whole horizontal stripe matches what veteran shop
 * pages have always looked like.
 * ===================================================================== */
.bsp-description-inline {
	max-width: 980px;
	margin: 0 auto 24px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* Long URLs / tables shouldn't blow out the page width. */
.bsp-description-inline img {
	max-width: 100%;
	height: auto;
}

/* Legacy narrow-cell wrap parity: direct-child <img> of <center> stacks. */
.bsp-description-inline center > img {
	display: block;
	margin: 6px auto;
}

/* 2003 camouflage trick: <font color="#ffffcc"> on a #ffffcc bg — text was
 * hidden by colour-matching the legacy cream cell background. Force visible
 * so cheaters can't hide messages, scoped to the description so the page
 * chrome isn't affected. */
.bsp-description-inline font[color="#ffffcc"],
.bsp-description-inline font[color="#FFFFCC"],
.bsp-description-inline *[style*="color:#ffffcc" i],
.bsp-description-inline *[style*="color:#FFFFCC" i],
.bsp-description-inline *[style*="color: #ffffcc" i],
.bsp-description-inline *[style*="color: #FFFFCC" i] {
	color: #000 !important;
}

.bsp-description-unsuitable {
	max-width: 980px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: #f4ecdb;
	border: 1px dashed rgba(28, 26, 23, 0.3);
	border-radius: 6px;
	font: italic 500 13px/1.4 "Museo Sans Rounded", sans-serif;
	color: #7a7060;
	text-align: center;
}


/* =====================================================================
 * Item grid + ShopItemCard
 * ===================================================================== */
.bsp-grid-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 980px;
	margin: 0 auto 16px;
	padding: 8px 0 14px;
	border-bottom: 1px solid rgba(28, 26, 23, 0.12);
}

.bsp-grid-meta {
	font: 500 12px/1.3 "Museo Sans Rounded", sans-serif;
	color: #7a7060;
}

.bsp-admin-link a {
	font: 700 11px/1 "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px dashed rgba(74, 58, 0, 0.4);
	border-radius: 4px;
}
.bsp-admin-link a:hover { color: #b33a1c; border-color: #b33a1c; }

.bsp-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 980px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
}

/* While an AJAX page swap is in flight (pager click / post-purchase reload)
 * the region's content is replaced by the skeleton below; block clicks so the
 * pager can't be double-fired in the gap. */
.bsp-grid-region--loading {
	pointer-events: none;
}

/* ---- Skeleton placeholders (shown during a get-items.php fetch) ---- */
.bsp-skeleton {
	display: block;
	border-radius: 6px;
	background: linear-gradient(
		100deg,
		rgba(28, 26, 23, 0.07) 30%,
		rgba(28, 26, 23, 0.14) 50%,
		rgba(28, 26, 23, 0.07) 70%
	);
	background-size: 200% 100%;
	animation: bsp-skeleton-shimmer 1.2s ease-in-out infinite;
}
.bsp-grid-toolbar--skeleton {
	min-height: 30px;
}
.bsp-skeleton--meta {
	width: 180px;
	max-width: 60%;
	height: 14px;
}
.bsp-skeleton-item {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px 12px;
	background: #fbf7ee;
	border: 1px solid rgba(28, 26, 23, 0.12);
	border-radius: 10px;
}
.bsp-skeleton--img {
	width: 80px;
	height: 80px;
	border-radius: 6px;
}
.bsp-skeleton--line {
	width: 80%;
	height: 12px;
}
.bsp-skeleton--short {
	width: 55%;
}
.bsp-skeleton--price {
	width: 45%;
	height: 12px;
	margin-top: 2px;
}
@keyframes bsp-skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bsp-skeleton { animation: none; }
}

.bsp-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px 12px;
	background: #fbf7ee;
	border: 1px solid rgba(28, 26, 23, 0.22);
	border-radius: 10px;
	box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	text-align: center;
}
.bsp-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -16px rgba(28, 26, 23, 0.35);
	border-color: rgba(179, 58, 28, 0.45);
}

/* The buy action is a real <button> so it gets keyboard focus + Enter
 * activation for free. `all: unset` strips the UA button styling; the
 * remaining declarations rebuild the click target. */
.bsp-item__buy,
.bsp-item__buy:hover {
	all: unset;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	border-radius: 6px;
	box-sizing: border-box;
}
.bsp-item__buy:focus-visible {
	outline: 2px solid #b33a1c;
	outline-offset: 4px;
}

.bsp-item__img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	image-rendering: pixelated;
	border: 1px solid rgba(28, 26, 23, 0.18);
	border-radius: 6px;
	background: #fff;
	padding: 2px;
}

.bsp-item__name {
	font: 700 13px/1.25 "Museo Sans Rounded Bold", sans-serif;
	color: #1c1a17;
	overflow-wrap: anywhere;
}

.bsp-item__qty {
	font: 500 11px/1.2 "Museo Sans Rounded", sans-serif;
	color: #7a7060;
}

.bsp-item__price {
	font: 700 14px/1.2 "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	font-variant-numeric: tabular-nums;
}

/* Featured item ("Your searched item") — pinned at top of grid.
 * Only ever holds a single card, so the wrap hugs its contents and centres
 * on the page rather than stretching to a wide, mostly-empty rectangle. */
.bsp-featured-wrap {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 20px;
	padding: 14px 22px 18px;
	border-radius: 12px;
	text-align: center;
}

.bsp-featured-wrap__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	font: 700 10px/1 "Museo Sans Rounded Bold", sans-serif;
	color: #8b6914;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bsp-featured-wrap__label::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b6914'><path d='M12 2l2.39 7.36H22l-6.18 4.49L18.21 22 12 17.27 5.79 22l2.39-8.15L2 9.36h7.61z'/></svg>") center/contain no-repeat;
}

/* Single centred card — overrides the .bsp-grid auto-fill columns so the
 * lone featured item sits in the middle instead of the far-left cell. */
.bsp-featured {
	display: flex;
	justify-content: center;
	min-width: 160px;
}


/* =====================================================================
 * Modals — NpModal pattern. The togglePopup__2020 / popup-*__2020 chrome
 * is provided by the global H5 theme. Only browseshop-specific bits are
 * defined here (item image, title/price typography inside the body, and
 * the action-row flex layout).
 * ===================================================================== */
/* Use flex column + centre so the item image / title / price / copy stack
 * dead-centre regardless of any text-align rules the global
 * .popup-body__2020 may set on itself. */
.bsp-popup .popup-body__2020.bsp-popup__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 18px;
	padding-bottom: 18px;
}

.bsp-popup__img {
	width: 80px;
	height: 80px;
	margin: 0 0 12px !important;
	border: 1px solid rgba(28, 26, 23, 0.18);
	border-radius: 6px;
	padding: 2px;
	background: #fff;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
}

.bsp-popup__title {
	margin: 0 0 6px;
	font: 700 16px/1.3 "Museo Sans Rounded Bold", sans-serif;
	color: #1c1a17;
}

.bsp-popup__price {
	margin: 0 0 10px;
	font: 600 14px/1.3 "Museo Sans Rounded Bold", sans-serif;
	color: #4a3a00;
	font-variant-numeric: tabular-nums;
}

.bsp-popup__copy {
	margin: 0;
	font: 500 16px/1.55 "Museo Sans Rounded", sans-serif;
	color: #4b453c;
}
.bsp-popup__copy + .bsp-popup__copy {
	margin-top: 12px;
}
@media screen and (max-width: 640px) {
	.bsp-popup__copy { font-size: 14px; }
}


/* Action-row layout — two NpButtons side by side in popup-footer__2020.
 * Mirrors the !flex / !gap-4 / !justify-center pattern used by
 * commonMessageFooterButtons in NpModal.js, but in plain CSS so we don't
 * depend on Tailwind being loaded. */
.bsp-popup__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	justify-content: center;
}
@media screen and (min-width: 721px) {
	.bsp-popup__actions { flex-direction: row; }
	/* Higher-specificity override against the global button-default__2020
	 * rules which otherwise stretch the button to its container's width. */
	.bsp-popup .bsp-popup__actions .button-default__2020 {
		min-width: 0 !important;
	}
}


/* ---------------------------------------------------------------------------
 * Result message popups (buy error + success). These reuse the buy-confirm
 * body but carry only a title + one short line (no price row), so the rhythm
 * tuned for the 4-element buy stack leaves them sparse and undersized. The
 * id scope also beats the global `.popup-body__2020 h4/p` margins that were
 * pushing the title and message far apart.
 * ------------------------------------------------------------------------- */
#bsp-buy-error-popup .bsp-popup__body,
#bsp-buy-success-popup .bsp-popup__body {
	padding: 30px 32px 28px;
}
#bsp-buy-error-popup .bsp-popup__body .bsp-popup__title,
#bsp-buy-success-popup .bsp-popup__body .bsp-popup__title {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
#bsp-buy-error-popup .bsp-popup__body .bsp-popup__copy,
#bsp-buy-success-popup .bsp-popup__body .bsp-popup__copy {
	max-width: 42ch;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
	color: #3f3a32;
}

@media screen and (max-width: 720px) {
	#bsp-buy-error-popup .bsp-popup__body,
	#bsp-buy-success-popup .bsp-popup__body {
		padding: 24px 22px 22px;
	}
	#bsp-buy-error-popup .bsp-popup__body .bsp-popup__title,
	#bsp-buy-success-popup .bsp-popup__body .bsp-popup__title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	#bsp-buy-error-popup .bsp-popup__body .bsp-popup__copy,
	#bsp-buy-success-popup .bsp-popup__body .bsp-popup__copy {
		font-size: 14.5px;
	}
}


/* =====================================================================
 * Job-msg toast (aria-live region)
 * ===================================================================== */
.bsp-toast {
	max-width: 980px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid rgba(179, 58, 28, 0.4);
	border-left: 4px solid #b33a1c;
	border-radius: 6px;
	font: 600 13px/1.4 "Museo Sans Rounded Bold", sans-serif;
	color: #b33a1c;
}


/* =====================================================================
 * Price-change alert
 * ===================================================================== */
.bsp-price-alert {
	max-width: 980px;
	margin: 0 auto 24px;
	padding: 18px 22px;
	background: #fbf7ee;
	border: 1px solid #b33a1c;
	border-left: 6px solid #b33a1c;
	border-radius: 10px;
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 18px;
	align-items: center;
}

.bsp-price-alert__avatar {
	width: 88px;
	height: 88px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid rgba(28, 26, 23, 0.18);
	border-radius: 8px;
	overflow: hidden;
}

.bsp-price-alert__avatar img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	image-rendering: pixelated;
}

.bsp-price-alert__title {
	margin: 0 0 6px;
	font: 700 18px/1.2 "Museo Sans Rounded Bold", sans-serif;
	color: #b33a1c;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsp-price-alert__copy {
	margin: 0 0 12px;
	font: 500 13px/1.45 "Museo Sans Rounded", sans-serif;
	color: #4b453c;
}

.bsp-price-alert__copy strong {
	font-family: "Museo Sans Rounded Bold", sans-serif;
	color: #1c1a17;
}

.bsp-price-alert__copy .bsp-price-alert__old {
	color: #7a7060;
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.bsp-price-alert__copy .bsp-price-alert__new {
	color: #b33a1c;
	font-variant-numeric: tabular-nums;
}

.bsp-price-alert__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.btn-single__2020 {
    width: 100% !important;
    max-width: 100%;
    display: block;
    margin: 0px;
}

/* Price-change action buttons use NpButton styling (green/yellow). The
 * .bsp-price-alert__actions container handles their layout. */


/* =====================================================================
 * Empty / error states (dm_invalid_shop / dm_no_shop / dm_frozen /
 * dm_you_no_shop / dm_error)
 * ===================================================================== */
.bsp-empty {
	max-width: 560px;
	margin: 24px auto;
	padding: 32px 24px;
	background: #fbf7ee;
	border: 1px solid rgba(28, 26, 23, 0.18);
	border-radius: 14px;
	text-align: center;
}

.bsp-empty__art {
	width: 150px;
	height: 150px;
	margin: 0 auto 16px;
	object-fit: contain;
	image-rendering: pixelated;
}

.bsp-empty__title {
	margin: 0 0 8px;
	font: 700 20px/1.25 "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif;
	color: #1c1a17;
}

.bsp-empty__sub {
	margin: 0 0 18px;
	font: 500 14px/1.5 "Museo Sans Rounded", sans-serif;
	color: #4b453c;
}

.bsp-empty__sub b,
.bsp-empty__sub strong {
	font-family: "Museo Sans Rounded Bold", sans-serif;
	color: #1c1a17;
}

.bsp-empty__actions {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Empty-state CTA labels — TP Cafeteria display serif in black, on top of
 * the NpButton green/yellow chrome. Beats the global .bsp-page a (coffee
 * link colour) and .bsp-page a:hover (red+underline) on the inner <a>. */
.bsp-empty__actions .button-default__2020,
.bsp-empty__actions .button-default__2020 *,
.bsp-empty__actions .button-default__2020:hover,
.bsp-empty__actions .button-default__2020:hover * {
	font-family: "TP Cafeteria", "Museo Sans Rounded Bold", sans-serif !important;
	color: #000 !important;
	letter-spacing: 0.02em;
	text-decoration: none;
}


/* =====================================================================
 * Pager footer container (top toolbar lives in .bsp-grid-toolbar above;
 * the buttons themselves come from the .bsp-pagination component near the
 * top of this file).
 * ===================================================================== */
.bsp-pager-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 980px;
	margin: 28px auto 0;
	padding-top: 22px;
	border-top: 1px solid rgba(28, 26, 23, 0.12);
}


/* =====================================================================
 * Reduced-motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bsp-item { transition: none; }
}


/* =====================================================================
 * Responsive (NP-39246)
 * ===================================================================== */
@media (max-width: 720px) {
	/* Tighter side padding so the centred title clears the back/help
	 * buttons on narrow viewports. */
	.bsp-header__id { padding: 0 48px; }

	/* Drop the report link back into normal flow (centred under the owner
	 * name) on narrow viewports — pinning it bottom-right would crowd the
	 * help "?" button and the shrunken title. */
	.bsp-report-link {
		position: static;
		margin-top: 7px;
	}

	.bsp-price-alert {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.bsp-price-alert__avatar { margin: 0 auto; }
	.bsp-price-alert__actions { justify-content: center; }

	/* Tighten the pager spacing so more page buttons fit per row. */
	.bsp-pagination-buttons { gap: 4px; }
}

@media (max-width: 640px) {
	.bsp-header__name { font-size: 22px; }

	/* Shrink the shopkeeper sprite a touch on phones. */
	.bsp-hero img { width: 120px; height: 120px; }

	/* Shrink the popup close (×) button so it doesn't dominate the header
	 * on narrow viewports. !important needed because the global
	 * .popup-exit / .button-default__2020 rules have higher specificity. */
	.bsp-popup .popup-exit {
		width: 36px !important;
		height: 36px !important;
		min-width: 0 !important;
		padding: 0 !important;
	}
	.bsp-popup .popup-exit .popup-exit-icon {
		width: 14px !important;
		height: 14px !important;
		background-size: contain !important;
		margin: 10px auto auto !important;
	}

	.bsp-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 10px;
	}
	.bsp-item { padding: 10px 6px 8px; }
	.bsp-item__img { width: 70px; height: 70px; }
	.bsp-item__name { font-size: 12px; }

	/* Modal action buttons stack on mobile — the popup chrome
	 * (togglePopup__2020) handles its own width on small viewports. */
	.bsp-popup__actions { flex-direction: column; }
	.bsp-popup__actions .button-default__2020 { width: 100%; }
}

@media (max-width: 320px) {
	.bsp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}