/* =========================================================
   Vendora — mobile layout (app-style, reference: Chinese
   app UI). White sticky top bar + hamburger drawer +
   bottom tab bar. Desktop styles are untouched.
   ========================================================= */

/* Mobile-only elements: hidden on desktop. */
.vd-m-burger,
.vd-m-logo,
.vd-m-search-open,
.vd-drawer,
.vd-m-search,
.vd-m-tabbar,
.vd-m-searchbar-card {
	display: none;
}

@media (max-width: 920px) {
	/* ---------- Shell: one column, room for the fixed tab bar ---------- */
	.vd-shell {
		padding: 0 16px 110px;
	}

	/* The desktop left sidebar (logo + nav + promo) moves into the drawer. */
	.vd-side-left {
		display: none;
	}

	/* ---------- Top bar: white sticky app bar ---------- */
	.vd-topbar {
		position: sticky;
		top: 0;
		z-index: 100;
		height: auto;
		min-height: 64px;
		margin: 0 -16px;
		padding: 10px 10px;
		background: var(--vd-card);
		border-bottom: 1px solid var(--vd-border);
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		gap: 4px;
	}

	/* The cart drawer (z-95) and its overlay (z-90) sit BELOW the sticky top
	   bar (z-100) and the bottom tab bar (z-200), so on mobile the drawer's
	   "Cart" header + close button get hidden behind the top bar and the
	   checkout button hides behind the tab bar. Lift the cart above both,
	   but keep it under the menu drawer (z-300) and search overlay (z-310). */
	.vd-cart-overlay {
		z-index: 250;
	}

	.vd-cart-drawer {
		z-index: 260;
	}

	.vd-topbar.scrolled {
		box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
	}

	.vd-search,
	.vd-ask-btn,
	.vd-pill {
		display: none;
	}

	.vd-header-actions {
		margin-left: auto;
		gap: 2px;
	}

	/* The bell keeps its border on desktop, but on mobile the border circle
	   makes it look glued to the cart and breaks the even rhythm between the
	   three plain icon buttons — drop it so all three match. */
	.vd-header-actions .vd-notify-btn {
		border: none;
	}

	/* Hamburger button. */
	.vd-m-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		flex: none;
		color: var(--vd-text);
	}

	.vd-m-burger:hover {
		background: var(--vd-inset);
	}

	.vd-m-burger svg {
		width: 24px;
		height: 24px;
	}

	/* Brand in the bar. */
	.vd-m-logo {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
		font-size: 18px;
		font-weight: 800;
		color: var(--vd-text);
	}

	.vd-m-logo .vd-logo-mark {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}

	.vd-m-logo .vd-logo-mark svg {
		width: 22px;
		height: 22px;
	}

	/* Right-side actions: slightly smaller buttons + tight gap so the icon
	   group reads as one cluster instead of spread-out items. */
	.vd-header-actions .vd-icon-btn {
		width: 38px;
		height: 38px;
	}

	.vd-header-actions .vd-icon-btn svg {
		width: 20px;
		height: 20px;
	}

	/* Account entry lives in the bottom nav (My account / Log in), so the
	   avatar is dropped from the mobile top bar — it also frees up room for
	   the brand name to stop truncating. */
	.vd-header-actions .vd-avatar {
		display: none;
	}

	.vd-m-logo span:last-child {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Search icon button (opens the overlay). */
	.vd-m-search-open {
		display: inline-flex;
	}

	/* ---------- Drawer menu ---------- */
	.vd-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 300;
		visibility: hidden;
		pointer-events: none;
	}

	.vd-drawer.open {
		visibility: visible;
		pointer-events: auto;
	}

	.vd-drawer-overlay {
		position: absolute;
		inset: 0;
		background: rgba(9, 9, 11, .45);
		opacity: 0;
		transition: opacity .25s ease;
	}

	.vd-drawer.open .vd-drawer-overlay {
		opacity: 1;
	}

	.vd-drawer-panel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 86vw);
		background: var(--vd-card);
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 14px 14px 20px;
		overflow-y: auto;
		transform: translateX(-103%);
		transition: transform .28s cubic-bezier(.32, .72, .35, 1);
		box-shadow: 0 10px 40px rgba(16, 24, 40, .2);
	}

	.vd-drawer.open .vd-drawer-panel {
		transform: translateX(0);
	}

	.vd-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 4px 4px 2px;
	}

	.vd-drawer-close {
		width: 38px;
		height: 38px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		color: var(--vd-text-2);
	}

	.vd-drawer-close:hover {
		background: var(--vd-inset);
		color: var(--vd-text);
	}

	.vd-drawer-close svg {
		width: 20px;
		height: 20px;
	}

	.vd-drawer-nav {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.vd-drawer-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 600;
		color: var(--vd-text-2);
	}

	.vd-drawer-item svg {
		width: 20px;
		height: 20px;
		flex: none;
		color: var(--vd-text-3);
	}

	.vd-drawer-item:hover {
		background: var(--vd-inset);
		color: var(--vd-text);
	}

	.vd-drawer-item.active {
		background: var(--vd-primary-soft);
		color: var(--vd-primary);
	}

	.vd-drawer-item.active svg {
		color: var(--vd-primary);
	}

	.vd-drawer-item .vd-nav-badge {
		margin-left: auto;
	}

	.vd-drawer .vd-side-promo {
		margin-top: auto;
	}

	/* ---------- Search overlay ---------- */
	.vd-m-search {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 310;
	}

	.vd-m-search[hidden] {
		display: none;
	}

	.vd-m-search-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(9, 9, 11, .45);
	}

	.vd-m-search-bar {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
		padding-top: calc(10px + env(safe-area-inset-top));
		background: var(--vd-card);
	}

	.vd-m-search-cancel {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		color: var(--vd-text-2);
	}

	.vd-m-search-cancel:hover {
		background: var(--vd-inset);
	}

	.vd-m-search-cancel svg {
		width: 20px;
		height: 20px;
	}

	.vd-m-search-form {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--vd-field);
		border: 1px solid var(--vd-border);
		border-radius: 999px;
		padding: 11px 12px 11px 16px;
		color: var(--vd-text-3);
	}

	.vd-m-search-form:focus-within {
		border-color: var(--vd-primary-border);
		box-shadow: 0 0 0 3px var(--vd-primary-soft);
	}

	.vd-m-search-form input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: none;
		outline: none;
		font-size: 15px;
		color: var(--vd-text);
	}

	.vd-m-search-go {
		width: 32px;
		height: 32px;
		flex: none;
		border-radius: 50%;
		background: var(--vd-primary);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.vd-m-search-go svg {
		width: 16px;
		height: 16px;
	}

	/* ---------- Bottom tab bar ---------- */
	.vd-m-tabbar {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		background: rgba(255, 255, 255, .97);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--vd-border);
		padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
	}

	.vd-m-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 4px 2px;
		font-size: 11px;
		font-weight: 600;
		color: var(--vd-text-3);
	}

	.vd-m-tab svg {
		width: 22px;
		height: 22px;
	}

	.vd-m-tab.active {
		color: var(--vd-primary);
	}

	/* Floating rail: hidden on mobile (reference design has no rail, and it
	   overlaps the content column on narrow screens). */
	.vd-rail {
		display: none;
	}

	/* Lock page scroll while the drawer / search overlay is open. */
	body.vd-lock {
		overflow: hidden;
	}

	/* ---------- Latest News cards: text on top, images below ---------- */
	.vd-post {
		flex-direction: column;
		gap: 12px;
	}

	/* Desktop left thumbnail is replaced by the image strip below. */
	.vd-post-img {
		display: none;
	}

	/* Let the title wrap so it shows in full. */
	.vd-post-title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.vd-post-m-imgs {
		display: flex;
		gap: 8px;
		width: 100%;
	}

	.vd-post-m-imgs a {
		flex: 1;
		min-width: 0;
		border-radius: 10px;
		overflow: hidden;
		background: var(--vd-inset);
	}

	.vd-post-m-imgs img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* One image: full-width banner. Two/three: equal-width row. */
	.vd-post-m-imgs.has-1 a {
		height: 190px;
	}

	.vd-post-m-imgs.has-2 a,
	.vd-post-m-imgs.has-3 a {
		height: 110px;
	}

	/* Review/reply sheet: full-width bottom sheet on phones. */
	.vd-c-sheet-panel {
		max-width: none;
		border-radius: 16px 16px 0 0;
	}

	/* ---------- Comment bar: app-style fixed bar above the bottom tab bar ----------
	   The bar leaves the document flow, so it must sit above the tab bar
	   (z-200) but below the drawer (z-300) / search (z-310) / sheet (z-400). */
	.vd-c-bar {
		position: fixed;
		left: 0;
		right: 0;
		/* --vd-tabbar-h is set by cbar.js (measured tab bar height, safe-area included). */
		bottom: var( --vd-tabbar-h, 58px );
		z-index: 210;
		margin: 0;
		padding: 8px 10px;
		background: rgba(255, 255, 255, .97);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border: none;
		border-top: 1px solid var(--vd-border);
		border-radius: 0;
		box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
	}

	/* The input pill reads better with a soft inset fill on the white bar. */
	.vd-c-bar-input {
		background: var(--vd-inset);
		border-color: transparent;
	}

	.vd-c-bar-input:hover {
		border-color: var(--vd-primary-border);
	}

	/* The fixed bar (~55px) + tab bar cover the bottom of the page, so pages
	   that carry the bar need extra bottom room (tab bar height via cbar.js). */
	body.vd-has-cbar .vd-shell {
		padding-bottom: calc( var( --vd-tabbar-h, 58px ) + 70px );
	}
}

@media (max-width: 640px) {
	/* ---------- Home: hero as a compact banner ---------- */
	.vd-hero {
		padding: 20px 16px;
	}

	.vd-hero h1 {
		font-size: 26px;
	}

	.vd-hero-sub {
		font-size: 14px;
	}

	.vd-hero-actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	.vd-hero-actions .vd-btn {
		flex: 1;
		min-width: 140px;
		justify-content: center;
	}

	.vd-showcase {
		height: 280px;
		margin-top: 20px;
	}

	/* ---------- Search pill under the hero ---------- */
	.vd-m-searchbar-card {
		display: block;
		padding: 10px 12px;
	}

	.vd-m-searchbar {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		background: var(--vd-field);
		border: 1px solid var(--vd-border);
		border-radius: 999px;
		font-size: 14.5px;
		color: var(--vd-text-3);
		text-align: left;
	}

	.vd-m-searchbar svg {
		width: 18px;
		height: 18px;
		flex: none;
	}

	.vd-m-searchbar em {
		margin-left: auto;
		font-style: normal;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--vd-primary);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.vd-m-searchbar em svg {
		width: 15px;
		height: 15px;
	}

	/* ---------- Products: reference-style rows (image left, info right) ---------- */
	.vd-product-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.vd-product {
		flex-direction: row;
		align-items: stretch;
	}

	.vd-product-img {
		flex: 0 0 108px;
		width: 108px;
		border-radius: 14px 0 0 14px;
		background-size: cover;
	}

	.vd-product-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vd-product-badge {
		top: 6px;
		left: 6px;
		padding: 2px 6px;
	}

	.vd-product-badge b {
		font-size: 11px;
	}

	.vd-product-body {
		flex: 1;
		min-width: 0;
		margin-top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding: 10px 12px;
	}

	.vd-product-sub {
		margin-top: 0;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.vd-product-price {
		margin-top: 2px;
	}

	/* ---------- Case studies: horizontal scroll row ---------- */
	.vd-case-grid {
		display: flex;
		overflow-x: auto;
		gap: 10px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.vd-case-grid::-webkit-scrollbar {
		display: none;
	}

	.vd-case-item {
		flex: 0 0 62%;
	}

	/* ---------- Link directory: full-width cards ---------- */
	.vd-link-card {
		padding: 12px;
	}

	.vd-link-logo {
		width: 44px;
		height: 44px;
	}
}