/*!
 * Xohan Commerce Child — custom styles (loads after all parent and Elementor theme styles).
 * Author: Talukdar Galib <https://talukdargalib.pro.bd> | Copyright (c) 2026 Xohan Digital
 */

/* Buy Now button: black (product page + sticky buy bar).
 * Inside the theme's `pages` layer (layered !important beats unlayered !important),
 * with specificity above the theme's `.woocommerce div.product form.cart .button.alt`. */
@layer pages {
	body.single-product div.product form.cart .button.alt.xc-buy-now,
	body.single-product div.product .button.btn.xc-buy-now,
	body.single-product .btn[data-xc-proxy=".xc-buy-now"] {
		background-color: #111111 !important;
		border-color: #111111 !important;
		color: #ffffff !important;
	}
	body.single-product div.product form.cart .button.alt.xc-buy-now:hover,
	body.single-product div.product .button.btn.xc-buy-now:hover,
	body.single-product .btn[data-xc-proxy=".xc-buy-now"]:hover {
		background-color: #333333 !important;
		border-color: #333333 !important;
		color: #ffffff !important;
	}
}

/* Product page layout tweaks (title, size row, short description).
 * In the theme's `pages` layer so it can override layered theme rules. */
@layer pages {
	/* Title on one line on desktop (custom.js shrinks the font when needed). */
	body.single-product .summary .product_title.jf-title-oneline {
		white-space: nowrap;
		overflow: hidden;
	}

	/* Short description lives in the tabs now. */
	body.single-product .summary > .summary-short {
		display: none;
	}

	/* Size row: boxes + Size Chart button on one line, Clear below on the left. */
	body.single-product .summary table.variations td.value.jf-size-cell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 1rem;
		row-gap: .5rem;
		align-items: center;
	}
	body.single-product .summary table.variations td.value.jf-size-cell > * {
		grid-column: 1;
	}
	body.single-product .summary table.variations td.value.jf-size-cell > .size-opts {
		grid-row: 1;
		margin: 0;
	}
	body.single-product .summary table.variations td.value.jf-size-cell > .xd-chart-popup-trigger {
		grid-column: 2;
		grid-row: 1;
		margin: 0 !important;
		white-space: nowrap;
	}
	body.single-product .summary table.variations td.value.jf-size-cell > a.reset_variations {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		position: static !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		float: none !important;
	}
	@media (max-width: 600px) {
		/* Narrow screens: Size Chart drops to the Clear row, on the right. */
		body.single-product .summary table.variations td.value.jf-size-cell > .size-opts {
			grid-column: 1 / -1;
		}
		body.single-product .summary table.variations td.value.jf-size-cell > .xd-chart-popup-trigger {
			grid-row: 2;
		}
	}
}
/* Product page spacing + price (unlayered: beats the theme's layered rules and Woo Manager's CSS). */

/* Tabs: remove the stray scrollbar next to the tab buttons. */
body.single-product .woocommerce-tabs [role="tablist"] {
	overflow-y: hidden;
	scrollbar-width: none;
}
body.single-product .woocommerce-tabs [role="tablist"]::-webkit-scrollbar {
	display: none;
}

/* Price: bigger, in the theme's main colour. */
body.single-product .summary .price-wrap {
	margin: 12px 0 4px;
}
body.single-product .summary .price-wrap .price,
body.single-product .summary .price-wrap .price .amount,
body.single-product .summary .price-wrap .price ins,
body.single-product .summary .price-wrap .price ins .amount {
	font-size: 2.25rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--brand);
	text-decoration: none;
}
body.single-product .summary .price-wrap .price del,
body.single-product .summary .price-wrap .price del .amount {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-muted);
}

/* Tighter vertical rhythm in the summary. */
body.single-product .summary form.cart {
	margin-top: 12px;
	margin-bottom: 16px;
}
body.single-product .summary form.cart table.variations {
	margin: 0;
}
body.single-product .summary table.variations td.value.jf-size-cell {
	row-gap: 4px;
}
body.single-product .summary table.variations td.value.jf-size-cell > a.reset_variations {
	line-height: 1.4;
	padding: 0;
	min-height: 0;
	height: auto;
}
body.single-product .summary .single_variation_wrap .xd-product-options .xd-section-headline {
	margin-top: 16px;
	margin-bottom: 8px;
}
body.single-product .summary .single_variation_wrap .xd-product-options > .xd-section-headline:first-child,
body.single-product .summary .single_variation_wrap .xd-product-options > :first-child .xd-section-headline {
	margin-top: 4px;
}
body.single-product .summary .xd-order-summary {
	margin-top: 16px;
	margin-bottom: 16px;
}
body.single-product .summary .delivery-box {
	margin-top: 16px;
}
/* ==================================================================
 * Contact Us page (/contact-us/, .jf-contact-page)
 * ================================================================== */
.jf-contact-page {
	max-width: 1120px;
	margin: 0 auto;
}
.jf-contact-page :where(h1, h2, h3, p, address) {
	margin: 0;
}
/* The page hero already shows "Contact Us". */
.jf-contact-page .jf-contact-page__title {
	display: none;
}
.jf-contact-page .jf-contact-page__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: .5rem;
}
.jf-contact-page .jf-contact-page__intro {
	max-width: 640px;
	margin-bottom: 2rem;
}
.jf-contact-page .jf-contact-page__intro h2 {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1.15;
	margin-bottom: .6rem;
}
.jf-contact-page .jf-contact-page__intro p:not(.jf-contact-page__eyebrow) {
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1.6;
}
.jf-contact-page .jf-contact-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
@media (max-width: 860px) {
	.jf-contact-page .jf-contact-page__grid {
		grid-template-columns: 1fr;
	}
}
.jf-contact-page .jf-contact-page__form-card,
.jf-contact-page .jf-contact-page__aside {
	background: var(--surface, #fff);
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 16px;
	padding: clamp(1.25rem, 3vw, 2rem);
	box-shadow: 0 10px 30px rgba(164, 0, 0, .06);
}
.jf-contact-page .jf-contact-page__form-card > h3,
.jf-contact-page .jf-contact-page__aside > h3 {
	font-size: 1.35rem;
	line-height: 1.25;
	margin-bottom: .35rem;
}
.jf-contact-page .jf-contact-page__form-card > p {
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}

/* Form */
.jf-contact-page .wpcf7 form > p,
.jf-contact-page .jf-contact-form__field {
	margin: 0 0 1rem;
}
.jf-contact-page .jf-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}
@media (max-width: 560px) {
	.jf-contact-page .jf-contact-form__grid {
		grid-template-columns: 1fr;
	}
}
.jf-contact-page .wpcf7 label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: var(--text);
}
.jf-contact-page .wpcf7 label br {
	display: none;
}
.jf-contact-page .wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: .4rem;
}
.jf-contact-page .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .9rem;
	font: inherit;
	font-size: .95rem;
	color: var(--text);
	background: var(--surface-2, #f7f7f8);
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 10px;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.jf-contact-page .wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}
.jf-contact-page .wpcf7 :is(input, textarea):focus {
	outline: none;
	background: var(--surface, #fff);
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(164, 0, 0, .12);
}
.jf-contact-page .wpcf7 input[type="submit"],
.jf-contact-page .wpcf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .75rem 2rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.jf-contact-page .wpcf7 .wpcf7-submit:hover {
	background: #7d0000;
}
.jf-contact-page .wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}
.jf-contact-page .wpcf7 .wpcf7-not-valid-tip {
	font-size: .8rem;
	margin-top: .3rem;
}
.jf-contact-page .wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border-radius: 10px;
	font-size: .9rem;
}

/* Contact details card */
.jf-contact-page .jf-contact-page__aside {
	background: linear-gradient(160deg, #a40000 0%, #5c0000 100%);
	border-color: transparent;
	color: #fff;
}
.jf-contact-page .jf-contact-page__aside .jf-contact-page__eyebrow {
	color: rgba(255, 255, 255, .75);
}
.jf-contact-page .jf-contact-page__aside > h3 {
	color: #fff;
}
.jf-contact-page .jf-contact-page__aside > p {
	color: rgba(255, 255, 255, .85);
	line-height: 1.6;
}
.jf-contact-page .jf-contact-page__aside address {
	font-style: normal;
	margin: 1.25rem 0;
	padding: 1rem;
	line-height: 1.6;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	color: #fff;
}
.jf-contact-page .jf-contact-page__aside > br,
.jf-contact-page .jf-contact-page__aside p > a + br {
	display: none;
}
.entry-content.prose:has(> .jf-contact-page) {
	max-width: none;
}
.jf-contact-page .jf-contact-page__aside a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 46px;
	margin-top: .6rem;
	padding: .7rem 1rem;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
	color: #a40000;
	background: #fff;
	transition: transform .2s, opacity .2s;
}
.jf-contact-page .jf-contact-page__aside a.jf-contact-page__whatsapp {
	color: #fff;
	background: #25d366;
}
.jf-contact-page .jf-contact-page__aside a:hover {
	opacity: .92;
	transform: translateY(-1px);
}
.jf-contact-page .jf-contact-page__aside .jf-contact-page__note {
	margin-top: 1.25rem;
	font-size: .85rem;
	color: rgba(255, 255, 255, .75);
}
/* ==================================================================
 * Home hero (.jf-hero): three jerseys as clean white cards, two-line headline.
 * ================================================================== */
.jf-hero .jf-hero-grid {
	padding-block: 3.5rem 3rem;
	gap: 2.5rem;
}
.jf-hero h1 {
	font-size: clamp(2rem, 1.1rem + 2.7vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 1rem 0 1.1rem;
}
.jf-hero h1 br + em,
.jf-hero h1 em {
	display: inline-block;
}
.jf-hero p {
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 48ch;
}
.jf-hero .jf-hero-media {
	min-height: 420px;
}
.jf-hero .jf-shirt {
	filter: none;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}
.jf-hero .jf-shirt img {
	display: block;
	border-radius: inherit;
}
.jf-hero .jf-shirt.s1 {
	width: 54%;
	left: 23%;
	top: 4%;
	z-index: 3;
}
.jf-hero .jf-shirt.s2,
.jf-hero .jf-shirt.s3 {
	width: 40%;
	opacity: 1;
	z-index: 1;
}
.jf-hero .jf-shirt.s2 {
	left: 3%;
	top: 24%;
	transform: rotate(-9deg);
}
.jf-hero .jf-shirt.s3 {
	right: 3%;
	top: 20%;
	transform: rotate(9deg);
}
.jf-hero .jf-chip {
	z-index: 4;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.jf-hero .jf-chip.c1 {
	left: 6%;
	bottom: 4%;
}
.jf-hero .jf-chip.c2 {
	right: 4%;
	top: 2%;
}
@media (max-width: 1024px) {
	.jf-hero .jf-hero-grid {
		padding-block: 2rem 2.25rem;
	}
	.jf-hero .jf-hero-media {
		min-height: 320px;
	}
	.jf-hero .jf-shirt.s1 {
		width: 50%;
		left: 25%;
	}
	.jf-hero .jf-shirt.s2,
	.jf-hero .jf-shirt.s3 {
		width: 36%;
	}
}
@media (max-width: 600px) {
	.jf-hero .jf-hero-media {
		min-height: 260px;
	}
	.jf-hero .jf-shirt {
		border-radius: 16px;
	}
	.jf-hero .jf-chip.c1 {
		bottom: 0;
	}
}
/* Home hero: light background version. */
.jf-hero {
	color: #111827;
	background:
		radial-gradient(ellipse at 82% 30%, rgba(164, 0, 0, .10) 0, transparent 55%),
		radial-gradient(ellipse at 10% 90%, rgba(164, 0, 0, .05) 0, transparent 50%),
		repeating-linear-gradient(115deg, rgba(164, 0, 0, .025) 0 2px, transparent 2px 26px),
		linear-gradient(160deg, #ffffff 0%, #fdf4f3 55%, #fbe9e7 100%);
	border-bottom: 1px solid #f1e3e1;
}
.jf-hero h1 {
	color: #111827;
}
.jf-hero h1 em {
	color: var(--brand, #a40000);
}
.jf-hero p {
	color: #4b5563;
}
.jf-hero .jf-kicker {
	color: var(--brand, #a40000);
	background: rgba(164, 0, 0, .07);
	border-color: rgba(164, 0, 0, .18);
}
.jf-hero .jf-kicker i {
	color: var(--brand, #a40000);
}
.jf-hero a.btn.btn-accent {
	--_bg: var(--brand, #a40000);
	--_bd: var(--brand, #a40000);
	--_fg: #fff;
	color: #fff;
	background: var(--brand, #a40000);
	border-color: var(--brand, #a40000);
	box-shadow: 0 10px 24px rgba(164, 0, 0, .22);
}
.jf-hero a.btn.btn-accent:hover {
	--_bg: #8a0000;
	--_bd: #8a0000;
	background: #8a0000;
	border-color: #8a0000;
	color: #fff;
}
.jf-hero a.btn.btn-accent i {
	color: inherit;
}
.jf-hero .jf-btn-ghost {
	--_bg: #fff;
	--_fg: #111827;
	--_bd: #d1d5db;
	color: #111827;
	background: #fff;
	border-color: #d1d5db;
}
.jf-hero .jf-btn-ghost:hover {
	--_bg: #fff;
	--_fg: var(--brand, #a40000);
	--_bd: var(--brand, #a40000);
	color: var(--brand, #a40000);
	border-color: var(--brand, #a40000);
}
.jf-hero .jf-shirt {
	box-shadow: 0 24px 50px -14px rgba(120, 20, 20, .28), 0 0 0 1px rgba(17, 24, 39, .06);
}
.jf-hero .jf-chip {
	box-shadow: 0 8px 22px rgba(17, 24, 39, .12);
	border: 1px solid #f1e3e1;
}
/* Home ticker: keep it scrolling even when the device asks for reduced motion
 * (the theme turns all animation off in that case). Slow, and pauses on hover.
 * In the `reset` layer: an earlier layer's !important beats the theme's `base` layer rule. */
@layer reset {
	.jf-ticker .jf-ticker-track {
		animation-name: jf-marquee !important;
		animation-duration: 40s !important;
		animation-timing-function: linear !important;
		animation-iteration-count: infinite !important;
		animation-play-state: running;
	}
	.jf-ticker:hover .jf-ticker-track {
		animation-play-state: paused !important;
	}
}
/* ==================================================================
 * Mobile header: search behind an icon, logo centred.
 * ================================================================== */
.site-header .jf-search-toggle {
	display: none;
}
@media (max-width: 992px) {
	.site-header .jf-search-toggle {
		display: inline-flex;
	}
	:is([data-header="gradient"], [data-header="dark"], [data-header="brandbar"], [data-header="brandtop"]) .site-header .header-left .jf-search-toggle,
	:is([data-header="gradient"], [data-header="dark"], [data-header="brandbar"], [data-header="brandtop"]) .site-header .header-left .jf-search-toggle i {
		color: #fff !important;
	}
	.site-header .header-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: .5rem;
	}
	.site-header .header-main > .header-left {
		display: flex;
		justify-self: start;
		grid-column: 1;
	}
	.site-header .header-main > .site-branding {
		grid-column: 2;
		justify-self: center;
		justify-content: center;
	}
	.site-header .header-main > .header-actions {
		grid-column: 3;
		justify-self: end;
		margin: 0;
	}
	.site-header .header-main > .header-search {
		display: none;
	}
	.site-header .site-branding .custom-logo {
		width: auto;
		height: auto;
		max-width: 170px;
		max-height: 64px;
	}
	.site-header .mobile-search {
		display: none;
	}
	.site-header.jf-msearch-open .mobile-search {
		display: block;
		animation: jf-search-in .2s ease-out;
	}
}
@media (max-width: 380px) {
	.site-header .site-branding .custom-logo {
		max-width: 140px;
	}
}
@keyframes jf-search-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* ==================================================================
 * Section headings: line up with the content below (drop Elementor's default 10px container padding).
 * ================================================================== */
.elementor .e-con.xc-section-head,
.elementor .e-con.xc-head-text {
	--padding-left: 0px;
	--padding-right: 0px;
	padding-left: 0;
	padding-right: 0;
}

/* ==================================================================
 * Team order / consultation box (.consult)
 * ================================================================== */
.consult {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	padding: 0;
	align-items: stretch;
	overflow: hidden;
	background: #fff;
	border: 1px solid #efe4e2;
	border-radius: 24px;
	box-shadow: 0 30px 60px -30px rgba(120, 20, 20, .25);
}
.consult > div:first-child {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	color: #fff;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, .12) 0, transparent 50%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 24px),
		linear-gradient(150deg, #b30000 0%, #7a0000 60%, #4d0000 100%);
}
.consult > div:first-child .eyebrow {
	display: inline-flex;
	align-self: flex-start;
	padding: .35rem .8rem;
	border-radius: 999px;
	font-size: .72rem;
	letter-spacing: .12em;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
}
.consult > div:first-child h2 {
	margin: 1rem 0 0;
	font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem);
	line-height: 1.1;
	color: #fff;
}
.consult > div:first-child p {
	margin: .9rem 0 1.5rem;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}
.consult .check-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.consult .check-list li {
	position: relative;
	margin: 0;
	padding: .75rem .85rem .75rem 2.6rem;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
}
.consult .check-list li::before {
	content: "\f00c";
	font: var(--fa-font-solid);
	font-size: .7rem;
	position: absolute;
	left: .8rem;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	color: #a40000;
	background: #fff;
}
.consult .consult-form {
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	border-radius: 0;
	box-shadow: none;
	background: #fff;
}
.consult .consult-form::before {
	content: "Request a free quote";
	display: block;
	margin-bottom: .3rem;
	font-size: 1.3rem;
	font-weight: 800;
	color: #111827;
}
.consult .consult-form::after {
	content: "";
	display: none;
}
.consult .consult-form .wpcf7 {
	margin-top: 1.1rem;
}
.consult .consult-form form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}
.consult .consult-form form > * {
	grid-column: 1 / -1;
}
.consult .consult-form form > p:nth-of-type(-n+4) {
	grid-column: auto;
}
.consult .consult-form form > p {
	margin: 0 0 1rem;
}
.consult .consult-form form > fieldset.hidden-fields-container {
	display: none;
}
.consult .consult-form label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: #374151;
}
.consult .consult-form label br {
	display: none;
}
.consult .consult-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: .4rem;
}
.consult .consult-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: .65rem .85rem;
	font: inherit;
	font-size: .92rem;
	color: #111827;
	background: #f8f8f9;
	border: 1px solid #e3e5e8;
	border-radius: 10px;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.consult .consult-form textarea {
	min-height: 96px;
	height: 96px;
	resize: vertical;
}
.consult .consult-form :is(input, select, textarea):focus {
	outline: none;
	background: #fff;
	border-color: #a40000;
	box-shadow: 0 0 0 3px rgba(164, 0, 0, .12);
}
.consult .consult-form .wpcf7-submit {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: #a40000;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 22px rgba(164, 0, 0, .22);
	cursor: pointer;
	transition: background-color .2s, transform .15s;
}
.consult .consult-form .wpcf7-submit:hover {
	background: #8a0000;
	transform: translateY(-1px);
}
.consult .consult-form form > p:last-of-type {
	margin-bottom: 0;
}
.consult .consult-form > small {
	display: block;
	margin-top: .9rem;
	text-align: center;
	font-size: .8rem;
}
@media (max-width: 900px) {
	.consult {
		grid-template-columns: 1fr;
		padding: 0;
		border-radius: 18px;
	}
}
@media (max-width: 520px) {
	.consult .check-list,
	.consult .consult-form form {
		grid-template-columns: 1fr;
	}
}
/* Mobile header: menu + search icons hover like the cart / wishlist icons. */
:is([data-header="gradient"], [data-header="dark"], [data-header="brandbar"], [data-header="brandtop"]) .site-header .header-left :is(.menu-toggle, .jf-search-toggle) {
	border-radius: 10px;
	transition: background-color .2s;
}
:is([data-header="gradient"], [data-header="dark"], [data-header="brandbar"], [data-header="brandtop"]) .site-header .header-left :is(.menu-toggle, .jf-search-toggle):is(:hover, :focus-visible) {
	--_bg: rgba(255, 255, 255, .14);
	--_bd: transparent;
	--_fg: #fff;
	background: rgba(255, 255, 255, .14) !important;
	border-color: transparent !important;
	color: #fff !important;
}
:is([data-header="gradient"], [data-header="dark"], [data-header="brandbar"], [data-header="brandtop"]) .site-header .header-left :is(.menu-toggle, .jf-search-toggle):is(:hover, :focus-visible) i {
	color: #fff !important;
}