/**
 * Habiganj Online Bazar — Child Theme Styles
 *
 * Loaded after the Storefront parent stylesheet. Component styles should
 * be added here (or split into imported files under assets/css/ once this
 * grows) rather than using inline styles (rule 23, rule 37).
 *
 * Design tokens are defined once as CSS custom properties so every
 * component pulls from the same system instead of hardcoding values.
 */

:root {
	/* Color tokens — placeholder values, to be finalized during the
	   design/homepage phase. */
	--hb-color-primary: #1a7a3c;
	--hb-color-primary-dark: #145c2d;
	--hb-color-accent: #e0562f;
	--hb-color-text: #1c1c1c;
	--hb-color-text-muted: #6b6b6b;
	--hb-color-bg: #ffffff;
	--hb-color-bg-alt: #f7f7f5;
	--hb-color-border: #e5e5e2;
	--hb-color-success: #1a7a3c;
	--hb-color-danger: #c0392b;

	/* Spacing scale */
	--hb-space-1: 4px;
	--hb-space-2: 8px;
	--hb-space-3: 12px;
	--hb-space-4: 16px;
	--hb-space-5: 24px;
	--hb-space-6: 32px;
	--hb-space-7: 48px;
	--hb-space-8: 64px;

	/* Typography */
	--hb-font-base: system-ui, -apple-system, "Segoe UI", "Noto Sans Bengali", Roboto, sans-serif;
	--hb-font-size-sm: 0.875rem;
	--hb-font-size-base: 1rem;
	--hb-font-size-lg: 1.125rem;
	--hb-font-size-xl: 1.5rem;

	/* Layout */
	--hb-container-width: 1280px;
	--hb-touch-target-min: 44px;

	/* Radii & shadows */
	--hb-radius-sm: 4px;
	--hb-radius-md: 8px;
	--hb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--hb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* Transitions */
	--hb-transition-fast: 120ms ease;
	--hb-transition-base: 200ms ease;

	/* Breakpoints (referenced in comments; CSS custom properties can't be
	   used inside @media queries, kept here for documentation). */
}

/* ==========================================================================
   Base / resets scoped to our own components only
   ========================================================================== */

.hb-container {
	max-width: var(--hb-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
}

.hb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hb-touch-target-min);
	padding: var(--hb-space-3) var(--hb-space-5);
	border-radius: var(--hb-radius-md);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--hb-transition-fast), border-color var(--hb-transition-fast);
}

.hb-btn--primary {
	background: var(--hb-color-primary);
	color: #fff;
}

.hb-btn--primary:hover,
.hb-btn--primary:focus {
	background: var(--hb-color-primary-dark);
}

.hb-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--hb-radius-sm);
	font-size: var(--hb-font-size-sm);
	font-weight: 700;
	line-height: 1.6;
}

.hb-badge--sale {
	background: var(--hb-color-accent);
	color: #fff;
	position: absolute;
	top: var(--hb-space-2);
	left: var(--hb-space-2);
	z-index: 1;
}

.hb-badge--out-of-stock {
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	position: absolute;
	top: var(--hb-space-2);
	right: var(--hb-space-2);
	z-index: 1;
}

.hb-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--hb-color-primary);
	color: #fff;
	padding: var(--hb-space-3) var(--hb-space-4);
	z-index: 10000;
	transition: top var(--hb-transition-fast);
}

.hb-skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Inline SVG icons (see inc/icons.php)
   ========================================================================== */

.hb-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.hb-icon--bars {
	width: 24px;
	height: 24px;
}

.hb-search-form__submit .hb-icon {
	width: 18px;
	height: 18px;
	color: #fff;
}

.hb-bottom-nav__item .hb-icon {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.hb-announcement-bar {
	background: var(--hb-color-primary-dark);
	color: #fff;
	text-align: center;
	font-size: var(--hb-font-size-sm);
	padding: var(--hb-space-2) var(--hb-space-4);
}

.hb-announcement-bar p {
	margin: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hb-header {
	background: var(--hb-color-bg);
	border-bottom: 1px solid var(--hb-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.hb-header__main-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--hb-space-5);
	padding-top: var(--hb-space-3);
	padding-bottom: var(--hb-space-3);
}

.hb-mobile-menu-toggle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	width: var(--hb-touch-target-min);
	height: var(--hb-touch-target-min);
	color: var(--hb-color-text);
	cursor: pointer;
}

.hb-header__branding {
	flex-shrink: 0;
	min-width: 0;
}

.hb-header__branding a {
	display: flex;
	align-items: center;
}

.custom-logo-link {
	margin-bottom: 0;
}

/* Custom logo — fixed display height + auto width keeps it crisp at any
   source resolution instead of letting flex stretch/shrink it freely. */
.hb-header__branding img,
.hb-header__branding .custom-logo {
	display: block;
	height: 34px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

.hb-header__site-title {
	font-size: var(--hb-font-size-lg);
	font-weight: 800;
	color: var(--hb-color-text);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 40vw;
}

.hb-header__search {
	flex: 1 1 auto;
	min-width: 0;
}

.hb-header__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--hb-space-2);
}

.hb-header__action-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: var(--hb-touch-target-min);
	min-height: var(--hb-touch-target-min);
	justify-content: center;
	color: var(--hb-color-text);
	text-decoration: none;
	font-size: var(--hb-font-size-sm);
}

.hb-header__action-label {
	display: none;
}

.hb-header__cart-count {
	position: absolute;
	top: -4px;
	right: 2px;
	background: var(--hb-color-accent);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 999px;
	min-width: 16px;
	text-align: center;
}

/* Desktop header row split: logo 25% / search 50% / icons 25%.
   Uses flex-grow ratios (basis:0) instead of percentage flex-basis
   because .hb-header__main-inner has a `gap` between its 3 children —
   percentage flex-basis sums to exactly 100% but ignores the gap, so
   total rendered width becomes 100% + 2×gap, which overflows the
   container and pushes the icons box outside the visible header.
   Grow-ratio flex allocates space AFTER gaps are subtracted, so 1:2:1
   always renders as a true 25/50/25 split with zero overflow. */
@media (min-width: 768px) {
	.hb-header__main-inner {
		flex-wrap: nowrap;
	}

	.hb-header__branding {
		flex: 1 1 0;
		max-width: 25%;
	}

	.hb-header__search {
		flex: 2 1 0;
		max-width: 50%;
	}

	.hb-header__actions {
		flex: 1 1 0;
		max-width: 25%;
		justify-content: flex-end;
	}
}

.hb-header__nav-row {
	display: none; /* desktop mega menu, revealed at larger breakpoints */
	border-top: 1px solid var(--hb-color-border);
}

/* Mobile header layout — hamburger + logo + icons stay on one tight row,
   the search bar drops to its own full-width row underneath instead of
   being squeezed into the same row. */
@media (max-width: 767px) {
	.hb-header__main-inner {
		flex-wrap: wrap;
		gap: var(--hb-space-2);
	}

	.hb-header__search {
		order: 10;
		flex-basis: 100%;
		width: 100%;
	}

	.hb-header__actions {
		gap: 2px;
	}

	.hb-header__action-link {
		min-width: 40px;
		min-height: 40px;
	}
}

/* ==========================================================================
   Search form + live results dropdown
   ========================================================================== */

.hb-search-form {
	position: relative;
	display: flex;
}

form.hb-search-form {
	margin-bottom: 0;
}

.hb-search-form__input {
	flex: 1;
	min-height: var(--hb-touch-target-min);
	padding: 0 var(--hb-space-4);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md) 0 0 var(--hb-radius-md);
	font-size: var(--hb-font-size-base);
}

.hb-search-form__input:focus {
	outline: 2px solid var(--hb-color-primary);
	outline-offset: -2px;
}

.hb-search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hb-touch-target-min);
	min-height: var(--hb-touch-target-min);
	background: var(--hb-color-primary);
	color: #fff;
	border: none;
	border-radius: 0 var(--hb-radius-md) var(--hb-radius-md) 0;
	cursor: pointer;
}

.hb-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	box-shadow: var(--hb-shadow-md);
	z-index: 200;
	max-height: 70vh;
	overflow-y: auto;
}

.hb-search-results__status {
	padding: var(--hb-space-4);
	margin: 0;
	color: var(--hb-color-text-muted);
	font-size: var(--hb-font-size-sm);
}

.hb-search-results__status--error {
	color: var(--hb-color-danger);
}

.hb-search-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-search-results__item {
	display: flex;
	align-items: center;
	gap: var(--hb-space-3);
	padding: var(--hb-space-3) var(--hb-space-4);
	text-decoration: none;
	color: var(--hb-color-text);
	border-bottom: 1px solid var(--hb-color-border);
}

.hb-search-results__item:hover,
.hb-search-results__item:focus {
	background: var(--hb-color-bg-alt);
}

.hb-search-results__item img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--hb-radius-sm);
	flex-shrink: 0;
}

.hb-search-results__item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hb-search-results__item-title {
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hb-search-results__item-price {
	font-size: var(--hb-font-size-sm);
	color: var(--hb-color-primary-dark);
}

.hb-search-results__item-stock {
	font-size: 11px;
	color: var(--hb-color-danger);
}

.hb-search-results__view-all {
	display: block;
	text-align: center;
	padding: var(--hb-space-3);
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
	color: var(--hb-color-primary);
	text-decoration: none;
}

/* ==========================================================================
   Mega menu (desktop)
   ========================================================================== */

.hb-mega-menu__list {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.hb-mega-menu__item {
	position: relative;
}

.hb-mega-menu__link {
	display: block;
	padding: var(--hb-space-3) var(--hb-space-4);
	color: var(--hb-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--hb-font-size-sm);
}

.hb-mega-menu__link:hover {
	color: var(--hb-color-primary);
}

.hb-mega-menu__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: 0 0 var(--hb-radius-md) var(--hb-radius-md);
	box-shadow: var(--hb-shadow-md);
	padding: var(--hb-space-4);
	z-index: 150;
}

.hb-mega-menu__item.has-children:hover .hb-mega-menu__panel,
.hb-mega-menu__item.has-children:focus-within .hb-mega-menu__panel,
.hb-mega-menu .menu-item-has-children:hover > .sub-menu,
.hb-mega-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.hb-mega-menu__sublist {
	list-style: none;
	margin: 0 0 var(--hb-space-3);
	padding: 0;
}

.hb-mega-menu__sublist a {
	display: block;
	padding: var(--hb-space-2) 0;
	color: var(--hb-color-text);
	text-decoration: none;
	font-size: var(--hb-font-size-sm);
}

.hb-mega-menu__sublist a:hover {
	color: var(--hb-color-primary);
}

.hb-mega-menu__view-all {
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
	color: var(--hb-color-primary);
	text-decoration: none;
}

/* ==========================================================================
   Mobile off-canvas nav
   ========================================================================== */

.hb-mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--hb-color-bg);
	z-index: 1000;
	overflow-y: auto;
}

.hb-mobile-nav[hidden] {
	display: none;
}

.hb-mobile-nav__inner {
	padding: var(--hb-space-5);
}

.hb-mobile-nav__close {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	min-width: var(--hb-touch-target-min);
	min-height: var(--hb-touch-target-min);
	cursor: pointer;
}

.hb-mobile-menu__list {
	list-style: none;
	margin: var(--hb-space-4) 0 0;
	padding: 0;
}

.hb-mobile-menu__item {
	border-bottom: 1px solid var(--hb-color-border);
}

.hb-mobile-menu__link,
.hb-mobile-menu__summary {
	display: block;
	padding: var(--hb-space-4) var(--hb-space-2);
	font-weight: 600;
	color: var(--hb-color-text);
	text-decoration: none;
	cursor: pointer;
	min-height: var(--hb-touch-target-min);
}

.hb-mobile-menu__sublist {
	list-style: none;
	margin: 0 0 var(--hb-space-3);
	padding-left: var(--hb-space-4);
}

.hb-mobile-menu__sublist a {
	display: block;
	padding: var(--hb-space-2);
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

/* ==========================================================================
   Sticky mobile bottom nav
   ========================================================================== */

.hb-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	background: var(--hb-color-bg);
	border-top: 1px solid var(--hb-color-border);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
	z-index: 500;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.hb-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--hb-space-2) 0;
	min-height: var(--hb-touch-target-min);
	background: none;
	border: none;
	color: var(--hb-color-text);
	text-decoration: none;
	font-size: 11px;
	cursor: pointer;
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */

.hb-section {
	padding: var(--hb-space-6) 0;
}

.hb-section__title {
	font-size: var(--hb-font-size-xl);
	font-weight: 600;
	line-height: 1.3;
	margin: 25px 0;
	padding-left: 16px;
	border-left: 3px solid var(--hb-color-accent, #d85a30);
}

.hb-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hb-color-primary) 0%, var(--hb-color-primary-dark) 100%);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-8) var(--hb-space-5);
	text-align: center;
	margin-top: var(--hb-space-5);
	color: #fff;
}

.hb-hero::before,
.hb-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.hb-hero::before {
	width: 320px;
	height: 320px;
	top: -160px;
	right: -100px;
}

.hb-hero::after {
	width: 200px;
	height: 200px;
	bottom: -120px;
	left: -60px;
}

.hb-hero__content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.hb-hero__eyebrow {
	display: inline-block;
	padding: var(--hb-space-1) var(--hb-space-4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
	margin-bottom: var(--hb-space-4);
}

.hb-hero__title {
	font-size: 1.75rem;
	line-height: 1.35;
	margin: 0 0 var(--hb-space-3);
	color: #fff;
}

.hb-hero__subtitle {
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 var(--hb-space-5);
	line-height: 1.7;
}

.hb-hero .hb-btn--primary {
	background: #fff;
	color: var(--hb-color-primary-dark);
}

.hb-hero .hb-btn--primary:hover,
.hb-hero .hb-btn--primary:focus {
	background: var(--hb-color-bg-alt);
}

.hb-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hb-space-3);
	margin-top: var(--hb-space-6);
}

.hb-hero__badge {
	padding: var(--hb-space-2) var(--hb-space-4);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
}

.hb-categories__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--hb-space-3);
}

.hb-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hb-space-2);
	text-decoration: none;
	color: var(--hb-color-text);
	text-align: center;
}

.hb-category-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--hb-color-border);
}

.hb-category-card__name {
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
}

.hb-product-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hb-space-3);
}

.hb-product-carousel__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.hb-product-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--hb-color-border, #ddd);
	background: #fff;
	color: var(--hb-color-primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.hb-product-carousel__arrow:hover {
	background: var(--hb-color-primary);
	color: #fff;
}

.hb-product-carousel__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: var(--hb-space-4);
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
	cursor: grab;
	user-select: none;
}

.hb-product-carousel__list.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.hb-product-carousel__list::-webkit-scrollbar {
	display: none; /* Chrome/Safari — scrolling still works via touch/drag */
}

.hb-product-carousel__list > li {
	scroll-snap-align: start;
	flex: 0 0 100%;
	min-width: 0;
}

.hb-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hb-space-4);
}

.hb-trust__item {
	text-align: center;
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-5) var(--hb-space-3);
	transition: box-shadow var(--hb-transition-base), transform var(--hb-transition-base);
}

.hb-trust__item:hover {
	box-shadow: var(--hb-shadow-md);
	transform: translateY(-2px);
}

.hb-trust__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--hb-space-3);
}

.hb-trust__icon .hb-icon {
	width: 26px;
	height: 26px;
}

.hb-trust__item h3 {
	margin: 0 0 var(--hb-space-2);
	font-size: var(--hb-font-size-base);
}

.hb-trust__item p {
	margin: 0;
	font-size: var(--hb-font-size-sm);
	color: var(--hb-color-text-muted);
	line-height: 1.6;
}

/* ==========================================================================
   Order Easily section (website + WhatsApp)
   ========================================================================== */

.hb-how-to-order__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hb-space-4);
}

.hb-how-to-order__card {
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-6) var(--hb-space-5);
	text-align: center;
}

.hb-how-to-order__card h3 {
	margin: 0 0 var(--hb-space-2);
	font-size: var(--hb-font-size-lg);
}

.hb-how-to-order__card p {
	color: var(--hb-color-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--hb-space-4);
}

.hb-how-to-order__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--hb-space-4);
}

.hb-how-to-order__icon .hb-icon {
	width: 30px;
	height: 30px;
}

.hb-how-to-order__icon--whatsapp {
	background: rgba(20, 92, 45, 0.12);
	color: #145C2D;
}

.hb-how-to-order__card--whatsapp {
	border-color: rgba(20, 92, 45, 0.35);
}

.hb-how-to-order__number {
	font-size: var(--hb-font-size-lg);
	font-weight: 700;
	color: var(--hb-color-text);
	letter-spacing: 0.5px;
	direction: ltr;
	margin-bottom: var(--hb-space-4) !important;
}

.hb-btn--outline {
	background: transparent;
	border-color: var(--hb-color-primary);
	color: var(--hb-color-primary);
}

.hb-btn--outline:hover,
.hb-btn--outline:focus {
	background: var(--hb-color-bg-alt);
}

.hb-btn--whatsapp {
	background: #145C2D;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: var(--hb-space-2);
}

.hb-btn--whatsapp:hover,
.hb-btn--whatsapp:focus {
	background: #0F4723;
}

.hb-btn--whatsapp .hb-icon {
	width: 18px;
	height: 18px;
}

.hb-btn--whatsapp-inline {
	margin-top: var(--hb-space-3);
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Product card
   ========================================================================== */

.hb-product-card {
	position: relative;
	list-style: none;
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	overflow: hidden;
	background: var(--hb-color-bg);
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--hb-transition-base);
}

.hb-product-card:hover {
	box-shadow: var(--hb-shadow-sm);
}

.hb-product-card__link {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hb-product-card__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hb-color-bg-alt);
}

.hb-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-product-card__body {
	padding: var(--hb-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--hb-space-1);
	flex: 1;
}

.hb-product-card__title {
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hb-product-card__rating {
	font-size: 12px;
}

.hb-product-card__price {
	font-weight: 800;
	color: var(--hb-color-accent);
	font-size: 15px;
}

.hb-product-card__price ins {
	text-decoration: none;
	margin-left: var(--hb-space-1);
}

.hb-product-card__price del {
	color: var(--hb-color-text-muted);
	font-weight: 400;
	font-size: var(--hb-font-size-sm);
}

.hb-product-card__actions {
	padding: 0 var(--hb-space-3) var(--hb-space-3);
}

.hb-product-card__actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: var(--hb-touch-target-min);
	background: var(--hb-color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: var(--hb-radius-sm);
	font-size: var(--hb-font-size-sm);
	font-weight: 600;
}

.hb-product-card__actions .button::before {
	content: "+";
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.hb-product-card__actions .button:hover {
	background: var(--hb-color-primary-dark);
}

/* ==========================================================================
   Single product page — premium responsive storefront
   ========================================================================== */

.hb-single-product {
	background: var(--hb-color-bg);
}

.hb-single-product__breadcrumb {
	padding-top: var(--hb-space-4);
	padding-bottom: var(--hb-space-2);
	font-size: var(--hb-font-size-sm);
	color: var(--hb-color-text-muted);
}

.hb-single-product__breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
}

.hb-single-product__breadcrumb a {
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

.hb-single-product__breadcrumb a:hover {
	color: var(--hb-color-primary);
}

.hb-single-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
	padding-top: var(--hb-space-4);
	padding-bottom: var(--hb-space-7);
}

/* Gallery */
.hb-single-product__gallery {
	position: relative;
	min-width: 0;
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	padding: 14px;
}

.hb-single-product__gallery .hb-badge--sale {
	top: 16px;
	left: 16px;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: .8rem;
	box-shadow: var(--hb-shadow-md);
}

.hb-single-product__gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	margin: 0;
}

.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	background: #fafaf8;
	border: 1px solid var(--hb-color-border);
	border-radius: 18px;
	overflow: hidden;
}

.hb-single-product__gallery .woocommerce-product-gallery__image {
	background: #fff;
}

.hb-single-product__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.hb-single-product__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.hb-single-product__gallery .flex-control-thumbs li {
	width: auto;
	margin: 0;
}

.hb-single-product__gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: 10px;
	background: #fff;
	transition: border-color var(--hb-transition-fast), transform var(--hb-transition-fast);
}

.hb-single-product__gallery .flex-control-thumbs img:hover {
	transform: translateY(-1px);
}

.hb-single-product__gallery .flex-control-thumbs img.flex-active {
	border-color: var(--hb-color-primary);
}

/* Product information */
.hb-single-product__summary {
	position: relative;
	min-width: 0;
	padding: clamp(22px, 3vw, 36px);
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .055);
}

.hb-single-product__summary .product_title {
	margin: 0 0 12px;
	font-size: clamp(1.55rem, 2.4vw, 2.25rem);
	line-height: 1.18;
	letter-spacing: -.02em;
	color: var(--hb-color-text);
}

.hb-single-product__summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	font-size: .9rem;
}

.hb-single-product__summary .star-rating {
	margin: 0;
}

.hb-single-product__summary .woocommerce-review-link {
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

.hb-single-product__summary .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	color: var(--hb-color-primary-dark);
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
}

.hb-single-product__summary .price del {
	order: -1;
	font-size: 1rem;
	font-weight: 500;
	color: var(--hb-color-text-muted);
}

.hb-single-product__summary .price ins {
	text-decoration: none;
}

.hb-single-product__summary .woocommerce-product-details__short-description {
	margin: 0 0 22px;
	padding: 18px 0;
	border-top: 1px solid var(--hb-color-border);
	border-bottom: 1px solid var(--hb-color-border);
	color: #4d4d4d;
	font-size: .98rem;
	line-height: 1.75;
}

/* Stock */
.hb-single-product__summary .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
}

.hb-single-product__summary .stock.in-stock {
	background: rgba(26, 122, 60, .09);
	color: var(--hb-color-success);
}

.hb-single-product__summary .stock.out-of-stock {
	background: rgba(192, 57, 43, .08);
	color: var(--hb-color-danger);
}

/* Variations */
.hb-single-product__summary .variations {
	width: 100%;
	margin: 0 0 14px;
	border: 0;
}

.hb-single-product__summary .variations td,
.hb-single-product__summary .variations th {
	display: block;
	width: 100%;
	padding: 0 0 9px;
	text-align: left;
	border: 0;
}

.hb-single-product__summary .variations label {
	display: block;
	margin-bottom: 7px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--hb-color-text);
}

.hb-single-product__summary .variations select {
	width: 100%;
	min-height: 48px;
	padding: 0 42px 0 14px;
	border: 1px solid var(--hb-color-border);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: var(--hb-color-text);
}

.hb-single-product__summary .reset_variations {
	display: inline-block;
	margin: 4px 0 12px;
	font-size: .82rem;
	color: var(--hb-color-text-muted);
}

/* Cart */
.hb-single-product__summary form.cart {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
	margin: 0;
}

.hb-single-product__summary form.cart .quantity {
	margin: 0;
}

.hb-single-product__summary form.cart .qty {
	width: 100%;
	height: 50px;
	min-height: 50px;
	padding: 0 10px;
	border: 1px solid var(--hb-color-border);
	border-radius: 10px;
	background: #fff;
	font-size: 1rem;
	text-align: center;
}

.hb-single-product__summary .single_add_to_cart_button,
.hb-single-product__summary button.button {
	width: 100%;
	height: 50px;
	min-height: 50px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--hb-color-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(26, 122, 60, .16);
	transition: transform var(--hb-transition-fast), background-color var(--hb-transition-fast), box-shadow var(--hb-transition-fast);
}

.hb-single-product__summary .single_add_to_cart_button:hover,
.hb-single-product__summary .single_add_to_cart_button:focus {
	background: var(--hb-color-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(26, 122, 60, .2);
}

.hb-single-product__summary .single_add_to_cart_button.disabled,
.hb-single-product__summary .single_add_to_cart_button:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

.hb-single-product__summary .hb-btn--whatsapp-inline {
	margin-top: 10px;
	min-height: 48px;
	border-radius: 10px;
	font-weight: 750;
	box-shadow: none;
}

/* Product metadata */
.hb-single-product__summary .product_meta {
	display: grid;
	gap: 7px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--hb-color-border);
	font-size: .83rem;
	color: var(--hb-color-text-muted);
}

.hb-single-product__summary .product_meta > span {
	display: block;
	margin: 0;
}

.hb-single-product__summary .product_meta a {
	color: var(--hb-color-text);
	text-decoration: none;
}

.hb-single-product__summary .product_meta a:hover {
	color: var(--hb-color-primary);
}

/* Details / tabs */
.hb-single-product > .hb-container:last-child {
	padding-bottom: var(--hb-space-7);
}

.hb-single-product .woocommerce-tabs {
	margin: 0 0 var(--hb-space-7);
	padding: 0;
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 18px;
	box-shadow: var(--hb-shadow-sm);
	overflow: hidden;
}

.hb-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0 8px;
	border-bottom: 1px solid var(--hb-color-border);
	overflow-x: auto;
}

.hb-single-product .woocommerce-tabs ul.tabs::before,
.hb-single-product .woocommerce-tabs ul.tabs::after {
	display: none;
}

.hb-single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	white-space: nowrap;
}

.hb-single-product .woocommerce-tabs ul.tabs li::before,
.hb-single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.hb-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 17px 18px 15px;
	border-bottom: 3px solid transparent;
	color: var(--hb-color-text-muted);
	font-weight: 700;
	text-decoration: none;
}

.hb-single-product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--hb-color-primary);
	color: var(--hb-color-primary);
}

.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: none;
	margin: 0;
	padding: clamp(20px, 4vw, 36px);
	line-height: 1.8;
	color: #444;
}

.hb-single-product .woocommerce-Tabs-panel h2 {
	margin-top: 0;
	color: var(--hb-color-text);
}

.hb-single-product .woocommerce-Tabs-panel table {
	width: 100%;
	border-collapse: collapse;
}

.hb-single-product .woocommerce-Tabs-panel table th,
.hb-single-product .woocommerce-Tabs-panel table td {
	padding: 11px 12px;
	border: 1px solid var(--hb-color-border);
}

/* Reviews */
.hb-single-product #reviews ol.commentlist {
	margin: 0 0 22px;
	padding: 0;
}

.hb-single-product #reviews #comments ol.commentlist li {
	margin-bottom: 14px;
	padding: 16px;
	border: 1px solid var(--hb-color-border);
	border-radius: 12px;
	background: #fff;
}

/* Related / upsells */
.hb-single-product .related.products,
.hb-single-product .upsells.products {
	margin: 0 0 var(--hb-space-7);
}

.hb-single-product .related.products > h2,
.hb-single-product .upsells.products > h2 {
	margin: 0 0 18px;
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	line-height: 1.3;
}

.hb-single-product .related.products ul.products,
.hb-single-product .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-single-product .related.products ul.products li.product,
.hb-single-product .upsells.products ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}

@media (max-width: 1023px) {
	.hb-single-product__layout {
		grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
		gap: 24px;
	}

	.hb-single-product__summary {
		padding: 22px;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.hb-single-product__breadcrumb {
		padding-top: 12px;
		font-size: .8rem;
		overflow-x: auto;
		white-space: nowrap;
	}

	.hb-single-product__layout {
		display: block;
		padding-top: 10px;
		padding-bottom: 28px;
	}

	.hb-single-product__gallery {
		margin-bottom: 18px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
		border-radius: 14px;
	}

	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 7px;
		margin-top: 9px;
	}

	.hb-single-product__gallery .hb-badge--sale {
		top: 10px;
		left: 10px;
	}

	.hb-single-product__summary {
		padding: 20px 16px;
		border-radius: 14px;
		box-shadow: none;
	}

	.hb-single-product__summary .product_title {
		font-size: 1.45rem;
	}

	.hb-single-product__summary .price {
		font-size: 1.55rem;
	}

	.hb-single-product__summary form.cart {
		grid-template-columns: 82px minmax(0, 1fr);
	}

	.hb-single-product .woocommerce-tabs {
		border-radius: 14px;
	}

	.hb-single-product .woocommerce-tabs ul.tabs {
		padding: 0 4px;
	}

	.hb-single-product .woocommerce-tabs ul.tabs li a {
		padding: 14px 12px 12px;
		font-size: .86rem;
	}

	.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 20px 16px;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 420px) {
	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hb-single-product__summary form.cart {
		grid-template-columns: 1fr;
	}

	.hb-single-product__summary form.cart .quantity,
	.hb-single-product__summary form.cart .qty {
		width: 100%;
	}
}

.hb-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hb-space-3);
	padding: var(--hb-space-3) 0;
	border-bottom: 1px solid var(--hb-color-border);
	margin-bottom: var(--hb-space-4);
}

/* Breadcrumb + archive header (archive-product.php) */

.hb-archive__breadcrumb {
	padding: var(--hb-space-4) var(--hb-space-4) 0;
	font-size: var(--hb-font-size-sm);
	color: var(--hb-color-text-muted);
}

.hb-archive__breadcrumb a {
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

.hb-archive__breadcrumb a:hover {
	color: var(--hb-color-primary);
}

.hb-archive-header--card {
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-4) var(--hb-space-5);
	margin-top: var(--hb-space-4);
}

.hb-archive-header__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hb-space-3);
}

.hb-archive-header__title {
	font-size: 1.3125rem;
	font-weight: 700;
	margin: 0;
	color: var(--hb-color-text);
	display: inline;
}

.hb-archive-header__count {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--hb-color-primary-dark);
	padding: 3px var(--hb-space-3);
	border-radius: 999px;
	background: color-mix(in srgb, var(--hb-color-primary) 12%, white);
}

/* Collapsible category description — CSS-only (checkbox hack, matches the
   filter-drawer pattern already used elsewhere in this theme) so a long
   SEO paragraph doesn't push the product grid below the fold on first load. */
.hb-archive-header__description {
	margin-top: var(--hb-space-3);
	max-width: 720px;
	color: var(--hb-color-text-muted);
	font-size: var(--hb-font-size-sm);
	line-height: 1.7;
	max-height: 2.9em;
	overflow: hidden;
	transition: max-height var(--hb-transition-base);
}

.hb-archive-header__description p {
	margin: 0 0 var(--hb-space-2);
}

.hb-archive-header__description p:last-child {
	margin-bottom: 0;
}

.hb-archive-header__desc-more {
	display: inline-block;
	margin-top: var(--hb-space-2);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hb-color-accent);
	cursor: pointer;
}

.hb-archive-header__desc-more-text-open {
	display: none;
}

.hb-archive-header__desc-toggle:checked ~ .hb-archive-header__description {
	max-height: 600px;
}

.hb-archive-header__desc-toggle:checked ~ .hb-archive-header__desc-more .hb-archive-header__desc-more-text-closed {
	display: none;
}

.hb-archive-header__desc-toggle:checked ~ .hb-archive-header__desc-more .hb-archive-header__desc-more-text-open {
	display: inline;
}

.hb-archive {
	padding-bottom: var(--hb-space-6);
}

/* The main shop/category grid — this was previously unstyled, falling
   back to Storefront's default float layout. Explicit grid, 2 cols
   mobile / 4 cols desktop, matching the product card design system. */
.hb-archive ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hb-space-4);
	list-style: none;
	margin: var(--hb-space-4) 0 var(--hb-space-2);
	padding: 0;
}

/**
 * BUG FIX — phantom blank card as the first grid cell.
 * Storefront (parent theme) applies a classic float clearfix to every
 * ul.products via `::before`/`::after { content: ""; display: table; }`,
 * meant to clear floated li.product children in its own default layout.
 * Once we switch ul.products to display:grid above, that clearfix
 * pseudo-element stops being an invisible layout hack and becomes a real
 * (empty) grid item instead — it was occupying the first cell of the
 * grid, ahead of the first actual product, rendering as a blank card
 * with no content and no link (rule 2: fix by overriding the specific
 * behavior, not by hunting for a phantom template bug).
 */
.hb-archive ul.products::before,
.hb-archive ul.products::after {
	content: none;
	display: none;
}

.hb-archive ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
}

/* Load More button */

.hb-load-more {
	display: flex;
	justify-content: center;
	padding: var(--hb-space-6) 0;
}

.hb-load-more .hb-btn {
	min-width: 200px;
}

.hb-load-more .hb-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.hb-shop-toolbar__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--hb-touch-target-min);
	padding: 0 var(--hb-space-4);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	background: var(--hb-color-bg);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hb-shop-toolbar__filter-toggle::before {
	content: "\2699";
}

.hb-shop-toolbar__sort select {
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-2) var(--hb-space-3);
	font-size: 13px;
	background: var(--hb-color-bg);
}

.hb-filter-drawer-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hb-filter-drawer {
	position: fixed;
	top: 0;
	right: -100%;
	width: min(85vw, 360px);
	height: 100%;
	background: var(--hb-color-bg);
	z-index: 1000;
	overflow-y: auto;
	padding: var(--hb-space-5);
	transition: right var(--hb-transition-base);
}

.hb-filter-drawer-toggle:checked ~ .hb-filter-drawer {
	right: 0;
}

.hb-filter-drawer__close {
	display: inline-block;
	margin-bottom: var(--hb-space-4);
	cursor: pointer;
	font-weight: 600;
}

.hb-filter-drawer__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 900;
	display: none;
}

.hb-filter-drawer-toggle:checked ~ .hb-filter-drawer__overlay {
	display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.hb-footer {
	background: var(--hb-color-bg-alt);
	border-top: 1px solid var(--hb-color-border);
	padding-top: var(--hb-space-7);
	margin-top: var(--hb-space-7);
}

.hb-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hb-space-6);
	padding-bottom: var(--hb-space-6);
}

.hb-footer__col-title {
	font-size: var(--hb-font-size-base);
	font-weight: 700;
	margin: 0 0 var(--hb-space-3);
	color: var(--hb-color-text);
}

.hb-footer__logo img {
	max-height: 36px;
	width: auto;
}

.hb-footer__site-name {
	font-size: var(--hb-font-size-lg);
	font-weight: 800;
	margin: 0 0 var(--hb-space-2);
}

.hb-footer__about-text {
	color: var(--hb-color-text-muted);
	font-size: var(--hb-font-size-sm);
	line-height: 1.7;
	margin: var(--hb-space-2) 0 0;
	max-width: 320px;
}

.hb-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hb-space-2);
	font-size: var(--hb-font-size-sm);
}

.hb-footer__links a {
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

.hb-footer__links a:hover {
	color: var(--hb-color-primary);
}

.hb-footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hb-space-2);
	font-size: var(--hb-font-size-sm);
}

.hb-footer__contact-list li {
	display: flex;
	align-items: center;
	gap: var(--hb-space-2);
	flex-wrap: wrap;
}

.hb-footer__contact-label {
	color: var(--hb-color-text-muted);
	min-width: 110px;
}

.hb-footer__contact-list a {
	color: var(--hb-color-primary-dark);
	text-decoration: none;
	font-weight: 600;
	direction: ltr;
}

.hb-footer__contact-list span:not(.hb-footer__contact-label) {
	font-weight: 600;
	direction: ltr;
}

.hb-footer__bottom {
    border-top: 1px solid var(--hb-color-border);
    padding-top: 20px;
    font-size: var(--hb-font-size-sm);
    color: var(--hb-color-text-muted);
    text-align: center;
}

.hb-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (min-width: 768px) {
	.hb-mobile-menu-toggle {
		display: none;
	}

	.hb-header__site-title {
		font-size: var(--hb-font-size-xl);
		max-width: none;
	}

	.hb-header__branding img,
	.hb-header__branding .custom-logo {
		height: 48px;
		max-width: 240px;
	}

	.hb-hero {
		padding: calc(var(--hb-space-8) + var(--hb-space-4)) var(--hb-space-7);
	}

	.hb-archive-header--card {
		padding: var(--hb-space-5) var(--hb-space-6);
	}

	.hb-archive-header__title {
		font-size: 1.625rem;
	}

	.hb-archive ul.products {
		grid-template-columns: repeat(4, 1fr);
	}

	.hb-hero__title {
		font-size: 2.5rem;
	}

	.hb-hero__subtitle {
		font-size: var(--hb-font-size-lg);
	}

	.hb-header__nav-row {
		display: block;
	}

	.hb-bottom-nav {
		display: none;
	}

	.hb-footer {
		padding-bottom: var(--hb-space-6);
	}

	.hb-product-carousel__list > li {
		flex: 0 0 calc(25% - (var(--hb-space-4) * 3 / 4));
	}

	.hb-trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.hb-how-to-order__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hb-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	}


	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.hb-product-carousel__list > li {
		flex: 0 0 calc(25% - (var(--hb-space-4) * 3 / 4));
	}
}

/* ========================================================================
   FINAL POLISH — dynamic header navigation + sharp product gallery
   ======================================================================== */
@media (min-width: 768px) {
	.hb-header__nav-row {
		display: block;
		background: #fff;
		border-top: 1px solid rgba(0,0,0,.06);
		box-shadow: 0 4px 18px rgba(0,0,0,.035);
	}

	.hb-mega-menu {
		position: relative;
	}

	.hb-mega-menu__list {
		align-items: stretch;
		gap: 2px;
	}

	.hb-mega-menu__list > .menu-item,
	.hb-mega-menu__item {
		position: relative;
	}

	.hb-mega-menu__list > .menu-item > a,
	.hb-mega-menu__link {
		display: flex;
		align-items: center;
		gap: 7px;
		min-height: 48px;
		padding: 0 17px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 700;
		color: var(--hb-color-text);
		text-decoration: none;
		transition: background-color .18s ease, color .18s ease;
	}

	.hb-mega-menu__list > .menu-item:hover > a,
	.hb-mega-menu__list > .menu-item:focus-within > a,
	.hb-mega-menu__link:hover,
	.hb-mega-menu__link:focus {
		background: var(--hb-color-bg-alt);
		color: var(--hb-color-primary);
	}

	/* WordPress dynamic menu classes — keep the old dropdown styling. */
	.hb-mega-menu .menu-item-has-children > a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		margin-left: 3px;
	}

	.hb-mega-menu .menu-item-has-children > .sub-menu,
	.hb-mega-menu__sublist {
		position: absolute;
		top: calc(100% - 1px);
		left: 0;
		z-index: 999;
		display: none;
		min-width: 235px;
		margin: 0;
		padding: 9px;
		list-style: none;
		background: #fff;
		border: 1px solid var(--hb-color-border);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 14px 35px rgba(0,0,0,.10);
	}

	.hb-mega-menu .menu-item-has-children:hover > .sub-menu,
	.hb-mega-menu .menu-item-has-children:focus-within > .sub-menu,
	.hb-mega-menu__item.has-children:hover > .hb-mega-menu__sublist,
	.hb-mega-menu__item.has-children:focus-within > .hb-mega-menu__sublist {
		display: block;
	}

	.hb-mega-menu .sub-menu .menu-item,
	.hb-mega-menu__sublist li {
		position: relative;
		list-style: none;
	}

	.hb-mega-menu .sub-menu a,
	.hb-mega-menu__sublist a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 42px;
		padding: 9px 12px;
		border-radius: 7px;
		color: var(--hb-color-text);
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
	}

	.hb-mega-menu .sub-menu a:hover,
	.hb-mega-menu .sub-menu a:focus,
	.hb-mega-menu__sublist a:hover,
	.hb-mega-menu__sublist a:focus {
		background: var(--hb-color-bg-alt);
		color: var(--hb-color-primary);
	}

	.hb-mega-menu .sub-menu .menu-item-has-children > .sub-menu {
		top: -10px;
		left: calc(100% + 2px);
		border-radius: 10px;
	}
}

/* Product gallery: never blend or filter the original product photo. */
.hb-single-product__gallery .woocommerce-product-gallery__wrapper,
.hb-single-product__gallery .woocommerce-product-gallery__image {
	background: #fff;
}

.hb-single-product__gallery .woocommerce-product-gallery__image img,
.hb-single-product__gallery .flex-control-thumbs img {
	filter: none !important;
	mix-blend-mode: normal !important;
	image-rendering: auto;
}

.hb-single-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
}

.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
	padding: 14px;
	box-shadow: 0 8px 30px rgba(0,0,0,.045);
}

/* Compact, premium related/upsell cards: exactly 3 columns on desktop. */
.hb-single-product .related.products ul.products,
.hb-single-product .upsells.products ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 920px;
	gap: 14px;
}

.hb-single-product .related.products,
.hb-single-product .upsells.products {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.hb-single-product .related.products > h2,
.hb-single-product .upsells.products > h2 {
	margin-bottom: 14px;
}

.hb-single-product .related.products .hb-product-card,
.hb-single-product .upsells.products .hb-product-card {
	border-radius: 11px;
	box-shadow: 0 2px 10px rgba(0,0,0,.045);
}

.hb-single-product .related.products .hb-product-card__image,
.hb-single-product .upsells.products .hb-product-card__image {
	aspect-ratio: 1 / .88;
}

.hb-single-product .related.products .hb-product-card__body,
.hb-single-product .upsells.products .hb-product-card__body {
	padding: 9px 10px 7px;
	gap: 3px;
}

.hb-single-product .related.products .hb-product-card__title,
.hb-single-product .upsells.products .hb-product-card__title {
	font-size: 13px;
	line-height: 1.35;
}

.hb-single-product .related.products .hb-product-card__price,
.hb-single-product .upsells.products .hb-product-card__price {
	font-size: 13px;
}

.hb-single-product .related.products .hb-product-card__actions,
.hb-single-product .upsells.products .hb-product-card__actions {
	padding: 0 10px 10px;
}

.hb-single-product .related.products .hb-product-card__actions .button,
.hb-single-product .upsells.products .hb-product-card__actions .button {
	min-height: 38px;
	border-radius: 8px;
	font-size: 12px;
}

@media (max-width: 767px) {
	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		max-width: none;
	}

	.hb-single-product .related.products,
	.hb-single-product .upsells.products {
		max-width: none;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
		padding: 8px;
	}
}

/* Stronger premium single-product presentation. */
.hb-single-product__layout {
	grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
	gap: clamp(28px, 4.5vw, 68px);
}

.hb-single-product__summary {
	border-color: rgba(0,0,0,.08);
	box-shadow: 0 18px 50px rgba(0,0,0,.065);
}

.hb-single-product__summary .product_title {
	font-weight: 800;
}

.hb-single-product__summary .price {
	padding: 12px 14px;
	border-radius: 11px;
	background: var(--hb-color-bg-alt);
}

.hb-single-product__summary form.cart {
	margin-top: 8px;
}

.hb-single-product__summary .single_add_to_cart_button {
	min-height: 54px;
	border-radius: 11px;
	font-size: 1.02rem;
}

.hb-single-product .woocommerce-tabs {
	box-shadow: 0 8px 28px rgba(0,0,0,.045);
}

@media (max-width: 767px) {
	.hb-single-product__layout {
		grid-template-columns: 1fr;
	}

	.hb-single-product__summary {
		box-shadow: 0 8px 24px rgba(0,0,0,.045);
	}
}

/* ========================================================================
   SINGLE PRODUCT — FINAL PRODUCTION LAYOUT
   This block intentionally comes last so it wins over Storefront/WooCommerce
   loop defaults and the earlier exploratory single-product rules.
   ======================================================================== */

/* Header / dynamic WordPress menu */
@media (min-width: 768px) {
	.hb-header__nav-row {
		display: block !important;
		background: #fff;
		border-top: 1px solid #edf0ed;
		border-bottom: 1px solid #e7ebe7;
		box-shadow: 0 6px 18px rgba(24, 53, 34, .045);
	}

	.hb-header__nav-row > .hb-container {
		max-width: 1280px;
	}

	.hb-mega-menu__list,
	.hb-mega-menu__list > li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.hb-mega-menu__list {
		display: flex !important;
		align-items: stretch;
		justify-content: center;
		gap: 2px;
	}

	.hb-mega-menu__list > li {
		position: relative;
	}

	.hb-mega-menu__list > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		padding: 0 20px;
		border-radius: 7px;
		color: #202820;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		transition: color .18s ease, background-color .18s ease;
	}

	.hb-mega-menu__list > li:hover > a,
	.hb-mega-menu__list > li:focus-within > a,
	.hb-mega-menu__list > li.current-menu-item > a,
	.hb-mega-menu__list > li.current-menu-ancestor > a {
		background: #f0f7f2;
		color: var(--hb-color-primary);
	}

	.hb-mega-menu .menu-item-has-children > a::after {
		content: '';
		width: 7px;
		height: 7px;
		margin-left: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
	}

	.hb-mega-menu .sub-menu,
	.hb-mega-menu__sublist {
		position: absolute;
		top: calc(100% - 1px);
		left: 0;
		z-index: 1000;
		display: none;
		min-width: 245px;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #fff;
		border: 1px solid #e3e8e3;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 18px 40px rgba(22, 42, 27, .12);
	}

	.hb-mega-menu .menu-item-has-children:hover > .sub-menu,
	.hb-mega-menu .menu-item-has-children:focus-within > .sub-menu,
	.hb-mega-menu__item.has-children:hover > .hb-mega-menu__sublist,
	.hb-mega-menu__item.has-children:focus-within > .hb-mega-menu__sublist {
		display: block;
	}

	.hb-mega-menu .sub-menu li,
	.hb-mega-menu__sublist li {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.hb-mega-menu .sub-menu a,
	.hb-mega-menu__sublist a {
		display: flex;
		align-items: center;
		min-height: 42px;
		padding: 9px 12px;
		border-radius: 8px;
		color: #253026;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
	}

	.hb-mega-menu .sub-menu a:hover,
	.hb-mega-menu .sub-menu a:focus,
	.hb-mega-menu__sublist a:hover,
	.hb-mega-menu__sublist a:focus {
		background: #f0f7f2;
		color: var(--hb-color-primary);
	}

	.hb-mega-menu .sub-menu .menu-item-has-children > .sub-menu {
		top: -9px;
		left: calc(100% + 5px);
		border-radius: 10px;
	}
}

/* Main product area */
.hb-single-product__layout {
	grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr) !important;
	gap: clamp(30px, 4vw, 60px) !important;
	align-items: start;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.hb-single-product__gallery {
	min-width: 0;
}

.hb-single-product__gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
	position: relative;
	min-height: 520px;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #e8ece8;
	border-radius: 20px;
	box-shadow: 0 14px 45px rgba(24, 45, 28, .07);
	overflow: hidden;
}

.hb-single-product__gallery .woocommerce-product-gallery__image {
	width: 100%;
	background: #fff !important;
}

.hb-single-product__gallery .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;	
	width: 100%;
	min-height: 520px;
	background: #fff !important;
}

.hb-single-product__gallery .woocommerce-product-gallery__image img {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 510px !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	image-rendering: auto;
}

.hb-single-product__gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hb-single-product__gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
}

.hb-single-product__gallery .flex-control-thumbs img {
	display: block;
	width: 100% !important;
	height: 82px !important;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	background: #fff;
	border: 1px solid #e4e9e4;
	border-radius: 10px;
	padding: 5px;
	filter: none !important;
	mix-blend-mode: normal !important;
}

.hb-single-product__gallery .flex-control-thumbs img.flex-active {
	border: 2px solid var(--hb-color-primary);
	padding: 4px;
}

.hb-single-product__summary {
	padding: 30px !important;
	border: 1px solid #e4e9e4 !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 14px 45px rgba(24, 45, 28, .075) !important;
}

.hb-single-product__summary .product_title {
	font-size: clamp(1.7rem, 2.7vw, 2.35rem) !important;
	line-height: 1.2 !important;
	margin-bottom: 14px !important;
}

.hb-single-product__summary .woocommerce-product-rating {
	margin-bottom: 18px !important;
}

.hb-single-product__summary .price {
	margin: 0 0 18px !important;
	padding: 14px 16px !important;
	border-radius: 12px !important;
	background: #f3f7f3 !important;
	font-size: 1.75rem !important;
}

.hb-single-product__summary .woocommerce-product-details__short-description {
	padding: 18px 0 !important;
	margin-bottom: 18px !important;
}

.hb-single-product__summary form.cart {
	grid-template-columns: 92px minmax(0, 1fr) !important;
	margin-top: 12px !important;
}

.hb-single-product__summary form.cart .qty,
.hb-single-product__summary .single_add_to_cart_button {
	min-height: 54px !important;
	height: 54px !important;
}

.hb-single-product__summary .single_add_to_cart_button {
	font-size: 1rem !important;
}

.hb-single-product__summary .hb-btn--whatsapp-inline {
	min-height: 52px !important;
	margin-top: 12px !important;
	border-radius: 11px !important;
}

.hb-single-product__summary .product_meta {
	margin-top: 22px !important;
	padding-top: 18px !important;
}

/* Details area should span the complete storefront width. */
.hb-single-product > .hb-container:last-child {
	max-width: 1280px !important;
	padding-bottom: 56px;
}

.hb-single-product .woocommerce-tabs {
	width: 100%;
	margin: 0 0 44px !important;
	border: 1px solid #e4e9e4 !important;
	border-radius: 18px !important;
	background: #fff;
	box-shadow: 0 10px 30px rgba(24, 45, 28, .045) !important;
}

.hb-single-product .woocommerce-tabs ul.tabs {
	width: 100%;
	margin: 0 !important;
	padding: 0 12px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	overflow: visible !important;
	border-bottom: 1px solid #e7ebe7;
}

.hb-single-product .woocommerce-tabs ul.tabs li a {
	padding: 16px 18px 14px !important;
	border-bottom: 3px solid transparent;
}

.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 32px !important;
	min-height: 180px;
}

/* Related/upsell: three equal, readable cards in one desktop row. */
.hb-single-product .related.products,
.hb-single-product .upsells.products {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 48px !important;
}

.hb-single-product .related.products > h2,
.hb-single-product .upsells.products > h2 {
	margin: 0 0 20px !important;
	font-size: 1.45rem !important;
	font-weight: 800;
	text-align: left;
}

.hb-single-product .related.products ul.products,
.hb-single-product .upsells.products ul.products {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 22px !important;
	list-style: none !important;
}

.hb-single-product .related.products ul.products::before,
.hb-single-product .related.products ul.products::after,
.hb-single-product .upsells.products ul.products::before,
.hb-single-product .upsells.products ul.products::after {
	display: none !important;
}

.hb-single-product .related.products ul.products li.product,
.hb-single-product .upsells.products ul.products li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hb-single-product .related.products .hb-product-card,
.hb-single-product .upsells.products .hb-product-card {
	width: 100% !important;
	min-height: 100%;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	box-shadow: 0 5px 18px rgba(24, 45, 28, .055);
	background: #fff;
}

.hb-single-product .related.products .hb-product-card__image,
.hb-single-product .upsells.products .hb-product-card__image {
	width: 100%;
	height: 220px !important;
	aspect-ratio: auto !important;
	background: #f8faf8;
}

.hb-single-product .related.products .hb-product-card__image img,
.hb-single-product .upsells.products .hb-product-card__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 16px;
}

.hb-single-product .related.products .hb-product-card__body,
.hb-single-product .upsells.products .hb-product-card__body {
	padding: 14px 15px 8px !important;
	gap: 5px;
}

.hb-single-product .related.products .hb-product-card__title,
.hb-single-product .upsells.products .hb-product-card__title {
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.hb-single-product .related.products .hb-product-card__price,
.hb-single-product .upsells.products .hb-product-card__price {
	font-size: 14px !important;
}

.hb-single-product .related.products .hb-product-card__actions,
.hb-single-product .upsells.products .hb-product-card__actions {
	padding: 0 15px 15px !important;
}

.hb-single-product .related.products .hb-product-card__actions .button,
.hb-single-product .upsells.products .hb-product-card__actions .button {
	min-height: 42px !important;
	border-radius: 9px !important;
	font-size: 13px !important;
}

@media (max-width: 1023px) {
	.hb-single-product__layout {
		grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr) !important;
		gap: 26px !important;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
		min-height: 480px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image img {
		max-height: 430px !important;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}

	.hb-single-product .related.products .hb-product-card__image,
	.hb-single-product .upsells.products .hb-product-card__image {
		height: 180px !important;
	}
}

@media (max-width: 767px) {
	.hb-header__nav-row {
		display: none !important;
	}

	.hb-single-product__layout {
		display: block !important;
		padding-top: 12px;
	}

	.hb-single-product__gallery {
		margin-bottom: 18px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
		min-height: 360px;
		padding: 12px !important;
		border-radius: 15px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image img {
		max-height: 340px !important;
	}

	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 7px;
	}

	.hb-single-product__gallery .flex-control-thumbs img {
		height: 66px !important;
	}

	.hb-single-product__summary {
		padding: 20px 16px !important;
		border-radius: 15px !important;
		box-shadow: 0 8px 24px rgba(24, 45, 28, .05) !important;
	}

	.hb-single-product__summary .product_title {
		font-size: 1.5rem !important;
	}

	.hb-single-product__summary form.cart {
		grid-template-columns: 82px minmax(0, 1fr) !important;
	}

	.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 22px 16px !important;
	}

	.hb-single-product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto !important;
		white-space: nowrap;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.hb-single-product .related.products .hb-product-card__image,
	.hb-single-product .upsells.products .hb-product-card__image {
		height: 155px !important;
	}
}

@media (max-width: 420px) {
	.hb-single-product__summary form.cart {
		grid-template-columns: 1fr !important;
	}

	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ========================================================================
   FINAL REQUESTED POLISH — smaller product title, 4 related products,
   left-aligned header menu + Bangla WhatsApp quick-order CTA.
   ======================================================================== */
@media (min-width: 768px) {
	.hb-header__nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.hb-header__nav-menu {
		flex: 1 1 auto;
		min-width: 0;
	}

	.hb-header__nav-menu .hb-mega-menu__list {
		justify-content: flex-start;
		margin-left: 0 !important;
	}

	.hb-header__quick-order {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 40px;
		padding: 0 15px;
		border-radius: 9px;
		background: #145C2D;
		color: #fff !important;
		font-size: 13px;
		font-weight: 800;
		line-height: 1;
		text-decoration: none !important;
		white-space: nowrap;
		box-shadow: 0 5px 14px rgba(20, 92, 45, .18);
		transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
	}

	.hb-header__quick-order:hover,
	.hb-header__quick-order:focus {
		background: #0F4723;
		color: #fff !important;
		transform: translateY(-1px);
		box-shadow: 0 7px 18px rgba(20, 92, 45, .24);
	}

	.hb-header__quick-order .hb-icon {
		width: 18px;
		height: 18px;
		flex: 0 0 18px;
	}

	/* Product title should be compact and readable, not oversized. */
	.hb-single-product__summary .product_title {
		font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
		line-height: 1.3 !important;
		margin-bottom: 12px !important;
	}

	/* Four equal related-product cards in one row. */
	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}

	.hb-single-product .related.products .hb-product-card__image,
	.hb-single-product .upsells.products .hb-product-card__image {
		height: 205px !important;
	}

	.hb-single-product .related.products > h2,
	.hb-single-product .upsells.products > h2 {
		text-align: left !important;
		font-size: 1.35rem !important;
		margin-bottom: 16px !important;
	}
}

@media (max-width: 767px) {
	.hb-header__quick-order {
		display: none;
	}

	.hb-single-product__summary .product_title {
		font-size: 1.35rem !important;
		line-height: 1.3 !important;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}


/* ========================================================================
   SINGLE PRODUCT — NATIVE WOOCOMMERCE GALLERY FIX + UX CLEANUP
   Keep WooCommerce/FlexSlider in control of slide visibility. Earlier
   versions forced the gallery wrapper/images into flex layout, which can
   make the main image collapse or show the slides incorrectly.
   ======================================================================== */
.hb-single-product,
.hb-single-product * {
	box-sizing: border-box;
}

.hb-single-product__layout {
	width: 100%;
	max-width: 1280px;
	grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr) !important;
	gap: clamp(28px, 3.5vw, 48px) !important;
}

.hb-single-product__gallery {
	width: 100%;
	min-width: 0;
}

.hb-single-product__gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 18px;
	background: #fff;
	border: 1px solid #e5eae5;
	border-radius: 18px;
	box-shadow: 0 10px 32px rgba(24, 45, 28, .055);
}

.hb-single-product__gallery .woocommerce-product-gallery__wrapper {
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.hb-single-product__gallery .woocommerce-product-gallery__image {
	width: 100%;
	background: #fff !important;
}

.hb-single-product__gallery .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 520px;
	background: #fff !important;
}

.hb-single-product__gallery .woocommerce-product-gallery__image img {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 500px !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

/* FlexSlider creates this viewport after initialization. Keep it inside the
   card and let WooCommerce control its height/slide positioning. */
.hb-single-product__gallery .flex-viewport {
	width: 100% !important;
	border-radius: 12px;
}

.hb-single-product__gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 14px 0 0 !important;
	padding: 0 !important;
}

.hb-single-product__gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

.hb-single-product__gallery .flex-control-thumbs img {
	display: block !important;
	width: 100% !important;
	height: 78px !important;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	background: #fff;
	border: 1px solid #e2e8e2;
	border-radius: 9px;
	padding: 5px;
	filter: none !important;
	mix-blend-mode: normal !important;
	cursor: pointer;
}

.hb-single-product__gallery .flex-control-thumbs img.flex-active {
	border: 2px solid var(--hb-color-primary);
	padding: 4px;
}

.hb-single-product__summary {
	width: 100%;
	min-width: 0;
	padding: 26px !important;
	border: 1px solid #e4e9e4 !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 12px 36px rgba(24, 45, 28, .065) !important;
}

.hb-single-product__summary .product_title {
	font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em;
	margin: 0 0 12px !important;
}

.hb-single-product__summary .price {
	font-size: 1.55rem !important;
	padding: 12px 14px !important;
	margin: 0 0 16px !important;
}

.hb-single-product__summary .woocommerce-product-details__short-description {
	padding: 15px 0 !important;
	margin-bottom: 16px !important;
}

/* Keep the description/reviews area genuinely full width. */
.hb-single-product > .hb-container:last-child {
	width: 100%;
	max-width: 1280px !important;
}

.hb-single-product .woocommerce-tabs {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel,
.hb-single-product .woocommerce-tabs .panel {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	box-sizing: border-box;
	margin: 0 !important;
}

.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel > *:first-child {
	margin-top: 0;
}

.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel p,
.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel ul,
.hb-single-product .woocommerce-tabs .woocommerce-Tabs-panel ol {
	max-width: none;
}

/* Exactly four related products on desktop. */
.hb-single-product .related.products ul.products,
.hb-single-product .upsells.products ul.products {
	width: 100% !important;
	max-width: none !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 18px !important;
}

.hb-single-product .related.products ul.products li.product,
.hb-single-product .upsells.products ul.products li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
}

.hb-single-product .related.products .hb-product-card__image,
.hb-single-product .upsells.products .hb-product-card__image {
	height: 190px !important;
	min-height: 0;
}

/* Final single-product layout refinements. */
.hb-single-product .hb-single-product__summary.summary.entry-summary {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Sale badge sits visually inside the product gallery. */
.hb-single-product__gallery {
	position: relative;
}

.hb-single-product__gallery .hb-badge--sale {
	top: 14px !important;
	left: 14px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 11px !important;
	border-radius: 999px !important;
	background: var(--hb-color-accent) !important;
	color: #fff !important;
	font-size: .78rem !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
	border: 2px solid rgba(255, 255, 255, .92);
	z-index: 12;
	pointer-events: none;
}

.hb-single-product__gallery .woocommerce-product-gallery {
	position: relative;
}

/* Prevent a carousel/gallery child from creating page-level horizontal
   overflow. This is a safety net; the actual gallery width is constrained
   above. */
.hb-single-product__gallery,
.hb-single-product__summary,
.hb-single-product > .hb-container:last-child,
.hb-single-product .woocommerce-tabs,
.hb-single-product .related.products {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 1100px) and (min-width: 768px) {
	.hb-single-product__layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr) !important;
		gap: 24px !important;
	}

	.hb-single-product__summary {
		padding: 22px !important;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image a {
		min-height: 440px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image img {
		max-height: 420px !important;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.hb-single-product__layout {
		display: block !important;
		padding-top: 10px;
	}

	.hb-single-product__gallery {
		margin-bottom: 18px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery {
		padding: 10px;
		border-radius: 14px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image a {
		min-height: 350px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image img {
		max-height: 330px !important;
	}

	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 7px;
	}

	.hb-single-product__gallery .flex-control-thumbs img {
		height: 64px !important;
	}

	.hb-single-product__summary {
		padding: 20px 16px !important;
		border-radius: 14px !important;
	}

	.hb-single-product__summary .product_title {
		font-size: 1.35rem !important;
	}

	.hb-single-product .related.products ul.products,
	.hb-single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.hb-single-product .related.products .hb-product-card__image,
	.hb-single-product .upsells.products .hb-product-card__image {
		height: 155px !important;
	}
}

@media (max-width: 420px) {
	.hb-single-product__gallery .woocommerce-product-gallery__image a {
		min-height: 300px;
	}

	.hb-single-product__gallery .woocommerce-product-gallery__image img {
		max-height: 285px !important;
	}

	.hb-single-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ================================================================
 * FINAL SINGLE-PRODUCT SALE RIBBON
 * Keep one sale badge and anchor it to the real WooCommerce gallery.
 * ================================================================ */
.hb-single-product__gallery .woocommerce-product-gallery {
	position: relative;
	overflow: hidden;
}

.hb-single-product__gallery .woocommerce-product-gallery > .hb-single-product-sale-ribbon,
.hb-single-product__gallery .woocommerce-product-gallery > .hb-badge--sale {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	z-index: 30 !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	width: 108px;
	height: 36px;
	box-sizing: border-box;
	padding: 0 14px 0 12px !important;
	border: 0 !important;
	border-radius: 0 0 14px 0 !important;
	background: #145C2D !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 5px 14px rgba(20, 92, 45, .20);
	clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
	pointer-events: none;
}

.hb-single-product__gallery .woocommerce-product-gallery > .hb-single-product-sale-ribbon::after,
.hb-single-product__gallery .woocommerce-product-gallery > .hb-badge--sale::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -7px;
	width: 10px;
	height: 8px;
	background: #0b3f20;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* The badge is moved into the gallery by JS. Do not show a second
 * sibling badge while the page is initializing. */
.hb-single-product__gallery > .hb-badge--sale {
	position: absolute !important;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 767px) {
	.hb-single-product__gallery .woocommerce-product-gallery > .hb-single-product-sale-ribbon,
	.hb-single-product__gallery .woocommerce-product-gallery > .hb-badge--sale {
		width: 98px;
		height: 34px;
		font-size: 11px !important;
		padding-left: 10px !important;
	}
}


/* ========================================================================
 * FINAL SITE-WIDE POLISH — navigation, breadcrumb, WooCommerce notices
 * and footer category links.
 * ======================================================================== */

/* Header navigation: active item uses the former hover treatment;
 * hover/focus is intentionally lighter so the active page remains distinct. */
@media (min-width: 768px) {
	.hb-header__nav-menu .hb-mega-menu__list > li > a,
	.hb-header__nav-menu .hb-mega-menu__list > li > a:visited,
	.hb-header__nav-menu .hb-mega-menu__link {
		transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
	}

	.hb-header__nav-menu .hb-mega-menu__list > li:hover > a,
	.hb-header__nav-menu .hb-mega-menu__list > li:focus-within > a,
	.hb-header__nav-menu .hb-mega-menu__link:hover,
	.hb-header__nav-menu .hb-mega-menu__link:focus {
		background: #f6fbf7 !important;
		color: #145C2D !important;
	}

	.hb-header__nav-menu .hb-mega-menu__list > li.current-menu-item > a,
	.hb-header__nav-menu .hb-mega-menu__list > li.current-menu-ancestor > a,
	.hb-header__nav-menu .hb-mega-menu__list > li.current_page_item > a,
	.hb-header__nav-menu .hb-mega-menu__list > li.current_page_ancestor > a {
		background: #f0f7f2 !important;
		color: #145C2D !important;
		box-shadow: inset 0 -2px 0 #145C2D;
	}
}

/* Storefront breadcrumb: remove the theme's large bottom gap and make the
 * breadcrumb feel like a compact, intentional navigation strip. */
.storefront-breadcrumb {
	margin: 0 !important;
	padding: 10px 0 8px !important;
	background: transparent !important;
	border: 0 !important;
}

.storefront-breadcrumb .col-full,
.storefront-breadcrumb .hb-container {
	margin-bottom: 0 !important;
}

.storefront-breadcrumb .woocommerce-breadcrumb,
.hb-single-product__breadcrumb .woocommerce-breadcrumb {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #777 !important;
}

.storefront-breadcrumb .woocommerce-breadcrumb a,
.hb-single-product__breadcrumb .woocommerce-breadcrumb a {
	color: #66706a !important;
	text-decoration: none !important;
}

.storefront-breadcrumb .woocommerce-breadcrumb a:hover,
.storefront-breadcrumb .woocommerce-breadcrumb a:focus,
.hb-single-product__breadcrumb .woocommerce-breadcrumb a:hover,
.hb-single-product__breadcrumb .woocommerce-breadcrumb a:focus {
	color: #145C2D !important;
}

/* The custom single-product breadcrumb should also have no trailing gap. */
.hb-single-product__breadcrumb {
	padding-top: 10px !important;
	padding-bottom: 6px !important;
	margin-bottom: 0 !important;
}

/* WooCommerce informational notices use the site's primary green. */
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	background-color: #145C2D !important;
	color: #fff !important;
}

.woocommerce-info a,
.woocommerce-noreviews a,
p.no-comments a {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Footer: keep the requested five popular categories stable and predictable. */
.hb-footer__links a {
	transition: color .18s ease, transform .18s ease;
}

.hb-footer__links a:hover,
.hb-footer__links a:focus {
	color: #145C2D !important;
}

/* ========================================================================
 * PROFESSIONAL CART PAGE — visual enhancement only.
 * Native WooCommerce cart, coupon, shipping and checkout behavior remain
 * untouched; these rules only restyle the existing markup produced by the
 * default WooCommerce cart template (form.woocommerce-cart-form and
 * div.cart-collaterals are the two direct children WooCommerce already
 * renders inside div.woocommerce — no template/PHP changes needed).
 *
 * Storefront's #primary/#main page wrapper is left unconstrained (it has
 * no width of its own); the title row, breadcrumb and the .woocommerce
 * row below are each given the exact same max-width + side padding as
 * .hb-container (the class the header and footer already use) so every
 * row on this page lines up with the header/footer edges precisely.
 *
 * Desktop layout: woocommerce-cart-form 75% / cart-collaterals 25%.
 * ======================================================================== */
body.woocommerce-cart .site-content {
	background: #f7f8f6;
}

/* Storefront applies its classic content-area + sidebar percentage layout
 * by default (e.g. #primary at ~64% width, floated, with #secondary
 * beside it) unless the page is explicitly full-width. The Cart page is
 * a plain WP Page — nothing in this child theme turns that layout off
 * for it — so #primary was rendering noticeably narrower than the
 * header/footer's 1280px row. That narrower width was also the reason
 * the 75/25 split looked like it was "wrapping": it wasn't wrapping, its
 * container was just already below the tablet breakpoint. Force full
 * width and drop the (empty, on this page) sidebar column here. */
body.woocommerce-cart #primary,
body.woocommerce-cart #primary.content-area,
body.woocommerce-cart .content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.woocommerce-cart #secondary,
body.woocommerce-cart .widget-area {
	display: none !important;
}

/* Same Storefront content-area/sidebar quirk, applied to single-product
 * pages — this is the CSS half of the woocommerce_get_sidebar removal in
 * inc/woocommerce.php (PHP stops the widgets from querying/rendering at
 * all; this stops the now-empty #primary column from still being
 * constrained to ~64% width as if a sidebar were still beside it). */
body.single-product #primary,
body.single-product #primary.content-area,
body.single-product .content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.single-product #secondary,
body.single-product .widget-area {
	display: none !important;
}

body.woocommerce-cart .entry-header,
body.woocommerce-cart .woocommerce {
	box-sizing: border-box;
	max-width: var(--hb-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
}

body.woocommerce-cart .entry-header {
	padding-top: 28px;
	padding-bottom: 18px;
	margin: 0 auto;
	text-align: left;
}

body.woocommerce-cart .entry-header .entry-title {
	margin: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hb-color-text);
}

/* Two-column layout: the WooCommerce cart shortcode already wraps the
 * form and the collaterals in a single div.woocommerce, so that becomes
 * the flex container — 75% form / 25% totals on desktop.
 * The gap has to be subtracted out of each item's basis, otherwise
 * 75% + 25% + 24px gap adds up to more than 100% and the second column
 * wraps onto its own row instead of sitting beside the first. */
/* BUG FIX: the two-column split was flex-based with each child's
 * max-width calc'd to sum to exactly 100% (75% + 25% - the gap). That
 * budget is exact only if both children use box-sizing:border-box —
 * form.woocommerce-cart-form has a 1px border and wasn't explicitly
 * set to border-box, so its rendered width came out a hair over its
 * calc'd budget, which was enough to trigger flex-wrap and push the
 * totals card onto its own row below the table instead of beside it
 * (exactly what the follow-up screenshot showed). Grid tracks aren't
 * sensitive to this the same way, so switching to Grid removes the
 * failure mode instead of re-tuning the flex-basis math again. */
/* BUG FIX (critical): `.woocommerce` matched more than just the cart
 * shortcode's own wrapper div — something else on the page (rendering
 * inside footer.php, based on the follow-up screenshot) also carries
 * this class, so CSS Grid was auto-placing that unrelated content as
 * a 3rd/4th grid item, scattering the totals card and mixing footer
 * content into the two-column layout. :has() scopes this rule to only
 * the specific .woocommerce div that is a direct parent of the cart
 * form, which cannot match anything else on the page. */
body.woocommerce-cart .woocommerce:has( > form.woocommerce-cart-form ) {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

body.woocommerce-cart .woocommerce:has( > form.woocommerce-cart-form ) > form.woocommerce-cart-form,
body.woocommerce-cart .woocommerce:has( > form.woocommerce-cart-form ) > .cart-collaterals {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	grid-column: auto;
}

@media (max-width: 900px) {
	body.woocommerce-cart .woocommerce:has( > form.woocommerce-cart-form ) {
		grid-template-columns: 1fr;
	}
}

/* Main cart table becomes a clean card while keeping WooCommerce markup. */
body.woocommerce-cart form.woocommerce-cart-form {
	margin: 0;
	padding: 0;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
	overflow: hidden;
}

body.woocommerce-cart table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

body.woocommerce-cart table.shop_table thead th {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--hb-color-border);
	background: #f4f7f4;
	color: #59615b;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.woocommerce-cart table.shop_table td {
	padding: 18px;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	transition: background-color var(--hb-transition-fast);
}

body.woocommerce-cart table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

body.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item:hover td {
	background: #fafbfa;
}

body.woocommerce-cart td.product-remove {
	width: 48px;
	padding-right: 0;
	text-align: center;
}

body.woocommerce-cart a.remove {
	width: 30px;
	height: 30px;
	min-width: 30px;
	margin: 0 auto;
	border: 1px solid #ead7d3 !important;
	border-radius: 50%;
	background: #fff !important;
	color: var(--hb-color-danger) !important;
	font-size: 20px;
	font-weight: 500;
	line-height: 27px;
	transition: background-color var(--hb-transition-fast), color var(--hb-transition-fast), border-color var(--hb-transition-fast);
}

body.woocommerce-cart a.remove:hover,
body.woocommerce-cart a.remove:focus {
	border-color: var(--hb-color-danger) !important;
	background: var(--hb-color-danger) !important;
	color: #fff !important;
}

body.woocommerce-cart td.product-thumbnail {
	width: 90px;
}

body.woocommerce-cart td.product-thumbnail img {
	width: 64px;
	height: 64px;
	margin: 0;
	border: 1px solid #edf0ed;
	border-radius: 10px;
	object-fit: contain;
	background: #fff;
}

body.woocommerce-cart td.product-name {
	font-weight: 700;
	color: var(--hb-color-text);
}

body.woocommerce-cart td.product-name a {
	color: var(--hb-color-text);
	text-decoration: none;
}

body.woocommerce-cart td.product-name a:hover,
body.woocommerce-cart td.product-name a:focus {
	color: var(--hb-color-primary-dark);
}

body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
	font-weight: 700;
	color: var(--hb-color-text);
	white-space: nowrap;
}

body.woocommerce-cart .quantity .qty {
	width: 74px;
	min-height: 42px;
	padding: 0 6px;
	border: 1px solid var(--hb-color-border);
	border-radius: 8px;
	background: #fbfcfb;
	font-weight: 700;
	text-align: center;
}

body.woocommerce-cart td.actions {
	padding: 16px 18px !important;
	background: #fafbfa;
}

body.woocommerce-cart .coupon {
	display: flex;
	align-items: center;
	gap: 8px;
}

body.woocommerce-cart .coupon label {
	display: none;
}

body.woocommerce-cart .coupon #coupon_code {
	width: 190px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hb-color-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
}

body.woocommerce-cart button.button,
body.woocommerce-cart input.button {
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--hb-color-primary);
	border-radius: 8px;
	background: var(--hb-color-primary);
	color: #fff;
	font-weight: 800;
	box-shadow: none;
	transition: background-color var(--hb-transition-fast), border-color var(--hb-transition-fast), transform var(--hb-transition-fast);
}

body.woocommerce-cart button.button:hover,
body.woocommerce-cart button.button:focus,
body.woocommerce-cart input.button:hover,
body.woocommerce-cart input.button:focus {
	border-color: var(--hb-color-primary-dark);
	background: var(--hb-color-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* Update Cart button removed from view per the approved cart redesign —
 * quantity changes now auto-submit via HabiganjBazar.cartQuantity in
 * main.js (native form submit, not AJAX-reimplemented, so WooCommerce's
 * own totals/coupon/shipping recalculation stays untouched). Hidden
 * rather than deleted from the template so it still works as a fallback
 * if JS fails (progressive enhancement). */
body.woocommerce-cart button[name="update_cart"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Quantity +/- stepper buttons — injected by HabiganjBazar.cartQuantity
 * in main.js around the existing native .qty input (which stays the
 * real form field WooCommerce reads; the buttons just adjust its value
 * and dispatch a change event). */
body.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hb-color-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fbfcfb;
}

body.woocommerce-cart .quantity .hb-qty-step {
	width: 28px;
	min-height: 40px;
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-primary-dark);
	font-weight: 800;
	font-size: 1rem;
	flex-shrink: 0;
}

body.woocommerce-cart .quantity .qty {
	width: 40px;
	min-height: 40px;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-weight: 700;
	text-align: center;
}

/* Cart totals card — sits in the 25% column. */
body.woocommerce-cart .cart-collaterals {
	margin: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	margin: 0;
	padding: 22px 22px 24px;
	border: 1px solid var(--hb-color-border);
	border-top: 3px solid var(--hb-color-primary);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .06);
}

body.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--hb-color-border);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

body.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	background: transparent;
	font-size: .9rem;
}

body.woocommerce-cart .cart_totals table.shop_table th {
	width: 46%;
	color: #5c645f;
	font-weight: 400;
}

body.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	font-weight: 400;
	color: var(--hb-color-text);
}

/* Shipping method line wraps onto its own row inside the cell, so give it
 * room and keep the "Change address" link visually secondary. */
body.woocommerce-cart .cart_totals table.shop_table td.woocommerce-shipping-totals {
	line-height: 1.5;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	display: block;
	margin-top: 2px;
	color: var(--hb-color-text-muted);
	font-size: .8rem;
	font-weight: 400;
}

body.woocommerce-cart .cart_totals .shipping-calculator-button {
	color: var(--hb-color-primary-dark);
	font-weight: 400;
}

/* Order total gets its own highlighted chip and is the only bold row —
 * everything above it (subtotal, shipping) stays normal weight. */
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
	padding: 14px 12px;
	border-bottom: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hb-color-primary-dark);
}

body.woocommerce-cart .cart_totals tr.order-total {
	display: table-row;
}

body.woocommerce-cart .cart_totals tbody tr.order-total th,
body.woocommerce-cart .cart_totals tbody tr.order-total td {
	background: var(--hb-color-bg-alt);
}

body.woocommerce-cart .cart_totals tbody tr.order-total th {
	border-radius: 10px 0 0 10px;
}

body.woocommerce-cart .cart_totals tbody tr.order-total td {
	border-radius: 0 10px 10px 0;
}

body.woocommerce-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin: 0;
	padding: 0 20px;
	border-radius: 9px;
	background: var(--hb-color-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(26, 122, 60, .16);
	transition: background-color var(--hb-transition-fast), transform var(--hb-transition-fast), box-shadow var(--hb-transition-fast);
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
	background: var(--hb-color-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 11px 24px rgba(26, 122, 60, .22);
}

/* Cross-sells (if the store shows "you may also like" suggestions in the
 * collaterals column) get a matching card so the column stays cohesive. */
body.woocommerce-cart .cart-collaterals .cross-sells {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
}

body.woocommerce-cart .cart-collaterals .cross-sells h2 {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

body.woocommerce-cart .cart-collaterals .cross-sells ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product {
	padding: 12px 0 0;
	border-top: 1px solid #edf0ed;
}

body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:first-child {
	padding-top: 0;
	border-top: 0;
}

body.woocommerce-cart .cart-collaterals .cross-sells ul.products img {
	border-radius: 10px;
}

body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop {
	text-align: center;
}

body.woocommerce-cart .cart-empty {
	padding: 60px 24px;
	border: 1px dashed var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	color: var(--hb-color-text-muted);
	font-size: 1.05rem;
}

/* Below desktop, stack the form above the totals at full width instead
 * of the 75/25 side-by-side layout. */
@media (max-width: 1023px) {
	body.woocommerce-cart .woocommerce {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	body.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
	body.woocommerce-cart .woocommerce > .cart-collaterals {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: 480px;
		margin: 0 0 0 auto;
	}
}

@media (max-width: 767px) {
	body.woocommerce-cart .entry-header {
		padding-top: 20px;
		padding-bottom: 14px;
	}

	body.woocommerce-cart form.woocommerce-cart-form {
		border-radius: 12px;
		overflow: visible;
	}

	body.woocommerce-cart table.shop_table,
	body.woocommerce-cart table.shop_table tbody,
	body.woocommerce-cart table.shop_table tr,
	body.woocommerce-cart table.shop_table td {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart table.shop_table thead {
		display: none;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 10px 14px;
		padding: 16px;
		border-bottom: 1px solid #edf0ed;
	}

	body.woocommerce-cart table.shop_table td {
		padding: 0;
		border: 0;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-remove {
		position: absolute;
		top: 9px;
		right: 9px;
		width: 30px;
		padding: 0;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: auto;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
		width: 76px;
		height: 76px;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-name {
		grid-column: 2;
		padding-right: 28px;
		font-size: .95rem;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-price,
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-quantity,
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-subtotal {
		grid-column: 2;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-price::before,
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-quantity::before,
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td.product-subtotal::before {
		content: attr(data-title);
		display: inline-block;
		min-width: 72px;
		margin-right: 8px;
		color: #737a75;
		font-size: .78rem;
		font-weight: 700;
	}

	body.woocommerce-cart td.actions {
		padding: 14px !important;
	}

	body.woocommerce-cart .coupon {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	body.woocommerce-cart .coupon #coupon_code {
		width: 100%;
	}

	body.woocommerce-cart button[name="update_cart"] {
		float: none;
		width: 100%;
		margin-top: 10px;
	}

	body.woocommerce-cart .cart-collaterals {
		margin-bottom: 32px;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100%;
		padding: 18px;
		border-radius: 12px;
	}
}

@media (max-width: 480px) {
	body.woocommerce-cart .coupon {
		grid-template-columns: 1fr;
	}

	body.woocommerce-cart .coupon .button {
		width: 100%;
	}
}

/* ========================================================================
 * SIMPLE CHECKOUT PAGE — visual enhancement only.
 * Native WooCommerce checkout behavior (validation, AJAX order-review
 * refresh, payment method switching, place-order submit) is untouched;
 * these rules only restyle the existing markup WooCommerce already
 * outputs (form.checkout, #customer_details, #order_review, #payment).
 * Goal: big readable labels, generous spacing, obvious buttons — a
 * non-technical shopper should never have to guess what to do next.
 * ======================================================================== */
body.woocommerce-checkout .site-content {
	background: #f7f8f6;
}

/* Same Storefront content-area/sidebar quirk as the cart page — force
 * full width so this page's rows line up with the header/footer. */
body.woocommerce-checkout #primary,
body.woocommerce-checkout #primary.content-area,
body.woocommerce-checkout .content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.woocommerce-checkout #secondary,
body.woocommerce-checkout .widget-area {
	display: none !important;
}

/* Applied to .entry-content itself (not just .woocommerce) because this
 * page also has the WhatsApp/IMO ordering-instructions block above the
 * checkout form — everything in the page column should share one
 * consistent left/right edge that matches the header/footer's
 * .hb-container box model. */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .entry-content {
	box-sizing: border-box;
	max-width: var(--hb-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
}

body.woocommerce-checkout .entry-header {
	padding-top: 28px;
	padding-bottom: 10px;
	text-align: left;
}

body.woocommerce-checkout .entry-header .entry-title {
	margin: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hb-color-text);
}

body.woocommerce-checkout .entry-content {
	padding-top: 8px;
	padding-bottom: 48px;
}

/* "Have a coupon?" notice — WooCommerce core markup, just restyled to a
 * calmer rounded banner instead of a hard-edged green block. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--hb-color-border);
	border-left: 4px solid var(--hb-color-primary);
	border-radius: 10px;
	background: #fff;
	color: var(--hb-color-text);
	font-size: .95rem;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

body.woocommerce-checkout .showcoupon {
	color: var(--hb-color-primary-dark);
	font-weight: 700;
	text-decoration: underline;
}

body.woocommerce-checkout .woocommerce-form-coupon {
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--hb-color-border);
	border-radius: 10px;
	background: #fff;
}

body.woocommerce-checkout .woocommerce-form-coupon .form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.woocommerce-checkout .woocommerce-form-coupon input#coupon_code {
	flex: 1 1 220px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--hb-color-border);
	border-radius: 8px;
	font-size: 1rem;
}

/* Two-column checkout row: billing/additional fields left, order
 * review + payment right. WooCommerce outputs #customer_details,
 * #order_review_heading and #order_review as three separate siblings
 * of form.checkout — grid-template-areas places each by name instead of
 * relying on source order, so the standalone heading lands directly
 * above the review card instead of breaking onto its own full-width row
 * (which is what happens with plain flex-wrap here). */
body.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	column-gap: 28px;
	align-items: start;
}

body.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	float: none;
	margin: 0;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	margin: 0 0 20px;
}

/* The heading and the review card share the same grid cell (column 2,
 * row 1) instead of separate rows — a "billing" area spanning two auto
 * rows was inflating row 1's height unpredictably and, combined with
 * align-self, pushed the heading and card down into the middle of the
 * page instead of lining up with the top of the billing card. Both are
 * top-aligned here; margin-top on the card just clears the heading. */
body.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin: 0 0 12px;
}

body.woocommerce-checkout div#order_review {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	width: auto;
	float: none;
	margin: 44px 0 0;
}

/* Billing / additional-info card. */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	margin: 0 0 20px;
	padding: 24px;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
}

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--hb-color-border);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

body.woocommerce-checkout #order_review_heading {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

/* Form rows: bold label above a big, obviously-tappable input. */
body.woocommerce-checkout .form-row {
	margin: 0 0 18px;
}

body.woocommerce-checkout .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--hb-color-text);
}

body.woocommerce-checkout .form-row label .required {
	color: var(--hb-color-danger);
	text-decoration: none;
}

body.woocommerce-checkout .form-row label .optional {
	color: var(--hb-color-text-muted);
	font-weight: 500;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row .select2-selection,
body.woocommerce-checkout .form-row select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--hb-color-border);
	border-radius: 9px;
	background: #fbfcfb;
	color: var(--hb-color-text);
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color var(--hb-transition-fast), box-shadow var(--hb-transition-fast);
}

body.woocommerce-checkout .form-row textarea {
	min-height: 90px;
	padding-top: 12px;
}

body.woocommerce-checkout .form-row .select2-selection {
	display: flex;
	align-items: center;
}

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
	outline: none;
	border-color: var(--hb-color-primary);
	box-shadow: 0 0 0 3px rgba(26, 122, 60, .12);
}

body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
	width: calc(50% - 8px);
	display: inline-block;
}

body.woocommerce-checkout .form-row-first {
	margin-right: 16px;
}

/* Country is fixed to Bangladesh for this store (see
 * habiganj_bazar_simplify_checkout_fields in inc/woocommerce.php) — kept
 * in the DOM because the district/state field's options depend on it,
 * just hidden so the billing form has one less row to fill in. */
body.woocommerce-checkout .form-row.hb-field-hidden {
	display: none !important;
}

body.woocommerce-checkout #ship-to-different-address {
	margin: 0 0 16px;
	font-weight: 700;
}

body.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Order review card. */
body.woocommerce-checkout div#order_review {
	padding: 24px;
	border: 1px solid var(--hb-color-border);
	border-top: 3px solid var(--hb-color-primary);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .06);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 4px;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-name,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td.product-name {
	width: 70%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td.product-total {
	width: 30%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--hb-color-border);
	color: #59615b;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total {
	text-align: right;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	font-weight: 400;
	font-size: .88rem;
	color: var(--hb-color-text);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td.product-name .product-quantity {
	white-space: nowrap;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td.product-total {
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name .variation,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name dl.variation {
	margin: 4px 0 0;
	font-size: .82rem;
	color: var(--hb-color-text-muted);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	padding: 13px 12px;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	font-weight: 400;
	font-size: .92rem;
	color: var(--hb-color-text);
	background: var(--hb-color-bg-alt);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	text-align: left;
	color: #5c645f;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	padding: 14px 12px;
	border-bottom: 0;
	background: color-mix(in srgb, var(--hb-color-primary) 12%, white);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hb-color-primary-dark);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	border-radius: 10px 0 0 10px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-radius: 0 10px 10px 0;
}

/* Payment method — one big, obviously-tappable card per option. */
body.woocommerce-checkout #payment {
	margin-top: 20px;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

body.woocommerce-checkout ul.payment_methods {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method {
	margin: 0 0 12px;
	padding: 16px;
	border: 2px solid var(--hb-color-border);
	border-radius: 12px;
	background: #fbfcfb;
	transition: border-color var(--hb-transition-fast), background-color var(--hb-transition-fast);
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--hb-color-primary);
	background: #f4faf5;
}

body.woocommerce-checkout ul.payment_methods input.input-radio {
	width: 18px;
	height: 18px;
	margin-right: 10px;
	accent-color: var(--hb-color-primary);
	vertical-align: middle;
}

body.woocommerce-checkout ul.payment_methods label {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--hb-color-text);
	cursor: pointer;
}

body.woocommerce-checkout ul.payment_methods .payment_box {
	margin: 10px 0 0 28px;
	padding: 0;
	background: transparent;
	font-size: .9rem;
	color: var(--hb-color-text-muted);
}

body.woocommerce-checkout ul.payment_methods .payment_box::before {
	display: none;
}

/* Place order — big, brand-green, impossible to miss. */
body.woocommerce-checkout .place-order {
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--hb-color-primary);
	color: #fff;
	font-size: 1.08rem;
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(26, 122, 60, .18);
	transition: background-color var(--hb-transition-fast), transform var(--hb-transition-fast), box-shadow var(--hb-transition-fast);
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus {
	background: var(--hb-color-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 11px 24px rgba(26, 122, 60, .24);
}

@media (max-width: 900px) {
	body.woocommerce-checkout form.checkout {
		display: block;
	}

	body.woocommerce-checkout #order_review_heading {
		margin: 0 0 12px;
	}

	body.woocommerce-checkout div#order_review {
		margin: 0;
	}
}

@media (max-width: 480px) {
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-additional-fields,
	body.woocommerce-checkout div#order_review {
		padding: 18px;
		border-radius: 12px;
	}

	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last {
		width: 100%;
		display: block;
	}

	body.woocommerce-checkout .form-row-first {
		margin-right: 0;
	}
}

/* ========================================================================
 * ORDER RECEIVED (THANK YOU) PAGE — visual enhancement only.
 * Content rules are scoped to .woocommerce-order — WooCommerce's own
 * wrapper around this whole section — since it's reliable regardless of
 * the exact body class WordPress assigns to the endpoint. The page-level
 * width fix is scoped to body.woocommerce-order-received AND kept
 * matching the cart/checkout one, since this URL is still technically an
 * endpoint of the Checkout page and may carry either/both body classes.
 * ======================================================================== */
body.woocommerce-order-received #primary,
body.woocommerce-order-received #primary.content-area,
body.woocommerce-order-received .content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.woocommerce-order-received #secondary,
body.woocommerce-order-received .widget-area {
	display: none !important;
}

body.woocommerce-order-received .site-content {
	background: #f7f8f6;
}

/* If a WooCommerce AJAX call (e.g. the cart-count fragment refresh that
 * runs on page load) leaves its loading overlay stuck instead of
 * removing it, the whole page reads as washed-out grey. Safe to hide
 * outright on this page — nothing here is still loading by the time the
 * shopper is looking at their receipt. */
body.woocommerce-order-received .blockUI.blockOverlay {
	display: none !important;
}

/* Force every order-details cell transparent except the one row we
 * intentionally highlight, in case a Storefront/WooCommerce default is
 * shading them. */
.woocommerce-order table.shop_table.order_details th,
.woocommerce-order table.shop_table.order_details td {
	background: transparent !important;
}

body.woocommerce-order-received .entry-header,
body.woocommerce-order-received .entry-content {
	box-sizing: border-box;
	max-width: var(--hb-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
}

body.woocommerce-order-received .entry-header {
	padding-top: 28px;
	padding-bottom: 10px;
	text-align: left;
}

body.woocommerce-order-received .entry-header .entry-title {
	margin: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hb-color-text);
}

body.woocommerce-order-received .entry-content {
	padding-top: 8px;
	padding-bottom: 48px;
}

/* Success message. */
.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	padding: 18px 22px;
	border: 1px solid #cfe8d6;
	border-left: 4px solid var(--hb-color-primary);
	border-radius: 12px;
	background: #f2faf4;
	color: var(--hb-color-primary-dark);
	font-size: 1.05rem;
	font-weight: 700;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	display: none;
}

/* Order overview stat grid (number / date / email / total / payment). */
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
	margin: 0 0 24px;
	padding: 22px;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
	list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--hb-color-text-muted);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hb-color-text);
}

/* Payment-method note (e.g. "Pay with cash upon delivery.") printed by
 * the gateway's woocommerce_thankyou_{method} hook, right after the
 * overview grid. */
.woocommerce-order > p:not(.woocommerce-thankyou-order-received) {
	margin: -8px 0 28px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-text-muted);
	font-size: .9rem;
}

/* Section headings ("Order details"; overridden further down for the
 * address column titles, which need a smaller/bordered treatment). */
.woocommerce-order h2 {
	margin: 0 0 16px;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

/* Order details table. */
.woocommerce-order table.shop_table.order_details {
	width: 100%;
	margin: 0 0 32px;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
}

.woocommerce-order table.shop_table.order_details thead th {
	padding: 15px 20px;
	border: 0;
	border-bottom: 1px solid var(--hb-color-border);
	background: #f4f7f4 !important;
	color: #59615b;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce-order table.shop_table.order_details thead th.product-total {
	text-align: right;
}

.woocommerce-order table.shop_table.order_details tbody td,
.woocommerce-order table.shop_table.order_details tfoot th,
.woocommerce-order table.shop_table.order_details tfoot td {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	font-weight: 400;
	color: var(--hb-color-text);
}

.woocommerce-order table.shop_table.order_details tbody td.product-total,
.woocommerce-order table.shop_table.order_details tfoot td {
	text-align: right;
}

.woocommerce-order table.shop_table.order_details tfoot th {
	font-weight: 400;
	color: #5c645f;
}

.woocommerce-order table.shop_table.order_details tfoot tr:last-child td,
.woocommerce-order table.shop_table.order_details tfoot tr:last-child th {
	border-bottom: 0;
}

.woocommerce-order table.shop_table.order_details tfoot tr.order-total th,
.woocommerce-order table.shop_table.order_details tfoot tr.order-total td {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hb-color-primary-dark);
	background: var(--hb-color-bg-alt) !important;
}

/* Billing/Shipping address columns. */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.woocommerce-order .woocommerce-column--billing-address,
.woocommerce-order .woocommerce-column--shipping-address {
	width: auto;
	float: none;
	margin: 0;
	padding: 22px;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 40, 25, .05);
}

.woocommerce-order .woocommerce-column__title {
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--hb-color-border);
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--hb-color-text);
}

.woocommerce-order .woocommerce-column address {
	font-style: normal;
	line-height: 1.7;
	color: var(--hb-color-text);
}

@media (max-width: 480px) {
	.woocommerce-order .woocommerce-thankyou-order-received,
	.woocommerce-order ul.woocommerce-order-overview,
	.woocommerce-order .woocommerce-column--billing-address,
	.woocommerce-order .woocommerce-column--shipping-address {
		padding: 18px;
		border-radius: 12px;
	}

	.woocommerce-order table.shop_table.order_details thead th,
	.woocommerce-order table.shop_table.order_details tbody td,
	.woocommerce-order table.shop_table.order_details tfoot th,
	.woocommerce-order table.shop_table.order_details tfoot td {
		padding: 12px 14px;
	}
}


/* ========================================================================
   BUG FIX — Add to Cart button wrapping to 2 lines with ghost overflow text.
   The quantity+button row above has accumulated 7 separate, partly-
   conflicting rule blocks over time (display:grid with grid-template-columns
   redefined at several breakpoints, some !important, some not, plus a
   fixed `height` on the button that clips/overflows once its text wraps).
   Rather than continue patching an order-dependent grid (fragile — the
   two children swap visual position if DOM order or column order ever
   drifts from what the grid rule assumes), this switches the row to
   Flexbox with each element sized by its own class, which can't
   mis-assign quantity/button regardless of markup order. white-space:
   nowrap + min-height (not a fixed height) on the button means its text
   can never wrap into a clipped second line again. Placed at the very
   end of the file so it wins over every earlier conflicting declaration
   regardless of !important (equal specificity — last declaration wins). */
.hb-single-product__summary form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 10px !important;
}

.hb-single-product__summary form.cart .quantity {
	flex: 0 0 92px !important;
	margin: 0 !important;
}

.hb-single-product__summary form.cart .qty {
	width: 100% !important;
	height: 54px !important;
	min-height: 54px !important;
}

.hb-single-product__summary .single_add_to_cart_button {
	flex: 1 1 200px !important;
	height: auto !important;
	min-height: 54px !important;
	padding: 0 20px !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

@media (max-width: 420px) {
	.hb-single-product__summary form.cart .quantity {
		flex-basis: 100% !important;
	}
	.hb-single-product__summary .single_add_to_cart_button {
		flex-basis: 100% !important;
	}
}

/* BUG FIX — hide the redundant Reviews/Additional-info tab-panel headings
   (see the matching PHP-side fix for the Description tab in
   inc/woocommerce.php). Class/ID are WooCommerce-core-stable and never
   used for merchant-written content, so this can't hide real text. */
.hb-single-product .woocommerce-tabs .woocommerce-Reviews-title,
.hb-single-product .woocommerce-tabs #tab-additional_information > h2:first-child {
	display: none !important;
}

/* Trust row (stock status + same-day delivery) — see habiganj_bazar_single_trust_row()
   in inc/woocommerce.php. Matches the approved single-product mockup. */
.hb-single-product__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.hb-single-product__trust li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--hb-color-text-muted);
}

.hb-single-product__trust li.is-in-stock {
	color: var(--hb-color-primary-dark);
	font-weight: 600;
}

.hb-single-product__trust li.is-out-of-stock {
	color: var(--hb-color-accent);
	font-weight: 600;
}

.hb-single-product__trust i {
	font-style: normal;
	font-size: 13px;
	line-height: 1;
}

/* ========================================================================
   CHECKOUT — requested polish pass
   1) Page felt oversized — the order-review card had a 44px top margin
      (leftover from an earlier alignment fix) creating a big empty gap
      under "আপনার অর্ডার", and card padding/row spacing were roomier
      than the rest of the site. Tightened here rather than touching the
      grid alignment fix above (still needed, just with a smaller offset).
   2) Storefront draws the checked-radio dot as a label::before icon
      colored by its own purple accent (#7f54b3), which our earlier
      accent-color rule on the native input never reaches since the
      native radio appearance is hidden. Overriding the actual selector
      Storefront uses so the payment method radio matches site green.
   ======================================================================== */
/* BUG FIX: reverted the div#order_review margin-top override below —
   it was mistakenly treated as decorative spacing to shrink for the
   "checkout feels too big" request, but per the comment above (line
   ~4126) it's load-bearing: the heading and card share one grid cell by
   design, and this margin is the only thing pushing the card down below
   the heading text instead of rendering on top of it. Reducing it to
   12px caused exactly that — the card overlapping "আপনার অর্ডার" as seen
   in the follow-up screenshot. The "too big" feeling is better addressed
   by the billing-card padding / form-row spacing reductions further
   down, which don't risk this overlap. */
body.woocommerce-checkout div#order_review {
	margin-top: 44px !important;
}

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	padding: 20px !important;
}

body.woocommerce-checkout .form-row {
	margin: 0 0 14px !important;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select {
	min-height: 46px !important;
}

body.woocommerce-checkout #payment .payment_methods li input[type="radio"]:checked + label::before,
body.woocommerce-checkout ul.payment_methods li input[type="radio"]:checked + label::before {
	color: var(--hb-color-primary) !important;
}

/* Requested: reduce padding on the payment method row label so the
   Cash on delivery / bKash / Rocket options sit a bit tighter. */
#payment .payment_methods > .woocommerce-PaymentMethod > label,
#payment .payment_methods > .wc_payment_method > label {
	padding: 4px 0 !important;
}

/* ========================================================================
   BUG FIX — broken/garbled payment-method radio icon.
   Storefront draws its own radio indicator via a label::before icon-font
   glyph (see the purple-accent rule from Storefront's own stylesheet
   targeting this exact element). When that icon webfont fails to load
   (blocked request, encoding issue in a caching/minification plugin,
   etc.) the raw codepoint renders as garbled tofu characters instead of
   a dot/checkmark — exactly what showed up in the screenshot on all
   three payment options, not just the checked one.
   Rather than chase down why a third-party font request is failing,
   this replaces the indicator with a plain CSS circle that has no font
   dependency at all, so it can't break this way again regardless of
   what happens with Storefront's own webfont going forward. The native
   radio input is kept for click/keyboard accessibility but made
   invisible; the CSS circle is the only visible indicator.
   ======================================================================== */
body.woocommerce-checkout ul.payment_methods li input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	cursor: pointer;
}

body.woocommerce-checkout ul.payment_methods li label {
	position: relative;
	display: inline-block;
	padding-left: 30px !important;
}

body.woocommerce-checkout ul.payment_methods li label::before {
	content: "" !important;
	font-family: initial !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	border: 2px solid var(--hb-color-border) !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	background: #fff !important;
}

body.woocommerce-checkout ul.payment_methods li input[type="radio"]:checked + label::before {
	border-color: var(--hb-color-primary) !important;
	background: var(--hb-color-primary) !important;
	box-shadow: inset 0 0 0 3px #fff !important;
}

/* ========================================================================
   ORDER RECEIVED (THANK YOU) PAGE — approved redesign.
   See woocommerce/checkout/thankyou.php for the markup this styles.
   ======================================================================== */
body.woocommerce-order-received .hb-container {
	max-width: var(--hb-container-width);
	margin: 0 auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
}

.hb-thankyou__hero {
	text-align: center;
	padding: 32px 16px 8px;
}

.hb-thankyou__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-primary);
	margin-bottom: 12px;
}

.hb-thankyou__check svg {
	width: 26px;
	height: 26px;
}

.hb-thankyou__hero h1 {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--hb-color-text);
	margin: 0 0 6px;
}

.hb-thankyou__hero p {
	font-size: .92rem;
	color: var(--hb-color-text-muted);
}

.hb-thankyou__summary {
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	padding: 20px;
	margin-top: 20px;
}

.hb-thankyou__summary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.hb-thankyou__summary-grid span {
	display: block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hb-color-text-muted);
	margin-bottom: 3px;
}

.hb-thankyou__summary-grid b {
	font-size: .98rem;
	color: var(--hb-color-text);
}

.hb-thankyou__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	padding: 13px;
	border: 1.5px solid var(--hb-color-primary);
	border-radius: 10px;
	color: var(--hb-color-primary-dark);
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
}

.hb-thankyou__whatsapp svg {
	width: 18px;
	height: 18px;
}

.hb-thankyou__steps {
	margin-top: 20px;
}

.hb-thankyou__steps h2 {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hb-color-text);
	margin: 0 0 10px;
}

.hb-thankyou__steps ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-thankyou__steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: .88rem;
	color: var(--hb-color-text-muted);
}

.hb-thankyou__stepnum {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hb-color-bg-alt);
	border: 1px solid var(--hb-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	font-weight: 700;
	color: var(--hb-color-primary);
}

.hb-thankyou__cta-row {
	display: flex;
	gap: 10px;
	margin: 24px auto 40px;
	max-width: 480px;
}

.hb-thankyou__cta-row .hb-btn {
	flex: 1;
}

/* Re-skin the native WooCommerce order-details table + address block to
   match this page's card look, without touching the templates that
   render them (see thankyou.php comments). */
.hb-thankyou__native .woocommerce-order-details,
.hb-thankyou__native .woocommerce-customer-details {
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	padding: 20px;
	margin-top: 20px;
}

.hb-thankyou__native .woocommerce-order-details__title,
.hb-thankyou__native .woocommerce-column__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hb-color-text);
	margin: 0 0 12px;
}

.hb-thankyou__native table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.hb-thankyou__native table.shop_table th,
.hb-thankyou__native table.shop_table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #edf0ed;
	font-size: .88rem;
	text-align: left;
}

.hb-thankyou__native table.shop_table th:last-child,
.hb-thankyou__native table.shop_table td:last-child {
	text-align: right;
}

.hb-thankyou__native table.shop_table tfoot tr:last-child th,
.hb-thankyou__native table.shop_table tfoot tr:last-child td {
	font-weight: 800;
	color: var(--hb-color-primary-dark);
	background: var(--hb-color-bg-alt);
	border-bottom: 0;
	padding: 12px 10px;
}

.hb-thankyou__native address {
	font-style: normal;
	font-size: .88rem;
	color: var(--hb-color-text-muted);
	line-height: 1.7;
}

@media (min-width: 640px) {
	.hb-thankyou__summary-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ========================================================================
   MY ACCOUNT — approved redesign.
   See woocommerce/myaccount/navigation.php and dashboard.php.
   ======================================================================== */
body.woocommerce-account #secondary,
body.woocommerce-account .widget-area {
	display: none !important;
}

body.woocommerce-account #primary,
body.woocommerce-account #primary.content-area,
body.woocommerce-account .content-area {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.woocommerce-account .entry-header {
	max-width: var(--hb-container-width);
	margin-left: auto;
	margin-right: auto;
	padding: 28px var(--hb-space-4) 18px;
	box-sizing: border-box;
	text-align: left;
}

body.woocommerce-account .entry-header .entry-title {
	margin: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hb-color-text);
}

body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce {
	max-width: var(--hb-container-width);
	margin: 0 auto;
	padding: 0 var(--hb-space-4);
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--hb-space-5);
	align-items: start;
}

.hb-account-nav {
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	padding: 10px;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}

.hb-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-account-nav li {
	margin: 0 0 2px;
}

.hb-account-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 9px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--hb-color-text-muted);
	text-decoration: none;
}

.hb-account-nav li.is-active a {
	background: var(--hb-color-bg-alt);
	color: var(--hb-color-primary-dark);
}

.hb-account-nav__icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	display: inline-flex;
}

.hb-account-nav__icon svg {
	width: 100%;
	height: 100%;
}

.hb-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--hb-color-border);
}

.hb-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--hb-color-accent);
}

.woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--hb-color-border);
	border-radius: 14px;
	padding: 22px;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}

.hb-account-dashboard__greet {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hb-color-text);
	margin: 0 0 6px;
}

.hb-account-dashboard__sub {
	font-size: .88rem;
	color: var(--hb-color-text-muted);
	margin: 0 0 20px;
}

.hb-account-dashboard__quick-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.hb-account-dashboard__quick-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--hb-color-bg-alt);
	border-radius: 12px;
	padding: 16px 10px;
	text-align: center;
	text-decoration: none;
	color: var(--hb-color-text);
}

.hb-account-dashboard__quick-card svg {
	width: 24px;
	height: 24px;
	color: var(--hb-color-primary);
}

.hb-account-dashboard__quick-card span {
	font-size: .8rem;
	font-weight: 700;
}

@media (max-width: 767px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
	.hb-account-nav ul {
		display: flex;
		overflow-x: auto;
		gap: 4px;
	}
	.hb-account-nav li {
		margin: 0;
		flex-shrink: 0;
	}
	.hb-account-dashboard__quick-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================
   BUG FIX — two stacked buttons after AJAX add-to-cart.
   WooCommerce's own AJAX flow doesn't replace the "Add to cart" button —
   it adds an `added` class to it and inserts a separate "View cart" link
   right after it, so both end up visible stacked (see screenshot: green
   Add-to-cart button + black View-cart button underneath). Hiding the
   original once it carries `.added`, and styling the inserted View-cart
   link to take over the exact same slot, gives a single button that
   updates in place instead of stacking a second one.
   ======================================================================== */
.hb-product-card__actions .add_to_cart_button.added {
	display: none;
}

.hb-product-card__actions .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: var(--hb-touch-target-min);
	background: var(--hb-color-primary-dark);
	color: #fff;
	text-decoration: none;
	border-radius: var(--hb-radius-sm);
	font-size: var(--hb-font-size-sm);
	font-weight: 700;
}

.hb-product-card__actions .added_to_cart::after {
	content: "\2192";
}

/* Single-product AJAX add-to-cart — success state.
   See HabiganjBazar.singleAddToCart in assets/js/main.js. */
.hb-single-product__summary .single_add_to_cart_button.added {
	background: var(--hb-color-primary-dark) !important;
}

/* BUG FIX: triggering the 'added_to_cart' event (needed so WooCommerce's
   own cart-fragments.js updates the header cart count) also wakes up
   Storefront's own script, which inserts its own default-styled
   ".added_to_cart wc-forward" View-cart link right after the button —
   the exact same stacked-button pattern already fixed for the shop-loop
   cards, now also happening here since our JS re-uses the same core
   event. Our own button already becomes the "কার্টে দেখুন" link in
   place, so this second native one is redundant — hide it. */
.hb-single-product__summary .added_to_cart {
	display: none !important;
}


/* ==========================================================================
   Homepage conversion + AEO refinements
   ========================================================================== */

.hb-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--hb-space-5);
}

.hb-section__cta .hb-btn {
	min-width: 190px;
}

.hb-category-card__image {
	display: block;
}

.hb-whatsapp-order {
	padding-top: var(--hb-space-5);
}

.hb-whatsapp-order__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--hb-space-5);
	background: linear-gradient(135deg, var(--hb-color-bg-alt), #ffffff);
	border: 1px solid rgba(20, 92, 45, 0.18);
	border-radius: var(--hb-radius-md);
	padding: var(--hb-space-5);
	box-shadow: var(--hb-shadow-sm);
}

.hb-whatsapp-order__icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(20, 92, 45, 0.10);
	color: #145C2D;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hb-whatsapp-order__icon .hb-icon {
	width: 28px;
	height: 28px;
}

.hb-whatsapp-order__content {
	min-width: 0;
}

.hb-whatsapp-order__eyebrow {
	display: block;
	font-size: var(--hb-font-size-sm);
	font-weight: 700;
	color: var(--hb-color-primary);
	margin-bottom: 2px;
}

.hb-whatsapp-order__content h2 {
	margin: 0 0 var(--hb-space-1);
	font-size: var(--hb-font-size-lg);
}

.hb-whatsapp-order__content p {
	margin: 0 0 var(--hb-space-2);
	color: var(--hb-color-text-muted);
	line-height: 1.55;
}

.hb-whatsapp-order__number {
	display: inline-block;
	font-weight: 700;
	color: var(--hb-color-text);
}

.hb-whatsapp-order__button {
	white-space: nowrap;
}

.hb-faq__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-space-3);
}

.hb-faq__item {
	background: var(--hb-color-bg);
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	overflow: hidden;
}

.hb-faq__item summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	padding: var(--hb-space-4) var(--hb-space-5);
	padding-right: 46px;
	position: relative;
}

.hb-faq__item summary::-webkit-details-marker {
	display: none;
}

.hb-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 500;
	color: var(--hb-color-primary);
}

.hb-faq__item[open] summary::after {
	content: '−';
}

.hb-faq__item p {
	margin: 0;
	padding: 0 var(--hb-space-5) var(--hb-space-5);
	color: var(--hb-color-text-muted);
	line-height: 1.7;
}

@media (max-width: 767px) {
	/* Mobile: 3 categories per row instead of the desktop 5-column grid */
	.hb-categories__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	/* Mobile: smaller "কার্টে যোগ করুন" button so the Bengali label
	   fits on one line instead of wrapping and inflating card height */
	.hb-product-card__actions .button {
		font-size: 12px;
		gap: 4px;
		padding: 0 4px;
		white-space: nowrap;
	}

	.hb-product-card__actions .button::before {
		font-size: 13px;
	}

	/* Mobile: smaller trust-section heading (কেন আমাদের সাথে কেনাকাটা করবেন) */
	.hb-trust__item h3 {
		font-size: 0.9rem;
	}

	/* Mobile: footer columns 2-per-row (50% each) instead of one full-width stack */
	.hb-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--hb-space-5) var(--hb-space-4);
	}

	.hb-section__cta {
		margin-top: var(--hb-space-4);
	}

	.hb-whatsapp-order__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: var(--hb-space-3);
	}

	.hb-whatsapp-order__icon {
		margin: 0 auto;
	}

	.hb-whatsapp-order__button {
		width: 100%;
	}

	.hb-faq__list {
		grid-template-columns: 1fr;
	}
}


/* ========================================================================
 * FINAL CART + SHOP TOOLBAR FIXES
 * These overrides deliberately avoid :has() so the layout remains stable
 * on browsers where relational selectors are unavailable or inconsistent.
 * ======================================================================== */

/* Shop toolbar: category selector + count + sorting. */
.hb-shop-toolbar {
	width: 100%;
	box-sizing: border-box;
	align-items: center;
}

.hb-shop-toolbar__filter {
	display: flex;
	align-items: center;
	min-width: 0;
}

.hb-shop-toolbar__category {
	min-height: 44px;
	min-width: 210px;
	max-width: 300px;
	padding: 0 38px 0 13px;
	border: 1px solid var(--hb-color-border);
	border-radius: var(--hb-radius-md);
	background: #fff;
	color: var(--hb-color-text);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.hb-shop-toolbar__category:focus {
	outline: 2px solid var(--hb-color-primary);
	outline-offset: 1px;
}

.hb-shop-toolbar__count {
	margin-left: auto;
	margin-right: auto;
	color: var(--hb-color-text-muted);
	font-size: 13px;
}

.hb-shop-toolbar__count .woocommerce-result-count {
	margin: 0;
}

@media (max-width: 767px) {
	.hb-shop-toolbar {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.hb-shop-toolbar__filter {
		flex: 1 1 100%;
	}

	.hb-shop-toolbar__category {
		width: 100%;
		max-width: none;
	}

	.hb-shop-toolbar__count {
		margin: 0;
		align-self: center;
	}
}

/* Cart page: use the actual cart shortcode wrapper as the layout root.
 * This is more reliable than depending on Storefront's float-based
 * #primary/#secondary system and does not require :has(). */
body.woocommerce-cart .entry-content > .woocommerce {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hb-container-width);
	margin: 0 auto;
	padding-left: var(--hb-space-4);
	padding-right: var(--hb-space-4);
	display: grid !important;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr) !important;
	gap: 24px !important;
	align-items: start !important;
}

body.woocommerce-cart .entry-content > .woocommerce > form.woocommerce-cart-form,
body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box;
}

body.woocommerce-cart .entry-content > .woocommerce > form.woocommerce-cart-form {
	grid-column: 1;
}

body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals {
	grid-column: 2;
}

/* Prevent long Bengali product names from forcing table columns to become
 * microscopic. */
body.woocommerce-cart table.shop_table {
	table-layout: auto;
}

body.woocommerce-cart td.product-name {
	min-width: 0;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: anywhere;
}

body.woocommerce-cart td.product-name a {
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: anywhere;
}

body.woocommerce-cart td.product-thumbnail,
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-quantity,
body.woocommerce-cart td.product-subtotal,
body.woocommerce-cart td.product-remove {
	white-space: nowrap;
}

@media (max-width: 1023px) {
	body.woocommerce-cart .entry-content > .woocommerce {
		grid-template-columns: 1fr !important;
	}

	body.woocommerce-cart .entry-content > .woocommerce > form.woocommerce-cart-form,
	body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals {
		grid-column: 1 !important;
	}

	body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals .cart_totals {
		max-width: 560px;
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	body.woocommerce-cart .entry-content > .woocommerce {
		padding-left: 12px;
		padding-right: 12px;
		gap: 16px !important;
	}

	body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals .cart_totals {
		max-width: none;
		margin-left: 0;
	}
}

/* ========================================================================
 * CART PAGE — FINAL STRUCTURAL FIX
 *
 * WooCommerce's native cart markup is intentionally kept. The dedicated
 * .hb-cart-layout wrapper created by woocommerce_before_cart/after_cart
 * isolates the form and totals from Storefront's legacy float layout.
 * This prevents the cart table from collapsing into a narrow right column.
 * ======================================================================== */
body.woocommerce-cart .hb-cart-layout {
	width: 100%;
	max-width: var(--hb-container-width);
	margin: 0 auto;
	padding: 0 var(--hb-space-4) 48px;
	box-sizing: border-box;
	display: grid !important;
	/* The left column has a hard 520px floor (not just a flexible fr
	   share). Previously this was `minmax(0, 1.75fr)`, which lets the
	   fr-based math shrink it arbitrarily small at in-between viewport
	   widths — the exact failure mode that squeezed the product-name
	   column down to a sliver and forced every character onto its own
	   line. A hard minimum removes that failure mode outright: this
	   column can never render narrower than 520px while the grid is
	   active (the max-width:1023px query below switches to a single
	   column before 520px+the right column's own minimum would ever
	   conflict). */
	grid-template-columns: minmax(520px, 1.75fr) minmax(280px, .85fr) !important;
	gap: 24px !important;
	align-items: start !important;
	direction: ltr !important;
}

/* Neutralize Storefront/WooCommerce float widths inside the new layout. */
body.woocommerce-cart .hb-cart-layout > form.woocommerce-cart-form,
body.woocommerce-cart .hb-cart-layout > .cart-collaterals {
	position: static !important;
	float: none !important;
	clear: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

body.woocommerce-cart .hb-cart-layout > form.woocommerce-cart-form {
	grid-column: 1 !important;
	grid-row: 1 !important;
}

body.woocommerce-cart .hb-cart-layout > .cart-collaterals {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

/* The cart table must be allowed to use the complete form width. */
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form table.shop_table {
	display: table !important;
	width: 100% !important;
	max-width: none !important;
	table-layout: fixed !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form table.shop_table th,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form table.shop_table td {
	box-sizing: border-box;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-remove,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form th.product-remove {
	width: 52px !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-thumbnail,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form th.product-thumbnail {
	width: 88px !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-price,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form th.product-price {
	width: 105px !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-quantity,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form th.product-quantity {
	width: 112px !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-subtotal,
body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form th.product-subtotal {
	width: 110px !important;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-name {
	width: auto !important;
	min-width: 180px !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: anywhere;
}

body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form td.product-name a {
	display: inline !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: anywhere;
}

/* Keep totals in the right column rather than below the cart table. */
body.woocommerce-cart .hb-cart-layout .cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

@media (max-width: 1023px) {
	body.woocommerce-cart .hb-cart-layout {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	body.woocommerce-cart .hb-cart-layout > form.woocommerce-cart-form,
	body.woocommerce-cart .hb-cart-layout > .cart-collaterals {
		grid-column: 1 !important;
	}

	body.woocommerce-cart .hb-cart-layout > form.woocommerce-cart-form {
		grid-row: 1 !important;
	}

	body.woocommerce-cart .hb-cart-layout > .cart-collaterals {
		grid-row: 2 !important;
	}
}

@media (max-width: 767px) {
	body.woocommerce-cart .hb-cart-layout {
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 32px;
	}

	/* Mobile cart becomes a readable horizontal card with controlled
	 * overflow instead of forcing every product-name character into a
	 * separate line. */
	body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	body.woocommerce-cart .hb-cart-layout form.woocommerce-cart-form table.shop_table {
		min-width: 720px !important;
	}

	body.woocommerce-cart .hb-cart-layout .cart-collaterals .cart_totals {
		max-width: none !important;
	}
}

/* ========================================================================
 * NOTE: An earlier, now-superseded "FINAL WIDTH/GRID CORRECTION" block
 * used to live here. It targeted `.woocommerce:has(> form.woocommerce-cart-form)`
 * directly — a selector that stopped matching once the .hb-cart-layout
 * wrapper (added by habiganj_bazar_cart_layout_open/close in
 * inc/woocommerce.php) started wrapping the form + collaterals one level
 * deeper. Its unscoped `table.shop_table { table-layout: fixed !important }`
 * plus nth-child column-width rules kept running anyway (nothing there
 * depended on the now-dead grid selector), fighting the .hb-cart-layout
 * block's own column widths above and re-collapsing the product-name
 * column to a sliver — the exact "one character per line" bug both
 * blocks' comments describe, just reintroduced by the older block
 * outliving its own fix. Removed rather than re-patched: the
 * .hb-cart-layout block above is the single, correctly-scoped source of
 * truth for cart column widths now.
 * ======================================================================== */