/* Bharati App Shell v1.1.0 — app-mode polish.
   Fully inert during normal browser browsing: everything below is gated behind
   body.bh-app-mode, which is only added when the site runs from the home screen
   (display-mode: standalone / iOS standalone) or with ?bh_app=1.
   The site's own bottom dock markup, icons and behaviour are left untouched. */

:root {
	--bh-dock-h: 56px;          /* theme dock is h-14 */
	--bh-green: #176E5C;
}

/* --- 1. Make room for the theme's fixed bottom dock in app mode --------- */
body.bh-app-mode {
	padding-bottom: calc(var(--bh-dock-h) + env(safe-area-inset-bottom, 0px) + 6px) !important;
	overscroll-behavior-y: contain;   /* no rubber-band gap / accidental pull-to-refresh look */
}

/* Checkout: keep the screen clear for the place-order action */
body.bh-app-mode.woocommerce-checkout {
	padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body.bh-app-mode.woocommerce-checkout [data-bh-global-dock] {
	display: none !important;
}

/* --- 2. App-like interaction details ----------------------------------- */
body.bh-app-mode {
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizeLegibility;
}

/* Keep the dock crisp above content and on top of iOS home-indicator area */
body.bh-app-mode [data-bh-global-dock] {
	z-index: 9998;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Inert everywhere else: no rules apply unless body.bh-app-mode is present. */

/* ===================================================================
   v2 — premium app feel (app mode only)
   Everything below requires html.bh-app-mode, so the website is untouched.
   =================================================================== */

/* --- 1. Native-like touch feedback ---------------------------------- */
html.bh-app-mode a,
html.bh-app-mode button {
	-webkit-tap-highlight-color: transparent;
}

html.bh-app-mode ul.products li.product,
html.bh-app-mode .bh-atc-card {
	transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease;
	will-change: transform;
}

html.bh-app-mode ul.products li.product:active,
html.bh-app-mode .bh-atc-card:active {
	transform: scale(0.977);
}

/* --- 2. Staggered grid entrance ------------------------------------- */
@keyframes bhStagger {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

html.bh-app-mode ul.products li.product {
	animation: bhStagger 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.bh-app-mode ul.products li.product:nth-child(1)  { animation-delay: 0.02s; }
html.bh-app-mode ul.products li.product:nth-child(2)  { animation-delay: 0.05s; }
html.bh-app-mode ul.products li.product:nth-child(3)  { animation-delay: 0.08s; }
html.bh-app-mode ul.products li.product:nth-child(4)  { animation-delay: 0.11s; }
html.bh-app-mode ul.products li.product:nth-child(5)  { animation-delay: 0.14s; }
html.bh-app-mode ul.products li.product:nth-child(6)  { animation-delay: 0.17s; }
html.bh-app-mode ul.products li.product:nth-child(7)  { animation-delay: 0.20s; }
html.bh-app-mode ul.products li.product:nth-child(8)  { animation-delay: 0.23s; }
html.bh-app-mode ul.products li.product:nth-child(n+9){ animation-delay: 0.26s; }

/* --- 3. Image fade-in (no layout shift, no white pop) --------------- */
html.bh-app-mode img.bh-img-fade {
	opacity: 0;
	transition: opacity 0.42s ease;
}
html.bh-app-mode img.bh-img-fade.bh-img-in {
	opacity: 1;
}

/* --- 4. Strip the "website" tells ----------------------------------- */
html.bh-app-mode .woocommerce-result-count {
	display: none !important;   /* "Showing 1–16 of 45 results" */
}

html.bh-app-mode .woocommerce-ordering select {
	border-radius: 999px;       /* pill instead of a web dropdown */
}

/* --- 5. Thin top progress bar (Instagram-style) --------------------- */
#bhProgress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 2147483600;
	background: linear-gradient(90deg, #176E5C, #2FA98C);
	border-radius: 0 2px 2px 0;
	opacity: 0;
	transition: width 0.25s ease, opacity 0.25s ease;
	box-shadow: 0 0 8px rgba(47, 169, 140, 0.55);
	pointer-events: none;
}
#bhProgress.bh-run {
	opacity: 1;
	width: 78%;
}
#bhProgress.bh-done {
	opacity: 0;
	width: 100%;
}

/* --- 6. Header lifts off the page on scroll ------------------------- */
html.bh-app-mode .bhcj-appbar {
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
html.bh-app-mode.bh-scrolled .bhcj-appbar {
	box-shadow: 0 10px 26px -18px rgba(41, 51, 48, 0.55);
}

/* --- 7. Smoother in-page jumps -------------------------------------- */
html.bh-app-mode {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode ul.products li.product,
	html.bh-app-mode * {
		animation-duration: 0.001ms !important;
	}
	html.bh-app-mode {
		scroll-behavior: auto;
	}
}

/* --- 8. WhatsApp help bubble: keep the channel, lose the "web widget" look */
html.bh-app-mode #bh-wa {
	bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px) !important;
	width: 44px !important;
	height: 44px !important;
	opacity: 0.94;
	box-shadow: 0 8px 22px -8px rgba(41, 51, 48, 0.45) !important;
}
html.bh-app-mode #bh-wa svg {
	width: 22px !important;
	height: 22px !important;
}
html.bh-app-mode .bh-wa-tip {
	display: none !important;   /* the little “Need help?” tooltip */
}

/* --- 9. Sorting dropdown as a native-looking pill ---------------------- */
html.bh-app-mode .woocommerce-ordering {
	margin: 0 0 14px !important;
}
html.bh-app-mode .woocommerce-ordering select {
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 999px !important;
	border: 1px solid rgba(41, 51, 48, 0.14) !important;
	background-color: #fff !important;
	padding: 11px 40px 11px 18px !important;
	font-size: 14px !important;
	font-weight: 600;
	color: #293330;
	box-shadow: 0 4px 14px -10px rgba(41, 51, 48, 0.5);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176E5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
}

/* the result-count gap is gone, so tighten the header block */
html.bh-app-mode .woocommerce.columns-4 {
	margin-top: 2px;
}

/* ===================================================================
   v2.1 — skeletons · swipe-back · bottom sheet
   =================================================================== */

/* --- A. Skeleton shimmer while product images load ------------------- */
@keyframes bhShimmer {
	0%   { transform: translateX(-110%); }
	100% { transform: translateX(110%); }
}

html.bh-app-mode .bh-atc-card-media.bh-sk {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #EFEDE6 0%, #E8E6DE 100%);
}

html.bh-app-mode .bh-atc-card-media.bh-sk::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, 0) 18%,
		rgba(255, 255, 255, 0.72) 48%,
		rgba(255, 255, 255, 0) 78%);
	animation: bhShimmer 1.25s linear infinite;
	pointer-events: none;
}

/* the fallback / wishlist chip should not shimmer */
html.bh-app-mode .bh-atc-card-media.bh-sk > .bh-loop-wish-btn {
	opacity: 0.6;
}

/* --- B. Edge swipe-back indicator ------------------------------------ */
#bhSwipe {
	position: fixed;
	left: -60px;
	top: 50%;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 110, 92, 0.94);
	color: #FFFEFA;
	box-shadow: 0 10px 26px -10px rgba(15, 84, 70, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease, left 0.16s ease, transform 0.16s ease;
	backdrop-filter: blur(6px);
}

/* --- C. Bottom sheet (sort / filter) --------------------------------- */
.bh-sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	background: rgba(20, 23, 22, 0.42);
	opacity: 0;
	transition: opacity 0.24s ease;
	backdrop-filter: blur(2px);
}

.bh-sheet-backdrop.bh-open { opacity: 1; }

.bh-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483200;
	background: #FFFEFA;
	border-radius: 22px 22px 0 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(102%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 -18px 50px -12px rgba(41, 51, 48, 0.4);
	max-height: 78vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bh-sheet.bh-open { transform: none; }

.bh-sheet-handle {
	width: 40px;
	height: 4px;
	border-radius: 99px;
	background: rgba(41, 51, 48, 0.18);
	margin: 9px auto 6px;
}

.bh-sheet-title {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A928F;
	padding: 6px 22px 10px;
}

.bh-sheet-opts { padding-bottom: 22px; }
.bh-sheet { overscroll-behavior: contain; }

.bh-sheet-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 15px 22px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	color: #293330;
	text-align: left;
	cursor: pointer;
}

.bh-sheet-opt:active { background: rgba(23, 110, 92, 0.07); }

.bh-sheet-opt.bh-sel {
	color: #176E5C;
	font-weight: 700;
}

.bh-sheet-opt svg { opacity: 0; flex: none; }
.bh-sheet-opt.bh-sel svg { opacity: 1; }

/* the pill trigger that replaces the dropdown */
.bh-sort-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid rgba(41, 51, 48, 0.14);
	background: #fff;
	color: #293330;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 14px -10px rgba(41, 51, 48, 0.5);
	cursor: pointer;
	transition: transform 0.14s ease;
}

.bh-sort-trigger:active { transform: scale(0.97); }
.bh-sort-trigger svg { color: #176E5C; flex: none; }

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode .bh-atc-card-media.bh-sk::after { animation: none; }
	.bh-sheet { transition: none; }
	.bh-sheet-backdrop { transition: none; }
}

/* ===================================================================
   v2.2.0 — quiet, box-free app chrome
   The first pass framed every control in its own card, which read as
   "website with buttons". This pass removes the boxes: bare glyphs on
   the page surface, one hairline, and a single soft-filled action row.
   =================================================================== */

/* --- A. No desktop scrollbar: the loudest "this is a website" tell --- */
html.bh-app-mode { scrollbar-width: none; -ms-overflow-style: none; }
html.bh-app-mode ::-webkit-scrollbar { width: 0; height: 0; }

/* --- B. App bar: flat, airy, no surfaces ---------------------------- */
html.bh-app-mode header.bhcj-appbar {
	position: sticky;
	top: 0;
	z-index: 60;
	padding-top: env(safe-area-inset-top, 0px);
	background: #FFFEFA;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 1px solid rgba(32, 58, 51, 0.06);
	transition: box-shadow 0.24s ease;
}

html.bh-app-mode .bhcj-appbar-inner {
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	padding: 5px 12px 3px;
	min-height: 56px;
}

/* icons: no border, no fill, no shadow — just the glyph and a soft press */
html.bh-app-mode .bhcj-hamburger,
html.bh-app-mode .bhcj-appbar-action {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #22302C;
	transition: background-color 0.16s ease, transform 0.16s ease;
}

html.bh-app-mode .bhcj-hamburger svg,
html.bh-app-mode .bhcj-appbar-action svg {
	width: 21px;
	height: 21px;
	stroke-width: 1.75;
}

html.bh-app-mode .bhcj-hamburger:active,
html.bh-app-mode .bhcj-appbar-action:active {
	background: rgba(32, 58, 51, 0.07);
	transform: scale(0.96);
}

html.bh-app-mode .bhcj-appbar-action { margin-left: auto; }

html.bh-app-mode .bhcj-brand { flex: 0 0 auto; margin-left: 2px; }
html.bh-app-mode .bhcj-brand img { width: 96px; height: auto; }

/* language: plain text + globe, no pill */
html.bh-app-mode .bh-l10n { flex: 0 0 auto; display: flex; margin: 0; }

html.bh-app-mode .bh-l10n__btn {
	box-sizing: border-box;
	height: 44px;
	padding: 0 8px 0 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #3A4843;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.16s ease;
}

html.bh-app-mode .bh-l10n__btn:active { background: rgba(32, 58, 51, 0.07); }

html.bh-app-mode .bh-l10n__btn > svg:first-of-type {
	width: 17px;
	height: 17px;
	flex: none;
	color: #6C7A75;
}

html.bh-app-mode .bh-l10n__label { display: inline-block !important; white-space: nowrap; }
html.bh-app-mode .bh-l10n__chev { display: none !important; }

/* service area: one quiet line, muted value instead of a bold band */
html.bh-app-mode .bhcj-location {
	display: flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 0 16px 9px;
	gap: 5px;
	border: 0;
	border-radius: 0;
	background: none;
}

html.bh-app-mode .bhcj-location > span:first-child svg {
	width: 14px;
	height: 14px;
	color: #176E5C;
	opacity: 0.85;
}

/* the caps eyebrow was doing the shouting; the city alone carries it */
html.bh-app-mode .bhcj-location small { display: none !important; }

html.bh-app-mode .bhcj-location strong {
	display: inline;
	margin: 0;
	font-size: 12.5px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: #465550;
}

html.bh-app-mode .bhcj-location strong::before {
	content: "Delivering to ";
	font-size: 12.5px;
	font-weight: 400;
	color: #96A29D;
}

@media (max-width: 359px) {
	html.bh-app-mode .bh-l10n__label { display: none !important; }
	html.bh-app-mode .bh-l10n__btn { padding: 0 6px; }
}

/* --- C. Product action row: one surface, not three boxes ------------ */
html.bh-app-mode form.cart .quantity {
	flex: 0 0 auto;
}

html.bh-app-mode form.cart .quantity input.qty {
	box-sizing: border-box !important;
	width: 58px !important;
	min-width: 58px !important;
	max-width: 58px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 15px !important;
	background: #F1EFE8 !important;
	color: #20322D !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	text-align: center !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

html.bh-app-mode form.cart .quantity input.qty::-webkit-outer-spin-button,
html.bh-app-mode form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

html.bh-app-mode form.cart .quantity input.qty:focus {
	background: #EBE8DF;
	box-shadow: 0 0 0 2px rgba(23, 110, 92, 0.18);
}

html.bh-app-mode form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	box-sizing: border-box !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 15px !important;
	background: #176E5C !important;
	color: #FFFEFA !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.005em !important;
	text-transform: none !important;
	box-shadow: 0 10px 22px -14px rgba(23, 110, 92, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
	transition: transform 0.14s ease, background-color 0.16s ease;
}

html.bh-app-mode form.cart button.single_add_to_cart_button:active {
	transform: scale(0.985);
	background: #14604F;
}

html.bh-app-mode form.cart button.single_add_to_cart_button .bh-atc-icon svg {
	width: 19px;
	height: 19px;
}

/* wishlist: a bare heart, no frame (inline styles on this button) */
html.bh-app-mode form.cart .bh-pdp-wish-btn {
	box-sizing: border-box !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 48px !important;
	min-height: 48px !important;
	margin-left: 6px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #6C7A75 !important;
	transition: color 0.16s ease, background-color 0.16s ease !important;
}

html.bh-app-mode form.cart .bh-pdp-wish-btn svg { width: 22px; height: 22px; }

html.bh-app-mode form.cart .bh-pdp-wish-btn:active {
	background: rgba(32, 58, 51, 0.07) !important;
}

html.bh-app-mode form.cart .bh-pdp-wish-btn[aria-pressed="true"] {
	color: #C2415A !important;
}

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode header.bhcj-appbar,
	html.bh-app-mode form.cart button.single_add_to_cart_button,
	html.bh-app-mode form.cart .bh-pdp-wish-btn { transition: none; }
}

/* --- D. Shop surfaces: soft fills instead of outlined boxes --------- */
html.bh-app-mode form.bhcj-catalog-search > div {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* the magnifier lives on the wrapper: a background on the input itself gets
   wiped by the theme's later `background:` shorthand */
html.bh-app-mode form.bhcj-catalog-search > div::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 19px;
	height: 19px;
	margin-top: -9.5px;
	pointer-events: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A75' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

html.bh-app-mode form.bhcj-catalog-search input[type="search"] {
	flex: 1 1 auto;
	box-sizing: border-box !important;
	height: 50px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background-color: #F1EFE8 !important;
	color: #20322D !important;
	padding: 0 12px 0 42px !important;
	font-size: 14.5px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

html.bh-app-mode form.bhcj-catalog-search input[type="search"]::placeholder { color: #98A29E; }

html.bh-app-mode form.bhcj-catalog-search input[type="search"]::-webkit-search-cancel-button,
html.bh-app-mode form.bhcj-catalog-search input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

html.bh-app-mode form.bhcj-catalog-search input[type="search"]:focus {
	background-color: #EBE8DF !important;
	box-shadow: 0 0 0 2px rgba(23, 110, 92, 0.16) !important;
}

/* the submit becomes a round glyph button — the label stays for screen readers */
html.bh-app-mode form.bhcj-catalog-search button.bhcj-primary {
	flex: 0 0 50px;
	box-sizing: border-box !important;
	width: 50px !important;
	height: 50px !important;
	min-width: 50px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 16px !important;
	background-color: #176E5C !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	position: relative;
	text-indent: -999px;
	overflow: hidden;
	box-shadow: 0 8px 18px -12px rgba(23, 110, 92, 0.95) !important;
}

html.bh-app-mode form.bhcj-catalog-search button.bhcj-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFEFA' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

html.bh-app-mode form.bhcj-catalog-search button.bhcj-primary:active { transform: scale(0.96); }

/* category chips: filled, not outlined */
html.bh-app-mode nav.bhcj-categories { gap: 8px; }

html.bh-app-mode nav.bhcj-categories > a {
	border: 0 !important;
	border-radius: 999px !important;
	background: #F1EFE8 !important;
	color: #3D4B46 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 9px 15px !important;
	box-shadow: none !important;
	transition: background-color 0.16s ease, color 0.16s ease, transform 0.14s ease;
}

html.bh-app-mode nav.bhcj-categories > a:active { transform: scale(0.97); }

html.bh-app-mode nav.bhcj-categories > a[aria-current],
html.bh-app-mode nav.bhcj-categories > a.is-active,
html.bh-app-mode nav.bhcj-categories > a[aria-current="page"] {
	background: #176E5C !important;
	color: #FFFEFA !important;
}

/* the sort trigger follows the same soft-fill language */
html.bh-app-mode .bh-sort-trigger {
	border: 0;
	border-radius: 15px;
	background: #F1EFE8;
	color: #3D4B46;
	padding: 11px 16px;
	box-shadow: none;
	font-weight: 600;
}

html.bh-app-mode .bh-sort-trigger svg { color: #176E5C; }

/* page heading: the 40px shout is what made the page feel like a leaflet */
html.bh-app-mode header.bhcj-page-heading h1 {
	font-size: 31px !important;
	line-height: 1.12 !important;
	letter-spacing: -0.025em !important;
}

html.bh-app-mode form.bhcj-catalog-search > label {
	display: block;
	margin: 0 0 8px 2px !important;
	font-size: 10.5px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: #97A29D !important;
}

/* product cards: drop the outline, keep a whisper of a shadow */
html.bh-app-mode ul.products li .bh-atc-card-frame,
html.bh-app-mode ul.products li .bh-atc-card-frame.bh-atc-card-frame {
	border: 0 !important;
	border-radius: 18px !important;
	background: #FFFEFB !important;
	box-shadow: 0 10px 24px -20px rgba(30, 60, 46, 0.55), 0 1px 2px rgba(30, 60, 46, 0.04) !important;
}

html.bh-app-mode ul.products li .bh-atc-card-media {
	border-radius: 17px 17px 0 0 !important;
	background: #F2F4EF !important;
}

/* --- E. Quantity stepper: − [n] + in one soft pill ------------------ */
html.bh-app-mode form.cart .quantity.bh-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	height: 52px;
	padding: 0 7px;
	border: 0;
	border-radius: 15px;
	background: #F1EFE8;
}

html.bh-app-mode .bh-qty .bh-qty-btn {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: #20322D;
	cursor: pointer;
	transition: background-color 0.14s ease, transform 0.14s ease, opacity 0.16s ease;
	-webkit-tap-highlight-color: transparent;
}

html.bh-app-mode .bh-qty .bh-qty-btn:active {
	background: rgba(32, 50, 45, 0.09);
	transform: scale(0.92);
}

html.bh-app-mode .bh-qty .bh-qty-btn[disabled],
html.bh-app-mode .bh-qty .bh-qty-btn:disabled {
	opacity: 0.3;
	pointer-events: none;
}

html.bh-app-mode form.cart .quantity.bh-qty input.qty {
	box-sizing: border-box !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #17251F !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

html.bh-app-mode form.cart .quantity.bh-qty input.qty:focus { box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode .bh-qty .bh-qty-btn { transition: none; }
}

/* ===================================================================
   v2.3.0 — Wave 1–3: dock, feedback, cards, menu, PDP, search, rails
   =================================================================== */

/* --- F. Dock: correct tab lit, weight + bag badge ------------------- */
html.bh-app-mode .bh-dock [data-bh-tab] { color: #7C8A85; }

html.bh-app-mode .bh-dock [data-bh-tab].bh-dock-active,
html.bh-app-mode .bh-dock [data-bh-tab].bh-dock-active span {
	color: #176E5C !important;
}

html.bh-app-mode .bh-dock [data-bh-tab].bh-dock-active span:last-child { font-weight: 700 !important; }

html.bh-app-mode .bh-dock [data-bh-tab] { position: relative; }

html.bh-app-mode .bh-dock-badge {
	position: absolute;
	top: 7px;
	left: 50%;
	margin-left: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 99px;
	background: #C2415A;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	letter-spacing: 0;
	box-shadow: 0 0 0 2px #FFFEFA;
}

/* --- G. Header lifts with a blur once scrolled --------------------- */
html.bh-app-mode.bh-scrolled header.bhcj-appbar {
	background: rgba(255, 254, 250, 0.84);
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
	backdrop-filter: saturate(1.5) blur(14px);
	box-shadow: 0 10px 24px -22px rgba(20, 42, 36, 0.6);
}

/* --- H. Website crutches out of the app ---------------------------- */
html.bh-app-mode #bh-wa,
html.bh-app-mode [data-bh-whatsapp] { display: none !important; }

/* --- I. Fields and buttons share the soft-fill language ------------ */
html.bh-app-mode input[type="text"]:not(#bhcj-product-search),
html.bh-app-mode input[type="email"],
html.bh-app-mode input[type="password"],
html.bh-app-mode input[type="tel"],
html.bh-app-mode input[type="number"]:not(.qty),
html.bh-app-mode input[type="search"]:not(#bhcj-product-search),
html.bh-app-mode textarea,
html.bh-app-mode select:not(.orderby) {
	box-sizing: border-box !important;
	min-height: 52px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 15px !important;
	background: #F1EFE8 !important;
	box-shadow: none !important;
	color: #17251F !important;
	font-size: 15px !important;
}

html.bh-app-mode textarea {
	padding: 14px 16px !important;
	min-height: 116px;
}

html.bh-app-mode input:focus,
html.bh-app-mode textarea:focus,
html.bh-app-mode select:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(23, 110, 92, 0.18) !important;
}

html.bh-app-mode input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #176E5C;
	border-radius: 6px;
}

html.bh-app-mode form button.button,
html.bh-app-mode form .button,
html.bh-app-mode .woocommerce-form-login .button,
html.bh-app-mode .bhcj-primary {
	border-radius: 15px !important;
	border: 0 !important;
	font-weight: 700 !important;
	min-height: 52px;
}

/* --- J. Product card anatomy --------------------------------------- */
html.bh-app-mode .bh-card-title-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	color: #22302C;
}

html.bh-app-mode .bh-atc-prices {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

html.bh-app-mode .bh-price-now {
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	color: #16241F;
}

html.bh-app-mode .bh-price-mrp {
	font-size: 11.5px !important;
	color: #9AA5A0 !important;
}

html.bh-app-mode .bh-price-off {
	padding: 2px 6px;
	border-radius: 99px;
	background: rgba(23, 110, 92, 0.1);
	font-size: 9.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	color: #176E5C !important;
}

html.bh-app-mode .bh-atc-card-frame a.bh-atc {
	min-height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 700;
}

html.bh-app-mode .bh-atc-card-frame a.bh-atc[data-bh-atc-state="success"] {
	background: rgba(23, 110, 92, 0.12) !important;
	color: #176E5C !important;
}

/* --- K. Section headers get an editorial voice --------------------- */
html.bh-app-mode h2.font-display {
	font-size: 19px !important;
	letter-spacing: -0.022em !important;
	line-height: 1.15 !important;
}

html.bh-app-mode [data-bh-see-all] {
	padding: 6px 11px;
	border-radius: 99px;
	background: #F1EFE8;
	color: #4B5A55 !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
}

/* --- L. Menu drawer ------------------------------------------------- */
html.bh-app-mode .bhcj-menu-sheet {
	background: #FFFEFA;
	width: min(88%, 380px);
}

html.bh-app-mode .bhcj-menu-sheet > header {
	padding: 16px 20px 12px;
	border-bottom: 1px solid rgba(27, 42, 37, 0.06);
}

html.bh-app-mode .bhcj-menu-sheet > header strong {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B958F;
}

html.bh-app-mode .bhcj-menu-sheet > header button {
	width: 40px;
	height: 40px;
	border: 0 !important;
	border-radius: 50%;
	background: rgba(27, 42, 37, 0.06) !important;
	box-shadow: none !important;
	color: #3A4843 !important;
}

html.bh-app-mode .bh-menu-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px 18px;
	border-bottom: 1px solid rgba(27, 42, 37, 0.06);
}

html.bh-app-mode .bh-menu-avatar {
	width: 44px;
	height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #F1EFE8;
	color: #176E5C;
	font-size: 16px;
	font-weight: 800;
}

html.bh-app-mode .bh-menu-id { min-width: 0; }
html.bh-app-mode .bh-menu-id b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
html.bh-app-mode .bh-menu-id small { display: block; font-size: 11.5px; color: #8B958F; }

html.bh-app-mode .bh-menu-cta {
	margin-left: auto;
	padding: 8px 14px;
	border-radius: 99px;
	background: #176E5C;
	color: #FFFEFA;
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

html.bh-app-mode .bhcj-menu-sheet nav { padding: 4px 12px 22px; }

html.bh-app-mode .bhcj-menu-sheet nav a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 10px;
	border-radius: 12px;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	color: #22302C !important;
	text-decoration: none;
}

html.bh-app-mode .bhcj-menu-sheet nav a:active { background: #F1EFE8; }

html.bh-app-mode .bhcj-menu-sheet nav a::after {
	content: "\203A";
	margin-left: auto;
	color: #C2CBC6;
	font-size: 18px;
	line-height: 1;
}

html.bh-app-mode .bhcj-menu-sheet nav a svg { flex: none; color: #465550; }

html.bh-app-mode .bh-menu-label {
	display: block;
	padding: 14px 10px 6px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #A2ABA7;
}

/* --- M. Empty bag suggests a way in -------------------------------- */
html.bh-app-mode .bh-bag-suggest { padding: 6px 16px 30px; }

html.bh-app-mode .bh-bag-suggest-title {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #97A29D;
	margin-bottom: 10px;
}

html.bh-app-mode .bh-bag-chips { display: flex; flex-wrap: wrap; gap: 8px; }

html.bh-app-mode .bh-bag-chips a {
	padding: 9px 14px;
	border-radius: 99px;
	background: #F1EFE8;
	color: #3D4B46;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

/* --- N. Toast ------------------------------------------------------ */
#bhToast {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px);
	z-index: 2147483300;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border-radius: 14px;
	background: #17251F;
	color: #FFFEFA;
	font-size: 13.5px;
	line-height: 1.3;
	box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.7);
	transform: translateY(160%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

#bhToast.bh-toast-in { transform: none; opacity: 1; pointer-events: auto; }
#bhToast .bh-toast-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #5FD3A6; }
#bhToast .bh-toast-msg { flex: 1; min-width: 0; }
#bhToast .bh-toast-link { color: #8CE3C0; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* --- O. Sticky mini product bar ------------------------------------ */
#bhMiniPdp {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	z-index: 2147482000;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 14px;
	background: rgba(255, 254, 250, 0.96);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top: 1px solid rgba(27, 42, 37, 0.07);
	transform: translateY(160%);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

#bhMiniPdp.bh-mini-on { transform: none; }

#bhMiniPdp img {
	width: 42px;
	height: 42px;
	flex: none;
	object-fit: contain;
	border-radius: 11px;
	background: #F1EFE8;
}

#bhMiniPdp .bh-mini-txt { flex: 1; min-width: 0; }
#bhMiniPdp .bh-mini-txt b {
	display: block;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#bhMiniPdp .bh-mini-txt small { display: block; font-size: 11.5px; color: #6C7A75; }

#bhMiniPdp .bh-mini-add {
	flex: none;
	padding: 11px 20px;
	border: 0;
	border-radius: 12px;
	background: #176E5C;
	color: #FFFEFA;
	font-size: 13px;
	font-weight: 700;
}

#bhMiniPdp .bh-mini-add:active { transform: scale(0.97); }

/* --- P. Search sheet ----------------------------------------------- */
.bh-search-sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

.bh-search-form { display: flex; gap: 8px; padding: 8px 18px 2px; }

.bh-search-form input {
	flex: 1 1 auto;
	box-sizing: border-box;
	height: 50px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: #F1EFE8 !important;
	color: #17251F !important;
	font-size: 15px !important;
	-webkit-appearance: none;
	appearance: none;
}

.bh-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

.bh-search-go {
	flex: none;
	padding: 0 16px;
	border: 0;
	border-radius: 16px;
	background: #176E5C;
	color: #FFFEFA;
	font-size: 13px;
	font-weight: 700;
}

.bh-search-block { padding: 12px 18px 4px; }
.bh-search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.bh-search-chips button {
	padding: 9px 14px;
	border: 0;
	border-radius: 99px;
	background: #F1EFE8;
	color: #3D4B46;
	font-size: 13px;
	font-weight: 600;
}

.bh-search-chips button:active { background: #E8E5DC; }

/* --- Q. Product trust row ------------------------------------------ */
.bh-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }

.bh-trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border-radius: 99px;
	background: #F1EFE8;
	font-size: 11.5px;
	font-weight: 600;
	color: #4B5A55;
}

.bh-trust svg { flex: none; color: #176E5C; }

/* --- R. Recently viewed rail --------------------------------------- */
#bhSeenRail { padding: 24px 0 10px; }

.bh-seen-head { padding: 0 16px 10px; }
.bh-seen-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.022em; }

.bh-seen-rail {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 16px 8px;
	scrollbar-width: none;
}
.bh-seen-rail::-webkit-scrollbar { display: none; }

.bh-seen-card {
	flex: 0 0 118px;
	padding: 8px;
	border-radius: 14px;
	background: #FFFEFB;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 10px 22px -20px rgba(30, 60, 46, 0.6);
}

.bh-seen-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 10px;
	background: #F1EFE8;
}

.bh-seen-card b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 7px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
}

.bh-seen-card small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 800; color: #176E5C; }

/* --- S. Press physics + page entrance ------------------------------ */
html.bh-app-mode .bh-atc-card-frame { transition: transform 0.16s ease; }
html.bh-app-mode .bh-atc-card:active .bh-atc-card-frame { transform: scale(0.985); }

html.bh-app-mode #bhcj-main {
	animation: bhPageIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bhPageIn {
	from { opacity: 0.001; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode #bhcj-main { animation: none; }
	html.bh-app-mode .bh-atc-card-frame { transition: none; }
	#bhToast, #bhMiniPdp { transition: none; }
}

/* --- T. v2.3.4 refinements ----------------------------------------- */
/* the marquee ticker reads as a broken sentence when clipped — make it a
   single centred line in app mode */
html.bh-app-mode .animate-marquee {
	animation: none !important;
	width: 100% !important;
	box-sizing: border-box;
	padding: 0 16px !important;
	justify-content: center !important;
	overflow: hidden;
}

html.bh-app-mode .animate-marquee > *:not(:first-child) { display: none !important; }

/* home category labels: two tidy lines instead of ragged wraps */
html.bh-app-mode .bh-home-category-label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11.5px !important;
	font-weight: 650 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em;
}

/* drawer close: no fat focus ring, keep a quiet one for keyboards */
html.bh-app-mode .bhcj-menu-sheet > header button:focus { outline: none !important; }

html.bh-app-mode .bhcj-menu-sheet > header button:focus-visible {
	outline: 2px solid rgba(23, 110, 92, 0.45) !important;
	outline-offset: 3px;
}

/* related products inherit the card language */
html.bh-app-mode section.related.products h2 {
	font-size: 19px !important;
	letter-spacing: -0.022em;
}

/* chip rails fade at the edge instead of guillotining a word */
html.bh-app-mode .bhcj-categories {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
	padding-right: 26px;
	scroll-padding-right: 26px;
}

/* --- U. v2.3.6 search sheet reads as a sheet ----------------------- */
.bh-search-scrim {
	position: fixed;
	inset: 0;
	z-index: 2147482400;
	background: rgba(16, 28, 24, 0.34);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.bh-search-scrim.bh-open { opacity: 1; }

#bhSearchSheet { z-index: 2147482500; }

#bhSearchSheet input:focus {
	outline: none !important;
	box-shadow: 0 0 0 1.5px rgba(23, 110, 92, 0.5) !important;
}

.bh-search-sheet .bh-sheet-handle { opacity: 0.5; }

/* badge sits on the icon corner, not over it */
html.bh-app-mode .bh-dock-badge {
	top: 4px;
	margin-left: 7px;
}

/* --- V. v2.3.8: outrank the theme's own !important card/auth rules --
   theme ships e.g. html[data-bhcj-route] .bhcj-ui .bh-atc-card-native
   .price .bh-price-now {font-size:15px!important}; repeating the app-mode
   class lifts ours above it without touching the website. */
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-price-now {
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #16241F !important;
}

html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-price-mrp {
	font-size: 11.5px !important;
	color: #9AA5A0 !important;
}

html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-price-off {
	font-size: 9.5px !important;
	font-weight: 800 !important;
	color: #176E5C !important;
}

html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-atc-card-frame a.bh-atc {
	min-height: 34px !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}

/* form fields: the auth screen is styled by .bhcj.bhcj-auth ... !important */
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode input[type="text"],
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode input[type="email"],
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode input[type="password"],
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode input[type="tel"],
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode input[type="number"],
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode textarea,
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode select {
	border: 0 !important;
	border-radius: 15px !important;
	background: #F1EFE8 !important;
	background-color: #F1EFE8 !important;
	box-shadow: none !important;
	color: #17251F !important;
	font-size: 15px !important;
}

/* keep the PDP search box, sort select and qty input on their own rules */
html.bh-app-mode input#bhcj-product-search,
html.bh-app-mode input.qty,
html.bh-app-mode select.orderby {
	background: #F1EFE8 !important;
}

/* --- W. v2.3.9: the Google button joins the soft-fill language ------ */
html.bh-app-mode a[data-provider="google"],
html.bh-app-mode [data-action="connect"][data-provider] {
	min-height: 52px !important;
	border: 0 !important;
	border-radius: 15px !important;
	background: #F1EFE8 !important;
	box-shadow: none !important;
	font-weight: 650 !important;
	color: #17251F !important;
}

html.bh-app-mode a[data-provider="google"]:active,
html.bh-app-mode [data-action="connect"][data-provider]:active {
	background: #E8E5DC !important;
}

/* --- X. v2.4.0: in-card stepper, buy-again rail, iOS momentum ------ */

/* the real Add button stays in flow (so the grid does not move); the
   stepper is painted on top of it */
html.bh-app-mode .bh-atc-card-frame { position: relative; }

html.bh-app-mode a.bh-atc-off {
	opacity: 0 !important;
	pointer-events: none !important;
}

.bh-card-step {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 3px;
	border-radius: 12px;
	background: #176E5C;
	color: #FFFEFA;
	box-shadow: 0 10px 22px -16px rgba(23, 110, 92, 0.9);
	-webkit-tap-highlight-color: transparent;
}

.bh-card-step .bh-step-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.16);
	color: #FFFEFA;
	line-height: 0;
}

.bh-card-step .bh-step-btn:active { background: rgba(255, 255, 255, 0.3); }
.bh-card-step .bh-step-btn[data-busy="1"] { opacity: 0.55; }

.bh-card-step .bh-step-n {
	min-width: 18px;
	text-align: center;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
}

/* buy-again rail */
#bhBuyAgain { padding: 24px 0 8px; }

.bh-again-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 16px 10px;
}

.bh-again-head h2 {
	margin: 0;
	font-size: 19px;
	letter-spacing: -0.022em;
}

.bh-again-all {
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(23, 110, 92, 0.1);
	color: #176E5C;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bh-again-all[data-busy="1"] { opacity: 0.55; }

.bh-again-rail {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 16px 8px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.bh-again-rail::-webkit-scrollbar { display: none; }

.bh-again-card {
	flex: 0 0 124px;
	padding: 8px;
	border: 0;
	border-radius: 14px;
	background: #FFFEFB;
	color: inherit;
	text-align: left;
	box-shadow: 0 10px 22px -20px rgba(30, 60, 46, 0.6);
	-webkit-tap-highlight-color: transparent;
}

.bh-again-card[data-busy="1"] { opacity: 0.6; }

.bh-again-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 10px;
	background: #F1EFE8;
}

.bh-again-card b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 7px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
}

.bh-again-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 4px;
}

.bh-again-bot small { font-size: 11.5px; font-weight: 800; color: #176E5C; }

.bh-again-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 8px;
	background: #176E5C;
	color: #FFFEFA;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.bh-again-card.bh-again-done .bh-again-plus { background: rgba(23, 110, 92, 0.15); color: #176E5C; }

/* momentum scrolling where iOS still cares about the legacy property */
html.bh-app-mode .bh-seen-rail,
html.bh-app-mode .bhcj-categories,
html.bh-app-mode .bh-search-chips {
	-webkit-overflow-scrolling: touch;
}

html.bh-app-mode .bh-search-sheet { overscroll-behavior: contain; }

/* v2.4.0b — keep the stepper's own paint inside a product card, where the
   theme repaints buttons with !important */
html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-card-step {
	background: #176E5C !important;
	border: 0 !important;
	box-shadow: 0 10px 22px -14px rgba(23, 110, 92, 0.95) !important;
}

html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-card-step .bh-step-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #FFFEFA !important;
	cursor: pointer;
	touch-action: manipulation;
}

html.bh-app-mode .bh-card-step .bh-step-btn:active { background: rgba(255, 255, 255, 0.34) !important; }
html.bh-app-mode .bh-card-step .bh-step-btn[data-busy="1"] { opacity: 0.55; }
html.bh-app-mode .bh-card-step .bh-step-btn:focus-visible { outline: 2px solid #FFFEFA; outline-offset: 1px; }

html.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode.bh-app-mode .bh-card-step .bh-step-n {
	color: #FFFEFA !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1;
}

/* ===================================================================
   v2.4.3 — stepper truth, order-history reorder, iOS scroll feel
   =================================================================== */

/* --- X. Stepper: show the tap instantly, mark it while the bag catches up */
html.bh-app-mode .bh-card-step[data-pending="1"] .bh-step-n {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

html.bh-app-mode .bh-card-step[data-pending="1"] .bh-step-plus,
html.bh-app-mode .bh-card-step[data-pending="1"] .bh-step-minus {
	opacity: 0.9;
}

html.bh-app-mode .bh-step-btn[aria-disabled="true"] {
	opacity: 0.32;
}

html.bh-app-mode .bh-step-btn,
html.bh-app-mode .bh-again-card,
html.bh-app-mode [data-bh-tab] {
	touch-action: manipulation;
}

html.bh-app-mode .bh-again-card[data-busy="1"] {
	opacity: 0.55;
}

/* --- Y. iOS: no rubber-band seam, real momentum, contained overscroll --- */
html.bh-app-mode {
	background: #FFFEFA;
	overscroll-behavior-y: none;
}

html.bh-app-mode body {
	-webkit-tap-highlight-color: transparent;
}

html.bh-app-mode .bh-seen-rail,
html.bh-app-mode .bh-again-rail,
html.bh-app-mode .bhcj-categories,
html.bh-app-mode .bh-bag-chips {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

html.bh-app-mode .bh-seen-card,
html.bh-app-mode .bh-again-card {
	scroll-snap-align: start;
}

html.bh-app-mode .bh-sheet {
	max-height: min(86dvh, 720px);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

html.bh-app-mode #bhSearchSheet {
	padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

html.bh-app-mode #bhMiniPdp {
	will-change: transform;
	transform: translateZ(0);
}

/* --- Z. Keyboard open: get the floating bars out of the way ------------- */
html.bh-app-mode.bh-kb-open #bhMiniPdp {
	transform: translateY(180%) !important;
}

html.bh-app-mode.bh-kb-open #bhToast {
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* ===================================================================
   v2.4.5 — home category rail: real photography, tile design, motion
   =================================================================== */

html.bh-app-mode .bh-home-category-row {
	display: flex;
	gap: 10px;
	padding: 10px 16px 9px;
	margin: 0 -16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-left: 16px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}

html.bh-app-mode .bh-home-category-row::-webkit-scrollbar { display: none; }

html.bh-app-mode .bh-home-category-link {
	flex: 0 0 78px;
	width: 78px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	transform-origin: 50% 45%;
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

html.bh-app-mode .bh-home-category-link:active { transform: scale(0.955); }

html.bh-app-mode .bh-home-category-circle {
	position: relative;
	width: 78px;
	height: 78px;
	border-radius: 20px;
	overflow: hidden;
	background: #FFFEFB;
	box-shadow: 0 10px 22px -16px rgba(24, 52, 40, 0.6), inset 0 0 0 1px rgba(27, 42, 37, 0.055);
	transition: box-shadow 0.2s ease;
}

html.bh-app-mode .bh-home-category-circle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1 !important;
	transform: scale(1.02);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

html.bh-app-mode .bh-home-category-link:active .bh-home-category-circle {
	box-shadow: 0 4px 12px -12px rgba(24, 52, 40, 0.55), inset 0 0 0 1px rgba(27, 42, 37, 0.09);
}

html.bh-app-mode .bh-home-category-link:active .bh-home-category-circle img { transform: scale(1.08); }

html.bh-app-mode .bh-home-category-label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.46em;
	text-align: center;
	font-size: 11.5px !important;
	font-weight: 650 !important;
	line-height: 1.23 !important;
	letter-spacing: -0.01em;
	color: #22302C !important;
}

/* staggered entrance, once, on first paint */
@keyframes bhTileIn {
	from { opacity: 0; transform: translateY(9px); }
	to { opacity: 1; transform: none; }
}

html.bh-app-mode .bh-home-category-link {
	animation: bhTileIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.bh-app-mode .bh-home-category-link:nth-child(1) { animation-delay: 0.02s; }
html.bh-app-mode .bh-home-category-link:nth-child(2) { animation-delay: 0.06s; }
html.bh-app-mode .bh-home-category-link:nth-child(3) { animation-delay: 0.1s; }
html.bh-app-mode .bh-home-category-link:nth-child(4) { animation-delay: 0.14s; }
html.bh-app-mode .bh-home-category-link:nth-child(5) { animation-delay: 0.18s; }
html.bh-app-mode .bh-home-category-link:nth-child(6) { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode .bh-home-category-link { animation: none; }
	html.bh-app-mode .bh-home-category-circle img,
	html.bh-app-mode .bh-home-category-link { transition: none; }
}

/* ===================================================================
   v2.4.7 — slim, dismissible install pill on the home feed
   =================================================================== */

html.bh-app-mode #bhInstallPill {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 16px 14px;
	padding: 9px 9px 9px 14px;
	border-radius: 999px;
	background: #FFFEFB;
	box-shadow: 0 10px 24px -20px rgba(24, 52, 40, 0.55), inset 0 0 0 1px rgba(27, 42, 37, 0.07);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

html.bh-app-mode #bhInstallPill.bh-install-in {
	opacity: 1;
	transform: none;
}

html.bh-app-mode #bhInstallPill.bh-install-out {
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
}

html.bh-app-mode #bhInstallPill .bh-install-dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: #176E5C;
	box-shadow: 0 0 0 3px rgba(23, 110, 92, 0.12);
}

html.bh-app-mode #bhInstallPill .bh-install-txt {
	flex: 1;
	min-width: 0;
	display: block;
}

html.bh-app-mode #bhInstallPill .bh-install-txt b {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: #1E2C26;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html.bh-app-mode #bhInstallPill .bh-install-txt small {
	display: block;
	font-size: 10.5px;
	line-height: 1.3;
	color: #7C8A85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html.bh-app-mode #bhInstallPill .bh-install-go {
	flex: none;
	padding: 8px 15px;
	border: 0;
	border-radius: 999px;
	background: #176E5C;
	color: #FFFEFA;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	touch-action: manipulation;
}

html.bh-app-mode #bhInstallPill .bh-install-go:active {
	background: #14594B;
	transform: scale(0.97);
}

html.bh-app-mode #bhInstallPill .bh-install-x {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin-right: 2px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9AA5A0;
	touch-action: manipulation;
}

html.bh-app-mode #bhInstallPill .bh-install-x:active {
	background: rgba(27, 42, 37, 0.06);
	color: #3A4843;
}

@media (prefers-reduced-motion: reduce) {
	html.bh-app-mode #bhInstallPill { transition: none; }
}