/* ==========================================================================
   Controls & Action Rings — Reusable frosted-glass discs (.bj-glass)
   Design System Option A: Shared glass look matching currency disc / #to-top
   Tokens: tokens.css (--bj-glass-*)
   ========================================================================== */

/* Global keyboard focus for plain links, inputs, and interactive elements (S3) */
/* `body` prefix isn't decorative: the parent theme's reset.css sets
   `a:focus, input:focus { outline: none !important; }` at the same (0,1,1) specificity as a bare
   `a:focus-visible`/`input:focus-visible`, so the winner would depend on enqueue order. Adding
   `body` (0,0,1) guarantees these rules always outrank that reset, regardless of load order. */
body a:focus-visible,
body input:focus-visible,
body button:focus-visible,
body [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* WooCommerce notices (owner, 2026-09-27: "is this our colour palette?" — no, it was the theme's
   green fill). Brand frame instead: ivory band, ink text, hairline, the type shown only by the
   icon colour (success green, info plum, error garnet). WooCommerce focuses a notice with
   tabindex=-1 after checkout/cart updates so screen readers announce it — that programmatic focus
   must not paint a ring. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	background: var(--bj-ivory-2, #F5EFE5) !important;
	color: var(--bj-ink, #1C1A17) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
}
body .woocommerce-message::before { color: var(--bj-whatsapp, #15803D) !important; }
body .woocommerce-info::before { color: var(--bj-purple, #430A41) !important; }
body .woocommerce-error::before { color: var(--bj-garnet, #8C2F39) !important; }
body .woocommerce-message a,
body .woocommerce-info a,
body .woocommerce-error a {
	color: var(--bj-purple, #430A41) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
body .woocommerce-message a.button,
body .woocommerce-info a.button {
	background: transparent !important;
	border: 0 !important;
}
body .woocommerce-message:focus,
body .woocommerce-info:focus,
body .woocommerce-error:focus,
body .woocommerce-NoticeGroup:focus,
body .woocommerce-notices-wrapper:focus {
	outline: none !important;
}

/* Reveal card action buttons on focus-within (S3) */
.product-group-button:focus-within {
	opacity: 1 !important;
	visibility: visible !important;
}

/* 1. Reusable glass class & shared properties */
.bj-glass,
.thumbnail-wrapper .product-group-button > div,
.product-group-button > div.button-in,
.product-group-button > div.quickshop,
.product-group-button > div.wishlist,
.product-group-button > div.compare,
.product-group-button > div.loop-add-to-cart,
.product-group-button-meta > .loop-add-to-cart,
.bj-occ-act,
.bj-occ-tile__go,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger,
body .elementor-swiper-button,
body .swiper-button-prev,
body .swiper-button-next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid var(--bj-glass-border-solid, rgba(140, 90, 43, 0.20)) !important;
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06)) !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease !important;
	cursor: pointer !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bj-glass,
	.thumbnail-wrapper .product-group-button > div,
	.product-group-button > div.button-in,
	.product-group-button > div.quickshop,
	.product-group-button > div.wishlist,
	.product-group-button > div.compare,
	.product-group-button > div.loop-add-to-cart,
	.product-group-button-meta > .loop-add-to-cart,
	.bj-occ-act,
	.bj-occ-tile__go,
	.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
	.woocommerce-product-gallery__trigger,
	body .elementor-swiper-button,
	body .swiper-button-prev,
	body .swiper-button-next {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
		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)) !important;
	}
}

/* Hover: frosted-glass pop only (owner, 2026-09-26 — "i hate these"/"the glass ones were
   better" re: gold rings). No ring of any colour on hover; keyboard focus gets its own thin
   plum outline below, and a plain mouse click leaves no ring at all. */
.bj-glass:hover,
.thumbnail-wrapper .product-group-button > div:hover,
.product-group-button > div:hover,
.product-group-button-meta > .loop-add-to-cart:hover,
.bj-occ-act:hover,
.bj-occ-tile:hover .bj-occ-tile__go,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:hover,
body .elementor-swiper-button:hover,
body .swiper-button-prev:hover,
body .swiper-button-next:hover {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 6px 20px rgba(18, 14, 10, 0.16) !important;
	color: var(--bj-ink, #1C1A17) !important;
	transform: translateY(-1px) !important;
}
/* Keyboard focus: thin plum outline, never gold, never a box-shadow ring. */
.bj-glass:focus-visible,
.thumbnail-wrapper .product-group-button > div:focus-visible,
.product-group-button > div:focus-visible,
.product-group-button-meta > .loop-add-to-cart:focus-visible,
.bj-occ-act:focus-visible,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible,
.woocommerce-product-gallery__trigger:focus-visible,
body .elementor-swiper-button:focus-visible,
body .swiper-button-prev:focus-visible,
body .swiper-button-next:focus-visible {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
	color: var(--bj-ink, #1C1A17) !important;
}
/* A plain mouse click must leave no ring (only :focus-visible gets the outline above). */
.bj-glass:focus:not(:focus-visible),
.thumbnail-wrapper .product-group-button > div:focus:not(:focus-visible),
.product-group-button > div:focus:not(:focus-visible),
.product-group-button-meta > .loop-add-to-cart:focus:not(:focus-visible),
.bj-occ-act:focus:not(:focus-visible),
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus:not(:focus-visible),
.woocommerce-product-gallery__trigger:focus:not(:focus-visible),
body .elementor-swiper-button:focus:not(:focus-visible),
body .swiper-button-prev:focus:not(:focus-visible),
body .swiper-button-next:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Ink icon in every state (never brown, never white on brown, never black on brown) */
.bj-glass,
.bj-glass a,
.thumbnail-wrapper .product-group-button > div a,
.product-group-button > div a,
.product-group-button > div a:after,
.product-group-button > div a:before,
.bj-occ-act,
.bj-occ-tile__go,
.bj-occ-act a,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before,
body .elementor-swiper-button svg,
body .swiper-button-prev:after,
body .swiper-button-next:after {
	color: var(--bj-ink, #1C1A17) !important;
}

/* 2. Product card action buttons (40 px frosted discs) */
.thumbnail-wrapper .product-group-button > div,
.product-group-button > div.button-in,
.product-group-button > div.quickshop,
.product-group-button > div.wishlist,
.product-group-button > div.compare,
.product-group-button > div.loop-add-to-cart {
	position: absolute !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	line-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
	z-index: 10 !important;
	animation: none !important;
	-webkit-animation: none !important;
}
.thumbnail-wrapper .product-group-button > div:nth-child(1) { top: 10px !important; }
.thumbnail-wrapper .product-group-button > div:nth-child(2) { top: 58px !important; }
.thumbnail-wrapper .product-group-button > div:nth-child(3) { top: 106px !important; }
.thumbnail-wrapper .product-group-button > div:nth-child(4) { top: 154px !important; }

/* Ring anchors & content centering */
.thumbnail-wrapper .product-group-button > div a,
.product-group-button > div a {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-decoration: none !important;
	overflow: visible !important;
}

.product-group-button > div.wishlist svg.yith-wcwl-icon-svg,
.thumbnail-wrapper .product-group-button > div.wishlist svg.yith-wcwl-icon-svg,
.bj-occ-act--wish svg.yith-wcwl-icon-svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	margin: 0 !important;
	display: block !important;
	flex-shrink: 0 !important;
	stroke: var(--bj-ink, #1C1A17) !important;
	fill: none !important;
	stroke-width: 1.6 !important;
	color: var(--bj-ink, #1C1A17) !important;
	transition: stroke .2s ease, fill .2s ease !important;
}
.product-group-button > div.wishlist svg.yith-wcwl-icon-svg path,
.thumbnail-wrapper .product-group-button > div.wishlist svg.yith-wcwl-icon-svg path,
.bj-occ-act--wish svg.yith-wcwl-icon-svg path {
	fill: none !important;
	stroke: var(--bj-ink, #1C1A17) !important;
}

/* Wishlist added / in-wishlist state: filled heart in ink */
.product-group-button > div.wishlist.added svg.yith-wcwl-icon-svg,
.product-group-button > div.wishlist.added svg.yith-wcwl-icon-svg path,
.product-group-button > div.wishlist .exists svg.yith-wcwl-icon-svg,
.product-group-button > div.wishlist .exists svg.yith-wcwl-icon-svg path,
.product-group-button > div.wishlist .yith-wcwl-wishlistexistsbrowse svg.yith-wcwl-icon-svg,
.product-group-button > div.wishlist .yith-wcwl-wishlistexistsbrowse svg.yith-wcwl-icon-svg path,
.product-group-button > div.wishlist .yith-wcwl-wishlistaddedbrowse svg.yith-wcwl-icon-svg,
.product-group-button > div.wishlist .yith-wcwl-wishlistaddedbrowse svg.yith-wcwl-icon-svg path,
.bj-occ-act--wish .added svg.yith-wcwl-icon-svg,
.bj-occ-act--wish .added svg.yith-wcwl-icon-svg path,
.bj-occ-act--wish .exists svg.yith-wcwl-icon-svg,
.bj-occ-act--wish .exists svg.yith-wcwl-icon-svg path,
.bj-occ-act--wish .yith-wcwl-wishlistexistsbrowse svg.yith-wcwl-icon-svg,
.bj-occ-act--wish .yith-wcwl-wishlistexistsbrowse svg.yith-wcwl-icon-svg path,
.bj-occ-act--wish .yith-wcwl-wishlistaddedbrowse svg.yith-wcwl-icon-svg,
.bj-occ-act--wish .yith-wcwl-wishlistaddedbrowse svg.yith-wcwl-icon-svg path {
	fill: var(--bj-ink, #1C1A17) !important;
	stroke: var(--bj-ink, #1C1A17) !important;
}

/* Wishlist fallback pseudo-icon hidden (SVG is always present) */
.product-group-button > div.wishlist a:after {
	display: none !important;
}

/* Quickshop eye icon: the occasion card draws its own inline SVG (and hides the theme's pseudo
   below); the loop card draws the same outline eye on ::after via a mask. */
.button-in.quickshop a.quickshop::before,
.product-group-button > div.quickshop a::before,
.bj-occ-act.quickshop::before,
.bj-occ-act.quickshop::after {
	content: none !important;
	display: none !important;
}
.button-in.quickshop a.quickshop::after,
.product-group-button > div.quickshop a::after {
	content: "" !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	background: var(--bj-ink, #1C1A17) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Card circles are icon-only in every state (owner, 2026-09-27): keep the theme's and YITH's
   tooltip/label spans in the DOM for screen readers only, never as visible pills. */
.product-group-button .button-tooltip,
.product-group-button .ts-tooltip,
.product-group-button .yith-wcwl-tooltip,
.product-group-button-meta .button-tooltip,
.product-group-button-meta .ts-tooltip,
.product-hover-vertical-style-2 .product-group-button > div.loop-add-to-cart:hover a .button-tooltip,
.product-group-button > div.wishlist .feedback,
.product-group-button > div.wishlist .separator,
.product-group-button > div.wishlist .yith-wcwl-icon ~ span,
.bj-occ-act--wish .button-tooltip,
.bj-occ-act--wish .ts-tooltip,
.bj-occ-act--wish .yith-wcwl-tooltip,
.bj-occ-act--wish .feedback,
.bj-occ-act--wish .separator,
.bj-occ-act--wish .yith-wcwl-icon ~ span {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Phones and touch screens: hide the quick-view eye on every product card (and the compare button
   the theme leaves in the markup); the wishlist heart stays visible on touch just like the
   occasion card's. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
	.thumbnail-wrapper .product-group-button > div.quickshop,
	.thumbnail-wrapper .product-group-button > div.button-in.quickshop,
	.thumbnail-wrapper .product-group-button > div.compare,
	.thumbnail-wrapper .product-group-button > div.button-in.compare,
	.bj-occ-card__acts > a.bj-occ-act.quickshop,
	a.quickshop {
		display: none !important;
	}
}

/* Occasion card action buttons (40 px discs) */
.bj-occ-act {
	width: 40px !important;
	height: 40px !important;
	line-height: 40px !important;
	border-radius: 999px !important;
}
.bj-occ-act svg {
	width: 18px !important;
	height: 18px !important;
	stroke: var(--bj-ink, #1C1A17) !important;
	fill: none !important;
	margin: 0 !important;
}
/* YITH's wishlist shortcode nests two more wrapper divs inside .bj-occ-act--wish, each shrink-wrapped
   to the icon's own 18px box, so a percentage width/height on the anchor below resolved against an
   18px parent, not the 40px ring — and YITH's own anchor styling is a solid ink-filled circle (the
   heart, stroked in the same ink, vanished into it) with an always-visible "Wishlist" text tooltip
   (the reported stray-text/invisible-icon bug, on this card component). Collapse the wrappers so the
   anchor becomes a direct flex child of the 40px ring, and reset it to the same ink-icon, transparent,
   hover-only-glass-tooltip pattern used everywhere else. */
.bj-occ-act--wish .yith-wcwl-add-to-wishlist,
.bj-occ-act--wish .yith-wcwl-add-button,
.bj-occ-act--wish a > span {
	display: contents !important;
}
.bj-occ-act--wish a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border-radius: 0 !important;
	font-size: 0 !important;
}
/* 3. PDP Gallery trigger (42 px disc top-right of image) */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger {
	width: 42px !important;
	height: 42px !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 20 !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before,
.woocommerce-product-gallery__trigger:before {
	font-size: 17px !important;
	line-height: 42px !important;
}

/* 4. Carousel arrows (44 px discs) */
body .elementor-swiper-button,
body .swiper-button-prev,
body .swiper-button-next {
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	opacity: 0.85 !important;
	z-index: 10 !important;
}
body .elementor-swiper-button:hover,
body .swiper-button-prev:hover,
body .swiper-button-next:hover {
	opacity: 1 !important;
}

/* Swiper inside-edge positioning */
.elementor-element .swiper .elementor-swiper-button-prev,
.elementor-swiper-button.elementor-swiper-button-prev {
	left: 16px !important;
}
.elementor-element .swiper .elementor-swiper-button-next,
.elementor-swiper-button.elementor-swiper-button-next {
	right: 16px !important;
}
body .elementor-swiper-button svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

/* ==========================================================================
   6. Reusable hover/focus "glass pop" (owner, 2026-09-26): every clickable
   element responds the SAME way on pointer hover and keyboard focus — the
   shared soft shadow (with its light inset highlight), a slight lift, and
   glass wash. Icon rings/pills already had this via .bj-glass above; this
   extends it to buttons, body/footer links and chips (product-card titles
   stay plain on the page background — see section 9). Never touches
   border-width/padding at rest, so popping in on
   hover never shifts layout. Radius is left alone (each element keeps its
   own). Header/menu selectors are out of scope here (owned elsewhere).
   Reusable class: add "bj-pop" to any element to opt into this recipe. */
.bj-pop,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.bj-occ-btn,
.bj-occ-chip {
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
	.bj-pop:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce #respond input#submit:hover,
	.woocommerce-page a.button:hover,
	.bj-occ-btn:hover,
	.bj-occ-chip:hover {
		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)) !important;
		transform: translateY(-1px) !important;
	}
}
.bj-pop:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce-page a.button:focus-visible,
.bj-occ-btn:focus-visible,
.bj-occ-chip:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* Footer sits on brand plum (footer.css): same recipe, a plum-safe glass
   tint (ivory ~0.12 alpha) instead of the light-surface one, so it stays
   legible on a dark ground. */
footer#colophon.footer-container a {
	display: inline-block !important;
	margin: -3px -8px !important;
	padding: 3px 8px !important;
	border-radius: 8px !important;
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
footer#colophon.footer-container .social-icons .list-icons li a {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 999px !important;
}
@media (hover: hover) and (pointer: fine) {
	footer#colophon.footer-container a:hover {
		background: rgba(251, 248, 243, 0.14) !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
		transform: translateY(-1px) !important;
	}
}
footer#colophon.footer-container a:focus-visible {
	background: rgba(251, 248, 243, 0.14) !important;
	/* Footer sits on dark plum: a plum outline would vanish, so this one stays a light hairline
	   instead of gold (owner, 2026-09-26: no gold ring anywhere). */
	outline: 2px solid rgba(255, 255, 255, 0.85) !important;
	outline-offset: 2px !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	@media (hover: hover) and (pointer: fine) {
		footer#colophon.footer-container a:hover {
			backdrop-filter: blur(10px) saturate(160%) !important;
			-webkit-backdrop-filter: blur(10px) saturate(160%) !important;
		}
	}
}

/* 7. Pagination: wrap instead of overflow (audit #2 — every archive: shop, category, occasion).
   WooCommerce's own `.woocommerce-pagination ul{white-space:nowrap}` plus the theme's fixed 40x40
   circles push a 9-item page bar past the viewport on the narrowest phones (360-393px), which makes
   Chrome widen the whole layout viewport. Wrapping keeps every archive width inside the viewport;
   scoped to phones/tablets so the desktop pill bar (which already fits on one line) is unchanged. */
@media (max-width: 1023px) {
	.woocommerce nav.woocommerce-pagination ul.page-numbers,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers {
		display: flex !important;
		flex-wrap: wrap !important;
		white-space: normal !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		width: auto !important;
		max-width: 100% !important;
	}
	.woocommerce nav.woocommerce-pagination ul.page-numbers li,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers li {
		margin: 0 !important;
	}
	/* 40px circles measure under the 44px tap-target minimum (audit §3); bump to 44px on touch tiers. */
	.woocommerce nav.woocommerce-pagination ul.page-numbers a,
	.woocommerce nav.woocommerce-pagination ul.page-numbers span,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers a,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers span {
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
	}
	.woocommerce nav.woocommerce-pagination ul.page-numbers a.next::before,
	.woocommerce nav.woocommerce-pagination ul.page-numbers a.prev::before,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers a.next::before,
	.woocommerce-page nav.woocommerce-pagination ul.page-numbers a.prev::before {
		line-height: 44px !important;
	}
}

/* 8. Tablet tier (~700-1023px, e.g. Galaxy Z Fold 7 open at 744): 3 product-grid columns instead
   of the phone tier's stretched 50% cards (audit §5 suggestion). Matches every columns-N variant
   the theme's own phone override lists, so it wins on source order without raising specificity. */
@media (min-width: 700px) and (max-width: 1023px) {
	.woocommerce .cross-sells > .products:not(.swiper) .product,
	.woocommerce .up-sells > .products:not(.swiper) .product,
	.woocommerce .related > .products:not(.swiper) .product,
	.woocommerce #tab-more_seller_product .products .product,
	.woocommerce.columns-10 .products .product,
	.woocommerce.columns-9 .products .product,
	.woocommerce.columns-8 .products .product,
	.woocommerce.columns-7 .products .product,
	.woocommerce.columns-6 .products .product,
	.woocommerce.columns-5 .products .product,
	.woocommerce.columns-4 .products .product,
	.woocommerce.columns-3 .products .product {
		width: 33.3333% !important;
	}
}

/* ==========================================================================
   9. THE product card (owner, 2026-09-27: "the default product card across the whole website").
   One component, styled only here, for both markups that render it:
     - WooCommerce/Jaroti loop cards: `.products .product` (shop, category, tag, search, homepage
       shelves, PDP related/up-sells, cross-sells);
     - occasion-page cards: `.bj-occ-card` (biyani-occasions/template.php).
   The look is the occasion card's: the image in its own rounded tile, title and price on the page
   background below (no white box around the card), wishlist + quick-view glass circles stacked
   top-right on the image (hover/focus reveal on pointer devices, always shown on touch; the eye is
   hidden on phones), the add-to-cart glass circle with the bag icon bottom-right beside the price.
   Hover (pointer devices): the image zooms slightly and swaps to the product's first gallery image
   when it has one (the theme's figure.has-back-image / the occasion card's .bj-occ-card__back).
   Kept from the shop card: colour swatches (variable products) and the HOT/sale badge, restyled.
   Grid and shelf layout (columns, gaps, carousel) stay with each page; only the card is here.
   ========================================================================== */

/* 9a. No card box: transparent, borderless, no lift; the column fills its grid cell / slide. */
.woocommerce .products .product:not(.product-category),
.woocommerce .products .product:not(.product-category) .product-wrapper {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	transform: none !important;
}
.woocommerce .products .product:not(.product-category) .product-wrapper,
.bj-occ-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	height: 100% !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	color: var(--bj-ink, #1C1A17) !important;
}
/* Kill the theme's float clearfix inside the flex column, and match the loop grid's row gap
   (theme default: 60px margin-bottom) to the occasion grid (.bj-occ-edit: 26px / 32px). */
.woocommerce .products .product:not(.product-category) .product-wrapper::after {
	content: none !important;
	display: none !important;
}
.woocommerce .products:not(.swiper):not(.cross-sells):not(.up-sells):not(.related) {
	margin-bottom: -26px;
}
.woocommerce .products:not(.swiper) > .product:not(.product-category) {
	margin-bottom: 26px;
}
@media (min-width: 700px) {
	.woocommerce .products:not(.swiper):not(.cross-sells):not(.up-sells):not(.related) {
		margin-bottom: -32px;
	}
	.woocommerce .products:not(.swiper) > .product:not(.product-category) {
		margin-bottom: 32px;
	}
}

/* 9b. Image tile: square, radius 18, white under the photo. */
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper,
.bj-occ-card__img {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(28, 26, 23, 0.06) !important;
}
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a,
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: inherit !important;
}
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper img,
.bj-occ-card__img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	opacity: 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .5s ease, opacity .3s ease !important;
}
/* Second (hover) image: stacked on the first, hidden until hover. Not gated on the theme's
   body.ts_desktop, so a cached desktop page on a touch screen never shows it by default. */
.woocommerce .products .product:not(.product-category) figure.has-back-image img.product-image-back,
.bj-occ-card__img img.bj-occ-card__back {
	position: absolute !important;
	inset: 0 !important;
	z-index: 3 !important;
	opacity: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
	.woocommerce .products .product:not(.product-category) .product-wrapper:hover .thumbnail-wrapper img,
	.bj-occ-card:hover .bj-occ-card__img img {
		transform: scale(1.04) !important;
	}
	.woocommerce .products .product:not(.product-category) .product-wrapper:hover figure.has-back-image img.product-image-back,
	.bj-occ-card:hover .bj-occ-card__img img.bj-occ-card__back {
		opacity: 1 !important;
	}
	.woocommerce .products .product:not(.product-category) .product-wrapper:hover figure.has-back-image img:first-child,
	.bj-occ-card:hover .bj-occ-card__img img:first-child:not(:only-child) {
		opacity: 0 !important;
	}
}

/* 9c. Badge (HOT / sale / new / sold out): a small glass pill top-left on the image. */
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper .product-label {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	z-index: 4 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 6px !important;
	margin: 0 !important;
	pointer-events: none !important;
}
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper .product-label > span {
	display: inline-flex !important;
	align-items: center !important;
	height: 24px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid var(--bj-glass-border-solid, rgba(140, 90, 43, 0.20)) !important;
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06)) !important;
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
}
.woocommerce .products .product:not(.product-category) .thumbnail-wrapper .product-label > span.onsale {
	color: var(--bj-garnet, #8C2F39) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper .product-label > span {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
		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)) !important;
	}
}

/* 9d. Image circles (wishlist, quick view): the occasion card's stack sits in .bj-occ-card__acts;
   the loop card's circles are positioned one by one in section 2. Hover/focus reveal with a short
   slide-in on pointer devices (`translate`, so the circles' own hover lift keeps `transform`);
   always visible on touch screens. */
.bj-occ-card__media {
	position: relative;
}
.bj-occ-card__acts {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: grid;
	gap: 8px;
}
@media (hover: hover) and (pointer: fine) {
	.thumbnail-wrapper .product-group-button > div.wishlist,
	.thumbnail-wrapper .product-group-button > div.quickshop,
	.bj-occ-card__acts {
		opacity: 0 !important;
		pointer-events: none !important;
		translate: 6px 0;
		transition: opacity .2s ease, translate .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
	}
	.woocommerce .products .product:hover .thumbnail-wrapper .product-group-button > div.wishlist,
	.woocommerce .products .product:focus-within .thumbnail-wrapper .product-group-button > div.wishlist,
	.woocommerce .products .product:hover .thumbnail-wrapper .product-group-button > div.quickshop,
	.woocommerce .products .product:focus-within .thumbnail-wrapper .product-group-button > div.quickshop,
	.bj-occ-card:hover .bj-occ-card__acts,
	.bj-occ-card:focus-within .bj-occ-card__acts {
		opacity: 1 !important;
		pointer-events: auto !important;
		translate: 0 0;
	}
}
/* The loop card's own add-to-cart circle in the image stack is replaced by the footer one (9f). */
.thumbnail-wrapper .product-group-button > div.loop-add-to-cart {
	display: none !important;
}

/* 9e. Text below the image: name (2 lines reserved, so every footer in a row lines up), optional
   colour swatches, then price + cart circle pinned to the bottom of the card. The loop card's
   .meta-wrapper is a grid for that; the occasion card has its own .bj-occ-card__foot row. */
.woocommerce .products .product:not(.product-category) .meta-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	grid-template-rows: auto auto 1fr auto !important;
	grid-template-areas: "name name" "swatch swatch" ". ." "price cart" !important;
	column-gap: 10px !important;
	row-gap: 0 !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-align: left !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .product-name,
.bj-occ-card__name {
	grid-area: name;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2;
	overflow: hidden !important;
	height: auto !important;
	min-height: calc(2 * 1.35em) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-decoration: none !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .product-name a {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
}
@media (min-width: 700px) {
	.woocommerce .products .product:not(.product-category) .meta-wrapper > .product-name,
	.bj-occ-card__name {
		font-size: 20px !important;
	}
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .color-swatch {
	grid-area: swatch;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	position: static !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .color-swatch .color {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	overflow: hidden !important;
	cursor: pointer !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .color-swatch .color > span {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price,
.woocommerce .products .product:not(.product-category) .meta-wrapper > .product-group-button-meta {
	margin: 12px 0 0 !important;
	align-self: center !important;
}
.bj-occ-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price,
.bj-occ-card__price {
	grid-area: price;
	display: block !important;
	padding: 0 !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	color: var(--bj-ink, #1C1A17) !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price .amount,
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price bdi,
.bj-occ-card__price .amount {
	font: inherit !important;
	color: inherit !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price del,
.bj-occ-card__price del {
	margin-right: 6px !important;
	font-size: .875em !important;
	font-weight: 400 !important;
	color: inherit !important;
	opacity: .5 !important;
}
.woocommerce .products .product:not(.product-category) .meta-wrapper > .price ins,
.bj-occ-card__price ins {
	text-decoration: none !important;
	color: var(--bj-garnet, #8C2F39) !important;
}

/* 9f. Cart circle beside the price: 44 px glass (section 1), the bag icon, icon-only in every
   state. WooCommerce's ajax add marks the link .loading then .added and appends an
   a.added_to_cart "View cart" link; the header cart count already updates, so that link never
   shows and the icon stays centred (the theme's tick on .added:before used to push it aside). */
.woocommerce .products .product:not(.product-category) .meta-wrapper > .product-group-button-meta {
	grid-area: cart;
	display: flex !important;
	width: 44px !important;
	max-width: 44px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	transition: none !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta > .loop-add-to-cart,
.bj-occ-card__foot .bj-occ-act--cart {
	position: relative !important;
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 44px !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button,
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button:hover,
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button:focus,
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button:active {
	/* The theme's .woocommerce a.button sets min-width:160px (the old "wide pill behind the ring"),
	   and section 6 lifts every a.button on hover; the circle around it does both jobs here. */
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-decoration: none !important;
	transition: none !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button::before {
	content: none !important;
	display: none !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	margin: -9px 0 0 -9px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--bj-ink, #1C1A17) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath stroke-linejoin='round' d='M5 8h14l-1.2 12H6.2L5 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath stroke-linejoin='round' d='M5 8h14l-1.2 12H6.2L5 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat !important;
	font-size: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	-webkit-animation: none !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart:has(> a.loading),
.bj-occ-card__foot .bj-occ-act--cart.loading {
	opacity: .6 !important;
	pointer-events: none !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.added_to_cart,
.bj-occ-card a.added_to_cart {
	display: none !important;
}
/* Keyboard focus: thin plum outline; a plain click leaves no ring. */
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}
.woocommerce .products .product .meta-wrapper > .product-group-button-meta .loop-add-to-cart a.button:focus:not(:focus-visible) {
	outline: none !important;
}

/* 9g. Touch card photo swipe + shelf crossfade (D21, owner 2026-09-27; card-swipe.js): on touch
   screens, grid cards scroll horizontally across up to three product photos with native scroll-snap;
   homepage/shelf cards keep sideways swipe for the row and crossfade photos via tap dots + gentle auto-fade. */
@media (hover: none) and (pointer: coarse) {
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure.bj-card-swipe,
	.bj-occ-card__img.bj-card-swipe {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		overscroll-behavior-x: contain !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
	}
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure.bj-card-swipe::-webkit-scrollbar,
	.bj-occ-card__img.bj-card-swipe::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure.bj-card-swipe > img,
	.bj-occ-card__img.bj-card-swipe > img {
		position: static !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		height: 100% !important;
		scroll-snap-align: start !important;
		scroll-snap-stop: always !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.bj-card-dots {
		position: absolute !important;
		left: 50% !important;
		bottom: 10px !important;
		transform: translateX(-50%) !important;
		z-index: 4 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 5px !important;
		padding: 4px 7px !important;
		border-radius: 999px !important;
		background: rgba(252, 249, 243, 0.72) !important;
		box-shadow: 0 1px 4px rgba(18, 14, 10, 0.12) !important;
		pointer-events: none !important;
	}
	.bj-card-dots--shelf {
		pointer-events: auto !important;
		touch-action: manipulation !important;
	}
	.bj-card-dot {
		position: relative !important;
		display: inline-block !important;
		flex: 0 0 auto !important;
		width: 5px !important;
		height: 5px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: rgba(28, 26, 23, 0.28) !important;
		box-shadow: none !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		transition: width .18s ease, background-color .18s ease !important;
	}
	button.bj-card-dot::before {
		content: "" !important;
		position: absolute !important;
		top: -14px !important;
		bottom: -14px !important;
		left: -6px !important;
		right: -6px !important;
	}
	.bj-card-dot.is-active {
		width: 12px !important;
		background: var(--bj-ink, #1C1A17) !important;
	}
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure.bj-card-fade > img.bj-card-fade__img,
	.bj-occ-card__img.bj-card-fade > img.bj-card-fade__img {
		position: absolute !important;
		inset: 0 !important;
		z-index: 2 !important;
		width: 100% !important;
		height: 100% !important;
		opacity: 0 !important;
		transform: none !important;
		pointer-events: none !important;
		transition: opacity .3s ease !important;
	}
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper > a > figure.bj-card-fade > img.bj-card-fade__img.is-shown,
	.bj-occ-card__img.bj-card-fade > img.bj-card-fade__img.is-shown {
		opacity: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bj-glass:hover,
	.bj-pop:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.bj-occ-btn:hover,
	.bj-occ-chip:hover,
	footer#colophon.footer-container a:hover,
	.woocommerce .products .product:not(.product-category) .product-wrapper:hover .thumbnail-wrapper img,
	.bj-occ-card:hover .bj-occ-card__img img {
		transform: none !important;
	}
	/* Card images and circles (9b, 9d): swap and show/hide instantly. */
	.woocommerce .products .product:not(.product-category) .thumbnail-wrapper img,
	.bj-occ-card__img img,
	.thumbnail-wrapper .product-group-button > div.wishlist,
	.thumbnail-wrapper .product-group-button > div.quickshop,
	.bj-occ-card__acts {
		transition: none !important;
		translate: none !important;
	}
	.bj-card-dot {
		transition: none !important;
	}
	.bj-card-fade > img.bj-card-fade__img {
		transition: none !important;
	}
	.bj-card-swipe {
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   10. Add-to-cart Popup Modal (S16 & B1)
   ========================================================================== */
.ts-popup-modal .add-to-cart-popup-container {
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid var(--bj-glass-border-solid, rgba(140, 90, 43, 0.20)) !important;
	border-radius: 24px !important;
	box-shadow: var(--bj-glass-shadow-solid, 0 8px 24px rgba(28, 26, 23, 0.08)) !important;
	padding: 32px !important;
	max-width: 440px !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ts-popup-modal .add-to-cart-popup-container {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
		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)) !important;
	}
}

/* Popup Close Button (44px glass circle) */
.ts-popup-modal .add-to-cart-popup-container .close {
	width: 44px !important;
	height: 44px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid var(--bj-glass-border-solid, rgba(140, 90, 43, 0.20)) !important;
	border-radius: 50% !important;
	color: var(--bj-ink, #1C1A17) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	opacity: 1 !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.ts-popup-modal .add-to-cart-popup-container .close::after {
	font-size: 26px !important;
	line-height: 42px !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ts-popup-modal .add-to-cart-popup-container .close {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	}
}
@media (hover: hover) and (pointer: fine) {
	.ts-popup-modal .add-to-cart-popup-container .close:hover {
		background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
		box-shadow: 0 6px 20px rgba(18, 14, 10, 0.16) !important;
		transform: translateY(-1px) !important;
	}
}
.ts-popup-modal .add-to-cart-popup-container .close:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* Popup Buttons (B1): 48px Jost 600 */
.ts-popup-modal .add-to-cart-popup-container .action a.button {
	height: 48px !important;
	line-height: 48px !important;
	border-radius: 999px !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	padding: 0 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
	flex: 1 !important;
}
.ts-popup-modal .add-to-cart-popup-container .action {
	display: flex !important;
	gap: 12px !important;
	margin-top: 24px !important;
	width: 100% !important;
}

/* Popup Checkout: Primary ink pill */
.ts-popup-modal .add-to-cart-popup-container .action a.button.checkout {
	background: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	border: 1px solid var(--bj-ink, #1C1A17) !important;
}

/* Popup View Cart: Secondary outline */
.ts-popup-modal .add-to-cart-popup-container .action a.button.view-cart {
	background: transparent !important;
	color: var(--bj-ink, #1C1A17) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
}

/* Hover & Focus for Popup Buttons */
@media (hover: hover) and (pointer: fine) {
	.ts-popup-modal .add-to-cart-popup-container .action a.button:hover {
		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)) !important;
		transform: translateY(-1px) !important;
	}
	.ts-popup-modal .add-to-cart-popup-container .action a.button.view-cart:hover {
		background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
	}
}
.ts-popup-modal .add-to-cart-popup-container .action a.button:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* Remove theme's default brown title icon in popup */
.ts-popup-modal .add-to-cart-popup-container .theme-title::before {
	color: var(--bj-ink, #1C1A17) !important;
}

/* ==========================================================================
   11. 404 Page (B1)
   ========================================================================== */
.error404 .not-found a.button {
	height: 48px !important;
	line-height: 48px !important;
	border-radius: 999px !important;
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	padding: 0 32px !important;
	background: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	border: 1px solid var(--bj-ink, #1C1A17) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
	.error404 .not-found a.button:hover {
		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)) !important;
		transform: translateY(-1px) !important;
	}
}
.error404 .not-found a.button:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* QA S11: low-contrast text (both under 4.5:1) */
.term-description p {
	color: var(--bj-stone, #4A443C) !important;
}
.error404 .not-found p {
	color: var(--bj-mute, #716B5B) !important;
}

/* Header mini-cart dropdown (owner, 2026-09-27: "match our UX — rounded edges, partial glass"): the
   same frosted panel as the mega-menu, 16px corners, and the popup's button pair (Checkout = ink
   pill, View cart = outline) instead of the theme's brown fills. */
header.ts-header .shopping-cart-wrapper .cart-dropdown-form.dropdown-container {
	background: rgba(255, 253, 248, 0.96) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 48px rgba(28, 26, 23, 0.16), 0 4px 14px rgba(28, 26, 23, 0.06) !important;
	overflow: hidden !important;
}
/* The theme paints a white ::before slab over the panel (offset from its top, so a strip of glass
   showed above a white box — owner: "what is that small divider line"). Keep the pseudo (it bridges
   the hover gap) but make it transparent so the whole panel is one glass surface. */
header.ts-header .shopping-cart-wrapper .cart-dropdown-form.dropdown-container::before {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.ts-header .shopping-cart-wrapper .cart-dropdown-form.dropdown-container {
		background: rgba(252, 249, 243, 0.9) !important;
		-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
		backdrop-filter: blur(16px) saturate(160%) !important;
	}
}
header.ts-header .shopping-cart-wrapper .cart-dropdown-form .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	padding: 0 24px !important;
	line-height: 1 !important;
	border-radius: 999px !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}
header.ts-header .shopping-cart-wrapper .cart-dropdown-form .button.checkout-button {
	background: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	border: 1px solid var(--bj-ink, #1C1A17) !important;
}
header.ts-header .shopping-cart-wrapper .cart-dropdown-form .button.view-cart {
	background: transparent !important;
	color: var(--bj-ink, #1C1A17) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
}
@media (hover: hover) and (pointer: fine) {
	header.ts-header .shopping-cart-wrapper .cart-dropdown-form .button:hover {
		box-shadow: 0 6px 18px rgba(18, 14, 10, 0.14) !important;
	}
	header.ts-header .shopping-cart-wrapper .cart-dropdown-form .button.view-cart:hover {
		background: rgba(28, 26, 23, 0.05) !important;
	}
}

/* Carousels (shared engine biyani-design/carousel.js; owner, 2026-09-27): every draggable carousel
   shows a grab hand on fine pointers and grabbing while dragged; links and buttons inside keep the
   pointer hand until a drag starts. The engine sets the classes. */
@media (hover: hover) and (pointer: fine) {
	.bj-carousel--draggable {
		cursor: grab;
	}
	.bj-carousel--draggable a,
	.bj-carousel--draggable button {
		cursor: pointer;
	}
	.bj-carousel--dragging,
	.bj-carousel--dragging * {
		cursor: grabbing !important;
	}
}

/* Brand font overrides for non-design mu-plugins (baseline §3: currency disc and trust strip use
   Jost, never system/Georgia fallbacks). */
body .biyani-currency-switcher,
body .biyani-trust-item__value {
	font-family: var(--bj-font-body, "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}