/*
 * Millennium Blinds Commerce — Native App Mobile Experience
 * Transforms the WooCommerce storefront into a PWA-grade native-feeling UI.
 *
 * Architecture:
 *   1. CSS custom properties (mirrors mBlinds design tokens)
 *   2. Page shell + safe-area insets (notch / home-indicator support)
 *   3. Bottom Tab Bar — primary nav for mobile
 *   4. Slide-out Drawer — full menu overlay
 *   5. App-style header (sticky, blur-backed)
 *   6. Smooth page transitions
 *   7. Touch-optimised product cards
 *   8. Native-feeling configurator stepper
 *   9. Floating Action Button (request quote / swatches)
 *  10. Pull-to-refresh indicator
 *  11. Toast notifications
 *  12. Commerce Console admin — responsive mobile layout
 */

/* ─── 1. Design Tokens ───────────────────────────────────────── */
:root {
	--ink:          #231F20;
	--camel:        #CBAA7B;
	--camel-deep:   #B08E5A;
	--teal:         #4C6B70;
	--stone:        #A8A396;
	--stone-30:     #E4E2DB;
	--cotton:       #FCFBF8;
	--oyster:       #F1EFEA;
	--paper:        #F7F5F0;

	/* Native spacing */
	--safe-top:     env(safe-area-inset-top, 0px);
	--safe-bottom:  env(safe-area-inset-bottom, 0px);
	--safe-left:    env(safe-area-inset-left, 0px);
	--safe-right:   env(safe-area-inset-right, 0px);

	/* Tab bar */
	--tab-h:        58px;
	--tab-bg:       rgba(252, 251, 248, 0.95);

	/* Header */
	--header-h:     56px;
	--header-bg:    rgba(252, 251, 248, 0.88);

	/* Drawer */
	--drawer-w:     82vw;
	--drawer-max:   340px;

	/* Transitions */
	--t-fast:       0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--t-med:        0.28s cubic-bezier(0.4, 0, 0.2, 1);
	--t-spring:     0.38s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Shadows */
	--shadow-card:  0 2px 12px rgba(35,31,32,.08), 0 1px 3px rgba(35,31,32,.06);
	--shadow-float: 0 8px 32px rgba(35,31,32,.18), 0 2px 8px rgba(35,31,32,.12);
	--shadow-sheet: 0 -4px 32px rgba(35,31,32,.12);
}

/* ─── 2. Page Shell ──────────────────────────────────────────── */
@media (max-width: 768px) {

html, body {
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
}

body.mbc-app {
	padding-bottom: calc(var(--tab-h) + var(--safe-bottom));
	background: var(--cotton);
}

/* Push content below the sticky app header */
body.mbc-app .site-header,
body.mbc-app header.site-header {
	display: none !important; /* replaced by mbc-app-header */
}

/* ─── 3. App Header ──────────────────────────────────────────── */
.mbc-app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	height: calc(var(--header-h) + var(--safe-top));
	padding-top: var(--safe-top);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(168,163,150,.15);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-left: calc(16px + var(--safe-left));
	padding-right: calc(16px + var(--safe-right));
	padding-bottom: 10px;
	box-shadow: 0 1px 0 rgba(168,163,150,.12);
	transform: translateZ(0);
}

.mbc-app-header .mbc-logo {
	height: 28px;
	width: auto;
}

.mbc-app-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mbc-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	color: var(--ink);
	transition: background var(--t-fast);
}
.mbc-icon-btn:active {
	background: var(--oyster);
	transform: scale(0.94);
}
.mbc-icon-btn svg { width: 22px; height: 22px; }

/* Cart badge */
.mbc-cart-badge {
	position: absolute;
	top: 5px;
	right: 5px;
	background: var(--camel);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
	border: 1.5px solid var(--cotton);
}

/* Page content spacing for fixed header */
body.mbc-app .site-main,
body.mbc-app main,
body.mbc-app #content {
	margin-top: calc(var(--header-h) + var(--safe-top));
}

/* ─── 4. Bottom Tab Bar ──────────────────────────────────────── */
.mbc-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	height: calc(var(--tab-h) + var(--safe-bottom));
	padding-bottom: var(--safe-bottom);
	background: var(--tab-bg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(168,163,150,.18);
	display: flex;
	align-items: stretch;
	box-shadow: var(--shadow-sheet);
	transform: translateZ(0);
}

.mbc-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	color: var(--stone);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: color var(--t-fast), transform var(--t-fast);
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	padding-top: 6px;
}
.mbc-tab svg {
	width: 22px;
	height: 22px;
	transition: transform var(--t-spring);
	stroke-width: 1.75;
}
.mbc-tab.mbc-tab-active {
	color: var(--camel);
}
.mbc-tab.mbc-tab-active svg {
	transform: translateY(-2px) scale(1.08);
	stroke-width: 2.2;
}
.mbc-tab:active {
	transform: scale(0.92);
}

/* Active indicator pill */
.mbc-tab.mbc-tab-active::before {
	content: '';
	position: absolute;
	top: 0;
	width: 32px;
	height: 3px;
	background: var(--camel);
	border-radius: 0 0 3px 3px;
}

/* ─── 5. Slide-out Drawer ────────────────────────────────────── */
.mbc-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 950;
	background: rgba(35,31,32,.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t-med);
}
.mbc-drawer-overlay.mbc-open {
	opacity: 1;
	pointer-events: auto;
}

.mbc-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 960;
	width: min(var(--drawer-w), var(--drawer-max));
	background: var(--ink);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--t-med);
	box-shadow: var(--shadow-float);
	padding-left: var(--safe-left);
}
.mbc-drawer.mbc-open {
	transform: translateX(0);
}

.mbc-drawer-header {
	padding: calc(20px + var(--safe-top)) 24px 20px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.mbc-drawer-header img {
	height: 28px;
	filter: brightness(0) invert(1);
}
.mbc-drawer-tagline {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.35);
	margin-top: 6px;
}

.mbc-drawer-nav {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px 0;
}

.mbc-drawer-section-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255,255,255,.25);
	padding: 16px 24px 6px;
}

.mbc-drawer-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 24px;
	color: rgba(255,255,255,.75);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: background var(--t-fast), color var(--t-fast);
	-webkit-user-select: none;
	user-select: none;
}
.mbc-drawer-link svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	opacity: .7;
	stroke-width: 1.75;
}
.mbc-drawer-link:active,
.mbc-drawer-link.mbc-active {
	background: rgba(203,170,123,.12);
	color: var(--camel);
}
.mbc-drawer-link.mbc-active svg { opacity: 1; }

.mbc-drawer-divider {
	height: 1px;
	background: rgba(255,255,255,.07);
	margin: 8px 0;
}

.mbc-drawer-footer {
	padding: 16px 24px calc(16px + var(--safe-bottom));
	border-top: 1px solid rgba(255,255,255,.08);
}
.mbc-drawer-footer-row {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,.35);
	font-size: 11px;
}

/* ─── 6. Page Transitions ────────────────────────────────────── */
body.mbc-app .woocommerce,
body.mbc-app .mbc-page-content {
	animation: mbc-fade-up 0.28s ease both;
}

@keyframes mbc-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* View transition shimmer for navigation */
.mbc-page-transitioning * {
	pointer-events: none;
}
.mbc-page-transitioning main {
	opacity: 0.5;
	transition: opacity 0.15s;
}

/* ─── 7. Product Cards ───────────────────────────────────────── */
body.mbc-app ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px !important;
	padding: 16px !important;
	margin: 0 !important;
	list-style: none !important;
}

body.mbc-app ul.products li.product {
	margin: 0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: var(--shadow-card) !important;
	transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
	-webkit-user-select: none;
	user-select: none;
}
body.mbc-app ul.products li.product:active {
	transform: scale(0.97) !important;
	box-shadow: 0 1px 4px rgba(35,31,32,.08) !important;
}

body.mbc-app ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

body.mbc-app ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 12px 2px !important;
	color: var(--ink) !important;
	line-height: 1.3 !important;
}

body.mbc-app ul.products li.product .price {
	font-size: 13px !important;
	padding: 0 12px 10px !important;
	color: var(--camel-deep) !important;
	font-weight: 700 !important;
}

body.mbc-app ul.products li.product .button {
	display: none !important; /* CTA handled by card tap */
}

/* ─── 8. Configurator — Native Stepper ───────────────────────── */
body.mbc-app .mbc-config-steps {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	gap: 0;
	scrollbar-width: none;
	padding: 0;
}
body.mbc-app .mbc-config-steps::-webkit-scrollbar { display: none; }

body.mbc-app .mbc-config-step-panel {
	min-width: 100%;
	scroll-snap-align: start;
	padding: 20px 16px;
}

/* Step progress pills */
.mbc-step-pills {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 12px 16px;
}
.mbc-step-pill {
	height: 4px;
	border-radius: 2px;
	background: var(--stone-30);
	flex: 1;
	max-width: 40px;
	transition: background var(--t-med), flex var(--t-med);
}
.mbc-step-pill.mbc-done { background: var(--camel); }
.mbc-step-pill.mbc-current {
	background: var(--ink);
	flex: 2;
}

/* Fabric swatch grid for configurator */
body.mbc-app .mbc-swatch-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 8px 0;
}
body.mbc-app .mbc-swatch-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
body.mbc-app .mbc-swatch-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 3px solid transparent;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
	transition: transform var(--t-spring), border-color var(--t-fast), box-shadow var(--t-fast);
}
body.mbc-app .mbc-swatch-item:active .mbc-swatch-circle {
	transform: scale(0.9);
}
body.mbc-app .mbc-swatch-item.mbc-selected .mbc-swatch-circle {
	border-color: var(--ink);
	box-shadow: 0 0 0 2px var(--cotton), 0 0 0 4px var(--ink);
	transform: scale(1.08);
}
body.mbc-app .mbc-swatch-label {
	font-size: 10px;
	text-align: center;
	color: var(--stone);
	line-height: 1.2;
}

/* Dimension input — large touch targets */
body.mbc-app .mbc-dim-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0;
}
body.mbc-app .mbc-dim-field label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--stone);
	display: block;
	margin-bottom: 6px;
}
body.mbc-app .mbc-dim-field input[type="number"] {
	width: 100%;
	height: 52px;
	border: 2px solid var(--stone-30);
	border-radius: 10px;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	color: var(--ink);
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--t-fast);
}
body.mbc-app .mbc-dim-field input[type="number"]:focus {
	border-color: var(--camel);
	outline: none;
	box-shadow: 0 0 0 3px rgba(203,170,123,.18);
}

/* ─── 9. Floating Action Button ──────────────────────────────── */
.mbc-fab {
	position: fixed;
	right: calc(16px + var(--safe-right));
	bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
	z-index: 890;
	width: 52px;
	height: 52px;
	border-radius: 26px;
	background: var(--ink);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-float);
	transition: transform var(--t-spring), box-shadow var(--t-fast), width var(--t-med), border-radius var(--t-med);
	overflow: hidden;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}
.mbc-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.mbc-fab-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	max-width: 0;
	overflow: hidden;
	transition: max-width var(--t-med), margin var(--t-med);
}
.mbc-fab.mbc-fab-expanded {
	width: auto;
	padding: 0 20px;
	border-radius: 26px;
}
.mbc-fab.mbc-fab-expanded .mbc-fab-label {
	max-width: 140px;
	margin-left: 8px;
}
.mbc-fab:active {
	transform: scale(0.94);
	box-shadow: 0 4px 16px rgba(35,31,32,.18);
}

/* ─── 10. Pull-to-Refresh Indicator ─────────────────────────── */
.mbc-ptr {
	position: fixed;
	top: calc(var(--header-h) + var(--safe-top));
	left: 50%;
	transform: translateX(-50%) translateY(-60px);
	z-index: 850;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--t-med);
}
.mbc-ptr.mbc-ptr-visible {
	transform: translateX(-50%) translateY(12px);
}
.mbc-ptr svg {
	width: 18px;
	height: 18px;
	color: var(--camel);
}
.mbc-ptr.mbc-ptr-loading svg {
	animation: mbc-spin 0.7s linear infinite;
}
@keyframes mbc-spin {
	to { transform: rotate(360deg); }
}

/* ─── 11. Toast Notifications ────────────────────────────────── */
.mbc-toast-stack {
	position: fixed;
	top: calc(var(--header-h) + var(--safe-top) + 12px);
	left: 16px;
	right: 16px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.mbc-toast {
	background: var(--ink);
	color: rgba(255,255,255,.9);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: var(--shadow-float);
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
	animation: mbc-toast-in 0.32s var(--t-spring) both;
}
.mbc-toast.mbc-toast-out {
	animation: mbc-toast-out 0.22s ease forwards;
}
.mbc-toast-icon { flex-shrink: 0; }
.mbc-toast-icon svg { width: 18px; height: 18px; }
.mbc-toast.mbc-toast-success { background: #2a5c45; }
.mbc-toast.mbc-toast-error   { background: #8b2118; }
.mbc-toast.mbc-toast-info    { background: var(--teal); }

@keyframes mbc-toast-in {
	from { opacity: 0; transform: translateY(-16px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mbc-toast-out {
	to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ─── 12. Commerce Console — Admin Mobile ────────────────────── */
.wp-admin.mbc-app body,
body.wp-admin .mbc-admin-wrap {
	padding-left: 0 !important;
}

@media (max-width: 768px) {
	/* Hide WP sidebar — replaced by bottom nav */
	body.wp-admin #adminmenuwrap,
	body.wp-admin #adminmenuback,
	body.wp-admin #adminmenumovie { display: none !important; }

	body.wp-admin #wpcontent,
	body.wp-admin #wpbody-content {
		margin-left: 0 !important;
		padding: 0 !important;
	}

	.mbc-admin-wrap {
		flex-direction: column !important;
		height: auto !important;
	}

	.mbc-aside {
		display: none !important; /* replaced by bottom nav on mobile */
	}

	.mbc-main {
		padding: 16px !important;
		padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px) !important;
	}

	/* Stack stat cards 2-up */
	.mbc-stat-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.mbc-stat {
		padding: 16px 14px !important;
	}

	/* Full-width panels */
	.mbc-panel { margin-bottom: 16px !important; }

	/* Data table — horizontal scroll */
	.mbc-dtable-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 8px;
	}
	.mbc-dtable { min-width: 600px; }

	/* Page header */
	.mbc-page-top {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		padding: 16px !important;
	}

	/* Form cards stack */
	.mbc-g2, .mbc-editor-grid {
		grid-template-columns: 1fr !important;
	}
}
}

/* ─── PWA Install Banner ─────────────────────────────────────── */
.mbc-install-banner {
	position: fixed;
	bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px);
	left: 16px;
	right: 16px;
	z-index: 880;
	background: var(--ink);
	border-radius: 16px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--shadow-float);
	animation: mbc-slide-up 0.36s var(--t-spring) both;
}
.mbc-install-banner.mbc-hidden { display: none; }
.mbc-install-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--camel);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mbc-install-icon img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.mbc-install-text { flex: 1 }
.mbc-install-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.mbc-install-sub {
	font-size: 11.5px;
	color: rgba(255,255,255,.55);
	margin-top: 2px;
}
.mbc-install-actions { display: flex; gap: 8px; }
.mbc-install-btn {
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: opacity var(--t-fast);
}
.mbc-install-btn:active { opacity: 0.8; }
.mbc-install-btn-add {
	background: var(--camel);
	color: #fff;
}
.mbc-install-btn-dismiss {
	background: rgba(255,255,255,.12);
	color: rgba(255,255,255,.7);
}

@keyframes mbc-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── Bottom Sheet (quick actions) ──────────────────────────── */
.mbc-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 970;
	background: var(--cotton);
	border-radius: 20px 20px 0 0;
	padding-bottom: var(--safe-bottom);
	box-shadow: var(--shadow-sheet);
	transform: translateY(100%);
	transition: transform var(--t-med);
	max-height: 80vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mbc-sheet.mbc-open {
	transform: translateY(0);
}
.mbc-sheet-handle {
	width: 36px;
	height: 4px;
	background: var(--stone-30);
	border-radius: 2px;
	margin: 12px auto 0;
}
.mbc-sheet-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--oyster);
}
.mbc-sheet-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	font-size: 15px;
	color: var(--ink);
	cursor: pointer;
	transition: background var(--t-fast);
}
.mbc-sheet-item:active { background: var(--oyster); }
.mbc-sheet-item svg { width: 20px; height: 20px; color: var(--camel); stroke-width: 1.75; }


/* ─── header icon + logo sizing (2026-07-10) ───────────── */
.mbc-hdr svg{width:22px!important;height:22px!important}
.mbc-hdr button svg, .mbc-hdr a svg{width:22px!important;height:22px!important}
.mbc-hdr button, .mbc-hdr .mbc-hdr-ic, .mbc-hdr a[class*=ic]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.mbc-hdr img{height:32px!important;width:auto!important;max-width:200px}


/* ─── fix: theme button padding crushed header icons (2026-07-10) ── */
button.mbc-icon-btn, .mbc-app-header button, .mbc-tab-bar button, .mbc-drawer button, button.mbc-fab, .mbc-sheet button {
	padding: 0 !important;
	line-height: 1 !important;
	min-height: 0;
	box-shadow: none;
}
.mbc-icon-btn svg { flex: none; min-width: 22px; }
button.mbc-fab { padding: 14px 20px !important; }