/**
 * main-skins — theme-level CSS.
 *
 * Bundled at theme root and enqueued unconditionally via inc/enqueue.php.
 * Scope: branding chrome that isn't owned by an individual block —
 *   - header (bst-header)
 *   - footer (bst-footer)
 *   - logo (bst-logo)
 *   - shared button/icon-button primitives (bst-btn, bst-icon-btn)
 *
 * Block-specific styles live in src/blocks/<name>/style-index.css and
 * are enqueued by register_block_type() only when the block is present.
 *
 * All design tokens come from theme.json — no hardcoded colors, fonts,
 * or radii. The values referenced via var(--wp--…) are defined in the
 * settings section of theme.json (resolved to CSS custom properties by
 * WordPress).
 */

/* ──────────── Container ──────────── */

.bst-container {
	max-width: 80rem; /* matches theme.json settings.layout.wideSize */
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

/* ──────────── Logo (shared) ──────────── */

.bst-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bst-logo:hover {
	color: var(--wp--preset--color--accent-1);
}

.bst-logo-mark {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bst-logo-mark img {
	display: block;
	width: 28px;
	height: 28px;
}

/* ──────────── Header ──────────── */

.bst-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--neutral);
	position: relative;
	z-index: 50;
}

.bst-header-inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding-block: 16px;
}

.bst-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	flex: 1;
	margin-left: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bst-nav a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	padding: 8px 0;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bst-nav a:hover,
.bst-nav a.active {
	color: var(--wp--preset--color--accent-1);
}

.bst-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Search */

.bst-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 12px;
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast-muted);
	font-size: 13px;
	min-width: 220px;
}

.bst-search:focus-within {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

.bst-search input {
	background: transparent;
	border: 0;
	outline: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	flex: 1;
	min-width: 0;
	padding: 0;
}

.bst-search input::placeholder {
	color: var(--wp--preset--color--contrast-faint);
}

.bst-search-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--contrast-faint);
}

/* Icon buttons */

.bst-icon-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	transition: color 200ms, border-color 200ms;
	position: relative;
}

.bst-icon-btn:hover {
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.bst-icon-btn-sm {
	width: 32px;
	height: 32px;
}

.bst-icon-btn .badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--border--radius--pill);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bst-header-signin {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	font-size: 13px;
	padding: 0 8px;
	transition: color 200ms;
}

.bst-header-signin:hover {
	color: var(--wp--preset--color--contrast);
}

/* Buttons */

.bst-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding-inline: 18px;
	border-radius: var(--wp--custom--border--radius--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 200ms, color 200ms, border-color 200ms;
	border: 1px solid transparent;
}

.bst-btn-sm {
	height: 36px;
	padding-inline: 14px;
	font-size: 12px;
}

.bst-btn-primary {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.bst-btn-primary:hover {
	background: var(--wp--preset--color--accent-1-hover, var(--wp--preset--color--accent-1));
	filter: brightness(1.1);
}

.bst-btn-ghost {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--neutral-strong);
}

.bst-btn-ghost:hover {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}

/* ──────────── Footer ──────────── */

.bst-footer {
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--neutral);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-muted);
	font-size: 14px;
}

.bst-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--neutral);
}

.bst-footer-brand .bst-logo {
	margin-bottom: 14px;
}

.bst-footer-tagline {
	font-size: 13px;
	line-height: 1.6;
	max-width: 280px;
	margin: 0 0 14px;
}

.bst-footer-social {
	display: flex;
	gap: 8px;
}

.bst-footer-col h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast-faint);
	margin: 0 0 14px;
	font-weight: 600;
}

.bst-footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bst-footer-links a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	transition: color 200ms;
}

.bst-footer-links a:hover {
	color: var(--wp--preset--color--accent-1);
}

.bst-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	flex-wrap: wrap;
}

.bst-footer-version {
	letter-spacing: 0.06em;
}

/* ──────────── Trust strip (inline copy used inside footer.html) ──────────── */
/* Block-scoped copy lives in src/blocks/footer-trust-strip/style-index.css —
 * the same rules also need to apply to the inline copy inside parts/footer.html,
 * so they're duplicated here at the .bst-trust-strip level (no block wrapper).
 */

.bst-footer .bst-trust-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bst-footer .bst-trust-icon {
	height: 30px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: #1a1a1a;
}

.bst-footer .bst-trust-icon svg {
	flex-shrink: 0;
	display: block;
}

.bst-footer .bst-trust-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-family: var(--wp--preset--font-family--body);
}

/* ──────────── Body resets ──────────── */
/* theme.json controls the bulk; this fixes a few WC defaults that leak through. */

html, body {
	min-height: 100%;
}

/* WooCommerce notices look hideous by default in dark theme — quick neutralisation */
.woocommerce-notices-wrapper {
	max-width: 80rem;
	margin: 1rem auto;
	padding-inline: var(--wp--preset--spacing--50);
}

/* Hide deprecated WP title elements that double up against our custom header */
.wp-block-site-title { display: none; }

/* Header/footer chrome — desktop default (mobile rules at bottom of file, v0.1.10) */

/* Hide mobile-only chrome by default (desktop ≥ 880px) */
.bst-hamburger,
.bst-nav-toggle,
.bst-mobile-drawer,
.bst-drawer-backdrop,
.bst-search-mobile,
.bst-mobile-nav,
.bst-mobile-drawer-head,
.bst-mobile-drawer-footer,
.bst-show-filters-btn,
.bst-filters-toggle,
.bst-filters-backdrop,
.bst-mobile-filters-head,
.bst-mobile-filters-apply { display: none; }

/* ──────────── Homepage (front-page.html) ──────────── */

/* Hero */
.bst-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--neutral);
}

.bst-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 80% 30%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 60%),
		radial-gradient(ellipse 50% 60% at 20% 80%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.bst-hero > .wp-block-group {
	position: relative;
	z-index: 1;
}

.bst-hero-grid {
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.bst-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--wp--custom--border--radius--pill);
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--40);
}

.bst-eyebrow .pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 0 var(--wp--preset--color--accent-1);
	animation: bst-pulse 1.6s infinite;
}

@keyframes bst-pulse {
	0%   { box-shadow: 0 0 0 0 var(--wp--preset--color--accent-1); }
	70%  { box-shadow: 0 0 0 6px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.bst-hero-h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, 6vw, 76px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.bst-hero-h1 .accent {
	color: var(--wp--preset--color--accent-1);
	font-style: normal;
	position: relative;
}

.bst-hero-h1 .accent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.08em;
	height: 0.08em;
	background: var(--wp--preset--color--accent-1);
	opacity: .25;
}

.bst-hero-lead {
	font-size: 18px;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.6;
	max-width: 560px;
	margin-bottom: var(--wp--preset--spacing--50);
}

.bst-hero-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Hero spotlight card */
.bst-spotlight {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--lg);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--custom--shadow--md);
	position: relative;
}

.bst-spotlight-tag {
	position: absolute;
	top: -12px;
	left: var(--wp--preset--spacing--40);
	padding: 4px 10px;
	border-radius: var(--wp--custom--border--radius--sm);
	background: var(--wp--preset--color--rarity-covert);
	color: white;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
}

.bst-spotlight-img {
	aspect-ratio: 4/3;
	border-radius: var(--wp--custom--border--radius--md);
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--40);
	background:
		radial-gradient(circle at 30% 40%, var(--wp--preset--color--rarity-covert), transparent 55%),
		linear-gradient(135deg, var(--wp--preset--color--base-raised), var(--wp--preset--color--base));
	position: relative;
}

.bst-spotlight-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg, transparent 0 18px, rgba(255, 255, 255, .02) 18px 36px);
}

.bst-spotlight-nm {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.bst-spotlight-h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.bst-spotlight-h3 small {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-muted);
	letter-spacing: 0;
	margin-top: 6px;
}

.bst-spotlight-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--neutral);
	gap: 12px;
}

.bst-spotlight-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--contrast-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.bst-spotlight-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

/* Section heads */
.bst-section {
	border-bottom: 1px solid var(--wp--preset--color--neutral);
}

.bst-section-h {
	margin-bottom: var(--wp--preset--spacing--50);
}

.bst-section-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--accent-1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

.bst-section-h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}

.bst-section-sub {
	color: var(--wp--preset--color--contrast-muted);
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.5;
	max-width: 540px;
}

/* Featured products grid */
.bst-featured-grid .wp-block-post-template,
.bst-featured-grid .is-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.bst-product-tile {
	transition: transform 320ms var(--wp--custom--transition--easing),
		border-color 200ms,
		box-shadow 320ms;
	overflow: hidden;
}

.bst-product-tile:hover {
	transform: translateY(-6px) scale(1.015);
	border-color: var(--wp--preset--color--accent-1) !important;
	box-shadow: 0 18px 40px -10px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)),
		0 0 0 1px var(--wp--preset--color--accent-1);
}

.bst-product-tile .wp-block-post-featured-image {
	margin: 0;
}

.bst-product-tile .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--wp--preset--color--base);
}

.bst-product-tile .wp-block-post-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading);
}

.bst-product-tile .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.bst-product-tile .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}

.bst-product-tile .wc-block-components-product-price,
.bst-product-tile .wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

/* FAQ accordion */
.bst-faq-list {
	display: flex;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--50);
}

.bst-faq-item {
	border: 1px solid var(--wp--preset--color--neutral);
	border-bottom: 0;
	background: var(--wp--preset--color--base-elevated);
}

.bst-faq-item:first-child {
	border-top-left-radius: var(--wp--custom--border--radius--md);
	border-top-right-radius: var(--wp--custom--border--radius--md);
}

.bst-faq-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--neutral);
	border-bottom-left-radius: var(--wp--custom--border--radius--md);
	border-bottom-right-radius: var(--wp--custom--border--radius--md);
}

.bst-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--40);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	transition: color 200ms;
}

.bst-faq-item summary:hover {
	color: var(--wp--preset--color--accent-1);
}

.bst-faq-item summary::-webkit-details-marker {
	display: none;
}

.bst-faq-item summary::marker {
	content: '';
}

.bst-faq-item .plus {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast-muted);
	font-size: 20px;
	transition: transform 200ms;
	line-height: 1;
}

.bst-faq-item[open] summary .plus {
	transform: rotate(45deg);
	color: var(--wp--preset--color--accent-1);
}

.bst-faq-answer {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.7;
	font-size: 14px;
}

/* CTA strip */
.bst-cta-strip {
	background: var(--wp--preset--color--base-elevated);
	border-radius: var(--wp--custom--border--radius--lg);
	padding: var(--wp--preset--spacing--70);
	text-align: center;
	border: 1px solid var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14));
	position: relative;
	overflow: hidden;
}

.bst-cta-strip::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 100%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 70%);
	pointer-events: none;
}

.bst-cta-strip h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 14px;
	position: relative;
}

.bst-cta-strip p {
	color: var(--wp--preset--color--contrast-muted);
	max-width: 540px;
	margin: 0 auto var(--wp--preset--spacing--50);
	font-size: 16px;
	position: relative;
}

.bst-cta-strip .bst-cta-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}

/* Hero responsive */
@media (max-width: 900px) {
	.bst-hero-grid {
		flex-direction: column;
	}
	.bst-hero-grid .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* ──────────── Catalog (archive-product.html) ──────────── */

.bst-shop-hero {
	border-bottom: 1px solid var(--wp--preset--color--neutral);
}

.bst-shop-hero-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.bst-shop-hero-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}

.bst-shop-hero-stats,
.bst-shop-hero-stats .woocommerce-result-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-muted);
	letter-spacing: 0.04em;
	margin: 0;
}

/* ── Toolbar ── */
.bst-shop-toolbar {
	padding: 12px 16px;
	margin-bottom: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	align-items: center;
}

.bst-shop-toolbar .woocommerce-ordering select,
.bst-shop-toolbar select.orderby {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	padding: 6px 28px 6px 12px;
	appearance: none;
	cursor: pointer;
	outline: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,.6)' d='M0 0h10L5 6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.bst-shop-toolbar .woocommerce-ordering select:focus,
.bst-shop-toolbar select.orderby:focus {
	border-color: var(--wp--preset--color--accent-1);
}

/* ── Product grid spacing ── */
.bst-shop-product-grid,
.bst-shop-query .wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.bst-shop-product-grid > li,
.bst-shop-query .wp-block-post-template > li {
	list-style: none;
	margin: 0;
}

/* ── Pagination ── */
.bst-pagination,
.bst-shop-query .wp-block-query-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--wp--preset--spacing--50) 0;
	flex-wrap: wrap;
}

.bst-shop-query .wp-block-query-pagination a,
.bst-shop-query .wp-block-query-pagination .page-numbers,
.bst-shop-query .wp-block-query-pagination .wp-block-query-pagination-previous,
.bst-shop-query .wp-block-query-pagination .wp-block-query-pagination-next {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-decoration: none;
	transition: all 200ms var(--wp--custom--transition--easing);
	padding: 0 8px;
}

.bst-shop-query .wp-block-query-pagination a:hover,
.bst-shop-query .wp-block-query-pagination .page-numbers:hover,
.bst-shop-query .wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.bst-shop-query .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent-1-soft);
}

.bst-shop-query .wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ── Empty state ── */
.bst-shop-empty {
	padding: var(--wp--preset--spacing--70);
	text-align: center;
	background: var(--wp--preset--color--base-elevated);
	border: 1px dashed var(--wp--preset--color--neutral-strong);
	border-radius: var(--wp--custom--border--radius--md);
	color: var(--wp--preset--color--contrast-muted);
}

.bst-shop-empty h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 8px;
}

/* ── Catalog responsive ── */
@media (max-width: 880px) {
	.bst-shop-grid {
		flex-direction: column !important;
	}
	.bst-shop-side {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.wp-block-main-skins-catalog-filters.ms-filters {
		position: static;
		max-height: none;
	}
}

/* ──────────── Product page (single-product.html) ──────────── */

.ms-pp { padding-top: 0; }

.ms-pp .ms-pp-crumbs,
.ms-pp .wc-block-components-breadcrumbs.ms-pp-crumbs {
	padding-block: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ms-pp .ms-pp-crumbs a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}

.ms-pp .ms-pp-crumbs a:hover {
	color: var(--wp--preset--color--accent-1);
}

.ms-pp-section + .ms-pp-section {
	border-top: 1px solid var(--wp--preset--color--neutral);
}

.ms-pp-section--hero { padding-top: var(--wp--preset--spacing--40); }

.ms-pp-section-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Hero columns */
.ms-pp-hero {
	align-items: flex-start !important;
}

.ms-pp-summary.wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.ms-pp-title.wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* Gallery main image — aspect 4/3, rarity-tinted backdrop */
.ms-pp-gallery .ms-pp-gallery-main {
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	overflow: hidden;
	background: var(--wp--preset--color--base-elevated);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.ms-pp-gallery .ms-pp-gallery-main img,
.ms-pp-gallery .ms-pp-gallery-main .wc-block-components-product-image,
.ms-pp-gallery .ms-pp-gallery-main .wp-block-woocommerce-product-image-gallery {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
}

/* Float card */
.ms-pp-floatcard {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--40);
}

.ms-pp-floatcard-title.wp-block-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 14px;
	font-weight: 500;
}

/* Buy box */
.ms-pp-buybox {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.ms-pp-buybox .ms-pp-price,
.ms-pp-buybox .wp-block-woocommerce-product-price,
.ms-pp-buybox .price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.ms-pp-buybox .ms-pp-price ins,
.ms-pp-buybox .wp-block-woocommerce-product-price ins,
.ms-pp-buybox .price ins {
	background: transparent;
	text-decoration: none;
	color: inherit;
}

.ms-pp-buybox .ms-pp-price del,
.ms-pp-buybox .price del {
	font-size: 18px;
	color: var(--wp--preset--color--contrast-faint);
	margin-right: 8px;
}

.ms-pp-buybox .woocommerce-Price-amount,
.ms-pp-buybox .ms-pp-price bdi {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

/* Add to cart form */
.ms-pp-buybox form.cart {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
}

.ms-pp-buybox form.cart .quantity input.qty {
	width: 60px;
	padding: 10px 8px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-align: center;
}

.ms-pp-buybox form.cart button.single_add_to_cart_button,
.ms-pp-buybox button.wc-block-components-product-button__button {
	flex: 1;
	min-width: 180px;
	padding: 14px 22px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--border--radius--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background var(--wp--custom--transition--duration) var(--wp--custom--transition--easing);
}

.ms-pp-buybox form.cart button.single_add_to_cart_button:hover,
.ms-pp-buybox button.wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--accent-1-hover);
}

/* Trade meta with checkmarks */
.ms-pp-trade-meta {
	border-top: 1px solid var(--wp--preset--color--neutral);
	padding-top: var(--wp--preset--spacing--30);
	gap: 14px !important;
	row-gap: 8px !important;
}

.ms-pp-trade-meta .ms-pp-trade-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	letter-spacing: 0.04em;
	margin: 0;
}

.ms-pp-check {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ms-pp-check::before {
	content: '';
	width: 4px;
	height: 7px;
	border-right: 2px solid var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--base);
	transform: rotate(45deg) translate(-1px, -1px);
}

/* About / description body */
.ms-pp-desc-body {
	max-width: 760px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast-muted);
}

.ms-pp-desc-body p + p { margin-top: 1em; }

.ms-pp-desc-body h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 1.5em 0 0.5em;
}

/* Hero responsive */
@media (max-width: 900px) {
	.ms-pp-hero {
		flex-direction: column;
	}
	.ms-pp-hero .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* ──────────── Cart page (v0.1.6) ──────────── */

.bst-cart-page,
.bst-checkout-page {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}

.bst-cart-title,
.bst-checkout-title {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--neutral);
	margin-bottom: var(--wp--preset--spacing--50);
}

.bst-cart-title-sub,
.bst-checkout-title-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 4px;
}

.bst-cart-title-h,
.bst-checkout-title-h {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* Cart shell: WC's cart block has its own 2-column layout — we override grid
 * proportions to match design (1fr + 360px) and style its sub-elements. */
.bst-cart-shell .wp-block-woocommerce-cart {
	display: block;
}

.bst-cart-shell .wp-block-woocommerce-cart .wc-block-cart {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 880px) {
	.bst-cart-shell .wp-block-woocommerce-cart .wc-block-cart {
		grid-template-columns: 1fr;
	}
}

/* Cart line item row — restyle to design */
.bst-cart-shell .wc-block-cart-items__row,
.bst-cart-shell .wc-block-cart-item__row {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.bst-cart-shell .wc-block-cart-item__image img {
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: var(--wp--custom--border--radius--sm);
}

.bst-cart-shell .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.bst-cart-shell .wc-block-components-product-metadata {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--contrast-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 4px;
}

.bst-cart-shell .wc-block-components-product-price,
.bst-cart-shell .wc-block-cart-item__total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	text-align: right;
}

.bst-cart-shell .wc-block-cart-item__remove-link,
.bst-cart-shell .wc-block-cart-item__remove-button {
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition: all var(--wp--custom--transition--duration);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bst-cart-shell .wc-block-cart-item__remove-link:hover,
.bst-cart-shell .wc-block-cart-item__remove-button:hover {
	color: var(--wp--preset--color--error);
	border-color: var(--wp--preset--color--error);
}

/* Cart summary side */
.bst-cart-shell .wc-block-components-totals-wrapper,
.bst-cart-shell .wp-block-woocommerce-cart-totals-block {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--40);
	position: sticky;
	top: var(--wp--preset--spacing--30);
}

.bst-cart-shell .wc-block-components-totals-item__label,
.bst-cart-shell .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--contrast-muted);
}

.bst-cart-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.bst-cart-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.bst-cart-checkout-btn .wc-block-components-button,
.bst-cart-checkout-btn a {
	width: 100%;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 14px 20px;
	border-radius: var(--wp--custom--border--radius--sm);
	border: 0;
	margin-top: var(--wp--preset--spacing--40);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Empty cart state */
.bst-cart-empty {
	background: var(--wp--preset--color--base-elevated);
	border: 1px dashed var(--wp--preset--color--neutral-strong);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--70);
	text-align: center;
	grid-column: 1 / -1;
}

.bst-cart-empty-icon {
	font-size: 48px;
	opacity: 0.3;
	margin: 0 0 12px;
}

.bst-cart-empty h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
}

.bst-cart-empty p {
	color: var(--wp--preset--color--contrast-muted);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ──────────── Checkout page (v0.1.6) ──────────── */

.bst-checkout-shell {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 880px) {
	.bst-checkout-shell {
		grid-template-columns: 1fr;
	}
}

/* Steps indicator spans full width above the grid */
.bst-checkout-steps {
	grid-column: 1 / -1;
	display: flex;
	gap: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
}

.bst-checkout-step {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--neutral);
	border-right: 0;
	background: var(--wp--preset--color--base-elevated);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bst-checkout-step:first-child {
	border-top-left-radius: var(--wp--custom--border--radius--md);
	border-bottom-left-radius: var(--wp--custom--border--radius--md);
}

.bst-checkout-step:last-child {
	border-top-right-radius: var(--wp--custom--border--radius--md);
	border-bottom-right-radius: var(--wp--custom--border--radius--md);
	border-right: 1px solid var(--wp--preset--color--neutral);
}

.bst-checkout-step.is-done {
	color: var(--wp--preset--color--success);
}

.bst-checkout-step.is-active {
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-1-soft);
	position: relative;
	z-index: 1;
}

.bst-checkout-step .num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
}

.bst-checkout-step.is-done .num {
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--success);
}

.bst-checkout-step.is-active .num {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-1);
}

/* The steam-link-form block needs to span the left column only.
 * WP places it as a sibling of the WC checkout — wrap in CSS grid. */
.bst-checkout-shell > .wp-block-main-skins-steam-link-form {
	grid-column: 1;
}

.bst-checkout-shell > .wp-block-woocommerce-checkout {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 1fr 380px;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 880px) {
	.bst-checkout-shell > .wp-block-woocommerce-checkout {
		grid-template-columns: 1fr;
	}
}

/* WC checkout fields card */
.bst-checkout-wc .wp-block-woocommerce-checkout-fields-block {
	background: transparent;
}

.bst-checkout-wc .wc-block-components-checkout-step {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--40);
}

.bst-checkout-wc .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 4px;
}

.bst-checkout-wc .wc-block-components-checkout-step__description {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Form fields */
.bst-checkout-wc .wc-block-components-text-input input,
.bst-checkout-wc .wc-block-components-select select,
.bst-checkout-wc input[type="text"],
.bst-checkout-wc input[type="email"],
.bst-checkout-wc input[type="tel"] {
	height: 44px;
	padding: 0 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color var(--wp--custom--transition--duration);
}

.bst-checkout-wc .wc-block-components-text-input input:focus,
.bst-checkout-wc input:focus {
	border-color: var(--wp--preset--color--accent-1);
}

.bst-checkout-wc label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 500;
}

/* Order summary right column */
.bst-checkout-wc .wp-block-woocommerce-checkout-totals-block {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--40);
	position: sticky;
	top: var(--wp--preset--spacing--30);
}

.bst-checkout-wc .wc-block-components-order-summary {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
}

.bst-checkout-wc .wc-block-components-order-summary-item__image img {
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: var(--wp--custom--border--radius--sm);
}

.bst-checkout-wc .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.bst-checkout-wc .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Place Order button — full width lime, gated on data-steam-verified */
.bst-checkout-wc .wc-block-components-checkout-place-order-button,
.bst-place-order .wc-block-components-checkout-place-order-button {
	width: 100%;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 16px 20px;
	border-radius: var(--wp--custom--border--radius--sm);
	border: 0;
	margin-top: var(--wp--preset--spacing--40);
	cursor: pointer;
	opacity: 0.45;
	pointer-events: none;
}

body[data-steam-verified="1"] .bst-checkout-wc .wc-block-components-checkout-place-order-button,
body[data-steam-verified="1"] .bst-place-order .wc-block-components-checkout-place-order-button {
	opacity: 1;
	pointer-events: auto;
}

/* Trust strip at the bottom of summary */
.bst-checkout-wc .wp-block-woocommerce-checkout-totals-block .wp-block-main-skins-footer-trust-strip {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--neutral);
}


/* ─────────────────────────────────────────────────────────
   v0.1.7 — forgotten design sections
   ───────────────────────────────────────────────────────── */

/* Product page · 5-thumb gallery grid (placeholder until per-listing renders) */
.ms-pp-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.ms-pp-thumb {
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--border--radius--sm);
	border: 1px solid var(--wp--preset--color--neutral);
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ms-pp-thumb--active {
	border-color: var(--wp--preset--color--accent-1);
	background: linear-gradient(135deg, var(--wp--preset--color--base-elevated), var(--wp--preset--color--base));
}
.ms-pp-thumb--empty {
	border-style: dashed;
	border-color: var(--wp--preset--color--neutral-strong, var(--wp--preset--color--neutral));
}
.ms-pp-thumb-label {
	position: absolute;
	bottom: 4px;
	right: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8px;
	color: var(--wp--preset--color--accent-1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}
.ms-pp-thumb-dash {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	color: var(--wp--preset--color--contrast-faint);
	line-height: 1;
}

/* Product page · collection aside (more from this collection) */
.ms-pp-desc-cols { align-items: flex-start; }
.ms-pp-desc-side { position: sticky; top: var(--wp--preset--spacing--30); }
.ms-pp-collection-aside {
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--40);
}
.ms-pp-collection-h {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-faint);
	margin: 0 0 12px 0;
}
.ms-pp-collection-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ms-pp-collection-item {
	display: flex;
	gap: 10px;
	padding: 8px;
	border-radius: var(--wp--custom--border--radius--sm);
	text-decoration: none;
	color: inherit;
	transition: background var(--wp--custom--transition--duration), transform var(--wp--custom--transition--duration);
}
.ms-pp-collection-item:hover {
	background: var(--wp--preset--color--base-raised, var(--wp--preset--color--base));
	transform: translateY(-1px);
}
.ms-pp-collection-preview {
	width: 60px;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--border--radius--sm);
	border: 1px solid var(--wp--preset--color--neutral);
	position: relative;
	overflow: hidden;
}
.ms-pp-collection-preview::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 40%, var(--ms-rarity-tint, rgba(255, 255, 255, 0.1)), transparent 60%);
	pointer-events: none;
	z-index: 1;
}
.ms-pp-collection-preview img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.ms-pp-collection-info { flex: 1; min-width: 0; }
.ms-pp-collection-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ms-pp-collection-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--accent-1);
	margin-top: 2px;
}

/* Cart · recommendations strip */
.ms-cart-recs {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--neutral);
}
.ms-cart-recs-h {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40) 0;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.01em;
}
.ms-cart-recs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

/* ─────────────────────────────────────────────────────────────
 * v0.1.8 — Homepage decorative sections
 * Ticker marquee + Rarity ladder + Armory
 * ───────────────────────────────────────────────────────────── */

/* Ticker marquee */
.bst-ticker {
	background:
		linear-gradient(90deg, transparent, var(--wp--preset--color--base-raised, var(--wp--preset--color--base-elevated)), transparent),
		var(--wp--preset--color--base-elevated);
	border-top: 1px solid var(--wp--preset--color--neutral);
	border-bottom: 1px solid var(--wp--preset--color--neutral);
	padding-block: 14px;
	position: relative;
	overflow: hidden;
}
.bst-ticker::before,
.bst-ticker::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}
.bst-ticker::before {
	left: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--base-elevated) 30%, transparent);
}
.bst-ticker::after {
	right: 0;
	background: linear-gradient(270deg, var(--wp--preset--color--base-elevated) 30%, transparent);
}
.bst-ticker-tag {
	position: absolute;
	top: 50%;
	left: var(--wp--preset--spacing--40, 24px);
	transform: translateY(-50%);
	z-index: 3;
	padding: 5px 11px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-shadow: 0 0 24px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18));
}
.bst-ticker-tag .blink {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	animation: bst-ticker-blink 1.05s steps(2, jump-none) infinite;
}
@keyframes bst-ticker-blink {
	50% { opacity: 0.25; }
}
.bst-ticker-track {
	display: flex;
	gap: 56px;
	align-items: center;
	animation: bst-marquee 60s linear infinite;
	width: max-content;
	padding-left: 220px;
}
.bst-ticker:hover .bst-ticker-track {
	animation-play-state: paused;
}
@keyframes bst-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.bst-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--contrast-muted);
	white-space: nowrap;
}
.bst-ticker-item .check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--success, #4ade80);
	color: var(--wp--preset--color--base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 900;
	flex-shrink: 0;
}
.bst-ticker-item .check.warn { background: var(--wp--preset--color--accent-1); }
.bst-ticker-item .check.cold { background: var(--wp--preset--color--contrast-faint); }
.bst-ticker-item strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.bst-ticker-item .price { color: var(--wp--preset--color--accent-1); font-weight: 600; }
.bst-ticker-item .ago { color: var(--wp--preset--color--contrast-faint); }
.bst-ticker-item .sep { color: var(--wp--preset--color--contrast-faint); opacity: 0.5; }

/* Rarity ladder */
.bst-rarity-ladder {
	display: flex;
	gap: 8px;
}
.bst-rarity-cell {
	flex: 1 1 0;
	min-width: 0;
	min-height: 240px;
	padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--30, 16px);
	border-radius: var(--wp--custom--border--radius--md, 8px);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	transition:
		transform 320ms var(--wp--custom--transition--easing, ease),
		border-color 200ms,
		box-shadow 320ms,
		flex-grow 320ms var(--wp--custom--transition--easing, ease);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.bst-rarity-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, var(--rarity-color) 240%);
	opacity: 0.2;
	transition: opacity 320ms;
}
.bst-rarity-cell::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--rarity-color);
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform 320ms var(--wp--custom--transition--easing, ease);
}
.bst-rarity-ladder:has(.bst-rarity-cell:hover) .bst-rarity-cell {
	flex-grow: 0.6;
}
.bst-rarity-cell:hover {
	transform: translateY(-10px) scale(1.02);
	border-color: var(--rarity-color);
	box-shadow: 0 18px 50px -10px var(--rarity-color), 0 0 0 1px var(--rarity-color);
	z-index: 2;
	flex-grow: 1.6 !important;
}
.bst-rarity-cell:hover::before { opacity: 0.45; }
.bst-rarity-cell:hover::after { transform: scaleX(1); }
.bst-rarity-cell .top {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-faint);
}
.bst-rarity-cell .symbol {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	font-weight: 700;
	color: var(--rarity-color);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-top: 8px;
	text-shadow: 0 0 24px var(--rarity-color);
}
.bst-rarity-cell .name {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-top: 12px;
}
.bst-rarity-cell .count {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--rarity-color);
	font-weight: 600;
	margin-top: 4px;
}
.bst-rarity-cell .expand {
	position: relative;
	z-index: 1;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.5;
	opacity: 0;
	max-height: 0;
	transition: opacity 240ms, max-height 320ms;
}
.bst-rarity-cell:hover .expand {
	opacity: 1;
	max-height: 80px;
}
@media (max-width: 900px) {
	.bst-rarity-ladder { flex-wrap: wrap; }
	.bst-rarity-cell { flex: 1 1 22%; min-height: 160px; }
}

/* Armory */
.bst-armory {
	background:
		radial-gradient(ellipse 60% 50% at 50% 30%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.12)), transparent 70%),
		var(--wp--preset--color--base);
	position: relative;
	overflow: hidden;
}
.bst-armory-head {
	text-align: center;
}
.bst-armory-head .bst-section-sub {
	margin-left: auto;
	margin-right: auto;
}
.bst-armory-stage {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}
@media (max-width: 980px) { .bst-armory-stage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bst-armory-stage { grid-template-columns: 1fr; } }
.bst-loadout {
	position: relative;
	background: var(--wp--preset--color--base-elevated);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: var(--wp--custom--border--radius--md, 8px);
	padding: var(--wp--preset--spacing--40, 24px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition:
		border-color var(--wp--custom--transition--duration, 200ms),
		transform var(--wp--custom--transition--duration, 200ms);
	overflow: hidden;
}
.bst-loadout:hover {
	border-color: var(--rarity-color, var(--wp--preset--color--accent-1));
	transform: translateY(-4px);
}
.bst-loadout-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--contrast-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bst-loadout-head .slot-badge {
	width: 26px;
	height: 26px;
	border-radius: 4px;
	background: var(--rarity-color, var(--wp--preset--color--accent-1));
	color: var(--wp--preset--color--base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}
.bst-loadout-frame {
	position: relative;
	flex: 1;
	min-height: 160px;
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(circle at 30% 40%, var(--rarity-color, transparent), transparent 60%),
		var(--wp--preset--color--base);
	border-radius: var(--wp--custom--border--radius--sm, 4px);
	overflow: hidden;
}
.bst-loadout-frame .corner {
	position: absolute;
	width: 14px;
	height: 14px;
	pointer-events: none;
	border: 2px solid var(--wp--preset--color--accent-1);
	z-index: 2;
	transition: width 200ms, height 200ms;
}
.bst-loadout:hover .bst-loadout-frame .corner { width: 18px; height: 18px; }
.bst-loadout-frame .corner.tl { top: 6px; left: 6px;     border-right: 0; border-bottom: 0; }
.bst-loadout-frame .corner.tr { top: 6px; right: 6px;    border-left: 0;  border-bottom: 0; }
.bst-loadout-frame .corner.bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0; }
.bst-loadout-frame .corner.br { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }
.bst-loadout-frame .scan {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-1), transparent);
	box-shadow: 0 0 12px var(--wp--preset--color--accent-1);
	z-index: 1;
	pointer-events: none;
	animation: bst-scanline 3s linear infinite;
}
@keyframes bst-scanline {
	0%   { top: 0;    opacity: 0; }
	10%  { opacity: 0.5; }
	90%  { opacity: 0.5; }
	100% { top: 100%; opacity: 0; }
}
.bst-loadout-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bst-loadout-meta .name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.01em;
}
.bst-loadout-meta .ext {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-faint);
}
.bst-loadout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--contrast-muted);
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--neutral);
}
.bst-loadout-row .price {
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.bst-ticker-track,
	.bst-ticker-tag .blink,
	.bst-loadout-frame .scan { animation: none; }
	.bst-loadout-frame .scan { opacity: 0; }
	.bst-rarity-cell { transition: none; }
	.bst-rarity-ladder:has(.bst-rarity-cell:hover) .bst-rarity-cell,
	.bst-rarity-cell:hover { transform: none; flex-grow: 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   v0.1.10 — Mobile responsive
   Breakpoints:
     ≥ 880px  desktop (default rules everywhere above)
     768–880  medium tablet (header collapses, sidebar bottom-sheet)
     600–768  small tablet (hero stacks, grid 2-col)
     < 600    phone (single col, simplified rows, stacked CTAs)
   ════════════════════════════════════════════════════════════════════════════ */

/* ──────────── Header / hamburger drawer (< 880px) ──────────── */

@media (max-width: 879.98px) {
	.bst-header-inner {
		flex-wrap: nowrap;
		gap: 12px;
	}
	.bst-nav-desktop,
	.bst-search-desktop,
	.bst-header-signin,
	.bst-header-signup { display: none; }

	.bst-logo-word {
		font-size: 14px;
	}

	.bst-header-actions { gap: 6px; }

	.bst-icon-btn {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
	}

	.bst-hamburger {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 44px;
		height: 44px;
		background: var(--wp--preset--color--base-elevated);
		border: 1px solid var(--wp--preset--color--neutral);
		border-radius: var(--wp--custom--border--radius--sm);
		cursor: pointer;
		padding: 0;
		transition: border-color 150ms;
	}
	.bst-hamburger:hover { border-color: var(--wp--preset--color--accent-1); }

	.bst-hamburger-bar {
		display: block;
		width: 18px;
		height: 2px;
		background: var(--wp--preset--color--contrast);
		border-radius: 1px;
		transition: transform 200ms, opacity 200ms;
	}

	.bst-nav-toggle {
		position: absolute;
		opacity: 0;
		pointer-events: none;
		width: 0;
		height: 0;
	}

	/* When toggle is checked, morph hamburger into X (toggle + label are adjacent siblings) */
	.bst-nav-toggle:checked + .bst-hamburger .bst-hamburger-bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.bst-nav-toggle:checked + .bst-hamburger .bst-hamburger-bar:nth-child(2) {
		opacity: 0;
	}
	.bst-nav-toggle:checked + .bst-hamburger .bst-hamburger-bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* The actual toggle input lives inside .bst-header-actions, so the drawer
	 * is its sibling via .bst-header. Use ~ to target.
	 * Header structure:
	 *   .bst-header > .bst-container.bst-header-inner > input#bst-nav-toggle
	 *               > .bst-drawer-backdrop
	 *               > .bst-mobile-drawer
	 * The input is *inside* .bst-header-actions; it can't be ~ sibling of
	 * .bst-mobile-drawer at root. We use :has() instead. */

	.bst-mobile-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -100%;
		width: min(320px, 88vw);
		height: 100vh;
		height: 100dvh;
		background: var(--wp--preset--color--base);
		border-left: 1px solid var(--wp--preset--color--neutral);
		box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
		z-index: 1001;
		padding: var(--wp--preset--spacing--40);
		gap: var(--wp--preset--spacing--40);
		overflow-y: auto;
		transition: right 280ms cubic-bezier(0.4, 0, 0.2, 1);
		visibility: hidden;
	}

	.bst-drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(2px);
		opacity: 0;
		pointer-events: none;
		z-index: 1000;
		transition: opacity 280ms;
	}

	.bst-header:has(.bst-nav-toggle:checked) .bst-mobile-drawer {
		right: 0;
		visibility: visible;
	}
	.bst-header:has(.bst-nav-toggle:checked) .bst-drawer-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.bst-mobile-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--neutral);
	}

	.bst-mobile-drawer-title {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		color: var(--wp--preset--color--contrast-faint);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	.bst-drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--preset--color--neutral);
		border-radius: var(--wp--custom--border--radius--sm);
		background: var(--wp--preset--color--base-elevated);
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	.bst-search-mobile {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
		background: var(--wp--preset--color--base-elevated);
		border: 1px solid var(--wp--preset--color--neutral);
		border-radius: var(--wp--custom--border--radius--md);
		min-height: 44px;
	}
	.bst-search-mobile input {
		flex: 1;
		background: transparent;
		border: 0;
		outline: 0;
		color: var(--wp--preset--color--contrast);
		font-size: 14px;
		min-width: 0;
	}
	.bst-search-mobile .bst-search-icon { color: var(--wp--preset--color--contrast-muted); flex-shrink: 0; }

	.bst-mobile-nav {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.bst-mobile-nav a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 14px;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 16px;
		font-weight: 500;
		border-radius: var(--wp--custom--border--radius--sm);
		transition: background 150ms, color 150ms;
	}
	.bst-mobile-nav a:hover,
	.bst-mobile-nav a:focus-visible {
		background: var(--wp--preset--color--base-elevated);
		color: var(--wp--preset--color--accent-1);
	}

	.bst-mobile-drawer-footer {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--30);
		border-top: 1px solid var(--wp--preset--color--neutral);
	}
	.bst-mobile-drawer-footer .bst-btn {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}
}

/* ──────────── Footer (< 700px) ──────────── */
@media (max-width: 700px) {
	.bst-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.bst-footer-brand {
		grid-column: 1 / -1;
	}
	.bst-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 500px) {
	.bst-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ──────────── Homepage hero (< 900px / < 480px) ──────────── */
@media (max-width: 900px) {
	.bst-hero-h1 {
		font-size: clamp(28px, 5vw, 56px);
	}
	.bst-hero-lead {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.bst-hero-cta {
		flex-direction: column;
		align-items: stretch;
	}
	.bst-hero-cta .bst-btn,
	.bst-hero-cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}
}

/* ──────────── Catalog — bottom-sheet filter (< 880px) ──────────── */

@media (max-width: 879.98px) {
	/* Hide the desktop sidebar as a grid column */
	.bst-shop-grid {
		flex-direction: column !important;
	}
	.bst-shop-side {
		flex-basis: auto !important;
		width: 100% !important;
		order: 2;
		position: relative;
	}
	.bst-shop-main { order: 1; }

	/* The "Show filters" button (sticky to bottom of viewport) */
	.bst-show-filters-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 50;
		min-height: 48px;
		min-width: 140px;
		padding: 0 18px;
		background: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		border-radius: var(--wp--custom--border--radius--pill);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--wp--preset--color--accent-1);
		cursor: pointer;
		transition: transform 150ms, box-shadow 150ms;
	}
	.bst-show-filters-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--wp--preset--color--accent-1);
	}

	/* The sheet itself — hidden by default, slides up from bottom when toggle checked */
	.bst-shop-side .bst-shop-side-inner {
		position: fixed;
		left: 0;
		right: 0;
		bottom: -100%;
		max-height: 85vh;
		max-height: 85dvh;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--neutral);
		border-radius: 16px 16px 0 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
		transition: bottom 300ms cubic-bezier(0.4, 0, 0.2, 1);
		visibility: hidden;
	}

	.bst-filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(2px);
		opacity: 0;
		pointer-events: none;
		z-index: 1000;
		transition: opacity 300ms;
	}

	/* Use :has() — toggle is inside .bst-shop-side */
	.bst-shop-side:has(.bst-filters-toggle:checked) .bst-shop-side-inner {
		bottom: 0;
		visibility: visible;
	}
	.bst-shop-side:has(.bst-filters-toggle:checked) .bst-filters-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.bst-mobile-filters-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border-bottom: 1px solid var(--wp--preset--color--neutral);
		flex-shrink: 0;
	}
	.bst-mobile-filters-title {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		color: var(--wp--preset--color--contrast-faint);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
	.bst-filters-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--preset--color--neutral);
		border-radius: var(--wp--custom--border--radius--sm);
		background: var(--wp--preset--color--base-elevated);
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	/* Make the catalog-filters form fill and scroll inside the sheet */
	.bst-shop-side .wp-block-main-skins-catalog-filters,
	.bst-shop-side-inner .ms-filters {
		position: static !important;
		max-height: none !important;
		flex: 1;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--40);
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	.bst-mobile-filters-apply {
		display: flex;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--neutral);
		flex-shrink: 0;
		background: var(--wp--preset--color--base);
	}
	.bst-mobile-filters-apply-btn {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}
}

/* Catalog product grid: tablet 2-col, phone 1-col */
@media (max-width: 879.98px) and (min-width: 600px) {
	.bst-shop-product-grid,
	.bst-shop-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 599.98px) {
	.bst-shop-product-grid,
	.bst-shop-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
	/* Reserve room so the floating "Show filters" pill doesn't overlap the last card */
	.bst-shop-main {
		padding-bottom: 80px;
	}
	.bst-shop-toolbar {
		padding: 10px 12px;
	}
	.bst-shop-hero-inner {
		gap: 8px;
	}
}

/* ──────────── Product page (< 900px / < 600px) ──────────── */

@media (max-width: 900px) {
	/* ms-pp-hero already stacks above (existing rule at L1241). Reinforce: gallery first, summary below. */
	.ms-pp-hero .ms-pp-gallery { order: 1; }
	.ms-pp-summary { order: 2; }

	.ms-pp-title.wp-block-post-title {
		font-size: clamp(24px, 5vw, 32px);
	}
}

@media (max-width: 599.98px) {
	/* Thumbnail strip becomes horizontal scroll */
	.ms-pp-gallery-thumbs,
	.ms-pp-thumbs {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.ms-pp-gallery-thumbs > *,
	.ms-pp-thumbs > * {
		flex: 0 0 22%;
		min-width: 80px;
		scroll-snap-align: start;
	}

	/* Sticker grid 4-col → 2-col */
	.wp-block-main-skins-sticker-display .ms-sticker-grid,
	.ms-sticker-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Available listings: simplified stacked row */
	.wp-block-main-skins-available-listings .ms-listing,
	.ms-listing {
		grid-template-columns: 64px 1fr !important;
		grid-template-areas:
			"img name"
			"img meta"
			"price price" !important;
		gap: 8px !important;
		padding: 12px !important;
	}
	.ms-listing .ms-listing-img,
	.ms-listing > :first-child { grid-area: img; }
	.ms-listing .ms-listing-name { grid-area: name; }
	.ms-listing .ms-listing-meta { grid-area: meta; }
	.ms-listing .ms-listing-price { grid-area: price; justify-self: end; }

	/* Buy box actions stack */
	.ms-pp-actions,
	.ms-pp-buybox-actions {
		flex-direction: column;
	}
	.ms-pp-actions .bst-btn,
	.ms-pp-buybox-actions .bst-btn,
	.ms-pp-actions .wp-block-button__link {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}
}

/* ──────────── Cart page (< 880px / < 600px) ──────────── */
/* The 880px stack rule already exists at L1301 — augment for phone */

@media (max-width: 599.98px) {
	.bst-cart-page,
	.bst-checkout-page {
		padding-inline: var(--wp--preset--spacing--40);
		padding-block: var(--wp--preset--spacing--40);
	}

	.bst-cart-title-h,
	.bst-checkout-title-h {
		font-size: 26px;
	}

	/* Cart line item: simplified — image stays on left, text wraps */
	.bst-cart-shell .wc-block-cart-items__row,
	.bst-cart-shell .wc-block-cart-item__row {
		grid-template-columns: 80px 1fr !important;
		padding: 12px !important;
		gap: 10px !important;
	}
	.bst-cart-shell .wc-block-cart-item__image,
	.bst-cart-shell .wc-block-cart-item__image img {
		max-width: 80px;
	}
	.bst-cart-shell .wc-block-cart-item__total {
		grid-column: 2;
		text-align: left;
	}
	.bst-cart-shell .wc-block-cart-item__remove {
		grid-column: 2;
		justify-self: start;
		min-width: 44px;
		min-height: 44px;
	}
}

/* ──────────── Checkout page (< 880px / < 600px) ──────────── */

@media (max-width: 879.98px) {
	/* Steps shrink to a tighter row */
	.bst-checkout-steps {
		flex-wrap: wrap;
		gap: 4px;
	}
	.bst-checkout-step {
		flex: 1 1 calc(50% - 4px);
		padding: 10px 12px;
		font-size: 10px;
		border-right: 1px solid var(--wp--preset--color--neutral);
		border-radius: var(--wp--custom--border--radius--sm);
	}
}

@media (max-width: 599.98px) {
	/* Step labels: hide text, show numbers only */
	.bst-checkout-step .label {
		display: none;
	}
	.bst-checkout-step {
		flex: 1;
		justify-content: center;
		padding: 8px;
		min-height: 44px;
	}
	.bst-checkout-step .num {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	/* Form fields full-width */
	.bst-checkout-wc .wc-block-components-text-input,
	.bst-checkout-wc input[type="text"],
	.bst-checkout-wc input[type="email"],
	.bst-checkout-wc input[type="tel"],
	.bst-checkout-wc select {
		width: 100% !important;
		min-height: 44px;
	}

	/* Order summary collapses via <details> if present, otherwise renders below */
	.bst-checkout-summary,
	.wp-block-woocommerce-checkout-totals-block {
		font-size: 13px;
	}
}

/* ──────────── Touch targets — global audit (≤ 880px) ──────────── */

@media (max-width: 879.98px) {
	.bst-btn,
	.wp-block-button__link {
		min-height: 44px;
	}
	.bst-btn-sm {
		min-height: 40px;
		padding-inline: 14px;
	}
	a.bst-icon-btn,
	button.bst-icon-btn {
		min-width: 44px;
		min-height: 44px;
	}
	input[type="checkbox"]:not(.bst-nav-toggle):not(.bst-filters-toggle),
	input[type="radio"] {
		min-width: 20px;
		min-height: 20px;
	}
	/* Catalog filter checkbox rows — bigger tap area */
	.ms-filters .ms-filter-row,
	.ms-filters label {
		min-height: 40px;
	}
}

/* ──────────── Typography safety at 320px ──────────── */

@media (max-width: 360px) {
	.bst-container,
	.wp-block-group.has-global-padding {
		padding-inline: 14px;
	}
	.bst-hero-h1 {
		font-size: clamp(24px, 7vw, 32px);
	}
	.bst-spotlight-h3 {
		font-size: 22px;
	}
	.bst-shop-hero-title {
		font-size: 22px;
	}
}

/* Prevent horizontal scroll from any single rogue element */
@media (max-width: 879.98px) {
	body,
	html {
		overflow-x: hidden;
	}
}