/*
 * FMBD Vision Glass — exact phone storefront UI on tablet and desktop.
 * This file starts at 783px, so the approved phone view remains untouched.
 */

@media (min-width: 783px) {
	/* Never replace the phone icon bar with the old menu / logo header. */
	body:not(.fmbd-premium-checkout) .fmbd-header {
		position: fixed !important;
		z-index: 1110 !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		display: block !important;
		width: 100% !important;
		pointer-events: none !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-header-inner,
	body:not(.fmbd-premium-checkout) .fmbd-mobile-drawer { display: none !important; }

	/* Prevent duplicate plugin chrome; reuse the theme's real five-icon mobile component. */
	body:not(.fmbd-premium-checkout) .ala-gh-shell,
	body:not(.fmbd-premium-checkout) .ala-gh-flow-spacer { display: none !important; }

	/* The exact mobile Home/Search/Heart/Bag/Profile component, moved to the top. */
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav {
		position: fixed !important;
		z-index: 1100 !important;
		top: 12px !important;
		right: 12px !important;
		bottom: auto !important;
		left: 12px !important;
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		width: auto !important;
		max-width: 1320px !important;
		min-height: 50px !important;
		margin: 0 auto !important;
		padding: 3px 10px !important;
		border: var(--ala-gh-border-width, 1px) solid var(--ala-gh-border, rgba(255, 255, 255, .13)) !important;
		border-radius: var(--ala-gh-radius, 22px) !important;
		background: var(--ala-gh-bg, rgba(92, 92, 92, .48)) !important;
		box-shadow: var(--ala-gh-shadow, 0 8px 30px rgba(0, 0, 0, .12)) !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		isolation: isolate !important;
		overflow: hidden !important;
		-webkit-backdrop-filter: blur(var(--ala-gh-blur, 18px)) saturate(var(--ala-gh-saturation, 160%)) !important;
		backdrop-filter: blur(var(--ala-gh-blur, 18px)) saturate(var(--ala-gh-saturation, 160%)) !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav a,
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav button {
		position: relative !important;
		display: grid !important;
		place-items: center !important;
		min-width: 0 !important;
		height: 44px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--ala-gh-menu-color, #fff) !important;
		text-decoration: none !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav a:hover,
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav button:hover,
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .is-current {
		background: rgba(255, 255, 255, .07) !important;
		color: var(--ala-gh-menu-color, #fff) !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav svg {
		width: var(--ala-gh-user-size, 24px) !important;
		height: var(--ala-gh-user-size, 24px) !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-icon-home { stroke-width: var(--ala-gh-menu-stroke, 1.8) !important; }
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-icon-search,
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-icon-heart,
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-icon-user { stroke-width: var(--ala-gh-user-stroke, 1.8) !important; }
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-icon-bag {
		width: var(--ala-gh-bag-size, 24px) !important;
		height: var(--ala-gh-bag-size, 24px) !important;
		stroke-width: var(--ala-gh-bag-stroke, 1.8) !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav a > span:not(.fmbd-cart-count),
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav button > span {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-cart-count {
		top: 1px !important;
		right: calc(50% - 20px) !important;
		display: grid !important;
		place-items: center !important;
		min-width: 15px !important;
		height: 15px !important;
		padding: 0 3px !important;
		border: 1px solid rgba(255, 255, 255, .48) !important;
		border-radius: 999px !important;
		background: rgba(0, 0, 0, .54) !important;
		color: #fff !important;
		font: 600 9px/1 Arial, Helvetica, sans-serif !important;
	}
	body:not(.fmbd-premium-checkout) .fmbd-bottom-nav .fmbd-cart-count[data-count="0"] { display: none !important; }
	body:not(.fmbd-premium-checkout) .fmbd-search-panel { top: 72px !important; pointer-events: auto !important; }

	/* One source of top clearance for the mobile component. */
	body:not(.fmbd-premium-checkout) .fmbd-compact-home { padding-top: 74px !important; }

	/* Phone carousel/category geometry, with wider available space only. */
	.fmbd-home-carousel,
	.fmbd-category-strip,
	.fmbd-compact-home .fmbd-products-section .fmbd-container { width: min(1320px, calc(100% - 20px)) !important; }
	.fmbd-home-carousel { aspect-ratio: 11 / 4 !important; border-radius: 20px !important; }
	.fmbd-carousel-slide { grid-template-columns: 45% 55% !important; }
	.fmbd-carousel-offer {
		width: calc(100% - 14px) !important;
		max-width: 390px !important;
		margin-left: clamp(7px, 2vw, 28px) !important;
		padding: clamp(9px, 1.25vw, 17px) !important;
		border-radius: 15px !important;
		background: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .38)) !important;
		-webkit-backdrop-filter: blur(7px) saturate(135%) !important;
		backdrop-filter: blur(7px) saturate(135%) !important;
	}
	.fmbd-carousel-offer > span:first-child { font-size: clamp(9px, .9vw, 13px) !important; }
	.fmbd-carousel-offer strong { margin: 1px 0 !important; font-size: clamp(30px, 3.6vw, 48px) !important; }
	.fmbd-carousel-offer small { display: block !important; font-size: clamp(8px, .75vw, 11px) !important; }
	.fmbd-carousel-price { display: none !important; }
	.fmbd-carousel-offer > a { min-height: clamp(27px, 2.6vw, 36px) !important; margin-top: 5px !important; padding: 0 4px 0 9px !important; gap: 5px !important; font-size: clamp(8px, .8vw, 11px) !important; }
	.fmbd-carousel-offer > a svg { width: 11px !important; height: 11px !important; padding: 4px !important; }
	.fmbd-carousel-product { top: 0 !important; right: -3% !important; bottom: -2% !important; left: 38% !important; }
	.fmbd-carousel-dots { bottom: 5px !important; gap: 4px !important; }
	.fmbd-carousel-dots button { width: 5px !important; height: 5px !important; }
	.fmbd-carousel-dots button.is-active { width: 13px !important; }
	.fmbd-category-strip { height: 42px !important; margin-top: 8px !important; }
	.fmbd-category-rail { gap: 6px !important; }
	.fmbd-category-pill { gap: 5px !important; padding: 0 10px !important; border-radius: 14px !important; }
	.fmbd-category-pill strong { font-size: 10px !important; }
	.fmbd-category-pill img,
	.fmbd-category-icon,
	.fmbd-category-dot,
	.fmbd-category-mark { width: 19px !important; height: 19px !important; border-radius: 6px !important; }
	.fmbd-category-icon svg { width: 14px !important; height: 14px !important; }
	.fmbd-compact-home .fmbd-products-section.is-compact { padding: 14px 0 30px !important; }
	.fmbd-compact-heading { margin-bottom: 10px !important; }
	.fmbd-compact-heading h1 { font-size: clamp(25px, 2.6vw, 34px) !important; }
	.fmbd-compact-heading > a { font-size: 11px !important; }

	/* Exact phone product card. Only column number and text size can scale. */
	.fmbd-product-grid,
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
	.fmbd-product-card,
	.woocommerce ul.products li.product.fmbd-product-card { float: none !important; width: auto !important; margin: 0 !important; }
	.fmbd-product-card-inner,
	.fmbd-product-card:hover .fmbd-product-card-inner {
		height: 100% !important;
		padding: 0 !important;
		border-radius: 18px !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		overflow: hidden !important;
	}
	.fmbd-product-media {
		position: relative !important;
		display: block !important;
		aspect-ratio: 4 / 5 !important;
		border: 1px solid rgba(255, 255, 255, .72) !important;
		border-radius: 18px !important;
		background: rgba(255, 255, 255, .42) !important;
		box-shadow: 0 14px 42px rgba(45, 37, 31, .11) !important;
		overflow: hidden !important;
	}
	.fmbd-product-image { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; }
	.fmbd-product-image img,
	.fmbd-product-card:hover .fmbd-product-image img {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		object-fit: cover !important;
		mix-blend-mode: normal !important;
		transform: scale(var(--fmbd-image-scale, 1)) !important;
	}
	.fmbd-product-copy {
		position: absolute !important;
		z-index: 3 !important;
		right: 5px !important;
		bottom: 5px !important;
		left: 5px !important;
		display: block !important;
		min-height: 0 !important;
		padding: clamp(7px, .85vw, 11px) clamp(9px, 1vw, 13px) !important;
		border: 1px solid rgba(255, 255, 255, .5) !important;
		border-radius: 14px !important;
		background: rgba(var(--fmbd-glass-rgb), .21) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px rgba(38, 31, 27, .06) !important;
		-webkit-backdrop-filter: blur(15px) saturate(125%) !important;
		backdrop-filter: blur(15px) saturate(125%) !important;
	}
	.fmbd-product-title-row { display: block !important; min-width: 0 !important; }
	.fmbd-product-copy h2,
	.fmbd-product-card .woocommerce-loop-product__title {
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: clamp(12px, 1.5vw, 16px) !important;
		font-weight: 650 !important;
		line-height: 1.15 !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}
	.fmbd-card-bottom { display: flex !important; align-items: flex-end !important; gap: 5px !important; margin-top: 4px !important; }
	.fmbd-card-bottom .price {
		display: inline-flex !important;
		align-items: baseline !important;
		gap: 4px !important;
		margin-right: auto !important;
		color: #111 !important;
		font-size: clamp(11px, 1.15vw, 14px) !important;
		font-weight: 500 !important;
		line-height: 1.1 !important;
		white-space: nowrap !important;
	}
	.fmbd-card-bottom .price del { display: inline !important; color: rgba(0, 0, 0, .42) !important; font-size: .76em !important; font-weight: 400 !important; }
	.fmbd-card-bottom .price ins { padding: 0 !important; background: transparent !important; color: #111 !important; font-weight: 700 !important; text-decoration: none !important; }
	.fmbd-card-stock { margin-left: auto !important; white-space: nowrap !important; }
	.fmbd-card-stock .stock { margin: 0 !important; color: #111 !important; font-size: clamp(8px, .8vw, 10px) !important; font-weight: 550 !important; line-height: 1.1 !important; opacity: .48 !important; }

	/* Mobile card has no black quick-add circle. */
	.fmbd-quick-add,
	.woocommerce ul.products li.product .fmbd-quick-add { display: none !important; }
	.fmbd-card-wishlist {
		top: 7px !important;
		right: 7px !important;
		display: grid !important;
		place-items: center !important;
		width: 30px !important;
		height: 30px !important;
		border: 1px solid rgba(255, 255, 255, .75) !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, .56) !important;
		box-shadow: 0 7px 20px rgba(0, 0, 0, .07) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		backdrop-filter: blur(12px) !important;
	}
	.fmbd-card-wishlist svg { width: 15px !important; height: 15px !important; }
	.fmbd-sale-badge { top: 8px !important; left: 8px !important; padding: 5px 7px !important; border-radius: 99px !important; font-size: 8px !important; }
}

@media (min-width: 1100px) {
	.fmbd-product-grid,
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1500px) {
	.fmbd-product-grid,
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}