/* ==========================================================================
   Biyani Jewels — Homepage Stylesheet (home.css)
   Tokens: tokens.css (--bj-*) | Controls: controls.css (.bj-glass)
   Layout: 4 per row at 14" (1512), 2 per row / scroll on phones (390).
   Soothing surfaces: warm tinted bodies, radius 20px, gentle hover lift.
   Single gentle reveal animation (fade + 10px rise, 450ms).
   ========================================================================== */

/* 1. Global Homepage Ground & Band Spacing */
body.home {
	background-color: var(--bj-ivory, #FBF8F3) !important;
}

/* Page container top padding reset: hero aligns flush under header */
body.home #main > .page-container {
	padding-top: 0 !important;
}

/* Stretched sections: enforce 100vw geometry in CSS to prevent Elementor inline JS layout shift */
.elementor-1023 > .elementor-section.elementor-section-stretched {
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
}

/* 1b. One heading style, everywhere (owner, 2026-09-26): Instagram (biyani-instagram.php) and Shop
   by occasion (biyani-occasions.php) still render the old black-underlined-Marcellus-700 eyebrow +
   title. Same CSS as the shared .bj-shelf-head__eyebrow/__title component (biyani-homepage.php) —
   can't rename their classes (not this file), so matched value-for-value here instead. */
body.home .bj-ig__eyebrow,
body.home .bj-occ-home__eyebrow {
	font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: #716B5B !important;
}
body.home .bj-ig__title,
body.home .bj-occ-home__title {
	font-family: "Marcellus", Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(26px, 3.4vw, 34px) !important;
	line-height: 1.3 !important;
	letter-spacing: .02em !important;
	color: #1C1A17 !important;
}


/* 1d. Instagram tiles: 9:16 Reels ratio (owner, 2026-09-27: all 8 synced @biyanijewels posts are
   360×640 / 361×640 Reels; 4:5 still cropped top/bottom). Any non-9:16 feed photo (4:5 / 1:1) gets
   .bj-ig__tile--contain from biyani-instagram.php so it sits uncropped on the brand ivory-2 tile. */
body.home .bj-ig .bj-ig__tile {
	aspect-ratio: 9 / 16 !important;
	background: var(--bj-ivory-2, #F5EFE5) !important;
}
body.home .bj-ig .bj-ig__tile--contain img {
	object-fit: contain !important;
}
@media (max-width: 767px) {
	body.home .bj-ig .bj-ig__item {
		flex: 0 0 68vw !important;
	}
}

/* 1a. Soft wave wash (owner, 2026-09-26): the pale wavy-line texture ("looks nice") used to render
   once, inside a 1432px boxed pane with a visible left edge (the theme's content width, on the
   occasions section only), then reset per section below it: a flat ivory band on New Arrivals, an
   off-brand lavender band (#EFF1FF) on the featured carousel, plain ivory again on Instagram and
   reviews. Move it to `.wrapper` instead — the header and hero above are themselves fully opaque, so
   the image only becomes visible starting right under the hero, edge to edge (100vw, no boxed edge),
   and it ends exactly where `.wrapper` does, right before the footer's own solid background takes
   over ("down to the footer ribbon"). Every section below now sits on it transparently; the
   product/collection/review cards keep their own white / ivory-2 surfaces. */
body.home .wrapper {
	background-color: var(--bj-ivory, #FBF8F3) !important;
	background-image: url(../../uploads/2023/07/bg-faded.jpg) !important;
	background-repeat: repeat-y !important;
	background-position: top center !important;
	background-size: auto 700px !important;
}
body.home .bj-occ-home,
body.home .elementor-element-9fb75f3,
body.home .elementor-element-1ac0819,
body.home .elementor-element-f7c2457,
body.home .bj-ig,
body.home .bj-rev {
	background: transparent !important;
	background-image: none !important;
}
body.home .elementor-element-1ac0819 {
	padding: 56px 0 64px !important;
}
body.home .elementor-element-9fb75f3 {
	padding: 48px 0 56px !important;
}

body.home .elementor-element-f7c2457 {
	padding: 44px 0 56px !important;
}
/* The injected "Hand-picked favourites" heading is a child of Elementor's flex widget-wrap, where it
   shrank to its text and sat on the left; a full row keeps it centred like every other shelf. */
body.home .elementor-element-f7c2457 .bj-shelf-head {
	flex: 0 0 100%;
	width: 100%;
}

/* 2. Collection Panels (9fb75f3): Soothing Card Surface (Follow Occasion Style)
   Remove dark curtain hover overlay, force clean readable metadata, warm tinted card */
body.home .woocommerce .products .product-category .product-wrapper > a:first-child:before,
body.home .woocommerce .products .product-category:hover .product-wrapper > a:before,
body.home .woocommerce .products .product-category .product-wrapper > a.term-link:before {
	display: none !important;
	content: none !important;
	background: none !important;
	opacity: 0 !important;
}
body.home .woocommerce .products .product-category .product-wrapper > a > img {
	transform: none !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: 20px 20px 0 0 !important;
	transition: transform .35s ease !important;
}
body.home .woocommerce .products .product-category:hover .product-wrapper > a > img {
	transform: scale(1.03) !important;
}
body.home .woocommerce .products .product-category .product-wrapper {
	border-radius: 20px !important;
	background: var(--bj-ivory-2, #F5EFE5) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	box-shadow: 0 4px 18px rgba(28, 26, 23, 0.05) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform .25s ease, box-shadow .25s ease !important;
}
body.home .woocommerce .products .product-category:hover .product-wrapper {
	transform: translateY(-3px) !important;
	box-shadow: 0 14px 32px rgba(28, 26, 23, 0.12) !important;
}
body.home .woocommerce .products .product-category .meta-wrapper {
	position: static !important;
	padding: 16px 20px 18px !important;
	background: var(--bj-ivory-2, #F5EFE5) !important;
	color: var(--bj-ink, #1C1A17) !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	text-align: left !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
body.home .woocommerce .product-category .meta-wrapper .heading-title,
body.home .woocommerce .product-category .meta-wrapper .description {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif) !important;
	font-size: 22px !important;
	line-height: 1.25 !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-transform: none !important;
	letter-spacing: .02em !important;
	margin: 0 !important;
}
body.home .woocommerce .product-category .meta-wrapper .count {
	font-family: var(--bj-font-body, "Jost", -apple-system, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .10em !important;
	text-transform: uppercase !important;
	color: var(--bj-mute, #716B5B) !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	display: block !important;
}

/* 4. Kill Theme Bounces & Aggressive Overlays */
body.home .ts-banner.eff-zoom-in:hover .banner-bg img {
	transform: scale(1.02) !important;
}
body.home .elementor-invisible,
body.home .animated {
	animation: none !important;
	-webkit-animation: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 5. Desktop (>= 1024px & 1512px): Strictly EVEN 4 Per Row */
@media (min-width: 1024px) {
	/* New Arrivals (1ac0819): 4 per row, exactly 2 full rows (8 products) */
	body.home .elementor-element-1ac0819 .woocommerce.columns-5 .products,
	body.home .elementor-element-1ac0819 .woocommerce .products {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 24px !important;
		max-width: 1240px !important;
		margin: 0 auto !important;
		padding: 0 20px !important;
		overflow: visible !important;
	}
	body.home .elementor-element-1ac0819 .woocommerce .products .product {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
	body.home .elementor-element-1ac0819 .woocommerce .products .product:nth-child(n+9) {
		display: none !important;
	}

	/* Featured Products (f7c2457): the same 1240px/20px-padding container as New Arrivals */
	body.home .elementor-element-f7c2457 .ts-product-wrapper {
		max-width: 1240px !important;
		margin: 0 auto !important;
		padding: 0 20px !important;
	}
	/* Same card/image size as New Arrivals (owner, 2026-09-26/27: "make it render exactly like Just
	   landed"): New Arrivals' own (100% - 3*24px gap) / 4 cell (282px -> 252px visible card at 1200px
	   usable), as a scroll row instead of a grid (see "Shelf rows" below). */
	body.home .elementor-element-f7c2457 .products {
		gap: 24px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-f7c2457 .products > .product {
		flex: 0 0 calc((100% - 72px) / 4) !important;
		padding: 0 15px !important;
	}

	/* Collections (9fb75f3): Elementor already lays these 4 tiles out as 4 inner columns
	   (25% each, one row on desktop); each column holds its OWN single-item WooCommerce grid, so
	   a second "repeat(4, 1fr)" grid here divided a ONE-item container into 4 empty tracks —
	   58px slivers instead of full-width tiles. Keep the existing per-row layout, just let the
	   single item fill its column. */
	body.home .elementor-element-9fb75f3 .woocommerce .products {
		display: block !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .products .product-category {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		float: none !important;
	}

	/* Instagram (bj-ig): 4 visible per view, every synced post reachable (owner, 2026-09-26: shelves
	   must auto-advance, not show 4 and hide the rest). */
	.bj-ig {
		padding: 48px 0 40px !important;
	}
	.bj-ig .bj-ig__head {
		margin: 0 auto 24px !important;
	}
	.bj-ig .bj-ig__eyebrow {
		margin: 0 0 10px !important;
	}
	.bj-ig .bj-ig__title {
		font-size: 32px !important;
	}
	.bj-ig .bj-ig__sub {
		margin: 8px 0 0 !important;
		font-size: 15px !important;
	}
	.bj-ig .bj-ig__grid {
		gap: 20px !important;
		max-width: 1240px !important;
		margin: 0 auto !important;
		padding: 0 24px !important;
	}
	.bj-ig .bj-ig__item {
		flex: 0 0 calc((100% - 3 * 20px) / 4) !important;
	}
	.bj-ig .bj-ig__cta {
		margin: 24px 0 0 !important;
	}
	.bj-ig .bj-ig__btn {
		min-height: 44px !important;
		padding: 12px 24px !important;
		font-size: 12px !important;
	}

	/* Reviews (bj-rev) desktop sizing/text rules live in biyani-homepage.php next to the markup
	   that renders them; this file no longer duplicates them (both used !important on the same
	   properties, and the later one — homepage.php's inline <style> — always won the cascade). */
}

/* 5c. Shelf rows (owner, 2026-09-27: one swipe everywhere). Every homepage shelf is a native
   scroll-snap row moved by the shared engine (biyani-design/carousel.js, started by home.js): touch
   swipes natively, a mouse drags, a trackpad swipe moves one card, autoplay pauses on hover/focus.
   No arrow or pause buttons. Without JS the rows still scroll and snap. */
body.home .elementor-element-1ac0819 .products,
body.home .elementor-element-f7c2457 .products,
body.home .bj-ig .bj-ig__grid,
body.home .elementor-element-f145f8e .elementor-image-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; /* the engine keeps shelves on x proximity (inline, so no !important) */
	scrollbar-width: none;
}
body.home .elementor-element-1ac0819 .products::-webkit-scrollbar,
body.home .elementor-element-f7c2457 .products::-webkit-scrollbar,
body.home .bj-ig .bj-ig__grid::-webkit-scrollbar,
body.home .elementor-element-f145f8e .elementor-image-carousel::-webkit-scrollbar {
	display: none;
}
body.home .elementor-element-1ac0819 .products > .product,
body.home .elementor-element-f7c2457 .products > .product,
body.home .bj-ig .bj-ig__item,
body.home .elementor-element-f145f8e .swiper-slide {
	scroll-snap-align: start !important;
	flex-shrink: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
/* Instagram tiles: 9:16 ratio (1d above), cover (or contain for non-9:16 feed photos), 20px radius. */
body.home .bj-ig .bj-ig__item,
body.home .bj-ig .bj-ig__tile {
	border-radius: 20px !important;
	overflow: hidden !important;
}
body.home .bj-ig .bj-ig__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Models gallery: the slide widths Elementor gives a carousel before (here: instead of) Swiper,
   --e-image-carousel-slides-to-show per view (5 / tablet 3 / phone 1). */
body.home .elementor-element-f145f8e .swiper-slide {
	flex-basis: calc(100% / var(--e-image-carousel-slides-to-show, 3)) !important;
}
@media (prefers-reduced-motion: reduce) {
	.bj-rev__row,
	.bj-ig .bj-ig__grid {
		scroll-behavior: auto !important;
	}
}

/* 5b. Featured carousel inset at 1024-1279px: the theme itself drops `.product` padding from 15px
   to 10px below 1280px (jaroti style.css, `@media (max-width:1279px)`); New Arrivals picks that up
   automatically. Mirror the same 10px on the Hand-picked cards (their padding is set with
   !important above) so both shelves keep matching card widths below 1280px too. */
@media (min-width: 1024px) and (max-width: 1279px) {
	body.home .elementor-element-f7c2457 .products > .product {
		padding: 0 10px !important;
	}
}

/* 6. Phones and tablets (<= 1023px): one shared gutter, even grids, equal cards
   Every homepage panel row starts and ends on the same edges: --bj-home-g from the screen edge
   (16px phones, 24px tablet tier). The Elementor sections are stretched to the window (0..100vw),
   so their widget wrap carries the gutter; the occasion and Instagram rows sit inside the theme's
   15px page padding, so they bleed to the window and carry the gutter as padding (scroll rows then
   run to the screen edge). */
@media (max-width: 1023px) {
	body.home {
		--bj-home-g: 16px;
		--bj-home-gap: 12px;
	}
	body.home .elementor-element-9fb75f3 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.home .elementor-element-1ac0819 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.home .elementor-element-f7c2457 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-left: var(--bj-home-g) !important;
		padding-right: var(--bj-home-g) !important;
	}

	/* Collections (9fb75f3): the tiles section (9edb42c) holds four Elementor columns, each with its
	   own one-item WooCommerce list. Lay the COLUMNS out as an even grid (2 per row on phones) and let
	   each one-item list fill its column; every link in the chain takes the row height so the cards
	   end level even when a name wraps. */
	body.home .elementor-element-9edb42c {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	body.home .elementor-element-9edb42c > .elementor-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--bj-home-gap) !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	body.home .elementor-element-9edb42c > .elementor-container > .elementor-column {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
	}
	body.home .elementor-element-9edb42c > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding: 0 !important;
		height: 100% !important;
	}
	body.home .elementor-element-9edb42c .elementor-widget,
	body.home .elementor-element-9edb42c .elementor-widget-container,
	body.home .elementor-element-9edb42c .ts-product-category-wrapper,
	body.home .elementor-element-9edb42c .content-wrapper {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .products {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .products .product-category {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .products .product-category .product-wrapper {
		height: 100% !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .product-category .meta-wrapper {
		flex: 1 1 auto !important;
		padding: 12px 14px 14px !important;
	}
	/* Names are 17-20px here (22px overflowed a 158px tile at 360); a long word breaks rather than spill. */
	body.home .elementor-element-9fb75f3 .woocommerce .product-category .meta-wrapper .heading-title,
	body.home .elementor-element-9fb75f3 .woocommerce .product-category .meta-wrapper .description {
		font-size: clamp(17px, 4.6vw, 20px) !important;
		overflow-wrap: anywhere !important;
		min-width: 0 !important;
	}

	/* Just landed (1ac0819, phones <=767px) and Hand-picked (f7c2457): 2 cards per view, same
	   --bj-home-gap, no wrapper padding — a scroll row on the gutter (at 768-1023px Just landed
	   switches back to a 3-column grid in 6b below). */
	body.home .elementor-element-1ac0819 .ts-product-wrapper,
	body.home .elementor-element-f7c2457 .ts-product-wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-1ac0819 .products,
	body.home .elementor-element-f7c2457 .products {
		gap: var(--bj-home-gap) !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home .elementor-element-1ac0819 .products > .product,
	body.home .elementor-element-f7c2457 .products > .product {
		flex: 0 0 calc((100% - var(--bj-home-gap)) / 2) !important;
		padding: 0 !important;
	}

	/* Occasions and Instagram rows: bleed to the window, gutter as padding. */
	body.home .bj-occ-home__row,
	body.home .bj-ig .bj-ig__grid {
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: var(--bj-home-g) !important;
		padding-right: var(--bj-home-g) !important;
		scroll-padding-left: var(--bj-home-g) !important;
		scroll-padding-right: var(--bj-home-g) !important;
	}
	/* Instagram: exactly 2 tiles per view on phones (L and R gutters equal at rest). */
	body.home .bj-ig .bj-ig__grid {
		gap: 12px !important;
	}
	body.home .bj-ig .bj-ig__item {
		flex: 0 0 calc((100vw - 2 * var(--bj-home-g) - 12px) / 2) !important;
	}
	body.home .bj-rev__row {
		padding-left: var(--bj-home-g) !important;
		padding-right: var(--bj-home-g) !important;
		scroll-padding-left: var(--bj-home-g) !important;
		scroll-padding-right: var(--bj-home-g) !important;
	}
}

/* Hide "Our models" gallery section (f145f8e) on phones <= 767px (owner, 2026-09-27). */
@media (max-width: 767px) {
	body.home .elementor-element-f145f8e {
		display: none !important;
	}
}

/* 6b. Tablet tier (700-1023px: Galaxy Z Fold open 744, small tablets): wider gutter, and grids that
   use the width instead of stretching the phone layout: 3 products per row (9 shown), the four
   collections in one even row (3 per row would orphan the fourth), 3 Instagram tiles per view. */
@media (min-width: 700px) and (max-width: 1023px) {
	body.home {
		--bj-home-g: 24px;
		--bj-home-gap: 16px;
	}
	body.home .elementor-element-9edb42c > .elementor-container {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	body.home .elementor-element-9fb75f3 .woocommerce .product-category .meta-wrapper .heading-title,
	body.home .elementor-element-9fb75f3 .woocommerce .product-category .meta-wrapper .description {
		font-size: 18px !important;
	}
	body.home .elementor-element-1ac0819 .products > .product,
	body.home .elementor-element-f7c2457 .products > .product {
		flex-basis: calc((100% - 2 * var(--bj-home-gap)) / 3) !important;
	}
	body.home .bj-ig .bj-ig__item {
		flex-basis: calc((100vw - 2 * var(--bj-home-g) - 24px) / 3) !important;
	}
}

/* 6c. Product rows with the shared card (controls.css section 9, which has no card box): the grid's row
   gap matches the shop/occasion grids (26px phones, 32px from 700px) so the rows don't read as one
   joined block, and both rows get 16px of bottom room. Their .ts-product-wrapper (and the shelf's
   scroller) clip overflow, so without it the cart circle's bottom edge and its shadow were cut off.
   Placed after sections 5 and 6 so it wins over their `gap`/`padding` at equal specificity. */
@media (min-width: 768px) and (max-width: 1023px) {
	body.home .elementor-element-1ac0819 .woocommerce.columns-5 .products,
	body.home .elementor-element-1ac0819 .woocommerce .products {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		width: auto !important;
		max-width: none !important;
		overflow: visible !important;
	}
	body.home .elementor-element-1ac0819 .woocommerce .products .product {
		width: 100% !important;
	}
	body.home .elementor-element-1ac0819 .woocommerce .products .product:nth-child(n+10) {
		display: none !important;
	}
}
@media (min-width: 768px) {
	body.home .elementor-element-1ac0819 .woocommerce.columns-5 .products,
	body.home .elementor-element-1ac0819 .woocommerce .products {
		row-gap: 32px !important;
	}
}
body.home .elementor-element-1ac0819 .woocommerce.columns-5 .products,
body.home .elementor-element-1ac0819 .woocommerce .products,
body.home .elementor-element-f7c2457 .products {
	padding-bottom: 16px !important;
}

/* 6d. Phones (<= 767px): one vertical rhythm across all homepage bands (32px between bands, 8px
   eyebrow -> title, 16px heading -> row) instead of the stacked 104-194px gaps, and a 2-row
   sliding shelf on Just landed + Hand-picked so four cards show per screen and slide together
   (owner, 2026-09-27). */
@media (max-width: 767px) {
	body.home .bj-occ-home,
	body.home .elementor-element-9fb75f3,
	body.home .elementor-element-1ac0819,
	body.home .elementor-element-f7c2457,
	body.home .bj-ig,
	body.home .bj-rev,
	body.home .elementor-element-f145f8e {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	body.home .elementor-element-9fb75f3 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.home .elementor-element-1ac0819 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.home .elementor-element-f7c2457 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.home .elementor-element-f145f8e > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	body.home .elementor-element-9fb75f3 .elementor-inner-section:first-child,
	body.home .elementor-element-1ac0819 .elementor-inner-section:first-child,
	body.home .elementor-element-f145f8e .elementor-inner-section:first-child,
	body.home .bj-occ-home__head,
	body.home .bj-ig .bj-ig__head,
	body.home .bj-rev .bj-rev__head {
		margin-bottom: 16px !important;
	}
	body.home .elementor-element-9fb75f3 .elementor-inner-section:first-child .elementor-widget-wrap,
	body.home .elementor-element-1ac0819 .elementor-inner-section:first-child .elementor-widget-wrap,
	body.home .elementor-element-f145f8e .elementor-inner-section:first-child .elementor-widget-wrap {
		padding: 0 !important;
	}
	body.home .elementor-element-9fb75f3 .elementor-inner-section:first-child .elementor-widget,
	body.home .elementor-element-1ac0819 .elementor-inner-section:first-child .elementor-widget,
	body.home .elementor-element-f145f8e .elementor-inner-section:first-child .elementor-widget {
		margin-bottom: 0 !important;
	}
	body.home .bj-shelf-head__eyebrow,
	body.home .bj-occ-home .bj-occ-home__eyebrow,
	body.home .bj-ig .bj-ig__eyebrow {
		margin: 0 0 8px !important;
	}
	body.home .bj-shelf-head__title,
	body.home .bj-occ-home .bj-occ-home__title,
	body.home .bj-ig .bj-ig__title {
		margin: 0 !important;
	}
	body.home .elementor-element-f7c2457 .bj-shelf-head__title {
		margin-bottom: 16px !important;
	}
	body.home .bj-occ-home__sub,
	body.home .bj-ig .bj-ig__sub,
	body.home .bj-rev .bj-rev__summary {
		margin-top: 8px !important;
	}
	body.home .bj-occ-home__all,
	body.home .bj-ig .bj-ig__cta,
	body.home .bj-rev .bj-rev__all {
		margin-top: 16px !important;
	}

	/* Two-row horizontal shelves on phones (shared by Shop by occasion, Just landed, Hand-picked):
	   two stacked cards per column, both rows scrolling together on the carousel.js shelf track. */
	body.home .bj-occ-home__row,
	body.home .elementor-element-1ac0819 .products,
	body.home .elementor-element-f7c2457 .products {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-template-rows: repeat(2, auto) !important;
		grid-auto-columns: calc((100% - var(--bj-home-gap)) / 2) !important;
		gap: var(--bj-home-gap) !important;
	}
	body.home .bj-occ-home .bj-occ-home__card {
		width: auto !important;
		max-width: none !important;
	}
}

/* 7. Single Gentle Reveal Animation
   Fade + 10px vertical rise, 450ms, runs once, respects prefers-reduced-motion */
html.bj-reveal-enabled .bj-reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: opacity, transform;
}
html.bj-reveal-enabled .bj-reveal.bj-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
	html.bj-reveal-enabled .bj-reveal,
	html.bj-reveal-enabled .bj-reveal.bj-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Owner, 2026-09-27: no "Our models" gallery on phones. */
@media (max-width: 767px) {
	body.home .elementor-element-f145f8e { display: none !important; }
}

/* Review avatar initial is Marcellus — never bold (inherits 500 from .bj-rev__who). */
body.home .bj-rev__avatar { font-weight: 400 !important; }