/* =============================================================================
   Brixies Cart Responsive
   Makes the WooCommerce mini-cart popup fluid on every viewport width.
   Only layout properties are changed: padding, margin, font-size, flex rules.
   Colors and major visual styling are left intact.
   ============================================================================= */

/* ── 1. Box-model safety ─────────────────────────────────────────────────── */

.widget_shopping_cart_content *,
.widget_shopping_cart_content *::before,
.widget_shopping_cart_content *::after {
	box-sizing: border-box;
}

/* ── 2. Popup / widget wrapper ───────────────────────────────────────────── */

.widget_shopping_cart_content {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	font-size: clamp(12px, 3.5vw, 14px);
}

/* ── 3. Cart list ────────────────────────────────────────────────────────── */

ul.woocommerce-mini-cart.cart_list {
	padding: 0;
	margin: 0;
}

/* ── 4. Item row ─────────────────────────────────────────────────────────────
   Works for both WC structures:
     A) Older WC — image + name inside the same <a>
     B) Newer WC — separate <a> for image, separate <a> for name
   ─────────────────────────────────────────────────────────────────────────── */

ul.woocommerce-mini-cart.cart_list li.mini_cart_item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 8px 26px;
}

/* ── 5. Product link: flex row so image sits left, name text sits right ───── */

ul.woocommerce-mini-cart.cart_list li.mini_cart_item > a:not(.remove_from_cart_button) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.4;
}

/* ── 6. Thumbnail ────────────────────────────────────────────────────────── */

ul.woocommerce-mini-cart.cart_list li.mini_cart_item img {
	display: block;
	width: clamp(44px, 18%, 56px);
	height: auto;
	flex-shrink: 0;
}

/* ── 7. Quantity — indented to align under the name text (past the image) ─── */

ul.woocommerce-mini-cart.cart_list li.mini_cart_item .quantity {
	padding-left: calc(clamp(44px, 18%, 56px) + 8px);
	font-size: clamp(11px, 3vw, 13px);
	line-height: 1.4;
	word-break: break-word;
}

/* ── 8. Remove "×" — absolute, bottom-right corner ──────────────────────── */

ul.woocommerce-mini-cart.cart_list li.mini_cart_item .remove_from_cart_button {
	position: absolute;
	bottom: 7px;
	right: 8px;
	line-height: 1;
}

/* ── 9. Total row ────────────────────────────────────────────────────────── */

.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 10px;
}

.woocommerce-mini-cart__total strong {
	font-size: clamp(13px, 3.5vw, 15px);
}

.woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: clamp(13px, 3.5vw, 15px);
}

/* ── 10. Buttons ─────────────────────────────────────────────────────────── */

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
}

.woocommerce-mini-cart__buttons a,
.woocommerce-mini-cart__buttons .button {
	display: block;
	width: 100%;
	text-align: center;
	white-space: normal;
	word-break: break-word;
	font-size: clamp(12px, 3.5vw, 14px);
}

/* ── 11. Price amounts ───────────────────────────────────────────────────── */

.widget_shopping_cart_content .woocommerce-Price-amount {
	font-size: inherit;
}

/* ── 12. Very narrow viewports (≤ 360 px) ────────────────────────────────── */

@media (max-width: 360px) {
	.widget_shopping_cart_content {
		font-size: 12px;
	}

	ul.woocommerce-mini-cart.cart_list li.mini_cart_item {
		padding: 7px 7px 24px;
	}

	ul.woocommerce-mini-cart.cart_list li.mini_cart_item img {
		width: 44px;
	}

	ul.woocommerce-mini-cart.cart_list li.mini_cart_item .quantity {
		padding-left: 52px; /* 44px + 8px gap */
	}

	.woocommerce-mini-cart__total,
	.woocommerce-mini-cart__buttons {
		padding: 7px;
	}
}