/* The slide-in cart panel and its backdrop. */

/*
 * The `hidden` attribute, restated.
 *
 * The browser's own `[hidden] { display: none }` is a user-agent rule, so any
 * author `display` beats it — and `.haft-panel` below sets `display: flex`.
 * Without this the closed panel would still be laid out, merely parked off the
 * right edge by its transform: reachable by keyboard, read by screen readers,
 * and counted as visible by anything measuring boxes.
 */
.haft-panel[hidden],
.haft-zaslona[hidden] {
	display: none;
}

.haft-zaslona {
	position: fixed;
	inset: 0;
	background: rgba( 23, 26, 33, 0.55 );
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 80;
}

.haft-zaslona--widoczna {
	opacity: 1;
}

.haft-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 460px, 100% );
	background: var( --haft-len );
	z-index: 90;
	transform: translateX( 101% );
	transition: transform 0.28s cubic-bezier( 0.4, 0, 0.2, 1 );
	display: flex;
	flex-direction: column;
	box-shadow: -20px 0 60px rgba( 23, 26, 33, 0.2 );
}

.haft-panel--otwarty {
	transform: translateX( 0 );
}

/*
 * The panel's head lines up with the header bar it slides in beside: the same
 * height (84px on desktop, Blocksy's 70px below 1000px — header.css), the
 * same linen, and the same soft shadow under it instead of a rule.
 */
.haft-panel__gora {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 84px;
	flex-shrink: 0;
	padding: 0 26px;
	box-shadow: 0 8px 20px -14px rgba( 23, 26, 33, 0.45 );
	position: relative;
	z-index: 1;
}

@media ( max-width: 999px ) {
	.haft-panel__gora {
		height: 70px;
	}
}

.haft-panel__gora h2 {
	font-family: var( --haft-font-display );
	font-size: 1.6rem;
	margin: 0;
}

.haft-panel__zamknij {
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	font-size: 1.3rem;
	cursor: pointer;
}

.haft-panel__zamknij:hover {
	color: var( --haft-mulina );
}

/*
 * The panel script moves focus onto this button when the drawer opens, and
 * the site-wide focus ring (style.css) then draws a box around it on every
 * open — a box nobody asked for, on a click. The ring is kept but painted in
 * the panel's own background, so it never shows; hover still goes red. The
 * button stays reachable and operable by keyboard, it just has no visible
 * ring — the owner's call, over showing a frame on every open.
 */
.haft-panel__zamknij:focus-visible {
	outline-color: var( --haft-len );
}

.haft-panel__lista {
	flex: 1;
	overflow-y: auto;
	margin: 0;
	padding: 26px;
	list-style: none;
}

/*
 * Photo left, facts right, one control bar across the bottom — see
 * haft_child_cart_line() for why this shape and not two columns. The photo
 * column is the photo's width; the facts take the rest. The bar spans both
 * columns, so the minus sits on the photo's left edge and the bin on the
 * line's right edge whatever the facts above them measure. align-items:
 * start keeps the photo at the top when the facts are the taller half.
 */
.haft-panel__pozycja {
	display: grid;
	grid-template-columns: 88px 1fr;
	grid-template-areas:
		'foto opis'
		'pasek pasek';
	column-gap: 16px;
	row-gap: 14px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px dashed var( --haft-szew );
}

.haft-panel__pozycja:first-child {
	padding-top: 0;
}

.haft-panel__foto {
	grid-area: foto;
	position: relative;
}

/* The count on the photo's corner, in thread red, as in the checkout summary. */
.haft-panel__ile {
	position: absolute;
	top: -8px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var( --haft-kreda );
	border-radius: 11px;
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	font-family: var( --haft-font-display );
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 18px;
}

.haft-panel__opis {
	grid-area: opis;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.haft-panel__pasek {
	grid-area: pasek;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The price sits against the bin; the stepper stays put on the left. */
.haft-panel__pasek .haft-panel__cena {
	margin-left: auto;
}

.haft-panel__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: var( --haft-radius );
	border: 1px solid var( --haft-szew );
}

.haft-panel__opis h3 {
	font-family: var( --haft-font-display );
	font-size: 1.2rem;
	line-height: 1.2;
	margin: 0 0 6px;
}

.haft-panel__opis p {
	font-size: 0.85rem;
	color: #5c6474;
	margin: 0;
}

/*
 * Rozmiar with Kolor, Kolor haftu with Krój haftu, Tekst haftu alone: two
 * facts to a row reads as one glance instead of five stacked lines — see
 * haft_child_panel_rows() for how the pairs are decided.
 *
 * One thing on a cart line is bold, and it is the product. A caption and its
 * answer both grey read as one blur at this size — "Rozmiar" and "S" told
 * apart only by a few shades of the same grey — so the label shrinks, spaces
 * out and goes to caps to read as a caption, and the answer goes dark and
 * medium-weight to read as the thing being answered.
 */
.haft-panel__rzedy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}

/*
 * A pair shares a row while both fields fit their own content; the moment one
 * doesn't — a long colour name, a narrow phone — the second drops under the
 * first and each takes the full width. min-width: fit-content is what makes
 * a field refuse to be squeezed narrower than its words, so the row has to
 * wrap instead of wrapping the words; and fit-content, unlike max-content,
 * never exceeds the row, so a single very long value cannot overflow it.
 */
.haft-panel__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.haft-panel__pole {
	flex: 1 1 0;
	min-width: fit-content;
	max-width: 100%;
	margin: 0;
}

.haft-panel__pole dt {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a919e;
}

.haft-panel__pole dd {
	margin: 0;
	font-weight: 600;
	color: var( --haft-atrament );
}

/*
 * The two choices the customer made, shown as choices.
 *
 * Both classes are printed by the plugin into WooCommerce's cart item data, so
 * they land in the panel, on the cart page and in the checkout summary from one
 * implementation. The dot's colour arrives in a generated rule per thread id —
 * see Haft_Woo::thread_color_styles() — because the palette is editable from the
 * admin and cannot be written into this file.
 */
.haft-tekst {
	font-family: var( --haft-font-display );
	font-size: 0.95em;
	font-weight: 700;
	color: var( --haft-atrament );
	letter-spacing: 0.04em;
}

.haft-nic,
.haft-kolor {
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.4em;
	border-radius: 50%;
	border: 1px solid var( --haft-szew );
	vertical-align: middle;
}

.haft-panel__cena {
	font-family: var( --haft-font-display );
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
	margin: 0;
}

/*
 * No horizontal padding on the stepper, none on the left of the minus, and
 * the bin's padding pulled back out with a negative margin: the glyphs, not
 * their hit areas, are what have to line up with the photo's edges.
 */
.haft-panel__ilosc {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	font-size: 1rem;
}

.haft-panel__krok {
	text-decoration: none;
	color: var( --haft-atrament );
	font-size: 1.25rem;
	line-height: 1;
	padding: 4px 2px;
}

.haft-panel__krok--mniej {
	padding-left: 0;
}

.haft-panel__krok--mniej:hover {
	color: var( --haft-mulina );
}

.haft-panel__krok--wiecej:hover {
	color: #2e7d4f;
}

.haft-panel__usun {
	color: #8a919e;
	line-height: 0;
	padding: 8px;
	margin-right: -8px;
	border-radius: var( --haft-radius-karta );
	transition: color 0.15s, background 0.15s;
}

.haft-panel__usun:hover,
.haft-panel__usun:focus-visible {
	color: var( --haft-mulina );
	background: rgba( 196, 30, 58, 0.09 );
}

.haft-panel__pusty {
	flex: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 14px;
	padding: 60px 26px;
	text-align: center;
	color: #5c6474;
}

.haft-panel__dol {
	padding: 22px 26px;
	border-top: 1px solid var( --haft-szew );
	background: var( --haft-kreda );
}

.haft-panel__suma {
	display: flex;
	justify-content: space-between;
	font-family: var( --haft-font-display );
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.haft-panel__dostawa,
.haft-panel__wolna {
	font-size: 0.8rem;
	color: #8a919e;
	margin: 0 0 14px;
}

.haft-panel__zamow,
.haft-panel__koszyk {
	display: block;
	text-align: center;
	padding: 15px 18px;
	border-radius: var( --haft-radius );
	font-family: var( --haft-font-display );
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.haft-panel__zamow {
	background: var( --haft-mulina );
	color: var( --haft-kreda );
}

.haft-panel__zamow:hover {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

.haft-panel__koszyk {
	color: var( --haft-atrament );
	margin-top: 8px;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: color 0.15s, text-decoration-color 0.15s;
}

.haft-panel__koszyk:hover {
	color: var( --haft-mulina );
	text-decoration-color: currentColor;
}

.haft-panel__wroc {
	padding: 12px 20px;
	border: 1.5px solid var( --haft-atrament );
	border-radius: var( --haft-radius );
	background: none;
	color: var( --haft-atrament );
	font-family: var( --haft-font-display );
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

/* Fills with ink under the cursor, as the header's cart button does. */
.haft-panel__wroc:hover,
.haft-panel__wroc:focus-visible {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

@media ( prefers-reduced-motion: reduce ) {
	.haft-panel__wroc {
		transition: none;
	}
}

.haft-panel__dalej {
	display: block;
	width: 100%;
	padding: 13px 18px;
	margin-bottom: 8px;
	/*
	 * Border stays, colour doesn't: dropping the border changes the box's
	 * size, and swapping to the panel footer's own background colour is a
	 * one-line way to keep the box identical while making the line vanish.
	 */
	border: 1.5px solid var( --haft-kreda );
	border-radius: var( --haft-radius );
	background: none;
	font-family: var( --haft-font-display );
	font-weight: 700;
	cursor: pointer;
}

.haft-panel__dalej:hover {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

/*
 * A request is in flight.
 *
 * Deliberately faint: the panel is being replaced, not reloaded, and the whole
 * point of the change was that the customer stops seeing it go away and come
 * back. Half a second of slightly dimmed controls says "heard you" without
 * staging a disappearance.
 */
.haft-panel--pracuje .haft-panel__lista {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.12s;
}

/* The countdown turned into a reward, once the threshold is behind us. */
.haft-panel__wolna--gratis {
	color: #2e7d4f;
	font-weight: 700;
}

@media ( prefers-reduced-motion: reduce ) {
	.haft-panel,
	.haft-zaslona {
		transition: none;
	}
}