/*
 * Biyani product page (mu-plugins/biyani-pdp.php). Loaded on single-product pages only.
 * Brand: Marcellus headings, Jost body, brown #9a633b, ink #1d1a14, soft warm 1px dividers.
 */

/* ---- Tighter summary grouping (Jaroti defaults: 16-23px under every line) ---- */
.single-product div.product .summary .product_title {
	margin-bottom: 8px;
}
.single-product div.product .summary .ts-product-ratings-stock {
	margin-bottom: 6px;
}
.single-product div.product .summary .biyani-sku {
	margin-bottom: 10px;
}
/* Beats Jaroti .woocommerce div.product .summary > p.price:not(:last-child) { margin-bottom: 42px } */
body.single-product div.product .summary > p.price:not(:last-child) {
	margin-bottom: 10px;
}
.single-product div.product .summary .biyani-market-badge {
	display: none !important;
}

/* Above-the-fold on the narrowest phone (S24, 360x780, audit item 4): with the D7 short titles
   (25-40 chars) the title already clears the fold; these tighter gaps bring the price into view
   too. The 420px gallery + 129px header still push the buttons below the fold on every phone —
   that space belongs to gallery.css/header.css, not this file. */
@media (max-width: 480px) {
	.single-product div.product .summary .product_title {
		margin-bottom: 4px;
	}
	.single-product div.product .summary .bj-pdp-rating {
		/* !important: section (b) below re-declares `margin` as a shorthand, which would otherwise
		   beat this longhand margin-bottom by source order. */
		margin-bottom: 6px !important;
	}
	.single-product div.product .summary .ts-product-ratings-stock {
		margin-bottom: 4px;
	}
	.single-product div.product .summary .biyani-sku {
		margin-bottom: 6px;
	}
	body.single-product div.product .summary > p.price:not(:last-child) {
		margin-bottom: 6px;
	}
}

/* ---- (b) The boutiques' Google rating under the title ---- */
.single-product div.product .summary .bj-pdp-rating {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
}
.bj-pdp-rating a {
	color: #5c4f45;
	text-decoration: none;
}
.bj-pdp-rating a:hover,
.bj-pdp-rating a:focus-visible {
	color: #1d1a14;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bj-pdp-rating__score {
	font-weight: 600;
	color: #1d1a14;
}
.bj-pdp-rating__star {
	color: #9a6b1f;
}
.bj-pdp-rating__sep {
	margin: 0 2px;
}
.bj-pdp-rating .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- (d) The piece's description under the buy box ---- */
.single-product div.product .summary .bj-pdp-desc {
	margin: 24px 0 0;
	color: var(--bj-stone, #4A443C);
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 15px;
	line-height: 1.7;
}
.single-product div.product .summary .bj-pdp-desc p {
	margin: 0 0 16px;
}
.single-product div.product .summary .bj-pdp-desc p:last-child {
	margin-bottom: 0;
}

/* Phones / tablets < 1024px keep the vertical stack */
@media (max-width: 1023px) {
	.single-product div.product .summary form.cart {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 12px !important;
		margin-bottom: 12px !important;
	}
	.single-product div.product .summary form.cart .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.single-product div.product .summary form.cart .quantity {
		margin: 0 !important;
	}
	.single-product div.product .summary form.cart .quantity:has(input.qty[max="1"]) .minus,
	.single-product div.product .summary form.cart .quantity:has(input.qty[max="1"]) .plus {
		opacity: 0.35 !important;
		pointer-events: none !important;
		cursor: default !important;
	}
	.single-product div.product .summary .single_add_to_cart_button {
		flex: 1 1 160px !important;
		min-height: 48px !important;
		height: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: var(--bj-radius-pill, 999px) !important;
		font-family: var(--bj-font-body, "Jost", sans-serif) !important;
		/* --bj-fs-button (.875rem) resolves to 12.25px here: html/body font-size is 14px, not the
		   16px rem assumes (audit item: PDP buttons measured 12.25px). Hardcoded 14px instead. */
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		padding: 0 24px !important;
		box-sizing: border-box !important;
		background: var(--bj-ink, #1C1A17) !important;
		color: var(--bj-ivory, #FBF8F3) !important;
		border: 1px solid var(--bj-ink, #1C1A17) !important;
	}
	.single-product div.product .summary .ts-buy-now-button {
		display: block !important;
		width: 100% !important;
		min-height: 48px !important;
		height: 48px !important;
		line-height: 46px !important;
		text-align: center !important;
		border-radius: var(--bj-radius-pill, 999px) !important;
		border: 1px solid var(--bj-ink, #1C1A17) !important;
		background: transparent !important;
		color: var(--bj-ink, #1C1A17) !important;
		font-family: var(--bj-font-body, "Jost", sans-serif) !important;
		/* Same rem-scaling issue as .single_add_to_cart_button above. */
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		margin: 12px 0 16px 0 !important;
		box-sizing: border-box !important;
	}
}
/* ---- Utility row: wishlist · QR-share · Instagram ---- */
.single-product div.product .summary .single-product-buttons {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	border-top: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	padding: 12px 0 !important;
	margin: 16px 0 !important;
}
.single-product div.product .summary .single-product-buttons > * {
	margin: 0 !important;
}

/* All utility buttons: round glass discs */
.single-product div.product .summary .bj-pdp-wa-btn,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a,
.single-product div.product .summary .biyani-cta--instagram {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* WhatsApp round green icon disc (Row 2 first item) */
.single-product div.product .summary .bj-pdp-wa-btn {
	background: #15803D !important;
	color: #FFFFFF !important;
	border: 1px solid #15803D !important;
	box-shadow: 0 2px 8px rgba(21, 128, 61, 0.2) !important;
}
.single-product div.product .summary .bj-pdp-wa-btn:hover {
	background: #166534 !important;
	border-color: #166534 !important;
	box-shadow: 0 6px 18px rgba(21, 128, 61, 0.28) !important;
}
.single-product div.product .summary .bj-pdp-wa-btn svg {
	width: 22px !important;
	height: 22px !important;
	fill: currentColor !important;
}
.single-product div.product .summary .bj-pdp-wa-btn span {
	display: none !important;
}

/* "See on phone" glass outline pill (Row 2 second item) */
.single-product div.product .summary .bj-qr-share-btn {
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	border-radius: 999px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.94)) !important;
	border: 1px solid rgba(28, 26, 23, 0.14) !important;
	box-shadow: 0 2px 8px rgba(18, 14, 10, 0.08) !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.single-product div.product .summary .bj-qr-share-btn {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.65)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
	}
}
/* Hover: a little more opaque + the soft shadow. No gold ring (overrides controls.css .bj-glass:hover). */
.single-product div.product .summary .bj-qr-share-btn:hover {
	background-color: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	border-color: rgba(28, 26, 23, 0.14) !important;
	box-shadow: 0 6px 18px rgba(18, 14, 10, 0.12) !important;
	transform: none !important;
}
.single-product div.product .summary .bj-qr-share-btn svg.bj-icon-phone-qr {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	color: var(--bj-ink, #1C1A17) !important;
	flex-shrink: 0 !important;
}
.single-product div.product .summary .bj-qr-share-btn svg.bj-icon-phone-qr rect.bj-phone-frame {
	fill: none !important;
	stroke: var(--bj-ink, #1C1A17) !important;
	stroke-width: 1.6px !important;
}
.single-product div.product .summary .bj-qr-share-btn svg.bj-icon-phone-qr line.bj-phone-speaker {
	stroke: var(--bj-ink, #1C1A17) !important;
	stroke-width: 1.2px !important;
}
.single-product div.product .summary .bj-qr-share-btn svg.bj-icon-phone-qr rect.bj-qr-dot {
	fill: var(--bj-ink, #1C1A17) !important;
	stroke: none !important;
}
.single-product div.product .summary .bj-qr-share-btn .bj-qr-share-label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--bj-ink, #1C1A17) !important;
}

/* Wishlist and Instagram icon discs */
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a,
.single-product div.product .summary .biyani-cta--instagram {
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.94)) !important;
	border: 1px solid rgba(28, 26, 23, 0.14) !important;
	box-shadow: 0 2px 8px rgba(18, 14, 10, 0.08) !important;
	color: var(--bj-ink, #1C1A17) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a,
	.single-product div.product .summary .biyani-cta--instagram {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.65)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
	}
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a:hover,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a:hover,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a:hover,
.single-product div.product .summary .biyani-cta--instagram:hover {
	background-color: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	border-color: rgba(28, 26, 23, 0.14) !important;
	box-shadow: 0 6px 18px rgba(18, 14, 10, 0.12) !important;
	color: var(--bj-ink, #1C1A17) !important;
}

/* Wishlist customisations */
.single-product div.product .summary .yith-wcwl-add-to-wishlist {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button {
	margin: 0 !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .feedback,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .separator,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.view-wishlist,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a span:not(.ts-tooltip) {
	display: none !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist a {
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist a svg {
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	color: var(--bj-ink, #1C1A17) !important;
	stroke: currentColor !important;
}

/* Saved state: YITH swaps the heart for an icon-less "Browse wishlist" link (or a.delete_item in
   remove mode), and Jaroti paints its data-title and a font heart over the disc as pseudo-elements.
   Show one filled heart instead. */
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a::before,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a::after,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a::before,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a::after,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .exists a::before,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .exists a::after,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.delete_item::before,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.delete_item::after {
	content: none !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse .ts-tooltip,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse .ts-tooltip,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .exists .ts-tooltip,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.delete_item .ts-tooltip {
	display: none !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C1A17' stroke='%231C1A17' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
}
.single-product div.product .summary .yith-wcwl-add-to-wishlist .exists a svg,
.single-product div.product .summary .yith-wcwl-add-to-wishlist .exists a svg path,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.delete_item svg,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a.delete_item svg path {
	fill: var(--bj-ink, #1C1A17) !important;
	stroke: var(--bj-ink, #1C1A17) !important;
}

/* Remove theme's separate sharing control completely */
.single-product div.product .summary .ts-social-sharing {
	display: none !important;
}

/* Instagram icon button */
.single-product div.product .summary .biyani-cta-row {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
}
.single-product div.product .summary .biyani-cta--whatsapp {
	display: none !important;
}
.single-product div.product .summary .biyani-cta--instagram i {
	font-size: 20px !important;
	color: var(--bj-ink, #1C1A17) !important;
	line-height: 1 !important;
}
.single-product div.product .summary .biyani-cta--instagram span {
	display: none !important;
}
/* Share in utility row */
.single-product div.product .summary .ts-social-sharing {
	margin: 0 !important;
	border: none !important;
	padding: 0 !important;
}
/* Soft 1px dividers instead of Jaroti grey */
.single-product div.product .summary .ts-social-sharing,
.single-product div.product .summary .meta-content {
	border-color: rgba(140, 90, 43, 0.14);
}
/* Tags row retired (biyani-retired-urls.php) — with brand/category off the block is empty: no stray divider. */
.single-product div.product .summary .meta-content:empty {
	display: none;
}

/* Meta labels ("Tags:" etc.): Jaroti's heading selector list sets span:first-child to Marcellus. */
.single-product div.product .summary .meta-content > div > span:first-child {
	font-family: var(--bj-font-body, "Jost", sans-serif);
}

/* Highlight the options when the sticky bar sends the shopper there without a choice made */
.single-product div.product .summary table.variations.bj-pdp-attention {
	outline: 2px solid #4a1f4f;
	outline-offset: 6px;
	border-radius: 6px;
}

/* WooCommerce "Clear" options link: Jaroti pure red #ff0000 is 4.0:1; #c40000 is 6.3:1. */
.single-product div.product .summary table.variations a.reset_variations {
	color: #c40000;
}

/* Keyboard focus on the summary controls: a thin gold-light hairline, never a ring on mouse click. */
.single-product div.product .summary .single_add_to_cart_button:focus-visible,
.single-product div.product .summary .ts-buy-now-button:focus-visible,
.single-product div.product .summary .quantity .minus:focus-visible,
.single-product div.product .summary .quantity .plus:focus-visible,
.single-product div.product .summary .bj-pdp-wa-btn:focus-visible,
.single-product div.product .summary .bj-qr-share-btn:focus-visible,
.single-product div.product .summary .yith-wcwl-add-to-wishlist a:focus-visible,
.single-product div.product .summary .biyani-cta--instagram:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 2px !important;
}
.single-product div.product .summary .single_add_to_cart_button:focus:not(:focus-visible),
.single-product div.product .summary .ts-buy-now-button:focus:not(:focus-visible),
.single-product div.product .summary .quantity .minus:focus:not(:focus-visible),
.single-product div.product .summary .quantity .plus:focus:not(:focus-visible),
.single-product div.product .summary .bj-pdp-wa-btn:focus:not(:focus-visible),
.single-product div.product .summary .bj-qr-share-btn:focus:not(:focus-visible),
.single-product div.product .summary .yith-wcwl-add-to-wishlist a:focus:not(:focus-visible),
.single-product div.product .summary .biyani-cta--instagram:focus:not(:focus-visible) {
	outline: none !important;
}
/* controls.css gives every .bj-glass a gold ring and a lift on focus-visible; the hairline replaces it. */
.single-product div.product .summary .bj-qr-share-btn:focus-visible:not(:hover) {
	border-color: rgba(28, 26, 23, 0.14) !important;
	box-shadow: 0 2px 8px rgba(18, 14, 10, 0.08) !important;
	transform: none !important;
}

/* ==========================================================================
   Desktop buy-box grid (>= 1024 px), owner's sizing scale 2026-09-26: unit u = 48px (every
   control 48px tall, icon circles u×u), one gap g = 16px (between controls and between rows),
   span(n) = n*u + (n-1)*g. 8 columns, 8u+7g = 496px:
     Row 0    SKU · in stock                                          (full width, left edge)
     Swatch   variation attribute picker (variable products only, full width, above row 1)
     Row 1    price span(2) · qty span(2) · cart circle span(1) · wishlist circle span(1)
     Row 2    Buy now span(4) (under price+qty) · WhatsApp span(1) (under cart) ·
              Instagram span(1) (under wishlist) · See on phone span(2) (fills cols 7-8)
   CSS Grid, not flex: a fixed 8x48px column track is what makes circles land under circles and
   pill ends meet column edges regardless of how many controls a row holds - flex-wrap's arithmetic
   can't guarantee that. Rows stay auto-height and every row's own leading item(s) carry the 16px
   (g) margin-top that separates it from whatever is above (matches this file's existing spacing
   convention; no grid row-gap, so title/rating/tags typography spacing above and below the grid
   -- untouched -- can't be double-counted with the grid's own g). The WooCommerce / Jaroti wrappers
   (form, variation wrappers, buttons row, CTA row) stay flattened with display: contents, so every
   control is a direct grid item, placed by named row + column line, not DOM order or flex-wrap.
   No DOM moves: below 1024 px the stack is untouched. Keyboard order stays the DOM order (qty, Add
   to cart, Buy now, WhatsApp, wishlist, See on phone, Instagram). The icon button is still the
   form's own submit button, so variation validation and the AJAX add are WooCommerce's. No gold
   rings anywhere here (hover = glass pop, keyboard :focus-visible = plum, both defined above).
   ========================================================================== */

/* 1024-1279 px: Jaroti's own gallery/summary split leaves only ~408px for the summary content
   (438px column - 30px padding) here, short of the fixed 496px grid; >= 1280 already leaves 584px,
   comfortably wider than 496px, so only this band needs a fixed-width override. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.single-product div.product .product-images-summary div.woocommerce-product-gallery {
		width: calc(100% - 526px) !important;
	}
	.single-product div.product div.summary {
		width: 526px !important;
	}
}

@media (min-width: 1024px) {
	.single-product div.product .summary {
		display: grid !important;
		grid-template-columns: repeat(8, 48px) !important;
		grid-template-rows: [title] auto [rating] auto [meta] auto [swatch] auto [variation-desc] auto [row1] auto [row2] auto [trust] auto [tags] auto !important;
		column-gap: 16px !important;
		row-gap: 0 !important;
		align-items: center !important;
	}
	.single-product div.product .summary form.cart,
	.single-product div.product .summary form.cart .single_variation_wrap,
	.single-product div.product .summary form.cart .woocommerce-variation-add-to-cart,
	.single-product div.product .summary .single-product-buttons,
	.single-product div.product .summary .biyani-cta-row {
		display: contents !important;
	}
	/* Their clearfix pseudo-elements would otherwise become stray grid items. */
	.single-product div.product .summary form.cart::before,
	.single-product div.product .summary form.cart::after,
	.single-product div.product .summary form.cart .single_variation_wrap::before,
	.single-product div.product .summary form.cart .single_variation_wrap::after,
	.single-product div.product .summary form.cart .woocommerce-variation-add-to-cart::before,
	.single-product div.product .summary form.cart .woocommerce-variation-add-to-cart::after,
	.single-product div.product .summary .single-product-buttons::before,
	.single-product div.product .summary .single-product-buttons::after,
	.single-product div.product .summary .biyani-cta-row::before,
	.single-product div.product .summary .biyani-cta-row::after {
		content: none !important;
	}

	/* Default: full width (all 8 columns), for anything not placed below. */
	.single-product div.product .summary > *,
	.single-product div.product .summary :where(form.cart, .single_variation_wrap, .woocommerce-variation-add-to-cart, .single-product-buttons, .biyani-cta-row) > * {
		grid-column: 1 / -1 !important;
		min-width: 0;
	}
	.single-product div.product .summary > .product_title {
		grid-row: title !important;
	}
	.single-product div.product .summary > .bj-pdp-rating {
		grid-row: rating !important;
	}

	/* Row 0: SKU · stock, one line, left edge of the grid (wrapper printed by biyani-pdp.php) */
	.single-product div.product .summary > .bj-pdp-meta {
		grid-row: meta !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
	}
	.single-product div.product .summary .bj-pdp-meta > .biyani-sku,
	.single-product div.product .summary .bj-pdp-meta > .ts-product-ratings-stock {
		flex: 0 0 auto !important;
		margin: 0 !important;
		font-family: var(--bj-font-body, "Jost", sans-serif);
		font-size: 13px;
		line-height: 20px;
	}
	.single-product div.product .summary .bj-pdp-meta > .ts-product-ratings-stock {
		align-items: center;
	}
	.single-product div.product .summary .bj-pdp-meta > .ts-product-ratings-stock::before {
		content: "\00B7";
		margin: 0 8px 0 -4px;
		color: var(--bj-mute, #716B5B);
	}
	.single-product div.product .summary .bj-pdp-meta > .ts-product-ratings-stock .availability {
		margin: 0 !important;
		font-size: 13px;
		line-height: 20px;
	}
	.single-product div.product .summary .bj-pdp-meta > .ts-product-ratings-stock .availability .label {
		display: none !important;
	}

	/* Swatch row (variable products): same grid, full width, above row 1 */
	.single-product div.product .summary table.variations {
		grid-row: swatch !important;
		margin: 16px 0 0 !important;
	}
	.single-product div.product .summary form.cart .single_variation_wrap div.woocommerce-variation.single_variation:not(:empty) {
		grid-row: variation-desc !important;
		margin: 16px 0 0 !important;
	}
	.single-product div.product .summary .biyani-colour-swatches {
		grid-row: swatch !important;
	}

	/* Row 1: price · qty · Add to cart · wishlist. Every item carries the same 16px top margin so
	   their margin-boxes agree on the auto row's height and align-items: center lines up price
	   (shorter text) against the 48px controls (qty/cart/wishlist). */
	body.single-product div.product .summary > p.price,
	body.single-product div.product .summary > p.price:not(:last-child),
	.single-product div.product .summary > .ts-variation-price {
		grid-row: row1 !important;
		grid-column: 1 / span 2 !important;
		margin: 16px 0 0 !important;
		font-family: var(--bj-font-display, "Marcellus", serif) !important;
		font-size: clamp(22px, 2.2vw, 28px) !important;
		line-height: 48px !important;
		white-space: nowrap !important;
		letter-spacing: -0.02em !important;
	}
	body.single-product div.product .summary p.price .woocommerce-Price-currencySymbol,
	.single-product div.product .summary .ts-variation-price .woocommerce-Price-currencySymbol {
		font-size: 0.82em !important;
		margin-right: 2px !important;
		vertical-align: 1px;
	}
	.single-product div.product .summary form.cart .quantity {
		grid-row: row1 !important;
		grid-column: 3 / span 2 !important;
		width: auto !important;
		max-width: none !important;
		margin: 16px 0 0 !important;
	}
	.single-product div.product .summary form.cart .quantity .number-button,
	.single-product div.product .summary form.cart .quantity input.qty {
		height: 48px !important;
	}
	.single-product div.product .summary form.cart .quantity input.qty {
		line-height: 46px !important;
	}
	.single-product div.product .summary form.cart .quantity:has(input.qty[max="1"]) .minus,
	.single-product div.product .summary form.cart .quantity:has(input.qty[max="1"]) .plus {
		opacity: 0.35 !important;
		pointer-events: none !important;
		cursor: default !important;
	}
	/* Icon-only Add to cart: the text stays in the button (WooCommerce, screen readers via aria-label
	   set in pdp.js) at font-size 0; the glyph is a background so Jaroti's loading spinner (::before /
	   ::after) still works. */
	.single-product div.product .summary .single_add_to_cart_button {
		grid-row: row1 !important;
		grid-column: 5 / span 1 !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		margin: 16px 0 0 !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		border: 1px solid var(--bj-ink, #1C1A17) !important;
		border-radius: var(--bj-radius-pill, 999px) !important;
		background-color: var(--bj-ink, #1C1A17) !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 3.75h2.1l2.3 10.6a1.6 1.6 0 0 0 1.57 1.27h8.36a1.6 1.6 0 0 0 1.56-1.24l1.61-6.88H5.9'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.35'/%3E%3Ccircle cx='17' cy='19.6' r='1.35'/%3E%3Cpath d='M13.1 9.3v4.4M10.9 11.5h4.4'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 22px 22px !important;
		color: transparent !important;
		font-size: 0 !important;
		line-height: 0 !important;
		letter-spacing: 0 !important;
		text-indent: 0 !important;
		box-shadow: none !important;
		cursor: pointer !important;
		transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
	}
	.single-product div.product .summary .single_add_to_cart_button:hover {
		background-color: #2D2A26 !important;
		border-color: #2D2A26 !important;
		box-shadow: 0 6px 18px rgba(18, 14, 10, 0.18) !important;
	}
	.single-product div.product .summary .single_add_to_cart_button.loading {
		background-image: none !important;
	}
	.single-product div.product .summary .single_add_to_cart_button.added:not(.loading) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") !important;
	}
	.single-product div.product .summary .single_add_to_cart_button.disabled,
	.single-product div.product .summary .single_add_to_cart_button:disabled {
		opacity: 0.55 !important;
		cursor: not-allowed !important;
		box-shadow: none !important;
	}
	/* Wishlist heart sits under the price (row 2, col 1) and Buy now takes its old row-1 slot (owner,
	   2026-09-27: swapped so both rows start at col 1 and end at col 8). */
	.single-product div.product .summary .single-product-buttons > .yith-wcwl-add-to-wishlist {
		grid-row: row2 !important;
		grid-column: 1 / span 1 !important;
		margin: 16px 0 0 !important;
	}
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
	.single-product div.product .summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
	}

	/* Row 1 ends with Buy now (cols 6-8, beside Add to cart); row 2: wishlist (col 1) · Instagram (col 2) ·
	   WhatsApp pill (cols 3-5) · See on phone (cols 6-8, under Buy now). Every control keeps the 16px
	   margin-top of the 8/16/32/64 scale so the rows' top edges line up. */
	.single-product div.product .summary .ts-buy-now-button,
	.woocommerce div.product .summary a.ts-buy-now-button {
		grid-row: row1 !important;
		grid-column: 6 / span 3 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 48px !important;
		min-height: 48px !important;
		margin: 16px 0 0 !important;
		padding: 0 20px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		border: 1px solid var(--bj-ink, #1C1A17) !important;
		border-radius: var(--bj-radius-pill, 999px) !important;
		background: transparent !important;
		color: var(--bj-ink, #1C1A17) !important;
		font-family: var(--bj-font-body, "Jost", sans-serif) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 46px !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		box-shadow: none !important;
		cursor: pointer !important;
		transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
	}
	.single-product div.product .summary .ts-buy-now-button:hover,
	.woocommerce div.product .summary a.ts-buy-now-button:hover {
		background: rgba(28, 26, 23, 0.05) !important;
		color: var(--bj-ink, #1C1A17) !important;
		box-shadow: 0 6px 18px rgba(18, 14, 10, 0.12) !important;
	}
	.single-product div.product .summary .single-product-buttons > .bj-pdp-wa-btn,
	.single-product div.product .summary .biyani-cta-row > .biyani-cta--instagram {
		grid-row: row2 !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		margin: 16px 0 0 !important;
	}
	/* Row spans (owner, 2026-09-27: "each line sums up to the same"): row 1 = price 2 + qty 2 + cart 1 +
	   Buy now 3; row 2 = wishlist 1 + Instagram 1 + WhatsApp 3 + See on phone 3. Both rows = 8 and every
	   control edge in row 2 lands on an edge in row 1 (WhatsApp spans qty+cart, See on phone = Buy now). */
	.single-product div.product .summary .single-product-buttons > .bj-pdp-wa-btn {
		grid-column: 3 / span 3 !important;
		width: auto !important;
		padding: 0 18px !important;
		gap: 8px !important;
		border-radius: var(--bj-radius-pill, 999px) !important;
	}
	.single-product div.product .summary .bj-pdp-wa-btn .bj-pdp-wa-btn__label {
		display: inline !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: #FFFFFF !important;
	}
	/* Instagram in its own colours: the brand gradient disc with a white glyph */
	.single-product div.product .summary .biyani-cta-row > .biyani-cta--instagram {
		grid-column: 2 / span 1 !important;
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border: 0 !important;
		box-shadow: 0 2px 8px rgba(214, 36, 159, 0.18) !important;
		color: #FFFFFF !important;
	}
	.single-product div.product .summary .biyani-cta-row > .biyani-cta--instagram:hover {
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
		box-shadow: 0 6px 18px rgba(214, 36, 159, 0.28) !important;
		color: #FFFFFF !important;
	}
	.single-product div.product .summary .biyani-cta-row > .biyani-cta--instagram i {
		color: #FFFFFF !important;
		font-size: 22px !important;
	}
	.single-product div.product .summary .single-product-buttons > .bj-qr-share-btn {
		grid-row: row2 !important;
		grid-column: 6 / span 3 !important;
		width: auto !important;
		height: 48px !important;
		min-height: 48px !important;
		margin: 16px 0 0 !important;
		padding: 0 18px !important;
	}


	/* Phones / touch devices hide "See on phone" (below): WhatsApp stretches across cols 3-8 so row 2
	   still spans all 8 columns with no gap. */
	@media (hover: none) and (pointer: coarse) {
		.single-product div.product .summary .single-product-buttons > .bj-pdp-wa-btn {
			grid-column: 3 / span 6 !important;
		}
	}
	/* Description: full 8-col width, same left edge, one doubling-step (32px) below row 2 */
	.single-product div.product .summary > .bj-pdp-desc {
		grid-row: trust !important;
		margin: 32px 0 0 !important;
	}
	.single-product div.product .summary > .meta-content {
		grid-row: tags !important;
	}
}

/* Phones (<= 767 px or touch): hide "See on phone" and let the WhatsApp pill fill the utility row
   beside wishlist and Instagram so there is no hole. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.single-product div.product .summary .bj-qr-share-btn {
		display: none !important;
	}
}
@media (max-width: 767px), (max-width: 1023px) and (hover: none) and (pointer: coarse) {
	.single-product div.product .summary .bj-pdp-wa-btn {
		flex: 1 1 auto !important;
		width: auto !important;
		padding: 0 20px !important;
		gap: 8px !important;
	}
	.single-product div.product .summary .bj-pdp-wa-btn span {
		display: inline !important;
		font-family: var(--bj-font-body, "Jost", sans-serif) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: #FFFFFF !important;
	}
}

/* Glass tooltip for the icon-only controls (pdp.js, >= 1024 px, mouse hover or keyboard focus).
   The controls carry their names in aria-label; this is visual only (aria-hidden). */
.bj-pdp-tip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92));
	border: 1px solid var(--bj-glass-border-solid, rgba(140, 90, 43, 0.20));
	box-shadow: 0 4px 16px rgba(18, 14, 10, 0.12);
	color: var(--bj-ink, #1C1A17);
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(2px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bj-pdp-tip {
		background: rgba(252, 249, 243, 0.9);
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%));
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%));
		border-color: var(--bj-glass-border, rgba(255, 255, 255, 0.55));
		box-shadow: var(--bj-glass-shadow, 0 4px 16px rgba(18, 14, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55));
	}
}
.bj-pdp-tip.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* ---- (a) Sticky bar: phones only ---- */
.bj-pdp-bar {
	display: none;
}

@media (max-width: 767px) {
	/* WooCommerce "Clear" link sat on top of the Add to cart button (absolutely positioned, no room). */
	.single-product div.product .summary table.variations .reset_variations {
		position: static;
		display: inline-block;
		margin: 6px 0 0;
	}

	/* Room for the bar at the end of the page. */
	body.single-product {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* Jaroti back-to-top sits at bottom:0; lift it to the currency pill height (72px, set in
	   biyani-currency-routing.php for product pages) so the bar never covers it. */
	body.single-product #to-top {
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	.bj-pdp-bar {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		box-sizing: border-box;
		min-height: 64px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid rgba(140, 90, 43, 0.18);
		box-shadow: 0 -4px 16px rgba(18, 14, 10, 0.08);
		font-family: Jost, sans-serif;
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}
	.bj-pdp-bar.is-hidden {
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.bj-pdp-bar__info {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}
	.bj-pdp-bar__price {
		font-family: Marcellus, serif;
		font-size: 18px;
		color: #1d1a14;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bj-pdp-bar__price .price {
		margin: 0;
		font-size: inherit;
	}
	.bj-pdp-bar__price del {
		font-size: 12px;
		color: #6e6e6e;
		margin-right: 4px;
	}
	.bj-pdp-bar__price ins {
		text-decoration: none;
	}
	.bj-pdp-bar__opt {
		font-size: 12px;
		color: #5c4f45;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bj-pdp-bar__add {
		flex: 0 0 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #1c1a17;
		color: #fbf8f3;
		cursor: pointer;
		transition: transform 0.15s ease, background-color 0.15s ease;
	}
	.bj-pdp-bar__add .bj-pdp-icon {
		width: 24px;
		height: 24px;
	}
	.bj-pdp-bar__add:hover,
	.bj-pdp-bar__add:focus-visible {
		background: #2e2a25;
		color: #fbf8f3;
	}
	.bj-pdp-bar__add:active {
		transform: scale(0.94);
	}
	.bj-pdp-bar__add.is-loading {
		opacity: 0.7;
	}
	/* Added: plum with a check mark (distinct from hover), reverts after 2.5 s (pdp.js). */
	.bj-pdp-bar__add.is-added {
		background: #4a1f4f;
	}
	@media (prefers-reduced-motion: reduce) {
		.bj-pdp-bar__add {
			transition: none;
		}
		.bj-pdp-bar__add:active {
			transform: none;
		}
	}

	.bj-pdp-bar__wa {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: #15803d;
		color: #fff !important;
		text-decoration: none !important;
		transition: background 0.2s ease, transform 0.2s ease;
	}
	.bj-pdp-bar__wa:hover,
	.bj-pdp-bar__wa:focus-visible {
		background: #116b33;
	}
	.bj-pdp-bar__wa .bj-pdp-icon {
		width: 22px;
		height: 22px;
	}
	.bj-pdp-bar__wa-label {
		display: none;
	}
	.bj-pdp-bar--ask-only .bj-pdp-bar__wa {
		flex: 0 0 auto;
		width: auto;
		padding: 0 18px;
	}
	.bj-pdp-bar--ask-only .bj-pdp-bar__wa-label {
		display: inline;
		margin-left: 6px;
	}
}

/* ==========================================================================
   Tabs & Reviews Polish (Constrained width, readable typography, token styles)
   ========================================================================== */

/* Tabs container: max 920px centred */
.woocommerce-tabs.wc-tabs-wrapper {
	max-width: 920px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}

/* Tab navigation headings: Marcellus 400 ~20-22px */
.woocommerce-tabs ul.tabs {
	display: flex !important;
	justify-content: center !important;
	gap: 32px !important;
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	padding: 0 0 16px 0 !important;
	margin-bottom: 32px !important;
}
.woocommerce-tabs ul.tabs li {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	color: var(--bj-mute, #716B5B) !important;
	text-decoration: none !important;
	padding-bottom: 8px !important;
	position: relative !important;
	transition: color 0.2s ease !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--bj-ink, #1C1A17) !important;
}
/* One 2px ink underline on the active tab (owner, 2026-09-27: was gold) */
.woocommerce-tabs ul.tabs li.active a::after {
	content: '' !important;
	position: absolute !important;
	bottom: -17px !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: var(--bj-ink, #1C1A17) !important;
}
/* Review count beside "Reviews" (biyani-pdp.php): Jost with tabular figures, because Marcellus draws
   0 and 1 like the letters O and I. */
.woocommerce-tabs ul.tabs li a .bj-tab-count {
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	font-variant-numeric: tabular-nums !important;
	letter-spacing: 0 !important;
}

/* Tab panels */
.woocommerce-tabs .panel {
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--bj-stone, #4A443C) !important;
}

/* Reviews container */
#reviews {
	max-width: 860px !important;
	margin: 0 auto !important;
}
#reviews .woocommerce-Reviews-title {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	color: var(--bj-ink, #1C1A17) !important;
	margin-bottom: 16px !important;
	text-align: center !important;
}
#reviews .woocommerce-product-rating {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-bottom: 24px !important;
}

/* Review list */
#reviews ol.commentlist {
	padding: 0 !important;
	list-style: none !important;
}
#reviews ol.commentlist li.review {
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	padding: 20px 0 !important;
	margin: 0 !important;
}
#reviews ol.commentlist li.review .comment_container {
	display: flex !important;
	gap: 16px !important;
	align-items: flex-start !important;
}
#reviews ol.commentlist li.review img.avatar {
	width: 52px !important;
	height: 52px !important;
	border-radius: 999px !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}
#reviews ol.commentlist li.review .comment-text {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
#reviews ol.commentlist li.review .comment-text .meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 6px !important;
	font-size: 14px !important;
	color: var(--bj-mute, #716B5B) !important;
}
#reviews ol.commentlist li.review .comment-text .meta strong {
	color: var(--bj-ink, #1C1A17) !important;
	font-weight: 600 !important;
}
#reviews ol.commentlist li.review .star-rating {
	float: right !important;
	margin-top: 2px !important;
}
#reviews ol.commentlist li.review .description {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--bj-ink, #1C1A17) !important;
	max-width: 70ch !important;
}
/* Phones: the review's stars sit on their own line above the name. Jaroti's own
   .woocommerce #reviews #comments ol.commentlist li .star-rating rule (theme's style.css) positions
   this absolute (top:4px; right:0), overlapping the date; back to relative (its own default, per
   .woocommerce .star-rating in woocommerce.css) so it flows in place instead - stays position:relative,
   not static, because the filled-stars overlay (.star-rating span, percentage width) is itself absolute
   and needs this element as its positioned ancestor. */
@media (max-width: 767px) {
	#reviews ol.commentlist li.review .star-rating {
		position: relative !important;
		float: none !important;
		margin: 0 0 8px !important;
	}
}

/* Write a review (owner, 2026-09-27): pdp.js folds the form behind this span(3) pill (3 x 48 + 2 x 16
   = 176px, the Buy now outline pill's look); it gives way to the form in place. Without JavaScript the
   form simply shows. */
#reviews .bj-review-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 176px !important;
	height: 48px !important;
	min-height: 48px !important;
	margin: 32px auto 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--bj-ink, #1C1A17) !important;
	border-radius: var(--bj-radius-pill, 999px) !important;
	background: transparent !important;
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#reviews .bj-review-toggle:hover,
#reviews .bj-review-toggle:active {
	background: rgba(28, 26, 23, 0.05) !important;
	border-color: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ink, #1C1A17) !important;
	box-shadow: 0 6px 18px rgba(18, 14, 10, 0.12) !important;
}
#reviews .bj-review-toggle:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}
#reviews .bj-review-toggle[hidden],
#review_form_wrapper[hidden] {
	display: none !important;
}

/* Review form: 640px centred, one grid (Name + Email side by side from 768px), 16px between rows,
   32px after the privacy line and before Submit. */
#review_form_wrapper {
	max-width: 640px !important;
	margin: 32px auto 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
}
#review_form .comment-reply-title {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-align: center !important;
	display: block !important;
	margin: 0 0 8px !important;
}
#review_form #commentform {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	row-gap: 16px !important;
	column-gap: 16px !important;
}
#review_form #commentform > * {
	grid-column: 1 / -1 !important;
	width: auto !important;
	margin: 0 !important;
}
@media (min-width: 768px) {
	#review_form #commentform {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	#review_form #commentform > .comment-form-author {
		grid-column: 1 !important;
	}
	#review_form #commentform > .comment-form-email {
		grid-column: 2 !important;
	}
}
@media (max-width: 767px) {
	#review_form .comment-reply-title {
		font-size: 20px !important;
	}
}
/* Privacy line and the save-my-details consent: 13px, muted */
#review_form #commentform > .comment-notes {
	margin-bottom: 16px !important;
	text-align: center !important;
}
#review_form .comment-notes,
#review_form .comment-form-cookies-consent label {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--bj-mute, #716B5B) !important;
}
#review_form .comment-form-rating {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
}
#review_form .comment-form-rating label {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}
/* Stars 24px, 8px apart */
#review_form .comment-form-rating p.stars {
	margin: 0 !important;
	line-height: 0 !important;
}
#review_form p.stars > span {
	display: inline-flex !important;
	gap: 8px !important;
}
#review_form p.stars a {
	width: 24px !important;
	height: 24px !important;
	font-size: 24px !important;
}
#review_form p.stars a::before {
	width: 24px !important;
	height: 24px !important;
	font-size: 24px !important;
	line-height: 24px !important;
}
#review_form p.stars a:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}
#review_form p.stars a:focus:not(:focus-visible) {
	outline: none !important;
}
#review_form p.comment-form-comment label,
#review_form p.comment-form-author label,
#review_form p.comment-form-email label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin-bottom: 8px !important;
}
/* Fields: ids so these outrank jaroti-child/style.css (#review_form #respond ..., its gold focus ring) */
#reviews #review_form #respond textarea,
#reviews #review_form #respond input[type="text"],
#reviews #review_form #respond input[type="email"] {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	border-radius: var(--bj-radius-input, 4px) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.18)) !important;
	padding: 12px 16px !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--bj-ink, #1C1A17) !important;
	box-shadow: none !important;
}
#reviews #review_form #respond input[type="text"],
#reviews #review_form #respond input[type="email"] {
	height: 48px !important;
}
/* The theme fixes the textarea at 230px; let rows="4" (biyani-pdp.php) set it */
#reviews #review_form #respond textarea {
	height: auto !important;
	min-height: 0 !important;
	resize: vertical !important;
}
#reviews #review_form #respond textarea:focus,
#reviews #review_form #respond input[type="text"]:focus,
#reviews #review_form #respond input[type="email"]:focus {
	border-color: var(--bj-ink, #1C1A17) !important;
	box-shadow: none !important;
	outline: none !important;
}
#reviews #review_form #respond textarea:focus-visible,
#reviews #review_form #respond input[type="text"]:focus-visible,
#reviews #review_form #respond input[type="email"]:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}
/* Submit: ink pill, span(2) = 2 x 48 + 16 = 128px, 32px below the consent line */
#review_form #commentform > .form-submit {
	margin-top: 16px !important;
	text-align: center !important;
}
#reviews #review_form #respond #submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 128px !important;
	min-width: 128px !important;
	min-height: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	border-radius: var(--bj-radius-pill, 999px) !important;
	background: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	border: 1px solid var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 0 16px !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#reviews #review_form #respond #submit:hover {
	background: #2D2A26 !important;
	border-color: #2D2A26 !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	box-shadow: 0 6px 18px rgba(18, 14, 10, 0.18) !important;
}
#reviews #review_form #respond #submit:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* ==========================================================================
   Phone QR Modal Dialog (Desktop only)
   ========================================================================== */
.bj-qr-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.bj-qr-modal.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.bj-qr-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(28, 26, 23, 0.45);
}
.bj-qr-modal__dialog {
	position: relative;
	z-index: 1;
	width: 380px !important;
	max-width: 90vw !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.96)) !important;
	border: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.65)) !important;
	border-radius: 20px !important;
	padding: 32px 24px 24px 24px !important;
	box-shadow: 0 16px 40px rgba(18, 14, 10, 0.16) !important;
	text-align: center !important;
	box-sizing: border-box !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bj-qr-modal__dialog {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.88));
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(16px) saturate(160%));
		backdrop-filter: var(--bj-glass-blur, blur(16px) saturate(160%));
	}
}
.bj-qr-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(140, 90, 43, 0.18);
	background: rgba(255, 253, 248, 0.8);
	color: var(--bj-ink, #1C1A17);
	font-size: 22px;
	line-height: 34px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	transition: all 0.2s ease;
}
.bj-qr-modal__close:hover {
	background: #FFFFFF;
	border-color: rgba(74, 31, 79, 0.4);
}
.bj-qr-modal__canvas-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}
.bj-qr-modal__canvas-wrap canvas {
	width: 260px !important;
	height: 260px !important;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(18, 14, 10, 0.08);
}
.bj-qr-modal__caption {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif);
	font-size: 15px;
	color: var(--bj-ink, #1C1A17);
	line-height: 1.4;
	margin: 0 0 16px 0;
}

/* Share buttons row inside modal */
.bj-qr-modal__share-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--bj-line, rgba(28, 26, 23, 0.10));
}
.bj-qr-modal__share-btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
}
.bj-qr-modal__share-btn svg {
	width: 18px !important;
	height: 18px !important;
	color: var(--bj-ink, #1C1A17) !important;
}
.bj-qr-modal__share-btn:hover svg {
	color: var(--bj-ink, #1C1A17) !important;
}
.bj-qr-copy-btn.is-copied .bj-icon-copy {
	display: none !important;
}
.bj-qr-copy-btn.is-copied .bj-icon-check {
	display: block !important;
}
.is-hidden {
	display: none !important;
}

/* The theme's add-to-cart popup can open with an empty .add-to-cart-popup-content (after the phone
   sticky bar's add): hide it when empty — the bar's ✓ state and the header count already confirm. */
@media (max-width: 767px) {
	.add-to-cart-popup-container:has(.add-to-cart-popup-content:empty) {
		display: none !important;
	}
}

/* Fix inverted thumbnail state (S5) */
.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 0.6 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	opacity: 1 !important;
}

/* Related products + up-sells shelf (biyani-pdp/related.php, owner backlog 2026-09-27). One row on the
   shared carousel engine (biyani-design/carousel.js, shelf mode), the same swipe as the homepage shelves:
   no arrow, dot or pause buttons (owner, 2026-09-27), touch swipes natively, a mouse drags, a trackpad
   swipe scrolls, left/right arrows with focus inside. The row is a plain flex scroll-snap strip in the
   server HTML, so cards have their final width before any script runs (no layout shift) and it still
   scrolls and snaps without JS. Cards are THE shared product card (controls.css 9), untouched here. */
/* Phone: 2.3 cards per view, so the third card peeks in and says "swipe" (queue N5). */
.bj-related {
	--bj-rel-cols: 2.3;
	--bj-rel-gap: 12px;
}
@media (min-width: 700px) {
	.bj-related {
		--bj-rel-cols: 3;
		--bj-rel-gap: 16px;
	}
}
@media (min-width: 1024px) {
	.bj-related {
		--bj-rel-cols: 4;
		--bj-rel-gap: 24px;
	}
}
.woocommerce .bj-related > .bj-related__title {
	margin: 0 0 24px;
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif);
	font-size: var(--bj-fs-h2, 26px);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	color: var(--bj-ink, #1C1A17);
}
.woocommerce .bj-related > .bj-related__row {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--bj-rel-gap) !important;
	width: auto !important;
	margin: 0 !important;
	padding: 4px 0 12px !important;
	list-style: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; /* the engine keeps it on x proximity (inline), so no !important */
	scrollbar-width: none;
}
.woocommerce .bj-related > .bj-related__row::-webkit-scrollbar {
	display: none;
}
.woocommerce .bj-related > .bj-related__row > .product {
	flex: 0 0 calc((100% - (var(--bj-rel-cols) - 1) * var(--bj-rel-gap)) / var(--bj-rel-cols)) !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start !important;
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce .bj-related > .bj-related__row {
		scroll-behavior: auto !important;
	}
}