/**
 * Order items — div layout (thank-you page + My Account "view order").
 *
 * Styles the div-based markup rendered by woocommerce/order/order-details.php +
 * order-details-item.php (replacing WooCommerce's order_details <table>). Scoped
 * to .woocommerce-order-details so it applies wherever that section renders.
 * Mirrors the previous table styling 1:1 and adds the product thumbnail.
 */

.woocommerce-order-details .bozpo-order-table {
	font-size: var(--text-14, 14px);
	color: var(--color-text);
}

/* ------------------------------------------------------------ Header row */
.woocommerce-order-details .bozpo-order-table__head {
	display: flex;
	justify-content: space-between;
	gap: var(--space-16, 16px);
	padding: var(--space-12, 12px) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-11, 11px);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* ------------------------------------------------------------- Item row */
.woocommerce-order-details .bozpo-order-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-14, 14px);
	padding: var(--space-14, 14px) 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-order-details .bozpo-order-item__media {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-10);
}

.woocommerce-order-details .bozpo-order-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.woocommerce-order-details .bozpo-order-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-order-details .bozpo-order-item__name a {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-order-details .bozpo-order-item__name a:hover { color: var(--c-brand); }

.woocommerce-order-details .bozpo-order-item__name .product-quantity {
	color: var(--color-muted);
	font-weight: 500;
}

.woocommerce-order-details .wc-item-meta {
	margin: var(--space-4, 4px) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-12, 12px);
	color: var(--color-muted);
}

.woocommerce-order-details .wc-item-meta li { display: flex; gap: 4px; }
.woocommerce-order-details .wc-item-meta p { margin: 0; }

.woocommerce-order-details .bozpo-order-item__total {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--color-text);
}

.woocommerce-order-details .bozpo-order-item__total .tax_label {
	display: block;
	margin-top: 2px;
	font-size: var(--text-11, 11px);
	font-weight: 500;
	color: var(--color-muted);
}

.woocommerce-order-details .bozpo-order-item__note {
	padding: var(--space-8, 8px) 0 var(--space-12, 12px);
	font-size: var(--text-13, 13px);
	color: var(--color-muted);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-order-details .bozpo-order-item__note p { margin: 0; }

/* --------------------------------------------------------- Totals (foot) */
.woocommerce-order-details .bozpo-order-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-16, 16px);
	padding: var(--space-12, 12px) 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-order-details .bozpo-order-total__label {
	font-weight: 500;
	color: var(--color-muted);
}

/* Shipping method name shown next to the "Doručenie:" label. */
.woocommerce-order-details .bozpo-order-total__method {
	font-weight: 600;
	color: var(--color-text);
}

.woocommerce-order-details .bozpo-order-total__value {
	text-align: right;
	font-weight: 700;
	color: var(--color-text);
}

.woocommerce-order-details .bozpo-order-total__value .tax_label,
.woocommerce-order-details .bozpo-order-total__value .includes_tax,
.woocommerce-order-details .bozpo-order-total__value .shipped_via {
	font-weight: 500;
	color: var(--color-muted);
}

/* Grand total ("Cena spolu") — brand-coloured, emphasised. */
.woocommerce-order-details .bozpo-order-total--grand {
	padding-top: var(--space-14, 14px);
	border-top: 2px solid var(--color-border);
	border-bottom: 0;
}

.woocommerce-order-details .bozpo-order-total--grand .bozpo-order-total__label,
.woocommerce-order-details .bozpo-order-total--grand .bozpo-order-total__value {
	font-family: var(--font-display);
	font-size: var(--text-18, 18px);
}

.woocommerce-order-details .bozpo-order-total--grand .bozpo-order-total__value { color: var(--c-brand); }

.woocommerce-order-details .bozpo-order-total--actions .bozpo-order-total__value { font-weight: 500; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 600px) {
	.woocommerce-order-details .bozpo-order-item__media { width: 48px; height: 48px; }
}