/**
 * Ebike Hause - mobile hero, LP01 structure. Rebuilt 2026-09-09.
 *
 * MOBILE ONLY (max-width: 767px). Desktop is untouched.
 *
 * Structure implemented:
 *   gallery (clean, no overlays) -> title -> rating -> colour swatches
 *   -> ONE white purchase card -> legal badge
 * Card rows: promo strip / price / delivery / quantity+ATC+BuyNow / trust.
 *
 * The gallery Swiper is never hidden or zero-heighted - that breaks the thumbs
 * module and kills swipe (proven earlier).
 */

@media (max-width: 767px) {

	/* ============================ CLEAN GALLERY ========================== */

	.single-product .woocommerce-product-gallery {
		position: relative;
		background: #f4f6f7;
		border-radius: 14px;
		overflow: hidden;
	}

	/* LP01 keeps the bike itself unobstructed: no promo pill, no rating card,
	   and WoodMart's own -90% label is suppressed too. */
	.single-product .woocommerce-product-gallery .onsale,
	.single-product .woocommerce-product-gallery .product-labels,
	.single-product .woocommerce-product-gallery .wd-product-labels,
	.single-product .ebh-promo-pill,
	.single-product .ebh-rating-card {
		display: none !important;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb {
		max-height: 52px !important;
		overflow: hidden !important;
		margin-top: 6px !important;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
		height: 48px !important;
		outline: 0 !important;
		border: 0 !important;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb img {
		height: 48px !important;
		width: 100% !important;
		object-fit: contain !important;
		background: #f4f6f7;
		border-radius: 8px;
	}

	.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-active img,
	.single-product .woocommerce-product-gallery .wd-gallery-thumb .swiper-slide-thumb-active img {
		outline: 2px solid #2f8f4e;
		outline-offset: -2px;
	}

	/* ========================= TITLE / RATING / SWATCHES ================= */

	.single-product .elementor-element-1c31fe0 {
		--row-gap: 10px;
		row-gap: 10px;
	}

	.single-product h1.product_title {
		font-size: 24px !important;
		line-height: 1.2 !important;
		font-weight: 800 !important;
		letter-spacing: -.2px;
	}

	.single-product .woocommerce-product-rating {
		font-size: 14px;
	}

	.single-product .wd-reset-var {
		display: none !important;
	}

	.single-product .variations th.label,
	.single-product .variations .label.cell {
		margin-bottom: 8px !important;
	}

	.single-product .variations .label label,
	.single-product .wd-attr-selected {
		font-size: 15px !important;
		font-weight: 700 !important;
		color: #16181a;
	}

	/* LP01 shows all three colours on ONE row. The default inline-flex plus a
	   wide label ("Mitternachtsblau") pushed the third swatch to a second row,
	   so the container becomes an explicit 3-column grid. */
	.single-product .wd-swatches-single {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 4px !important;
		justify-items: center;
	}

	.single-product .wd-swatches-single .wd-swatch {
		margin: 0 !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		width: 100% !important;
		min-width: 0;
	}

	.single-product .wd-swatches-single .wd-swatch-bg {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		flex: 0 0 52px !important;
		aspect-ratio: 1 / 1;
		border-radius: 50% !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
	}

	.single-product .wd-swatches-single .wd-swatch.wd-active .wd-swatch-bg {
		box-shadow: 0 0 0 3px #fff, 0 0 0 5px #16181a;
	}

	.single-product .wd-swatches-single .wd-swatch-text {
		font-size: 11.5px !important;
		text-align: center;
		line-height: 1.25;
		color: #3d444a;
		margin-top: 8px !important;
	}

	/* ========================== THE PURCHASE CARD ======================== */

	.single-product .ebh-card {
		display: block;
		margin: 16px 0 0;
		padding: 14px;
		background: #fff;
		border: 1px solid #e4e8eb;
		border-radius: 16px;
		box-shadow: 0 3px 14px rgba(16, 24, 32, .07);
		box-sizing: border-box;
		max-width: 100%;
	}

	/* ---- row 1: promo strip ---- */

	.single-product .ebh-card .ebh-promo-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 9px;
		padding: 9px 10px;
		border-radius: 11px;
		background: #e01f26;
		color: #fff;
		margin: 0 0 12px;
	}

	.single-product .ebh-promo-bar__label {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-size: 13px;
		font-weight: 800;
		line-height: 1.2;
	}

	.single-product .ebh-promo-bar__clock {
		font-size: 15px;
	}

	.single-product .ebh-promo-bar__timer {
		display: inline-flex;
		gap: 5px;
		flex: 0 0 auto;
	}

	.single-product .ebh-cd {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 36px;
		padding: 3px 5px;
		border-radius: 7px;
		background: rgba(0, 0, 0, .3);
	}

	.single-product .ebh-cd b {
		font-size: 15px;
		font-weight: 800;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	.single-product .ebh-cd i {
		font-style: normal;
		font-size: 9px;
		opacity: .9;
	}

	/* ---- row 2: price ---- */

	.single-product .ebh-card p.price {
		display: flex !important;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 5px 10px;
		margin: 0 0 12px !important;
	}

	.single-product .ebh-card p.price ins,
	.single-product .ebh-card p.price > .woocommerce-Price-amount {
		text-decoration: none;
		font-size: 34px !important;
		font-weight: 800 !important;
		line-height: 1.02;
		color: #e01f26 !important;
		order: 1;
	}

	.single-product .ebh-card p.price del,
	.single-product .ebh-card p.price del .woocommerce-Price-amount {
		order: 2;
		opacity: 1;
		font-size: 18px !important;
		font-weight: 600 !important;
		color: #8a9299 !important;
		text-decoration: line-through;
	}

	/* WooCommerce a11y strings must never be readable inline. */
	.single-product .ebh-card p.price .screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.single-product .ebh-saving {
		order: 3;
		flex: 0 0 auto;
		padding: 6px 11px;
		border-radius: 999px;
		background: #fdecec;
		color: #c11c23;
		font-size: 12.5px;
		font-weight: 700;
		white-space: nowrap;
	}

	.single-product .ebh-card p.price .ebh-price-tax {
		order: 4;
		flex: 1 0 100%;
		font-size: 12.5px !important;
		color: #6b7379 !important;
	}

	.single-product .ebh-card p.price .ebh-stock-note {
		order: 5;
		flex: 1 0 100%;
	}

	/* ---- row 3: delivery ---- */

	.single-product .ebh-card .ebh-delivery {
		margin: 0 0 12px;
		padding: 11px 12px;
		border: 1px solid #e3e7ea;
		border-radius: 11px;
		background: #fbfdfc;
	}

	.single-product .ebh-delivery__row {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	.single-product .ebh-delivery__row + .ebh-delivery__row {
		margin-top: 8px;
	}

	.single-product .ebh-delivery__icon {
		flex: 0 0 auto;
		color: #2f8f4e;
		line-height: 0;
		margin-top: 1px;
	}

	.single-product .ebh-delivery__free {
		font-size: 15px;
		font-weight: 800;
		color: #2f8f4e;
	}

	.single-product .ebh-delivery__body {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.single-product .ebh-delivery__label {
		font-size: 13px;
		color: #4a5257;
	}

	.single-product .ebh-delivery__date {
		font-size: 15px;
		font-weight: 800;
		color: #16181a;
	}

	.single-product .ebh-delivery__info {
		margin-left: auto;
		color: #98a0a6;
		font-size: 13px;
		cursor: help;
	}

	/* ---- row 4: quantity + add to cart + buy now ---- */

	.single-product .ebh-card .single_variation_wrap {
		margin: 0;
	}

	.single-product .ebh-card .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 10px;
		margin: 0 !important;
	}

	.single-product .ebh-card .quantity {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		border: 1.5px solid #dfe3e6;
		border-radius: 11px;
		overflow: hidden;
		background: #fff;
		height: 54px;
	}

	.single-product .ebh-card .quantity input.qty {
		width: 42px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
		border: 0;
		background: transparent;
	}

	.single-product .ebh-card .quantity input.minus,
	.single-product .ebh-card .quantity input.plus {
		width: 38px;
		border: 0;
		background: transparent;
		font-size: 19px;
		color: #3d444a;
	}

	/* LP01: Add to Cart is the solid red primary, Buy Now is the outlined
	   secondary. WoodMart ships the inverse and its rules also carry
	   !important, so these need higher specificity to win the tie - matching
	   the full class list the theme itself uses. */
	body.single-product .ebh-card .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.alt,
	body.single-product .ebh-card button.single_add_to_cart_button.button.alt {
		flex: 1 1 0;
		min-width: 0;
		height: 54px;
		border-radius: 11px !important;
		background-color: #e01f26 !important;
		background-image: none !important;
		border: 0 !important;
		color: #fff !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		letter-spacing: .2px;
	}

	body.single-product .ebh-card .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.alt:hover,
	body.single-product .ebh-card button.single_add_to_cart_button.button.alt:hover {
		background-color: #c8161d !important;
		color: #fff !important;
	}

	body.single-product .ebh-card .woocommerce-variation-add-to-cart button.wd-buy-now-btn.button.alt,
	body.single-product .ebh-card button.wd-buy-now-btn.button.alt {
		flex: 1 0 100%;
		height: 54px;
		margin: 0 !important;
		border-radius: 11px !important;
		background-color: #fff !important;
		background-image: none !important;
		color: #16181a !important;
		border: 1.5px solid #16181a !important;
		font-size: 15px !important;
		font-weight: 800 !important;
	}

	body.single-product .ebh-card button.wd-buy-now-btn.button.alt:hover {
		background-color: #f4f6f7 !important;
		color: #16181a !important;
	}

	/* ---- row 5: trust / payment ---- */

	.single-product .ebh-card .engwe-trust {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0;
		margin: 14px 0 0 !important;
		padding: 12px 0 0 !important;
		border-top: 1px solid #eceff1;
		list-style: none;
	}

	.single-product .ebh-card .engwe-trust li {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 4px;
		padding: 2px 6px !important;
		border-right: 1px solid #eceff1;
	}

	.single-product .ebh-card .engwe-trust li:last-child {
		border-right: 0;
	}

	.single-product .ebh-card .engwe-trust li svg,
	.single-product .ebh-card .engwe-trust li img {
		width: 22px;
		height: 22px;
		color: #3d444a;
	}

	.single-product .ebh-card .engwe-trust li strong,
	.single-product .ebh-card .engwe-trust li b {
		font-size: 12px;
		font-weight: 700;
		line-height: 1.25;
		color: #16181a;
	}

	.single-product .ebh-card .engwe-trust li span,
	.single-product .ebh-card .engwe-trust li p,
	.single-product .ebh-card .engwe-trust li .engwe-trust__txt {
		font-size: 10px;
		line-height: 1.25;
		color: #6b7379;
	}

	.single-product .ebh-card .engwe-trust li .engwe-trust__txt strong,
	.single-product .ebh-card .engwe-trust li .engwe-trust__txt b {
		display: block;
		font-size: 11.5px;
		margin-bottom: 1px;
	}

	/* The description lives in <small>, which the browser was rendering at 15px
	   - larger than its own 11.5px heading, inverting the hierarchy. */
	.single-product .ebh-card .engwe-trust li .engwe-trust__txt small {
		display: block;
		font-size: 10px !important;
		line-height: 1.3;
		font-weight: 400;
		color: #6b7379;
	}

	.single-product .ebh-card .engwe-trust li .engwe-trust__ico svg {
		width: 22px;
		height: 22px;
		stroke: #3d444a;
		fill: none;
	}

	/* Keep the saving pill on the price line when it fits. */
	.single-product .ebh-saving {
		padding: 5px 9px;
		font-size: 11.5px;
	}

	/* ---- legal badge sits after the card ---- */

	.single-product .engwe-legal-badge {
		margin-top: 14px;
	}

	/* ============================ STICKY BAR ============================ */

	.engwe-sticky-cta {
		padding-top: 9px;
		border-top: 1px solid #e6e9eb;
	}

	.engwe-sticky-cta__price {
		font-size: 21px;
		font-weight: 800;
		color: #16181a;
	}

	.engwe-sticky-cta__btn {
		height: 52px;
		border-radius: 11px;
		background: #e01f26;
		font-size: 15px;
		font-weight: 800;
		letter-spacing: .2px;
	}
}

#ebh-hero-templates[hidden] {
	display: none !important;
}

/* Tablet only (768-1023px): the added blocks stay out of the layout.
   From 1024px up, ebh-hero-desktop.css takes over and needs them visible. */
@media (min-width: 768px) and (max-width: 1023px) {
	.ebh-promo-bar,
	.ebh-saving,
	.ebh-delivery,
	.ebh-promo-pill,
	.ebh-rating-card {
		display: none !important;
	}

	.ebh-card {
		display: contents;
	}
}