/*
 * Corrections to the theme's markup (Flatsome + the "ntc" child theme), found on a
 * phone on 27.10.2026. The theme is not ours to change; every rule here names the
 * theme rule it corrects, so a theme update that changes one can be checked against
 * it. Loaded on every page (shop-ui.php): product cards stand on pages built from the
 * theme's blocks too.
 */

/* --- The discount ribbon on product cards ------------------------------------------
 *
 * Child theme _product-card.min.css:
 *   div.product.type-product>.col-inner .badge-container {
 *     top: 70%; right: -33%; width: 100% !important; height: 20% !important;
 *     transform: rotate(-46deg) }
 * The band is placed by percentages of the picture while its text keeps its size and
 * never wraps. On a 155 px card (two cards side by side on a phone) the text ran past
 * the picture's edge: "5% Onlinerabat…".
 *
 * Here everything is measured in the picture's own width (cqi): the band's middle sits
 * a fixed share of the width away from the bottom-right corner, along the diagonal,
 * and the text scales with the picture. What shows of the band at its middle is twice
 * that distance long, so the text fits at any card width (checked 120–400 px). The
 * selectors are one class stronger than the theme's, which uses !important too. The
 * ribbon in the product page's gallery is drawn by other rules and is fine.
 */
.product-small.col > .col-inner .box-image {
	container-type: inline-size;
}
.product-small.col > .col-inner .box-image > .badge-container {
	/* The band's thickness, and how far its middle is from the corner. */
	--ntc-band: 22cqi;
	--ntc-reach: 36cqi;
	top: auto !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	width: 160cqi !important;
	height: var(--ntc-band) !important;
	margin: 0 !important;
	/* From the corner, 0.7071 × reach along each edge is a distance `reach` on the diagonal. */
	transform: translate(calc(80cqi - var(--ntc-reach) * 0.7071), calc(var(--ntc-band) / 2 - var(--ntc-reach) * 0.7071)) rotate(-45deg) !important;
}
.product-small.col > .col-inner .box-image > .badge-container :is(.badge-frame, .badge-inner) {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.product-small.col > .col-inner .box-image > .badge-container .badge-inner {
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: clamp(12px, 10cqi, 22px) !important;
	line-height: 1 !important;
}
.product-small.col > .col-inner .box-image > .badge-container .onsale {
	position: static !important;
	inset: auto !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	line-height: 1;
	white-space: nowrap;
}
.product-small.col > .col-inner .box-image > .badge-container .sale-text {
	font-size: clamp(9px, 5.6cqi, 13px) !important;
	line-height: 1 !important;
}

/* --- The level row on a course page ---------------------------------------------
 *
 * Child theme _product.min.css, up to 849 px:
 *   .single .variations td.value a { left: -3rem; top: 0.8rem }
 * meant for the round "?" that explains the levels, but it hits every link in the
 * cell — WooCommerce's "Zurücksetzen" too — and both landed on the label „Level“.
 * The "?" now stands beside the dropdown at every width, its explanation opens under
 * the row at full width, and "Zurücksetzen" is back where Flatsome puts it, above the
 * dropdown's right end (`.variations .reset_variations { bottom: 95%; right: 0 }`).
 */
.single .variations td.value:has(> .sections-tooltip-amelia-pdp) {
	padding-right: 2.75rem;
}
.single .variations td.value .sections-tooltip-amelia-pdp > a {
	position: absolute;
	top: 50% !important;
	right: 0;
	left: auto !important;
	margin: 0;
	translate: 0 -50%;
}
.single .variations td.value > a.reset_variations {
	top: auto !important;
	right: 2.75rem;
	left: auto !important;
}
.single .variations td.value .sections-tooltip-amelia-pdp .text-tooltip-amelia {
	top: calc(100% + 0.5rem);
	right: 0;
	left: 0;
	max-width: none;
	z-index: 10;
}

/* --- Course details in the cart --------------------------------------------------
 *
 * Child theme _cart_checkout.min.css:
 *   body.woocommerce-cart .shop_table .cart_item .product-info .variation {
 *     display: none }
 * Under Amelia a line's details were unreadable, so the theme hid them all. A course
 * line's are what a customer checks before paying — day, time, meeting point, who
 * takes part — so they show again, for course lines only (`ntc-course-line`,
 * shop-ui.php). A rental line keeps the theme's look.
 */
/* Label and value on one line, wrapping under the label only when they must: a cart
   column on a phone is ~170 px, too narrow for two columns ("19.12.2|026"). */
body.woocommerce-cart .shop_table .cart_item.ntc-course-line .product-info .variation {
	display: block;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	text-transform: none;
}
.cart_item.ntc-course-line .variation dt {
	float: left;
	clear: left;
	margin: 0 0.3em 0 0;
	padding: 0;
	color: var(--ntc-muted, #5f5f5f);
	font-weight: 600;
}
.cart_item.ntc-course-line .variation dd {
	margin: 0 0 0.125rem;
	padding: 0;
	color: var(--ntc-ink, #191816);
}
.ntc-course-line .variation dd p {
	display: inline;
	margin: 0;
}