/**
 * Ebike Hause - DESKTOP product hero, KK02 reference. 2026-09-09.
 *
 * EVERY rule in this file lives inside @media (min-width: 1024px).
 * The approved mobile design (360/390/414) is therefore untouched by design,
 * not by accident - nothing here can apply below 1024px.
 *
 * Layout reproduced from KK02:
 *   left  : vertical thumbnail rail + large image + technical highlight strip
 *   right : title / rating / summary / promo bar / price / colour /
 *           purchase card / delivery card / trust card / legal card
 *
 * The right column is an Elementor flex column, so the KK02 sequence is
 * achieved with `order` on the existing children - no Elementor structure is
 * rebuilt and no widget is deleted.
 */

@media (min-width: 1024px) {

	/* ======================= COLUMN PROPORTIONS ======================== */

	.single-product .elementor-element-354a23f {
		flex: 0 0 59% !important;
		max-width: 59% !important;
	}

	.single-product .elementor-element-1c31fe0 {
		flex: 0 0 39% !important;
		max-width: 39% !important;
		--row-gap: 0px;
		row-gap: 0;
		align-content: start;
	}

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

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

	/* KK02 hides the theme's own -90% chip; the promo pill carries it. */
	.single-product .woocommerce-product-gallery .onsale,
	.single-product .woocommerce-product-gallery .product-labels,
	.single-product .woocommerce-product-gallery .wd-product-labels {
		display: none !important;
	}

	/* Promo pill, upper-left over the image. */
	.single-product .ebh-promo-pill {
		position: absolute;
		top: 18px;
		left: 18px;
		z-index: 6;
		display: inline-flex !important;
		align-items: center;
		gap: 10px;
		padding: 10px 20px 10px 14px;
		border-radius: 999px;
		background: #e01f26;
		color: #fff;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	}

	.single-product .ebh-promo-pill__bolt { font-size: 18px; line-height: 1; }

	.single-product .ebh-promo-pill__txt {
		display: flex;
		flex-direction: column;
		line-height: 1.12;
	}

	.single-product .ebh-promo-pill__txt strong {
		font-size: 17px;
		font-weight: 800;
		letter-spacing: .2px;
	}

	.single-product .ebh-promo-pill__txt em {
		font-style: normal;
		font-size: 12.5px;
		font-weight: 600;
		opacity: .95;
	}

	/* Rating card, upper-right over the image. Real review data only. */
	.single-product .ebh-rating-card {
		position: absolute;
		top: 18px;
		right: 18px;
		z-index: 6;
		display: inline-flex !important;
		align-items: center;
		gap: 9px;
		padding: 10px 14px;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 3px 12px rgba(0, 0, 0, .13);
	}

	.single-product .ebh-rating-card__star { color: #f5a623; font-size: 19px; line-height: 1; }

	.single-product .ebh-rating-card__body { display: flex; flex-direction: column; line-height: 1.2; }

	.single-product .ebh-rating-card__body strong { font-size: 14px; font-weight: 700; color: #16181a; }

	.single-product .ebh-rating-card__body em { font-style: normal; font-size: 12px; color: #5d666e; }

	/* Vertical thumbnail rail: KK02 uses squarish tiles with a green active
	   outline. The rail is never hidden or zero-heighted - that breaks the
	   Swiper thumbs module and kills the main-image swipe. */
	.single-product .woocommerce-product-gallery .wd-gallery-thumb {
		max-height: none !important;
		margin: 0 !important;
	}

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

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

	.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;
	}

	/* ==================== TECHNICAL HIGHLIGHT STRIP ==================== */

	.single-product .ebh-highlights {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		margin: 22px 0 0;
		padding: 18px 0 4px;
	}

	.single-product .ebh-highlights__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 5px;
		padding: 0 8px;
	}

	.single-product .ebh-highlights__ico { color: #3d444a; line-height: 0; }

	.single-product .ebh-highlights__value {
		font-size: 15px;
		font-weight: 800;
		color: #16181a;
		line-height: 1.2;
	}

	.single-product .ebh-highlights__label {
		font-size: 12.5px;
		color: #6b7379;
		line-height: 1.25;
	}

	/* ================= RIGHT COLUMN: KK02 SEQUENCE ===================== */

	/* The flex container is the inner .e-con-inner, not the .elementor-element
	   wrapper - ordering the wrapper's children has no effect. */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner { display: flex !important; flex-direction: column !important; }

	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-6be2a90 { order: 1 !important; margin-bottom: 4px; }   /* title   */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-1be112a { order: 2 !important; margin-bottom: 12px; }  /* rating  */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-60d0475 { order: 3 !important; margin-bottom: 18px; }  /* summary */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .ebh-promo-bar             { order: 4 !important; }
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-edbaca2 { order: 5 !important; }                       /* price   */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-45ffe11 { order: 6 !important; }                       /* colour + buttons */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .ebh-delivery              { order: 7 !important; }
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-e29024b { order: 8 !important; }                       /* trust   */
	body.single-product .elementor-element-1c31fe0 > .e-con-inner > .elementor-element-e29024a { order: 9 !important; }                       /* legal   */

	.single-product h1.product_title {
		font-size: 31px !important;
		line-height: 1.15 !important;
		font-weight: 800 !important;
		letter-spacing: -.4px;
	}

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

	/* Short product summary paragraph. */
	.single-product .elementor-element-60d0475 {
		font-size: 15px;
		line-height: 1.5;
		color: #4a5257;
	}

	/* ---- promo / countdown bar ---- */

	.single-product .ebh-promo-bar {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 13px 16px;
		border-radius: 12px;
		background: #e01f26;
		color: #fff;
		margin: 0 0 18px;
	}

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

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

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

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

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

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

	/* ---- price row ---- */

	.single-product .elementor-element-edbaca2 { margin-bottom: 18px; }

	body.single-product .elementor-element-edbaca2 p.price,
	body.single-product p.price {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		gap: 6px 14px !important;
		margin: 0 !important;
	}

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

	body.single-product p.price > del,
	body.single-product .elementor-element-edbaca2 p.price del,
	body.single-product .elementor-element-edbaca2 p.price del .woocommerce-Price-amount {
		order: 2 !important;
		opacity: 1;
		font-size: 23px !important;
		font-weight: 600 !important;
		color: #8a9299 !important;
		text-decoration: line-through;
	}

	.single-product .elementor-element-edbaca2 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 {
		display: inline-block !important;
		order: 3;
		flex: 0 0 auto;
		padding: 7px 13px;
		border-radius: 999px;
		background: #fdecec;
		color: #c11c23;
		font-size: 13.5px;
		font-weight: 700;
		white-space: nowrap;
	}

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

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

	/* ---- colour swatches ---- */

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

	/* On desktop the variation form is a real <table>: the "Farbe:" label sits
	   in a <th> beside the swatches, which squeezed the circles into a 25px
	   row. Stack the table so the label sits above a full-width swatch row,
	   exactly as KK02 shows it. Layout only - the select handlers are the
	   theme's own and are untouched. */
	.single-product .variations,
	.single-product .variations tbody,
	.single-product .variations tr,
	.single-product .variations th,
	.single-product .variations td {
		display: block !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.single-product .variations .wd-swatch-text {
		display: block !important;
	}

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

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

	/* Compact swatch row: ~46px circles with a clear 14px gap, left-aligned
	   under the "Farbe:" label. Sizing only - the WooCommerce variation
	   selection handlers are untouched. */
	.single-product .wd-swatches-single {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start !important;
		align-items: flex-start;
		gap: 14px !important;
		margin: 0 !important;
	}

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

	/* WoodMart pins .wd-swatch to a 25px height (wd-size-default), which
	   clipped the 46px circle. Release the height and stack circle over label. */
	.single-product .wd-swatches-single,
	.single-product .wd-swatches-single .wd-swatch {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

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

	.single-product .wd-swatches-single .wd-swatch-bg {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		max-width: 46px !important;
		flex: 0 0 46px !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 !important;
	}

	.single-product .wd-swatches-single .wd-swatch-text {
		font-size: 13px !important;
		color: #3d444a;
		margin-top: 9px !important;
		text-align: center;
	}

	/* ---- purchase card: quantity + ATC on one row, Buy Now beneath ---- */

	.single-product .elementor-element-45ffe11 .single_variation_wrap {
		margin-top: 20px;
		padding: 14px;
		border: 1px solid #e4e8eb;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(16, 24, 32, .05);
	}

	.single-product .elementor-element-45ffe11 .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 12px;
		margin: 0 !important;
	}

	.single-product .elementor-element-45ffe11 .quantity {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		border: 1.5px solid #dfe3e6;
		border-radius: 11px;
		overflow: hidden;
		background: #fff;
		height: 58px;
	}

	.single-product .elementor-element-45ffe11 .quantity input.qty {
		width: 46px;
		text-align: center;
		font-size: 17px;
		font-weight: 700;
		border: 0;
		background: transparent;
	}

	.single-product .elementor-element-45ffe11 .quantity input.minus,
	.single-product .elementor-element-45ffe11 .quantity input.plus {
		width: 42px;
		border: 0;
		background: transparent;
		font-size: 20px;
		color: #3d444a;
	}

	/* KK02: Add to Cart is the solid red primary, Buy Now the outlined
	   secondary. WoodMart ships the inverse with !important, so these match the
	   theme's full class chain to win the specificity tie. */
	body.single-product .elementor-element-45ffe11 button.single_add_to_cart_button.button.alt {
		flex: 1 1 0;
		min-width: 0;
		height: 58px;
		border-radius: 11px !important;
		background-color: #e01f26 !important;
		background-image: none !important;
		border: 0 !important;
		color: #fff !important;
		font-size: 16px !important;
		font-weight: 800 !important;
		letter-spacing: .2px;
	}

	body.single-product .elementor-element-45ffe11 button.single_add_to_cart_button.button.alt:hover {
		background-color: #c8161d !important;
		color: #fff !important;
	}

	body.single-product .elementor-element-45ffe11 button.wd-buy-now-btn.button.alt {
		flex: 1 0 100%;
		height: 56px;
		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: 16px !important;
		font-weight: 800 !important;
	}

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

	/* ---- delivery card ---- */

	.single-product .ebh-delivery {
		display: block !important;
		margin: 16px 0 0;
		padding: 15px 16px;
		border: 1px solid #e4e8eb;
		border-radius: 14px;
		background: #fff;
	}

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

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

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

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

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

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

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

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

	/* ---- trust card ---- */

	.single-product .elementor-element-e29024b {
		margin-top: 16px;
		padding: 16px 8px;
		border: 1px solid #e4e8eb;
		border-radius: 14px;
		background: #fff;
	}

	.single-product .elementor-element-e29024b .engwe-trust {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}

	.single-product .elementor-element-e29024b .engwe-trust li {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
		padding: 0 10px !important;
		border-right: 1px solid #eceff1;
	}

	.single-product .elementor-element-e29024b .engwe-trust li:last-child { border-right: 0; }

	.single-product .elementor-element-e29024b .engwe-trust li .engwe-trust__ico svg {
		width: 24px;
		height: 24px;
		stroke: #3d444a;
		fill: none;
	}

	.single-product .elementor-element-e29024b .engwe-trust__txt strong,
	.single-product .elementor-element-e29024b .engwe-trust__txt b {
		display: block;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.25;
		color: #16181a;
	}

	.single-product .elementor-element-e29024b .engwe-trust__txt small {
		display: block;
		font-size: 11.5px !important;
		line-height: 1.3;
		font-weight: 400;
		color: #6b7379;
	}

	/* ---- green legal card ---- */

	.single-product .elementor-element-e29024a { margin-top: 16px; }

	.single-product .engwe-legal-badge {
		border: 1px solid #cde8d4;
		border-radius: 14px;
		background: #f5fbf7;
		padding: 14px 16px !important;
	}

	/* No horizontal overflow anywhere in the desktop hero. */
	.single-product .elementor-element-354a23f,
	.single-product .elementor-element-1c31fe0,
	.single-product .ebh-highlights {
		box-sizing: border-box;
		max-width: 100%;
	}
}

/* Below 1024px nothing above applies, and the desktop-only blocks stay out of
   the approved mobile layout. */
@media (max-width: 1023px) {
	.ebh-promo-pill,
	.ebh-rating-card,
	.ebh-highlights {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	/* Force the KK02 single 3-column trust card, whichever Elementor wrapper
	   is the visible one at this breakpoint. */
	body.single-product ul.engwe-trust {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0 !important;
		margin: 16px 0 0 !important;
		padding: 16px 8px !important;
		border: 1px solid #e4e8eb !important;
		border-radius: 14px !important;
		background: #fff !important;
		list-style: none !important;
	}

	body.single-product ul.engwe-trust > li {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 6px !important;
		margin: 0 !important;
		padding: 0 10px !important;
		border: 0 !important;
		border-right: 1px solid #eceff1 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	body.single-product ul.engwe-trust > li:last-child { border-right: 0 !important; }
}

@media (min-width: 1024px) {
	/* Price row, KK02 order enforced end-to-end:
	   99,00 EUR  |  999,00 EUR struck  |  Du sparst pill
	   then "inkl. MwSt." and the stock note each on their own line.
	   All five need !important - with only some of them set, the rest fall
	   back to order 0 and jump to the front of the row. */
	body.single-product p.price > ins,
	body.single-product p.price > .woocommerce-Price-amount { order: 1 !important; }
	body.single-product p.price > del                        { order: 2 !important; }
	body.single-product p.price > .ebh-saving                { order: 3 !important; }
	body.single-product p.price > .ebh-price-tax             { order: 4 !important; flex: 0 0 auto !important; }
	body.single-product p.price > .ebh-stock-note            { order: 5 !important; flex: 1 0 100% !important; }
	body.single-product p.price > .screen-reader-text        { order: 6 !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
}

@media (min-width: 1024px) {
	/* KK02 right-column sequence, enforced with parent-agnostic selectors.
	   The earlier `.elementor-element-1c31fe0 > .e-con-inner > X` chains did
	   not match at paint time, so only the simply-selected blocks (promo bar,
	   delivery) were being ordered. These need no assumption about how many
	   wrappers Elementor puts in between - the flex parent applies `order`
	   to whichever of its children match. */
	body.single-product .elementor-element-6be2a90 { order: 1 !important; }  /* title    */
	body.single-product .elementor-element-1be112a { order: 2 !important; }  /* rating   */
	body.single-product .elementor-element-60d0475 { order: 3 !important; }  /* summary  */
	body.single-product .ebh-promo-bar             { order: 4 !important; }
	body.single-product .elementor-element-edbaca2 { order: 5 !important; }  /* price    */
	body.single-product .elementor-element-45ffe11 { order: 6 !important; }  /* colour + buttons */
	body.single-product .ebh-delivery              { order: 7 !important; }
	body.single-product .elementor-element-e29024b { order: 8 !important; }  /* trust    */
	body.single-product .elementor-element-e29024a { order: 9 !important; }  /* legal    */
}