/*
Theme Name:   bkecomm
Theme URI:    https://bkecomm.local
Description:  bkecomm marketplace — child theme of Storefront. Tool community marketplace.
Author:       bkecomm
Template:     storefront
Version:      1.0.0
Text Domain:  bkecomm
*/

/* =====================================================================
   bkecomm Theme
   Built on Storefront (WooCommerce official base theme)

   Structure:
     1.  CSS Custom Properties (design tokens)
     2.  Base / Reset
     3.  Container
     4.  Utility Bar
     5.  Main Bar (logo / search / cart)
     6.  Navigation + Mega Menu
     7.  Mobile Navigation
     8.  Product Cards (shop archive)
     9.  Single Product
    10.  Condition + Auth Badges
    11.  Escrow Status Bar
    12.  My Account / Orders
    13.  Vendor Profile
    14.  Homepage — Hero
    15.  Homepage — Popular Products
    16.  Homepage — Promo Section
    17.  Footer
    18.  Cart / Checkout Notices
    19.  Product Gallery (single product thumbnails)
    20.  My Account Dashboard Cards
    21.  Responsive
   ===================================================================== */

/* ── 1. Design Tokens ───────────────────────────────────────────────── */
:root {
	/* Brand */
	--bk-primary:       #151D2B;   /* dark navy — links, nav, buttons   */
	--bk-primary-dark:  #0a0f18;   /* navy hover                         */
	--bk-accent:        #FFD602;   /* yellow — CTAs, highlights          */
	--bk-accent-hover:  pink;   /* darker yellow                      */
	--bk-utility:       #A7333F;   /* maroon utility bar                 */
	--bk-charcoal:      #1e2227;   /* dark surfaces (kept for components)*/

	/* Header heights — update these if you resize the bars */
	--bk-utility-height:  0px;
	--bk-mainbar-height:  80px;
	--bk-header-height:   calc(var(--bk-utility-height) + var(--bk-mainbar-height));

	/* Surfaces */
	--bk-white:         #ffffff;
	--bk-body-bg:       #ffffff;   /* white body                         */
	--bk-card-bg:       #ffffff;
	--bk-cream:         #f5f5f5;

	/* Borders + text */
	--bk-border:        #e5e7eb;
	--bk-text:          #151D2B;
	--bk-text-muted:    #6b7280;

	/* Status */
	--bk-success:       #2d7a4f;
	--bk-success-bg:    #d1e7dd;
	--bk-warning:       #856404;
	--bk-warning-bg:    #fff3cd;
	--bk-danger:        #842029;
	--bk-danger-bg:     #f8d7da;
	--bk-info:          #084298;
	--bk-info-bg:       #cfe2ff;

	/* Badge: condition */
	--bk-badge-new-bg:      #d1e7dd;
	--bk-badge-new-text:    #0f5132;
	--bk-badge-used-bg:     #fff3cd;
	--bk-badge-used-text:   #664d03;
	--bk-badge-refurb-bg:   #cfe2ff;
	--bk-badge-refurb-text: #084298;
	--bk-badge-vintage-bg:  #f3e9d2;
	--bk-badge-vintage-text:#5c4a1e;

	/* Notice */
	--bk-notice-bg:     #eaf3fb;
	--bk-notice-border: #b8d8f0;

	/* Radii */
	--bk-radius:        6px;
	--bk-radius-lg:     12px;

	/* Shadows */
	--bk-shadow:        0 2px 10px rgba(0,0,0,.07);
	--bk-shadow-hover:  0 8px 24px rgba(0,0,0,.13);
	--bk-transition:    .2s ease;

	/* Typography — fallback stacks match metrics to minimise layout shift */
	--bk-font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bk-font-heading:  'Poppins', 'Arial Black', sans-serif;
}


/* ── 2. Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overscroll-behavior: none; }
*:focus { outline: none; }

body {
	color: var(--bk-text);
	background: var(--bk-body-bg);
	font-family: var(--bk-font-body);
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bk-font-heading);
}

a {
	color: var(--bk-primary);
}
a:hover {
	color: var(--bk-accent-hover);
}

/* Storefront wrapper overrides — centered to match homepage */
.col-full,
.site-content .col-full,
#content .col-full {
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	box-sizing: border-box;
}

/* Ensure the outer content area doesn't constrain centering */
#content.site-content {
	width: 100%;
}

/* ── 3. Container ───────────────────────────────────────────────────── */
.container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}

/* ── 4. Fixed Site Header ───────────────────────────────────────────── */
#masthead.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000; /* above mobile overlay (1499) and drawer (1500) */
	/* Thin shadow so it lifts off the hero cleanly */
	padding-top: 0!important;
	border-bottom: none!important;
	padding-bottom: 0!important;
	margin-bottom: 0!important;
}
/* Non-homepage: push #content below the fixed header */
body:not(.home) #content.site-content {
	padding-top: var(--bk-header-height);
}

/* ── 4a. Utility Bar ────────────────────────────────────────────────── */
.utility-bar {
	background: var(--bk-utility);
	color: #fff;
	font-size: 13px;
	height: var(--bk-utility-height);
	display: flex;
	align-items: center;
	display: none;
}

.utility-bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.utility-left {
	font-weight: 500;
}

.utility-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.social-icon {
	width: 25px;
	height: 25px;
	display: block;
	opacity: .85;
	transition: opacity var(--bk-transition);
}
.social-icon:hover { opacity: 1; }

/* ── 5. Main Bar ────────────────────────────────────────────────────── */
.main-bar {
	background: var(--bk-white);
	border-bottom: 1px solid #ccc;
	height: var(--bk-mainbar-height);
	display: flex;
	align-items: center;
}

/* 3-column grid: logo | nav (centered) | icons */
.main-bar__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
}

/* Logo — left-aligned within its column */
.main-left {
	justify-self: start;
}

.logo-icon {
	width: 180px;
	height: auto;
	display: block;
}

/* Cart icon */
.cart-icon {
	position: relative;
	flex-shrink: 0;
}
.cart-icon a {
	display: block;
	line-height: 0;
	background: #A7333F;
	border-radius: 6px;
	transition: background var(--bk-transition);
}
.cart-icon a:hover,
.cart-icon.is-active a {
	background: #151D2B;
}
.cart-icon img {
	width: 36px;
	height: 36px;
	display: block;
}

.cart-badge {
	position: absolute;
	top: -7px;
	right: -7px;
	background: var(--bk-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ── 5a. Header Icon Group ──────────────────────────────────────────── */
.header-icons {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Icon button base — background is CSS-controlled; SVGs have no built-in bg */
.bk-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #A7333F;
	border: none;
	cursor: pointer;
	padding: 0;
	border-radius: 6px;
	text-decoration: none;
	position: relative;
	transition: background var(--bk-transition);
}
.bk-icon-btn:hover,
.bk-icon-btn.is-active {
	background: #151D2B;
}

.bk-icon-img {
	width: 36px;
	height: 36px;
	display: block;
}

/* ── 6. Navigation + Mega Menu ──────────────────────────────────────── */
.main-nav-container { display: flex; align-items: center; }

nav.main-nav {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 14px;
	font-weight: 700;
	padding-top: 3px; /* optical alignment with main bar */
}

nav.main-nav a {
	color: var(--bk-primary);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 3px solid transparent;
	transition: border-color var(--bk-transition);
}
nav.main-nav a:hover,
nav.main-nav a.is-active,
nav.main-nav .menu-item.is-active > a {
	color: var(--bk-primary);
	border-bottom-color: none;
}

/* Mega menu active states */
.mega-column.is-active > strong > a,
.mega-column ul li a.is-active {
	color: var(--bk-primary);
	border-bottom: 2px solid var(--bk-accent);
}

.divider { display: none; }

/* Mega menu trigger */
.menu-item.menu-shop {
	position: relative;
	display: flex;
	align-items: center;
}

/* Mega menu panel — positioned relative to .menu-item.menu-shop */
.mega-menu {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	/* Center under shop item, clamped to viewport so it never overflows */
	left: 50%;
	transform: translateX(-50%);
	width: min(900px, calc(100vw - 48px));
	background: var(--bk-white);
	border: 1px solid var(--bk-border);
	border-radius: 0 0 var(--bk-radius-lg) var(--bk-radius-lg);
	box-shadow: var(--bk-shadow-hover);
	padding: 24px;
	z-index: 9999;
	flex-wrap: wrap;
	gap: 24px;
}

/* Invisible bridge so hover doesn't break when crossing the 12px gap */
.mega-menu::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* Chevron + mobile cat list only exist in mobile context — hidden on desktop */
.bk-shop-chevron { display: none; }
.bk-mobile-cat-list { display: none; }

.menu-item.menu-shop:hover .mega-menu {
	display: flex;
}

.mega-column {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 140px;
	flex: 1;
}

.mega-column strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--bk-text);
	margin-bottom: 4px;
	display: block;
}
.mega-column strong a {
	color: var(--bk-text);
	text-decoration: none;
}
.mega-column strong a:hover { color: var(--bk-primary); }

.mega-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mega-column ul li a {
	font-size: 13px;
	color: var(--bk-primary);
	font-weight: 400;
	text-decoration: none;
}
.mega-column ul li a:hover {
	
}

/* ── 7. Mobile Navigation ───────────────────────────────────────────── */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 18px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.hamburger span {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--bk-text);
	border-radius: 2px;
	transition: transform var(--bk-transition), opacity var(--bk-transition);
}

/* ── 7. Mobile Navigation ───────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Show hamburger */
	.hamburger { display: flex; }

	/* Switch header grid to flex so logo stays left, icons snap right */
	.main-bar { height: auto; padding: 12px 0; }
	.main-bar__grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	/* header-icons must paint above the nav drawer (z-index 1500) within
	   the header stacking context — otherwise the X gets buried */
	.header-icons {
		position: relative;
		z-index: 1600;
	}

	/* All three icons visible on mobile — slightly smaller */
	.bk-icon-btn--search,
	.bk-icon-btn--account { display: inline-flex; }
	.bk-icon-img { width: 30px; height: 30px; }
	.cart-icon img { width: 30px; height: 30px; }

	/* Hamburger → X animation when nav is open */
	.hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
	.hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	/* Overlay — full height; header z-index 2000 sits on top so no gap */
	.bk-mobile-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 1499;
	}
	body.nav-open .bk-mobile-overlay { display: block; }

	/* Nav drawer — full height; header visually covers the top portion */
	.main-nav-container {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 300px;
		max-width: 90vw;
		background: var(--bk-white);
		z-index: 1500;
		flex-direction: column;
		padding: 0;
		overflow-y: auto;
		transform: translateX(110%);
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
		box-shadow: -6px 0 32px rgba(0, 0, 0, .12);
	}
	body.nav-open .main-nav-container { transform: translateX(0); }

	/* Hamburger last in the icon row = far right */
	.hamburger { order: 4; }

	/* Push nav content below the header */
	nav.main-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
		padding-top: var(--bk-header-height);
		padding-bottom: 32px;
	}
	nav.main-nav > a {
		display: block;
		font-size: 16px;
		font-weight: 600;
		padding: 15px 24px;
		width: 100%;
		border-bottom: 1px solid var(--bk-border);
		border-bottom-color: var(--bk-border);
	}

	/* Mobile active states — yellow left border replaces yellow underline */
	nav.main-nav > a.is-active,
	nav.main-nav .menu-item.is-active > a {
		border-bottom-color: var(--bk-border);
		border-left: 3px solid var(--bk-accent);
		padding-left: 21px;
	}
	.bk-mobile-cat-header > a.is-active {
		font-weight: 700;
		border-left: 3px solid var(--bk-accent);
		padding-left: calc(36px - 3px);
	}
	.bk-mobile-subcat-list a.is-active {
		font-weight: 600;
		border-left: 3px solid var(--bk-accent);
		padding-left: calc(48px - 3px);
	}
	.divider { display: none; }

	/* Shop accordion item */
	.menu-item.menu-shop {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		position: static;
	}
	.menu-item.menu-shop > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 15px 24px;
		font-size: 16px;
		font-weight: 600;
		border-bottom: 1px solid var(--bk-border);
		box-sizing: border-box;
	}

	/* Chevron — hidden on desktop, shown on mobile by JS */
	.bk-shop-chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		transition: transform .25s ease;
	}
	.bk-shop-chevron::before {
		content: '';
		display: block;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -3px;
	}
	.menu-item.menu-shop.is-expanded .bk-shop-chevron { transform: rotate(-180deg); }

	/* Mobile category list — built by JS from mega menu */
	.bk-mobile-cat-list {
		display: none;
		flex-direction: column;
		width: 100%;
		background: #f9fafb;
	}
	.menu-item.menu-shop.is-expanded .bk-mobile-cat-list { display: flex; }
	/* Category row: link + expand button side by side */
	.bk-mobile-cat-item {
		border-bottom: 1px solid var(--bk-border);
	}
	.bk-mobile-cat-item:last-child { border-bottom: none; }

	.bk-mobile-cat-header {
		display: flex;
		align-items: center;
	}
	.bk-mobile-cat-header > a {
		flex: 1;
		display: block;
		padding: 13px 12px 13px 36px;
		font-size: 15px;
		font-weight: 600;
		color: var(--bk-text);
		text-decoration: none;
	}

	/* Chevron toggle for subcategories */
	.bk-mobile-subcat-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--bk-text-muted);
	}
	.bk-mobile-subcat-toggle::before {
		content: '';
		display: block;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -3px;
		transition: transform .2s ease;
	}
	.bk-mobile-cat-item.is-expanded .bk-mobile-subcat-toggle::before {
		transform: rotate(-135deg);
		margin-top: 3px;
	}

	/* Subcategory list — hidden until expanded */
	.bk-mobile-subcat-list {
		display: none;
		background: #f3f4f6;
	}
	.bk-mobile-cat-item.is-expanded .bk-mobile-subcat-list { display: block; }
	.bk-mobile-subcat-list a {
		display: block;
		padding: 11px 24px 11px 48px;
		font-size: 14px;
		font-weight: 400;
		color: var(--bk-text);
		text-decoration: none;
		border-top: 1px solid var(--bk-border);
	}

	/* Desktop mega menu never shows on mobile */
	.mega-menu { display: none !important; }
}

/* ── 8. Product Grid + Cards ────────────────────────────────────────── */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 24px;
	row-gap: 48px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

/* Suppress Storefront clearfix pseudo-elements from becoming grid items */
ul.products::before,
ul.products::after {
	display: none !important;
}

/* ── Category mini-hero ─────────────────────────────────────────────── */

/* Hide breadcrumbs on category pages so the hero sits flush at the top */
.tax-product_cat .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb,
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-checkout .woocommerce-breadcrumb { display: none; }

/* Hide default page title on cart/checkout/order/account — our mini-hero replaces it */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-order-received .entry-title,
.woocommerce-account .entry-title,
.bk-vendor-dashboard .entry-title { display: none; }

/* Extra breathing room below mini-heroes on account + checkout flow pages */
.woocommerce-cart .bk-cat-hero,
.woocommerce-checkout .bk-cat-hero,
.woocommerce-order-received .bk-cat-hero,
.woocommerce-account .bk-cat-hero { margin-bottom: 40px; }

.bk-cat-hero {
	background: var(--bk-primary);
	padding: 62px 0 54px;
	/* Full-width bleed out of the .col-full max-width container */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
	width: 100vw;
}
.bk-cat-hero--has-image {
	position: relative;
	background-image: var(--bk-cat-hero-img);
	background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}
.bk-cat-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(21, 29, 43, .72);
}
.bk-cat-hero .container { position: relative; }

.bk-cat-hero__parent {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.65);
	text-decoration: none;
	margin-bottom: 10px;
}
.bk-cat-hero__parent:hover { color: var(--bk-accent); }

.bk-cat-hero__title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.1;
}

.bk-cat-hero__count {
	display: inline-block;
	font-size: 15px;
	color: #000;
	background: #FFD602;
	margin: 0 0 20px 0;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	line-height: 1.5;
}

.bk-cat-hero__desc {
	margin-top: 12px;
	font-size: 15px;
	color: rgba(255,255,255,.75);
	max-width: 560px;
	line-height: 1.6;
}
.bk-cat-hero__desc p { margin: 0; }

/* ── Archive toolbar: sort + result count ───────────────────────────── */
.woocommerce-products-header { display: none; }

/* Toolbar wrapper — flex row, result count left, sort right */
.bk-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 10px 0 16px;
	border-bottom: 1px solid var(--bk-border);
	margin-bottom: 28px;
}

.woocommerce-result-count {
	font-size: 13px;
	color: var(--bk-text-muted);
	margin: 0 !important;
	padding: 0;
	line-height: 1;
	display: none;
}
.storefront-sorting {
	margin-bottom: 0!important;
}
.woocommerce-ordering {
	margin: 0 !important;
	padding: 0;
}
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23151D2B' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid var(--bk-border);
	border-radius: 8px;
	color: var(--bk-text);
	font-family: var(--bk-font-body);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 36px 8px 14px;
	cursor: pointer;
	transition: border-color var(--bk-transition);
	min-width: 180px;
}
.woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--bk-primary);
}

/* Hide the duplicate bar below the product grid */
ul.products ~ .woocommerce-ordering,
ul.products ~ .woocommerce-result-count { display: none !important; }

ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	background: var(--bk-card-bg);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--bk-transition), transform var(--bk-transition);
}
ul.products li.product:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
	transform: translateY(-2px);
}

ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* Image wrapper — holds the portrait aspect ratio */
ul.products li.product .bk-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
}

ul.products li.product .bk-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
ul.products li.product:hover .bk-card-image img {
	transform: scale(1.06);
}

ul.products li.product .bk-card-body {
	padding: 12px 14px 10px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-text);
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.3;
	transition: color var(--bk-transition);
}
ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--bk-utility);
}

ul.products li.product .price {
	font-size: 14px;
	font-weight: 500;
	color: var(--bk-primary);
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

/* Hide card footer on archive/category pages */
.tax-product_cat .bk-card-footer,
.post-type-archive-product .bk-card-footer {
	display: none !important;
}

/* Hide default WC add-to-cart in loop */
ul.products li.product > .button,
ul.products li.product > a.button {
	display: none !important;
}

/* Card footer: seller + view item */
.bk-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px 14px;
	border-top: 1px solid var(--bk-border);
	margin-top: auto;
}

.bk-card-seller {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bk-card-seller__avatar img,
.bk-card-seller__avatar .avatar {
	width: 30px !important;
	height: 30px !important;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}

.bk-card-seller__name {
	font-size: 13px;
	color: var(--bk-primary);
	text-decoration: underline;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
}
.bk-card-seller__name:hover { color: var(--bk-accent-hover); }

/* "View Item →" button */
.bk-view-item-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--bk-primary);
	font-size: 13px;
	font-weight: 500;
	flex-shrink: 0;
	white-space: nowrap;
}
.bk-view-item-btn:hover { color: var(--bk-accent-hover); }
.bk-view-item-btn:hover .bk-view-item-btn__arrow { background: var(--bk-primary-dark); }

.bk-view-item-btn__text { text-decoration: underline; }

.bk-view-item-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bk-primary);
	color: var(--bk-white);
	font-size: 14px;
	flex-shrink: 0;
	transition: background var(--bk-transition);
}

/* ── 9. Single Product ──────────────────────────────────────────────── */
div.product .product_title {
	font-size: 26px;
	color: var(--bk-text);
}

div.product p.price,
div.product span.price {
	color: var(--bk-primary);
	font-size: 24px;
	font-weight: 700;
}

div.product .single_add_to_cart_button {
	background: var(--bk-accent);
	border-color: var(--bk-accent);
	color: #000;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 30px;
	transition: background var(--bk-transition);
}
div.product .single_add_to_cart_button:hover {
	background: var(--bk-accent-hover);
	border-color: var(--bk-accent-hover);
}

/* ── 10. Condition + Auth Badges ────────────────────────────────────── */
.bk-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 2px 2px 8px 0;
}

.bk-badge--new     { background: var(--bk-badge-new-bg);     color: var(--bk-badge-new-text); }
.bk-badge--used    { background: var(--bk-badge-used-bg);    color: var(--bk-badge-used-text); }
.bk-badge--refurb  { background: var(--bk-badge-refurb-bg);  color: var(--bk-badge-refurb-text); }
.bk-badge--vintage { background: var(--bk-badge-vintage-bg); color: var(--bk-badge-vintage-text); }

.bk-badge--auth {
	background: var(--bk-primary);
	color: var(--bk-white);
}
.bk-badge--auth::before { content: '✓ '; }

/* ── 11. Escrow Status Bar ──────────────────────────────────────────── */
.bk-escrow-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bk-white);
	border: 1px solid var(--bk-border);
	border-left: 4px solid var(--bk-primary);
	border-radius: var(--bk-radius);
	padding: 14px 18px;
	margin: 20px 0;
}

.bk-escrow-bar--released  { border-left-color: var(--bk-success); }
.bk-escrow-bar--held      { border-left-color: var(--bk-warning); }
.bk-escrow-bar--disputed  { border-left-color: var(--bk-danger); }
.bk-escrow-bar--auth      { border-left-color: var(--bk-primary); }

.bk-escrow-bar__icon  { font-size: 22px; flex-shrink: 0; }
.bk-escrow-bar__body  { flex: 1; }
.bk-escrow-bar__title { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.bk-escrow-bar__desc  { font-size: 13px; color: var(--bk-text-muted); margin: 0; }

/* Mark as Received */
.bkecomm-mark-received-btn {
	background: var(--bk-success) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--bk-radius) !important;
	padding: 9px 18px !important;
	font-size: 13px !important;
	cursor: pointer;
	transition: opacity var(--bk-transition);
}
.bkecomm-mark-received-btn:hover { opacity: .85; }

/* Dispute */
.bkecomm-dispute-wrapper { margin-top: 16px; }

.bkecomm-open-dispute-toggle {
	color: var(--bk-danger);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.bkecomm-dispute-form {
	display: none;
	background: var(--bk-danger-bg);
	border: 1px solid #f5c2c7;
	border-radius: var(--bk-radius);
	padding: 16px;
	margin-top: 10px;
}

.bkecomm-dispute-form textarea {
	width: 100%;
	min-height: 80px;
	padding: 8px;
	border: 1px solid var(--bk-border);
	border-radius: 4px;
	font-size: 13px;
	resize: vertical;
	box-sizing: border-box;
}

.bkecomm-dispute-form .button {
	background: var(--bk-danger);
	color: var(--bk-white);
	border: none;
	border-radius: var(--bk-radius);
	margin-top: 8px;
}

/* ── 12. My Account / Orders ────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	color: var(--bk-text);
	border-radius: var(--bk-radius);
	transition: background var(--bk-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--bk-cream);
	color: var(--bk-primary);
}

/* ── Account nav accordion (mobile) ────────────────────────────────── */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		border: 1px solid var(--bk-border);
		border-radius: var(--bk-radius);
		margin-bottom: 24px;
		overflow: hidden;
	}

	/* Toggle button injected by JS */
	.bk-account-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 16px;
		background: var(--bk-cream);
		border: none;
		cursor: pointer;
		font-family: var(--bk-font-body);
		font-size: 15px;
		font-weight: 700;
		color: var(--bk-text);
		text-align: left;
	}

	.bk-account-nav-toggle::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .25s ease;
		flex-shrink: 0;
		margin-top: -3px;
	}

	.bk-account-nav-toggle.is-open::after {
		transform: rotate(-135deg);
		margin-top: 3px;
	}

	/* Hide the list by default on mobile */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation.is-open ul {
		display: block;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		border-radius: 0;
		border-top: 1px solid var(--bk-border);
		padding: 13px 16px;
	}
}

/* ── 13. Vendor Profile ─────────────────────────────────────────────── */
.bk-vendor-header {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--bk-primary);
	color: var(--bk-white);
	border-radius: var(--bk-radius);
	padding: 24px;
	margin-bottom: 28px;
}

.bk-vendor-header__avatar img {
	border-radius: 50%;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 3px solid var(--bk-accent);
}

.bk-vendor-header__name { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.bk-vendor-header__meta { font-size: 13px; color: rgba(255,255,255,.75); }

/* Stripe Connect block */
.bkecomm-stripe-connect,
.bkecomm-stripe-connected {
	background: var(--bk-white);
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius);
	padding: 20px 24px;
	margin-top: 24px;
}

.bkecomm-stripe-connect h3,
.bkecomm-stripe-connected p strong { color: var(--bk-text); }

/* Stripe brand purple — intentionally hardcoded */
.bkecomm-stripe-connect-btn {
	background: #635bff !important;
	color: var(--bk-white) !important;
	border-color: #635bff !important;
}
.bkecomm-stripe-connect-btn:hover {
	background: #4f49cc !important;
	border-color: #4f49cc !important;
}

/* ── 14. Homepage — Hero (full viewport) ────────────────────────────── */
.hero {
	/* Full viewport — sits behind the fixed header */
	width: 100vw;
	height: 100vh;
	margin-left: calc(-50vw + 50%); /* break out of any wrapper */
	background: #000 url('assets/images/hero.png') center center / cover no-repeat;
	display: flex;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
	/* No border-radius, no margin — edge-to-edge */
}

/* Dark overlay for text readability */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.40);
}

/* Position content ~17% above the visual center of the viewport.
   Visual center of area below fixed nav ≈ 54vh from page top.
   26vh margin-top puts content-center ~17% above that. */
.hero .container {
	position: relative;
	z-index: 1;
	margin-top: 18vh;
	display: flex;
	align-items: center;
}

.hero-inner { max-width: 560px; }

.hero-content h1 {
	font-size: 4.8rem;
    font-weight: 700;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 18px;
	letter-spacing: 0;
}

.hero-content p {
	font-size: 1rem;
	color: rgba(255,255,255,.88);
	line-height: 1.6;
	margin: 0;
}

.hero-buttons {
	position: absolute;
	bottom: 40px;
	/* Aligns with .container left edge but never goes off-screen */
	left: max(20px, calc((100vw - 1360px) / 2 + 20px));
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	z-index: 2;
}

.btn-sell {
	background: #A7333F;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 30px;
	text-decoration: none;
	transition: background var(--bk-transition);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.btn-sell:hover { background: var(--bk-accent); color: var(--bk-primary-dark); }

.btn-login {
	background: var(--bk-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 30px;
	text-decoration: none;
	transition: background var(--bk-transition);
	border: 1px solid #2f3a4e;
}
.btn-login:hover { background: var(--bk-primary-dark); color: #fff; }

/* ── 15. Homepage — Popular Products ───────────────────────────────── */
.popular-products {
	padding: 90px 0 20px;
}

.popular-products .container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
}

.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}

.section-header h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--bk-text);
	margin: 0;
}

.see-more {
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-primary);
	text-decoration: underline;
}
.see-more:hover { color: var(--bk-accent-hover); }

/* ── Homepage — Categories row ──────────────────────────────────── */
.bk-categories {
	padding: 90px 0 20px;
}

.bk-categories .container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
}

.bk-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.bk-cat-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background-color: #1a1a1a;
	background-position: bottom right;
	background-size: 75% auto;
	background-repeat: no-repeat;
	text-decoration: none;
	padding: 18px;
}


.bk-cat-tile__name {
	position: relative;
	z-index: 1;
	font-family: var(--bk-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.bk-cat-tile__arrow {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bk-utility);
	color: #fff;
	font-size: 16px;
	transition: background var(--bk-transition), color var(--bk-transition);
}

.bk-cat-tile:hover .bk-cat-tile__arrow {
	background: var(--bk-accent);
	color: var(--bk-primary);
}

/* ── Homepage — Popular Vendors row ─────────────────────────────── */
.bk-popular-vendors {
	padding: 90px 0 20px;
}

.bk-popular-vendors .container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
}

.bk-vendor-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

.bk-vendor-tile {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--bk-cream);
	border: 2px solid var(--bk-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
	transition: border-color var(--bk-transition), box-shadow var(--bk-transition);
}
.bk-vendor-tile:hover {
	border-color: var(--bk-accent);
	box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

.bk-vendor-tile__logo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bk-vendor-tile__initials {
	font-family: var(--bk-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--bk-primary);
	text-transform: uppercase;
	user-select: none;
}

/* ── Homepage simple product cards ──────────────────────────────── */
.bk-simple-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.bk-simple-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--bk-card-bg);
	border-radius: 10px;
	overflow: hidden;
}

.bk-simple-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bk-border);
}

.bk-simple-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bk-simple-card__info {
	padding: 12px 14px 16px;
	text-align: center;
}

.bk-simple-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-text);
	margin: 0 0 4px;
	line-height: 1.3;
}

.bk-simple-card__price {
	font-size: 14px;
	color: var(--bk-primary);
	margin: 0;
}

/* ── 16. Homepage — Promo Section ───────────────────────────────────── */
.tools-again-promo {
	background: #000 url('assets/images/tools-banner.png') center center / cover no-repeat;
	border-radius: 20px;
	padding: 100px 40px;
	text-align: center;
	margin: 60px 20px 80px;
	position: relative;
	overflow: hidden;
}

.tools-again-promo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	border-radius: inherit;
}

.promo-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
}

.promo-content h2 {
	font-size: 38px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 16px;
}

.promo-content p {
	font-size: 17px;
	color: rgba(255,255,255,.85);
	line-height: 1.6;
	margin: 0 0 28px;
}

.promo-button {
	display: inline-block;
	background: #A7333F;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	padding: 16px 36px;
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--bk-transition), color var(--bk-transition);
}
.promo-button:hover { background: var(--bk-accent); color: var(--bk-primary-dark); }

/* ── 17. Footer ─────────────────────────────────────────────────────── */
.site-footer {
	background: var(--bk-primary);
	border-top: none;
	padding: 60px 0 30px;
	margin-top: 80px;
	color: rgba(255,255,255,.75);
}

.footer-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Swap to knockout logo when available — place logo-knockout.svg in assets/images/ */
.footer-logo img { width: 180px; height: auto; }
.footer-logo img.logo-knockout { display: block; }

.footer-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
}

.footer-column h4 {
	font-size: 13px;
	font-weight: 700;
	color: var(--bk-accent);
	text-transform: uppercase;
	margin: 0 0 12px;
}

.footer-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Override Storefront's default anchor color inside the footer */
.site-footer a:not(.button):not(.components-button) {
	color: rgba(255,255,255,.75);
}
.site-footer a:not(.button):not(.components-button):hover {
	color: #fff;
}

.footer-column a {
	font-size: 13px;
	color: rgba(255,255,255,.75);
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 2px solid transparent;
	transition: color var(--bk-transition), border-color var(--bk-transition);
}
.footer-column a:hover,
.footer-column a.is-active { color: #fff; border-bottom-color: var(--bk-accent); }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 20px;
}

.footer-bottom p {
	font-size: 12px;
	color: rgba(255,255,255,.45);
	margin: 0;
}

/* Storefront footer widget area override */
.storefront-handheld-footer-bar { display: none; }

/* ── 18. Cart + Checkout Pages ──────────────────────────────────────── */

/* Cart table */
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	color: var(--bk-text);
}
button:focus {
    outline: none
}
.hamburger:hover {
	background: none!important;
}
.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--bk-text-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--bk-border);
}

.woocommerce-cart .shop_table td,
.woocommerce-checkout .shop_table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--bk-border);
	vertical-align: middle;
}

/* Cart product image thumbnail */
.woocommerce-cart .shop_table td.product-thumbnail img {
	width: 72px;
	height: 96px; /* 3:4 portrait, matching card style */
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* Cart/checkout totals box */
.cart_totals,
.woocommerce-checkout-review-order {
	background: var(--bk-card-bg);
	border-radius: 10px;
	padding: 24px;
}

/* Proceed to checkout / Place order button */
body.woocommerce-cart a.checkout-button,
body.woocommerce-checkout #place_order {
	background: var(--bk-accent);
	border-color: var(--bk-accent);
	color: #000;
	font-weight: 700;
	border-radius: 30px;
	font-size: 15px;
	padding: 14px 28px;
	width: 100%;
	transition: background var(--bk-transition);
}
body.woocommerce-cart a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
	background: var(--bk-accent-hover);
	border-color: var(--bk-accent-hover);
}

/* Cart notices ─────────────────────────────────── */
.bk-escrow-notice,
.bk-checkout-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bk-notice-bg);
	border: 1px solid var(--bk-notice-border);
	border-left: 4px solid var(--bk-primary);
	border-radius: var(--bk-radius);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--bk-text);
}

.bk-escrow-cart-note {
	font-size: 12px;
	color: var(--bk-text-muted);
	margin: 10px 0 0;
	text-align: center;
}

/* WooCommerce notice styling */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--bk-accent);
}
.woocommerce-error { border-top-color: var(--bk-danger); }

/* ── 18b. Search Slide Panel ────────────────────────────────────────── */
/* ── Search slide panel ─────────────────────────────────────── */
.bk-search-panel {
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
	visibility: hidden;
}
.bk-search-panel.is-open {
	pointer-events: auto;
	visibility: visible;
}

.bk-search-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	opacity: 0;
	transition: opacity .35s ease;
}
.bk-search-panel.is-open .bk-search-panel__overlay { opacity: 1; }

.bk-search-panel__inner {
	position: absolute;
	top: 0;
	right: 0;
	width: 440px;
	max-width: 100vw;
	height: 100%;
	background: #fff;
	box-shadow: -4px 0 32px rgba(0,0,0,.18);
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bk-search-panel.is-open .bk-search-panel__inner { transform: translateX(0); }

/* ── Force full-width — no sidebar ──────────────────────────────────── */
#primary.content-area {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
#secondary.widget-area {
	display: none !important;
}
/* Header row */
.bk-search-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 28px 20px;
	border-bottom: 1px solid var(--bk-border);
	flex-shrink: 0;
}
.bk-search-panel__title {
	font-family: var(--bk-font-heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bk-text);
}
.bk-search-panel__close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--bk-text-muted);
	line-height: 1;
	padding: 0;
	transition: color var(--bk-transition);
}
.bk-search-panel__close:hover { color: var(--bk-text); }

/* Search form */
.bk-search-panel__form {
	padding: 20px 28px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bk-search-panel__cat {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--bk-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--bk-text);
	background: #fff;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.bk-search-panel__input-wrap {
	position: relative;
}
.bk-search-panel__input {
	width: 100%;
	padding: 12px 44px 12px 14px;
	border: 1px solid var(--bk-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--bk-text);
	outline: none;
	transition: border-color var(--bk-transition);
}
.bk-search-panel__input:focus { border-color: var(--bk-primary); }
.bk-search-panel__submit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--bk-text-muted);
	padding: 0;
	display: flex;
	align-items: center;
}
.bk-search-panel__submit:hover { color: var(--bk-primary); }

/* Live results */
.bk-search-panel__results {
	flex: 1;
	overflow-y: auto;
	padding: 0 28px 20px;
	display: none;
}
.bk-search-panel__results.has-results { display: block; }

.bk-search-result-item a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bk-border);
	text-decoration: none;
	color: inherit;
}
.bk-search-result-item a:hover .bk-result-name { color: var(--bk-primary); }
.bk-search-result-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}
.bk-result-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-text);
	transition: color var(--bk-transition);
}
.bk-result-price {
	font-size: 13px;
	color: var(--bk-text-muted);
}
.bk-search-no-results {
	font-size: 14px;
	color: var(--bk-text-muted);
	padding: 20px 0;
}

/* Inspiration list */
.bk-search-panel__inspiration {
	flex: 1;
	overflow-y: auto;
	padding: 0 28px 28px;
}
.bk-search-panel__inspiration-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bk-text-muted);
	margin: 0 0 14px;
}
.bk-search-panel__inspo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bk-search-panel__inspo-item a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bk-border);
	text-decoration: none;
	color: inherit;
}
.bk-search-panel__inspo-item a:hover .bk-inspo-name { color: var(--bk-primary); }
.bk-search-panel__inspo-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: var(--bk-cream);
}
.bk-inspo-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-text);
	transition: color var(--bk-transition);
}
.bk-inspo-price {
	display: block;
	font-size: 13px;
	color: var(--bk-text-muted);
	margin-top: 2px;
}

/* ── 19. Product Gallery (single product) ──────────────────────────── */
.bk-product-gallery { position: relative; }

.bk-gallery__main {
	width: 100%;
	background: var(--bk-cream);
	border-radius: var(--bk-radius);
	overflow: hidden;
	border: 1px solid var(--bk-border);
}
.bk-gallery__main-link { display: block; }
.bk-gallery__main-img {
	width: 100%;
	display: block;
	aspect-ratio: 4/3;
	object-fit: contain;
	transition: opacity var(--bk-transition);
}

/* Old-build gallery classes (single-product.php) */
.custom-product-gallery { display: flex; flex-direction: column; gap: 10px; }

.main-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--bk-cream);
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-image img,
#active-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Thumbnail strip */
.thumbnail-grid {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.thumbnail-grid img.thumb {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: var(--bk-radius);
	border: 2px solid var(--bk-border);
	cursor: pointer;
	opacity: .7;
	transition: opacity var(--bk-transition), border-color var(--bk-transition), transform .2s ease;
}

.thumbnail-grid img.thumb:hover,
.thumbnail-grid img.thumb.active {
	opacity: 1;
	border-color: var(--bk-accent);
}
.thumbnail-grid img.thumb:hover { transform: scale(1.05); }

/* WooCommerce built-in gallery flexnav */
.bk-gallery__thumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.bk-gallery__thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid var(--bk-border);
	border-radius: var(--bk-radius);
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	flex-shrink: 0;
	transition: border-color var(--bk-transition);
}
.bk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-gallery__thumb:hover,
.bk-gallery__thumb.is-active { border-color: var(--bk-accent); }
.bk-gallery__thumb.is-active { box-shadow: 0 0 0 2px var(--bk-accent); }

/* ── 20. My Account Dashboard Cards ────────────────────────────────── */
.bk-dashboard-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 20px 0;
}

.bk-dashboard-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius);
	padding: 20px;
	text-decoration: none;
	color: var(--bk-text);
	transition: box-shadow var(--bk-transition), border-color var(--bk-transition);
}
.bk-dashboard-card:hover {
	border-color: var(--bk-accent);
	box-shadow: var(--bk-shadow-hover);
	color: var(--bk-text);
}
.bk-dashboard-card__icon { font-size: 24px; margin-bottom: 4px; }
.bk-dashboard-card strong { font-size: 14px; font-weight: 700; color: var(--bk-text); }
.bk-dashboard-card span { font-size: 12px; color: var(--bk-text-muted); line-height: 1.4; }

/* ── How It Works Page ──────────────────────────────────────────────── */

/* Hero */
.bk-hiw-hero {
	text-align: center;
	padding: 80px 20px 60px;
}
.bk-hiw-hero h1 {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 700;
	color: var(--bk-primary);
	margin: 0 0 16px;
}
.bk-hiw-hero__sub {
	font-size: 22px;
	font-weight: 600;
	color: var(--bk-primary);
	margin: 0 0 12px;
}
.bk-hiw-hero__body {
	font-size: 17px;
	color: var(--bk-text-muted);
	margin: 0;
}

/* Section wrapper */
.bk-hiw-section {
	padding: 70px 0;
}
.bk-hiw-intro {
	margin-bottom: 48px;
}
.bk-hiw-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bk-utility);
	margin-bottom: 10px;
}
.bk-hiw-section h2 {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	color: var(--bk-primary);
	margin: 0;
}

/* Steps grid */
.bk-hiw-steps {
	display: grid;
	gap: 28px;
}
.bk-hiw-steps--3 { grid-template-columns: repeat(3, 1fr); }
.bk-hiw-steps--4 { grid-template-columns: repeat(4, 1fr); }

.bk-hiw-step {
	background: #fff;
	border: 1px solid var(--bk-border);
	border-radius: 14px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bk-hiw-step__num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bk-accent);
	color: var(--bk-primary);
	font-size: 16px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bk-hiw-step__icon {
	color: var(--bk-primary);
	opacity: .55;
}
.bk-hiw-step h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--bk-primary);
	margin: 0;
}
.bk-hiw-step p {
	font-size: 15px;
	color: var(--bk-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* Mid-section CTA */
.bk-hiw-mid-cta {
	text-align: center;
	margin-top: 48px;
}

/* Buttons */
.bk-hiw-btn {
	display: inline-block;
	background: var(--bk-accent);
	color: var(--bk-primary);
	font-size: 16px;
	font-weight: 700;
	padding: 15px 32px;
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--bk-transition), color var(--bk-transition);
}
.bk-hiw-btn:hover {
	background: var(--bk-accent-hover);
	color: var(--bk-primary);
}
.bk-hiw-btn--outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,.5);
}
.bk-hiw-btn--outline:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

/* Divider */
.bk-hiw-divider { padding: 0 0 10px; }
.bk-hiw-divider hr {
	border: none;
	border-top: 1px solid var(--bk-border);
	margin: 0;
}

/* Fine print / rules */
.bk-hiw-rules-section {
	background: #f7f8fa;
	padding: 70px 0;
}
.bk-hiw-rules-heading {
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 800;
	color: var(--bk-primary);
	margin: 0 0 40px;
}
.bk-hiw-rules {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.bk-hiw-rule-card {
	background: #fff;
	border: 1px solid var(--bk-border);
	border-radius: 12px;
	padding: 24px 26px;
}
.bk-hiw-rule-card h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--bk-primary);
	margin: 0 0 8px;
	text-transform: uppercase;
}
.bk-hiw-rule-card p {
	font-size: 14px;
	color: var(--bk-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Closing CTA band */
.bk-hiw-cta-band {
	background: var(--bk-primary);
	padding: 90px 20px;
	text-align: center;
	border-radius: 20px;
}
.bk-hiw-cta-band h2 {
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 900;
	color: #fff;
	margin: 0 0 12px;
}
.bk-hiw-cta-band p {
	font-size: 18px;
	color: rgba(255,255,255,.7);
	margin: 0 0 36px;
}
.bk-hiw-cta-band__btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── 21. Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, 1fr) !important; }
	.bk-simple-grid { grid-template-columns: repeat(2, 1fr); }
	.bk-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.bk-vendor-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
	.bk-simple-grid { grid-template-columns: repeat(2, 1fr); }
	.bk-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.bk-vendor-grid { grid-template-columns: repeat(2, 1fr); }

	.bk-vendor-header { flex-direction: column; text-align: center; }

	.hero .container { flex-direction: column; }
	.hero-content h1 { font-size: 36px; }
	.hero-content p { font-size: 15px; }

	.hero-buttons { bottom: 28px; }

	.tools-again-promo { padding: 60px 24px; margin: 40px 0; }
	.promo-content h2 { font-size: 26px; }

	.bk-dashboard-cards { grid-template-columns: 1fr; }

	.footer-links-grid { grid-template-columns: repeat(2, 1fr); }

	.utility-bar .container { flex-direction: column; gap: 4px; height: auto; padding: 8px 20px; }
	.utility-bar { height: auto; }

	.bk-hiw-steps--3,
	.bk-hiw-steps--4 { grid-template-columns: repeat(2, 1fr); }
	.bk-hiw-rules { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	ul.products { grid-template-columns: repeat(1, 1fr) !important; }

	.bk-escrow-bar { flex-direction: column; align-items: flex-start; }

	.footer-links-grid { grid-template-columns: 1fr; }

	.bk-gallery__thumb,
	.thumbnail-grid img.thumb { width: 56px; height: 56px; }

	.bk-hiw-steps--3,
	.bk-hiw-steps--4 { grid-template-columns: 1fr; }
	.bk-hiw-rules { grid-template-columns: 1fr; }
	.bk-hiw-cta-band__btns { flex-direction: column; align-items: center; }
}

/* ── Vendor Dashboard (WC Vendors) ──────────────────────────────────────── */

/* Hero margin — same as account */
.bk-vendor-dashboard .bk-cat-hero { margin-bottom: 40px; }

/* Hide the <hr> WC Vendors renders after navigation */
.wcv-dashboard-navigation + hr { display: none; }

/* ── Navigation tabs ── */
.wcv-dashboard-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border-bottom: 2px solid var(--bk-border);
}
.wcv-dashboard-navigation ul li {
	display: block;
	margin: 0;
}
.wcv-dashboard-navigation ul li a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bk-text-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color var(--bk-transition), border-color var(--bk-transition);
}
.wcv-dashboard-navigation ul li a:hover {
	color: var(--bk-primary);
	border-bottom-color: var(--bk-accent);
}
.wcv-dashboard-navigation ul li a.active {
	color: var(--bk-primary);
	font-weight: 700;
	border-bottom-color: var(--bk-accent);
}

/* ── Section cards ── */
.wcv-section {
	background: var(--bk-card-bg);
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius-lg);
	padding: 24px;
	margin-bottom: 24px;
}
.wcv-section h3 {
	font-family: var(--bk-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--bk-primary);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bk-border);
}

/* ── Dashboard tables ── */
.wcv-dashboard-table {
	width: 100%;
	border-collapse: collapse;
}
.wcv-dashboard-table th,
.wcv-dashboard-table td {
	padding: 10px 12px;
	font-size: 14px;
	border-bottom: 1px solid var(--bk-border);
	text-align: left;
	vertical-align: middle;
}
.wcv-dashboard-table th {
	font-size: 12px;
	font-weight: 600;
	color: var(--bk-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--bk-bg-subtle, #f9fafb);
}
.wcv-dashboard-table.has-background tbody tr:nth-child(even) td,
.wcv-dashboard-table.has-background tbody tr:nth-child(even) th {
	background: var(--bk-bg-subtle, #f9fafb);
}
.wcv-dashboard-table tbody tr:last-child td,
.wcv-dashboard-table tbody tr:last-child th { border-bottom: none; }
.wcv-dashboard-table td strong {
	font-weight: 600;
	color: var(--bk-primary);
}

/* ── Date range picker ── */
.wcv_dashboard_datepicker {
	background: var(--bk-card-bg);
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius-lg);
	padding: 20px 24px;
	margin-bottom: 24px;
}
.wcv_dashboard_datepicker .wcv-form {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.wcv_dashboard_datepicker input[type="text"],
.wcv_dashboard_datepicker input[type="date"] {
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius);
	padding: 8px 12px;
	font-size: 14px;
	color: var(--bk-primary);
	background: #fff;
}

/* ── Buttons — override WCV bootstrap defaults ── */
.wcv-btn,
input[type="submit"].wcv-btn {
	background: var(--bk-accent) !important;
	background-image: none !important;
	color: var(--bk-primary) !important;
	border: none !important;
	border-radius: var(--bk-radius) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 10px 20px !important;
	transition: background var(--bk-transition) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.wcv-btn:hover,
input[type="submit"].wcv-btn:hover {
	background: #e6c200 !important;
	color: var(--bk-primary) !important;
}
.wcv-btn-primary,
input[type="submit"].wcv-btn-primary {
	background: var(--bk-primary) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--bk-radius) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 10px 20px !important;
	transition: background var(--bk-transition) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.wcv-btn-primary:hover,
input[type="submit"].wcv-btn-primary:hover {
	background: #1e2a3e !important;
	color: #fff !important;
}

/* ── Grid spacing ── */
.wcv-bottom-space { margin-bottom: 24px; }
.wcv-cols-group { gap: 0; }

/* ── Form inputs ── */
.wcv-form input[type="text"],
.wcv-form input[type="email"],
.wcv-form input[type="number"],
.wcv-form select,
.wcv-form textarea {
	border: 1px solid var(--bk-border);
	border-radius: var(--bk-radius);
	padding: 10px 12px;
	font-size: 14px;
	color: var(--bk-primary);
	width: 100%;
	transition: border-color var(--bk-transition);
}
.wcv-form input:focus,
.wcv-form select:focus,
.wcv-form textarea:focus {
	border-color: var(--bk-primary);
	outline: none;
}
.wcv-form label {
	font-weight: 600;
	font-size: 13px;
	color: var(--bk-primary);
	margin-bottom: 6px;
	display: block;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
	.wcv-dashboard-navigation ul { flex-wrap: nowrap; overflow-x: auto; }
	.wcv-dashboard-navigation ul li a { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
	.wcv-section { padding: 16px; }
}