/**
 * Capacitor App chrome adjustments.
 * All selectors MUST start with html.yba-app (class set by head inline JS).
 * File is enqueued for everyone; rules are inert without the class.
 *
 * Shell architecture: site runs in an iframe above the native tab bar.
 * Do NOT lift sticky CTAs by tab-bar height — that double-pads and breaks PDP.
 */

html.yba-app {
	--yba-safe-top: env(safe-area-inset-top, 0px);
	--yba-safe-bottom: env(safe-area-inset-bottom, 0px);
	--yba-tab-h: 0px;
}

/* ----- Header: keep Logo + search + hamburger; hide account / cart -----
 * One safe-area only. Previous content-box + height(+safe) + padding-top(safe)
 * double-counted inset (~59×2) → ~240px cream band on PDP/cart.
 * border-box: total = header-h + safe; small 8px air below the island. */
html.yba-app #yb-sf-header {
	padding-top: calc(8px + var(--yba-safe-top));
	padding-bottom: 8px;
	height: calc(var(--yb-sf-header-h, 100px) + var(--yba-safe-top));
	box-sizing: border-box;
}

html.yba-app #yb-sf-header .yb-sf-header__inner {
	height: 100%;
}

html.yba-app #yb-sf-header .yb-sf-header__account-btn,
html.yba-app #yb-sf-header .yb-sf-header__cart-btn {
	display: none !important;
}

/* ----- Left nav drawer: keep close / head below Dynamic Island ----- */
html.yba-app #yb-sf-nav .yb-sf-nav__panel {
	padding-top: var(--yba-safe-top);
	box-sizing: border-box;
}

html.yba-app #yb-sf-nav .yb-sf-nav__head {
	flex-shrink: 0;
}

/* Orders / account zone in hamburger must stay visible (logged-in shell hydrate). */
html.yba-app #ybpc-nav-account-slot,
html.yba-app .yb-sf-nav__account,
html.yba-app .yb-sf-nav__account-links,
html.yba-app .yb-sf-nav__account-link,
html.yba-app .yb-sf-nav__account-cta {
	display: revert !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* ----- Search layer ----- */
html.yba-app #yb-sf-search .yb-sf-search__panel {
	padding-top: var(--yba-safe-top);
	box-sizing: border-box;
}

/* ----- Cart drawer: full-bleed panel; safe-area via padding (no top gap) ----- */
html.yba-app #yb-sf-cart-drawer .yb-sf-cart-panel {
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	padding-top: var(--yba-safe-top);
	box-sizing: border-box;
	border-radius: 0;
}

html.yba-app #yb-sf-cart-drawer .yb-sf-cart-header {
	padding-top: 12px;
	min-height: 52px;
}

html.yba-app #yb-sf-cart-drawer .yb-sf-cart-close {
	width: 44px;
	height: 44px;
	position: relative;
	z-index: 3;
}

html.yba-app #yb-sf-cart-drawer .yb-sf-cart-overlay {
	z-index: 1;
}

/* ----- Hide web-only chrome that fights the native shell ----- */
html.yba-app #yb-lang-toggle,
html.yba-app .yb-lang-toggle,
html.yba-app .wa__btn_popup,
html.yba-app .wa__popup,
html.yba-app #ig-welcome-popup,
html.yba-app .ig-welcome-popup,
html.yba-app .mysticky-welcomebar-fixed,
html.yba-app .mysticky-welcomebar-fixed-wrap,
html.yba-app #mysticky-welcomebar-root,
html.yba-app footer#footer,
html.yba-app .footer-top,
html.yba-app .footer-main,
html.yba-app .footer-bottom,
html.yba-app .porto-block-html-after-footer {
	display: none !important;
}

/*
 * Sticky CTAs / Shopee panel — iframe already ends above native tabs.
 * Only reset mistaken bottom offsets; never apply `bottom` to inner buttons
 * (.sticky-add-btn is flex child, not fixed — that was breaking PDP layout).
 */
html.yba-app .product-sticky-bar,
html.yba-app .cart-sticky-checkout {
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	/* iframe has no home-indicator inset; drop env() padding that looks like a gap */
	padding-bottom: 10px !important;
	z-index: 40;
}

html.yba-app .shopee-panel {
	bottom: 0 !important;
	padding-bottom: 12px !important;
	max-height: min(85vh, 100%) !important;
	z-index: 50;
}

html.yba-app .shopee-panel-overlay {
	bottom: 0 !important;
	z-index: 49;
}

html.yba-app .lsc-sticky-footer,
html.yba-app .lsc-pn-wrap {
	bottom: 0 !important;
	padding-bottom: 8px !important;
}

/* PDP: room above sticky bar so price/variants aren't covered */
html.yba-app body.single-product .site-main,
html.yba-app body.single-product #main,
html.yba-app body.single-product .product {
	padding-bottom: 88px;
}

html.yba-app body.single-product .summary {
	padding-bottom: 8px;
}

/* Page content: account for taller padded header */
html.yba-app body.yb-sf-skin {
	--yb-sf-chrome-h: calc(var(--yb-sf-announce-h, 0px) + var(--yb-sf-header-h, 100px) + var(--yba-safe-top));
}