/**
 * EMPORAS Mobile UX (v1.5.1 - clean rebuild)
 *
 * Strategy: when on mobile (≤768px), we COMPLETELY HIDE the desktop header
 * and inject a clean dedicated mobile header via JS. No fighting with
 * the desktop styles, no double headers, no invisible logos.
 *
 * @package EMPORAS
 * @since   1.5.1
 */

/* ============================================
   1. HIDE DESKTOP HEADER ON MOBILE
   Use highly specific selectors (#id + class) + html/body
   prefixes to win over any other rule in the cascade.
   ============================================ */
@media (max-width: 768px) {
	/* Maximum specificity: target by ID, by template-part class names,
	   and prefixed with html for safety. The #masthead matches the
	   actual header in header.php. */
	html body header#masthead,
	html body header#masthead.site-header,
	html body .site-header,
	html body .utility-bar,
	html body .main-header,
	html body .nav-bar,
	html body #site-navigation,
	html body .main-nav,
	html body header.site-header,
	html body > header {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}

	/* Token vars */
	:root {
		--mobile-header-h: 56px;
		--mobile-bottombar-h: 60px;
		--mobile-tap-min: 44px;
		--mobile-side-padding: 16px;
		--mobile-card-radius: 10px;
		--c-navy: #1e2a5e;
		--c-navy-dark: #14204e;
		--c-charcoal: #1d1f23;
		--c-graphite: #36383d;
		--c-steel: #6b7280;
		--c-off-white: #f5f5f7;
		--c-concrete: #e5e7eb;
		--c-danger: #dc2626;
	}

	body {
		font-size: 15px;
		line-height: 1.55;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: rgba(30, 42, 94, 0.15);
		/* Reserve space at top for the mobile header.
		   This padding prevents content from jumping when JS injects
		   the real header. */
		padding-top: var(--mobile-header-h);
	}

	/* When WordPress admin bar is showing, offset the mobile header below it */
	body.admin-bar {
		padding-top: calc(var(--mobile-header-h) + 46px) !important;
	}
	body.admin-bar .emporas-mobile-header {
		top: 46px !important;
	}
	/* On screens > 600px, WP admin bar is only 32px tall */
	@media (min-width: 601px) {
		body.admin-bar {
			padding-top: calc(var(--mobile-header-h) + 32px) !important;
		}
		body.admin-bar .emporas-mobile-header {
			top: 32px !important;
		}
	}

	body.has-mobile-bottombar {
		padding-bottom: calc(var(--mobile-bottombar-h) + env(safe-area-inset-bottom, 0));
	}

	.container {
		padding-left: var(--mobile-side-padding);
		padding-right: var(--mobile-side-padding);
	}

	.section { padding: 36px 0; }

	:focus-visible {
		outline: 2px solid var(--c-navy);
		outline-offset: 2px;
	}
}

/* ============================================
   2. MOBILE HEADER (injected via JS)
   ============================================ */
.emporas-mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--mobile-header-h, 56px);
	background: #ffffff;
	border-bottom: 1px solid var(--c-concrete, #e5e7eb);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	padding: 0 8px;
	align-items: center;
	gap: 4px;
}
@media (max-width: 768px) {
	.emporas-mobile-header { display: flex; }
}

.emporas-mobile-header__menu,
.emporas-mobile-header__search {
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-charcoal, #1d1f23);
	padding: 0;
	flex-shrink: 0;
}
.emporas-mobile-header__menu svg,
.emporas-mobile-header__search svg {
	width: 24px;
	height: 24px;
}

.emporas-mobile-header__logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
	overflow: hidden;
	padding: 0 6px;
}
.emporas-mobile-header__logo img {
	max-height: 32px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.emporas-mobile-header__wordmark {
	font-family: 'Barlow Condensed', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--c-navy, #1e2a5e);
	text-transform: uppercase;
}

.emporas-mobile-header__cart {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-charcoal, #1d1f23);
	text-decoration: none;
	position: relative;
	flex-shrink: 0;
}
.emporas-mobile-header__cart svg {
	width: 22px;
	height: 22px;
}
.emporas-mobile-header__cart-badge {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--c-danger, #dc2626);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ============================================
   3. SEARCH OVERLAY
   ============================================ */
.mobile-search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: #ffffff;
	flex-direction: column;
}
.mobile-search-overlay.is-open { display: flex; }
.mobile-search-overlay__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--c-concrete);
	background: var(--c-off-white);
}
.mobile-search-overlay__back {
	width: 44px; height: 44px;
	background: transparent; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: var(--c-charcoal);
}
.mobile-search-overlay__form {
	flex: 1;
	display: flex;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	border: 1.5px solid var(--c-charcoal);
	height: 44px;
}
.mobile-search-overlay__input {
	flex: 1;
	border: 0;
	padding: 0 14px;
	font-size: 16px;
	background: transparent;
	color: var(--c-charcoal);
	min-width: 0;
	-webkit-appearance: none;
}
.mobile-search-overlay__submit {
	width: 50px;
	border: 0;
	background: var(--c-navy);
	color: #ffffff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mobile-search-overlay__suggestions {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}
.mobile-search-overlay__suggestions h4 {
	margin: 0 0 12px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--c-steel);
}
.mobile-search-overlay__chip-list {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; padding: 0; margin: 0;
}
.mobile-search-overlay__chip {
	display: inline-block;
	padding: 8px 14px;
	background: var(--c-off-white);
	border: 1px solid var(--c-concrete);
	border-radius: 100px;
	color: var(--c-charcoal);
	font-size: 13px;
	text-decoration: none;
}
.mobile-search-overlay__chip:hover {
	background: var(--c-charcoal);
	color: #ffffff;
}

/* ============================================
   4. DRAWER (off-canvas menu)
   ============================================ */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 250;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-drawer.is-open { visibility: visible; opacity: 1; }
.mobile-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}
.mobile-drawer__panel {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 86%;
	max-width: 340px;
	background: #ffffff;
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }

.mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
	background: var(--c-navy);
	color: #ffffff;
	min-height: var(--mobile-header-h);
	flex-shrink: 0;
}
.mobile-drawer__title {
	font-family: 'Barlow Condensed', 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}
.mobile-drawer__close {
	width: 36px; height: 36px;
	background: transparent; border: 0;
	color: #ffffff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}

.mobile-drawer__nav {
	flex: 1;
	overflow-y: auto;
}
.mobile-drawer__nav ul,
.mobile-drawer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-drawer__nav li {
	border-bottom: 1px solid var(--c-off-white);
	position: relative;
}
.mobile-drawer__nav li a {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--c-charcoal);
	text-decoration: none;
	min-height: var(--mobile-tap-min);
}
.mobile-drawer__nav li a:hover,
.mobile-drawer__nav li a:focus {
	background: var(--c-off-white);
	color: var(--c-navy);
}
/* Submenu toggle (chevron) */
.mobile-drawer__submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-steel);
	transition: transform 0.2s ease, color 0.2s ease;
}
.mobile-drawer__submenu-toggle.is-open {
	transform: rotate(180deg);
	color: var(--c-navy);
}
.mobile-drawer__nav li.has-submenu > a {
	padding-right: 56px;
}
/* Submenus: hidden by default, shown when JS sets style.display */
.mobile-drawer__nav .sub-menu,
.mobile-drawer__nav li ul {
	background: var(--c-off-white);
	padding: 0;
	margin: 0;
	list-style: none;
}
.mobile-drawer__nav .sub-menu li a,
.mobile-drawer__nav li ul li a {
	padding-left: 36px;
	font-size: 14px;
	font-weight: 400;
	color: var(--c-graphite);
}

.mobile-drawer__cta {
	padding: 16px 20px;
	border-top: 1px solid var(--c-concrete);
	flex-shrink: 0;
}
.mobile-drawer__cta-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px;
	background: var(--c-navy);
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-height: 48px;
}
.mobile-drawer__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 20px 20px;
	border-top: 1px solid var(--c-concrete);
	font-size: 13px;
	color: var(--c-graphite);
	flex-shrink: 0;
}
.mobile-drawer__contact a {
	color: var(--c-navy);
	text-decoration: none;
	min-height: 0;
	padding: 4px 0;
}

/* ============================================
   5. BOTTOM NAVIGATION BAR
   ============================================ */
.mobile-bottombar {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 90;
	background: #ffffff;
	border-top: 1px solid var(--c-concrete);
	height: var(--mobile-bottombar-h);
	padding-bottom: env(safe-area-inset-bottom, 0);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
	.mobile-bottombar { display: flex; }
}
.mobile-bottombar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--c-steel);
	text-decoration: none;
	font-size: 10px;
	font-weight: 500;
	min-height: var(--mobile-bottombar-h);
	position: relative;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.mobile-bottombar__item svg {
	width: 22px; height: 22px; stroke-width: 1.8;
}
.mobile-bottombar__item.is-active {
	color: var(--c-navy);
}
.mobile-bottombar__item.is-active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	background: var(--c-navy);
	border-radius: 0 0 3px 3px;
}
.mobile-bottombar__badge {
	position: absolute;
	top: 6px;
	right: calc(50% - 22px);
	background: var(--c-danger);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 100px;
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
}

/* ============================================
   6. PRODUCT CARDS — Redesigned with bordered look
   Clean Image 2 inspired design:
   - Bold border (navy)
   - Large clear product image
   - Title centered, multi-line
   - Pill button at bottom
   - Featured products section uses horizontal slider
   ============================================ */

/* === Featured products as horizontal slider (mobile only) === */
@media (max-width: 768px) {
	/* Container becomes horizontally scrollable.
	   We size cards so exactly 2 fit in the viewport, with a tiny peek
	   of the 3rd card to indicate scrollability without cutting cards
	   awkwardly in half. */
	.featured-products .products-grid--slider,
	.featured-products .products-grid {
		position: relative;
		margin: 0 calc(-1 * var(--mobile-side-padding)) !important;
		padding: 4px var(--mobile-side-padding) 12px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding: var(--mobile-side-padding);
		scrollbar-width: thin;
		scrollbar-color: var(--c-concrete) transparent;
	}
	.featured-products .products-grid--slider::-webkit-scrollbar,
	.featured-products .products-grid::-webkit-scrollbar {
		height: 4px;
	}
	.featured-products .products-grid--slider::-webkit-scrollbar-thumb,
	.featured-products .products-grid::-webkit-scrollbar-thumb {
		background: var(--c-concrete);
		border-radius: 100px;
	}

	/* Inside the slider, force horizontal flex layout (not grid).
	   align-items: stretch makes all cards the same height. */
	.featured-products .products-grid--slider ul.products,
	.featured-products .products-grid--slider ul.products.columns-1,
	.featured-products .products-grid--slider ul.products.columns-2,
	.featured-products .products-grid--slider ul.products.columns-3,
	.featured-products .products-grid--slider ul.products.columns-4,
	.featured-products .products-grid--slider ul.products.columns-5,
	.featured-products .products-grid--slider ul.products.columns-6,
	.featured-products .products-grid--slider ul.products.emporas-products,
	.featured-products .products-grid ul.products,
	.featured-products .products-grid ul.products.columns-1,
	.featured-products .products-grid ul.products.columns-2,
	.featured-products .products-grid ul.products.columns-3,
	.featured-products .products-grid ul.products.columns-4 {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 12px !important;
		grid-template-columns: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		width: max-content !important;
		float: none !important;
	}

	/* Each card: ~46vw wide = exactly 2 fit per viewport.
	   Equal heights via flex stretch + 100% height. */
	.featured-products .products-grid--slider ul.products li.product,
	.featured-products .products-grid ul.products li.product {
		flex: 0 0 calc((100vw - var(--mobile-side-padding) * 2 - 12px) / 2) !important;
		width: calc((100vw - var(--mobile-side-padding) * 2 - 12px) / 2) !important;
		max-width: 280px !important;
		min-width: 0 !important;
		scroll-snap-align: start;
		margin: 0 !important;
		height: auto !important;
		align-self: stretch !important;
	}

	/* Hint text */
	.products-grid__hint {
		text-align: center;
		font-size: 11px;
		color: var(--c-steel);
		margin-top: 6px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		opacity: 0.7;
	}
}
@media (min-width: 769px) {
	.products-grid__hint { display: none; }
}

/* Tiny screens: 1 card per view (no point trying to fit 2 below 380px) */
@media (max-width: 380px) {
	.featured-products .products-grid--slider ul.products li.product,
	.featured-products .products-grid ul.products li.product {
		flex: 0 0 calc(100vw - var(--mobile-side-padding) * 2) !important;
		width: calc(100vw - var(--mobile-side-padding) * 2) !important;
		max-width: none !important;
	}
}

/* === Shop archive / other product loops: 2-col grid === */
@media (max-width: 768px) {
	ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6,
	.archive-main ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products,
	.related ul.products,
	.upsells ul.products,
	.cross-sells ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		float: none !important;
		overflow: visible !important;
	}
}

/* === CARD STYLING (applies to all product cards on mobile) === */
@media (max-width: 768px) {
	ul.products li.product,
	.emporas-card,
	.woocommerce ul.products li.product {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
		float: none !important;
		flex: unset !important;
		clear: none !important;
		display: flex !important;
		flex-direction: column !important;
		background: #ffffff !important;
		border: 1px solid var(--c-concrete) !important;
		border-radius: 12px !important;
		overflow: hidden !important;
		position: relative !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}
	/* Slider-card specific spacing */
	.featured-products ul.products li.product {
		margin: 0 !important;
	}

	/* Image area — large, prominent */
	ul.products li.product > a:first-of-type,
	.emporas-card__image-link {
		display: block !important;
		width: 100% !important;
		aspect-ratio: 1 / 1 !important;
		background: #ffffff !important;
		overflow: hidden !important;
		position: relative !important;
		padding: 0 !important;
		border-bottom: 1px solid var(--c-off-white);
	}
	.emporas-card__image,
	ul.products li.product .emporas-card__image {
		width: 100% !important;
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 20px !important;
		position: relative !important;
	}
	ul.products li.product img,
	ul.products li.product > a > img,
	.emporas-card img,
	.emporas-card__image img,
	ul.products li.product img.attachment-woocommerce_thumbnail,
	ul.products li.product img.wp-post-image {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	/* Sale/Featured badge */
	ul.products li.product .onsale,
	ul.products li.product .emporas-card__badge {
		position: absolute !important;
		top: 10px !important;
		left: 10px !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		padding: 4px 10px !important;
		border-radius: 4px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		z-index: 2;
		background: var(--c-danger) !important;
		color: #ffffff !important;
	}

	/* Body content — equal-height layout via flex */
	.emporas-card__body,
	ul.products li.product .emporas-card__body {
		padding: 14px 14px 16px !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 6px !important;
		text-align: center !important;
		min-height: 0 !important;
	}

	/* SKU is optional — when absent, title still has fixed height for equality */
	ul.products li.product .emporas-card__sku:empty {
		display: none !important;
	}

	/* Pricing block sits at the same vertical position across all cards
	   by pushing the spacer (margin-top:auto) before it */
	.emporas-card__pricing,
	ul.products li.product .emporas-card__pricing {
		margin: auto 0 6px !important;
		padding: 10px 0 0 !important;
		border-top: 1px solid var(--c-off-white) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		min-width: 0 !important;
	}

	.emporas-card__brand,
	ul.products li.product .emporas-card__brand {
		font-size: 10px !important;
		letter-spacing: 1.5px !important;
		text-transform: uppercase !important;
		color: var(--c-navy) !important;
		font-weight: 600 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Title — bigger, centered, up to 3 lines */
	.emporas-card__title,
	ul.products li.product h2,
	ul.products li.product h3,
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		margin: 0 !important;
		padding: 0 4px !important;
		min-height: 58px !important;
		max-height: 58px !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 3 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		color: var(--c-charcoal) !important;
		font-family: 'Inter', sans-serif !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		text-align: center !important;
	}
	.emporas-card__title a {
		color: var(--c-charcoal) !important;
		text-decoration: none !important;
		display: inline !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.emporas-card__sku,
	ul.products li.product .emporas-card__sku {
		font-size: 11px !important;
		color: var(--c-steel) !important;
		margin: 0 !important;
		text-align: center !important;
	}

	/* Price label spacing */
	.emporas-card__price-label,
	ul.products li.product .emporas-card__price-label {
		font-size: 10px !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		color: var(--c-steel) !important;
		margin: 0 0 4px !important;
		font-weight: 500 !important;
	}

	/* Price: allow wrapping so big numbers don't get cut */
	.emporas-card__price,
	ul.products li.product .price,
	ul.products li.product .emporas-card__price {
		font-size: 22px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		color: var(--c-charcoal) !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 4px 8px !important;
		align-items: baseline !important;
		margin: 0 !important;
		min-width: 0 !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		max-width: 100% !important;
	}
	ul.products li.product .price .woocommerce-Price-amount,
	ul.products li.product .price bdi {
		font-size: inherit !important;
		font-weight: inherit !important;
		white-space: nowrap !important;
		display: inline !important;
	}
	ul.products li.product .price del,
	ul.products li.product .price del .woocommerce-Price-amount {
		font-size: 13px !important;
		color: var(--c-steel) !important;
		font-weight: 500 !important;
		opacity: 0.7 !important;
		display: block !important;
		width: 100% !important;
	}
	ul.products li.product .price ins,
	ul.products li.product .price ins .woocommerce-Price-amount {
		font-size: 22px !important;
		text-decoration: none !important;
		background: transparent !important;
		color: var(--c-charcoal) !important;
		font-weight: 700 !important;
	}

	/* Stock — pill style */
	.emporas-card__stock,
	ul.products li.product .emporas-card__stock {
		font-size: 11px !important;
		margin: 0 0 10px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		align-self: center !important;
		color: #16a34a;
		font-weight: 500;
	}
	.emporas-stock-dot {
		display: inline-block;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #16a34a;
	}
	.emporas-card__stock--out {
		color: var(--c-danger) !important;
	}
	.emporas-card__stock--out .emporas-stock-dot {
		background: var(--c-danger);
	}

	/* Actions / button — pill style, navy or charcoal */
	.emporas-card__actions,
	ul.products li.product .emporas-card__actions {
		margin: 4px 0 0 !important;
		padding: 0 !important;
		display: flex !important;
		justify-content: center !important;
	}
	.emporas-card__actions .button,
	ul.products li.product .button,
	ul.products li.product .added_to_cart,
	ul.products li.product .b2b-cta-register,
	ul.products li.product .b2b-cta-contact {
		display: inline-block !important;
		width: auto !important;
		min-width: 130px !important;
		min-height: 40px !important;
		padding: 11px 24px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		text-align: center !important;
		white-space: nowrap !important;
		line-height: 1 !important;
		margin: 0 !important;
		border-radius: 100px !important;
		background: var(--c-charcoal) !important;
		color: #ffffff !important;
		text-decoration: none !important;
		border: 0 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.8px !important;
		font-family: 'Inter', sans-serif !important;
		transition: background 0.15s ease;
	}
	.emporas-card__actions .button:hover,
	ul.products li.product .button:hover {
		background: var(--c-navy) !important;
	}
}

/* === Tiny screens: shrink fonts === */
@media (max-width: 380px) {
	ul.products li.product .emporas-card__title,
	ul.products li.product h2,
	ul.products li.product h3 {
		font-size: 13px !important;
		min-height: 50px !important;
		max-height: 50px !important;
	}
	ul.products li.product .price,
	ul.products li.product .emporas-card__price {
		font-size: 19px !important;
	}
	.emporas-card__actions .button {
		min-width: 110px !important;
		padding: 10px 18px !important;
	}
}
@media (max-width: 768px) {
	.hero-banner,
	.featured-banner {
		padding: 0 !important;
	}
	.hero-banner__image img,
	.featured-banner__image img {
		width: 100%;
		height: auto;
		max-height: 280px;
		object-fit: cover;
		display: block;
	}
	.hero-banner__content,
	.featured-banner__content {
		padding: 20px var(--mobile-side-padding) 24px;
	}
	.hero-banner__title,
	.featured-banner__title {
		font-size: 22px;
		line-height: 1.15;
		margin: 0 0 10px;
	}
	.hero-banner__text,
	.featured-banner__text {
		font-size: 14px;
		line-height: 1.5;
		margin: 0 0 16px;
	}
}

/* ============================================
   8. TRUST STRIP — 2 cols
   ============================================ */
@media (max-width: 768px) {
	.trust-strip {
		padding: 24px 0;
	}
	.trust-strip__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.trust-strip__item {
		flex-direction: row !important;
		align-items: flex-start !important;
		text-align: left !important;
		padding: 14px !important;
		gap: 12px !important;
		border: 1px solid var(--c-concrete) !important;
		border-radius: var(--mobile-card-radius) !important;
		background: #ffffff;
	}
	.trust-strip__icon { flex-shrink: 0; width: 32px !important; height: 32px !important; }
	.trust-strip__icon svg { width: 24px !important; height: 24px !important; }
	.trust-strip__title { font-size: 13px !important; margin: 0 0 2px !important; line-height: 1.2 !important; }
	.trust-strip__text { font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; }
}

/* ============================================
   9. CATEGORIES GRID — 2 cols
   ============================================ */
@media (max-width: 768px) {
	.shop-categories-grid { padding: 24px 0 !important; }
	.shop-categories-grid__list {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.shop-cat-card {
		padding: 12px !important;
		min-height: 72px !important;
		gap: 10px !important;
		border-width: 1.5px !important;
	}
	.shop-cat-card__image { width: 32px !important; height: 32px !important; }
	.shop-cat-card__image svg { width: 28px !important; height: 28px !important; }
	.shop-cat-card__name {
		font-size: 12px !important;
		letter-spacing: 0.3px !important;
		line-height: 1.15 !important;
		white-space: normal !important;
	}
	.shop-cat-card__count { font-size: 10px !important; }
}
@media (max-width: 380px) {
	.shop-categories-grid__list { grid-template-columns: 1fr !important; }
}

/* ============================================
   10. FORMS / B2B REGISTER mobile
   ============================================ */
@media (max-width: 768px) {
	.b2b-register-hero { padding: 32px var(--mobile-side-padding) !important; }
	.b2b-register-hero h1 { font-size: 26px !important; }
	.b2b-register-hero .lead { font-size: 15px !important; }
	.b2b-register-form {
		padding: 20px 16px !important;
		margin: 0 !important;
	}
	.b2b-register-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.b2b-register-form input,
	.b2b-register-form select,
	.b2b-register-form textarea {
		font-size: 16px !important;
		padding: 12px 14px !important;
		min-height: 48px !important;
	}
}

/* ============================================
   11. B2B DASHBOARD mobile
   ============================================ */
@media (max-width: 768px) {
	.woocommerce-MyAccount-content { padding: 0 !important; }
	.b2b-dash { gap: 16px !important; }
	.b2b-dash__welcome { padding: 22px 18px !important; }
	.b2b-dash__welcome-icon { display: none !important; }
	.b2b-dash__welcome-inner { flex-direction: column; align-items: flex-start; }
	.b2b-dash__company { font-size: 20px !important; }
	.b2b-dash__stats,
	.b2b-dash__cards { grid-template-columns: 1fr !important; }
	.b2b-dash__stat { padding: 16px !important; }
	.b2b-dash__card { padding: 18px !important; }
	.b2b-dash__section { padding: 18px 16px !important; }
	.b2b-dash__details { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
	.b2b-dash__orders thead { display: none; }
	.b2b-dash__orders,
	.b2b-dash__orders tbody,
	.b2b-dash__orders tr,
	.b2b-dash__orders td { display: block; width: 100%; }
	.b2b-dash__orders tr {
		padding: 12px;
		border: 1px solid var(--c-concrete);
		border-radius: 8px;
		margin-bottom: 8px;
	}
	.b2b-dash__orders td {
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
	}
}

/* ============================================
   12. FOOTER mobile
   ============================================ */
@media (max-width: 768px) {
	.site-footer { padding: 32px 0 24px !important; }
	.site-footer__grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.site-footer__bottom {
		flex-direction: column !important;
		text-align: center !important;
		gap: 8px !important;
	}
}

/* ============================================
   13. COOKIE BANNER above bottom bar
   ============================================ */
@media (max-width: 768px) {
	.emporas-cookie-banner,
	.cookie-banner {
		bottom: var(--mobile-bottombar-h) !important;
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		max-width: none !important;
		padding: 16px !important;
		border-radius: var(--mobile-card-radius) !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}
}

/* ============================================
   14. LANDSCAPE: hide bottom bar
   ============================================ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
	.mobile-bottombar { display: none !important; }
	body.has-mobile-bottombar { padding-bottom: 0 !important; }
	.hero-banner__image img,
	.featured-banner__image img { max-height: 180px; }
}