/*
 Whiteplate — Janebi-pattern homepage (Brand Book colors only)
 Version: 0.36.7
 Density / rhythm inspired by janebi.com; palette from Whiteplate Brand Book.
 Measured janebi@1440: side gutter ~15px, section gaps 20–32px, near full-bleed.
 Full-width hero slider (no side promo stack) since 0.36.
 Brands strip: infinite CSS marquee (0.36.1) — same chip look as before.
 0.36.3 — hero break out of section max-width (100vw).
 0.36.5 — reliable full-bleed (width:100% of home, no aspect-ratio width shrink);
         delicate ~22px arrows / ~5px dots; WoodMart button min-size override.
 0.36.6 — outward chevrons; fade transition (no [hidden] kill); 5 slides + data-src defer.
 0.36.7 — card CTA always «مشاهده»; hover/focus/tap overlay «افزودن به سبد».
*/

.wp-jb-home {
	/* 0.35.2 — denser gutters (was clamp→28 + max 1320 → ~60px boxed sides) */
	--jb-pad: clamp(12px, 1.05vw, 16px);
	--jb-max: 1480px;
	--jb-gap: 12px;
	--jb-section-y: 18px;
	--jb-r: 12px;
	background: var(--wp-bg, #F7F5F0);
	color: var(--wp-ink, #333333);
	font-family: var(--wp-font);
	padding-bottom: 24px;
	overflow-x: clip; /* contain any accidental overflow */
}
body.wp-jb-front {
	overflow-x: clip;
}

.wp-jb-home a {
	text-decoration: none !important;
	color: inherit;
}
.wp-jb-home a:hover {
	text-decoration: none !important;
}

.wp-jb-home > .wp-jb-circles,
.wp-jb-home > .wp-jb-section,
.wp-jb-home > .wp-jb-trust {
	width: min(100% - (var(--jb-pad) * 2), var(--jb-max));
	margin-inline: auto;
}

/* ---- Hero: full-bleed single slider (0.36.5) — side promos demoted ----
   Prefer width:100% of .wp-jb-home (already viewport-wide) over 100vw —
   avoids scrollbar offset / half-applied breakout. Do NOT put hero in the
   --jb-max section band. Do NOT use aspect-ratio+max-height (that shrunk
   .wp-jb-hero-main to ~924px at 1920vw). */
.wp-jb-home > .wp-jb-hero,
.wp-jb-home--v35 > .wp-jb-hero {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}
.wp-jb-hero,
.wp-jb-hero--full {
	display: block;
	padding-block: 0 14px;
}
.wp-jb-hero-grid { display: contents; } /* legacy wrapper no longer used */
.wp-jb-hero-main {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: none;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp-sand, #DFDBCF);
	/* Height from viewport; width always 100% (images cover) */
	height: clamp(240px, 34vw, 480px);
	min-height: 240px;
	aspect-ratio: auto;
	max-height: none;
	box-shadow: none;
}
.wp-jb-hero-slides {
	position: absolute;
	inset: 0;
}
.wp-jb-hero-slide {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	/* Crossfade both ways on .is-active toggle; !important beats Elementor duration resets outside reduce-motion */
	transition: opacity .45s ease !important;
}
.wp-jb-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}
/* Legacy: keep harmless if old markup still has [hidden] */
.wp-jb-hero-slide[hidden] {
	display: block !important;
}
.wp-jb-hero-media {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.wp-jb-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s ease;
}
.wp-jb-hero-slide.is-active:hover .wp-jb-hero-media img,
.wp-jb-promo:hover .wp-jb-promo-media img {
	transform: scale(1.03);
}
.wp-jb-tile-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: linear-gradient(135deg, var(--wp-green, #687049), var(--wp-soil, #A1927D));
	color: #fff;
	font: 800 42px/1 Georgia, serif;
}
.wp-jb-hero-caption {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inset-inline-end: 0;
	padding: 28px 18px 18px;
	background: linear-gradient(transparent, rgba(51, 51, 51, .78));
	display: flex;
	align-items: flex-end;
	gap: 10px;
	z-index: 2;
	pointer-events: none;
}
.wp-jb-hero-caption strong {
	font: 700 clamp(14px, 1.5vw, 20px)/1.35 var(--wp-font);
	color: #fff;
	text-shadow: 0 1px 8px rgba(51, 51, 51, .35);
}
.wp-jb-hero-dots {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 10px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 5px;
	z-index: 3;
}
/* !important beats WoodMart button min-height/padding (was forcing 42×40 dots) */
.wp-jb-home button.wp-jb-hero-dot,
.wp-jb-hero-dot {
	width: 5px !important;
	height: 5px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50%;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	background: rgba(255, 255, 255, .38) !important;
	box-shadow: none !important;
	cursor: pointer;
	opacity: .7;
	transition: width .2s ease, background .2s ease, opacity .2s ease;
}
.wp-jb-home button.wp-jb-hero-dot:hover,
.wp-jb-hero-dot:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .7) !important;
}
.wp-jb-home button.wp-jb-hero-dot.is-active,
.wp-jb-hero-dot.is-active {
	background: var(--wp-orange, #FF5F23) !important;
	width: 14px !important;
	border-radius: 999px;
	opacity: 1;
}
/* Arrows: absolute to .wp-jb-hero-main; flush to L/R edges; logical props = RTL-safe */
.wp-jb-home button.wp-jb-hero-arrow,
.wp-jb-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(51, 51, 51, .08) !important;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	background: rgba(255, 255, 255, .72) !important;
	color: var(--wp-ink, #333333) !important;
	box-shadow: 0 1px 3px rgba(51, 51, 51, .08) !important;
	line-height: 0 !important;
	font-size: 0 !important;
	transition: background .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease;
	opacity: .55;
}
.wp-jb-hero-arrow svg {
	width: 11px !important;
	height: 11px !important;
	display: block;
	stroke-width: 1.75;
}
.wp-jb-home button.wp-jb-hero-arrow:hover,
.wp-jb-hero-arrow:hover {
	background: var(--wp-orange, #FF5F23) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 1px 4px rgba(51, 51, 51, .12) !important;
	opacity: 1;
}
/* RTL: inline-start = right, inline-end = left — next on start, prev on end */
.wp-jb-hero-arrow--prev {
	inset-inline-end: 8px;
	inset-inline-start: auto;
}
.wp-jb-hero-arrow--next {
	inset-inline-start: 8px;
	inset-inline-end: auto;
}
html[dir="ltr"] .wp-jb-hero-arrow--prev {
	inset-inline-start: 8px;
	inset-inline-end: auto;
}
html[dir="ltr"] .wp-jb-hero-arrow--next {
	inset-inline-end: 8px;
	inset-inline-start: auto;
}
.wp-jb-hero-side,
.wp-jb-side-tile,
.wp-jb-hero-side-card {
	display: none !important; /* demoted from primary hero band */
}

/* ---- Circular categories ---- */
.wp-jb-circles {
	padding-block: 12px 8px;
}
.wp-jb-circles-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(78px, 1fr);
	gap: 8px 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 4px 8px;
	-webkit-overflow-scrolling: touch;
}
.wp-jb-circles-track::-webkit-scrollbar { display: none; }
.wp-jb-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	min-width: 72px;
}
.wp-jb-circle-img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--wp-line, #E5E0D6);
	display: grid;
	place-items: center;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wp-jb-circle-img img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}
.wp-jb-circle-img.is-fallback {
	background: var(--wp-sand, #DFDBCF);
	color: var(--wp-green, #687049);
	font: 700 22px/1 var(--wp-font);
}
.wp-jb-circle:hover .wp-jb-circle-img {
	border-color: var(--wp-green, #687049);
	box-shadow: 0 8px 18px rgba(104, 112, 73, .16);
	transform: translateY(-2px);
}
.wp-jb-circle-name {
	font: 500 11.5px/1.35 var(--wp-font);
	color: var(--wp-ink, #333333);
	max-width: 9ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Sections ---- */
.wp-jb-section {
	padding-block: var(--jb-section-y) 10px;
}
.wp-jb-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.wp-jb-section-title {
	margin: 0;
	font: 700 17px/1.3 var(--wp-font);
	color: var(--wp-ink, #333333);
}
.wp-jb-section-cta {
	font: 600 12.5px/1 var(--wp-font);
	color: var(--wp-green, #687049) !important;
	white-space: nowrap;
}
.wp-jb-section-cta:hover {
	color: var(--wp-orange, #FF5F23) !important;
}

/* Amazing band */
.wp-jb-amazing {
	background: linear-gradient(135deg, var(--wp-green, #687049) 0%, var(--wp-green-2, #55603c) 100%);
	width: min(100% - (var(--jb-pad) * 2), var(--jb-max)) !important;
	border-radius: 16px;
	padding: 16px var(--jb-pad) 18px;
	box-sizing: border-box;
}
.wp-jb-amazing .wp-jb-section-title,
.wp-jb-amazing .wp-jb-section-cta {
	color: #fff !important;
}
.wp-jb-amazing .wp-jb-rail-nav {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: rgba(255, 255, 255, .25);
}

/* ---- Product rail + cards ---- */
.wp-jb-rail {
	position: relative;
}
.wp-jb-rail-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(158px, 190px);
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 2px 2px 8px;
	cursor: grab;
}
.wp-jb-rail-track::-webkit-scrollbar { display: none; }
.wp-jb-rail-track.is-dragging { cursor: grabbing; }
.wp-jb-rail-nav {
	position: absolute;
	top: 42%;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--wp-line, #E5E0D6);
	background: #fff;
	color: var(--wp-ink, #333333);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(51, 51, 51, .1);
}
.wp-jb-rail-nav:disabled { opacity: .35; pointer-events: none; }
.wp-jb-rail-nav--prev { inset-inline-start: -6px; }
.wp-jb-rail-nav--next { inset-inline-end: -6px; }

.wp-jb-card {
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--wp-line, #E5E0D6);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.wp-jb-card:hover {
	border-color: var(--wp-sand, #DFDBCF);
	box-shadow: 0 10px 24px rgba(51, 51, 51, .08);
}
.wp-jb-card-media-wrap {
	position: relative;
}
.wp-jb-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	background: #fff;
	overflow: hidden;
}
.wp-jb-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}
.wp-jb-card-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--wp-sand, #DFDBCF);
	color: var(--wp-green, #687049);
	font: 800 28px/1 Georgia, serif;
}
.wp-jb-card-badge {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 1;
	background: var(--wp-orange, #FF5F23);
	color: #fff;
	font: 700 11px/1 var(--wp-font);
	padding: 5px 7px;
	border-radius: 6px;
}
/* Overlay ATC — revealed on hover / focus-within / mobile tap (.is-atc-open) */
.wp-jb-card-hover {
	position: absolute;
	inset-inline: 8px;
	bottom: 8px;
	z-index: 2;
	display: block;
	text-align: center;
	background: var(--wp-orange, #FF5F23);
	color: #fff !important;
	font: 700 11px/1 var(--wp-font);
	padding: 8px;
	border-radius: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.wp-jb-card:hover .wp-jb-card-hover,
.wp-jb-card:focus-within .wp-jb-card-hover,
.wp-jb-card.is-atc-open .wp-jb-card-hover {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.wp-jb-card-hover:hover,
.wp-jb-card-hover:focus-visible {
	background: var(--wp-green, #687049);
}
.wp-jb-card-body {
	padding: 8px 10px 4px;
	flex: 1;
}
.wp-jb-card-title {
	margin: 0 0 6px;
	font: 500 12.5px/1.45 var(--wp-font);
	min-height: 2.9em;
}
.wp-jb-card-title a {
	color: var(--wp-ink, #333333) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-jb-card-price {
	font: 700 13.5px/1.3 var(--wp-font);
	color: var(--wp-ink, #333333);
}
.wp-jb-card-price del {
	color: var(--wp-soil, #A1927D);
	font-weight: 500;
	font-size: 11.5px;
	margin-inline-start: 4px;
}
.wp-jb-card-price ins {
	text-decoration: none;
	color: var(--wp-orange, #FF5F23);
}
.wp-jb-card-cart {
	display: block;
	margin: 6px 10px 10px;
	text-align: center;
	font: 700 12px/1 var(--wp-font);
	padding: 9px 8px;
	border-radius: 8px;
	background: var(--wp-green, #687049);
	color: #fff !important;
	transition: background .2s ease;
}
.wp-jb-card-cart:hover {
	background: var(--wp-orange, #FF5F23);
}

/* ---- Promo tiles ---- */
.wp-jb-promo-grid {
	display: grid;
	gap: var(--jb-gap);
}
.wp-jb-promo-grid--mid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-jb-promo-grid--bottom {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wp-jb-promo {
	position: relative;
	border-radius: var(--jb-r);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--wp-sand, #DFDBCF);
	display: block;
}
.wp-jb-promo-grid--bottom .wp-jb-promo {
	aspect-ratio: 2.4 / 1;
}
.wp-jb-promo-media {
	position: absolute;
	inset: 0;
}
.wp-jb-promo-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.wp-jb-promo-label {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-end: 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--wp-ink, #333333);
	font: 700 13px/1.3 var(--wp-font);
	padding: 8px 12px;
	border-radius: 8px;
}

/* ---- Brands: seamless infinite marquee (chip look unchanged) ---- */
.wp-jb-brands-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* LTR wrapper so translateX(-50%→0) covers both edges; chips stay RTL. */
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wp-jb-brands-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	direction: ltr;
	padding: 6px 0;
	animation-name: wp-jb-brand-scroll;
	animation-duration: 45s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	will-change: transform;
}
.wp-jb-brands-marquee:hover .wp-jb-brands-track {
	animation-play-state: paused;
}
@keyframes wp-jb-brand-scroll {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
.wp-jb-brand {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 118px;
	height: 72px;
	margin-inline-end: 10px;
	background: #fff;
	border: 1px solid var(--wp-line, #E5E0D6);
	border-radius: 10px;
	padding: 10px;
	font: 600 12px/1.3 var(--wp-font);
	color: var(--wp-soil, #A1927D);
	direction: rtl;
	white-space: nowrap;
}
.wp-jb-brand img {
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
}
.wp-jb-brand:hover {
	border-color: var(--wp-green, #687049);
}
@media (prefers-reduced-motion: reduce) {
	.wp-jb-brands-track {
		animation: none;
		transform: none;
		overflow-x: auto;
		scrollbar-width: none;
		max-width: 100%;
	}
	.wp-jb-brands-track::-webkit-scrollbar { display: none; }
	.wp-jb-brands-marquee {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}
}

/* ---- Trust ---- */
.wp-jb-trust {
	padding-block: 20px 8px;
}
.wp-jb-trust-list {
	list-style: none;
	margin: 0;
	padding: 14px 10px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wp-line, #E5E0D6);
	border-radius: 14px;
}
.wp-jb-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font: 600 12px/1.35 var(--wp-font);
	color: var(--wp-ink, #333333);
}
.wp-jb-trust-item img {
	width: 36px;
	height: 36px;
	opacity: .9;
}

/* ---- Hide Elementor leftovers if any chrome leaks ---- */
body.home .elementor-location-header,
.wp-jb-home ~ .elementor {
	/* no-op; front-page.php skips Elementor content */
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.wp-jb-hero-main {
		height: clamp(200px, 40vw, 360px);
		min-height: 200px;
	}
	.wp-jb-home button.wp-jb-hero-arrow,
	.wp-jb-hero-arrow {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		min-height: 20px !important;
	}
	.wp-jb-hero-arrow svg {
		width: 10px !important;
		height: 10px !important;
	}
	.wp-jb-promo-grid--mid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-jb-trust-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.wp-jb-rail-nav { display: none; }
}
@media (max-width: 640px) {
	.wp-jb-hero-main {
		height: clamp(168px, 52vw, 280px);
		min-height: 168px;
		border-radius: 0;
	}
	.wp-jb-hero-arrow { display: none; }
	.wp-jb-hero-caption { padding: 20px 12px 14px; }
	.wp-jb-hero-caption strong { font-size: 13px; }
	.wp-jb-hero-dots { inset-block-end: 8px; }
}

@media (max-width: 640px) {
	.wp-jb-circle-img {
		width: 64px;
		height: 64px;
	}
	.wp-jb-promo-grid--bottom {
		grid-template-columns: 1fr;
	}
	.wp-jb-trust-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-jb-section-title { font-size: 15px; }
	.wp-jb-rail-track {
		grid-auto-columns: minmax(142px, 158px);
	}
}

/* ---- 0.35 structure: circles-first, chips, cat rails, sep banners ---- */
.wp-jb-home--v35 {
	--jb-gap: 12px;
	--jb-section-y: 20px; /* janebi widget mb ≈ 20–32 */
}
.wp-jb-home--v35 > .wp-jb-circles,
.wp-jb-home--v35 > .wp-jb-chips,
.wp-jb-home--v35 > .wp-jb-section,
.wp-jb-home--v35 > .wp-jb-trust {
	width: min(100% - (var(--jb-pad) * 2), var(--jb-max));
	margin-inline: auto;
}
.wp-jb-home--v35 > .wp-jb-circles:first-child {
	padding-top: 10px;
}
.wp-jb-circles--campaign {
	padding-bottom: 2px;
}
.wp-jb-circles--cats {
	padding-top: 2px;
}
.wp-jb-circle--campaign .wp-jb-circle-img {
	border-width: 2px;
}
.wp-jb-circle--tone-green .wp-jb-circle-img { border-color: #687049; background: rgba(104,112,73,.08); }
.wp-jb-circle--tone-soil .wp-jb-circle-img { border-color: #A1927D; background: rgba(161,146,125,.12); }
.wp-jb-circle--tone-orange .wp-jb-circle-img { border-color: #FF5F23; background: rgba(255,95,35,.08); }
.wp-jb-circle--tone-coy .wp-jb-circle-img { border-color: #DF856D; background: rgba(223,133,109,.12); }
.wp-jb-circle--tone-sand .wp-jb-circle-img { border-color: #DFDBCF; background: #F7F5F0; }
.wp-jb-circle--tone-grey .wp-jb-circle-img { border-color: #333333; background: rgba(51,51,51,.06); }

.wp-jb-chips {
	padding-block: 8px 12px;
}
.wp-jb-chips-title {
	margin: 0 0 8px;
	font: 800 15px/1.3 var(--wp-font);
	color: var(--wp-ink, #333333);
}
.wp-jb-chips-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.wp-jb-chips-track::-webkit-scrollbar { display: none; }
.wp-jb-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--wp-line, #E5E0D6);
	font: 700 12.5px/1 var(--wp-font);
	color: var(--wp-ink, #333333);
	white-space: nowrap;
}
.wp-jb-chip:hover {
	border-color: var(--wp-emerald, #687049);
	color: var(--wp-emerald, #687049);
}

.wp-jb-home--v35 .wp-jb-section {
	padding-block: var(--jb-section-y) 8px;
}
.wp-jb-home--v35 .wp-jb-section-head {
	margin-bottom: 12px;
}
.wp-jb-home--v35 .wp-jb-cat-rail {
	padding-block: 24px 8px; /* ≈ janebi product-list mb 32 with internal pad */
}
.wp-jb-home--v35 .wp-jb-popular,
.wp-jb-home--v35 .wp-jb-newest,
.wp-jb-home--v35 .wp-jb-brands {
	padding-block: 28px 10px;
}

.wp-jb-sep {
	padding-block: 8px 16px !important;
}
.wp-jb-sep-banner {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	min-height: 128px;
	background: #687049;
	color: #fff;
}
.wp-jb-sep-banner-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.wp-jb-sep-banner-media {
	position: absolute;
	inset: 0;
	opacity: .22;
	z-index: 0;
}
.wp-jb-sep-banner-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-jb-sep-banner-media .wp-jb-tile-fallback {
	min-height: 128px;
	background: transparent;
	font-size: 0;
}
.wp-jb-sep-banner-copy {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	min-height: 128px;
	padding: 22px 22px;
}
.wp-jb-sep-banner-copy strong {
	font: 800 18px/1.35 var(--wp-font);
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,.22);
	max-width: 42ch;
}
.wp-jb-sep-banner-copy em {
	font: 800 12.5px/1 var(--wp-font);
	font-style: normal;
	background: #FF5F23;
	color: #fff;
	padding: 10px 14px;
	border-radius: 10px;
	white-space: nowrap;
}

/* ---- 0.35.2 distinct banner variants (Brand Book only) ---- */
/* 1 GREEN slash — solid green + sand diagonal */
.wp-jb-sep-banner--green-slash {
	background: #687049;
}
.wp-jb-sep-banner--green-slash .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset-block: -20%;
	inset-inline-end: -8%;
	width: 42%;
	background: #DFDBCF;
	transform: skewX(-18deg);
	opacity: .92;
}
.wp-jb-sep-banner--green-slash .wp-jb-sep-banner-art::after {
	content: "";
	position: absolute;
	inset-block-end: 18px;
	inset-inline-end: 12%;
	width: 64px;
	height: 64px;
	border: 3px solid #687049;
	border-radius: 50%;
	opacity: .55;
}
.wp-jb-sep-banner--green-slash .wp-jb-sep-banner-copy strong { color: #fff; }
.wp-jb-sep-banner--green-slash .wp-jb-sep-banner-media { opacity: .12; }

/* 2 ORANGE wave — orange → coy */
.wp-jb-sep-banner--orange-wave {
	background: linear-gradient(105deg, #FF5F23 0%, #DF856D 62%, #A1927D 100%);
}
.wp-jb-sep-banner--orange-wave .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -40%;
	height: 90%;
	background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.28), transparent 55%);
}
.wp-jb-sep-banner--orange-wave .wp-jb-sep-banner-art::after {
	content: "";
	position: absolute;
	inset-inline-start: 8%;
	inset-block-start: 16px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35);
}
.wp-jb-sep-banner--orange-wave .wp-jb-sep-banner-copy em {
	background: #333333;
}

/* 3 SOIL grid */
.wp-jb-sep-banner--soil-grid {
	background: #A1927D;
}
.wp-jb-sep-banner--soil-grid .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(223,219,207,.22) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(223,219,207,.22) 1px, transparent 1px) 0 0 / 28px 28px;
}
.wp-jb-sep-banner--soil-grid .wp-jb-sep-banner-art::after {
	content: "";
	position: absolute;
	inset-inline-end: 6%;
	inset-block: 12%;
	width: 28%;
	background: #DFDBCF;
	border-radius: 12px 0 0 12px;
	opacity: .9;
}
.wp-jb-sep-banner--soil-grid .wp-jb-sep-banner-copy em {
	background: #687049;
}
.wp-jb-sep-banner--soil-grid .wp-jb-sep-banner-media { opacity: .18; }

/* 4 GREY minimal — typography-forward */
.wp-jb-sep-banner--grey-minimal {
	background: #333333;
}
.wp-jb-sep-banner--grey-minimal .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 8px;
	background: #FF5F23;
}
.wp-jb-sep-banner--grey-minimal .wp-jb-sep-banner-art::after {
	content: "";
	position: absolute;
	inset-inline-end: 4%;
	inset-block-start: 50%;
	width: 180px;
	height: 180px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: rgba(104,112,73,.35);
}
.wp-jb-sep-banner--grey-minimal .wp-jb-sep-banner-copy strong {
	font-size: 20px;
	letter-spacing: .01em;
}
.wp-jb-sep-banner--grey-minimal .wp-jb-sep-banner-copy em {
	background: #687049;
	border-radius: 999px;
}
.wp-jb-sep-banner--grey-minimal .wp-jb-sep-banner-media { opacity: .1; }

/* 5 SAND split — sand ground + green panel */
.wp-jb-sep-banner--sand-split {
	background: #DFDBCF;
	color: #333333;
}
.wp-jb-sep-banner--sand-split .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 38%;
	background: linear-gradient(160deg, #687049 0%, #55603c 100%);
	clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.wp-jb-sep-banner--sand-split .wp-jb-sep-banner-copy strong {
	color: #333333;
	text-shadow: none;
	margin-inline-start: min(32%, 180px);
}
.wp-jb-sep-banner--sand-split .wp-jb-sep-banner-copy em {
	background: #FF5F23;
}
.wp-jb-sep-banner--sand-split .wp-jb-sep-banner-media {
	opacity: .28;
	inset-inline-start: 40%;
}

/* 6 COLOR OF YEAR diagonal */
.wp-jb-sep-banner--coy-diagonal {
	background: linear-gradient(135deg, #DF856D 0%, #A1927D 100%);
}
.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-art::before {
	content: "";
	position: absolute;
	inset-block: -30%;
	inset-inline-start: 48%;
	width: 55%;
	background: #FFFFFF;
	transform: skewX(-24deg);
	opacity: .88;
}
.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-art::after {
	content: "";
	position: absolute;
	inset-inline-end: 10%;
	inset-block-start: 22%;
	width: 70px;
	height: 70px;
	background: #FF5F23;
	border-radius: 16px;
	transform: rotate(18deg);
	opacity: .85;
}
.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-copy strong {
	color: #fff;
	max-width: 36ch;
}
.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-copy em {
	background: #333333;
	color: #fff;
}
.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-media { opacity: .08; }

/* Hero side cards — distinct treatments */
.wp-jb-hero-side-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.wp-jb-hero-side-card--green-orb {
	background: linear-gradient(145deg, #687049 0%, #55603c 100%);
}
.wp-jb-hero-side-card--green-orb .wp-jb-hero-side-art::before {
	content: "";
	position: absolute;
	inset-inline-end: -18%;
	inset-block-start: -20%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(223,219,207,.22);
}
.wp-jb-hero-side-card--green-orb .wp-jb-hero-side-art::after {
	content: "";
	position: absolute;
	inset-inline-start: 10%;
	inset-block-end: 12%;
	width: 48px;
	height: 48px;
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 50%;
}
.wp-jb-hero-side-card--green-orb .wp-jb-hero-media {
	opacity: .42;
	mix-blend-mode: luminosity;
}
.wp-jb-hero-side-card--green-orb .wp-jb-hero-caption em {
	background: #FF5F23;
}

.wp-jb-hero-side-card--orange-cut {
	background: linear-gradient(160deg, #FF5F23 0%, #DF856D 55%, #A1927D 100%);
}
.wp-jb-hero-side-card--orange-cut .wp-jb-hero-side-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.2) 42%, rgba(255,255,255,.2) 58%, transparent 58%);
}
.wp-jb-hero-side-card--orange-cut .wp-jb-hero-side-art::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block: 0;
	width: 34%;
	background: #DFDBCF;
	clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .95;
}
.wp-jb-hero-side-card--orange-cut .wp-jb-hero-media {
	opacity: .38;
}
.wp-jb-hero-side-card--orange-cut .wp-jb-hero-caption em {
	background: #333333;
}
.wp-jb-hero-side-card .wp-jb-hero-media,
.wp-jb-hero-side-card .wp-jb-hero-caption {
	z-index: 1;
}

/* Promo tiles — distinct variants */
.wp-jb-promo-art {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.wp-jb-promo--green-panel {
	background: linear-gradient(135deg, #687049, #55603c);
}
.wp-jb-promo--green-panel .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset-inline-end: -10%;
	inset-block-end: -30%;
	width: 55%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(223,219,207,.25);
}
.wp-jb-promo--orange-slash {
	background: linear-gradient(120deg, #FF5F23, #DF856D);
}
.wp-jb-promo--orange-slash .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-28deg, transparent, transparent 14px, rgba(255,255,255,.12) 14px, rgba(255,255,255,.12) 18px);
}
.wp-jb-promo--soil-grid {
	background: #A1927D;
}
.wp-jb-promo--soil-grid .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 20px 20px;
}
.wp-jb-promo--coy-wave {
	background: linear-gradient(160deg, #DF856D, #A1927D 70%);
}
.wp-jb-promo--coy-wave .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset-inline: -10%;
	inset-block-end: -40%;
	height: 80%;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
}
.wp-jb-promo--sand-split {
	background: #DFDBCF;
}
.wp-jb-promo--sand-split .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 36%;
	background: #687049;
	clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.wp-jb-promo--sand-split .wp-jb-promo-label {
	background: #fff;
	color: #333333;
}
.wp-jb-promo--grey-bar {
	background: #333333;
}
.wp-jb-promo--grey-bar .wp-jb-promo-art::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 6px;
	background: #FF5F23;
}
.wp-jb-promo--grey-bar .wp-jb-promo-label {
	background: #687049;
	color: #fff;
}
.wp-jb-promo .wp-jb-promo-media {
	z-index: 0;
	opacity: .35;
}
.wp-jb-promo .wp-jb-promo-label {
	z-index: 1;
}

.wp-jb-card-meta {
	margin-top: 4px;
}
.wp-jb-card-meta-item {
	display: inline-block;
	font: 600 11px/1.2 var(--wp-font);
	color: var(--wp-emerald, #687049);
}

.wp-jb-home--v35 .wp-jb-hero {
	padding-block: 0 14px;
}
.wp-jb-home--v35 .wp-jb-amazing {
	background: linear-gradient(180deg, rgba(104,112,73,.1), transparent 70%);
	border-radius: 14px;
	padding: 16px 12px 12px;
	margin-block: 8px 12px;
}

@media (max-width: 640px) {
	.wp-jb-home {
		--jb-pad: 12px;
		--jb-section-y: 14px;
	}
	.wp-jb-sep-banner-copy {
		min-height: 108px;
		padding: 16px 14px;
		flex-direction: column;
		align-items: flex-start;
	}
	.wp-jb-sep-banner-copy strong { font-size: 15px; }
	.wp-jb-sep-banner--sand-split .wp-jb-sep-banner-copy strong {
		margin-inline-start: 0;
	}
	.wp-jb-sep-banner--green-slash .wp-jb-sep-banner-art::before,
	.wp-jb-sep-banner--coy-diagonal .wp-jb-sep-banner-art::before,
	.wp-jb-sep-banner--soil-grid .wp-jb-sep-banner-art::after {
		opacity: .45;
		width: 28%;
	}
}