/**
 * Beauvit — mini-cart.css
 * Visual skin for the NATIVE WooCommerce Mini-Cart block (woocommerce/mini-cart)
 * and its slide-out drawer, plus the simple fallback link.
 *
 * This file only changes appearance. It never removes accessibility attributes,
 * never touches the block's JavaScript, cart state, AJAX or Store API, and never
 * reimplements the drawer. WooCommerce still owns open/close, the overlay, the
 * item list, quantities, removal, subtotal and the checkout/cart links.
 *
 * Note: WooCommerce block class names can shift between versions; selectors here
 * are best-effort and should be confirmed visually in a browser.
 */

/* -------------------------------------------------------------------------
 * Header trigger (cart icon + item-count badge)
 * ---------------------------------------------------------------------- */
.bv-header__cart .wc-block-mini-cart {
	display: inline-flex;
	align-items: center;
}

.wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem;
	background: transparent;
	border: 0;
	color: var(--bv-ink);
	font: inherit;
	cursor: pointer;
	line-height: 1;
}

.wc-block-mini-cart__button:hover {
	color: var(--bv-ink-soft);
}

.wc-block-mini-cart__button:focus-visible {
	outline: 2px solid var(--bv-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* No prices in this catalogue yet — keep the header clean (icon + count only). */
.wc-block-mini-cart__amount {
	display: none !important;
}

.wc-block-mini-cart__badge {
	background: var(--bv-ink) !important;
	color: #ffffff !important;
	border-radius: var(--bv-radius-pill);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Slide-out drawer (right side) + dim overlay
 *
 * The sliding panel (.wc-block-components-drawer) derives BOTH its width and its
 * slide-in transform from the --drawer-width / --neg-drawer-width custom
 * properties. See WooCommerce's own assets/client/blocks/mini-cart.css:
 *   .wc-block-components-drawer{ left:100%; right:0; position:fixed;
 *     width:var(--drawer-width);
 *     transform:translateX(max(-100%, var(--neg-drawer-width))); }
 * Those properties come from the mini-cart-contents block width (default 480px)
 * and are expected at runtime. If they are ever not in effect the panel
 * collapses (left:100% + width:auto → ~0px, transform invalid → stays off-screen)
 * so the page still dims (the overlay is inset:0, independent of the variable)
 * while the white panel is a zero-width sliver at the right edge — the only
 * thing visible is the auto-focused close button's blue (#0675c4) focus ring,
 * i.e. the reported "small blue square top-right".
 *
 * Fix: define the variables on the drawer wrapper so they inherit down to the
 * panel and its native width + slide-in transform always resolve. These are
 * WooCommerce's own inputs, so no !important and no direct override of
 * width/transform is needed; if WooCommerce sets them inline at runtime that
 * inline value simply wins. Target width ~480px desktop, near-full on mobile.
 * ---------------------------------------------------------------------- */
.wc-block-mini-cart__drawer {
	--drawer-width: 480px;
	--neg-drawer-width: -480px;
}

.wc-block-components-drawer__screen-overlay {
	background: rgba(20, 20, 20, 0.4) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: #ffffff;
}

@media (max-width: 600px) {
	.wc-block-mini-cart__drawer {
		--drawer-width: 92vw;
		--neg-drawer-width: -92vw;
	}
}

/* Title — large, calm */
.wc-block-mini-cart__title,
.wc-block-mini-cart__title h2 {
	color: var(--bv-ink);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
 * Drawer title on mobile
 *
 * The native title is h2.wc-block-mini-cart__title — a flex row of two spans:
 * the label (.wp-block-woocommerce-mini-cart-title-label-block, «Ваша корзина»)
 * and the items counter (.wp-block-woocommerce-mini-cart-title-items-counter-block,
 * «(позиций: 10)»). The close button (.wc-block-components-drawer__close) is
 * absolutely positioned in the top-right corner (top/right 12px), NOT a flex
 * sibling — so a two-digit counter slid onto a second line and ran under the «×».
 *
 * Fix (mobile only, ≤600px = the near-full drawer width): shrink the title with a
 * responsive clamp() so «Ваша корзина (позиций: 10)» fits at 320/375/390/430px,
 * keep it on ONE line (white-space: nowrap — inherited by both spans), and reserve
 * a fixed right-side gutter (padding-right) so the text never reaches the absolute
 * close button. box-sizing keeps that gutter inside the element. Specificity matches
 * WooCommerce's own h2.wc-block-mini-cart__title so this reliably wins; the close
 * button, panel width, text and desktop title size are untouched.
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	h2.wc-block-mini-cart__title {
		box-sizing: border-box;
		font-size: clamp(0.85rem, calc(6vw - 6px), 1.6rem);
		line-height: 1.2;
		white-space: nowrap;
		padding-right: 3.5rem; /* keeps text clear of the absolute close button */
	}
}

/* Item rows — thin dividers, small images */
.wc-block-mini-cart-items .wc-block-cart-items__row,
.wc-block-mini-cart__products-table .wc-block-cart-items__row {
	border-bottom: 1px solid var(--bv-line);
	padding-block: 1rem;
}

.wc-block-cart-item__image img {
	border-radius: var(--bv-radius);
}

.wc-block-components-product-name {
	color: var(--bv-ink) !important;
	font-weight: 500;
	text-decoration: none;
}

.wc-block-cart-item__remove-link {
	color: var(--bv-ink-soft);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--bv-ink);
}

/* Subtotal */
.wc-block-mini-cart__footer .wc-block-components-totals-item__value,
.wc-block-mini-cart__footer-subtotal {
	color: var(--bv-ink);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Footer actions — black primary (checkout), outline secondary (view cart)
 * ---------------------------------------------------------------------- */
.wc-block-mini-cart__footer-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.wc-block-mini-cart__footer-checkout,
a.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer .wc-block-components-button.contained {
	background: var(--bv-btn-bg) !important;
	color: var(--bv-btn-ink) !important;
	border: 1px solid var(--bv-btn-bg) !important;
	border-radius: var(--bv-radius-pill) !important;
	font-weight: 600;
}

.wc-block-mini-cart__footer-checkout:hover,
a.wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__footer .wc-block-components-button.contained:hover {
	background: var(--bv-btn-bg-hover) !important;
	color: var(--bv-btn-ink) !important;
}

.wc-block-mini-cart__footer-cart,
a.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer .wc-block-components-button.outlined {
	background: transparent !important;
	color: var(--bv-ink) !important;
	border: 1px solid var(--bv-ink) !important;
	border-radius: var(--bv-radius-pill) !important;
	font-weight: 600;
}

.wc-block-mini-cart__footer-cart:hover,
a.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer .wc-block-components-button.outlined:hover {
	background: var(--bv-ink) !important;
	color: #ffffff !important;
}

.wc-block-mini-cart__empty-cart-wrapper {
	color: var(--bv-ink-soft);
}

/* -------------------------------------------------------------------------
 * Fallback cart link (only used if the Mini-Cart block is unavailable)
 * ---------------------------------------------------------------------- */
.bv-cart-fallback {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--bv-ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
}

.bv-cart-fallback:hover {
	color: var(--bv-ink-soft);
}

.bv-cart-fallback__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	background: var(--bv-ink);
	color: #ffffff;
	border-radius: var(--bv-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
}