/* =====================================================================
 * BB CPR — Cart / checkout cart table (composite rings)
 * ---------------------------------------------------------------------
 * Cart page is built with Elementor Pro WooCommerce Cart widget:
 *   .elementor-widget-woocommerce-cart .e-cart__container …
 * Rules below also target body.woocommerce-cart for classic template.
 * Composite Products: .component_container_table_item (parent),
 * .component_table_item (each component line — one <tr>, six <td> cells).
 * ===================================================================== */

:root {
	--bb-cpr-cart-card-bg: rgba(250, 247, 242, 0.95);
	--bb-cpr-cart-card-border: rgba(184, 148, 46, 0.45);
	--bb-cpr-cart-card-radius: 10px;
	/* Desktop-only white band between stacked component rows (see @media min-width:601px) */
	--bb-cpr-component-stack-gap: 22px;
}


/* --- Composite parent line: minimal bottom (thumb sits just above first card) --- */
body.woocommerce-cart table.shop_table.cart tr.component_container_table_item td,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_container_table_item td {
	padding-bottom: 0;
}

/* --- Component lines: full-row “card” (all columns: remove, thumb, name, price, qty, subtotal) --- */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td {
	background: var(--bb-cpr-cart-card-bg);
	vertical-align: top;
	padding-top: 10px;
	padding-bottom: 14px;
	padding-left: 10px;
	padding-right: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(184, 148, 46, 0.15);
}

/* Produkt column: figures live in dl.component grid — no extra right gutter for absolute positioning */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name {
	position: relative;
	padding-top: 10px;
	padding-right: 12px;
	padding-left: 12px;
	/* TL only — square BL so the card meets the row / next segment cleanly */
	border-radius: var(--bb-cpr-cart-card-radius) 0 0 0;
}

/* Left accent: full height of td (stack-gap is drawn with row background only; bar must reach card bottom) */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name::after,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--bb-cpr-cart-card-border);
	border-radius: 2px;
	pointer-events: none;
}

/* Collapse price column; subtotal stays visually empty but needs overflow:visible or border-radius is clipped */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-price,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-price {
	width: 0;
	max-width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	border-left: none !important;
	border-right: none !important;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-subtotal,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-subtotal {
	width: 0;
	max-width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
	line-height: 0 !important;
	border-left: none !important;
	border-right: none !important;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item:not(.bb-cpr-composited-qty-input) td.product-quantity,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item:not(.bb-cpr-composited-qty-input) td.product-quantity {
	width: 0;
	max-width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	border-left: none !important;
	border-right: none !important;
}

/* When Composite shows a real quantity input, keep that column usable */
body.woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-quantity,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-quantity {
	width: auto;
	max-width: none;
	font-size: inherit !important;
	line-height: inherit !important;
	overflow: visible;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-name,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-name {
	padding-right: min(38%, 12rem);
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td:last-child,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td:last-child {
	border-radius: 0 var(--bb-cpr-cart-card-radius) var(--bb-cpr-cart-card-radius) 0;
}

/* Stacked component row: top of right column meets white band — ensure TR rounds (overflow was clipping) */
body.woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td.product-subtotal,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td.product-subtotal,
body.woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td:last-child,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td:last-child {
	border-top-right-radius: var(--bb-cpr-cart-card-radius);
}

/*
 * Zwischensumme: same right-edge radius as the card (top-right + bottom-right).
 * Explicit selector — in some layouts this cell is not :last-child (extra columns / Elementor),
 * so the generic td:last-child rule above never hits it.
 */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-subtotal,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-subtotal {
	border-radius: 0 var(--bb-cpr-cart-card-radius) var(--bb-cpr-cart-card-radius) 0 !important;
}

/* Inline qty / Zwischensumme — inside dd.bb-cpr-figures-dd; dl uses grid so title + figures share one row */
body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures {
	position: static;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: baseline;
	gap: 0.2rem 0.65rem;
	max-width: none;
	text-align: left;
	font-size: 0.95em;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__qty,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__qty {
	font-weight: 600;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__qty::after,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__qty::after {
	content: "·";
	margin-left: 0.45rem;
	opacity: 0.45;
	font-weight: 400;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__sub .woocommerce-Price-amount,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures__sub .woocommerce-Price-amount {
	font-weight: 500;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures--qty-in-column,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures--qty-in-column {
	max-width: min(38%, 12rem);
}

/*
 * Desktop only: white band above 2nd+ component rows (linear-gradient; collapse-safe).
 * Mobile keeps continuous card background — no gap.
 */
@media (min-width: 601px) {
	body.woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item + tr.component_table_item td {
		padding-top: 10px;
		background-image: linear-gradient(
			180deg,
			#fff 0,
			#fff var(--bb-cpr-component-stack-gap),
			var(--bb-cpr-cart-card-bg) var(--bb-cpr-component-stack-gap)
		);
	}
}

body.woocommerce-cart table.shop_table.cart tr.component_container_table_item + tr.component_table_item td,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_container_table_item + tr.component_table_item td {
	padding-top: 0 !important;
	border-top: 0;
}

/* Beats generic tr.component_table_item td.product-name { padding-top: 10px } on the first card row */
body.woocommerce-cart table.shop_table.cart tr.component_container_table_item + tr.component_table_item td.product-name,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_container_table_item + tr.component_table_item td.product-name {
	padding-top: 0 !important;
}

/* Composite Products: component title row + figures + product line (PHP injects dd.bb-cpr-figures-dd) */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component {
	display: grid;
	grid-template-columns: auto max-content;
	grid-template-rows: auto auto;
	column-gap: 0.65rem;
	row-gap: 0;
	gap: 0 0.65rem;
	align-items: baseline;
	justify-items: start;
	margin: 0 0 5px;
	padding: 0;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dt,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dt {
	grid-column: 1;
	grid-row: 1;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	float: none;
	width: auto;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd.bb-cpr-figures-dd,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd.bb-cpr-figures-dd {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 0 !important;
	justify-self: start;
	width: max-content;
	max-width: 100%;
	min-width: 0;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd:not(.bb-cpr-figures-dd),
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd:not(.bb-cpr-figures-dd) {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 4px 0 0 !important;
	font-weight: 400;
	line-height: 1.45;
	opacity: 0.95;
}

/*
 * Composite `component-item.php` runs wpautop() on the product line — the SKU sits in <p> with UA/theme margins,
 * which reads as a large gap before ul.wcpa_cart_meta / dl.variation (often ~1em below the line).
 */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd p,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd p,
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name .component-name dl.component > dd p,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name .component-name dl.component > dd p {
	margin: 0 !important;
	padding: 0 !important;
}

/* First WCPA row: kill any top padding/margin on the row itself */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name ul.wcpa_cart_meta > li.wcpa_cart_meta_item:first-child,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name ul.wcpa_cart_meta > li.wcpa_cart_meta_item:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Woo item meta: dl.variation — label | value grid */
body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation {
	display: grid;
	grid-template-columns: minmax(8.5rem, 11rem) 1fr;
	column-gap: 10px;
	row-gap: 6px;
	align-items: baseline;
	margin: 3px 0 0;
	padding: 5px 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	clear: both;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt {
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dd,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dd {
	float: none;
	margin: 0;
	padding: 0;
	font-size: 0.95em;
	font-weight: 400;
	line-height: 1.45;
	opacity: 0.92;
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dd > p,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dd > p {
	margin: 0;
}

@media (max-width: 600px) {
	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name {
		padding-top: 10px;
		padding-right: 10px;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dt,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dt {
		grid-column: 1;
		grid-row: 1;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd.bb-cpr-figures-dd,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd.bb-cpr-figures-dd {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd:not(.bb-cpr-figures-dd),
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.component > dd:not(.bb-cpr-figures-dd) {
		grid-column: 1;
		grid-row: 3;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures {
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-bottom: 0.15rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-name,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item.bb-cpr-composited-qty-input td.product-name {
		padding-right: 0;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation {
		grid-template-columns: 1fr;
		row-gap: 2px;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt {
		margin-top: 8px;
	}

	body.woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt:first-of-type,
	.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item td.product-name dl.variation dt:first-of-type {
		margin-top: 0;
	}
}

body.woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures .component_table_item_subtotal:after,
.elementor-widget-woocommerce-cart table.shop_table.cart tr.component_table_item .bb-cpr-component-line-figures .component_table_item_subtotal:after {
	display: none !important;
}
