/* =========================================================
   Comfyo — global Mini Cart drawer (WooCommerce Blocks).
   Loaded sitewide (see inc/cart-drawer-hooks.php). Shared row-level
   components (product name/price/metadata, quantity stepper) are already
   styled for the Cart page in comfyo-cart-checkout.css, which this file's
   enqueue now also loads sitewide — this file only covers what's specific
   to the drawer chrome itself (panel, overlay, title, footer, empty state).
   ========================================================= */

/* The block's own icon+badge button stays in the DOM (comfyo-cart-drawer.js
   clicks it programmatically) but is never the visible trigger — Astra's
   existing header cart icon (a.cart-container) is. Visually hidden, not
   display:none, so it stays a normal focusable/clickable element. */
/*
 * ETAP G.7.4 — the white strip under the footer: this mount is printed in wp_footer, i.e. as a block
 * AFTER #page, directly in <body> (white). Its only in-flow child is the block's inline-block wrapper
 * (0 px tall), but that still opens a line box of the body line-height (~26 px) — an empty white band
 * below the cream footer on every page. The mount holds no visible content of its own (the button is
 * visually hidden, the drawer and its overlay are position:fixed), so it is taken out of the flow.
 */
#comfyo-mini-cart-mount{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}
#comfyo-mini-cart-mount .wc-block-mini-cart__button{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Astra's classic hover mini-cart (the old [woocommerce_mini_cart] widget
   dropdown) is superseded by the drawer — showing both would be confusing
   (hover reveals a no-quantity-control mini list, click opens the full
   drawer). Astra's cart icon itself, its badge and its link are untouched. */
.ast-site-header-cart-data{
	display: none !important;
}

/* ---------- Overlay ---------- */
.wc-block-components-drawer__screen-overlay{
	background-color: rgba(33, 31, 27, 0.42) !important; /* var(--c-ink) at low opacity — no hardcoded black */
}

/* ---------- Drawer panel ---------- */
.wc-block-components-drawer.wc-block-mini-cart__drawer{
	width: min(440px, 100vw) !important;
	background: var(--c-cream) !important;
	box-shadow: -8px 0 32px rgba(33, 31, 27, 0.12) !important;
}
@media (min-width: 380px){
	.wc-block-components-drawer.wc-block-mini-cart__drawer{
		width: min(92vw, 420px) !important;
	}
}
@media (min-width: 700px){
	.wc-block-components-drawer.wc-block-mini-cart__drawer{
		width: 400px !important;
	}
}

.wc-block-components-drawer__content{
	position: relative;
	font-family: var(--font-sans);
	color: var(--c-body);
	padding: 1.25rem 1.25rem 1.5rem !important;
}

/* ---------- Title row ("Twój koszyk (pozycje: N)" + ×) ----------
   Real markup (verified live): <h2 class="wc-block-mini-cart__title"><span
   class="…-title-label-block">Twój koszyk</span><span
   class="…-title-items-counter-block">(pozycje: N)</span></h2>, with
   .wc-block-components-drawer__close as its sibling, not its child. */
.wc-block-mini-cart__title{
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.4rem;
	font-family: var(--font-display) !important;
	color: var(--c-ink) !important;
	font-weight: 600;
	font-size: 1.2rem !important;
	border-bottom: 1px solid var(--c-line);
	padding-bottom: 1rem;
	margin: 0 2.5rem 1rem 0; /* leave room for the close button */
}
.wp-block-woocommerce-mini-cart-title-items-counter-block{
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--c-taupe);
	white-space: nowrap;
}
/*
 * Selector scoped through the drawer's own wrapper (`.wc-block-mini-cart__drawer
 * .wc-block-components-drawer__close`, specificity 0,2,0) rather than the bare
 * `.wc-block-components-drawer__close` used previously (0,1,0). Diagnosed live
 * (getComputedStyle on the real drawer): WooCommerce core's own
 * wc-block-library-style.css sets `padding: 1em !important` on this exact
 * class, and core's stylesheet is enqueued/printed AFTER this file (the Mini
 * Cart block is only registered when `do_blocks()` actually renders it in
 * `wp_footer`, which happens later than this theme's own `wp_enqueue_scripts`
 * pass) — so on a tied `!important` vs `!important`, source order let core's
 * padding win over this file's `padding: 0 !important`. With the button's own
 * width forced down to 36px but ~29px of that eaten by core's 1em padding on
 * each axis, almost no room was left for the 24px icon; being a flex child
 * with the browser's default `flex-shrink: 1`, the svg didn't overflow, it
 * got visually crushed down to ~4px wide — the "invisible dot" reported live,
 * not a missing icon. A same-specificity `!important` selector is a coin flip
 * that depends on plugin load order, so this rule wins on specificity instead
 * (0,2,0 always beats 0,1,0, regardless of source order), and `flex-shrink: 0`
 * on the svg below is a second, independent guard against the same class of
 * bug if core ever changes the button's padding again.
 */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close{
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	color: var(--c-ink) !important;
	z-index: 1;
	/* WooCommerce Blocks ships this as a 56x56px button (16px padding around
	   a 24px icon) — a generously large tap target, but visually heavy for a
	   simple close affordance. Shrunk to ~40px (WCAG 24x24px minimum target
	   size, brief asks for ~40-44px hit area). */
	width: 2.5rem !important;
	height: 2.5rem !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 999px;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg{
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover{
	color: var(--c-accent) !important;
	background: var(--c-cream-deep, rgba(0,0,0,0.05));
}
/*
 * Focus ring: `:focus-visible`, not `:focus`. Diagnosed live: the drawer's
 * own focus trap moves focus to this button PROGRAMMATICALLY the instant the
 * drawer opens — confirmed live via `document.activeElement`/`:focus-visible`
 * matching — so a plain `:focus` rule (used previously) painted the ring on
 * every single drawer open, mouse or keyboard alike, which is exactly the
 * "duży okrąg w stanie spoczynku" reported live. `:focus-visible` keeps a
 * clear, on-brand ring for real keyboard Tab navigation while leaving a
 * programmatic auto-focus visually calm.
 */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus{
	box-shadow: none;
	outline: none;
}
/* Re-diagnosed live (2026-09-25): core's `.wc-block-components-button:focus`
 * ring (blue `box-shadow` + `min-height: 3em`) is `!important`, so the plain
 * `:focus` reset above lost and the auto-focused button still drew an oval
 * 40x48 ring on every open. Reset both, for the non-keyboard case only. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close{
	min-height: 0 !important;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus:not(:focus-visible){
	box-shadow: none !important;
	outline: none !important;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible{
	box-shadow: 0 0 0 2px var(--c-accent-dark) !important;
	outline: none;
}

/* Material/washing free-text description repeated per row belongs on the
   full Cart page (already there) but is too much text for a compact
   drawer — the brief asks for name/variant/qty/price only here.
   `.wc-block-components-product-metadata` wraps TWO different things: this
   free-text `__description` (hidden below) AND, separately,
   `.wc-block-components-product-details` — the actual "Rozmiar: M"
   variation line, which must stay (confirmed live via each item's real
   markup) and is intentionally NOT touched by this rule.
   The drawer itself is portal-rendered straight onto <body> (confirmed
   live: NOT a descendant of #comfyo-mini-cart-mount), so this scopes off
   the drawer's own root class instead of the mount point. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description{
	display: none;
}

/* ---------- Items list — shares the same row components as the Cart
   page (product name/price/metadata/quantity), already styled by
   comfyo-cart-checkout.css. Only drawer-specific spacing here. ---------- */
.wc-block-mini-cart-items{
	margin-bottom: 1rem;
}
.wc-block-mini-cart-items .wc-block-mini-cart-items__item{
	padding-block: 1rem;
	border-bottom: 1px solid var(--c-line);
}
.wc-block-mini-cart-items .wc-block-cart-item__image img{
	border-radius: 8px;
	background: var(--c-cream-deep);
}

/* ---------- Footer: subtotal + CTAs ---------- */
.wc-block-mini-cart__footer{
	border-top: 1px solid var(--c-line);
	padding-top: 1.1rem;
	margin-top: 0.25rem;
}
.wc-block-mini-cart__footer-subtotal{
	font-family: var(--font-sans) !important; /* G.7.4: amounts in Jost */
	color: var(--c-ink) !important;
	font-weight: 600;
	font-size: 1.1rem;
	margin-bottom: 0.9rem;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description{
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--c-taupe);
	font-size: 0.78rem;
}

/* Most-prominent CTA: "Przejdź do kasy" (checkout). WooCommerce renders it
   above "Zobacz koszyk" in the footer's button stack by default, matching
   the requested hierarchy without reordering anything. */
.wc-block-mini-cart__footer-actions .wc-block-components-button{
	width: 100%;
	border-radius: 999px !important;
	font-family: var(--font-sans);
	font-size: 0.85rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 3rem !important;
	margin-bottom: 0.6rem;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button.wp-element-button:not(.is-style-outline){
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border: 1px solid var(--c-ink) !important;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button.wp-element-button:not(.is-style-outline):hover{
	background: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button.is-style-outline{
	background: transparent !important;
	color: var(--c-ink) !important;
	box-shadow: inset 0 0 0 1px var(--c-line) !important;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button.is-style-outline:hover{
	box-shadow: inset 0 0 0 1px var(--c-ink) !important;
}

/* ---------- Empty state — kept as spare as the brief asks: no marketing
   copy, just the message WooCommerce already renders plus one CTA. ---------- */
.wc-block-mini-cart__empty-cart-wrapper{
	text-align: center;
	padding-block: 1.5rem;
}
.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__title{
	border-bottom: 1px solid var(--c-line);
}
.wc-block-mini-cart__empty-cart-wrapper p{
	color: var(--c-body);
	font-size: 0.95rem;
	margin-bottom: 1.25rem;
}
.wc-block-mini-cart__shopping-button .wc-block-components-button{
	border-radius: 999px !important;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border: 1px solid var(--c-ink) !important;
	font-family: var(--font-sans);
	font-size: 0.85rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.9rem 2.1rem !important;
}
.wc-block-mini-cart__shopping-button .wc-block-components-button:hover{
	background: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
}

/* ---------- Remove → Undo notice ----------
   No native undo/removal notice exists in this WooCommerce version (checked
   live before building this — see comfyo-cart-drawer.js for the full
   diagnosis) — this is the minimal custom layer the brief asks for in that
   case. Sits above the items list, inside the same scrollable content area
   the block already has, so it never overlaps the header/footer. */
.comfyo-cart-undo-notice{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--c-cream-deep);
	border-radius: 8px;
	padding: 0.75rem 0.9rem;
	margin-bottom: 0.9rem;
}
.comfyo-cart-undo-notice p{
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--c-body);
}
.comfyo-cart-undo-notice__restore{
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0.25rem 0;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.comfyo-cart-undo-notice__restore:hover{
	color: var(--c-accent);
}
.comfyo-cart-undo-notice__restore:disabled{
	opacity: 0.6;
	cursor: default;
	text-decoration: none;
}

/* Standard visually-hidden utility — used for the drawer's aria-live
   announcer (assets/js/comfyo-cart-drawer.js). Defined locally rather than
   assumed from Astra core, since this file already needs to be correct on
   its own for the drawer to be accessible. */
.screen-reader-text{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Focus visibility — never removed, only re-themed ---------- */
.wc-block-components-drawer *:focus-visible{
	outline: 2px solid var(--c-accent-dark) !important;
	outline-offset: 2px;
}

/* ---------- Mobile (< 700px): near-full-width side drawer rather than a
   shrunken desktop panel — still a side drawer (not a bottom sheet), since
   it shares 100% of its component tree/behaviour with desktop and a side
   drawer keeps the primary CTA reachable with one thumb near the bottom of
   the screen either way. ---------- */
@media (max-width: 699px){
	.wc-block-components-drawer__content{
		padding: 1rem 1rem 1.25rem !important;
	}
	.wc-block-mini-cart__footer{
		position: sticky;
		bottom: 0;
		background: var(--c-cream);
	}
}

/*
 * Narrow phones (<= 480px): the item table (64px thumbnail + 16px gap +
 * name/quantity column + price column, inside 16px container padding) was
 * ~5px wider than the drawer's scroll container at a 390px viewport, so the
 * list showed a horizontal scrollbar and clipped the "zł" of every price
 * (found 2026-09-25 in a 390px frame). A smaller thumbnail and tighter
 * gutters remove the overflow without touching the desktop layout.
 */
@media (max-width: 480px){
	.wc-block-mini-cart__drawer .wc-block-mini-cart__items{
		padding-left: 12px;
		padding-right: 12px;
	}
	.wc-block-mini-cart__drawer .wc-block-cart-item__image{
		width: 56px;
		padding-right: 12px;
	}
}