/*
 * Stránka Košík (/cart/).
 *
 * 1. Doplnky produktu (WCPA) a atribúty variácie pod názvom — kompaktne,
 *    rovnako ako vo vysúvacom košíku (kosik-panel.css).
 * 2. Mobil a tablet (do 921px): Astra/WooCommerce tu tabuľku rozkladá na
 *    stĺpec — fotka cez celú šírku (pri 921px až ~780px) a každý údaj ako
 *    samostatný riadok s popiskom, jedna položka mala 600–1000px. Položku
 *    skladáme do karty: fotka 80px vľavo, vedľa názov, doplnky a cena,
 *    pod tým počet a medzisúčet, odstránenie vpravo hore.
 */

/* ------------------------------------------------ Doplnky a atribúty */

body.woocommerce-cart .woocommerce-cart-form ul.wcpa_cart_meta,
body.woocommerce-cart .woocommerce-cart-form dl.variation {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-cart .woocommerce-cart-form .wcpa_cart_meta .wcpa_cart_meta_item {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	margin: 0 0 2px;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #5b6b5f;
}

body.woocommerce-cart .woocommerce-cart-form .wcpa_cart_meta .wcpa_cart_meta_item-label,
body.woocommerce-cart .woocommerce-cart-form dl.variation dt {
	margin: 0;
	font-weight: 600;
	color: #183f22;
}

body.woocommerce-cart .woocommerce-cart-form .wcpa_cart_meta .wcpa_cart_meta_item-value,
body.woocommerce-cart .woocommerce-cart-form dl.variation dd {
	margin: 0;
}

body.woocommerce-cart .woocommerce-cart-form dl.variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 4px;
	font-size: 13px;
	line-height: 1.4;
	color: #5b6b5f;
}

body.woocommerce-cart .woocommerce-cart-form dl.variation dd p {
	margin: 0;
}

/* Názov produktu ako vo vysúvacom košíku. */
body.woocommerce-cart .woocommerce-cart-form td.product-name > a {
	font-weight: 600;
	color: #183f22;
	text-decoration: none;
}

/* ------------------------------------------------- Mobil a tablet */

@media (max-width: 921px) {
	body.woocommerce-cart .woocommerce-cart-form table.shop_table {
		border: 0;
	}

	/* Položka ako karta v mriežke. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 80px 1fr auto;
		grid-template-areas:
			"foto  nazov nazov"
			"foto  cena  cena"
			"pocet pocet sucet";
		grid-template-rows: auto 1fr auto;
		gap: 4px 14px;
		align-items: start;
		margin: 0 0 12px;
		padding: 16px;
		border: 1px solid #e3e8e4;
		border-radius: 16px;
		background-color: #ffffff;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		/* WooCommerce (woocommerce-smallscreen.css) tu zarovnáva doprava s !important. */
		text-align: left !important;
	}

	/* Popisky „Produkt:“, „Cena:“… sú v karte zbytočné, údaje hovoria za seba. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td::before {
		content: none;
		display: none;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-thumbnail {
		grid-area: foto;
		align-self: start;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
		box-sizing: border-box;
		width: 80px;
		max-width: none;
		height: 80px;
		padding: 4px;
		border: 1px solid #e3e8e4;
		border-radius: 10px;
		background-color: #ffffff;
		object-fit: contain;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name {
		grid-area: nazov;
		/* Miesto pre krížik v pravom hornom rohu karty. */
		padding-right: 28px !important;
		font-size: 15px;
		line-height: 1.35;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-remove {
		position: absolute;
		top: 16px;
		right: 16px;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-remove a.remove {
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-price {
		grid-area: cena;
		font-size: 13px;
		color: #5b6b5f;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity {
		grid-area: pocet;
		margin-top: 10px;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity .quantity {
		justify-content: flex-start;
		float: none;
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-subtotal {
		grid-area: sucet;
		align-self: center;
		margin-top: 10px;
		font-size: 16px;
		font-weight: 700;
		color: #183f22;
		white-space: nowrap;
		text-align: right !important;
	}

	/* Kupón a aktualizácia košíka — riadok pod kartami, bez rámu tabuľky. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr:not(.cart_item) td.actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 4px 0 0;
		border: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .coupon {
		display: flex;
		gap: 8px;
		width: 100%;
		float: none;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .coupon .input-text {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		margin: 0 !important;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .coupon .button {
		flex: 0 0 auto;
		width: auto;
		margin: 0 !important;
		padding-left: 20px;
		padding-right: 20px;
		white-space: nowrap;
	}

	/* Aktualizovať košík cez celú šírku — predtým prečnieval cez okraj. */
	body.woocommerce-cart .woocommerce-cart-form td.actions > .button {
		box-sizing: border-box;
		width: 100%;
		/* Astra tlačidlám v riadku akcií dáva margin-left: 5px. */
		margin: 0 !important;
		float: none;
	}
}