/*
Theme Name: Baldrick Store
Theme URI: https://store.baldrickboard.com
Description: Baldrick Store USA rebrand — cream/dark-purple neo-brutalist design system, built on Botiga.
Author: Baldrick Store USA
Template: botiga
Version: 1.0.0
Text Domain: baldrickstore
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--bs-cream: #f1eee6;
	--bs-ink: #1c0f24;
	--bs-panel: #150a1c;
	--bs-footer: #0c0710;
	--bs-purple: #8b3dfb;
	--bs-purple-light: #a06bff;
	--bs-mint: #b6f2c8;
	--bs-green: #1c9c52;
	--bs-ink-60: rgba(28, 15, 36, .6);
	--bs-ink-50: rgba(28, 15, 36, .5);
	--bs-ink-14: rgba(28, 15, 36, .14);
	--bs-white-70: rgba(255, 255, 255, .7);
	--bs-white-45: rgba(255, 255, 255, .45);
	--bs-white-10: rgba(255, 255, 255, .1);
	--bs-font-body: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
	--bs-font-mono: "JetBrains Mono", monospace;
	--bs-promo-gradient: linear-gradient(90deg, #5f18c4 0%, #8b3dfb 42%, #a06bff 72%, #b6f2c8 100%);
	--bs-card-shadow: 5px 5px 0 var(--bs-ink);
	--bs-card-shadow-hover: 8px 8px 0 var(--bs-purple);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background: var(--bs-cream);
	font-family: var(--bs-font-body);
	color: var(--bs-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bs-font-body);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--bs-ink);
}

a {
	color: var(--bs-purple);
}

a:hover {
	color: var(--bs-purple-light);
}

.bs-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bs-purple);
}

.bs-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--bs-purple);
	flex: none;
}

.bs-eyebrow.on-dark {
	color: var(--bs-purple-light);
}

/* Neo-brutalist card */
.bs-card {
	background: #fff;
	border: 2px solid var(--bs-ink);
	border-radius: 14px;
	box-shadow: var(--bs-card-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.bs-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--bs-card-shadow-hover);
}

.bs-badge-mint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bs-mint);
	color: var(--bs-ink);
	border-radius: 20px;
	padding: 6px 14px;
	font-family: var(--bs-font-mono);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bs-stock-dot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-green);
}

.bs-stock-dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bs-green);
	flex: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,
button:not(.bs-plain),
.wc-block-components-button,
a.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--bs-purple);
	color: #fff;
	border: 0;
	border-radius: 9px;
	font-family: var(--bs-font-body);
	font-weight: 700;
	padding: 14px 24px;
	transition: background .2s ease, transform .2s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--bs-purple-light);
	color: #fff;
}

.button.is-outline,
.woocommerce a.button.alt.is-outline {
	background: transparent;
	border: 2px solid var(--bs-ink);
	color: var(--bs-ink);
}

/* ==========================================================================
   Announcement bar + promo gradient bar
   ========================================================================== */
.bs-announcement-bar {
	background: var(--bs-purple);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 9px 20px;
	font-size: 12.5px;
	font-weight: 600;
	flex-wrap: wrap;
	text-align: center;
}

.bs-announcement-bar__eyebrow {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .72;
	margin-right: 8px;
}

.bs-announcement-bar__sep {
	opacity: .45;
}

.bs-announcement-bar__mono {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .1em;
}

.bs-promo-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	text-align: center;
	background: var(--bs-promo-gradient);
	background-size: 160% 100%;
	background-position: 0% 0%;
	padding: 26px 20px;
	border-top: 1px solid rgba(0, 0, 0, .18);
	border-bottom: 1px solid rgba(0, 0, 0, .18);
	overflow: hidden;
	transition: background-position .6s cubic-bezier(.2, .85, .3, 1), box-shadow .3s ease, transform .3s ease;
}

.bs-promo-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 45%, transparent 60%);
	transform: translateX(-120%);
	transition: transform .7s ease;
	pointer-events: none;
}

.bs-promo-bar:hover {
	background-position: 100% 0%;
	box-shadow: 0 14px 34px rgba(95, 24, 196, .35);
	transform: translateY(-1px);
}

.bs-promo-bar:hover::before {
	transform: translateX(120%);
}

.bs-promo-bar__tag {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 20px;
	padding: 6px 14px;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.bs-promo-bar:hover .bs-promo-bar__tag {
	background: #fff;
	color: var(--bs-ink);
	border-color: #fff;
}

.bs-promo-bar__text {
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}

/* ==========================================================================
   Header (Botiga header-footer builder markup)
   ========================================================================== */
.bhfb-header.bhfb-desktop,
.bhfb-header.bhfb-mobile {
	background: var(--bs-ink);
	position: sticky;
	top: 0;
	z-index: 500;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.bhfb-header .bhfb-main_header_row {
	padding: 6px 0;
}

.bhfb-header .bhfb-row.bhfb-cols-3 {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
}

.bhfb-header .bhfb-column-1 { order: 2; flex: none; }
.bhfb-header .bhfb-column-2 { order: 1; flex: none; }
.bhfb-header .bhfb-column-3 { order: 3; flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

/* Botiga's hamburger component still carries its own pre-flexbox
   margin-left:25px, which stacks on top of the gap above — on a narrow
   mobile viewport that redundant ~37px between the icon cluster and the
   hamburger is enough to push the button off the edge of the screen
   entirely. The gap already handles spacing consistently. */
.bhfb-header .bhfb-component-mobile_hamburger {
	margin-left: 0 !important;
}

/*
 * Botiga renders an entirely separate .bhfb-mobile header (not just a
 * responsive reflow of the desktop one), so trimming spacing here is
 * scoped to it and can't affect desktop. Even after removing the
 * hamburger's stray margin above, the logo + search icon + account/cart/
 * hamburger cluster still slightly overflowed a narrow phone screen —
 * tightening gaps and the logo lockup reclaims the rest.
 */
.bhfb-header.bhfb-mobile .bhfb-row.bhfb-cols-3 {
	gap: 8px;
}

.bhfb-header.bhfb-mobile .bhfb-column-3 {
	gap: 8px;
}

.bhfb-header.bhfb-mobile .site-branding .custom-logo {
	height: 24px;
}

.bhfb-header.bhfb-mobile .site-branding .site-title,
.bhfb-header.bhfb-mobile .site-branding .site-title a {
	font-size: 13px;
}

.bhfb-header .site-branding {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: 6px;
	align-items: center;
}

.bhfb-header .site-branding .custom-logo {
	grid-column: 1;
	grid-row: 1 / 3;
	height: 28px;
	width: auto;
	display: block;
}

.bhfb-header .site-branding .site-title {
	grid-column: 2;
	grid-row: 1;
	line-height: 1.05;
}

.bhfb-header .site-branding .site-description {
	grid-column: 2;
	grid-row: 2;
	line-height: 1.05;
}

.bhfb-header .site-branding .site-title,
.bhfb-header .site-branding .site-title a {
	color: #fff;
	font-weight: 800;
	font-size: 15.5px;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.bhfb-header .site-branding .site-description {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .42);
	text-transform: uppercase;
	white-space: nowrap;
}

.bhfb-header nav#site-navigation ul#primary-menu {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.5vw, 22px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bhfb-header nav#site-navigation .botiga-dropdown-link {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, .82);
	font-size: 13.5px;
	font-weight: 600;
	padding-bottom: 5px;
	transition: color .2s ease;
}

.bhfb-header nav#site-navigation .botiga-dropdown-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--bs-purple-light);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .28s cubic-bezier(.2, .85, .3, 1);
}

.bhfb-header nav#site-navigation .botiga-dropdown-link:hover {
	color: #fff;
}

.bhfb-header nav#site-navigation .botiga-dropdown-link:hover::after {
	transform: scaleX(1);
}

.bhfb-header nav#site-navigation .current-menu-item .botiga-dropdown-link {
	color: #fff;
}

.bhfb-header nav#site-navigation .current-menu-item .botiga-dropdown-link::after {
	background: var(--bs-mint);
	transform: scaleX(1);
}

/* Category dropdown — Botiga's default dropdown panel is a plain white
   box, which combined with our nav link color (white, for the dark
   header) made the item text invisible. Restyle as a small dark card
   consistent with the rest of the site instead of a plain hover
   underline, which doesn't read well in a stacked list. */
.bhfb-header nav#site-navigation .sub-menu {
	background: var(--bs-panel);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
	padding: 6px;
	min-width: 210px;
}

.bhfb-header nav#site-navigation .sub-menu .menu-item {
	background: transparent !important;
}

.bhfb-header nav#site-navigation .sub-menu .botiga-dropdown-link {
	display: block;
	color: rgba(255, 255, 255, .78);
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13.5px;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.bhfb-header nav#site-navigation .sub-menu .botiga-dropdown-link::after {
	content: none;
}

.bhfb-header nav#site-navigation .sub-menu .botiga-dropdown-link:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.bhfb-header .header-search {
	color: rgba(255, 255, 255, .55);
}

.bhfb-header .wc-account-link {
	color: rgba(255, 255, 255, .7);
	display: flex;
}

/*
 * Botiga's generated custom-styles.css sets an explicit fill:#212121
 * directly on these icon paths (not currentColor), so the color set above
 * on the parent link never actually reached the SVG — the icons stayed
 * near-black regardless. Force currentColor back so they follow the
 * parent's intended color.
 */
.bhfb-header .header-search svg,
.bhfb-header .header-search svg path,
.bhfb-header .wc-account-link svg,
.bhfb-header .wc-account-link svg path {
	fill: currentColor !important;
}

.bhfb-header .header-search:hover,
.bhfb-header .wc-account-link:hover {
	color: #fff;
}

.bhfb-header .site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--bs-purple);
	color: #fff;
	border-radius: 8px;
	padding: 9px 15px;
	font-size: 13px;
	font-weight: 700;
}

.bhfb-header .site-header-cart .cart-contents:hover {
	background: var(--bs-purple-light);
	color: #fff;
}

.bhfb-header .site-header-cart .cart-count {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.bhfb-header .site-header-cart .cart-count svg { width: 18px; height: 18px; }

.bhfb-header .site-header-cart .count-number {
	position: absolute;
	top: -8px;
	right: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	background: var(--bs-mint);
	border: 0 !important;
	border-radius: 50%;
	padding: 0 !important;
	font-family: var(--bs-font-mono);
	font-weight: 700;
	font-size: 9.5px;
	line-height: 1 !important;
	color: var(--bs-ink) !important;
}

.bhfb-header .widget_shopping_cart {
	background: var(--bs-panel);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Botiga hardcodes near-black text (var(--bt-color-heading-4, #212121)) on
   the mini-cart's item title link and qty/price line, which beats the
   ancestor color:#fff above on specificity — near-invisible on our dark
   panel. Override both explicitly. */
.bhfb-header .widget_shopping_cart .mini_cart_item a:nth-child(2) {
	color: #fff;
}

.bhfb-header .widget_shopping_cart .woocommerce-mini-cart-item .quantity {
	color: rgba(255, 255, 255, .7);
}

/*
 * Botiga's customizer engine writes hardcoded background-color rules for
 * these inner rows to /wp-content/uploads/botiga/custom-styles.css (a real
 * generated file, loaded before this stylesheet but targeting a more
 * specific inner element than the <header> tag above) — #fff for header
 * rows, #f5f5f5 for footer rows. Those repaint on top of the dark
 * background set above, so they need an explicit, !important override here.
 */
.bhfb-above_header_row,
.bhfb-main_header_row,
.bhfb-below_header_row {
	background-color: var(--bs-ink) !important;
}

.bhfb-mobile_offcanvas {
	background-color: var(--bs-panel) !important;
	color: #fff;
}

/* Botiga's own styles.css sets `.botiga-offcanvas-menu a:not(.button)` to
   var(--bt-color-menu-text, #212121) — two classes beats our one-class
   selector above, so the mobile nav links were near-invisible (dark grey
   on our dark panel). !important to make sure this sticks regardless of
   which of Botiga's selectors is currently winning. */
.bhfb-mobile_offcanvas a {
	color: #fff !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.bhfb-footer.bhfb-desktop,
.bhfb-footer.bhfb-mobile {
	background: var(--bs-footer);
	color: #fff;
}

.bhfb-above_footer_row,
.bhfb-main_footer_row,
.bhfb-below_footer_row {
	background-color: var(--bs-footer) !important;
}

.bs-footer-columns {
	background: var(--bs-footer);
	color: #fff;
	padding: 64px 28px 30px;
}

.bs-footer-columns__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 44px;
}

.bs-footer-brand p {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
	max-width: 300px;
}

.bs-footer-brand__lockup {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.bs-footer-brand__name {
	font-weight: 800;
	font-size: 15.5px;
}

.bs-footer-brand__name span {
	color: var(--bs-purple-light);
}

.bs-footer-brand__tag {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	margin-top: 2px;
}

/* "USA" in red/white/blue wherever the brand lockup includes it */
.bs-usa-flag {
	display: inline-flex;
	font-weight: 800;
}

.bs-usa-flag span:nth-child(1) {
	color: #ff3b3b !important;
}

.bs-usa-flag span:nth-child(2) {
	color: #fff !important;
	text-shadow: 0 0 1px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .3);
}

.bs-usa-flag span:nth-child(3) {
	color: #2979ff !important;
}

.bs-footer-col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bs-footer-col__label {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 4px;
}

.bs-footer-col a {
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
}

.bs-footer-col a:hover {
	color: var(--bs-mint);
}

.bhfb-footer .bhfb-below_footer_row {
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.bhfb-footer .botiga-credits {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	padding: 20px 0;
}

/* ==========================================================================
   Shop archive / category banner + product cards
   ========================================================================== */
/* Botiga's own archive title/breadcrumb header — superseded by .bs-archive-banner below */
body.woocommerce-shop .woocommerce-page-header,
body.tax-product_cat .woocommerce-page-header {
	display: none;
}

/* Botiga adds a fixed 100px top margin to the content wrapper whenever it
   follows a .woocommerce-page-header — a spacing hack tied to that header's
   own -60px negative margin trick. Since we hide the header outright above,
   the sibling selector still matches (display:none doesn't remove it from
   the DOM) and leaves a large blank gap with nothing to justify it. */
body.woocommerce-shop .woocommerce-page-header + .content-wrapper,
body.tax-product_cat .woocommerce-page-header + .content-wrapper {
	margin-top: 0;
}

/* Botiga also gives every .content-wrapper an unconditional 80px top
   margin as its generic "space below the header" convention. On any page
   without a .woocommerce-page-header (single product, cart, checkout,
   plain pages), that rule is the one that fires instead — and since our
   own promo bar already sits directly above .content-wrapper there, it's
   a second, redundant gap on top of that. */
.bs-promo-bar + .content-wrapper {
	margin-top: 0;
}

.woocommerce-breadcrumb {
	display: block;
	margin: 0 0 20px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(28, 15, 36, .45);
}

.woocommerce-breadcrumb a {
	color: var(--bs-purple);
}

.woocommerce-breadcrumb a:hover {
	color: var(--bs-purple-light);
}

.bs-archive-banner .woocommerce-breadcrumb {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .5);
}

.bs-archive-banner .woocommerce-breadcrumb a {
	color: var(--bs-purple-light);
}

.bs-archive-banner .woocommerce-breadcrumb a:hover {
	color: #fff;
}

.bs-archive-banner .woocommerce-breadcrumb .bs-breadcrumb-sep {
	color: rgba(255, 255, 255, .3);
	margin: 0 2px;
}

/* The result-count / sorting row has no top spacing of its own — it's
   normally preceded by Botiga's page header, which supplied the gap. Our
   banner replaces that header, so the row needs its own top margin now. */
.woocommerce-sorting-wrapper {
	margin-top: 28px;
}

.bs-archive-banner {
	background: var(--bs-ink);
	padding: 34px 28px 46px;
}

.bs-archive-banner__inner {
	max-width: 1240px;
	margin: 0 auto;
}

.bs-archive-banner h1 {
	margin: 0;
	color: #fff;
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}

.bs-archive-banner__desc {
	margin-top: 14px;
	color: rgba(255, 255, 255, .66);
	font-size: 15.5px;
	line-height: 1.55;
	max-width: 520px;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.woocommerce ul.products li.product {
	background: #fff;
	border: 2px solid var(--bs-ink);
	border-radius: 14px;
	box-shadow: var(--bs-card-shadow);
	padding: 18px;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce ul.products li.product:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--bs-card-shadow-hover);
}

.woocommerce ul.products li.product .loop-image-wrap {
	background: var(--bs-ink);
	border-radius: 10px;
	height: 180px;
	padding: 20px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
}

.woocommerce ul.products li.product .loop-image-wrap img {
	/* object-fit:contain already centers the picture within the box, so
	   the image just needs to be a plain block filling its container —
	   no flex centering needed. (Flex + this image's intrinsic
	   aspect-ratio was producing a wildly undersized layout box in
	   testing, so block sizing sidesteps that entirely.) */
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* The hover "Add to cart" overlay button that appears on the product image
   relies on Botiga's own absolute-centering (position:absolute + a
   transform based on its own width). Forcing position:static broke that
   positioning while the transform still applied, so it rendered off to
   one side and got clipped by the image tile's overflow:hidden. There's
   already a full-width "Add to cart" button in the card body below, so
   just remove the redundant/broken overlay entirely rather than fix its
   positioning. */
.woocommerce ul.products li.product .loop-image-wrap .loop-button-wrap {
	display: none;
}

.bs-loop-actions {
	display: flex;
	align-items: stretch;
	gap: 9px;
	margin-top: auto;
}

.woocommerce ul.products li.product .add_to_cart_button {
	flex: 1;
	text-align: center;
	margin: 0;
}

.bs-loop-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-green);
	margin-bottom: 10px;
}

.bs-loop-stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bs-green);
	flex: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.woocommerce ul.products li.product .price {
	font-size: 21px;
	font-weight: 800;
	white-space: nowrap;
}

.bs-loop-blurb {
	font-size: 14px;
	line-height: 1.55;
	color: var(--bs-ink-60);
	margin: 6px 0 14px;
}

.bs-loop-details {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--bs-ink);
	color: var(--bs-ink);
	border-radius: 8px;
	padding: 0 14px;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.bs-loop-details:hover {
	background: var(--bs-ink);
	color: #fff;
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product .product-gallery-summary {
	background: var(--bs-ink);
	padding: 30px 28px 74px;
	align-items: center;
}

.single-product .woocommerce-product-gallery {
	background: var(--bs-panel);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	padding: 30px;
}

.single-product .summary.entry-summary {
	color: #fff;
}

.single-product .summary .product_title {
	color: #fff;
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -.03em;
}

.single-product .summary p.price,
.single-product .summary p.price .woocommerce-Price-amount,
.single-product .summary p.price bdi,
.cart_totals .woocommerce-Price-amount,
#order_review .woocommerce-Price-amount {
	color: #fff;
}

.single-product .summary p.price {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.single-product .summary p.stock.in-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-mint);
	background: none;
	border: 0;
	padding: 0;
}

.single-product .summary p.stock.in-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bs-mint);
}

.single-product .quantity {
	display: flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 9px;
	overflow: hidden;
}

.single-product .quantity .qty {
	background: transparent;
	color: #fff;
	border: 0;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	text-align: center;
}

.single-product .botiga-quantity-minus,
.single-product .botiga-quantity-plus {
	color: #fff;
	padding: 14px 18px;
}

.single-product .single_add_to_cart_button {
	background: var(--bs-purple);
	border-radius: 9px;
	padding: 15px 26px;
	font-weight: 700;
}

/* Merchant plugin's trust-badge block ships with dark, light-background-
   only defaults (near-black title text, unconstrained icon sizing) —
   override for legibility on our dark summary panel. */
.single-product .merchant-payment-logos-title,
.single-product .merchant-payment-logos-title strong {
	color: rgba(255, 255, 255, .75) !important;
	font-size: 13px;
	font-weight: 600;
}

.single-product .merchant-payment-logos-images img {
	max-height: 24px !important;
}

.bs-facts-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .13);
	margin-top: 30px;
}

.bs-facts-strip__item {
	background: var(--bs-ink);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bs-facts-strip__k {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.bs-facts-strip__v {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.single-product .woocommerce-tabs {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 28px;
}

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	max-width: 1240px;
	margin: 0 auto;
	padding: 34px 28px 84px;
}

/*
 * Botiga's "cart-layout1" two-column cart (line items | totals sidebar) is
 * built on floats — .cart_totals is a *sibling* of .woocommerce-cart-form
 * inside the shared .woocommerce wrapper (the separate .cart-collaterals
 * element nearby is unrelated/empty on this layout), floated right with a
 * fixed max-width. In isolation that would work, but combined with our own
 * display:block override on table.shop_table earlier in this file, the
 * form's height collapses in a way that breaks the float's ability to
 * clear correctly, and totals drop below instead of sitting beside it.
 * Flexbox on the actual .woocommerce parent replaces that outright.
 */
.cart-layout1 .woocommerce {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}

.cart-layout1 .woocommerce .woocommerce-notices-wrapper:empty {
	display: none;
}

.cart-layout1 .woocommerce > .woocommerce-cart-form {
	flex: 1 1 auto;
	min-width: 0;
}

.cart-layout1 .woocommerce > .cart_totals {
	flex: 0 0 400px;
	float: none;
	width: 100%;
	max-width: 400px;
	margin-top: 0;
}

@media (max-width: 900px) {
	.cart-layout1 .woocommerce > .cart_totals {
		max-width: none;
	}
}

/*
 * A <tr> with display:grid inside a <table> that's still display:table is
 * an invalid mix the browser can't lay out sanely — cells scattered
 * instead of forming the intended 2-row grid. Once one row goes grid, the
 * whole table/tbody has to stop behaving like a table too.
 */
table.shop_table,
table.shop_table tbody {
	display: block;
}

table.shop_table {
	border: 0;
	border-collapse: collapse;
}

table.shop_table thead {
	display: none;
}

table.shop_table tr.cart_item,
table.shop_table tr.woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--bs-ink-14);
}

table.shop_table tr.cart_item td,
table.shop_table tr.woocommerce-cart-form__cart-item td {
	border: 0;
	padding: 0;
}

table.shop_table td.product-thumbnail {
	grid-column: 1;
	grid-row: 1 / 3;
	/* Botiga's own .woocommerce-cart .product-thumbnail sets a fixed
	   width/max-width:100px — wider than this column's 76px grid track, so
	   it spilled out over the quantity stepper next to it. */
	width: 100% !important;
	max-width: none !important;
	background: var(--bs-ink);
	border-radius: 9px;
	padding: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

table.shop_table td.product-thumbnail a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

table.shop_table td.product-thumbnail img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 66px;
	object-fit: contain;
	border-radius: 6px;
}

table.shop_table td.product-name {
	grid-column: 2;
	grid-row: 1;
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Redundant with the subtotal column at qty 1, and wrong once qty > 1 (it
   shows the unit price, not the line total) — drop it rather than confuse
   the two. */
table.shop_table td.product-price {
	display: none;
}

table.shop_table td.product-quantity {
	grid-column: 2;
	grid-row: 2;
	width: auto !important;
}

table.shop_table td.product-remove {
	position: absolute;
	/* Vertically centered to match .product-subtotal below, which centers
	   via grid-row:1/3 + align-items:center on the row — a fixed top
	   offset here drifted apart from it whenever the row got taller than
	   its shortest-case height. */
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}

table.shop_table td.product-subtotal {
	grid-column: 3;
	grid-row: 1 / 3;
	/* Botiga's own woocommerce.css still gives this column `width: 15%`
	   (a leftover table-percentage-width rule) at min-width:992px — inside
	   an actual <table> that's harmless, but once the row is a grid it
	   fights the column's auto-sizing and collapses the price to ~26px. */
	width: auto !important;
	padding-right: 26px !important;
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
	text-align: right;
}

/* Below ~480px the fixed thumbnail column + auto-sized price column leave
   so little room for the flexible name/qty column that the product title
   wraps one word (sometimes one syllable) per line. Collapse to a 2-column
   grid instead — thumbnail on the left, everything else stacked in a
   single full-width column on the right. */
@media (max-width: 480px) {
	table.shop_table tr.cart_item,
	table.shop_table tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	table.shop_table td.product-thumbnail {
		grid-row: 1 / 4;
	}

	/* Leaves room for the now-fixed-position .product-remove "×" in the
	   corner, which would otherwise sit on top of long product names.
	   Botiga's own .woocommerce-cart td.product-name sets padding-right:15px
	   with !important, so this needs !important too to actually win. */
	table.shop_table td.product-name {
		padding-right: 32px !important;
	}

	table.shop_table td.product-quantity {
		grid-row: 2;
	}

	table.shop_table td.product-subtotal {
		grid-column: 2;
		grid-row: 3;
		padding-right: 0 !important;
		margin-top: 8px;
		text-align: left;
	}

	table.shop_table td.product-remove {
		top: 16px;
		transform: none;
	}
}

table.shop_table .quantity {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--bs-ink);
	border-radius: 7px;
	overflow: hidden;
	width: fit-content;
	margin-top: 8px;
}

table.shop_table .quantity a.botiga-quantity-minus,
table.shop_table .quantity a.botiga-quantity-plus {
	padding: 6px 11px;
	color: var(--bs-ink);
	font-weight: 700;
	text-decoration: none;
}

/* Botiga's own `.quantity .qty { width:100% !important }` fights our
   fixed-width input inside a width:fit-content container — a circular
   sizing scenario the browser resolves by collapsing the input down to a
   tiny UA-default width instead. Needs !important to actually win, plus a
   flex-shrink guard so it can't be squeezed again. Also disables the
   native number-input spin buttons, which were rendering redundantly
   alongside our own custom -/+ buttons and squeezing the visible digit
   into an even smaller area. */
table.shop_table .quantity input.qty {
	width: 36px !important;
	flex: 0 0 36px;
	border: 0;
	border-left: 1px solid var(--bs-ink-14);
	border-right: 1px solid var(--bs-ink-14);
	text-align: center;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 13px;
	padding: 6px 0;
	appearance: textfield;
	-moz-appearance: textfield;
}

table.shop_table .quantity input.qty::-webkit-outer-spin-button,
table.shop_table .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Botiga's own woocommerce.min.css sets `.woocommerce-cart .cart_totals`
 * background (2 classes) — more specific than a bare `.cart_totals`, so it
 * repaints over the dark background below unless matched/beaten here.
 */
.cart_totals,
#order_review,
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--bs-ink) !important;
	border-radius: 14px;
	padding: 26px;
	color: #fff;
}

.cart_totals h2,
#order_review h2,
#order_review h3 {
	color: #fff;
}

.cart_totals table.shop_table,
#order_review table.shop_table {
	color: #fff;
}

.cart_totals table.shop_table tr,
#order_review table.shop_table tr {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.cart_totals .order-total,
#order_review .order-total {
	font-size: 16px;
	font-weight: 800;
}

.checkout .woocommerce-billing-fields,
.checkout .woocommerce-shipping-fields,
#payment.woocommerce-checkout-payment {
	background: #fff;
	border: 2px solid var(--bs-ink);
	border-radius: 14px;
	box-shadow: var(--bs-card-shadow);
	padding: 28px;
	margin-bottom: 20px;
}

.checkout .form-row label {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bs-ink-55, var(--bs-ink-60));
}

.checkout .form-row input.input-text,
.checkout .form-row select {
	border: 1.5px solid var(--bs-ink-14);
	border-color: rgba(28, 15, 36, .28);
	border-radius: 8px;
	padding: 12px 13px;
	background: #faf9f6;
}

.checkout .form-row input.input-text:focus,
.checkout .form-row select:focus {
	border-color: var(--bs-purple);
	background: #fff;
	outline: none;
}

#payment .place-order .button {
	width: 100%;
}

/* ==========================================================================
   Offers / Sale page
   ========================================================================== */
.bs-offers-hero {
	background: var(--bs-ink);
	background-image: radial-gradient(120% 90% at 78% 0%, rgba(139, 61, 251, .34) 0%, rgba(28, 15, 36, 0) 62%);
	padding: 80px 28px;
	color: #fff;
}

.bs-offers-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 52px;
	align-items: center;
}

.bs-offers-hero h1 {
	margin: 22px 0 0;
	color: #fff;
	font-size: 58px;
	line-height: .98;
	font-weight: 800;
	letter-spacing: -.036em;
}

.bs-offers-hero p {
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
	max-width: 560px;
}

.bs-offers-hero__badge {
	display: inline-block;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 20px;
	padding: 7px 15px;
}

.bs-offers-hero__cta {
	display: flex;
	gap: 12px;
	margin-top: 34px;
	flex-wrap: wrap;
}

.bs-offers-hero__panel {
	background: rgba(0, 0, 0, .26);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 16px;
	padding: 26px;
}

.bs-offers-hero__panel-label {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.bs-offers-hero__terms {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 16px;
}

.bs-offers-hero__terms span {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
}

.bs-offers-hero__terms span::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bs-mint);
	flex: none;
}

.bs-bundles {
	background: var(--bs-cream);
	padding: 84px 28px;
}

.bs-bundles__inner {
	max-width: 1240px;
	margin: 0 auto;
}

.bs-bundles__note {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	background: rgba(139, 61, 251, .07);
	border: 1.5px solid rgba(139, 61, 251, .25);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bs-ink);
}

.bs-bundles__note strong {
	color: var(--bs-purple);
}

.bs-bundles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.bs-bundle-card {
	padding: 22px;
	display: flex;
	flex-direction: column;
}

.bs-bundle-card__images {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	margin: 16px 0 18px;
}

.bs-bundle-card__images div {
	background: var(--bs-ink);
	border-radius: 9px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}

.bs-bundle-card__images img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.bs-bundle-card h3 {
	margin: 0;
	font-size: 20px;
}

.bs-bundle-card p {
	margin: 10px 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bs-ink-60);
}

.bs-bundle-card__price {
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin-top: auto;
}

.bs-bundle-card__price strong {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.bs-bundle-card__price span {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bs-green);
}

/* Contact page — "Hardware issue?" / "Anything else?" routing cards */
.bs-contact-card {
	padding: 26px;
}

.bs-contact-card .bs-eyebrow {
	margin-bottom: 14px;
}

.bs-contact-card h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.bs-contact-card p {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bs-ink-60);
}

.bs-contact-card .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	/* Botiga's own a.button:not(.has-background) rule is slightly more
	   specific than our global .button rule (the :not() adds a class of
	   specificity), so a raw content-area link like this falls back to
	   Botiga's dark #212121 default instead of our purple/outline pair. */
	background: var(--bs-purple) !important;
	color: #fff !important;
}

.bs-contact-card .button.is-outline {
	background: transparent !important;
	color: var(--bs-ink) !important;
	border: 2px solid var(--bs-ink) !important;
}

.bs-contact-card .button.is-outline:hover {
	background: var(--bs-ink) !important;
	color: #fff !important;
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.bs-section {
	padding: 84px 28px;
}

.bs-section--dark {
	background: var(--bs-ink);
}

.bs-section__inner {
	max-width: 1240px;
	margin: 0 auto;
}

.bs-hero {
	position: relative;
	background: var(--bs-ink);
	background-image: radial-gradient(120% 90% at 78% 0%, rgba(139, 61, 251, .34) 0%, rgba(28, 15, 36, 0) 62%);
	padding: 80px 28px;
	text-align: center;
	color: #fff;
	overflow: hidden;
	min-height: 496px;
	display: flex;
	align-items: center;
}

.bs-cloud {
	position: absolute;
	inset: 0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	gap: 3px 10px;
	padding: 18px 24px;
	user-select: none;
}

.bs-cloud-word {
	cursor: default;
	transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
	line-height: 1;
	display: inline-block;
}

.bs-cloud-word:hover {
	color: var(--bs-mint) !important;
	text-shadow: 0 0 22px rgba(182, 242, 200, .75);
	transform: scale(1.14);
}

.bs-hero__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(58% 52% at 50% 50%, rgba(20, 11, 27, .93) 0%, rgba(20, 11, 27, .82) 45%, rgba(20, 11, 27, .1) 100%);
}

.bs-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Full-width text-align:center block still covers the whole rectangle
	   even where there's no visible text — let hover/clicks pass through to
	   the word cloud beneath, except on the actual interactive elements. */
	pointer-events: none;
}

.bs-hero__content a,
.bs-hero__content button {
	pointer-events: auto;
}

.bs-pixel-strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 3px;
	align-items: flex-end;
	pointer-events: none;
}

.bs-pixel-strip span {
	flex: 1;
	height: 10px;
	border-radius: 2px;
	animation: bbchase 3.4s linear infinite;
}

/* Standalone band version — used below the offer bar, transparent so it
   just floats on whatever section background sits behind it. */
.bs-pixel-strip-band {
	background: transparent;
	padding: 0 0 14px;
}

.bs-pixel-strip-band .bs-pixel-strip {
	position: static;
	padding: 0 3px;
}

@keyframes bbchase {
	0%, 100% { opacity: .1; }
	8% { opacity: 1; }
	22% { opacity: .1; }
}

.bs-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bs-mint);
}

.bs-hero__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bs-mint);
}

.bs-hero h1 {
	margin: 0 auto;
	max-width: 900px;
	color: #fff;
	font-size: clamp(36px, 6vw, 62px);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -.036em;
	text-wrap: balance;
}

.bs-hero p {
	margin: 22px auto 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .8);
	font-size: 22px;
	line-height: 1.4;
	font-weight: 600;
}

.bs-hero__cta {
	display: flex;
	gap: 12px;
	margin-top: 36px;
	flex-wrap: wrap;
	justify-content: center;
}

.bs-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 900px) {
	.bs-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bs-cat-card {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 184px;
	color: var(--bs-ink);
}

.bs-cat-card__icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s cubic-bezier(.2, .85, .3, 1), background-color .3s ease;
}

.bs-cat-card__icon svg {
	width: 22px;
	height: 22px;
}

.bs-cat-card__icon--pixels,
.bs-cat-card__icon--relays {
	background: rgba(139, 61, 251, .12);
	color: var(--bs-purple);
}

.bs-cat-card__icon--dmx,
.bs-cat-card__icon--inputs {
	background: rgba(28, 156, 82, .12);
	color: var(--bs-green);
}

.bs-cat-card:hover .bs-cat-card__icon {
	transform: scale(1.12) rotate(-6deg);
}

.bs-cat-card:hover .bs-cat-card__icon--pixels,
.bs-cat-card:hover .bs-cat-card__icon--relays {
	background: var(--bs-purple);
	color: #fff;
}

.bs-cat-card:hover .bs-cat-card__icon--dmx,
.bs-cat-card:hover .bs-cat-card__icon--inputs {
	background: var(--bs-green);
	color: #fff;
}

.bs-cat-card__count {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bs-purple);
}

.bs-cat-card__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-top: auto;
	color: var(--bs-ink);
}

.bs-cat-card__desc {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bs-ink-60);
}

.bs-cat-card__link {
	font-size: 13px;
	font-weight: 700;
	color: var(--bs-purple);
}

.bs-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.bs-feature { grid-template-columns: 1fr; }
}

.bs-feature__media {
	position: relative;
	background: var(--bs-panel);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	padding: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
}

.bs-feature__media img { width: 100%; max-height: 280px; object-fit: contain; }

.bs-feature h2 {
	margin: 0;
	color: #fff;
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.02;
}

.bs-feature__spec {
	display: block;
	margin-top: 10px;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
}

.bs-feature p.bs-feature__blurb {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .68);
	max-width: 470px;
}

.bs-feature__price {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-top: 24px;
}

.bs-feature__price strong {
	color: #fff;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.bs-feature__cta {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.bs-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 900px) {
	.bs-testimonial-grid { grid-template-columns: 1fr; }
}

.bs-testimonial {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bs-testimonial__stars {
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--bs-purple);
}

.bs-testimonial p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -.01em;
}

.bs-testimonial__who {
	margin-top: auto;
	font-family: var(--bs-font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bs-ink-50);
}

.bs-support-band {
	background: var(--bs-purple);
	padding: 74px 28px;
	color: #fff;
}

.bs-support-band__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 48px;
	align-items: center;
}

@media (max-width: 900px) {
	.bs-support-band__inner { grid-template-columns: 1fr; }
}

.bs-support-band h2 {
	margin: 14px 0 0;
	color: #fff;
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.04;
}

.bs-support-band__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bs-support-band__links a {
	background: rgba(0, 0, 0, .2);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bs-support-band__links a:first-child {
	background: #fff;
	color: var(--bs-ink);
	border: 0;
	font-weight: 800;
}

/* ==========================================================================
   Top sellers (dynamic WooCommerce product-collection block)
   ========================================================================== */
.wp-block-woocommerce-product-collection .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 20px !important;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.wp-block-woocommerce-product-collection li.wc-block-product {
	background: #fff;
	border: 2px solid var(--bs-ink);
	border-radius: 14px;
	box-shadow: var(--bs-card-shadow);
	padding: 16px;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
	/* WooCommerce's own block CSS sets a percentage width on the <li> for
	   its flex-based column layout — that still resolves against the grid
	   cell size here and shrinks it, so force it to fill the cell. */
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}

.wp-block-woocommerce-product-collection li.wc-block-product:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--bs-card-shadow-hover);
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image {
	background: var(--bs-ink);
	border-radius: 10px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	margin-bottom: 14px;
	overflow: hidden;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

/* WooCommerce's loading-skeleton placeholder div renders after the <img> in
   DOM order and covers it completely once loaded — it's meant to be hidden
   again once the image is ready, but nothing here triggers that toggle. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image__inner-container {
	display: none !important;
}

.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-size: 15.5px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	line-height: 1.3;
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a {
	color: var(--bs-ink);
}

.wp-block-woocommerce-product-collection .wc-block-components-product-price {
	font-size: 19px;
	font-weight: 800;
	color: var(--bs-ink);
	margin: 0 0 14px;
	justify-content: center;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button {
	margin-top: auto;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button__button {
	width: 100%;
	background: var(--bs-purple) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-family: var(--bs-font-body) !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button__button:hover {
	background: var(--bs-purple-light) !important;
	color: #fff !important;
}