/**
 * Young Baby — Fashion storefront (yb-sf)
 * Scoped under body.yb-sf-skin — CCC-aligned tokens + components.
 *
 * 换主色：优先用 WP 后台 Appearance → Storefront Colors（option 注入覆盖）。
 * 文件内「THEME SWITCH」三行为未设置时的默认酒红系。
 */

/* -------------------------------------------------------------------------
   Design tokens (THEME SWITCH = brand / accent / surface)
   ------------------------------------------------------------------------- */
body.yb-sf-skin {
	/* ===== THEME SWITCH — change these to rebrand ===== */
	--yb-sf-brand: #82213e;       /* CCC ink rgb(130,33,62) — text / headings / icons on solid */
	--yb-sf-accent: #e9c9cc;      /* soft blush — announce / button border / soft fills */
	--yb-sf-surface: #fffaf1;     /* cream page + header solid hover */

	/* Derived — do not edit unless you need a one-off override */
	--yb-sf-brand-dark: color-mix(in srgb, var(--yb-sf-brand) 78%, #000000);
	--yb-sf-brand-light: color-mix(in srgb, var(--yb-sf-brand) 18%, #ffffff);
	--yb-sf-ink: var(--yb-sf-brand);
	--yb-sf-ink-rgb: 130, 33, 62;
	--yb-sf-muted: color-mix(in srgb, var(--yb-sf-brand) 42%, #9a9590);
	--yb-sf-line: color-mix(in srgb, var(--yb-sf-accent) 55%, #ffffff);
	--yb-sf-soft: color-mix(in srgb, var(--yb-sf-accent) 28%, var(--yb-sf-surface));
	--yb-sf-bg: var(--yb-sf-surface);
	--yb-sf-bar: var(--yb-sf-surface);
	--yb-sf-header-solid: var(--yb-sf-surface);
	--yb-sf-announce-bg: var(--yb-sf-accent);
	--yb-sf-announce-ink: var(--yb-sf-brand);
	--yb-sf-btn-border: var(--yb-sf-accent);
	--yb-sf-btn-bg: transparent;
	--yb-sf-btn-fg: var(--yb-sf-brand);
	--yb-sf-btn-bg-hover: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface));
	--yb-sf-overlay: rgba(0, 0, 0, 0.45);
	--yb-sf-on-media: #ffffff;
	--yb-sf-nav-bg: color-mix(in srgb, var(--yb-sf-accent) 45%, var(--yb-sf-surface));
	--yb-sf-nav-ink: var(--yb-sf-brand);
	--yb-sf-cart-bg: color-mix(in srgb, var(--yb-sf-surface) 88%, var(--yb-sf-accent));
	--yb-sf-cart-panel: var(--yb-sf-surface);
	--yb-sf-cart-ink: var(--yb-sf-brand);
	--yb-sf-cart-muted: var(--yb-sf-muted);
	--yb-sf-cart-line: var(--yb-sf-line);
	--yb-sf-cart-accent: var(--yb-sf-accent);

	/* Bridge Porto / Bootstrap / WCP → one brand (cart steps, account OTP, etc.) */
	--porto-primary-color: var(--yb-sf-brand);
	--porto-primary-color-inverse: #ffffff;
	--porto-primary-dark-5: var(--yb-sf-brand-dark);
	--porto-primary-dark-10: var(--yb-sf-brand-dark);
	--porto-primary-light-5: var(--yb-sf-accent);
	--porto-primary-light-10: var(--yb-sf-brand-light);
	--porto-heading-color: var(--yb-sf-ink);
	--bs-primary: var(--yb-sf-brand);
	--wcp-primary: var(--yb-sf-brand);
	--wcp-primary-dark: var(--yb-sf-brand-dark);
	--wcp-primary-light: var(--yb-sf-accent);
	--wcp-text: var(--yb-sf-ink);
	--wcp-text-light: var(--yb-sf-muted);
	--wcp-bg: var(--yb-sf-surface);
	--wcp-border: var(--yb-sf-line);
	--wcp-radius: 0;
	--wcp-radius-sm: 0;

	/* Live Self-Checkout (/lsc/...) */
	--lsc-primary: var(--yb-sf-brand);
	--lsc-primary-dark: var(--yb-sf-brand-dark);
	--lsc-primary-light: var(--yb-sf-accent);
	--lsc-surface: var(--yb-sf-surface);
	--lsc-text: var(--yb-sf-ink);
	--lsc-border: var(--yb-sf-line);
	--lsc-card-radius: var(--yb-sf-card-radius, 10px);
	--lsc-radius: var(--yb-sf-card-radius, 10px);
	--lsc-radius-sm: 8px;
	--lsc-radius-xs: 6px;
	--lsc-register-gradient: linear-gradient(135deg, var(--yb-sf-brand) 0%, var(--yb-sf-brand-dark) 100%);
	--lsc-login-gradient: linear-gradient(135deg, var(--yb-sf-accent) 0%, var(--yb-sf-brand) 100%);

	/* Live Boost Sales — "Others also bought" */
	--lbs-primary-color: var(--yb-sf-brand);
	--lbs-text-color: var(--yb-sf-ink);
	--lbs-text-muted: var(--yb-sf-muted);
	--lbs-border-color: var(--yb-sf-line);
	--lbs-bg-color: var(--yb-sf-surface);
	--lbs-radius: var(--yb-sf-radius);

	/* Typography (CCC: DM Sans + DM Serif Display) */
	--yb-sf-font-body: "DM Sans", sans-serif;
	--yb-sf-font-heading: "DM Serif Display", serif;
	--yb-sf-text-xs: 0.75rem;     /* 12 */
	--yb-sf-text-sm: 0.8125rem;   /* 13 — buttons */
	--yb-sf-text-base: 0.875rem;  /* 14 */
	--yb-sf-text-lg: 1rem;
	--yb-sf-heading-ls: 0.03em;
	--yb-sf-button-ls: 0.04em;
	--yb-sf-radius: 0;
	/* Product cards only — soft radius; CCC buttons stay square via --yb-sf-radius */
	--yb-sf-card-radius: 10px;
	--yb-sf-icon-stroke: 1.5px;

	/* Layout chrome */
	--yb-sf-announce-h: 64px;
	--yb-sf-header-h: 100px;
	--yb-sf-header-h-md: 188px;
	--yb-sf-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--yb-sf-z-header: 10050;
	--yb-sf-z-drawer: 100160;
	--yb-sf-z-search: 100170;
	--yb-sf-chrome-h: calc(var(--yb-sf-announce-h) + var(--yb-sf-header-h));

	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-base);
	font-weight: 400;
	color: var(--yb-sf-ink);
	background-color: var(--yb-sf-bg);
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
	body.yb-sf-skin {
		--yb-sf-header-h: var(--yb-sf-header-h-md);
		--yb-sf-announce-h: 40px;
	}
}

/* No announce bar (theme off + MSM off) — collapse chrome offset */
body.yb-sf-skin.yb-sf-no-announce {
	--yb-sf-announce-h: 0px;
}

/* -------------------------------------------------------------------------
   Global type + CCC outline buttons (site-wide under skin)
   ------------------------------------------------------------------------- */
body.yb-sf-skin h1,
body.yb-sf-skin h2,
body.yb-sf-skin h3,
body.yb-sf-skin h4,
body.yb-sf-skin h5,
body.yb-sf-skin h6,
body.yb-sf-skin .yb-sf-heading {
	font-family: var(--yb-sf-font-heading);
	font-weight: 400;
	color: var(--yb-sf-ink);
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	line-height: 1.25;
}

body.yb-sf-skin a {
	color: var(--yb-sf-ink);
}

/* Header chrome links/icons follow header color (white on media / brand on solid) */
body.yb-sf-skin .yb-sf-header a,
body.yb-sf-skin .yb-sf-header button {
	color: inherit;
}

body.yb-sf-skin #main,
body.yb-sf-skin .main-content,
body.yb-sf-skin .page-wrapper,
body.yb-sf-skin .yb-sf-home {
	background-color: var(--yb-sf-bg);
	color: var(--yb-sf-ink);
	font-family: var(--yb-sf-font-body);
}

/* CCC button: transparent + accent border + brand text, radius 0, uppercase */
body.yb-sf-skin .yb-sf-btn,
body.yb-sf-skin .button,
body.yb-sf-skin button.button,
body.yb-sf-skin a.button,
body.yb-sf-skin .woocommerce a.button,
body.yb-sf-skin .woocommerce button.button,
body.yb-sf-skin .woocommerce input.button,
body.yb-sf-skin .woocommerce #respond input#submit,
body.yb-sf-skin .single_add_to_cart_button,
body.yb-sf-skin .checkout-button,
body.yb-sf-skin .yb-sf-spotlight__cta,
body.yb-sf-skin .yb-sf-rail__view-all.yb-sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 28px;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1.65 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.2s var(--yb-sf-ease), border-color 0.2s var(--yb-sf-ease), color 0.2s var(--yb-sf-ease);
}

body.yb-sf-skin .yb-sf-btn:hover,
body.yb-sf-skin .button:hover,
body.yb-sf-skin button.button:hover,
body.yb-sf-skin a.button:hover,
body.yb-sf-skin .woocommerce a.button:hover,
body.yb-sf-skin .woocommerce button.button:hover,
body.yb-sf-skin .single_add_to_cart_button:hover,
body.yb-sf-skin .checkout-button:hover,
body.yb-sf-skin .yb-sf-spotlight__cta:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
	opacity: 1;
}

body.yb-sf-skin .yb-sf-btn--text {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	font-size: var(--yb-sf-text-sm);
	color: var(--yb-sf-muted) !important;
}

/* -------------------------------------------------------------------------
   Hide Porto header visually (keep DOM for compatibility)
   ------------------------------------------------------------------------- */
body.yb-sf-skin .header-wrapper {
	display: none !important;
}

/* Kill WP admin bar residual if anything leaks through */
body.yb-sf-skin #wpadminbar {
	display: none !important;
}
body.yb-sf-skin.admin-bar {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Chrome is in document flow (CCC: announcement + header are NOT sticky) */
body.yb-sf-skin:not(.yb-sf-front),
body.yb-sf-front {
	padding-top: 0 !important;
}

/* Kill Porto main-content top padding under announce */
body.yb-sf-front .main-content,
body.yb-sf-front #main .main-content,
body.yb-sf-front .main-content.col-lg-12 {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   Announcement bar (in-flow, scrolls away — CCC pattern)
   Legacy #yb-sf-announce kept for fallback when mystickymenu is off.
   ------------------------------------------------------------------------- */
.yb-sf-announce {
	position: relative;
	z-index: 2;
	height: var(--yb-sf-announce-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 8px;
	background: var(--yb-sf-announce-bg);
	color: var(--yb-sf-announce-ink);
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-xs);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	box-sizing: border-box;
}

.yb-sf-announce__viewport {
	flex: 1;
	max-width: 720px;
	overflow: hidden;
	min-height: 1.3em;
}

.yb-sf-announce__track {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yb-sf-announce__item {
	display: none;
	margin: 0;
	line-height: 1.35;
}

.yb-sf-announce__item.is-active {
	display: block;
}

.yb-sf-announce__btn {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.yb-sf-announce__btn:hover {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   My Sticky Bar (mystickymenu) — CCC tokens, in-flow, below drawers
   ------------------------------------------------------------------------- */
body.yb-sf-skin .mysticky-welcomebar-fixed,
body.yb-sf-skin .mysticky-welcomebar-fixed.mysticky-site-front {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 2 !important;
	opacity: 1 !important;
	display: block !important;
	height: var(--yb-sf-announce-h) !important;
	min-height: var(--yb-sf-announce-h) !important;
	max-height: var(--yb-sf-announce-h) !important;
	background-color: var(--yb-sf-announce-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-announce-ink) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-xs) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	overflow: hidden;
	box-sizing: border-box;
}

body.yb-sf-skin .mysticky-welcomebar-fixed-wrap {
	min-height: 0 !important;
	height: 100% !important;
	padding: 0 12px !important;
	border-radius: 0 !important;
	gap: 0;
}

body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-content,
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-content p,
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-content p a {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--yb-sf-announce-ink) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-xs) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	text-align: center !important;
	border-radius: 0 !important;
}

body.yb-sf-skin .yb-sf-msm-announce {
	position: relative;
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 0 auto !important;
}

body.yb-sf-skin .yb-sf-msm-announce__item {
	display: none;
	line-height: 1.35;
}

body.yb-sf-skin .yb-sf-msm-announce__item.is-active {
	display: block;
}

/* Hide plugin CTA / close / lead UI — CCC announce is text-only */
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-btn,
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-close,
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-lead-content,
body.yb-sf-skin .mysticky-welcomebar-fixed .mysticky-welcomebar-thankyou-content {
	display: none !important;
}

/* Kill plugin body padding / admin-bar z fights when bar is in-flow */
body.yb-sf-skin.mysticky-welcomebar-apper,
body.yb-sf-skin.mysticky-welcomebar-apper.admin-bar {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   Header — not sticky (scrolls away). Homepage: absolute over hero.
   Thick band (100 mobile / 188 desktop) matches CCC so the whole chrome
   is a hover/tap target for transparent → solid background.
   ------------------------------------------------------------------------- */
.yb-sf-header {
	position: relative;
	z-index: 3;
	height: var(--yb-sf-header-h);
	box-sizing: border-box;
	padding: 16px 14px;
	background: var(--yb-sf-bar);
	border-bottom: 1px solid var(--yb-sf-line);
	color: var(--yb-sf-ink);
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
	/* Entire band receives hover/tap (CCC) — do NOT pointer-events:none */
	pointer-events: auto;
	/* Desk dropdowns extend below the fixed-height band */
	overflow: visible;
}

@media (min-width: 768px) {
	.yb-sf-header {
		padding: 26px 48px;
	}
}

.yb-sf-header a,
.yb-sf-header button {
	pointer-events: auto;
}

/* Front: overlay hero (out of flow so page-wrapper starts under announce) */
body.yb-sf-front .yb-sf-header {
	position: absolute;
	top: var(--yb-sf-announce-h);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 5;
}

body.yb-sf-front .yb-sf-header:not(.is-solid) {
	/* Transparent over hero — ink icons (no top scrim / white-on-media) */
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	color: var(--yb-sf-ink);
}

body.yb-sf-front .yb-sf-header:not(.is-solid) .yb-sf-header__logo img {
	filter: none;
}

body.yb-sf-front .yb-sf-header:not(.is-solid) .yb-sf-header__btn,
body.yb-sf-front .yb-sf-header:not(.is-solid) .yb-sf-header__account-label {
	filter: none;
}

body.yb-sf-front .yb-sf-header.is-solid,
body.yb-sf-skin:not(.yb-sf-front) .yb-sf-header {
	/* Solid cream — no frosted/translucent “fog” */
	background: var(--yb-sf-header-solid);
	border-bottom-color: var(--yb-sf-line);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	color: var(--yb-sf-ink);
}

body.yb-sf-front .yb-sf-header.is-solid .yb-sf-header__logo img,
body.yb-sf-front .yb-sf-header.is-solid .yb-sf-header__btn,
body.yb-sf-front .yb-sf-header.is-solid .yb-sf-header__account-label {
	filter: none;
}

/* CCC: hovering anywhere on the thick header band → solid cream bg */
body.yb-sf-front .yb-sf-header:hover {
	background: var(--yb-sf-header-solid);
	border-bottom-color: var(--yb-sf-line);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	color: var(--yb-sf-ink);
}

body.yb-sf-front .yb-sf-header:hover .yb-sf-header__logo img,
body.yb-sf-front .yb-sf-header:hover .yb-sf-header__btn,
body.yb-sf-front .yb-sf-header:hover .yb-sf-header__account-label {
	filter: none;
}

/* Mobile: hamburger | centered logo | utilities (CCC mobile) */
.yb-sf-header__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	gap: 8px;
	position: relative;
	overflow: visible;
}

.yb-sf-header__brand {
	display: flex;
	align-items: center;
	z-index: 3;
	justify-self: start;
	min-width: 0;
}

.yb-sf-desk-nav {
	display: none;
}

.yb-sf-header__logo {
	/* Mobile: absolute center like before */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	line-height: 0;
	max-width: min(240px, 52vw);
	z-index: 2;
}

.yb-sf-header__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	z-index: 3;
	justify-self: end;
	grid-column: 2;
}

/* Compact utils: mobile = search + cart (CCC); desk also keeps account */
.yb-sf-header__utils {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
}

/* Same Young Baby artwork — size fills CCC-tall header band */
.yb-sf-header__logo img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
}

/* Desktop: CCC — logo left | wrapping primary nav | utilities right */
@media (min-width: 992px) {
	.yb-sf-header__inner {
		grid-template-columns: 220px minmax(0, 1fr) auto;
		gap: 24px;
		align-items: center;
	}

	.yb-sf-header__menu-btn {
		display: none !important;
	}

	.yb-sf-header__logo {
		position: static;
		transform: none;
		max-width: 200px;
		margin: 0;
	}

	.yb-sf-header__logo img {
		height: auto;
		max-height: 120px;
		width: 100%;
		max-width: 200px;
		margin: 0;
	}

	.yb-sf-header__right {
		grid-column: auto;
		gap: 2px;
	}

	.yb-sf-desk-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 88px;
		z-index: 2;
		/* Dropdowns must escape the fixed-height header band */
		overflow: visible;
	}

	.yb-sf-desk-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px 20px;
		list-style: none;
		margin: 0;
		padding: 0;
		max-width: 900px;
		row-gap: 12px;
		overflow: visible;
	}

	.yb-sf-desk-nav__list > li {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.yb-sf-desk-nav__list > li > a {
		display: inline-block;
		padding: 2px 0;
		font-family: var(--yb-sf-font-body);
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		color: inherit;
		line-height: 1.35;
		white-space: nowrap;
	}

	.yb-sf-desk-nav__list > li > a:hover,
	.yb-sf-desk-nav__list > li > a:focus-visible {
		opacity: 0.72;
		outline: none;
	}

	/* Level-2 dropdown under top items */
	.yb-sf-desk-nav__sub {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		min-width: 200px;
		margin: 6px 0 0;
		padding: 10px 0;
		list-style: none;
		background: var(--yb-sf-surface);
		border: 1px solid var(--yb-sf-line);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
		z-index: 40;
		text-align: left;
	}

	.yb-sf-desk-nav__item.has-children:hover > .yb-sf-desk-nav__sub,
	.yb-sf-desk-nav__item.has-children:focus-within > .yb-sf-desk-nav__sub {
		display: block;
	}

	.yb-sf-desk-nav__item.has-children:hover > a,
	.yb-sf-desk-nav__item.has-children:focus-within > a {
		opacity: 0.72;
	}

	.yb-sf-desk-nav__sub > li {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.yb-sf-desk-nav__sub > li > a {
		display: block;
		padding: 8px 18px;
		font-family: var(--yb-sf-font-body);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--yb-sf-ink);
		line-height: 1.35;
		white-space: nowrap;
	}

	.yb-sf-desk-nav__sub > li > a:hover,
	.yb-sf-desk-nav__sub > li > a:focus-visible {
		background: color-mix(in srgb, var(--yb-sf-accent) 28%, var(--yb-sf-surface));
		outline: none;
	}

	/* Level-3+ flyout to the right */
	.yb-sf-desk-nav__sub .yb-sf-desk-nav__sub {
		top: 0;
		left: 100%;
		transform: none;
		margin: 0 0 0 0;
		min-width: 190px;
	}

	/* Keep open flyouts above siblings when nested */
	.yb-sf-desk-nav__sub > .yb-sf-desk-nav__item.has-children:hover,
	.yb-sf-desk-nav__sub > .yb-sf-desk-nav__item.has-children:focus-within {
		z-index: 2;
	}
}

.yb-sf-header__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Mobile: dense 36px cluster (search + cart) */
	width: 36px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.yb-sf-header__btn {
		width: 48px;
		height: 48px;
	}
}

@media (min-width: 992px) {
	.yb-sf-header__btn {
		width: 52px;
		height: 52px;
	}
}

.yb-sf-header__btn:hover,
.yb-sf-header__btn:focus-visible {
	opacity: 0.7;
	outline: none;
}

/* Account icon: desktop only. Mobile login lives in nav drawer (CCC). */
.yb-sf-header__account-btn {
	display: none;
	width: 36px;
	min-width: 36px;
	padding: 0;
	gap: 0;
}

.yb-sf-header__account-btn .yb-sf-icon--user {
	display: block;
}

.yb-sf-header__account-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (min-width: 768px) {
	.yb-sf-header__account-btn {
		width: 48px;
		min-width: 48px;
	}
}

@media (min-width: 992px) {
	.yb-sf-header__account-btn {
		display: inline-flex;
		width: 52px;
		min-width: 52px;
	}

	.yb-sf-header__right {
		gap: 2px;
	}

	.yb-sf-header__utils {
		gap: 2px;
	}
}

/* Cart badge */
.yb-sf-cart-count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--yb-sf-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}

.yb-sf-cart-count.is-empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Icons (CSS-drawn, no font dependency)
   ------------------------------------------------------------------------- */
.yb-sf-icon {
	display: block;
	width: 22px;
	height: 22px;
	position: relative;
}

.yb-sf-icon--hamburger span {
	position: absolute;
	left: 2px;
	right: 2px;
	height: var(--yb-sf-icon-stroke);
	background: currentColor;
	border-radius: 1px;
}

.yb-sf-icon--hamburger span:nth-child(1) { top: 5px; }
.yb-sf-icon--hamburger span:nth-child(2) { top: 10.5px; }
.yb-sf-icon--hamburger span:nth-child(3) { top: 16px; }

.yb-sf-icon--search::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border: var(--yb-sf-icon-stroke) solid currentColor;
	border-radius: 50%;
}

.yb-sf-icon--search::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 1.5px;
	background: currentColor;
	bottom: 4px;
	right: 2px;
	transform: rotate(45deg);
	border-radius: 1px;
}

.yb-sf-icon--user::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border: var(--yb-sf-icon-stroke) solid currentColor;
	border-radius: 50%;
}

.yb-sf-icon--user::after {
	content: "";
	position: absolute;
	bottom: 1px;
	left: 50%;
	width: 14px;
	height: 8px;
	margin-left: -7px;
	border: var(--yb-sf-icon-stroke) solid currentColor;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

.yb-sf-icon--cart::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 3px;
	right: 3px;
	bottom: 2px;
	border: var(--yb-sf-icon-stroke) solid currentColor;
	border-radius: 2px 2px 3px 3px;
}

.yb-sf-icon--cart::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	right: 6px;
	height: 5px;
	border: var(--yb-sf-icon-stroke) solid currentColor;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
}

.yb-sf-icon--close::before,
.yb-sf-icon--close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	right: 3px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}

.yb-sf-icon--close::before { transform: rotate(45deg); }
.yb-sf-icon--close::after { transform: rotate(-45deg); }

/* -------------------------------------------------------------------------
   Left nav drawer
   ------------------------------------------------------------------------- */
.yb-sf-nav {
	position: fixed;
	inset: 0;
	z-index: var(--yb-sf-z-drawer);
	pointer-events: none;
	visibility: hidden;
}

.yb-sf-nav.is-open {
	pointer-events: auto;
	visibility: visible;
}

.yb-sf-nav[hidden] {
	display: block !important; /* allow transitions; visibility handled above */
	visibility: hidden;
	pointer-events: none;
}

.yb-sf-nav.is-open[hidden] {
	visibility: visible;
	pointer-events: auto;
}

body.yb-sf-skin .yb-sf-nav__panel {
	top: 0;
}

.yb-sf-nav__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--yb-sf-overlay);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.28s var(--yb-sf-ease);
}

.yb-sf-nav.is-open .yb-sf-nav__backdrop {
	opacity: 1;
}

.yb-sf-nav__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
	/* Leave ~32px peek on the right edge */
	width: calc(100vw - 32px);
	max-width: calc(100vw - 32px);
	background: var(--yb-sf-nav-bg);
	color: var(--yb-sf-nav-ink);
	font-family: var(--yb-sf-font-body);
	transform: translateX(-100%);
	transition: transform 0.32s var(--yb-sf-ease);
	display: flex;
	flex-direction: column;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.yb-sf-nav.is-open .yb-sf-nav__panel {
	transform: translateX(0);
}

.yb-sf-nav__head {
	display: grid;
	grid-template-columns: 1fr 44px;
	align-items: center;
	height: 56px;
	padding: 0 8px 0 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 12%, transparent);
	flex-shrink: 0;
	background: var(--yb-sf-nav-bg);
	position: relative;
	z-index: 2;
}

.yb-sf-nav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	padding: 8px 4px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	justify-self: start;
	grid-column: 1;
}

.yb-sf-nav__back[hidden] {
	visibility: hidden;
	pointer-events: none;
}

.yb-sf-nav__back-icon {
	display: block;
	width: 8px;
	height: 8px;
	border-left: var(--yb-sf-icon-stroke) solid currentColor;
	border-bottom: var(--yb-sf-icon-stroke) solid currentColor;
	transform: rotate(45deg);
}

.yb-sf-nav__back-text {
	letter-spacing: 0.14em;
}

.yb-sf-nav__title {
	justify-self: start;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: inherit;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	grid-column: 1;
	padding-left: 4px;
}

/* Root: show MENU title; drilled: hide title (Back carries parent name) */
.yb-sf-nav.is-drilled .yb-sf-nav__title {
	display: none;
}

.yb-sf-nav:not(.is-drilled) .yb-sf-nav__back {
	display: none;
}

.yb-sf-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	justify-self: end;
	grid-column: 2;
	grid-row: 1;
}

.yb-sf-nav__body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}

.yb-sf-nav__viewport {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.yb-sf-nav__track {
	display: flex;
	height: 100%;
	width: 100%;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.yb-sf-nav__pane {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0 16px;
	box-sizing: border-box;
}

/* Nested source menus stay in DOM for cloning but hidden in root pane */
.yb-sf-nav__pane .yb-sf-nav__sub {
	display: none !important;
}

/* Bottom account zone — root layer only (CCC: cream, wine, uppercase, square) */
.yb-sf-nav__account {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin: 0;
	padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 14%, transparent);
	background: var(--yb-sf-nav-bg);
	position: relative;
	z-index: 1;
	/* Never clip greeting / link stack at short viewports */
	overflow: visible;
	min-height: 0;
}

/* Logged-in: greeting (muted) + vertical link stack with breathing room */
.yb-sf-nav__account.is-logged-in {
	gap: 14px;
	padding-top: 18px;
}

/* Hide account zone when drilled into a submenu (second+ layer) */
.yb-sf-nav.is-drilled .yb-sf-nav__account {
	display: none;
}

/* Greeting: small, muted, natural case (zh 「你好，Jack」 must not look uppercase-tracked) */
.yb-sf-nav__greeting {
	margin: 0;
	padding: 0;
	font-family: var(--yb-sf-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: color-mix(in srgb, var(--yb-sf-nav-ink) 52%, transparent);
	line-height: 1.4;
}

.yb-sf-nav__account-links {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
}

.yb-sf-nav__account.is-logged-in .yb-sf-nav__account-links {
	gap: 2px;
}

.yb-sf-nav__account-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: 42px;
	padding: 10px 16px;
	border: 1px solid var(--yb-sf-btn-border);
	border-radius: 0;
	background: transparent;
	color: var(--yb-sf-nav-ink);
	font-family: var(--yb-sf-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background 0.2s var(--yb-sf-ease), border-color 0.2s var(--yb-sf-ease);
}

.yb-sf-nav__account-cta:hover,
.yb-sf-nav__account-cta:focus-visible {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface));
	border-color: var(--yb-sf-nav-ink);
	outline: none;
}

.yb-sf-nav__account-link {
	display: block;
	padding: 11px 0;
	font-family: var(--yb-sf-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--yb-sf-nav-ink);
	line-height: 1.35;
	border-bottom: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 10%, transparent);
	opacity: 1;
	visibility: visible;
}

.yb-sf-nav__account-links .yb-sf-nav__account-link:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}

.yb-sf-nav__account-link:hover,
.yb-sf-nav__account-link:focus-visible {
	opacity: 0.72;
	outline: none;
}

.yb-sf-nav__account-link--logout {
	color: color-mix(in srgb, var(--yb-sf-nav-ink) 68%, transparent);
	font-weight: 400;
}

/* Contact us + WhatsApp pill (root account zone; replaces floating FAB on SF) */
.yb-sf-nav__contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 42px;
	padding: 4px 0;
	margin: 2px 0 0;
	text-decoration: none;
	color: var(--yb-sf-nav-ink);
	border-top: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 10%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 10%, transparent);
	transition: opacity 0.2s var(--yb-sf-ease);
}

.yb-sf-nav__contact:hover,
.yb-sf-nav__contact:focus-visible {
	opacity: 0.78;
	outline: none;
}

.yb-sf-nav__contact-label {
	font-family: var(--yb-sf-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.35;
}

.yb-sf-nav__wa {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 1px 3px color-mix(in srgb, #128c7e 28%, transparent);
}

.yb-sf-nav__wa-icon {
	display: block;
}

html[lang^="zh"] .yb-sf-nav__contact-label {
	letter-spacing: 0.06em;
}

/* Root-layer language chips (Login / My orders 同层，非 drill) */
.yb-sf-nav__lang {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
}

.yb-sf-nav__lang-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 6px;
	border: 1px solid color-mix(in srgb, var(--yb-sf-nav-ink) 22%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--yb-sf-nav-ink);
	font-family: var(--yb-sf-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s var(--yb-sf-ease), border-color 0.2s var(--yb-sf-ease), color 0.2s var(--yb-sf-ease);
	-webkit-appearance: none;
	appearance: none;
}

.yb-sf-nav__lang-btn:hover,
.yb-sf-nav__lang-btn:focus-visible {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface));
	border-color: var(--yb-sf-nav-ink);
	outline: none;
}

.yb-sf-nav__lang-btn.is-active {
	background: color-mix(in srgb, var(--yb-sf-accent) 42%, var(--yb-sf-surface));
	border-color: var(--yb-sf-nav-ink);
	font-weight: 600;
	cursor: default;
}

/* CJK: lighter tracking so 「我的订单」 stays compact and readable */
html[lang^="zh"] .yb-sf-nav__greeting {
	letter-spacing: 0.01em;
}

html[lang^="zh"] .yb-sf-nav__account-link,
html[lang^="zh"] .yb-sf-nav__account-cta,
html[lang^="zh"] .yb-sf-nav__lang-btn {
	letter-spacing: 0.06em;
}

.yb-sf-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yb-sf-nav__item {
	border-bottom: 1px solid var(--yb-sf-line);
}

.yb-sf-nav__item:last-child {
	border-bottom: 0;
}

.yb-sf-nav__item--viewall .yb-sf-nav__link {
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--yb-sf-muted);
}

.yb-sf-nav__link,
.yb-sf-nav__drill-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 14px 20px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	line-height: 1.7;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
	font-family: inherit;
}

.yb-sf-nav__link:hover,
.yb-sf-nav__link:focus-visible,
.yb-sf-nav__drill-btn:hover,
.yb-sf-nav__drill-btn:focus-visible {
	opacity: 0.7;
	outline: none;
}

.yb-sf-nav__link--hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.yb-sf-nav__drill-label {
	flex: 1;
}

.yb-sf-nav__chevron {
	display: block;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: var(--yb-sf-icon-stroke) solid currentColor;
	border-bottom: var(--yb-sf-icon-stroke) solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.55;
}

/* -------------------------------------------------------------------------
   Search overlay
   ------------------------------------------------------------------------- */
.yb-sf-search {
	position: fixed;
	inset: 0;
	z-index: var(--yb-sf-z-search);
	pointer-events: none;
	visibility: hidden;
}

.yb-sf-search.is-open {
	pointer-events: auto;
	visibility: visible;
}

.yb-sf-search[hidden] {
	display: block !important;
	visibility: hidden;
	pointer-events: none;
}

.yb-sf-search.is-open[hidden] {
	visibility: visible;
	pointer-events: auto;
}

.yb-sf-search__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--yb-sf-overlay);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.28s var(--yb-sf-ease);
}

.yb-sf-search.is-open .yb-sf-search__backdrop {
	opacity: 1;
}

.yb-sf-search__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--yb-sf-surface);
	padding: 16px 16px 20px;
	transform: translateY(-12px);
	opacity: 0;
	transition: transform 0.28s var(--yb-sf-ease), opacity 0.28s var(--yb-sf-ease);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	font-family: var(--yb-sf-font-body);
	color: var(--yb-sf-ink);
}

body.yb-sf-skin .yb-sf-search__panel {
	top: 0;
}

.yb-sf-search.is-open .yb-sf-search__panel {
	transform: translateY(0);
	opacity: 1;
}

.yb-sf-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--yb-sf-ink);
	padding-bottom: 10px;
}

.yb-sf-search__form > .yb-sf-icon--search {
	flex-shrink: 0;
	opacity: 0.55;
}

.yb-sf-search__input {
	flex: 1;
	border: 0;
	outline: none;
	font-size: 18px;
	line-height: 1.4;
	padding: 8px 0;
	background: transparent;
	color: var(--yb-sf-ink);
	min-width: 0;
}

.yb-sf-search__input::placeholder {
	color: #aaa;
}

.yb-sf-search__submit {
	border: 0;
	background: transparent;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--yb-sf-ink);
	padding: 8px 4px;
	flex-shrink: 0;
}

.yb-sf-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	color: inherit;
}

.yb-sf-search__hint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--yb-sf-muted);
}

.yb-sf-search__hint a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Body scroll lock
   ------------------------------------------------------------------------- */
body.yb-sf-skin.yb-sf-lock-scroll {
	overflow: hidden;
	touch-action: none;
}

/* LSC sticky pay bar / pending notice sit below SF chrome; hide when overlays open */
body.yb-sf-skin .lsc-sticky-footer,
body.yb-sf-skin .lsc-pn-wrap {
	z-index: 10040 !important; /* below --yb-sf-z-header 10050 / drawer 100160 */
}

body.yb-sf-skin.yb-sf-lock-scroll .lsc-sticky-footer,
body.yb-sf-skin.yb-sf-lock-scroll .lsc-pn-wrap,
body.yb-sf-skin.yb-sf-cart-open .lsc-sticky-footer,
body.yb-sf-skin.yb-sf-cart-open .lsc-pn-wrap {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(12px) !important;
}

/* -------------------------------------------------------------------------
   Class hooks for future homepage / cart skin work
   ------------------------------------------------------------------------- */
body.yb-sf-skin.home .yb-sf-home-hook,
body.yb-sf-skin.woocommerce-cart .yb-sf-cart-hook {
	/* reserved */
}

/* =========================================================================
   Homepage modules (ticker / hero / rails / spotlight / brand / USP)
   ========================================================================= */

.yb-sf-home {
	color: var(--yb-sf-ink);
	background: var(--yb-sf-bg);
	overflow-x: hidden;
	font-family: var(--yb-sf-font-body);
}

.yb-sf-home a {
	color: inherit;
	text-decoration: none;
}

.yb-sf-home a:hover {
	opacity: 0.72;
}

/* --- Ticker --- */
.yb-sf-ticker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 12px;
	background: rgba(255, 252, 250, 0.55);
	border-bottom: 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* On front: old in-page ticker removed — announcement is in chrome */
body.yb-sf-front .yb-sf-home > .yb-sf-ticker,
body.yb-sf-front-elementor .yb-sf-ticker {
	display: none !important;
}

.yb-sf-ticker__viewport {
	flex: 1;
	max-width: 720px;
	overflow: hidden;
	min-height: 1.4em;
	position: relative;
}

.yb-sf-ticker__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.yb-sf-ticker__item {
	display: none;
	margin: 0;
	line-height: 1.4;
	color: var(--yb-sf-muted);
}

.yb-sf-ticker__item.is-active {
	display: block;
}

.yb-sf-ticker__btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--yb-sf-ink);
	opacity: 0.55;
}

.yb-sf-ticker__btn:hover {
	opacity: 1;
}

/* --- Hero --- */
.yb-sf-hero {
	position: relative;
	width: 100%;
	background: #eee;
	margin: 0;
}

/* Front header is absolute — hero starts under announce; no negative margin
   (was clipped by .page-wrapper overflow:hidden). */
body.yb-sf-front .yb-sf-home > .yb-sf-hero,
body.yb-sf-front-elementor .yb-sf-hero {
	margin-top: 0;
}

/* Elementor homepage: strip builder chrome so SF sections stay full-bleed. */
body.yb-sf-front-elementor .yb-sf-home > .elementor {
	max-width: none;
}
body.yb-sf-front-elementor .yb-sf-home .elementor-section.yb-sf-el-section,
body.yb-sf-front-elementor .yb-sf-home .elementor-top-section {
	padding: 0 !important;
}
body.yb-sf-front-elementor .yb-sf-home .elementor-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.yb-sf-front-elementor .yb-sf-home .elementor-widget-shortcode,
body.yb-sf-front-elementor .yb-sf-home .elementor-widget-container {
	margin: 0;
	padding: 0;
}
body.yb-sf-front-elementor .yb-sf-home .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
body.yb-sf-front-elementor .yb-sf-home .elementor-column > .elementor-element-populated {
	padding: 0 !important;
}

/* Vertical stack: H1 → H2 → H3 (no carousel overlay) */
.yb-sf-hero--stack .yb-sf-hero__track {
	position: relative;
	display: block;
	width: 100%;
}

.yb-sf-hero--stack .yb-sf-hero__slide {
	display: block;
	width: 100%;
	margin: 0;
}

.yb-sf-hero__link {
	display: block;
	line-height: 0;
}

/*
 * Hero: CCC-style full-bleed — native art ratio, no forced crop box.
 * Bug was aspect-ratio + max-height: width stayed 100% while height capped,
 * so boxes became ~2.2:1 and object-fit:cover sliced the banners.
 * Match each slide / breakpoint to the actual master on disk.
 */
.yb-sf-hero__slide img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: fill;
	object-position: center center;
	/* H1 single master 1536×1024 ≈ 3:2 (also default for non-picture slides) */
	aspect-ratio: 1536 / 1024;
}

/* H2 Cottoli: mobile 576×1024; desktop 1024×682 via <picture> */
.yb-sf-hero__slide--cottoli img {
	aspect-ratio: 576 / 1024;
}

/* H3 Cozy: mobile 768×1024 (3:4); desktop 1024×768 (4:3) via <picture> */
.yb-sf-hero__slide--cozy img {
	aspect-ratio: 768 / 1024;
}

@media (min-width: 768px) {
	.yb-sf-hero__slide--cottoli img {
		aspect-ratio: 1024 / 682;
	}

	.yb-sf-hero__slide--cozy img {
		aspect-ratio: 1024 / 768;
	}
}

/* Legacy carousel chrome — unused in stack mode */
.yb-sf-hero__nav,
.yb-sf-hero__dots {
	display: none !important;
}

/* --- Product rails --- */
.yb-sf-rail {
	padding: 36px 0 12px;
	max-width: 1400px;
	margin: 0 auto;
}

.yb-sf-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0 16px 16px;
}

@media (min-width: 768px) {
	.yb-sf-rail__head {
		padding: 0 24px 20px;
	}
}

.yb-sf-rail__title {
	margin: 0;
	font-family: var(--yb-sf-font-heading);
	font-size: clamp(1.25rem, 2.8vw, 1.75rem);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--yb-sf-ink);
}

.yb-sf-rail__view-all {
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-sm);
	font-weight: 400;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	color: var(--yb-sf-muted);
	white-space: nowrap;
}

.yb-sf-rail__wrap {
	position: relative;
}

.yb-sf-rail__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 20px 20px;
	outline: none;
}

.yb-sf-rail__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.yb-sf-rail__track {
		gap: 16px;
		padding: 0 24px 28px;
	}
}

.yb-sf-rail__nav {
	display: none;
	position: absolute;
	top: 32%;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--yb-sf-surface) 95%, transparent);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--yb-sf-ink);
}

.yb-sf-rail__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.yb-sf-rail__nav--prev { left: 8px; }
.yb-sf-rail__nav--next { right: 8px; }

@media (min-width: 768px) {
	.yb-sf-rail__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- Product card --- */
/* CCC mobile card ~227px on 390 viewport */
.yb-sf-card {
	flex: 0 0 227px;
	width: 227px;
	scroll-snap-align: start;
	min-width: 0;
}

@media (min-width: 768px) {
	.yb-sf-card {
		flex: 0 0 calc(25% - 12px);
		width: auto;
	}
}

.yb-sf-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--yb-sf-soft);
	border-radius: var(--yb-sf-card-radius, 10px);
}

.yb-sf-card__img,
.yb-sf-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.yb-sf-card__soldout {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

.yb-sf-card__body {
	padding: 10px 2px 0;
}

.yb-sf-card__title {
	display: block;
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-base);
	font-weight: 400;
	line-height: 1.35;
	margin: 0 0 4px;
	color: var(--yb-sf-ink);
}

.yb-sf-card__price {
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-base);
	font-weight: 400;
	color: var(--yb-sf-ink);
}

.yb-sf-card__price del {
	opacity: 0.45;
	margin-right: 6px;
}

.yb-sf-card__colors {
	margin-top: 4px;
	font-size: 12px;
	color: var(--yb-sf-muted);
}

/* --- Spotlight --- */
.yb-sf-spotlight {
	padding: 40px 16px;
	background: var(--yb-sf-soft);
	border-top: 1px solid var(--yb-sf-line);
	border-bottom: 1px solid var(--yb-sf-line);
}

@media (min-width: 768px) {
	.yb-sf-spotlight {
		padding: 56px 24px;
	}
}

.yb-sf-spotlight__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.yb-sf-spotlight__eyebrow {
	margin: 0 0 20px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yb-sf-muted);
	text-align: center;
}

.yb-sf-spotlight__grid {
	display: grid;
	gap: 24px;
	width: 100%;
	min-width: 0;
}

@media (min-width: 900px) {
	.yb-sf-spotlight__grid {
		/* minmax(0,…) prevents 3:4 AI assets from blowing out the track */
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: center;
		gap: 40px;
	}
}

.yb-sf-spotlight__gallery {
	min-width: 0;
	max-width: 100%;
}

.yb-sf-spotlight__main {
	position: relative;
	/* Cap by width so max-height never flattens the 3:4 box */
	width: min(100%, 420px, calc(min(68vh, 520px) * 3 / 4));
	margin-inline: auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #ddd;
}

@media (min-width: 900px) {
	.yb-sf-spotlight__main {
		width: min(100%, 480px, calc(min(70vh, 560px) * 3 / 4));
		margin-inline: 0;
	}
}

.yb-sf-spotlight__main img,
.yb-sf-spotlight__img {
	/* Absolute so intrinsic 1024×1536 never sizes the grid column */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.yb-sf-spotlight__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
}

.yb-sf-spotlight__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 80px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.yb-sf-spotlight__thumb.is-active {
	border-color: var(--yb-sf-ink);
}

.yb-sf-spotlight__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yb-sf-spotlight__info {
	text-align: center;
}

@media (min-width: 900px) {
	.yb-sf-spotlight__info {
		text-align: left;
	}
}

.yb-sf-spotlight__name {
	margin: 0 0 10px;
	font-family: var(--yb-sf-font-heading);
	font-size: clamp(1.25rem, 3vw, 2rem);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--yb-sf-ink);
}

.yb-sf-spotlight__price {
	margin: 0 0 18px;
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-base);
	color: var(--yb-sf-ink);
}

.yb-sf-spotlight__cta {
	/* inherits global outline button; keep min width */
	min-width: 160px;
}

.yb-sf-spotlight__cta:hover {
	opacity: 1;
}

/* --- Brand story --- */
.yb-sf-brand {
	padding: 0;
}

.yb-sf-brand__inner {
	display: grid;
}

@media (min-width: 900px) {
	.yb-sf-brand__inner {
		grid-template-columns: 1.2fr 0.8fr;
		min-height: 480px;
	}
}

.yb-sf-brand__media {
	margin: 0;
	line-height: 0;
	background: #ddd;
}

.yb-sf-brand__media img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	display: block;
}

.yb-sf-brand__copy {
	padding: 36px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--yb-sf-surface);
}

@media (min-width: 900px) {
	.yb-sf-brand__copy {
		padding: 48px 40px;
	}
}

.yb-sf-brand__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yb-sf-muted);
}

.yb-sf-brand__title {
	margin: 0 0 14px;
	font-family: var(--yb-sf-font-heading);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink);
}

.yb-sf-brand__text {
	margin: 0 0 18px;
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-base);
	line-height: 1.6;
	color: var(--yb-sf-muted);
	max-width: 36em;
}

.yb-sf-brand__hours {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.yb-sf-brand__hours-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yb-sf-muted);
	margin-bottom: 4px;
}

/* --- USP strip --- */
.yb-sf-usp {
	border-top: 1px solid var(--yb-sf-accent);
	border-bottom: 1px solid var(--yb-sf-accent);
	padding: 28px 16px 40px;
	background: var(--yb-sf-surface);
}

.yb-sf-usp__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
}

@media (min-width: 900px) {
	.yb-sf-usp__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}

.yb-sf-usp__item {
	text-align: center;
}

.yb-sf-usp__title {
	display: block;
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-xs);
	font-weight: 400;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--yb-sf-brand);
}

.yb-sf-usp__sub {
	display: block;
	font-size: 13px;
	color: var(--yb-sf-muted);
	line-height: 1.4;
}

/* =========================================================================
   SF Cart Drawer (right slide-in)
   Admin bar is hidden on storefront; do not offset chrome for it.
   ========================================================================= */

body.yb-sf-skin {
	--yb-sf-z-cart: 100180;
}

.yb-sf-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--yb-sf-z-cart, 10090);
	pointer-events: none;
	visibility: hidden;
}

.yb-sf-cart-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.yb-sf-cart-drawer[hidden] {
	display: block !important;
	visibility: hidden;
	pointer-events: none;
}

.yb-sf-cart-drawer.is-open[hidden] {
	visibility: visible;
	pointer-events: auto;
}

.yb-sf-cart-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(28, 22, 18, 0.42);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.32s var(--yb-sf-ease, ease);
}

.yb-sf-cart-drawer.is-open .yb-sf-cart-overlay {
	opacity: 1;
}

.yb-sf-cart-panel {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	bottom: 0;
	/* Match storefront: mobile leaves ~32px peek on the left (390→31px measured) */
	width: min(420px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	background:
		radial-gradient(120% 60% at 100% 0%, rgba(201, 123, 132, 0.08), transparent 55%),
		linear-gradient(180deg, #faf6f2 0%, #f7f2ec 40%, #f3eee8 100%);
	color: var(--yb-sf-cart-ink);
	box-shadow: -18px 0 48px rgba(28, 22, 18, 0.18);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
}

@media (max-width: 767px) {
	.yb-sf-cart-panel {
		width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
	}
}

.yb-sf-cart-drawer.is-open .yb-sf-cart-panel {
	transform: translateX(0);
}

.yb-sf-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 16px;
	border-bottom: 1px solid var(--yb-sf-cart-line);
	flex-shrink: 0;
	background: rgba(255, 252, 250, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.yb-sf-cart-title {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--yb-sf-cart-ink);
}

.yb-sf-cart-close {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(42, 36, 32, 0.05);
	cursor: pointer;
	color: var(--yb-sf-cart-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.yb-sf-cart-close:hover,
.yb-sf-cart-close:focus-visible {
	background: rgba(42, 36, 32, 0.1);
	outline: none;
}

.yb-sf-cart-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

@keyframes yb-sf-cart-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Empty-shell placeholder (before first AJAX / while body cleared) */
.yb-sf-cart-loading {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(52vh, 320px);
	width: 100%;
	pointer-events: none;
}

.yb-sf-cart-loading::before {
	content: '';
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--yb-sf-brand, #82213e) 22%, transparent);
	border-top-color: var(--yb-sf-brand, #82213e);
	animation: yb-sf-cart-spin 0.65s linear infinite;
}

/* AJAX overlay + brand spinner (open / qty update) */
.yb-sf-cart-body.is-loading::before,
.yb-sf-cart-drawer.is-loading .yb-sf-cart-body::before,
.yb-sf-cart-drawer.is-updating .yb-sf-cart-body::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--yb-sf-brand, #82213e) 22%, transparent);
	border-top-color: var(--yb-sf-brand, #82213e);
	animation: yb-sf-cart-spin 0.65s linear infinite;
	z-index: 3;
	pointer-events: none;
}

.yb-sf-cart-body.is-loading .yb-sf-cart-loading::before {
	/* Parent ::before owns the spinner while is-loading */
	visibility: hidden;
}

.yb-sf-cart-body.is-loading::after,
.yb-sf-cart-drawer.is-loading .yb-sf-cart-body::after,
.yb-sf-cart-drawer.is-updating .yb-sf-cart-body::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(250, 246, 242, 0.82);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	pointer-events: auto;
	z-index: 2;
}

.yb-sf-cart-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.yb-sf-cart-scroll {
	flex: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.yb-sf-cart-empty {
	flex: 1;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 28px 64px;
	text-align: center;
	box-sizing: border-box;
	background:
		radial-gradient(circle at 50% 38%, rgba(201, 123, 132, 0.12), transparent 55%);
}

.yb-sf-cart-body > .yb-sf-cart-empty {
	min-height: calc(100vh - 72px);
}

.yb-sf-cart-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--yb-sf-cart-line);
	color: var(--yb-sf-cart-accent);
	box-shadow: 0 10px 28px rgba(201, 123, 132, 0.12);
}

.yb-sf-cart-empty-msg {
	margin: 0 0 22px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--yb-sf-cart-ink);
}

.yb-sf-cart-continue {
	display: inline-block;
	padding: 13px 28px;
	border: 1px solid var(--yb-sf-cart-ink);
	color: var(--yb-sf-cart-ink);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
}

.yb-sf-cart-continue:hover,
.yb-sf-cart-continue:focus-visible {
	background: var(--yb-sf-cart-ink);
	color: #fff;
	outline: none;
}

.yb-sf-cart-items {
	list-style: none;
	margin: 0;
	padding: 8px 0 12px;
}

.yb-sf-cart-item {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--yb-sf-cart-line);
}

.yb-sf-cart-thumb {
	background: #fff;
	border: 1px solid var(--yb-sf-cart-line);
	overflow: hidden;
}

.yb-sf-cart-thumb img,
.yb-sf-cart-thumb-img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
}

.yb-sf-cart-item-name {
	font-size: 13px;
	line-height: 1.45;
	margin-bottom: 10px;
	letter-spacing: 0.01em;
}

.yb-sf-cart-item-name a {
	color: inherit;
	text-decoration: none;
}

.yb-sf-cart-item-name a:hover {
	color: var(--yb-sf-cart-accent);
}

.yb-sf-cart-item-info .variation,
.yb-sf-cart-item-info dl {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--yb-sf-cart-muted);
}

.yb-sf-cart-item-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.yb-sf-cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--yb-sf-cart-line);
	background: var(--yb-sf-surface);
	border-radius: var(--yb-sf-radius);
	overflow: hidden;
}

.yb-sf-qty-btn {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: inherit;
}

.yb-sf-qty-btn:hover {
	background: rgba(42, 36, 32, 0.04);
}

.yb-sf-qty-input {
	width: 36px;
	height: 34px;
	border: 0;
	border-left: 1px solid var(--yb-sf-cart-line);
	border-right: 1px solid var(--yb-sf-cart-line);
	text-align: center;
	font-size: 13px;
	background: transparent;
	color: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}

.yb-sf-qty-input::-webkit-outer-spin-button,
.yb-sf-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.yb-sf-cart-line-total {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.yb-sf-cart-remove {
	margin-top: 10px;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yb-sf-cart-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	cursor: pointer;
}

.yb-sf-cart-remove:hover {
	color: var(--yb-sf-cart-ink);
	border-bottom-color: currentColor;
}

.yb-sf-cart-footer {
	flex-shrink: 0;
	padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--yb-sf-cart-line);
	background: rgba(255, 252, 250, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -10px 28px rgba(28, 22, 18, 0.06);
}

.yb-sf-cart-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.yb-sf-cart-subtotal strong {
	font-size: 16px;
	font-weight: 600;
}

.yb-sf-cart-note {
	margin: 0 0 16px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--yb-sf-cart-muted);
}

.yb-sf-cart-checkout {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px 28px;
	box-sizing: border-box;
	background: var(--yb-sf-btn-bg) !important;
	color: var(--yb-sf-btn-fg) !important;
	text-decoration: none;
	font-family: var(--yb-sf-font-body);
	font-size: var(--yb-sf-text-sm);
	font-weight: 400;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius);
	transition: background 0.2s var(--yb-sf-ease), border-color 0.2s var(--yb-sf-ease);
}

.yb-sf-cart-checkout:hover,
.yb-sf-cart-checkout:focus-visible {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
	outline: none;
}

body.yb-sf-skin.yb-sf-cart-open,
body.yb-sf-skin.yb-sf-lock-scroll {
	overflow: hidden;
	touch-action: none;
}

/* -------------------------------------------------------------------------
   Front page: break out of Porto .container / .container-fluid for full-bleed
   (prod may use #main.wide + container-fluid; test uses #main.boxed + container)
   ------------------------------------------------------------------------- */
body.yb-sf-front #main > .container,
body.yb-sf-front #main > .container-fluid {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.yb-sf-front #main > .container > .row.main-content-wrap,
body.yb-sf-front #main > .container-fluid > .row.main-content-wrap {
	margin-left: 0;
	margin-right: 0;
}

body.yb-sf-front #main .main-content {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
	float: none;
	width: 100%;
}

body.yb-sf-front #main.boxed,
body.yb-sf-front #main.wide {
	max-width: none;
}

/* Elementor stretch often applies negative margins against container padding —
   neutralize so hero stack matches viewport width on mobile. */
body.yb-sf-front .elementor-section.porto-full-no-gap,
body.yb-sf-front .elementor-section.yb-sf-el-section {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	left: 0 !important;
	max-width: 100% !important;
}

/* -------------------------------------------------------------------------
   Cart drawer: real WooCommerce /cart/ markup inside panel
   ------------------------------------------------------------------------- */
.yb-sf-cart-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.yb-sf-cart-wc {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100%;
}

.yb-sf-cart-scroll--wc {
	flex: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 14px 16px;
}

.yb-sf-cart-wc .woocommerce-cart-form,
.yb-sf-cart-wc table.woocommerce-cart-form__contents,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents thead,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) thead {
	display: none;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td,
.yb-sf-cart-wc table.woocommerce-cart-form__contents th,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) th {
	border: 0 !important;
	padding: 12px 4px !important;
	background: transparent !important;
	vertical-align: top;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents tr.cart_item,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) tr.cart_item {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 8px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--yb-sf-cart-line, rgba(42,36,32,.1));
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-remove,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-remove {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	padding: 0 !important;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-thumbnail,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-thumbnail {
	grid-column: 1;
	grid-row: 1 / span 4;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-thumbnail img,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-thumbnail img {
	width: 88px;
	height: 110px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--yb-sf-cart-line, rgba(42,36,32,.1));
	background: #fff;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-name,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-name {
	grid-column: 2;
	font-size: 13px;
	line-height: 1.4;
	padding-right: 28px !important;
}

.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-price,
.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-quantity,
.yb-sf-cart-wc table.woocommerce-cart-form__contents td.product-subtotal,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-price,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-quantity,
.yb-sf-cart-wc table.shop_table.cart:not(.cart-total) td.product-subtotal {
	grid-column: 2;
	font-size: 13px;
}

.yb-sf-cart-wc .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	overflow: hidden;
	background: var(--yb-sf-surface) !important;
}

.yb-sf-cart-wc .quantity .qty {
	width: 42px;
	border: 0 !important;
	text-align: center;
	background: transparent !important;
	height: 34px;
	color: var(--yb-sf-ink) !important;
	box-shadow: none !important;
}

.yb-sf-cart-wc .quantity .plus,
.yb-sf-cart-wc .quantity .minus,
.yb-sf-cart-wc .quantity button.plus,
.yb-sf-cart-wc .quantity button.minus {
	width: 34px !important;
	height: 34px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.yb-sf-cart-wc .actions,
.yb-sf-cart-wc .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--yb-sf-cart-line, rgba(42,36,32,.1));
}

.yb-sf-cart-wc .coupon input.input-text {
	flex: 1;
	min-width: 120px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-surface) !important;
	color: var(--yb-sf-ink) !important;
	box-shadow: none !important;
}

/* Update cart / Apply coupon — Porto uses btn btn-default, not only .button */
.yb-sf-cart-wc .button,
.yb-sf-cart-wc button.button,
.yb-sf-cart-wc input.button,
.yb-sf-cart-wc .btn,
.yb-sf-cart-wc button.btn,
.yb-sf-cart-wc .btn-default,
.yb-sf-cart-wc button[name="update_cart"],
.yb-sf-cart-wc button[name="apply_coupon"],
.yb-sf-cart-wc input[name="update_cart"],
.yb-sf-cart-wc input[name="apply_coupon"] {
	height: 40px !important;
	padding: 0 16px !important;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
}

.yb-sf-cart-wc .button:hover,
.yb-sf-cart-wc button.button:hover,
.yb-sf-cart-wc .btn:hover,
.yb-sf-cart-wc .btn-default:hover,
.yb-sf-cart-wc button[name="update_cart"]:hover,
.yb-sf-cart-wc button[name="apply_coupon"]:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

.yb-sf-cart-wc .cart-collaterals,
.yb-sf-cart-wc .cart_totals,
.yb-sf-cart-wc .cart_totals_toggle,
.yb-sf-cart-wc .yb-shipping-ui,
.yb-sf-cart-wc .woocommerce-shipping-totals,
.yb-sf-cart-wc table.cart-total {
	display: none !important;
}

.yb-sf-cart-wc .cart_totals h2 {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 10px;
}

/* Keep cart-total as a real table (do not inherit item grid rules) */
.yb-sf-cart-wc table.shop_table.cart-total,
.yb-sf-cart-wc table.cart-total {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse;
	background: transparent !important;
	display: table !important;
}

.yb-sf-cart-wc table.cart-total tbody {
	display: table-row-group !important;
}

.yb-sf-cart-wc table.cart-total tr {
	display: table-row !important;
	float: none !important;
	width: auto !important;
}

.yb-sf-cart-wc table.cart-total th,
.yb-sf-cart-wc table.cart-total td {
	display: table-cell !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	border: 0 !important;
	padding: 10px 0 !important;
	background: transparent !important;
	font-size: 13px;
	vertical-align: top;
	text-align: left !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

.yb-sf-cart-wc table.cart-total th::before,
.yb-sf-cart-wc table.cart-total td::before {
	content: none !important;
	display: none !important;
}

.yb-sf-cart-wc table.cart-total tr.cart-subtotal,
.yb-sf-cart-wc table.cart-total tr.order-total {
	border-bottom: 1px solid var(--yb-sf-cart-line, rgba(42,36,32,.1));
}

.yb-sf-cart-wc table.cart-total tr.woocommerce-shipping-totals td {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.yb-sf-cart-wc .yb-shipping-ui {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.yb-sf-cart-wc .yb-intent-cards {
	gap: 8px;
	margin-bottom: 24px;
}

.yb-sf-cart-wc .yb-ship-root {
	margin: 0 0 4px;
}

.yb-sf-cart-wc .yb-ship-root-dot {
	width: 8px;
	height: 8px;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yb-sf-brand, #82213e) 18%, transparent);
}

.yb-sf-cart-wc .yb-intent-card {
	padding: 12px 8px;
	border-radius: 12px;
	min-width: 0;
}

.yb-sf-cart-wc .yb-intent-icon {
	font-size: 22px;
}

.yb-sf-cart-wc .yb-intent-label {
	font-size: 14px;
}

.yb-sf-cart-wc .yb-intent-sub {
	font-size: 11px;
}

.yb-sf-cart-wc .yb-ship-option {
	padding: 12px;
	border-radius: 10px;
	gap: 10px;
}

.yb-sf-cart-wc .yb-ship-option-name {
	font-size: 13px;
	line-height: 1.35;
	word-break: break-word;
}

.yb-sf-cart-wc .yb-ship-option-price {
	font-size: 12px;
	white-space: nowrap;
}

.yb-sf-cart-wc .yb-ship-option-desc {
	font-size: 11px;
}

.yb-sf-cart-wc .wc-proceed-to-checkout {
	display: none; /* sticky footer checkout used instead */
}

.yb-sf-cart-footer--sticky {
	margin-top: auto;
}

.yb-sf-cart-wc .cart-item-stock-status {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
}

.yb-sf-cart-wc .cart-item-stock-status.out-of-stock {
	color: var(--yb-sf-brand, #82213e);
}

/* Low-stock thumbnail badge — soft accent + brand ink (cart page + drawer) */
.yb-sf-cart-wc td.product-thumbnail,
.yb-sf-cart-wc td.product-thumbnail a,
body.yb-sf-skin .shop_table.cart td.product-thumbnail,
body.yb-sf-skin .shop_table.cart td.product-thumbnail a {
	position: relative;
}

.yb-sf-cart-wc .stock-low-overlay,
body.yb-sf-skin .shop_table.cart .stock-low-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	margin: 0;
	padding: 10px 3px 3px;
	background: linear-gradient(transparent, color-mix(in srgb, var(--yb-sf-brand) 22%, transparent));
	color: var(--yb-sf-brand);
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	border-radius: 0;
	pointer-events: none !important;
	z-index: 1;
}

.yb-sf-cart-wc td.product-thumbnail > a.porto-cart-thumb-lightbox,
body.yb-sf-skin .shop_table.cart td.product-thumbnail > a.porto-cart-thumb-lightbox {
	cursor: zoom-in;
}

.yb-sf-cart-wc .stock-low-overlay span,
body.yb-sf-skin .shop_table.cart .stock-low-overlay span {
	display: inline-block;
	background: var(--yb-sf-accent);
	color: var(--yb-sf-brand);
	padding: 2px 6px;
	border-radius: var(--yb-sf-radius);
	white-space: nowrap;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

/* Keep third-party FABs under SF drawers */
body.yb-sf-lock-scroll .wa__btn_popup,
body.yb-sf-lock-scroll .wa__popup_chat_box,
body.yb-sf-cart-open .wa__btn_popup,
body.yb-sf-cart-open .wa__popup_chat_box {
	z-index: 1 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/*
 * SF skin: Menu 「Contact us」 replaces the NinjaTeam floating WhatsApp FAB
 * (avoids stacking with lang / sticky FABs). Re-enable by removing this block
 * or turning the widget back on via plugin Display Settings alone is not enough
 * while this CSS is present.
 */
body.yb-sf-skin #wa,
body.yb-sf-skin .wa__btn_popup,
body.yb-sf-skin .wa__popup_chat_box {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Site-wide Woo / Porto skin (inherits THEME SWITCH tokens)
   ------------------------------------------------------------------------- */
body.yb-sf-skin,
body.yb-sf-skin button,
body.yb-sf-skin input,
body.yb-sf-skin select,
body.yb-sf-skin textarea {
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .product-summary .product_title,
body.yb-sf-skin .summary h1.product_title,
body.yb-sf-skin li.product-col h3,
body.yb-sf-skin .woocommerce-loop-product__title,
body.yb-sf-skin .entry-title,
body.yb-sf-skin .page-title,
body.yb-sf-skin .woocommerce-products-header__title {
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	color: var(--yb-sf-ink) !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
}

body.yb-sf-skin .price,
body.yb-sf-skin .woocommerce-Price-amount,
body.yb-sf-skin .amount {
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-body);
	font-weight: 400;
}

body.yb-sf-skin .woocommerce-breadcrumb,
body.yb-sf-skin .woocommerce-breadcrumb a {
	color: var(--yb-sf-muted) !important;
	font-size: var(--yb-sf-text-xs);
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
}

body.yb-sf-skin .footer-wrapper,
body.yb-sf-skin #footer,
body.yb-sf-skin .footer {
	background: var(--yb-sf-soft) !important;
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-body);
	border-top: 1px solid var(--yb-sf-line);
}

/*
 * Footer-top ribbon — Porto skin was #01abec; Simple Custom CSS forced #fff.
 * Align to brand token so Appearance → Storefront Colors updates it.
 * Empty #block-4 still reserved padding → collapse the strip.
 */
body.yb-sf-skin .footer-top {
	background-color: var(--yb-sf-brand, #82213e) !important;
	background-image: none !important;
	color: var(--yb-sf-on-media, #ffffff) !important;
	border-color: var(--yb-sf-brand-dark) !important;
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .footer-top a,
body.yb-sf-skin .footer-top a:not(.btn) {
	color: var(--yb-sf-on-media, #ffffff) !important;
}

body.yb-sf-skin .footer-top a:hover,
body.yb-sf-skin .footer-top a:focus {
	color: var(--yb-sf-accent, #e9c9cc) !important;
}

body.yb-sf-skin .footer-top .widget-title,
body.yb-sf-skin .footer-top .widgettitle,
body.yb-sf-skin .footer-top h1,
body.yb-sf-skin .footer-top h2,
body.yb-sf-skin .footer-top h3,
body.yb-sf-skin .footer-top h4,
body.yb-sf-skin .footer-top h5,
body.yb-sf-skin .footer-top h6 {
	color: var(--yb-sf-on-media, #ffffff) !important;
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
}

body.yb-sf-skin .footer-top .share-links a:not(:hover) {
	background: transparent !important;
	color: var(--yb-sf-on-media, #ffffff) !important;
}

/* Empty footer-top widget area (e.g. #block-4) — no orphan brand/padding bar */
body.yb-sf-skin .footer-top:has(.widget:empty):not(:has(.widget:not(:empty))),
body.yb-sf-skin .footer-top:has(#block-4:empty):not(:has(.widget:not(:empty))) {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}

/*
 * Align mobile footer with test-site Porto custom CSS:
 * hide widget columns on small screens (keep slim copyright strip).
 * Also hide Porto theme footer logo (logo_footer.png) which prod Theme Options still enable.
 */
@media only screen and (max-width: 767px) {
	body.yb-sf-skin .footer-main {
		display: none !important;
	}
}

body.yb-sf-skin .footer-bottom .logo,
body.yb-sf-skin .footer-bottom .logo img,
body.yb-sf-skin .footer-bottom a[title] img[src*="logo_footer"] {
	display: none !important;
}

/*
 * Prod Theme Options often keep Porto dark footer-bottom (#1c2023).
 * Force cream/transparent strip to match test site (and survive Options rollback).
 */
body.yb-sf-skin #footer .footer-bottom,
body.yb-sf-skin .footer .footer-bottom {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-top: 1px solid #e7e7e7;
	color: #777777;
}

body.yb-sf-skin .footer a {
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .footer h3,
body.yb-sf-skin .footer .widget-title {
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin input[type="text"],
body.yb-sf-skin input[type="email"],
body.yb-sf-skin input[type="search"],
body.yb-sf-skin input[type="tel"],
body.yb-sf-skin input[type="number"],
body.yb-sf-skin input[type="password"],
body.yb-sf-skin textarea,
body.yb-sf-skin select {
	border-color: var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-ink);
	background: var(--yb-sf-surface);
}

body.yb-sf-skin .yb-sf-nav a,
body.yb-sf-skin .yb-sf-nav__link,
body.yb-sf-skin .yb-sf-nav__item {
	font-family: var(--yb-sf-font-body);
	color: var(--yb-sf-nav-ink);
	letter-spacing: 0.02em;
}

body.yb-sf-skin .yb-sf-nav__title,
body.yb-sf-skin .yb-sf-nav__pane-title {
	font-family: var(--yb-sf-font-heading);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-nav-ink);
}

body.yb-sf-skin .yb-sf-cart-header,
body.yb-sf-skin .yb-sf-cart-title {
	font-family: var(--yb-sf-font-heading);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-cart-ink);
}

/* -------------------------------------------------------------------------
   Cart / Checkout / My Account — force brand through Porto + WCP leftovers
   ------------------------------------------------------------------------- */
body.yb-sf-skin .woo-page-header,
body.yb-sf-skin .page-header-8 {
	background: var(--yb-sf-accent) !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .woo-page-header .breadcrumb,
body.yb-sf-skin .woo-page-header .breadcrumb a {
	color: color-mix(in srgb, var(--yb-sf-brand) 55%, #ffffff) !important;
	font-family: var(--yb-sf-font-body);
	text-transform: uppercase;
	letter-spacing: var(--yb-sf-button-ls);
	font-size: var(--yb-sf-text-xs);
}

body.yb-sf-skin .woo-page-header .breadcrumb li.current,
body.yb-sf-skin .woo-page-header .breadcrumb li.current a,
body.yb-sf-skin .woo-page-header .breadcrumb a {
	/* active pill uses Porto primary → bridged to brand */
}

body.yb-sf-skin .woo-page-header .breadcrumb li.current > a,
body.yb-sf-skin .woo-page-header .breadcrumb > li.current {
	background-color: var(--yb-sf-brand) !important;
	color: #fff !important;
	border-radius: var(--yb-sf-radius);
}

body.yb-sf-skin .woo-page-header .breadcrumb li.current > a {
	color: #fff !important;
}

/* Return to shop / Woo notice buttons — CCC outline */
body.yb-sf-skin .woocommerce-cart .return-to-shop .button,
body.yb-sf-skin .woocommerce-cart .wc-backward,
body.yb-sf-skin .woocommerce-message .button,
body.yb-sf-skin .woocommerce-info .button,
body.yb-sf-skin .woocommerce-form-login__submit,
body.yb-sf-skin .woocommerce-form-register__submit {
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}

body.yb-sf-skin .woocommerce-cart .return-to-shop .button:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

/* Place Order — solid brand CTA (beats Porto .btn-v-dark / .button.alt ghost) */
body.yb-sf-skin #place_order,
body.yb-sf-skin .woocommerce #payment #place_order,
body.yb-sf-skin.woocommerce-checkout #payment #place_order.button.alt,
body.yb-sf-skin.woocommerce-checkout #payment #place_order.btn-v-dark {
	background: var(--yb-sf-brand, #82213e) !important;
	background-image: none !important;
	border: 1px solid var(--yb-sf-brand, #82213e) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	color: #ffffff !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--yb-sf-brand, #82213e) 28%, transparent) !important;
	min-height: 52px;
}

body.yb-sf-skin #place_order:hover,
body.yb-sf-skin .woocommerce #payment #place_order:hover,
body.yb-sf-skin.woocommerce-checkout #payment #place_order.button.alt:hover {
	background: var(--yb-sf-brand-dark, #5c1529) !important;
	border-color: var(--yb-sf-brand-dark, #5c1529) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--yb-sf-brand, #82213e) 36%, transparent) !important;
}

/* Passwordless login (My Account) — cream page + CCC outline CTA */
body.yb-sf-skin .wcp-auth-bg {
	background: var(--yb-sf-surface) !important;
}

body.yb-sf-skin .wcp-bg-overlay {
	background:
		radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--yb-sf-accent) 55%, transparent) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--yb-sf-brand) 12%, transparent) 0%, transparent 50%) !important;
}

body.yb-sf-skin .wcp-auth-card {
	border-radius: var(--yb-sf-radius);
	border: 1px solid var(--yb-sf-line);
	box-shadow: none;
	background: var(--yb-sf-surface);
}

body.yb-sf-skin .wcp-auth-header,
body.yb-sf-skin .wcp-card-header {
	background: var(--yb-sf-accent) !important;
	color: var(--yb-sf-ink) !important;
	border-radius: 0;
}

body.yb-sf-skin .wcp-auth-header h2,
body.yb-sf-skin .wcp-auth-header .wcp-title,
body.yb-sf-skin .wcp-card-header h2 {
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .wcp-btn-primary,
body.yb-sf-skin .wcp-submit-btn,
body.yb-sf-skin .wcp-check-email-btn,
body.yb-sf-skin button.wcp-btn-primary,
body.yb-sf-skin .wcp-auth-card button[type="submit"] {
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-btn-fg) !important;
	box-shadow: none !important;
	font-family: var(--yb-sf-font-body) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
}

body.yb-sf-skin .wcp-btn-primary:hover,
body.yb-sf-skin .wcp-check-email-btn:hover,
body.yb-sf-skin .wcp-auth-card button[type="submit"]:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .wcp-back-home,
body.yb-sf-skin a.wcp-back-home {
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: 999px !important;
	color: var(--yb-sf-ink) !important;
	background: var(--yb-sf-surface) !important;
}

body.yb-sf-skin .wcp-register-link,
body.yb-sf-skin .wcp-auth-card a {
	color: var(--yb-sf-brand) !important;
}

/* Language FAB — follow brand; bottom aligned with shared selector */
body.yb-sf-skin .yb-lang-toggle {
	bottom: 190px !important;
	background: var(--yb-sf-brand) !important;
	background-image: none !important;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--yb-sf-brand) 35%, transparent) !important;
}

/* My Account nav (logged-in) */
body.yb-sf-skin .woocommerce-MyAccount-navigation {
	background: var(--yb-sf-soft);
	border: 1px solid var(--yb-sf-line);
}

body.yb-sf-skin .woocommerce-MyAccount-navigation a {
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-body);
	letter-spacing: 0.02em;
}

body.yb-sf-skin .woocommerce-MyAccount-navigation .is-active a,
body.yb-sf-skin .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--yb-sf-brand) !important;
	font-weight: 500;
	border-color: var(--yb-sf-brand);
}

body.yb-sf-skin.woocommerce-account #main,
body.yb-sf-skin.woocommerce-checkout #main,
body.yb-sf-skin.woocommerce-cart #main {
	background: var(--yb-sf-bg);
	color: var(--yb-sf-ink);
}

/* -------------------------------------------------------------------------
   Live Self-Checkout (/lsc/...) — brand + CCC outline CTAs
   ------------------------------------------------------------------------- */
body.yb-sf-skin .lsc-gate-btn.primary,
body.yb-sf-skin .lsc-gate-btn.primary:hover,
body.yb-sf-skin a.lsc-gate-btn.primary {
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-btn-fg) !important;
	box-shadow: none !important;
	font-family: var(--yb-sf-font-body) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
}

body.yb-sf-skin .lsc-gate-btn.primary:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .lsc-gate-title {
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .lsc-otp-email-display,
body.yb-sf-skin .lsc-timer-value,
body.yb-sf-skin .lsc-link {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .lsc-gate-popup,
body.yb-sf-skin .lsc-gate-popup.glass-card {
	border-radius: var(--yb-sf-radius) !important;
	border: 1px solid var(--yb-sf-line);
	background: var(--yb-sf-surface) !important;
	box-shadow: none !important;
}

body.yb-sf-skin .lsc-gate-popup .lsc-btn,
body.yb-sf-skin .lsc-ig-btn,
body.yb-sf-skin .lsc-fb-escape .lsc-btn {
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	box-shadow: none !important;
}

/* LSC greeting — brand ink (no amber #92400e) */
body.yb-sf-skin .lsc-greeting {
	color: var(--yb-sf-brand) !important;
}

/* LSC Admin View banner — CCC soft accent panel + spacing below */
body.yb-sf-skin .lsc-admin-banner {
	background: color-mix(in srgb, var(--yb-sf-accent) 42%, var(--yb-sf-surface)) !important;
	border: 1px solid var(--yb-sf-accent) !important;
	border-left: 4px solid var(--yb-sf-brand) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	color: var(--yb-sf-brand) !important;
	margin-bottom: 32px !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* LSC glass-card + inners — soft card radius (keep CCC CTAs square) */
body.yb-sf-skin .glass-card,
body.yb-sf-skin .lsc-section.glass-card {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin .lsc-section.glass-card .lsc-pay-tab,
body.yb-sf-skin .lsc-section.glass-card .lsc-pay-panel-card,
body.yb-sf-skin .lsc-section.glass-card .lsc-pay-hint,
body.yb-sf-skin .lsc-section.glass-card .lsc-upload-alert,
body.yb-sf-skin .lsc-section.glass-card .lsc-upload-area,
body.yb-sf-skin .lsc-section.glass-card .copy-row,
body.yb-sf-skin .lsc-section.glass-card .copy-btn,
body.yb-sf-skin .lsc-section.glass-card .lsc-row-price,
body.yb-sf-skin .lsc-section.glass-card .lsc-em-info-chip,
body.yb-sf-skin .lsc-section.glass-card .lsc-radio-card,
body.yb-sf-skin .lsc-section.glass-card .lsc-region-tab,
body.yb-sf-skin .lsc-section.glass-card .lsc-intent-card,
body.yb-sf-skin .lsc-section.glass-card .lsc-ship-option,
body.yb-sf-skin .lsc-section.glass-card .form-group input,
body.yb-sf-skin .lsc-section.glass-card .form-group select,
body.yb-sf-skin .lsc-section.glass-card .form-group textarea,
body.yb-sf-skin .glass-card .lsc-pay-tab,
body.yb-sf-skin .glass-card .lsc-pay-panel-card,
body.yb-sf-skin .glass-card .lsc-upload-alert,
body.yb-sf-skin .glass-card .lsc-upload-area,
body.yb-sf-skin .glass-card .lsc-row-price,
body.yb-sf-skin .glass-card .lsc-region-tab,
body.yb-sf-skin .glass-card .lsc-intent-card {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin .lsc-admin-banner::before {
	display: none !important;
}

body.yb-sf-skin .lsc-admin-banner strong {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .lsc-admin-banner .lsc-admin-note {
	color: var(--yb-sf-muted) !important;
}

/* LSC checkout session (/lsc/...) — CCC outline CTAs
   (Submit Payment uses .lsc-submit-cta solid brand below — excluded here.) */
body.yb-sf-skin .lsc-btn.primary:not(.lsc-submit-cta),
body.yb-sf-skin .lsc-sticky-btn,
body.yb-sf-skin .lsc-btn-back-orders,
body.yb-sf-skin .lsc-btn-ship,
body.yb-sf-skin .lsc-reselect-btn,
body.yb-sf-skin .lsc-qr-lightbox-close {
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-brand, #82213e) !important;
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	animation: none !important;
}

body.yb-sf-skin .lsc-btn.primary:not(.lsc-submit-cta):hover,
body.yb-sf-skin .lsc-sticky-btn:hover,
body.yb-sf-skin .lsc-btn-back-orders:hover,
body.yb-sf-skin .lsc-btn-ship:hover,
body.yb-sf-skin .lsc-reselect-btn:hover,
body.yb-sf-skin .lsc-qr-lightbox-close:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Submit Payment — solid brand CTA (must beat former outline !important) */
body.yb-sf-skin #lsc-submit-btn.lsc-submit-cta,
body.yb-sf-skin .lsc-pay-flow #lsc-submit-btn.lsc-submit-cta,
body.yb-sf-skin .lsc-pay-flow.is-complete #lsc-submit-btn.lsc-submit-cta,
body.yb-sf-skin .lsc-submit-card .lsc-submit-cta {
	background: var(--yb-sf-brand, #82213e) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var(--yb-sf-brand, #82213e) !important;
	border-radius: var(--yb-sf-radius-sm, 8px) !important;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--yb-sf-brand, #82213e) 28%, transparent) !important;
	font-weight: 700 !important;
	letter-spacing: var(--yb-sf-button-ls, 0.04em) !important;
	text-transform: uppercase !important;
	min-height: 52px;
	padding: 16px 24px !important;
	animation: none !important;
}

body.yb-sf-skin #lsc-submit-btn.lsc-submit-cta:hover,
body.yb-sf-skin .lsc-pay-flow #lsc-submit-btn.lsc-submit-cta:hover,
body.yb-sf-skin .lsc-pay-flow.is-complete #lsc-submit-btn.lsc-submit-cta:hover,
body.yb-sf-skin .lsc-submit-card .lsc-submit-cta:hover {
	background: var(--yb-sf-brand-dark, #5c1529) !important;
	border-color: var(--yb-sf-brand-dark, #5c1529) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--yb-sf-brand, #82213e) 36%, transparent) !important;
	transform: translateY(-1px) !important;
}

body.yb-sf-skin #lsc-submit-btn.lsc-submit-cta:active,
body.yb-sf-skin .lsc-pay-flow #lsc-submit-btn.lsc-submit-cta:active,
body.yb-sf-skin .lsc-submit-card .lsc-submit-cta:active {
	background: var(--yb-sf-brand-dark, #5c1529) !important;
	border-color: var(--yb-sf-brand-dark, #5c1529) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--yb-sf-brand, #82213e) 40%, transparent) !important;
	transform: translateY(1px) !important;
}

body.yb-sf-skin #lsc-submit-btn.lsc-submit-cta:disabled,
body.yb-sf-skin .lsc-pay-flow #lsc-submit-btn.lsc-submit-cta:disabled,
body.yb-sf-skin .lsc-submit-card .lsc-submit-cta:disabled {
	background: color-mix(in srgb, var(--yb-sf-brand, #82213e) 38%, var(--yb-sf-surface, #fffaf1)) !important;
	border-color: color-mix(in srgb, var(--yb-sf-brand, #82213e) 28%, var(--yb-sf-line, #f0e4e5)) !important;
	color: color-mix(in srgb, #fff 70%, var(--yb-sf-brand, #82213e)) !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

body.yb-sf-skin .lsc-order-title,
body.yb-sf-skin .page-title,
body.yb-sf-skin .lsc-section-title {
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .lang-icon,
body.yb-sf-skin .yb-lang-btn .lang-icon {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .yb-lang-toggle,
body.yb-sf-skin .lsc-lang-toggle {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	box-shadow: none !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .yb-lang-toggle .toggle-lang,
body.yb-sf-skin .lsc-lang-toggle .toggle-lang {
	color: var(--yb-sf-brand) !important;
}

/* My Account → LSC Orders */
body.yb-sf-skin .lsc-my-orders {
	--lsc-text: var(--yb-sf-ink);
	--lsc-text-muted: var(--yb-sf-muted);
	--lsc-text-dim: var(--yb-sf-muted);
	--lsc-border: var(--yb-sf-line);
	--lsc-border-soft: color-mix(in srgb, var(--yb-sf-line) 55%, #ffffff);
	--lsc-surface: var(--yb-sf-surface);
	--lsc-surface-dim: color-mix(in srgb, var(--yb-sf-surface) 92%, var(--yb-sf-accent));
	--lsc-accent: var(--yb-sf-brand);
	--lsc-live: var(--yb-sf-brand);
	--lsc-web: color-mix(in srgb, var(--yb-sf-brand) 72%, #1e3a5f);
	--lsc-total: var(--yb-sf-brand);
	--lsc-card-radius: var(--yb-sf-card-radius, 10px);
	--lsc-radius: var(--yb-sf-card-radius, 10px);
	--lsc-radius-sm: 8px;
	--lsc-radius-xs: 6px;
	--lsc-shadow: none;
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .lsc-my-orders .lsc-orders-header h2 {
	font-family: var(--yb-sf-font-heading);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink);
}

body.yb-sf-skin .lsc-my-orders .lsc-filter-btn.active .lsc-filter-count {
	background: var(--yb-sf-brand);
	color: #fff;
}

body.yb-sf-skin .lsc-my-orders .lsc-btn {
	font-family: var(--yb-sf-font-body);
	font-weight: 400;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	border-radius: var(--yb-sf-radius);
	box-shadow: none !important;
	min-width: 0;
}

body.yb-sf-skin .lsc-my-orders .lsc-btn-primary,
body.yb-sf-skin .lsc-my-orders .lsc-btn-secondary {
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
}

body.yb-sf-skin .lsc-my-orders .lsc-btn-primary:hover,
body.yb-sf-skin .lsc-my-orders .lsc-btn-secondary:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .lsc-my-orders .lsc-btn-success,
body.yb-sf-skin .lsc-my-orders .lsc-btn-warning {
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
	box-shadow: none !important;
}

body.yb-sf-skin .lsc-my-orders .lsc-btn:focus-visible,
body.yb-sf-skin .lsc-my-orders .lsc-filter-btn:focus-visible {
	outline: 2px solid var(--yb-sf-brand);
	outline-offset: 2px;
}

body.yb-sf-skin .lsc-my-orders .lsc-order-card {
	border-radius: var(--yb-sf-radius);
	box-shadow: none;
}

body.yb-sf-skin .lsc-my-orders .lsc-status {
	border-radius: var(--yb-sf-radius);
	font-weight: 500;
	letter-spacing: 0.04em;
}


/* Live Boost Sales — Others also bought */
body.yb-sf-skin .lbs-popup-content {
	background: var(--yb-sf-surface);
	color: var(--yb-sf-ink);
	border-radius: var(--yb-sf-radius);
}

body.yb-sf-skin .lbs-popup-title {
	font-family: var(--yb-sf-font-heading);
	font-weight: 400;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink);
}

body.yb-sf-skin .lbs-product-price {
	color: var(--yb-sf-brand);
}

body.yb-sf-skin .lbs-btn {
	font-family: var(--yb-sf-font-body);
	font-weight: 400;
	letter-spacing: var(--yb-sf-button-ls);
	text-transform: uppercase;
	border-radius: var(--yb-sf-radius);
}

body.yb-sf-skin .lbs-btn-primary,
body.yb-sf-skin .lbs-btn-secondary {
	background: transparent !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
	box-shadow: none !important;
}

body.yb-sf-skin .lbs-btn-primary:hover,
body.yb-sf-skin .lbs-btn-secondary:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .lbs-products-slider .swiper-pagination-bullet-active {
	background: var(--yb-sf-brand) !important;
}


/* Related Products + You May Like */
body.yb-sf-skin .yb-rp-root,
body.yb-sf-skin .yb-you-may-like {
	--yb-rp-accent: var(--yb-sf-brand);
	--yb-rp-text: var(--yb-sf-ink);
	--yb-rp-text-muted: var(--yb-sf-muted);
	--yb-rp-border: var(--yb-sf-line);
	--yb-rp-card-radius: var(--yb-sf-card-radius, 10px);
	--yb-rec-card-radius: var(--yb-sf-card-radius, 10px);
	--yb-rec-card-shadow: none;
	--yb-rec-name-size: 12.5px;
	--yb-rec-name-weight: 400;
	--yb-rec-name-lh: 1.45;
	--yb-rec-price-size: 13.5px;
	--yb-rec-price-weight: 600;
	--yb-rec-price-mt: 8px;
	color: var(--yb-sf-ink);
	font-family: var(--yb-sf-font-body);
}

@media (min-width: 769px) {
	body.yb-sf-skin .yb-rp-root,
	body.yb-sf-skin .yb-you-may-like {
		--yb-rec-name-size: 13px;
		--yb-rec-price-size: 14px;
	}
}

body.yb-sf-skin .yb-rp-title,
body.yb-sf-skin .yb-yml-title {
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
	color: var(--yb-sf-ink) !important;
}

/* Product card titles: body font, restrained — not section headings */
body.yb-sf-skin .yb-rp-name,
body.yb-sf-skin .yb-yml-name {
	font-family: var(--yb-sf-font-body) !important;
	font-weight: 400 !important;
	font-size: var(--yb-rec-name-size, 12.5px) !important;
	line-height: var(--yb-rec-name-lh, 1.45) !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .yb-rp-price,
body.yb-sf-skin .yb-rp-price ins,
body.yb-sf-skin .yb-yml-price,
body.yb-sf-skin .yb-yml-price ins,
body.yb-sf-skin .yb-rp-price .woocommerce-Price-amount,
body.yb-sf-skin .yb-yml-price .woocommerce-Price-amount {
	color: var(--yb-sf-brand) !important;
	font-weight: 600 !important;
	font-size: var(--yb-rec-price-size, 13.5px);
}

body.yb-sf-skin .yb-rp-price del,
body.yb-sf-skin .yb-yml-price del,
body.yb-sf-skin .yb-rp-price del .woocommerce-Price-amount,
body.yb-sf-skin .yb-yml-price del .woocommerce-Price-amount {
	color: var(--yb-sf-muted) !important;
	font-weight: 400 !important;
	font-size: 0.85em !important;
}

body.yb-sf-skin .yb-rp-card,
body.yb-sf-skin .yb-yml-card {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	box-shadow: none;
}

body.yb-sf-skin .yb-rp-pagination .swiper-pagination-bullet-active,
body.yb-sf-skin .yb-rec-nav-btn,
body.yb-sf-skin .yb-yml-nav-btn {
	color: var(--yb-sf-brand);
}

body.yb-sf-skin .yb-rp-pagination .swiper-pagination-bullet-active {
	background: var(--yb-sf-brand) !important;
}

/* Birthday rewards / Social proof / Reviews / IG popup / BBR vars */
body.yb-sf-skin {
	--bbr-primary: var(--yb-sf-brand);
	--bbr-primary-dark: var(--yb-sf-brand-dark);
	--bbr-secondary: var(--yb-sf-accent);
	--bbr-gradient: linear-gradient(135deg, var(--yb-sf-brand) 0%, var(--yb-sf-brand-dark) 100%);
	--bbr-text: var(--yb-sf-ink);
	--bbr-text-light: var(--yb-sf-muted);
	--bbr-border: var(--yb-sf-line);
	--bbr-bg: var(--yb-sf-surface);
	--bbr-radius: var(--yb-sf-radius);
	--bbr-radius-sm: var(--yb-sf-radius);

	/* yb-reviews bridge */
	--ybr-accent: var(--yb-sf-brand);
	--ybr-border: var(--yb-sf-line);
	--ybr-bg: var(--yb-sf-surface);
	--ybr-text: var(--yb-sf-ink);
	--ybr-muted: var(--yb-sf-muted);
	--ybr-radius: var(--yb-sf-radius);
}

body.yb-sf-skin .ybsp-sold,
body.yb-sf-skin .ybsp-sold-mobile-wrap .ybsp-sold {
	color: var(--yb-sf-brand) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, #ffffff) !important;
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .ybsp-rank__tab {
	border-radius: var(--yb-sf-radius) !important;
	border-color: var(--yb-sf-line) !important;
	color: var(--yb-sf-brand) !important;
	background: transparent !important;
	text-transform: uppercase !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
}

body.yb-sf-skin .ybsp-rank__tab.is-active {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface)) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .ybsp-rank__card,
body.yb-sf-skin .ybsp-toast,
body.yb-sf-skin .ybsp-toast__img {
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .ybsp-toast {
	background: var(--yb-sf-surface) !important;
	border: 1px solid var(--yb-sf-line) !important;
	color: var(--yb-sf-ink);
}

body.yb-sf-skin .ybr-btn {
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	color: var(--yb-sf-btn-fg) !important;
	text-transform: uppercase !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	font-size: var(--yb-sf-text-sm) !important;
	box-shadow: none !important;
}

body.yb-sf-skin .ybr-btn:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .ig-popup-header,
body.yb-sf-skin .ig-coupon-card {
	background: linear-gradient(135deg, var(--yb-sf-brand) 0%, var(--yb-sf-brand-dark) 60%, var(--yb-sf-accent) 100%) !important;
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .live-promotion-control {
	background: var(--yb-sf-brand) !important;
	background-image: none !important;
	border-radius: var(--yb-sf-radius) !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Shopee variation panel (sticky 「查看款式」)
   ------------------------------------------------------------------------- */
body.yb-sf-skin .product-sticky-bar {
	background: var(--yb-sf-bar) !important;
	border-top: 1px solid var(--yb-sf-line) !important;
	/* Soft lift so mobile sticky zone reads above page content */
	box-shadow: 0 -6px 24px color-mix(in srgb, var(--yb-sf-brand, #82213e) 14%, transparent) !important;
	color: var(--yb-sf-ink);
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .product-sticky-bar .sticky-thumb,
body.yb-sf-skin .product-sticky-bar .sticky-thumb img {
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .product-sticky-bar .sticky-title,
body.yb-sf-skin .product-sticky-bar .sticky-price,
body.yb-sf-skin .product-sticky-bar .sticky-price .woocommerce-Price-amount,
body.yb-sf-skin .product-sticky-bar .sticky-price ins {
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .product-sticky-bar .sticky-price del {
	color: var(--yb-sf-muted) !important;
}

/* Sticky 「View Design」— solid brand CTA (must beat outline .yb-sf-btn tokens) */
body.yb-sf-skin .product-sticky-bar .sticky-add-btn,
body.yb-sf-skin #open-shopee-panel {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	box-sizing: border-box;
	background: var(--yb-sf-brand, #82213e) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var(--yb-sf-brand, #82213e) !important;
	border-radius: 8px !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: var(--yb-sf-button-ls, 0.04em) !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	min-height: 48px;
	padding: 14px 22px !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--yb-sf-brand, #82213e) 32%, transparent) !important;
	transition:
		background 0.2s var(--yb-sf-ease, ease),
		border-color 0.2s var(--yb-sf-ease, ease),
		box-shadow 0.2s var(--yb-sf-ease, ease),
		transform 0.15s var(--yb-sf-ease, ease) !important;
}

body.yb-sf-skin .product-sticky-bar .sticky-add-btn:hover,
body.yb-sf-skin #open-shopee-panel:hover {
	background: var(--yb-sf-brand-dark, #5c1529) !important;
	border-color: var(--yb-sf-brand-dark, #5c1529) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--yb-sf-brand, #82213e) 40%, transparent) !important;
	transform: translateY(-1px);
	opacity: 1;
}

body.yb-sf-skin .product-sticky-bar .sticky-add-btn:active,
body.yb-sf-skin #open-shopee-panel:active {
	background: var(--yb-sf-brand-dark, #5c1529) !important;
	border-color: var(--yb-sf-brand-dark, #5c1529) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--yb-sf-brand, #82213e) 42%, transparent) !important;
	transform: translateY(1px);
}

body.yb-sf-skin .product-sticky-bar .sticky-add-btn:focus-visible,
body.yb-sf-skin #open-shopee-panel:focus-visible {
	outline: 2px solid var(--yb-sf-brand, #82213e);
	outline-offset: 2px;
}

body.yb-sf-skin .shopee-panel {
	background: var(--yb-sf-surface) !important;
	border-radius: var(--yb-sf-radius) var(--yb-sf-radius) 0 0 !important;
	color: var(--yb-sf-ink);
	font-family: var(--yb-sf-font-body);
}

body.yb-sf-skin .shopee-panel::before {
	background: var(--yb-sf-line) !important;
	border-radius: 0 !important;
}

body.yb-sf-skin .shopee-panel-close {
	background: transparent !important;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .shopee-panel-header {
	border-bottom-color: var(--yb-sf-line) !important;
}

body.yb-sf-skin .shopee-panel-title {
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-heading);
	letter-spacing: var(--yb-sf-heading-ls);
}

body.yb-sf-skin .shopee-panel-price,
body.yb-sf-skin .shopee-panel-price .woocommerce-Price-amount,
body.yb-sf-skin .shopee-panel-price ins {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shopee-panel-section-title,
body.yb-sf-skin .shopee-panel-quantity-label {
	color: var(--yb-sf-ink) !important;
	font-weight: 400 !important;
}

body.yb-sf-skin .shopee-attr-btn {
	border-color: var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	color: var(--yb-sf-ink) !important;
	background: transparent !important;
}

body.yb-sf-skin .shopee-attr-btn:hover,
body.yb-sf-skin .shopee-attr-btn.selected {
	border-color: var(--yb-sf-brand) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 30%, #ffffff) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shopee-qty-control {
	border-color: var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .shopee-qty-btn {
	background: transparent !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .shopee-qty-input {
	border-color: var(--yb-sf-line) !important;
	color: var(--yb-sf-ink) !important;
	font-weight: 400 !important;
}

body.yb-sf-skin .shopee-add-to-cart-btn {
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}

body.yb-sf-skin .shopee-add-to-cart-btn:hover:not(:disabled),
body.yb-sf-skin .shopee-add-to-cart-btn:not(:disabled) {
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shopee-add-to-cart-btn:disabled {
	opacity: 0.45 !important;
	color: var(--yb-sf-muted) !important;
	border-color: var(--yb-sf-line) !important;
	background: transparent !important;
}

body.yb-sf-skin .shopee-add-to-cart-btn.backorder-btn {
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	border: 1px solid var(--yb-sf-line) !important;
}

/* ATC loading: outline 按钮用品牌色 spinner（覆盖 skin 的 color !important） */
body.yb-sf-skin .shopee-add-to-cart-btn.loading,
body.yb-sf-skin .shopee-add-to-cart-btn.loading:hover,
body.yb-sf-skin .shopee-add-to-cart-btn.loading:not(:disabled),
body.yb-sf-skin .shopee-add-to-cart-btn.loading:disabled,
body.yb-sf-skin .single_add_to_cart_button.loading,
body.yb-sf-skin .single_add_to_cart_button.loading:hover,
body.yb-sf-skin .single_add_to_cart_button.loading:disabled {
	position: relative !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	pointer-events: none !important;
	cursor: wait !important;
	opacity: 1 !important;
	background: transparent !important;
	background-image: none !important;
	border-color: var(--yb-sf-brand) !important;
	transition: none !important;
}

body.yb-sf-skin .shopee-add-to-cart-btn.loading::after,
body.yb-sf-skin .single_add_to_cart_button.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid color-mix(in srgb, var(--yb-sf-brand) 22%, transparent);
	border-top-color: var(--yb-sf-brand);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: shopeeSpinner 0.6s linear infinite;
}

body.yb-sf-skin .shopee-panel-stock .loading-stock::after {
	border-top-color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shopee-panel-stock .out-of-stock-v2,
body.yb-sf-skin .shopee-panel-stock .low-stock,
body.yb-sf-skin .shopee-panel-stock.low-stock {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shopee-panel-image {
	border-color: var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
}

/* -------------------------------------------------------------------------
   Checkout page — remaining detail alignment
   ------------------------------------------------------------------------- */
body.yb-sf-skin.woocommerce-checkout .order-total th,
body.yb-sf-skin.woocommerce-checkout .order-total td,
body.yb-sf-skin.woocommerce-checkout .order-total .amount,
body.yb-sf-skin.woocommerce-checkout .order-total strong,
body.yb-sf-skin.woocommerce-cart .order-total .amount {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-checkout #payment ul.payment_methods li,
body.yb-sf-skin.woocommerce-checkout #payment .wc_payment_method,
body.yb-sf-skin.woocommerce-checkout .wc_payment_methods > li {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	border-color: var(--yb-sf-accent, #e9c9cc) !important;
	background: var(--yb-sf-surface) !important;
}

body.yb-sf-skin.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked + label,
body.yb-sf-skin.woocommerce-checkout #payment .wc_payment_method input[type="radio"]:checked + label {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-checkout #payment input[type="radio"],
body.yb-sf-skin.woocommerce-checkout .yb-shipping-ui input[type="radio"] {
	accent-color: var(--yb-sf-brand);
}

body.yb-sf-skin.woocommerce-checkout #payment div.payment_box {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 22%, #ffffff) !important;
	color: var(--yb-sf-ink) !important;
}

/* Checkout large cards — cream surface + accent border
   Porto: .featured-boxes { border: 2px solid var(--porto-gray-5) } → #e7e7e7
   Full border shorthand on the visible cards (not the empty wrappers). */
body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields,
body.yb-sf-skin.woocommerce-checkout .woocommerce-billing-fields,
body.yb-sf-skin.woocommerce-checkout .woocommerce-account-fields,
body.yb-sf-skin.woocommerce-checkout .woocommerce-shipping-fields:has(.shipping_address),
body.yb-sf-skin.woocommerce-checkout .woocommerce-shipping-fields:has(h3),
body.yb-sf-skin.woocommerce-checkout .wcp-address-collapse-header {
	background: var(--yb-sf-surface, #fffaf1) !important;
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	box-shadow: none !important;
}

/* Kill leftover gray on left-column wrappers only (must NOT hit .featured-boxes) */
body.yb-sf-skin.woocommerce-checkout #customer_details > .col-lg-7 .box-content,
body.yb-sf-skin.woocommerce-checkout #customer_details .col-lg-7 .align-left > .box-content:not(.featured-boxes) {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Order review outer shell (Porto gray #e7e7e7 → accent). Beat #customer_details .box-content */
body.yb-sf-skin.woocommerce-checkout .featured-boxes,
body.yb-sf-skin.woocommerce-checkout .checkout-order-review .featured-boxes,
body.yb-sf-skin.woocommerce-checkout .checkout-order-review .box-content.featured-boxes,
body.yb-sf-skin.woocommerce-checkout #customer_details .checkout-order-review .box-content.featured-boxes,
body.yb-sf-skin.woocommerce-checkout #customer_details .box-content.featured-boxes {
	background: var(--yb-sf-surface, #fffaf1) !important;
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	box-shadow: none !important;
}

/* Inner #order_review / #payment — recolor only (avoid nested double frames) */
body.yb-sf-skin.woocommerce-checkout #order_review,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order,
body.yb-sf-skin.woocommerce-checkout #payment {
	background: var(--yb-sf-surface, #fffaf1) !important;
	border-color: var(--yb-sf-accent, #e9c9cc) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields {
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields h3 {
	border-bottom-color: var(--yb-sf-accent) !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields label {
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields label .optional {
	color: var(--yb-sf-muted) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-billing-fields,
body.yb-sf-skin.woocommerce-checkout .woocommerce-account-fields {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	padding: 16px 18px !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-billing-fields h3,
body.yb-sf-skin.woocommerce-checkout .woocommerce-shipping-fields h3,
body.yb-sf-skin.woocommerce-checkout .woocommerce-additional-fields h3,
body.yb-sf-skin.woocommerce-checkout #order_review_heading,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table caption,
body.yb-sf-skin.woocommerce-checkout h3 {
	color: var(--yb-sf-ink) !important;
	font-family: var(--yb-sf-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-heading-ls);
	text-transform: uppercase;
}

body.yb-sf-skin.woocommerce-checkout input[type="text"],
body.yb-sf-skin.woocommerce-checkout input[type="email"],
body.yb-sf-skin.woocommerce-checkout input[type="tel"],
body.yb-sf-skin.woocommerce-checkout input[type="password"],
body.yb-sf-skin.woocommerce-checkout textarea,
body.yb-sf-skin.woocommerce-checkout select,
body.yb-sf-skin.woocommerce-checkout .select2-selection {
	border-color: var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	background: var(--yb-sf-surface) !important;
	color: var(--yb-sf-ink) !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-checkout input:focus,
body.yb-sf-skin.woocommerce-checkout textarea:focus,
body.yb-sf-skin.woocommerce-checkout select:focus,
body.yb-sf-skin.woocommerce-checkout .select2-container--open .select2-selection {
	border-color: var(--yb-sf-brand) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yb-sf-accent) 55%, transparent) !important;
}

body.yb-sf-skin.woocommerce-checkout a.button,
body.yb-sf-skin.woocommerce-checkout .button,
body.yb-sf-skin.woocommerce-checkout button.button,
body.yb-sf-skin.woocommerce-checkout .woocommerce-button {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
}

body.yb-sf-skin.woocommerce-checkout .yb-freeship-bar,
body.yb-sf-skin.woocommerce-cart .yb-freeship-bar {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface)) !important;
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin .yb-freeship-bar__label {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .yb-freeship-bar__track {
	background: color-mix(in srgb, var(--yb-sf-accent) 45%, #ffffff) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin .yb-freeship-bar__fill {
	background: var(--yb-sf-brand) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin.woocommerce-checkout .yb-intent-card,
body.yb-sf-skin.woocommerce-checkout .yb-ship-option,
body.yb-sf-skin.woocommerce-checkout .yb-shipping-ui .yb-intent-card {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	border-color: var(--yb-sf-accent, #e9c9cc) !important;
}

body.yb-sf-skin.woocommerce-checkout .yb-intent-card.active,
body.yb-sf-skin.woocommerce-checkout .yb-intent-card.is-active,
body.yb-sf-skin.woocommerce-checkout .yb-intent-card.selected,
body.yb-sf-skin.woocommerce-checkout .yb-ship-option.is-selected,
body.yb-sf-skin.woocommerce-checkout .yb-ship-option.yb-selected,
body.yb-sf-skin.woocommerce-checkout .yb-ship-option:has(input:checked) {
	border-color: var(--yb-sf-brand) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yb-sf-brand) 12%, transparent) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 28%, #ffffff) !important;
}

/* -------------------------------------------------------------------------
   Checkout review — larger product thumbs + card radius + zoom cursor
   ------------------------------------------------------------------------- */
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail > a {
	display: block;
	overflow: hidden;
	border-radius: var(--yb-sf-card-radius, 10px);
	flex-shrink: 0;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img,
body.yb-sf-skin.woocommerce-checkout .shop_table.review-order .product-thumbnail img {
	width: 88px !important;
	max-width: 88px !important;
	height: 110px !important;
	object-fit: cover;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	cursor: zoom-in;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid var(--yb-sf-line, rgba(42, 36, 32, 0.1));
	background: #fff;
	display: block;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img:hover {
	transform: scale(1.04);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--yb-sf-brand, #82213e) 18%, transparent);
}

@media (max-width: 575px) {
	body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img,
	body.yb-sf-skin.woocommerce-checkout .shop_table.review-order .product-thumbnail img {
		width: 72px !important;
		max-width: 72px !important;
		height: 90px !important;
	}
}

/* Checkout order review — product title links (brand ink; Porto .shop_table a{color:inherit}) */
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name a.yb-checkout-product-name,
body.yb-sf-skin.woocommerce-checkout .shop_table.review-order .product-name a.yb-checkout-product-name,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-content .product-name > a.yb-checkout-product-name {
	color: var(--yb-sf-brand, #82213e) !important;
	text-decoration: none;
	font-weight: inherit;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name a.yb-checkout-product-name:hover,
body.yb-sf-skin.woocommerce-checkout .shop_table.review-order .product-name a.yb-checkout-product-name:hover,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-content .product-name > a.yb-checkout-product-name:hover,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name a.yb-checkout-product-name:focus-visible,
body.yb-sf-skin.woocommerce-checkout .shop_table.review-order .product-name a.yb-checkout-product-name:focus-visible {
	color: color-mix(in srgb, var(--yb-sf-brand, #82213e) 78%, #000) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Cart lightbox must sit above #yb-sf-cart-drawer (--yb-sf-z-cart: 100180) */
body.yb-sf-skin .cart-image-lightbox {
	z-index: 100200;
}

/* Reuse cart lightbox — brand-aligned close control */
body.yb-sf-skin .cart-image-lightbox .close-lightbox {
	color: #fff;
}

body.yb-sf-skin .cart-image-lightbox .close-lightbox:hover {
	color: var(--yb-sf-accent, #e9c9cc);
}

body.yb-sf-skin .cart-image-lightbox img {
	border-radius: var(--yb-sf-card-radius, 10px);
}

/* Selected payment method outline */
body.yb-sf-skin.woocommerce-checkout #payment ul.payment_methods > li {
	transition: border-color 0.15s ease;
}
body.yb-sf-skin.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
	border-color: var(--yb-sf-brand) !important;
}

/* Checkout — WCP bars + address edit + secondary links */
body.yb-sf-skin.woocommerce-checkout .wcp-checkout-logged-in,
body.yb-sf-skin.woocommerce-checkout .wcp-checkout-guest,
body.yb-sf-skin.woocommerce-checkout .wcp-address-collapse-header {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-color: var(--yb-sf-accent, #e9c9cc) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 22%, #ffffff) !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-checkout .wcp-login-link,
body.yb-sf-skin.woocommerce-checkout .wcp-logout-link,
body.yb-sf-skin.woocommerce-checkout .wcp-address-edit-btn {
	background: var(--yb-sf-btn-bg) !important;
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	color: var(--yb-sf-btn-fg) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-checkout .wcp-login-link:hover,
body.yb-sf-skin.woocommerce-checkout .wcp-logout-link:hover,
body.yb-sf-skin.woocommerce-checkout .wcp-address-edit-btn:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-checkout a:not(.button):not(.wcp-login-link):not(.wcp-logout-link) {
	color: var(--yb-sf-brand);
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-info,
body.yb-sf-skin.woocommerce-checkout .woocommerce-message {
	border-top: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-top-color: var(--yb-sf-accent, #e9c9cc) !important;
	background: color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 25%, #ffffff) !important;
	background-color: color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 25%, #ffffff) !important;
	color: var(--yb-sf-ink, #1a1a1a) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-info::before,
body.yb-sf-skin.woocommerce-checkout .woocommerce-message::before {
	color: var(--yb-sf-brand, #82213e) !important;
}

/* Checkout — kill leftover green/gray on WCP + coupon + focus */
body.yb-sf-skin.woocommerce-checkout .wcp-logged-icon,
body.yb-sf-skin.woocommerce-checkout .wcp-checkout-logged-in .wcp-logged-icon {
	color: var(--yb-sf-brand, #82213e) !important;
	background: color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 40%, #ffffff) !important;
	border-color: transparent !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.yb-sf-skin.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
	color: var(--yb-sf-brand, #82213e) !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover {
	color: var(--yb-sf-brand-dark, #5c1529) !important;
}

body.yb-sf-skin.woocommerce-checkout input:focus,
body.yb-sf-skin.woocommerce-checkout textarea:focus,
body.yb-sf-skin.woocommerce-checkout select:focus,
body.yb-sf-skin.woocommerce-checkout .select2-container--open .select2-selection,
body.yb-sf-skin.woocommerce-checkout #order_comments:focus {
	border-color: var(--yb-sf-brand, #82213e) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 55%, transparent) !important;
}

body.yb-sf-skin.woocommerce-checkout #payment .payment_box {
	border-top-color: var(--yb-sf-line, #f0e4e5) !important;
	color: var(--yb-sf-ink, #82213e) !important;
}

/* Soften hover lift on cards — CCC is flatter */
body.yb-sf-skin.woocommerce-checkout .yb-intent-card:hover,
body.yb-sf-skin.woocommerce-checkout #payment .wc_payment_method:hover {
	transform: none !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-checkout #payment .wc_payment_method.yb-pay-active,
body.yb-sf-skin.woocommerce-checkout #payment .wc_payment_method:has(input:checked) {
	border-color: var(--yb-sf-brand) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 28%, #ffffff) !important;
}

body.yb-sf-skin.woocommerce-checkout .woo-page-header .breadcrumb li a,
body.yb-sf-skin.woocommerce-checkout .woo-page-header .breadcrumb li.current a {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

/* Checkout leftovers — Porto .nolink pink, CBM notice, unpaid capsule */
body.yb-sf-skin .nolink,
body.yb-sf-skin a.nolink,
body.yb-sf-skin .breadcrumb .nolink,
body.yb-sf-skin .woo-page-header .breadcrumb .disable,
body.yb-sf-skin .woo-page-header .breadcrumb .disable a {
	color: color-mix(in srgb, var(--yb-sf-brand) 48%, #ffffff) !important;
}

body.yb-sf-skin.woocommerce-checkout .woo-page-header .breadcrumb li:not(.current):not(.disable) a,
body.yb-sf-skin.woocommerce-checkout .woo-page-header .breadcrumb li:not(.current),
body.yb-sf-skin.woocommerce-checkout .page-header-8 li:not(.current):not(.disable) a,
body.yb-sf-skin.woocommerce-checkout .page-header-8 li.disable a,
body.yb-sf-skin.woocommerce-checkout .page-header-8 li.disable .nolink {
	color: color-mix(in srgb, var(--yb-sf-brand) 55%, #ffffff) !important;
}

body.yb-sf-skin .cbm-checkout-notice,
body.yb-sf-skin.woocommerce-checkout .cbm-checkout-notice {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	border-left-color: var(--yb-sf-brand) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 30%, #fff8e7) !important;
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin #lsc-unpaid-capsule.lsc-urc,
body.yb-sf-skin .lsc-urc {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin.woocommerce-checkout .shop_table .order-total th,
body.yb-sf-skin.woocommerce-checkout .shop_table .order-total td {
	border-radius: 0 !important;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-info.wcp-checkout-logged-in,
body.yb-sf-skin.woocommerce-checkout div.wcp-checkout-logged-in.woocommerce-info,
body.yb-sf-skin.woocommerce-checkout .woocommerce-info.wcp-checkout-guest {
	background: color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 22%, #ffffff) !important;
	background-color: color-mix(in srgb, var(--yb-sf-accent, #e9c9cc) 22%, #ffffff) !important;
	border: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-top: 1px solid var(--yb-sf-accent, #e9c9cc) !important;
	border-top-color: var(--yb-sf-accent, #e9c9cc) !important;
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	color: var(--yb-sf-ink, #1a1a1a) !important;
	box-shadow: none !important;
}

/* Kill WC notice ::before (purple #720eec / blue #1e85be) on WCP bars */
body.yb-sf-skin.woocommerce-checkout .wcp-checkout-logged-in.woocommerce-info::before,
body.yb-sf-skin.woocommerce-checkout .wcp-checkout-guest.woocommerce-info::before,
body.yb-sf-skin.woocommerce-checkout div.wcp-checkout-logged-in.woocommerce-info::before {
	display: none !important;
	content: none !important;
	color: transparent !important;
}


/* Checkout radius — place order + select2 dropdown + error notices + review card */
body.yb-sf-skin.woocommerce-checkout #place_order,
body.yb-sf-skin.woocommerce-checkout .woocommerce #payment #place_order,
body.yb-sf-skin.woocommerce-checkout #payment #place_order.button.alt,
body.yb-sf-skin.woocommerce-checkout #payment #place_order.btn-v-dark {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

body.yb-sf-skin.woocommerce-checkout .select2-dropdown {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	overflow: hidden;
}

body.yb-sf-skin.woocommerce-checkout .woocommerce-error,
body.yb-sf-skin.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.yb-sf-skin.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}

/* Order review card — outer Porto wrapper + #order_review (match additional-fields ~10px) */
body.yb-sf-skin.woocommerce-checkout .checkout-order-review.align-left,
body.yb-sf-skin.woocommerce-checkout .checkout-order-review.align-left > .box-content,
body.yb-sf-skin.woocommerce-checkout .checkout-order-review .featured-boxes {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
	overflow: hidden;
}

body.yb-sf-skin.woocommerce-checkout #order_review,
body.yb-sf-skin.woocommerce-checkout .woocommerce-checkout-review-order,
body.yb-sf-skin.woocommerce-checkout #payment {
	border-radius: var(--yb-sf-card-radius, 10px) !important;
}


/* Porto Bootstrap buttons (btn / btn-default) — same CCC outline as .button */
body.yb-sf-skin .btn:not(.btn-link):not(.close):not(.yb-sf-qty-btn),
body.yb-sf-skin button.btn:not(.btn-link),
body.yb-sf-skin .btn-default,
body.yb-sf-skin button.btn-default,
body.yb-sf-skin input.btn-default,
body.yb-sf-skin button[name="update_cart"],
body.yb-sf-skin button[name="apply_coupon"],
body.yb-sf-skin input[name="update_cart"],
body.yb-sf-skin input[name="apply_coupon"] {
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}

body.yb-sf-skin .btn:not(.btn-link):not(.close):hover,
body.yb-sf-skin .btn-default:hover,
body.yb-sf-skin button[name="update_cart"]:hover,
body.yb-sf-skin button[name="apply_coupon"]:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

/* Cart drawer — force Porto btn-default / Update cart / Apply coupon (highest skin specificity) */
body.yb-sf-skin .yb-sf-cart-drawer button.btn.btn-default,
body.yb-sf-skin .yb-sf-cart-drawer button.btn,
body.yb-sf-skin .yb-sf-cart-drawer .btn.btn-default,
body.yb-sf-skin .yb-sf-cart-drawer button[name="update_cart"],
body.yb-sf-skin .yb-sf-cart-drawer button[name="apply_coupon"],
body.yb-sf-skin .yb-sf-cart-drawer input[name="update_cart"],
body.yb-sf-skin .yb-sf-cart-drawer input[name="apply_coupon"],
body.yb-sf-skin .yb-sf-cart-drawer button[type="submit"] {
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.yb-sf-skin .yb-sf-cart-drawer button.btn.btn-default:hover,
body.yb-sf-skin .yb-sf-cart-drawer button[name="update_cart"]:hover,
body.yb-sf-skin .yb-sf-cart-drawer button[name="apply_coupon"]:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .yb-sf-cart-drawer .quantity,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .qty-nav,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .minus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .plus {
	border-radius: var(--yb-sf-radius) !important;
}

body.yb-sf-skin .yb-sf-cart-drawer .quantity .minus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .plus {
	border-color: var(--yb-sf-line) !important;
	background: transparent !important;
	color: var(--yb-sf-brand) !important;
}

/* Cart drawer qty +/- — kill Porto 3px grey buttons */
body.yb-sf-skin .yb-sf-cart-drawer .quantity,
body.yb-sf-skin .yb-sf-cart-drawer .product-quantity .quantity {
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-surface) !important;
	overflow: hidden;
}

body.yb-sf-skin .yb-sf-cart-drawer .quantity .plus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .minus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity button.plus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity button.minus,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .qty-nav,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .qty-up,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .qty-down {
	border: 0 !important;
	border-left: 1px solid var(--yb-sf-line) !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	color: var(--yb-sf-brand) !important;
	box-shadow: none !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	padding: 0 !important;
	line-height: 34px !important;
}

body.yb-sf-skin .yb-sf-cart-drawer .quantity .minus {
	border-left: 0 !important;
	border-right: 1px solid var(--yb-sf-line) !important;
}

body.yb-sf-skin .yb-sf-cart-drawer .quantity .plus:hover,
body.yb-sf-skin .yb-sf-cart-drawer .quantity .minus:hover {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, #ffffff) !important;
	color: var(--yb-sf-brand) !important;
}

/* -------------------------------------------------------------------------
   Cart table region — kill Porto dynamic_style #c59b9c on featured-box / shop_table
   (Porto hardcodes skin-color; CSS vars alone do not win against that file)
   Scope: /cart/ page + #yb-sf-cart-drawer (AJAX-loaded same markup)
   ------------------------------------------------------------------------- */
body.yb-sf-skin.woocommerce-cart .featured-box.featured-box-primary,
body.yb-sf-skin .yb-sf-cart-drawer .featured-box.featured-box-primary {
	background: var(--yb-sf-surface) !important;
	border-color: var(--yb-sf-line) !important;
	box-shadow: none !important;
}

/* Top accent bar — must beat Porto dynamic_style #c59b9c AND our outer border-color.
   Do NOT set shorthand border-color on .box-content or it overrides border-top-color. */
body.yb-sf-skin.woocommerce-cart .featured-box.featured-box-primary .box-content,
body.yb-sf-skin .yb-sf-cart-drawer .featured-box.featured-box-primary .box-content {
	background: var(--yb-sf-surface) !important;
	border-top-width: 4px !important;
	border-top-style: solid !important;
	border-top-color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-cart .featured-box-primary h4,
body.yb-sf-skin .yb-sf-cart-drawer .featured-box-primary h4,
body.yb-sf-skin.woocommerce-cart .featured-box .wpb_heading,
body.yb-sf-skin .yb-sf-cart-drawer .featured-box .wpb_heading {
	color: var(--yb-sf-brand) !important;
}

/* Table head / prices / product links */
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form .shop_table thead th,
body.yb-sf-skin.woocommerce-cart .shop_table.cart thead th,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart thead th {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-cart .shop_table.cart .amount,
body.yb-sf-skin.woocommerce-cart .shop_table.cart .woocommerce-Price-amount,
body.yb-sf-skin.woocommerce-cart .product-price .woocommerce-Price-amount,
body.yb-sf-skin.woocommerce-cart .product-subtotal .woocommerce-Price-amount,
body.yb-sf-skin.woocommerce-cart .product-subtotal .amount,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart .amount,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart .woocommerce-Price-amount,
body.yb-sf-skin .yb-sf-cart-drawer .product-subtotal .woocommerce-Price-amount {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-cart .shop_table.cart a:not(.button):not(.btn):not(.remove):not(.remove-product),
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form a:not(.button):not(.btn):not(.remove):not(.remove-product),
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a:not(.button):not(.btn):not(.remove):not(.remove-product) {
	color: var(--yb-sf-brand);
}

body.yb-sf-skin.woocommerce-cart .shop_table.cart a:not(.button):not(.btn):not(.remove):not(.remove-product):hover,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a:not(.button):not(.btn):not(.remove):not(.remove-product):hover {
	color: var(--yb-sf-brand-dark);
}

/* Quantity +/- on /cart/ page (drawer already covered above) */
body.yb-sf-skin.woocommerce-cart .quantity,
body.yb-sf-skin.woocommerce-cart .product-quantity .quantity {
	border: 1px solid var(--yb-sf-line) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-surface) !important;
	overflow: hidden;
}

body.yb-sf-skin.woocommerce-cart .quantity .qty {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--yb-sf-ink) !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-cart .quantity .plus,
body.yb-sf-skin.woocommerce-cart .quantity .minus,
body.yb-sf-skin.woocommerce-cart .quantity button.plus,
body.yb-sf-skin.woocommerce-cart .quantity button.minus {
	border-color: var(--yb-sf-line) !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--yb-sf-brand) !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-cart .quantity .plus:hover,
body.yb-sf-skin.woocommerce-cart .quantity .minus:hover {
	background: color-mix(in srgb, var(--yb-sf-accent) 35%, #ffffff) !important;
	color: var(--yb-sf-brand) !important;
}

/* Coupon / Update cart (.btn-default) — cart page + drawer already has high-specificity rules;
   reinforce form.actions scope against Porto dynamic_style / btn-default */
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form .actions .btn-default,
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form .coupon .btn-default,
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form button[name="update_cart"],
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form button[name="apply_coupon"],
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form input[name="update_cart"],
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form input[name="apply_coupon"] {
	border: 1px solid var(--yb-sf-btn-border) !important;
	border-radius: var(--yb-sf-radius) !important;
	background: var(--yb-sf-btn-bg) !important;
	background-image: none !important;
	color: var(--yb-sf-btn-fg) !important;
	font-family: var(--yb-sf-font-body) !important;
	font-size: var(--yb-sf-text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--yb-sf-button-ls) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form .actions .btn-default:hover,
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:hover,
body.yb-sf-skin.woocommerce-cart .woocommerce-cart-form button[name="apply_coupon"]:hover {
	background: var(--yb-sf-btn-bg-hover) !important;
	border-color: var(--yb-sf-brand) !important;
	color: var(--yb-sf-brand) !important;
}

/* Remove × — brand instead of Porto dark / blue-gray */
body.yb-sf-skin.woocommerce-cart .shop_table.cart a.remove,
body.yb-sf-skin.woocommerce-cart .shop_table.cart a.remove-product,
body.yb-sf-skin.woocommerce-cart a.remove.remove-product,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a.remove,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a.remove-product,
body.yb-sf-skin .yb-sf-cart-drawer a.remove.remove-product {
	color: var(--yb-sf-brand) !important;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

body.yb-sf-skin.woocommerce-cart .shop_table.cart a.remove:hover,
body.yb-sf-skin.woocommerce-cart .shop_table.cart a.remove-product:hover,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a.remove:hover,
body.yb-sf-skin .yb-sf-cart-drawer .shop_table.cart a.remove-product:hover {
	color: var(--yb-sf-brand) !important;
	background: color-mix(in srgb, var(--yb-sf-accent) 45%, #ffffff) !important;
}

/* Low-stock badge — already brand; reaffirm against any leftover Porto pink */
body.yb-sf-skin.woocommerce-cart .stock-low-overlay,
body.yb-sf-skin.woocommerce-cart .stock-low-overlay span {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.woocommerce-cart .stock-low-overlay span {
	background: var(--yb-sf-accent) !important;
}

/* -------------------------------------------------------------------------
   Single product: kill dark Porto page-top + right sidebar chrome
   (prod theme option was right-sidebar / page-header-1 — caused "跑版")
   ------------------------------------------------------------------------- */
body.yb-sf-skin.single-product .page-top,
body.yb-sf-skin.single-product .page-top.page-header-1,
body.yb-sf-skin.single-product .page-top.page-header-2 {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	padding-top: 12px !important;
	padding-bottom: 8px !important;
}

body.yb-sf-skin.single-product .page-top .page-title,
body.yb-sf-skin.single-product .page-top .page-title-wrap,
body.yb-sf-skin.single-product .page-top .page-sub-title {
	display: none !important;
}

body.yb-sf-skin.single-product .page-top .breadcrumbs-wrap,
body.yb-sf-skin.single-product .page-top .breadcrumb {
	color: var(--yb-sf-muted, #999) !important;
}

body.yb-sf-skin.single-product .page-top .breadcrumb a {
	color: var(--yb-sf-muted, #999) !important;
}

/* Fallback if PHP layout filter not yet deployed: hide product sidebar */
body.yb-sf-skin.single-product .porto-woo-product-sidebar,
body.yb-sf-skin.single-product #main .sidebar.right-sidebar,
body.yb-sf-skin.single-product #main .sidebar.left-sidebar {
	display: none !important;
}

body.yb-sf-skin.single-product #main.column2 .main-content,
body.yb-sf-skin.single-product #main.column2-right-sidebar .main-content,
body.yb-sf-skin.single-product #main.column2-left-sidebar .main-content {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* -------------------------------------------------------------------------
   Single product: WooCommerce / Porto tabs (#tab-description chrome)
   Porto only-product.css hardcodes inactive tabs to #818692 (cool gray-blue)
   and panel borders to --porto-gray-2. Align strip + panel accents to yb-sf.
   Size Guide (#tab-global_tab) shares the same chrome; do not alter its layout.
   ------------------------------------------------------------------------- */
body.yb-sf-skin.single-product #product-tab.woocommerce-tabs .resp-tabs-list,
body.yb-sf-skin.single-product .woocommerce-tabs .resp-tabs-list {
	border-bottom: 1px solid var(--yb-sf-line) !important;
}

body.yb-sf-skin.single-product #product-tab.woocommerce-tabs .resp-tabs-list li,
body.yb-sf-skin.single-product .woocommerce-tabs .resp-tabs-list li {
	color: var(--yb-sf-muted) !important;
	font-family: var(--yb-sf-font-body) !important;
	letter-spacing: var(--yb-sf-button-ls);
}

body.yb-sf-skin.single-product #product-tab.woocommerce-tabs .resp-tabs-list li:hover,
body.yb-sf-skin.single-product #product-tab.woocommerce-tabs .resp-tabs-list li.resp-tab-active,
body.yb-sf-skin.single-product .woocommerce-tabs .resp-tabs-list li:hover,
body.yb-sf-skin.single-product .woocommerce-tabs .resp-tabs-list li.resp-tab-active {
	color: var(--yb-sf-brand) !important;
	border-bottom-color: var(--yb-sf-brand) !important;
}

/* Mobile accordion headers (same tab set) */
body.yb-sf-skin.single-product .woocommerce-tabs h2.resp-accordion {
	color: var(--yb-sf-brand) !important;
	border-color: var(--yb-sf-line) !important;
	font-family: var(--yb-sf-font-body) !important;
}

body.yb-sf-skin.single-product .woocommerce-tabs h2.resp-tab-active {
	border-bottom-color: var(--yb-sf-brand) !important;
}

/* Tab panels — border / readable body; keep Size Guide structure intact */
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content,
body.yb-sf-skin.single-product .woocommerce-tabs .resp-tab-content,
body.yb-sf-skin.single-product #tab-description {
	border-color: var(--yb-sf-line) !important;
	border-top-color: var(--yb-sf-line) !important;
	/* Soft brand ink — readable long-form, not pure #82213e wall-to-wall */
	color: color-mix(in srgb, var(--yb-sf-brand) 78%, #1a1a1a);
	background-color: transparent;
}

body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h1,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h2,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h3,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h4,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h5,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content h6,
body.yb-sf-skin.single-product #tab-description h1,
body.yb-sf-skin.single-product #tab-description h2,
body.yb-sf-skin.single-product #tab-description h3,
body.yb-sf-skin.single-product #tab-description h4,
body.yb-sf-skin.single-product #tab-description h5,
body.yb-sf-skin.single-product #tab-description h6 {
	color: var(--yb-sf-brand) !important;
	font-family: var(--yb-sf-font-heading) !important;
	letter-spacing: var(--yb-sf-heading-ls);
}

body.yb-sf-skin.single-product .woocommerce-tabs .tab-content a:not(.button):not(.btn),
body.yb-sf-skin.single-product #tab-description a:not(.button):not(.btn) {
	color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin.single-product .woocommerce-tabs .tab-content a:not(.button):not(.btn):hover,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content a:not(.button):not(.btn):focus,
body.yb-sf-skin.single-product #tab-description a:not(.button):not(.btn):hover,
body.yb-sf-skin.single-product #tab-description a:not(.button):not(.btn):focus {
	color: var(--yb-sf-brand-dark) !important;
}

/* Leave Instagram / oEmbed chrome alone (inline IG blue etc.) */
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content .instagram-media,
body.yb-sf-skin.single-product .woocommerce-tabs .tab-content .instagram-media *,
body.yb-sf-skin.single-product #tab-description .instagram-media,
body.yb-sf-skin.single-product #tab-description .instagram-media * {
	color: inherit;
}

body.yb-sf-skin.single-product .woocommerce-tabs .tab-content .instagram-media a,
body.yb-sf-skin.single-product #tab-description .instagram-media a {
	color: #3897f0 !important;
}

/* -------------------------------------------------------------------------
 * Shop loop toolbar — Sort by / Show / pagination / gridlist-toggle
 * Replaces Porto gray borders + soft-primary (#c59b9c) / fashion-ui #ccc/#222
 * with YB brand: #82213e / accent #e9c9cc / surface #fffaf1
 * Covers shop archive + product category (+ shop-loop-after pagination).
 * ------------------------------------------------------------------------- */
body.yb-sf-skin .shop-loop-before,
body.yb-sf-skin .shop-loop-after {
	color: var(--yb-sf-ink);
	border-color: var(--yb-sf-line);
}

body.yb-sf-skin.post-type-archive-product .shop-loop-before,
body.yb-sf-skin.tax-product_cat .shop-loop-before,
body.yb-sf-skin.woocommerce-shop .shop-loop-before {
	border-bottom-color: var(--yb-sf-line);
}

body.yb-sf-skin .shop-loop-before label,
body.yb-sf-skin .shop-loop-after label,
body.yb-sf-skin .shop-loop-before .woocommerce-result-count,
body.yb-sf-skin.tax-product_cat .shop-loop-before .woocommerce-result-count,
body.yb-sf-skin.post-type-archive-product .shop-loop-before .woocommerce-result-count {
	color: var(--yb-sf-muted) !important;
}

/* .orderby / .count selects */
body.yb-sf-skin .shop-loop-before select.orderby,
body.yb-sf-skin .shop-loop-before select.count,
body.yb-sf-skin .shop-loop-after select.orderby,
body.yb-sf-skin .shop-loop-after select.count,
body.yb-sf-skin .shop-loop-before .woocommerce-ordering select,
body.yb-sf-skin .shop-loop-before .woocommerce-viewing select,
body.yb-sf-skin .shop-loop-after .woocommerce-viewing select,
body.yb-sf-skin.post-type-archive-product .shop-loop-before select,
body.yb-sf-skin.tax-product_cat .shop-loop-before select {
	color: var(--yb-sf-ink) !important;
	background-color: transparent;
	/* no !important on border — leave room for :focus brand edge */
	border-color: var(--yb-sf-line);
}

body.yb-sf-skin.post-type-archive-product .shop-loop-before select,
body.yb-sf-skin.tax-product_cat .shop-loop-before select {
	border-bottom-color: var(--yb-sf-line);
}

/* Native <select>:focus is unreliable in some Chromium builds — use :focus-within on form */
body.yb-sf-skin .shop-loop-before .woocommerce-ordering:focus-within,
body.yb-sf-skin .shop-loop-before .woocommerce-viewing:focus-within,
body.yb-sf-skin .shop-loop-after .woocommerce-viewing:focus-within {
	box-shadow: 0 0 0 2px color-mix(in srgb, #e9c9cc 55%, transparent);
	border-radius: 2px;
}

body.yb-sf-skin .shop-loop-before .woocommerce-ordering:focus-within select,
body.yb-sf-skin .shop-loop-before .woocommerce-viewing:focus-within select,
body.yb-sf-skin .shop-loop-after .woocommerce-viewing:focus-within select,
body.yb-sf-skin.post-type-archive-product .shop-loop-before .woocommerce-ordering:focus-within select,
body.yb-sf-skin.post-type-archive-product .shop-loop-before .woocommerce-viewing:focus-within select,
body.yb-sf-skin.tax-product_cat .shop-loop-before .woocommerce-ordering:focus-within select,
body.yb-sf-skin.tax-product_cat .shop-loop-before .woocommerce-viewing:focus-within select,
body.yb-sf-skin .shop-loop-before select:focus,
body.yb-sf-skin .shop-loop-before select:focus-visible,
body.yb-sf-skin .shop-loop-after select:focus,
body.yb-sf-skin .shop-loop-after select:focus-visible {
	/* fashion-ui: border:none + border-bottom — brand underline + soft ring */
	outline: 2px solid #e9c9cc !important;
	outline-offset: 2px !important;
	border-bottom: 1px solid #82213e !important;
	border-bottom-color: #82213e !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, #e9c9cc 55%, transparent) !important;
}

/* Pagination links + current page (before may hide ul; after still shows) */
body.yb-sf-skin .shop-loop-before .page-numbers,
body.yb-sf-skin .shop-loop-after .page-numbers,
body.yb-sf-skin .woocommerce-pagination li a,
body.yb-sf-skin .woocommerce-pagination li span {
	color: var(--yb-sf-ink) !important;
	border-color: var(--yb-sf-line) !important;
	background-color: var(--yb-sf-surface);
}

body.yb-sf-skin .shop-loop-before a.page-numbers,
body.yb-sf-skin .shop-loop-after a.page-numbers,
body.yb-sf-skin .woocommerce-pagination a.page-numbers {
	color: var(--yb-sf-ink) !important;
}

body.yb-sf-skin .shop-loop-before a.page-numbers:hover,
body.yb-sf-skin .shop-loop-before a.page-numbers:focus,
body.yb-sf-skin .shop-loop-after a.page-numbers:hover,
body.yb-sf-skin .shop-loop-after a.page-numbers:focus,
body.yb-sf-skin .woocommerce-pagination li a:hover,
body.yb-sf-skin .woocommerce-pagination li a:focus,
body.yb-sf-skin .woocommerce-pagination a.page-numbers:hover,
body.yb-sf-skin .woocommerce-pagination a.page-numbers:focus {
	color: var(--yb-sf-brand) !important;
	border-color: var(--yb-sf-brand) !important;
	background-color: color-mix(in srgb, var(--yb-sf-accent) 35%, var(--yb-sf-surface)) !important;
}

body.yb-sf-skin .shop-loop-before span.page-numbers.current,
body.yb-sf-skin .shop-loop-after span.page-numbers.current,
body.yb-sf-skin .woocommerce-pagination li span.current,
body.yb-sf-skin .woocommerce-pagination span.page-numbers.current {
	color: #ffffff !important;
	background-color: var(--yb-sf-brand) !important;
	border-color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .woocommerce-pagination span.page-numbers.dots {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--yb-sf-muted) !important;
}

/* Grid / list toggle */
body.yb-sf-skin .shop-loop-before .gridlist-toggle > a,
body.yb-sf-skin .gridlist-toggle > a {
	color: var(--yb-sf-muted) !important;
	border-color: var(--yb-sf-line) !important;
	background-color: var(--yb-sf-surface) !important;
}

body.yb-sf-skin .shop-loop-before .gridlist-toggle > a:hover,
body.yb-sf-skin .shop-loop-before .gridlist-toggle > a:focus,
body.yb-sf-skin .gridlist-toggle > a:hover,
body.yb-sf-skin .gridlist-toggle > a:focus {
	color: var(--yb-sf-brand) !important;
	border-color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shop-loop-before .gridlist-toggle > a.active,
body.yb-sf-skin .gridlist-toggle > a.active {
	color: var(--yb-sf-brand) !important;
	border-color: var(--yb-sf-brand) !important;
	background-color: color-mix(in srgb, var(--yb-sf-accent) 42%, var(--yb-sf-surface)) !important;
}

/* Horizontal filter switch — opened state uses primary */
body.yb-sf-skin .shop-loop-before .porto-product-filters-toggle.opened a,
body.yb-sf-skin .porto-product-filters-toggle.opened a {
	background-color: var(--yb-sf-brand) !important;
}

body.yb-sf-skin .shop-loop-before .porto-product-filters-toggle a,
body.yb-sf-skin .shop-loop-before a.porto-product-filters-toggle {
	color: var(--yb-sf-ink);
	border-color: var(--yb-sf-line);
}

@media (max-width: 991px) {
	body.yb-sf-skin.post-type-archive-product .shop-loop-before,
	body.yb-sf-skin.tax-product_cat .shop-loop-before,
	body.yb-sf-skin.woocommerce-shop .shop-loop-before {
		background: var(--yb-sf-surface) !important;
	}
}

/* =========================================================================
   SF Cart Drawer — native line items (NOT Porto shop_table)
   Appended as a standalone section so parallel checkout token edits elsewhere
   in this file do not collide. Scoped to #yb-sf-cart-drawer.
   Row: thumb | title+variant | qty | price | remove
   ========================================================================= */

#yb-sf-cart-drawer .yb-sf-cart-drawer-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

#yb-sf-cart-drawer .yb-sf-cart-scroll {
	flex: 1;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 4px 0 8px;
}

#yb-sf-cart-drawer .yb-sf-cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

#yb-sf-cart-drawer .yb-sf-cart-item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px 14px;
	align-items: start;
	padding: 16px 18px;
	border-bottom: 1px solid var(--yb-sf-cart-line);
	box-sizing: border-box;
}

#yb-sf-cart-drawer .yb-sf-cart-thumb {
	position: relative;
	width: 84px;
	background: #fff;
	border: 1px solid var(--yb-sf-cart-line);
	overflow: hidden;
	border-radius: var(--yb-sf-radius, 0);
	align-self: stretch;
}

#yb-sf-cart-drawer .yb-sf-cart-thumb a {
	display: block;
	pointer-events: none; /* lightbox JS may re-enable; avoid accidental PDP nav */
}

#yb-sf-cart-drawer .yb-sf-cart-thumb img {
	display: block;
	width: 100%;
	height: 104px;
	object-fit: cover;
}

#yb-sf-cart-drawer .yb-sf-cart-thumb .stock-low-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	margin: 0;
	padding: 10px 3px 3px;
	background: linear-gradient(transparent, color-mix(in srgb, var(--yb-sf-brand) 22%, transparent));
	pointer-events: none !important;
	z-index: 1;
}

#yb-sf-cart-drawer .yb-sf-cart-thumb .stock-low-overlay span {
	display: inline-block;
	background: var(--yb-sf-accent);
	color: var(--yb-sf-brand);
	padding: 2px 6px;
	border-radius: var(--yb-sf-radius, 0);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

#yb-sf-cart-drawer .yb-sf-cart-item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#yb-sf-cart-drawer .yb-sf-cart-item-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: start;
}

#yb-sf-cart-drawer .yb-sf-cart-item-info {
	min-width: 0;
}

#yb-sf-cart-drawer .yb-sf-cart-item-name {
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	margin: 0 0 4px;
	color: var(--yb-sf-cart-ink);
	word-break: break-word;
}

#yb-sf-cart-drawer .yb-sf-cart-item-name a {
	color: inherit;
	text-decoration: none;
}

#yb-sf-cart-drawer .yb-sf-cart-item-name a:hover {
	color: var(--yb-sf-brand);
}

#yb-sf-cart-drawer .yb-sf-cart-item-variation,
#yb-sf-cart-drawer .yb-sf-cart-item-variation dl,
#yb-sf-cart-drawer .yb-sf-cart-item-variation dd,
#yb-sf-cart-drawer .yb-sf-cart-item-variation p {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--yb-sf-cart-muted);
}

#yb-sf-cart-drawer .yb-sf-cart-item-variation dl {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
}

#yb-sf-cart-drawer .yb-sf-cart-item-variation dt {
	display: none; /* CCC-style: value only when labels are noisy */
}

#yb-sf-cart-drawer .yb-sf-cart-item-variation dd {
	margin: 0;
}

#yb-sf-cart-drawer .yb-sf-cart-item-variation dd::after {
	content: '';
}

#yb-sf-cart-drawer .yb-sf-cart-item .cart-item-stock-status {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#yb-sf-cart-drawer .yb-sf-cart-item .cart-item-stock-status.out-of-stock {
	color: #b42318;
}

#yb-sf-cart-drawer .yb-sf-cart-remove {
	width: 32px;
	height: 32px;
	margin: -4px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--yb-sf-cart-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
	border-bottom: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

#yb-sf-cart-drawer .yb-sf-cart-remove:hover,
#yb-sf-cart-drawer .yb-sf-cart-remove:focus-visible {
	background: rgba(42, 36, 32, 0.06);
	color: var(--yb-sf-cart-ink);
	outline: none;
}

#yb-sf-cart-drawer .yb-sf-cart-item-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;
}

#yb-sf-cart-drawer .yb-sf-cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--yb-sf-cart-line);
	background: var(--yb-sf-surface);
	border-radius: var(--yb-sf-radius, 0);
	overflow: hidden;
	flex-shrink: 0;
}

#yb-sf-cart-drawer .yb-sf-qty-btn {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--yb-sf-brand);
	padding: 0;
}

#yb-sf-cart-drawer .yb-sf-qty-btn:hover {
	background: rgba(42, 36, 32, 0.04);
}

#yb-sf-cart-drawer .yb-sf-qty-input {
	width: 38px;
	height: 34px;
	border: 0;
	border-left: 1px solid var(--yb-sf-cart-line);
	border-right: 1px solid var(--yb-sf-cart-line);
	text-align: center;
	font-size: 13px;
	background: transparent;
	color: var(--yb-sf-cart-ink);
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

#yb-sf-cart-drawer .yb-sf-qty-input::-webkit-outer-spin-button,
#yb-sf-cart-drawer .yb-sf-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#yb-sf-cart-drawer .yb-sf-cart-line-total {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.02em;
	color: var(--yb-sf-cart-ink);
	margin-left: auto;
}

#yb-sf-cart-drawer .yb-sf-cart-line-total .woocommerce-Price-amount {
	color: inherit;
}

/* Kill leftover Porto/WC table chrome if any fragment slips through */
#yb-sf-cart-drawer .shop_table,
#yb-sf-cart-drawer .cart-v2,
#yb-sf-cart-drawer .woocommerce-cart-form .actions,
#yb-sf-cart-drawer .cart-collaterals {
	display: none !important;
}

@media (max-width: 380px) {
	#yb-sf-cart-drawer .yb-sf-cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
		padding: 14px 14px;
		gap: 10px 12px;
	}

	#yb-sf-cart-drawer .yb-sf-cart-thumb {
		width: 72px;
	}

	#yb-sf-cart-drawer .yb-sf-cart-thumb img {
		height: 92px;
	}

	#yb-sf-cart-drawer .yb-sf-qty-btn {
		width: 30px;
		height: 32px;
	}

	#yb-sf-cart-drawer .yb-sf-qty-input {
		width: 34px;
		height: 32px;
	}
}

#yb-sf-cart-drawer .yb-sf-cart-drawer-content > .yb-sf-cart-empty {
	flex: 1;
	min-height: calc(100vh - 72px);
}