/* ============================================================
 * BAMMAT — mini-cart.css
 * Off-canvas multi-store mini cart (PART 6 / bm8 UI).
 * Full visual redesign on the design system. Logic stays in PART 6;
 * this file OWNS the look. Loaded globally (the drawer opens anywhere).
 *
 * Covers: the bm8 chrome (tabs, active-store head, footer, buttons,
 * trash) AND the native WooCommerce .mini_cart_item rows that PART 6
 * moves into .bm8-items-wrap. Tokens only.
 * ========================================================== */

/* ── Functional: hide WC's default buttons + total (bm8 owns these) ── */
.widget_shopping_cart_content .woocommerce-mini-cart__buttons{ display:none !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__total{ display:none !important; }

/* ── Drawer content surface ── */
.widget_shopping_cart_content{
	background:var(--bm-card);
	font-family:var(--bm-font);
}
.widget_shopping_cart_content .bm8-wrap{ display:flex; flex-direction:column; min-height:0; }

/* ============================================================
 * 1. STORE TABS
 * ========================================================== */
.bm8-tabs{
	display:flex; gap:var(--bm-sp-2);
	padding:var(--bm-sp-3) var(--bm-sp-4);
	overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
	flex-wrap:nowrap; cursor:grab; user-select:none;
	background:var(--bm-bg);
	border-bottom:1px solid var(--bm-line);
}
.bm8-tabs:active{ cursor:grabbing; }
.bm8-tabs::-webkit-scrollbar{ display:none; }

.bm8-tab{
	display:inline-flex; align-items:center; gap:5px;
	padding:6px 12px; border-radius:var(--bm-radius-pill);
	border:1.5px solid var(--bm-line-2); background:var(--bm-card);
	font-size:12px; font-weight:600; color:var(--bm-ink-2);
	cursor:pointer; white-space:nowrap; flex-shrink:0;
	transition:all .15s; user-select:none; text-decoration:none;
}
.bm8-tab:hover{ border-color:var(--bm-blue); color:var(--bm-blue); background:var(--bm-blue-tint); text-decoration:none; }
.bm8-tab.active{ background:var(--bm-blue); border-color:var(--bm-blue); color:#fff; }
.bm8-tab.bm8-tab-empty{ border-style:dashed; color:var(--bm-ink-3); background:var(--bm-bg); }
.bm8-tab.bm8-tab-empty:hover{ border-color:var(--bm-blue); color:var(--bm-blue); background:var(--bm-blue-tint); }
.bm8-tab-count{
	background:rgba(28,35,51,.10); border-radius:var(--bm-radius-pill);
	padding:1px 6px; font-size:10px; font-weight:700; line-height:1.4;
}
.bm8-tab.active .bm8-tab-count{ background:rgba(255,255,255,.28); }

/* ============================================================
 * 2. ACTIVE STORE HEADER
 * ========================================================== */
.bm8-active-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:var(--bm-sp-2); padding:var(--bm-sp-3) var(--bm-sp-4);
	background:var(--bm-blue-tint);
	border-bottom:1px solid var(--bm-line);
}
.bm8-active-head-left{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.bm8-active-label{
	font-size:10px; font-weight:700; color:var(--bm-blue-dark);
	text-transform:uppercase; letter-spacing:.6px; line-height:1;
}
.bm8-active-name{
	font-size:14px; font-weight:700; color:var(--bm-ink);
	text-decoration:none; white-space:nowrap; overflow:hidden;
	text-overflow:ellipsis; line-height:1.3;
}
.bm8-active-name:hover{ color:var(--bm-blue); }

/* ============================================================
 * 3. ITEM LIST + ROWS
 * Woodmart owns the row LAYOUT (image / info / full-cover link).
 * We change COSMETICS ONLY here — colors, radius, sizes on leaf
 * elements. No display/flex/position/hiding on the row itself, so
 * this cannot disturb Woodmart's layout.
 * ========================================================== */
.bm8-items-wrap{ padding:0; margin:0; list-style:none; }

/* Thumbnail → rounded tile on grey, like the grid/cart */
.widget_shopping_cart_content .mini_cart_item .cart-item-image img{
	border-radius:var(--bm-radius-sm);
	background:var(--bm-bg);
	object-fit:contain;
}

/* Product name */
.widget_shopping_cart_content .mini_cart_item .wd-entities-title,
.widget_shopping_cart_content .mini_cart_item .wd-entities-title a{
	font-size:13px; font-weight:600; line-height:1.35; color:var(--bm-ink);
}

/* Price text (the "3 × 5,39 €" span.quantity) → amount in blue */
.widget_shopping_cart_content .mini_cart_item span.quantity{
	font-size:12px; color:var(--bm-ink-2); font-weight:600;
}
.widget_shopping_cart_content .mini_cart_item span.quantity .woocommerce-Price-amount{
	color:var(--bm-blue); font-weight:800;
}

/* Vendor variation line (store shown in header already) → muted + small */
.widget_shopping_cart_content .mini_cart_item .variation-Vendor{
	font-size:11px; color:var(--bm-ink-3);
}

/* Editable quantity stepper (div.quantity) → match the grid stepper */
.widget_shopping_cart_content .mini_cart_item div.quantity{
	display:inline-flex; align-items:center;
	background:var(--bm-bg); border-radius:11px; padding:3px;
}
.widget_shopping_cart_content .mini_cart_item div.quantity .input-text.qty{
	width:34px; border:none; background:transparent; text-align:center;
	font-size:13px; font-weight:700; color:var(--bm-ink); -moz-appearance:textfield;
	box-shadow:none;
}
.widget_shopping_cart_content .mini_cart_item div.quantity .input-text.qty::-webkit-outer-spin-button,
.widget_shopping_cart_content .mini_cart_item div.quantity .input-text.qty::-webkit-inner-spin-button{
	-webkit-appearance:none; margin:0;
}
.widget_shopping_cart_content .mini_cart_item div.quantity .minus.btn,
.widget_shopping_cart_content .mini_cart_item div.quantity .plus.btn{
	width:28px; height:28px; border:none;
	background:var(--bm-card); border-radius:8px;
	font-size:16px; font-weight:600; color:var(--bm-blue);
	box-shadow:var(--bm-shadow-sm); cursor:pointer; line-height:1;
	display:flex; align-items:center; justify-content:center;
}
.widget_shopping_cart_content .mini_cart_item div.quantity .minus.btn:active,
.widget_shopping_cart_content .mini_cart_item div.quantity .plus.btn:active{ transform:scale(.94); }

/* Remove (×) → recolor only, keep Woodmart's position */
.widget_shopping_cart_content .mini_cart_item a.remove_from_cart_button{
	color:var(--bm-ink-3) !important; transition:color .12s;
}
.widget_shopping_cart_content .mini_cart_item a.remove_from_cart_button:hover{
	color:var(--bm-red) !important;
}

/* ── Empty store message ── */
.bm8-empty-msg{
	padding:var(--bm-sp-8) var(--bm-sp-4);
	text-align:center; color:var(--bm-ink-3);
	font-size:13px; line-height:1.6;
}

/* ============================================================
 * 4. STICKY FOOTER
 * ========================================================== */
.bm8-foot{
	padding:var(--bm-sp-4);
	background:var(--bm-card);
	border-top:1px solid var(--bm-line);
}
.bm8-subtotal{
	display:flex; justify-content:space-between; align-items:baseline;
	font-size:13px; color:var(--bm-ink-2); margin-bottom:var(--bm-sp-3);
}
.bm8-subtotal strong{ font-size:18px; font-weight:800; color:var(--bm-ink); letter-spacing:-.01em; }

.bm8-min-warn{
	font-size:11px; color:var(--bm-red);
	background:var(--bm-red-tint); border:1px solid var(--bm-red);
	border-radius:var(--bm-radius-sm); padding:7px 10px;
	margin-bottom:var(--bm-sp-2); line-height:1.4;
}

.bm8-btn-row{ display:flex; gap:var(--bm-sp-2); }

.bm8-btn-cart{
	flex:1; padding:12px; border-radius:12px;
	background:var(--bm-card); color:var(--bm-ink); border:1.5px solid var(--bm-line-2);
	font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
	display:flex; align-items:center; justify-content:center; gap:5px;
	transition:border-color .15s, color .15s, background .15s;
}
.bm8-btn-cart:hover{ border-color:var(--bm-blue); color:var(--bm-blue); background:var(--bm-blue-tint); text-decoration:none; }

.bm8-btn-checkout{
	flex:2; padding:12px; border-radius:12px;
	background:var(--bm-blue); color:#fff; border:none;
	font-size:13px; font-weight:700; cursor:pointer;
	display:flex; align-items:center; justify-content:center; gap:6px;
	transition:background .15s, transform .1s;
	box-shadow:0 6px 16px rgba(81,125,252,.28);
}
.bm8-btn-checkout:hover{ background:var(--bm-blue-dark); }
.bm8-btn-checkout:active{ transform:scale(.97); }
.bm8-btn-checkout:disabled,
.bm8-btn-checkout.bm8-off{
	background:var(--bm-line-2); color:var(--bm-ink-3);
	cursor:not-allowed; box-shadow:none; transform:none;
}
.bm8-btn-checkout.bm8-loading{ opacity:.65; pointer-events:none; }

/* ── Trash (remove whole store) — round, neutral, red on hover ── */
.bm8-active-head .bm8-trash{
	flex:0 0 32px; align-self:center;
	width:32px !important; height:32px !important;
	min-width:32px; min-height:32px; padding:0 !important;
	box-sizing:border-box;
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:50% !important; border:1px solid var(--bm-line-2);
	background:var(--bm-card); color:var(--bm-ink-3);
	cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.bm8-active-head .bm8-trash:hover{
	background:var(--bm-red-tint); border-color:var(--bm-red); color:var(--bm-red);
}
.bm8-active-head .bm8-trash svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }

/* ── Swipe-to-remove (mobile): smooth transform on rows ── */
.widget_shopping_cart_content .mini_cart_item{
	touch-action:pan-y;               /* browser keeps vertical scroll, we take horizontal */
	will-change:transform;
}

/* Red "delete" panel revealed behind the row while swiping (injected by JS) */
.widget_shopping_cart_content .bm8-swipe-bg{
	position:absolute; z-index:0; pointer-events:none;
	background:var(--bm-red); color:#fff;
	display:flex; align-items:center; justify-content:flex-end;
	padding-right:22px; opacity:0;
}
.widget_shopping_cart_content .bm8-swipe-bg svg{
	width:20px; height:20px; stroke:#fff;
}

/* ============================================================
 * 5. MOBILE
 * ========================================================== */
@media (max-width:600px){
	.bm8-tabs{ padding:var(--bm-sp-2) var(--bm-sp-3); gap:5px; }
	.bm8-active-head{ padding:var(--bm-sp-2) var(--bm-sp-3); }
	.bm8-items-wrap .mini_cart_item{ padding:var(--bm-sp-2) var(--bm-sp-3); }
	.bm8-foot{ padding:var(--bm-sp-3); }
	.bm8-btn-cart,.bm8-btn-checkout{ font-size:12px; padding:11px 10px; }
	.bm8-subtotal strong{ font-size:16px; }
}