/* ============================================================
   App shell and structural layout
   ============================================================ */

/* --- Loading screen --- */
#loading {
	position: fixed;
	inset: 0;
	z-index: var(--z-loading);
	background: var(--loading-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity var(--tr-loading);
}
#loading.fade-out {
	opacity: 0;
	pointer-events: none;
}
#loading .owl-logo {
	width: var(--loading-owl-w);
	height: auto;
}
#loading .wordmark {
	width: var(--loading-wordmark-w);
	margin-top: var(--loading-wordmark-mt);
}
#loading .spinner {
	margin-top: var(--loading-spinner-mt);
	width: var(--loading-spinner-size);
	height: var(--loading-spinner-size);
	border: var(--loading-spinner-border) solid var(--loading-spinner-track);
	border-top-color: var(--loading-spinner-head);
	border-radius: 50%;
	animation: spin var(--loading-spin-speed) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- App container ---
   When installed to the iOS home screen and launched standalone, the
   viewport extends behind the notch/Dynamic Island (top) and home
   indicator (bottom). Safe-area insets keep the content within the
   usable region. Dynamic viewport height (100dvh) handles the Safari
   URL bar collapse on scroll, with a fallback to 100vh for older
   browsers. */
#app {
	display: none;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	background: var(--body-bg);
	padding-top:    env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left:   env(safe-area-inset-left);
	padding-right:  env(safe-area-inset-right);
}
#app.visible { display: flex; }

/* The loading screen should also respect safe-area insets so the owl
   and wordmark don't collide with the notch. */
#loading {
	padding-top:    env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

/* --- Header --- */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--header-pad);
	flex-shrink: 0;
	position: relative;
	overflow: visible;
}
.header-left {
	display: flex;
	align-items: center;
}
.header-right {
	display: flex;
	align-items: center;
	position: relative;
}
.header .owl-icon {
	display: none;
	height: var(--owl-icon-h);
	width: auto;
	margin-right: var(--sp-sm);
}
.header .owl-logo-large {
	display: block;
	width: var(--owl-logo-w);
	height: auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: var(--owl-logo-gap);
	z-index: 0;
}
.header .wordmark {
	height: var(--wordmark-h);
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.header .globe-btn {
	height: var(--globe-btn-h);
	width: auto;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

/* --- Account button --- */
.header .account-btn {
	display: none;
	height: var(--account-btn-h);
	width: auto;
	cursor: pointer;
	margin-right: var(--header-icon-gap);
	position: relative;
	z-index: 1;
}
body.logged-in .header .account-btn {
	display: block;
}

/* --- Cart button ---
   The cart icon is hidden when the cart is empty; its presence
   in the header is itself the indicator that the cart has items. */
.header .cart-btn {
	display: none;
	height: var(--cart-btn-h);
	width: auto;
	cursor: pointer;
	margin-right: var(--header-icon-gap);
	position: relative;
	z-index: 1;
}
.header .cart-btn.visible {
	display: block;
}

/* --- Content area --- */
.content-area {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding: var(--content-pad);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/* --- Tab strip row --- */
.tab-row {
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
	min-width: 0;
}
.tab-strip {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tab-strip::-webkit-scrollbar { display: none; }

/* --- Window box --- */
.window-box {
	background: var(--window-bg);
	border-radius: var(--window-radius-top-left) var(--window-radius-top-right) var(--window-radius-bottom) var(--window-radius-bottom);
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* --- Mobile search bar (below window) --- */
.mobile-search {
	display: none;
	flex-shrink: 0;
	padding: var(--mobile-search-pad);
}