/*
 * Header mini-cart dropdown — styled to the design's light header popovers
 * (CaloriePopover / search results: white --sisa-panel surface, 1px hairline,
 * sharp corners, --sisa-shadow-pop). Blocksy's default dropdown is a near-black
 * panel; we override it. Verified live markup: the panel wrapper is
 * `.ct-header-cart .ct-cart-content`, the list is `ul.woocommerce-mini-cart`,
 * items `li.woocommerce-mini-cart-item`, remove `a.remove`, total
 * `p.woocommerce-mini-cart__total`, buttons `.woocommerce-mini-cart__buttons`
 * (`a.checkout` = primary). Tokens from tokens.css.
 */

/* ---------- Panel ---------- */
#header .ct-header-cart .ct-cart-content,
#header .ct-header-cart .woocommerce-mini-cart {
	background: var(--sisa-panel);
	color: var(--sisa-ink);
}
#header .ct-header-cart .ct-cart-content {
	border: 1px solid var(--sisa-hairline);
	border-radius: 0;
	box-shadow: var(--sisa-shadow-pop);
	padding: 20px;
	box-sizing: border-box;
}

/* ---------- Item list ---------- */
#header .ct-header-cart ul.woocommerce-mini-cart {
	margin: 0; padding: 0; list-style: none;
}
#header .ct-header-cart .cart_list li.woocommerce-mini-cart-item {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 0; margin: 0;
	border-bottom: 1px solid var(--sisa-hairline);
	position: relative;
}
/* thumb link must hug its image — unsized, it flex-grows and shoves the title
   into a squeezed right column (the "broken layout" collapse) */
#header .ct-header-cart .cart_list li.woocommerce-mini-cart-item .ct-media-container { flex: none; width: 56px; order: -1; }
#header .ct-header-cart .cart_list li.woocommerce-mini-cart-item img {
	width: 56px; height: 56px; flex: none;
	background: var(--sisa-bg-card); object-fit: contain;
	margin: 0; display: block;
}
#header .ct-header-cart .cart_list li.woocommerce-mini-cart-item .product-data { flex: 1; min-width: 0; padding-right: 30px; }
/* item title (the link that is NOT the remove control) */
#header .ct-header-cart .cart_list li a:not(.remove) {
	font-family: var(--sisa-body); font-size: 14px; font-weight: 600;
	line-height: 1.3; color: var(--sisa-ink); text-decoration: none;
}
#header .ct-header-cart .cart_list li a.product-title:hover { text-decoration: underline; text-decoration-color: var(--sisa-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* qty × price line — the qty count in mono grey, the price in ink */
#header .ct-header-cart .cart_list .quantity {
	display: block; margin-top: 6px;
	font-family: var(--sisa-mono); font-size: 12px; color: var(--sisa-text-2);
	font-variant-numeric: tabular-nums;
}
#header .ct-header-cart .cart_list .quantity .woocommerce-Price-amount {
	font-family: var(--sisa-body); font-weight: 600; font-size: 13px; color: var(--sisa-ink);
}
/* GreenShift's mini-cart qty stepper renders as an empty 0×0 wrapper (its assets
   don't load in the header context) — hide the dead node. */
#header .ct-header-cart .cart-widget-product-quantity:empty,
#header .ct-header-cart .gs-cart-quantity-wrapper:empty { display: none; }
/* remove control — clearly visible bordered square (card-icon pattern), red on intent */
#header .ct-header-cart .cart_list a.remove {
	position: absolute; top: 14px; right: 0;
	color: var(--sisa-text-2) !important; background: var(--sisa-panel) !important;
	border: 1px solid var(--sisa-hairline); border-radius: 0;
	font-size: 0; line-height: 0; width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: color .12s, border-color .12s;
}
#header .ct-header-cart .cart_list a.remove:hover {
	color: var(--sisa-wishlist) !important; border-color: var(--sisa-wishlist);
	background: var(--sisa-panel) !important;
}
#header .ct-header-cart .cart_list a.remove .ct-icon { width: 13px; height: 13px; }

/* ---------- Subtotal ---------- */
#header .ct-header-cart .woocommerce-mini-cart__total {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 14px 0 0; margin: 4px 0 0;
	font-family: var(--sisa-mono); font-size: 10px; letter-spacing: 1px;
	text-transform: uppercase; color: var(--sisa-text-2);
	border-top: 0;
}
#header .ct-header-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-family: var(--sisa-body); font-weight: 700; font-size: 14px;
	color: var(--sisa-ink); text-transform: none; font-variant-numeric: tabular-nums;
}

/* ---------- Free-shipping progress (Blocksy Pro shipping-progress) ----------
   Markup from the extension: .ct-shipping-progress-mini-cart > .ct-message +
   .ct-progress-bar > span[width:N%]. Threshold = the real per-zone WC
   free-shipping min_amount (see functions/commerce/free-shipping-bar.php).
   Quiet utility strip: hairline-topped, small body message with the amount in
   ink, a 4px sharp track with the brand-yellow fill. On reach (width:100%)
   the message darkens to ink — calm positive, no fanfare. */
#header .ct-header-cart .ct-shipping-progress-mini-cart {
	margin: 4px 0 0;
	padding: 14px 0 2px;
	border-top: 1px solid var(--sisa-hairline);
}
#header .ct-header-cart .ct-shipping-progress-mini-cart .ct-message {
	margin: 0 0 9px;
	font-family: var(--sisa-body); font-size: 13px; line-height: 1.45;
	color: var(--sisa-text-2);
}
#header .ct-header-cart .ct-shipping-progress-mini-cart .ct-message p { margin: 0; display: inline; }
#header .ct-header-cart .ct-shipping-progress-mini-cart .ct-message .woocommerce-Price-amount {
	font-weight: 600; color: var(--sisa-ink); font-variant-numeric: tabular-nums;
}
#header .ct-header-cart .ct-shipping-progress-mini-cart .ct-progress-bar {
	height: 4px; border-radius: 0;
	background: var(--sisa-hairline);
	overflow: hidden;
}
#header .ct-header-cart .ct-shipping-progress-mini-cart .ct-progress-bar > span {
	display: block; height: 100%; border-radius: 0;
	background: var(--sisa-yellow);
	transition: width .3s ease;
}
/* Reached — the extension renders width:100%; darken the line to ink. */
#header .ct-header-cart .ct-shipping-progress-mini-cart:has(.ct-progress-bar > span[style*="100%"]) .ct-message {
	color: var(--sisa-ink);
}

/* ---------- Buttons — stacked full-width, primary (Kasse) on top ---------- */
#header .ct-header-cart .woocommerce-mini-cart__buttons {
	display: flex; flex-direction: column; gap: 8px;
	margin: 16px 0 0; padding: 0;
}
#header .ct-header-cart .woocommerce-mini-cart__buttons a {
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0; padding: 14px 16px; border-radius: 0; width: 100%; box-sizing: border-box;
	font-family: var(--sisa-body); font-weight: 600; font-size: 12px;
	letter-spacing: 1.2px; text-align: center; text-transform: uppercase;
	white-space: nowrap;
}
#header .ct-header-cart .woocommerce-mini-cart__buttons a.checkout { order: -1; }
/* secondary "Warenkorb ansehen" — outlined */
#header .ct-header-cart .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
	background: var(--sisa-panel); color: var(--sisa-ink);
	border: 1px solid var(--sisa-hairline);
}
#header .ct-header-cart .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover { border-color: var(--sisa-emphasis); }
/* primary "Zur Kasse" — yellow */
#header .ct-header-cart .woocommerce-mini-cart__buttons a.checkout {
	background: var(--sisa-yellow); color: var(--sisa-yellow-ink);
	border: 1px solid var(--sisa-yellow);
}
#header .ct-header-cart .woocommerce-mini-cart__buttons a.checkout:hover { filter: brightness(.96); color: var(--sisa-yellow-ink); }

/* empty-cart message */
#header .ct-header-cart .woocommerce-mini-cart__empty-message {
	font-family: var(--sisa-body); font-size: 14px; color: var(--sisa-text-2); margin: 0;
}

/* Long German labels can wrap the 2-col grid → stack on very narrow viewports */
@media (max-width: 420px) {
	#header .ct-header-cart .woocommerce-mini-cart__buttons { grid-template-columns: 1fr; }
}