/* =====================================================================
 * Mitochondriak DE - cart and checkout (W9N.4)
 * ---------------------------------------------------------------------
 * Loaded ONLY on /warenkorb/ and /kasse/ (inc/store-ui.php).
 *
 * WHY A SECOND STYLESHEET
 * Both pages are WooCommerce block applications with ~400 of their own
 * class names. Mixing that into main.css would have buried the storefront
 * rules under a component library the storefront never uses. Everything
 * here reads the SAME tokens as main.css - there is no second palette,
 * no second radius family and no second type scale.
 *
 * Sections
 *   1  page frame
 *   2  line items
 *   3  the totals panel
 *   4  coupon
 *   5  free-shipping progress bar
 *   6  checkout form + steps
 *   7  the assurance band
 *   8  empty cart
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. page frame
 * ------------------------------------------------------------------ */

/*
 * WooCommerce ships `alignwide` on the cart/checkout wrapper, which in a
 * block theme resolves to the WIDE layout size and not to this site's one
 * width. The result was a funnel 100px narrower than every other page.
 */
.mitode-store-page .wp-block-woocommerce-cart,
.mitode-store-page .wp-block-woocommerce-checkout {
	max-width: none;
	margin-inline: 0;
}

/*
 * NO `gap` HERE. WooCommerce's sidebar layout already sizes its two children
 * to exactly 100% of the container (measured: main 806px + sidebar 434px in a
 * 1240px row) and spaces them with padding on the children. Adding a flex gap
 * pushed the pair 43px over the container and the row WRAPPED - the totals
 * panel dropped underneath the line items at full desktop width. Only
 * `align-items` is safe to set.
 */
.mitode-store-page .wc-block-components-sidebar-layout {
	align-items: flex-start;
}

/* The funnel needs the same breathing room as a content band, and the page
   must not end in a tall empty strip above the footer. */
.mitode-store-page .wc-block-cart,
.mitode-store-page .wc-block-checkout {
	padding-block-end: var(--mitode-band-sm);
}

.mitode-store-page .wc-block-components-main {
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * 2. line items
 * ------------------------------------------------------------------ */

.wc-block-cart-items {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.wc-block-cart-items__header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wc-block-cart-items__header th {
	padding: .85rem 1.1rem;
	font-size: var(--mitode-fs-eyebrow);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * W27.6 - THE CART ROW THAT COULD NOT SHRINK.
 *
 * Symptom (W275-018): at a 390 px viewport the cart line items reach 392 px.
 * Measured with a real cart (tools/w27-6/browser/cart-390.mjs - the earlier
 * probe opened an EMPTY cart, where the table does not exist at all and
 * everything reads 0):
 *
 *   container .wc-block-components-main   358.00 px
 *   table.wc-block-cart-items             376.36 px   right edge 392.36
 *   table min-content                     376.36 px   <- cannot go smaller
 *   table at width:100%                   376.36 px   <- so 100% does nothing
 *
 * Accounted for to the pixel. Below WooCommerce's mobile breakpoint the row
 * stops being a table row and becomes `display: grid` with
 * `grid-template-columns: 80px 132px 59.17px 57.19px` and `gap: 16px`:
 *
 *   80 + 16 + 132 + 16 + 59.17 + 16 + 57.19 = 376.36
 *
 * Grid items default to `min-width: auto`, so every track carries its own
 * min-content as a floor and the row cannot be squeezed into 358 no matter
 * what width the table is given. `width: 100%` is not ignored - it is
 * overruled by an intrinsic minimum.
 *
 * THE FIX IS THE ONE DECLARATION THAT REMOVES THAT FLOOR. `min-width: 0` on
 * the cells and on the flex wrapper inside the product cell lets the tracks
 * shrink; the product title then wraps, which `overflow-wrap: break-word`
 * on body already handles.
 *
 * NOT SCOPED TO A VIEWPORT, AND THAT IS THE SECOND HALF OF THE FIX.
 *
 * The first version wrapped this in `@media (max-width: 700px)`, reasoning
 * that the rule is inert once the row is a table row again. Measured, that
 * reasoning was wrong about WHERE the switch happens: WooCommerce flips the
 * row to grid on its own container, not on the viewport. At 710, 730 and
 * 760 the table's min-content is still 376.36 (the grid signature) while a
 * viewport media query at 700 has already stopped applying:
 *
 *     viewport   660    690    700  |   710    730    760  |   790    834
 *     minContent 260    260    260  |  376.4  376.4  376.4 |  329.6  329.6
 *                \___ fix active ___/  \__ grid, no fix __/  \_ table row _/
 *
 * Nothing overflows in that band today, because the funnel column there is
 * 638-684 px wide and 376 fits inside it - but the rule was guarding the
 * wrong axis, and the next layout change decides whether that stays true.
 *
 * Unconditional is safe: a `display: table-cell` already computes
 * `min-width: 0` (measured at 834 and 1440), so above the switch this rule
 * changes nothing. The TOTAL cell is deliberately left out - a price is the
 * one thing in the row that must not be squeezed below its own text.
 */
.mitode-store-page .wc-block-cart-items__row > td,
.mitode-store-page .wc-block-cart-item__wrap,
.mitode-store-page .wc-block-cart-item__wrap > * {
	min-width: 0;
}
.wc-block-cart-items__row:last-child { border-bottom: 0; }
.wc-block-cart-items__row td { padding: 1.15rem 1.1rem; vertical-align: top; }
.wc-block-cart-items__row .wc-block-cart-item__image { padding-inline-end: 0; }

.wc-block-cart-item__image img {
	border-radius: var(--mitode-radius);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	width: 84px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.wc-block-components-product-name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--wp--preset--color--accent); }

/*
 * The truncated short description WooCommerce prints under the title ends
 * mid-sentence ("...verfügt über bis zu 12…") and tells a buyer who has
 * already chosen the product nothing. The line that DOES belong there -
 * stock - is added below.
 */
.wc-block-components-product-metadata__description { display: none; }

.wc-block-cart-item__wrap .wc-block-components-product-price {
	display: block;
	margin-block-start: .35rem;
	font-size: .9375rem;
}
.wc-block-components-product-price__value.is-discounted { color: var(--wp--preset--color--accent); font-weight: 700; }
.wc-block-components-product-price del { color: var(--wp--preset--color--contrast-3); font-weight: 400; }

/*
 * Availability. Added server-side through `woocommerce_get_item_data`
 * (inc/store-ui.php), so it arrives as a real definition list that
 * WooCommerce renders in the cart AND in the checkout order summary.
 */
.wc-block-components-product-details {
	margin-block: .5rem 0;
	font-size: .8125rem;
	line-height: 1.5;
}
.wc-block-components-product-details__name {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
}
.wc-block-components-product-details__value { font-weight: 600; color: var(--wp--preset--color--contrast-2); }

/* quantity stepper - the same geometry as the product page stepper */
.wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius-pill);
	background: var(--wp--preset--color--base);
	min-width: 7.5rem;
	max-width: 8.5rem;
	overflow: hidden;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-weight: 700;
	font-size: 1rem;
	min-height: 2.5rem;
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--contrast-2);
	font-size: 1.15rem;
	min-width: 2.25rem;
	transition: background .15s var(--mitode-ease), color .15s var(--mitode-ease);
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.wc-block-cart-item__remove-link {
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--accent); }

.wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 1.0625rem;
	font-weight: 700;
}
.wc-block-components-sale-badge {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: var(--mitode-radius-pill);
	font-size: .6875rem;
	font-weight: 700;
	padding: .2rem .55rem;
}

/* ---------------------------------------------------------------------
 * 3. the totals panel
 * ------------------------------------------------------------------ */

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius-lg);
	padding: 1.35rem 1.35rem 1.5rem;
	background: var(--wp--preset--color--base);
	box-shadow: var(--mitode-shadow-card);
	position: sticky;
	top: calc(var(--mitode-header-h) + 1rem);
}

@media (max-width: 782px) {
	.wc-block-components-sidebar-layout .wc-block-components-sidebar { position: static; }
}

.wp-block-woocommerce-cart-order-summary-heading-block h2,
.wc-block-cart__totals-title,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
	font-size: var(--mitode-fs-h3);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	margin-block-end: .35rem;
}

.wc-block-components-totals-item {
	padding: .6rem 0;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-components-totals-item__value { color: var(--wp--preset--color--contrast); font-weight: 600; }

.wc-block-components-totals-footer-item {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block-start: .35rem;
	padding-block-start: .9rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--contrast); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.375rem; font-weight: 800; }
.wc-block-components-totals-footer-item__description { color: var(--wp--preset--color--contrast-3); font-size: .8125rem; }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: var(--mitode-radius-pill);
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: var(--mitode-shadow-btn);
	transition: background .15s var(--mitode-ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--wp--preset--color--accent-dark); }

.wc-block-cart__submit-container { padding-block-start: 1rem; }

.wc-block-components-payment-method-icons { margin-block-start: 1rem; opacity: .75; }

/* ---------------------------------------------------------------------
 * 4. coupon
 * ---------------------------------------------------------------------
 * The owner's note: "Aktuálne UI je príliš základné." WooCommerce renders a
 * bare accordion row with no affordance that anything is inside it. This
 * turns it into a panel with its own surface, a tag glyph, and a field row
 * that reads as a form rather than as a collapsed heading.
 * ------------------------------------------------------------------ */

.wc-block-components-totals-coupon {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--surface);
	padding: 0 .9rem;
	margin-block: .75rem;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-weight: 600;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast);
	padding-block: .85rem;
	gap: .55rem;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	background: currentColor;
	opacity: .55;
	-webkit-mask: var(--mitode-tag-icon) center / contain no-repeat;
	mask: var(--mitode-tag-icon) center / contain no-repeat;
}
:root {
	--mitode-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.4 3H5a2 2 0 0 0-2 2v5.4c0 .5.2 1 .6 1.4l8.6 8.6a2 2 0 0 0 2.8 0l5.4-5.4a2 2 0 0 0 0-2.8L11.8 3.6c-.4-.4-.9-.6-1.4-.6zM7.5 8.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E");
}

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: .5rem;
	padding-block-end: .9rem;
	align-items: flex-start;
}
.wc-block-components-totals-coupon__input { flex: 1 1 auto; margin: 0; }
.wc-block-components-totals-coupon__input input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--base);
	min-height: 2.75rem;
}
.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: 2.75rem;
	border-radius: var(--mitode-radius-pill);
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-weight: 700;
	padding-inline: 1.25rem;
	border: 0;
}
.wc-block-components-totals-coupon__button:hover:not(:disabled) { background: var(--wp--preset--color--accent); }

.wc-block-components-chip {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius-pill);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * 5. free-shipping progress bar
 * ---------------------------------------------------------------------
 * Rendered by assets/js/store-blocks.js into WooCommerce's own
 * ExperimentalOrderMeta slot. It exists in the DOM only when
 * inc/free-shipping.php resolved a REAL threshold, so there is no "empty"
 * state to style.
 * ------------------------------------------------------------------ */

/*
 * W27.9 - A STRIP, NOT A PANEL.
 *
 * The owner's words: "ten pásik je stále škaredý ... nech je to úzky
 * prúžok". It was a bordered notice box the width of the sidebar, tinted
 * light blue, 52-88px tall, sitting under the totals where nobody reads.
 * What it has to be is a thin line of progress that belongs to the basket
 * it is measuring.
 *
 * The design, and why each part is the way it is:
 *
 *   - NO BORDER. A 1px box around a 34px strip draws a rectangle the eye
 *     has to parse before it reads the sentence. The tint alone separates
 *     it from the white summary.
 *   - THE TRACK IS THE BOTTOM EDGE. Full bleed, 3px, flush with the
 *     bottom of the strip, so the progress reads as the strip filling up
 *     rather than as a separate widget inside a box.
 *   - THE AMOUNT IS THE LOUDEST THING IN IT. A shopper looks for one
 *     number; the rest of the sentence is context.
 *   - REACHED HAS NO TRACK AND NO PERCENTAGE. A full green bar is a
 *     progress indicator that has stopped indicating. One line, a tick,
 *     30px.
 *
 * The colours are the theme's own: accent (the brand red) while there is
 * something to reach, success green once it is reached. Blue was a fourth
 * colour on a page that already has three.
 */

.mitode-shipbar {
	position: relative;
	/*
	 * Inset by the same 16px the product rows are inset by. Measured on
	 * the checkout at 1440: the totals rows run 922..1309 and the product
	 * row 938..1293, so a strip on the totals grid looked wider than
	 * everything it sits between. Tucking it in makes it read as part of
	 * the list above rather than as a band across the panel.
	 */
	margin-block: 0;
	/*
	 * The inset costs the sentence 32px of width, and in the 263px sidebar
	 * at 834 that was one more wrapped line (83px instead of 68). So the
	 * inset is the tuck-in it is meant to be where there is room for it,
	 * and gets out of the way where there is not.
	 */
	margin-inline: .5rem;
	padding: .4rem .6rem .45rem;
	border-radius: var(--mitode-radius);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, var(--wp--preset--color--base));
	overflow: hidden;
}
.mitode-shipbar.is-reached {
	background: color-mix(in srgb, var(--wp--preset--color--success) 9%, var(--wp--preset--color--base));
}

.mitode-shipbar__text {
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	margin: 0;
	/*
	 * 12px on a 1.3 line. The sidebar is 263px wide at 834 and the
	 * country-aware sentence wraps to three lines there; at 13px/1.35 that
	 * was an 89px block, which is a notice, not a strip. Measured after:
	 * 1440 = 40px, 834 = 58px, 390 = 51px.
	 */
	font-size: .75rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
	/* Room for the track that sits on the bottom edge. */
	padding-block-end: .28rem;
}
.mitode-shipbar.is-reached .mitode-shipbar__text {
	padding-block-end: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.mitode-shipbar__amount {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.mitode-shipbar__icon {
	display: inline-flex;
	flex: 0 0 auto;
	/* Optically on the first line, not on the middle of a wrapped block. */
	margin-block-start: 1px;
	color: var(--wp--preset--color--accent);
}
.mitode-shipbar.is-reached .mitode-shipbar__icon { color: var(--wp--preset--color--success); }
.mitode-shipbar__icon svg { display: block; width: 14px; height: 14px; }

/*
 * The track is the strip's own bottom edge: absolutely positioned, full
 * bleed, no radius of its own. `overflow: hidden` on the strip clips the
 * fill to the rounded corners.
 */
/*
 * The track is the strip's own bottom edge, and it is VISIBLE EMPTY.
 *
 * With 7,49 € of a 99 € basket the fill is 8% - and on an invisible rail
 * that is a 30px red mark floating under a sentence, which reads as a
 * rendering artefact rather than as progress. The rail is tinted enough to
 * be seen at rest, so the fill is always "this much of that".
 */
.mitode-shipbar__track {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 26%, var(--wp--preset--color--base));
}
.mitode-shipbar__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--base)),
		var(--wp--preset--color--accent));
	transition: width .35s var(--mitode-ease);
}

@media (min-width: 1024px) {
	.mitode-shipbar { margin-inline: 1rem; }
}

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

/* ---------------------------------------------------------------------
 * 6. checkout form + steps
 * ------------------------------------------------------------------ */

.wc-block-components-checkout-step {
	padding-inline-start: 0;
	border: 0;
}
.wc-block-components-checkout-step__heading { margin-block: 0 .9rem; }
.wc-block-components-checkout-step__title {
	font-size: var(--mitode-fs-h3);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--contrast-2);
	font-size: .875rem;
}
.wc-block-components-checkout-step__container::after { border: 0; }

/*
 * W27.7 - `.wc-block-components-address-form input` MEANS EVERY INPUT.
 *
 * This rule gives form fields a 48px touch height, which is right for a
 * text field and wrong for a checkbox: the newsletter and "create an
 * account" boxes render INSIDE `.wc-block-components-address-form`, so
 * their 20x20 tick inherited `min-height: 3rem` and became a 20x48 sliver
 * with a label floating beside it. Measured: those two checkbox rows were
 * 48px tall against 20px for the two that sit outside the address form -
 * the same control, twice the height, on the same screen.
 *
 * `:not([type=checkbox]):not([type=radio])` is the whole fix: a tick has
 * its own size and its LABEL is the touch target.
 */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-address-form input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-combobox-control input,
.wc-block-components-select__container select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--base);
	min-height: 3rem;
	font-size: 1rem;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select__container select:focus {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--info) 55%, transparent);
	outline: none;
}

/*
 * The legal sentence before the order button. It is the last thing a
 * customer reads before a payment obligation, so it is not 12px grey.
 */
.wc-block-checkout__terms {
	margin-block: 1.25rem;
	padding: .95rem 1.1rem;
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	font-size: .875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-checkout__terms a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wc-block-checkout__terms a:hover { color: var(--wp--preset--color--accent); }

.wc-block-checkout__actions { padding-block-start: 0; }
.wc-block-checkout__actions_row { align-items: center; gap: 1rem; }
.wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--contrast-2);
	font-weight: 600;
}

.wc-block-components-notice-banner {
	border-radius: var(--mitode-radius);
	font-size: .9375rem;
}

/* order summary inside the checkout sidebar: no truncated description */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none; }
.wc-block-components-order-summary-item__image img {
	border-radius: var(--mitode-radius);
	border: 1px solid var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------------
 * 7. the assurance band (inc/store-ui.php)
 * ------------------------------------------------------------------ */

.mitode-cart-assurance {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block-start: var(--mitode-band-sm);
	padding-block-start: var(--mitode-band-sm);
}
.mitode-cart-assurance__h {
	font-size: var(--mitode-fs-h2);
	margin: 0 0 1.25rem;
}

.mitode-assure {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
	.mitode-assure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

.mitode-assure__item {
	display: flex;
	gap: .85rem;
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--surface);
}
.mitode-assure__icon {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mitode-assure__body { min-width: 0; }
.mitode-assure__title { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.mitode-assure__text { margin: 0 0 .5rem; font-size: .875rem; color: var(--wp--preset--color--contrast-2); line-height: 1.55; }
.mitode-assure__link {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mitode-assure__link:hover { color: var(--wp--preset--color--accent); }

.mitode-cart-help {
	margin-block-start: 1.25rem;
	padding: 1.15rem 1.25rem;
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--dark);
	color: #e8e9ee;
}
.mitode-cart-help__lead { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.55; }
.mitode-cart-help__lead strong { color: #fff; }
.mitode-cart-help__row { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.mitode-cart-help__link {
	color: #fff;
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mitode-cart-help__link:hover { color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------------
 * 8. empty cart
 * ------------------------------------------------------------------ */

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	text-align: left;
	margin-block: 0 .5rem;
}

/* ---------------------------------------------------------------------
 * W27.7 - the quantity stepper was a 65px-tall control for one digit
 *
 * Measured on the cart page: 120 x 64.8 px, input font 16px with 10.4px of
 * padding above and below ON TOP OF a 2.5rem min-height, which is where the
 * extra 25px came from. The drawer's copy of the same control was 107 x
 * 31.2 - so the two surfaces disagreed as well.
 *
 * One size for both: 40px tall (a comfortable touch target, and the same
 * height as the theme's small buttons), 104px wide, the number no longer
 * shouting at 16px bold. The pill radius stays - that is the theme's shape.
 * ------------------------------------------------------------------ */

/*
 * W27.9 - THE "+" WAS BEING CLIPPED OFF THE END OF THE CONTROL.
 *
 * Reported as "tlačidlo + tam zmizlo - vidím len − 1". It had not
 * disappeared; it was rendered outside its own box and cut off. Measured
 * in the cart at every width:
 *
 *   selector   x=189 .. 293   (104 px wide, overflow: hidden)
 *   minus      x=190 .. 220   (30)
 *   input      x=220 .. 288   (68)
 *   plus       x=287 .. 317   (30)   <- 24 px of it past the right edge
 *
 * 30 + 68 + 30 = 128 in a 104 px box. W27.7 pinned the WIDTH of the
 * control to 6.5rem to make it compact, and left WooCommerce's flex row
 * to distribute the parts - the input has its own width and does not
 * shrink, so the last child ran off the end and `overflow: hidden` did
 * the rest. A one-dimensional fix (a wider box) would only move the
 * threshold.
 *
 * So the control is a GRID with three named columns and explicit
 * placement. The DOM order is input, minus, plus - WooCommerce's, not
 * ours - and grid columns put them on screen as − 1 +, which is the order
 * the owner asked for and the one a shopper expects. Nothing can overflow
 * a track it is assigned to.
 *
 *   36px  |  1fr  |  36px       = 108 px, 40 px tall
 *
 * The signs also stop whispering: WooCommerce ships them at opacity .6,
 * which on a 13.5px glyph is a grey smudge. Full opacity, the theme's
 * secondary ink, and the accent on hover.
 */
.wc-block-components-quantity-selector {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 36px;
	align-items: stretch;
	min-width: 108px;
	max-width: 108px;
	height: 40px;
	/* Nothing left to clip; keeping it hidden would only hide a mistake. */
	overflow: visible;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	grid-column: 2;
	width: auto;
	min-width: 0;
	font-size: .9375rem;
	min-height: 0;
	height: auto;
	padding: 0;
	text-align: center;
}
/*
 * TWO CLASSES, because WooCommerce uses two.
 *
 * `.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button`
 * is (0,2,0) and sets `font-size: .9em; opacity: .6; min-width: 30px`. The
 * theme's single-class rules never won any of them - measured: the signs
 * rendered at 13.5px and 60% opacity while the stylesheet asked for
 * 1.05rem and full opacity. Matching the specificity is the fix; an
 * `!important` would have hidden the reason.
 */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 0;
	width: 100%;
	height: auto;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1;
	opacity: 1;
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus { grid-column: 1; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus { grid-column: 3; }

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: .35;
	cursor: not-allowed;
}
/* The pill's own corners, so a hover fill does not square them off. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus {
	border-start-start-radius: var(--mitode-radius-pill);
	border-end-start-radius: var(--mitode-radius-pill);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus {
	border-start-end-radius: var(--mitode-radius-pill);
	border-end-end-radius: var(--mitode-radius-pill);
}

/* =====================================================================
 * W27.7 - THE ADDRESS CARD THAT SHOWED A NEW CUSTOMER "DEUTSCHLAND"
 *
 * Reported as "the checkout pre-filled my details and hid them behind an
 * edit button". Measured on a brand-new anonymous session
 * (tools/w27-7/browser/checkout-address.mjs):
 *
 *   prefilled text/email fields : NONE
 *   shippingAddress             : every field "" except country "DE"
 *   getEditingShippingAddress() : true          <- the form IS open
 *   rendered                    : <div class="wc-block-components-address-card">
 *                                   <address>
 *                                     <span …--primary></span>          <- empty
 *                                     <span …--secondary>Deutschland</span>
 *                                   </address>
 *                                   <span …__edit aria-expanded="true">Bearbeiten</span>
 *                                 </div>
 *
 * So nothing was pre-filled and nothing was collapsed. What the customer
 * saw is WooCommerce printing the SEEDED BASE COUNTRY as though it were an
 * address the customer had entered, with an "edit" control next to it. For
 * somebody who has never been here that reads exactly as reported - and the
 * reading is fair, because a card that says "Deutschland / Bearbeiten" is
 * making a claim about data the visitor never gave.
 *
 * The card is right for a RETURNING customer, whose name and street are in
 * the primary line. It is wrong when that line is empty. `:has()` lets the
 * rule say precisely that and nothing more - no JavaScript, no guessing at
 * a session state, and the card comes back by itself the moment there is an
 * address to show.
 * ================================================================== */

.wc-block-components-address-card:has(.wc-block-components-address-card__address-section--primary:empty) {
	display: none;
}

/* ---------------------------------------------------------------------
 * W27.7 - THE ORDER BUTTON THAT WAS TOO FAR FROM THE EYE
 *
 * Reported: on desktop the "Bestellung abschließen" button should sit on
 * the right, under the order summary, where the customer is already
 * looking. Measured at 1440: the button is at x=100 (the left column) while
 * the summary sits at x=906 - a full column apart, and below the fold on a
 * form this long.
 *
 * IT IS NOT MOVED, AND THAT IS DELIBERATE. WooCommerce registers
 * `woocommerce/checkout-actions-block` with
 * `parent: ["woocommerce/checkout-fields-block"]`. Placing it in the totals
 * column makes it an invalid child: the block editor flags the page as
 * containing unexpected content, and the owner opening the checkout page to
 * edit anything at all risks losing the block that SUBMITS THE ORDER. That
 * is not a trade worth making for a column of horizontal distance.
 *
 * So the button stays where WooCommerce puts it and stops being far away
 * instead: from 783px up it sticks to the bottom of the viewport as the form
 * scrolls, on the shop's own surface, with a hairline above it. The summary
 * opposite it is already sticky (see section 3), so the total and the button
 * are both permanently on screen - which is the thing that was actually
 * missing.
 *
 * Below 783 the layout is one column and the button is the last thing on the
 * page, where it belongs; a sticky bar there would only cover content.
 * ------------------------------------------------------------------ */

@media (min-width: 783px) {
	.mitode-checkout .wc-block-checkout__actions {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin-block-start: 1.5rem;
		padding-block: 1rem;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
	}
	/* The row inside it keeps its own spacing; only the shell is sticky. */
	.mitode-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
		margin-block-end: 0;
	}
}

/* =====================================================================
 * W27.7 - THE FREE-SHIPPING BAR: TO THE TOP OF THE SUMMARY, AND COMPACT
 *
 * Where it was: inside `.wc-block-components-order-meta`, which
 * WooCommerce renders at the END of the order-summary block - so the bar
 * sat below every totals row, 88px tall, its sentence wrapping onto two
 * lines across a 389px panel. The owner asked for it in the right column
 * directly under the cart's product list, and lower and tighter than it is.
 *
 * It was ALREADY in the right column (measured: bar x=921 inside a sidebar
 * at x=899). What was wrong was its position within that column and its
 * height. The slot fill stays where WooCommerce puts it - reaching for a
 * different slot would mean leaving the official API - and CSS reorders it:
 * the summary block becomes a flex column and the wrapper carrying the bar
 * is pulled to the front. That is one declaration and it cannot desync from
 * the React tree the way a DOM move would.
 *
 * Compact, measured against the old 88px: padding .5/.7rem instead of
 * .85/.95, a 4px track instead of 6, 13px text on a tighter line, and the
 * sentence given the panel's full width by dropping the icon's gap to what
 * an icon needs. Target ~52px, one line of text at the sidebar's width.
 * ================================================================== */

/*
 * W27.9 - WHERE THE STRIP SITS, IN BOTH SUMMARIES.
 *
 * The slot fill stays exactly where WooCommerce puts it - reaching for a
 * different slot would mean leaving the official API - and CSS decides the
 * order. `order` on a flex column cannot desync from the React tree the
 * way a DOM move would.
 *
 * CART: the products are in the LEFT column, so the top of the right
 * column is the line they start on. `order: -1`, unchanged since W27.7.
 *
 * CHECKOUT: the products are INSIDE the sidebar, and the owner asked for
 * the strip directly under them and directly above "Gutscheine
 * hinzufügen". W27.7 said this selector "matches nothing" on the checkout
 * and left it out; that was true of the summary BLOCK and false of the
 * element that actually holds the five children. Measured at 1440 with one
 * item in the cart:
 *
 *   .wc-block-components-checkout-order-summary__content
 *     wp-block-woocommerce-checkout-order-summary-cart-items-block   y=433
 *     wp-block-woocommerce-checkout-order-summary-coupon-form-block  y=534
 *     wp-block-woocommerce-checkout-order-summary-totals-block       y=641
 *     wc-block-components-totals-wrapper (Gesamtsumme)               y=793
 *     wc-block-components-totals-wrapper.slot-wrapper  <- the strip   y=879
 *
 * Three explicit `order` values, because an unset order is 0 and would
 * jump ahead of anything positive. The strip is keyed on our own class,
 * not on `.slot-wrapper`, so a WooCommerce rename cannot silently move it
 * back to the bottom.
 */
.mitode-store-page .wp-block-woocommerce-cart-order-summary-block {
	display: flex;
	flex-direction: column;
}
/*
 * W27.9 - UNDER THE HEADING, NOT ABOVE IT.
 *
 * `order: -1` put the strip above "Warenkorb-Summe", i.e. above the panel's
 * own title, which reads as something that fell out of the box rather than
 * as the first row in it. Measured children of the cart summary block:
 *
 *   0 …-heading-block  "Warenkorb-Summe"
 *   1 …-coupon-form-block  "Gutscheine hinzufügen"
 *   2 …-totals-block
 *   3 …totals-wrapper  "Veranschlagte Gesamtsumme"
 *   4 …totals-wrapper.slot-wrapper  <- the strip
 *
 * Same three-value pattern as the checkout: heading first, strip second,
 * everything else after - so in both places the strip is the last thing
 * before "Gutscheine hinzufügen".
 */
.mitode-store-page .wp-block-woocommerce-cart-order-summary-block > * { order: 3; }
.mitode-store-page .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-heading-block { order: 1; }
.mitode-store-page .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:has(.mitode-shipbar) {
	order: 2;
	padding-block: 0;
	border: 0;
}

/*
 * TWO CONTAINERS, because WooCommerce mounts the summary in two different
 * places and only one of them is the one you find at a desktop width.
 *
 * Measured with one item in the cart:
 *
 *   >= 834   the five rows are children of
 *            .wc-block-components-checkout-order-summary__content
 *   390      the summary is rendered into the collapsible panel at the
 *            bottom of the form, and the five rows are children of
 *            .checkout-order-summary-block-fill; the __content wrapper is
 *            still in the DOM but EMPTY (h=0)
 *
 * Ordering only the first one put the strip above the coupon on desktop
 * and left it at the bottom on a phone - which is where the owner would
 * have found it. The rule set is identical for both.
 */
.mitode-store-page .wc-block-components-checkout-order-summary__content,
.mitode-store-page .checkout-order-summary-block-fill {
	display: flex;
	flex-direction: column;
}
.mitode-store-page .wc-block-components-checkout-order-summary__content > *,
.mitode-store-page .checkout-order-summary-block-fill > * { order: 3; }

.mitode-store-page .wc-block-components-checkout-order-summary__content > .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.mitode-store-page .checkout-order-summary-block-fill > .wp-block-woocommerce-checkout-order-summary-cart-items-block { order: 1; }

.mitode-store-page .wc-block-components-checkout-order-summary__content > .wc-block-components-totals-wrapper:has(.mitode-shipbar),
.mitode-store-page .checkout-order-summary-block-fill > .wc-block-components-totals-wrapper:has(.mitode-shipbar) {
	order: 2;
	padding-block: 0;
	border: 0;
}

/*
 * The wrapper WooCommerce puts around the slot carries the summary's own
 * row padding and a hairline. Both belong to a totals row and neither
 * belongs to a strip that is already tinted; without this the strip sits
 * in a 24px well with a rule above it.
 */
.mitode-store-page .wc-block-components-totals-wrapper:has(.mitode-shipbar) {
	padding-block: 0 .75rem;
	border: 0;
}
.mitode-store-page .wc-block-components-totals-wrapper:has(.mitode-shipbar)::after { display: none; }

/* =====================================================================
 * W27.9 - THE TABLET WIDTH WHERE THE SIDEBAR IS TOO NARROW TO READ
 *
 * WooCommerce decides the cart/checkout column count from a container
 * width observer (`is-large` on `.wc-block-components-sidebar-layout`),
 * and its threshold is generous. Measured on the checkout:
 *
 *   width   main   sidebar
 *   1440    806    434
 *   1100    653    352
 *   1024    604    325
 *    900    528    285
 *    834    489    263   <- two columns, and the summary is 263px wide
 *    768    692    692   <- one column
 *
 * At 263px the order summary is not a summary any more: the product name
 * breaks over four lines, "Verfügbarkeit: Auf Lager" over three, and the
 * free-shipping sentence over three. Nothing overflows - it is just
 * unreadable, which is the thing the owner asked to be checked with eyes
 * rather than with a ruler.
 *
 * Below 1000px the summary gets the full width instead. That is one
 * column of comfortable text rather than two of cramped text, and it is
 * the same decision WooCommerce makes 60px later.
 *
 * Scoped to this theme's store pages, and expressed as a plain override of
 * the two children rather than by removing Woo's class - the class is set
 * by its own JavaScript and would come back.
 * ================================================================== */

@media (max-width: 999px) {
	.mitode-store-page .wc-block-components-sidebar-layout {
		display: block;
	}
	.mitode-store-page .wc-block-components-sidebar-layout > .wc-block-components-main,
	.mitode-store-page .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
		width: 100%;
		max-width: none;
		float: none;
	}
	/*
	 * W57 - THE GUTTER IS WOOCOMMERCE'S; THE INSET IS THE CARD'S.
	 *
	 * This rule used to zero `padding-inline` on BOTH children. On the main
	 * column that is right - the padding there is WooCommerce's two-column
	 * gutter and there is only one column now. On the sidebar it was wrong,
	 * because the sidebar is not a column on this shop, it is a CARD: it
	 * draws a 1px border, a white ground and a shadow, and its inset is the
	 * only thing holding text off that border.
	 *
	 * Measured on /warenkorb/ before the fix, `.wc-block-components-sidebar`
	 * computed padding:
	 *
	 *   1440  21.6px / 21.6px      <- the card
	 *    430   0px   /  0px
	 *    390   0px   /  0px
	 *    320   0px   /  0px
	 *
	 * which is exactly the report: "Zwischensumme", "Versand", "Packeta -
	 * Paketshop und Paketbox", "Veranschlagte Gesamtsumme" and every price
	 * on the right sat 0.0px from the card's own border on a phone, and the
	 * desktop was fine. So the gutter is zeroed on the column that has one
	 * and the card keeps its padding everywhere.
	 */
	.mitode-store-page .wc-block-components-sidebar-layout > .wc-block-components-main {
		padding-inline: 0;
	}
	/* The summary follows the form, as it does on a phone. */
	.mitode-store-page .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
		margin-block-start: clamp(1.25rem, 3vw, 2rem);
	}
}

/* ---------------------------------------------------------------------
 * W27.9 - THE CHECKOUT SHOWED THE ORDER SUMMARY TWICE ON A PHONE
 *
 * Found while looking at the cart with eyes rather than with a ruler: the
 * cropped screenshot of `.wc-block-checkout__sidebar` at 390 had a product
 * row and a coupon and NO free-shipping strip, while the measurement said
 * the strip was there. Both were true - there were two summaries.
 *
 * WooCommerce renders the order summary a second time inside
 * `.wc-block-checkout__actions` for narrow layouts (the panel above the
 * place-order button) and is supposed to leave only one of them visible.
 * Measured, visible summary blocks:
 *
 *   layout class   /kasse/   /warenkorb/
 *   is-large          1          1
 *   is-small          2          1
 *   is-mobile         2          1
 *
 * So on every phone the customer scrolled past the same list of products,
 * the same coupon field and the same totals twice - and the
 * `ExperimentalOrderMeta` fill renders ONCE, into the first copy, so the
 * second one silently lost the free-shipping strip. This predates W27.9;
 * the strip is what made it visible.
 *
 * Keyed on WooCommerce's own layout classes rather than on a pixel value,
 * so it follows their breakpoint if it moves. The CART is deliberately not
 * touched: there the sidebar copy is the ONLY one (1, not 2), and hiding
 * it would take the totals with it.
 * ------------------------------------------------------------------ */

.mitode-checkout .wc-block-checkout.wc-block-components-sidebar-layout:is(.is-small, .is-mobile) > .wc-block-checkout__sidebar {
	display: none;
}

/* =====================================================================
 * W27.10 - THE COMPACT CART
 *
 * MEASURED BEFORE, not guessed. Two items in the cart, real Chrome, after
 * the Blocks cart had finished hydrating (the first run of this phase's
 * probe measured the SKELETON and reported that the quantity control does
 * not exist):
 *
 *   width   1440   1280    834    430    390    360    320
 *   thumb  82x109 82x109 82x109  66x87  66x87  66x87  66x87
 *   rows   164/189 ...    164/189 156/180 156/180 156/197 156/216
 *   qty    108x40 on every width
 *   ship      48     48     48     48     48     48     63
 *   summary  526    526    458    488    488    514    530
 *   overflow   0      0      0      0      0      0      0
 *
 * Nothing overflowed, so this pass is about DENSITY, not about breakage.
 * A 189px row for one line of text, a price and a stepper is a page that
 * makes a two-item cart scroll on a laptop.
 *
 * WHAT CHANGES AND WHY EACH ONE
 *
 *   thumbnail    82 -> 76 px, and the 3/4 crop becomes 1/1. The tall crop
 *                was what made the row 109px before any text existed; a
 *                square is the shape these products photograph in anyway.
 *   row padding  1.15rem -> .7rem block. The row is a list item, not a card.
 *   stepper      40 -> 34 px, keeping the three-column grid W27.7 built
 *                and its 34px hit targets (still above the 24px floor
 *                the QA sweep enforces, and a stepper is used with a
 *                pointer far more often than with a fingertip).
 *   price        right-aligned in its own column, tabular figures, so two
 *                prices under each other line up on the decimal.
 *   stock        a compact badge instead of a sentence.
 *   summary      tighter rows; it is already sticky (measured `position:
 *                sticky` at 1440) and stays that way.
 *   coupon       stays collapsed - measured aria-expanded="false".
 *
 * The mobile widths keep the 66px thumbnail: below 430 the row is already
 * two lines, and shrinking the picture there buys nothing a customer can
 * see.
 * ------------------------------------------------------------------ */

.mitode-store-page .wc-block-cart-items__row td {
	padding: .7rem .8rem;
	vertical-align: top;
}
.mitode-store-page .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-inline-start: 0;
	padding-inline-end: .8rem;
	width: 76px;
}

.mitode-store-page .wc-block-cart-item__image img {
	width: 76px;
	aspect-ratio: 1 / 1;
}

/* The product cell: title, meta, stepper - each on its own tight line. */
.mitode-store-page .wc-block-cart-item__wrap > * + * {
	margin-block-start: .25rem;
}
/*
 * The product name is the row's biggest tap target, so it keeps 24 px of
 * height even at the smaller type size.
 *
 * Measured after the density pass: the link box was 20 px tall (135x20 and
 * 166x20 on the two cart rows at 320-1440), which is under the 24 px floor
 * the QA sweep enforces. The type stays at .9375rem - the extra height is
 * padding on the link, so the row does not grow: the cell already had that
 * space between the title and the price line.
 */
.mitode-store-page .wc-block-components-product-name {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: .9375rem;
	line-height: 1.3;
}
.mitode-store-page .wc-block-cart-item__wrap .wc-block-components-product-price {
	margin-block-start: .15rem;
	font-size: .875rem;
}

/* The line total, right-aligned and on the decimal. */
.mitode-store-page .wc-block-cart-item__total {
	text-align: end;
	white-space: nowrap;
}
.mitode-store-page .wc-block-cart-item__total .wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
	font-size: .9375rem;
}

/*
 * The stepper, 34px tall.
 *
 * The three explicit grid columns are W27.7's and they stay: the DOM order
 * is input, minus, plus, and only explicit placement renders it as
 * "- 1 +". Two classes again, because WooCommerce uses two - a single
 * class here loses to `.wc-block-components-quantity-selector
 * .wc-block-components-quantity-selector__button` and the change would
 * silently do nothing.
 */
.mitode-store-page .wc-block-components-quantity-selector {
	grid-template-columns: 34px minmax(0, 1fr) 34px;
	min-width: 100px;
	max-width: 100px;
	height: 34px;
}
.mitode-store-page .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-size: .875rem;
}
.mitode-store-page .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	font-size: 1rem;
}

/*
 * The stock line as a badge rather than a sentence.
 *
 * The markup is WooCommerce's, not the theme's: `mitode_cart_item_stock()`
 * (inc/store-ui.php) adds a row through `woocommerce_get_item_data`, and
 * the Store API renders it as
 *
 *   <span class="…product-details__…">
 *     <span class="…__name">Verfügbarkeit:</span>
 *     <span class="…__value">Auf Lager</span>
 *   </span>
 *
 * A first draft of this pass styled a class called `.mitode-cart-stock`,
 * which appears nowhere in that markup - dead CSS that a screenshot caught
 * and a stylesheet never would. The label is hidden VISUALLY only, so a
 * screen reader still hears "Verfügbarkeit: Auf Lager" while a sighted
 * reader sees one compact badge.
 */
.mitode-store-page .wc-block-components-product-details {
	margin: 0;
}

.mitode-store-page .wc-block-components-product-details__name {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mitode-store-page .wc-block-components-product-details__value {
	display: inline-flex;
	align-items: center;
	padding: .1rem .45rem;
	border-radius: var(--mitode-radius-pill);
	background: var(--wp--preset--color--surface);
	font-size: .75rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}

.mitode-store-page .wc-block-cart-item__remove-link {
	font-size: .75rem;
}

/* The summary: same information, less air. */
.mitode-store-page .wc-block-components-totals-item {
	padding: .4rem 0;
	font-size: .875rem;
}
.mitode-store-page .wc-block-components-totals-footer-item {
	padding-block-start: .6rem;
}
.mitode-store-page .wc-block-cart__submit-button,
.mitode-store-page .wc-block-components-checkout-place-order-button {
	padding: .8rem 1.4rem;
}
.mitode-store-page .wc-block-cart__submit-container {
	padding-block-start: .7rem;
}

/*
 * The free-shipping strip: thinner, and the truck is the only picture in
 * it. 48px was already the W27.7 compact version; the remaining height was
 * the block padding around a 16px line.
 */
/*
 * W57 - `padding-inline` is restated here because WooCommerce zeroes it.
 *
 * The base rule above sets `padding: .4rem .6rem .45rem`, and it loses.
 * Asked of Chrome rather than of the file, the rules that reach this
 * element's padding are, in order:
 *
 *   .mitode-shipbar                                        padding: .4rem .6rem .45rem
 *   .wc-block-components-totals-wrapper.slot-wrapper > * > *   padding: 16px 0   <- WooCommerce
 *   .mitode-store-page .mitode-shipbar                     padding-block: .5rem
 *
 * Woo's selector is two classes to our one, so it wins the horizontal half
 * and the strip's sentence ran flat into the tinted box's right edge on
 * every width, phone and desktop alike. Restating the inset on the
 * two-class selector that already sets the block padding fixes it without
 * an `!important` and without touching WooCommerce's rule.
 */
.mitode-store-page .mitode-shipbar {
	padding-block: .5rem;
	padding-inline: .6rem;
}
.mitode-store-page .mitode-shipbar__icon {
	width: 16px;
	height: 16px;
}
.mitode-store-page .mitode-shipbar__label {
	font-size: .8125rem;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.mitode-store-page .wc-block-cart-items__row td {
		padding: .6rem .55rem;
	}
	.mitode-store-page .wc-block-cart-items__row .wc-block-cart-item__image {
		width: 66px;
		padding-inline-end: .6rem;
	}
	.mitode-store-page .wc-block-cart-item__image img {
		width: 66px;
	}
}

/* ---------------------------------------------------------------------
 * W27.10 - THE ORDER SUMMARY THAT WOULD NOT SHRINK BELOW 342 px
 *
 * Found by the acceptance sweep, on the checkout, at 320 and 360, and ONLY
 * with more than one item in the cart - which is why no earlier phase saw
 * it: every previous cart probe put one product in the basket.
 *
 * Measured at 320 (viewport 320, container 288):
 *
 *   .wc-block-components-order-summary__content   display:table
 *                                                 table-layout:auto
 *                                                 width 342.47px
 *     .wc-block-components-order-summary-item     display:flex   w 342
 *       __image                min-width:auto   48
 *       __description          min-width:auto  178
 *       __total-price          min-width:auto   86
 *   nearest ancestor with overflow-x != visible  : NONE
 *
 * The table is `auto` layout, so it takes its min-content width, and the
 * min-content of the row is the sum of three flex items that all carry
 * flexbox's default `min-width: auto` and therefore refuse to shrink below
 * their own content. 48 + 178 + 86 is 312 before padding, so the row's
 * floor is 342 and the 288 px column cannot hold it: the price column ends
 * 55 px off the right edge of a 320 px screen.
 *
 * The document does not scroll, which is what makes this the dangerous
 * shape rather than the obvious one - a probe that reads
 * `scrollWidth - clientWidth` reports 0 and the customer still cannot see
 * what the order costs. Same class of defect as W27.7's clipped "+".
 *
 * The fix is the one already applied to the cart rows above (store.css,
 * "min-width: 0"): let the flex children shrink, and keep the money on one
 * line so the one thing that must stay readable does.
 * ------------------------------------------------------------------ */

/*
 * `table-layout: fixed`, and `min-width: 0` alone was not enough.
 *
 * Measured after adding only the min-width rules: the flex children DID
 * take `min-width: 0` (verified in the computed style) and the table was
 * still 342.47 px wide in a 320 px viewport. An `auto` layout table takes
 * its min-content width and hands that floor up to every ancestor, so the
 * column above it grew to 342 too and `width: 100%` then resolved to 342 -
 * the constraint arrived from below, not from above.
 *
 * `fixed` breaks that loop: the table is exactly its specified width and
 * the column comes from the first row rather than from the content. Each
 * summary item is the only child of its row, so this is one full-width
 * column - the layout the design already wanted - and the flex row inside
 * it can finally shrink, because the min-width rules below let it.
 */
.mitode-store-page .wc-block-components-order-summary__content {
	width: 100%;
	table-layout: fixed;
}

.mitode-store-page .wc-block-components-order-summary-item,
.mitode-store-page .wc-block-components-order-summary-item__description,
.mitode-store-page .wc-block-components-order-summary-item__total-price,
.mitode-store-page .wc-block-components-order-summary-item .wc-block-cart-item__prices,
.mitode-store-page .wc-block-components-order-summary-item .wc-block-components-product-metadata,
.mitode-store-page .wc-block-components-order-summary-item .wc-block-components-product-details {
	min-width: 0;
}

/* The h3 ships with max-width: max-content, which re-imposes the floor. */
.mitode-store-page .wc-block-components-order-summary-item .wc-block-components-product-name {
	max-width: 100%;
}

/* A line total never wraps mid-amount. */
.mitode-store-page .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
	white-space: nowrap;
}

/* A long product name breaks rather than setting a floor. */
.mitode-store-page .wc-block-components-order-summary-item .wc-block-components-product-name,
.mitode-store-page .wc-block-components-order-summary-item__description {
	overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------
 * 9. W55 - the checkout summary's inner rhythm, and the "i" popover
 * ------------------------------------------------------------------ */

/*
 * 9.1 THE SUMMARY PANEL HAD TWO FRAMES AND THREE INDENTS.
 *
 * Measured on /kasse/ at 1440 before this stage, inside a sidebar whose
 * own content box runs 920.10 -> 1310.90:
 *
 *   wp-block-woocommerce-checkout-order-summary-block  921.09 -> 1309.91  (1px border, 5px radius)
 *   .wc-block-components-order-summary-item (product)  938.09 -> 1292.91  (16px in)
 *   .wc-block-components-totals-coupon                 922.09 -> 1308.91  (own 16px padding)
 *   Zwischensumme / Lieferung / Gesamtsumme            922.09 -> 1308.91  padding 0 / 0
 *
 * So WooCommerce paints its OWN card inside the card this theme already
 * draws - two borders 21px apart - and the totals rows have no horizontal
 * padding at all, which is why "Gesamtsumme" and every amount sat hard
 * against the inner border on both sides. That is the owner's screenshot,
 * and it is one defect with two halves.
 *
 * Both halves are fixed by making the sidebar the ONLY card and giving
 * everything inside it one indent:
 *
 *   the inner frame is dropped (the theme's sidebar already has border,
 *   radius, shadow and padding - see section 3),
 *   every row - product, coupon, totals - lines up on the same 16px.
 *
 * Scoped to `.wc-block-checkout__sidebar` and nothing wider. The CART's
 * summary is a different block with no inner frame, and its totals are
 * already inset by the sidebar's own 1.35rem; adding an indent there would
 * push them 16px further in and break a panel nobody reported.
 *
 * `position: sticky` on the sidebar (section 3) is untouched: nothing here
 * changes position, display or the sidebar-layout flex contract that the
 * W9N.4 note warns about.
 */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
	background: transparent;
}

/*
 * ONE INDENT, ON THE WRAPPERS WOOCOMMERCE ALREADY GROUPS ROWS INTO.
 *
 * The indent belongs on `.wc-block-components-totals-wrapper` and not on
 * the rows, for a reason that was measured the hard way: the footer item
 * ("Gesamtsumme") carries an explicit `width` from WooCommerce -
 * 388.812px, the full content width - so a `margin-inline` on the ROW does
 * not shrink it, it slides it. The first attempt put the row at
 * 937.09 -> 1325.91 against a panel ending at 1309.91: 16px further out
 * than the defect being fixed.
 *
 * Padding the wrapper makes the row's 100% resolve to the padded box, so
 * text, amounts AND the separator above the total all land on the same
 * 16px - which is also where WooCommerce's own product list and title
 * already sit (both `padding: 16px`, measured), so this adopts the panel's
 * existing rhythm rather than inventing a second one.
 *
 * The cart-items wrapper is excluded because its child `.wc-block-
 * components-order-summary` already has that same 16px; padding both would
 * indent the product row 32px while every other row stayed at 16.
 */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block) {
	padding-inline: 1rem;
}

/*
 * 9.2 THE "i" AFFORDANCE.
 *
 * The button is a sibling of the row's <label> (assets/js/checkout-info.js
 * explains why it cannot be inside it) and is drawn over the row's right
 * end. The row therefore has to reserve that space, or the button lands on
 * top of the price.
 */
.mitode-infohost { position: relative; }

.mitode-infohost > label.wc-block-components-radio-control__option {
	padding-inline-end: 2.5rem;
}

/*
 * THE WRAPPER SPANS THE WHOLE ROW, ALL FOUR SIDES.
 *
 * With only `inset-block-start: 0` it had zero HEIGHT, so the panel's
 * `top: 100%` resolved to the row's TOP and the popover was drawn over the
 * carrier's own name - it covered the one row the reader had just asked
 * about. Caught by looking at the 390px screenshot; every DOM assertion
 * (open, not clipped, inside the viewport, no overflow) had already passed.
 * Spanning the row makes 100% mean "below the row", which is what an
 * anchored popover means.
 */
.mitode-infopop {
	position: absolute;
	inset-inline: 0;
	/* top and height are written by assets/js/checkout-info.js, in pixels,
	   from the row's own box - see place() there for why CSS cannot. */
	inset-block-start: 0;
	pointer-events: none;
}

.mitode-infopop__btn {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: .55rem;
	transform: translateY(-50%);
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 32px drawn, but the row is 52px tall and the button is centred in
	   it, so the comfortable target is the full height of the row edge. */
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast-3);
	cursor: pointer;
	transition: background .15s var(--mitode-ease), color .15s var(--mitode-ease);
}
.mitode-infopop__btn:hover,
.mitode-infopop__btn[aria-expanded="true"] {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}
.mitode-infopop__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.mitode-infopop__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/*
 * THE PANEL SPANS THE ROW, WHICH IS WHY IT CANNOT OVERFLOW.
 *
 * A popover measured against the viewport needs JavaScript to keep it on
 * screen and gets it wrong the first time the row is inside a scrolling
 * container. Anchored left and right to the row it is by construction as
 * wide as something that already fits - at 320px that is 288px - and there
 * is no measurement to be wrong.
 */
.mitode-infopop__panel {
	position: absolute;
	inset-block-start: calc(100% + .35rem);
	inset-inline: 0;
	z-index: 30;
	pointer-events: auto;
	box-sizing: border-box;
	padding: .8rem .9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mitode-radius, 10px);
	background: var(--wp--preset--color--base);
	box-shadow: var(--mitode-shadow-card);
	color: var(--wp--preset--color--contrast-2);
	font-size: .8125rem;
	line-height: 1.5;
	text-align: start;
}
.mitode-infopop__panel p { margin: 0; }
.mitode-infopop__panel p + p { margin-block-start: .5rem; }

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

/* =====================================================================
 * W57 - THE APPLE PAY BUTTON WAS BEING CUT, TOP AND BOTTOM
 *
 * Seen in a 3x screenshot of the cart at 390: the wordmark on the black
 * express button is sliced. Measured, and it is 4px off each edge:
 *
 *   .wc-block-components-express-payment__event-buttons   h = 48.4  overflow: hidden
 *   .StripeElement (inside it)                            h = 56.4  top 4px ABOVE it
 *   the Stripe iframe                                     h = 56.4
 *
 * Stripe's own `__PrivateStripeElement` carries `margin: -4px 0`, so the
 * list item's content box is 8px shorter than the button it contains, and
 * WooCommerce's `overflow: hidden` on that list turns the overhang into a
 * crop. Neither side is wrong on its own; together they cut a payment
 * button in half a phase before launch.
 *
 * `overflow: visible` on that one container is the whole fix: the list has
 * no rounded corner of its own to protect - the button draws its own - and
 * the express row is the only child, so nothing else can now escape it.
 * Scoped to this theme's store pages.
 * ================================================================== */

.mitode-store-page .wc-block-components-express-payment .wc-block-components-express-payment__event-buttons,
.mitode-checkout .wc-block-components-express-payment .wc-block-components-express-payment__event-buttons {
	overflow: visible;
}

/* =====================================================================
 * W57 - THE DESKTOP CART HID ITS OWN CHECKOUT BUTTON
 *
 * Found by the acceptance sweep and then confirmed with a 1440x900
 * screenshot: the first screen of /warenkorb/ ends with the Apple Pay
 * button and has no "Weiter zur Kasse" at all.
 *
 * It is not merely below the fold. Measured at 1440x900, scrollY 0:
 *
 *   .wc-block-cart__submit-container   class ...--sticky   display none
 *   .wc-block-cart__submit-button      height 0
 *   after scrolling to y=400           class dropped, height 44.8, visible
 *
 * WooCommerce's own script adds `--sticky` whenever the button is outside
 * the viewport, so that narrow layouts can pin it to the bottom edge. Its
 * own stylesheet then does
 *
 *   @media (min-width: 783px) { .wc-block-cart .wc-block-cart__submit-container--sticky { display: none } }
 *
 * because on a desktop the button is supposed to be in a short sidebar that
 * is always on screen. Our sidebar is not short - it carries the free
 * shipping strip, the coupon panel, four totals rows and the express
 * checkout - so on a 900px-tall window the button starts at y=960, Woo
 * calls it "sticky", and the desktop rule then deletes the primary call to
 * action from the page until the customer scrolls.
 *
 * Asked of Chrome, that `display: none` is the ONLY declaration any rule
 * anywhere applies to `--sticky` - the class carries no position, no
 * bottom, no z-index. Undoing it therefore cannot produce a floating bar;
 * it only leaves the button in normal flow, where a customer finds it by
 * scrolling, like everything else on the page.
 * ================================================================== */

@media (min-width: 783px) {
	.mitode-store-page .wc-block-cart .wc-block-cart__submit-container--sticky {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * W61.1 - THE ORDER OF THE PAYMENT METHODS AT THE BLOCK CHECKOUT.
 *
 * The brief's order is Banküberweisung, Kredit- oder Debitkarte, Bitcoin,
 * with the transfer preselected. The SERVER already says exactly that -
 * /wc/store/v1/cart returns ["bacs","stripe","btcpaygf_default"] once
 * inc/payments.php has sorted the gateways. The block checkout ignores it:
 * it renders in the order the payment method types were REGISTERED on the
 * client, and Stripe registers itself first. Measured: card first, and
 * already selected.
 *
 * The list is a flex column here so `order` can put it right. The selectors
 * key on the radio's own value, not on a generated id, so a WooCommerce
 * release that renames the id does not silently undo this.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control > *:has(input[value="bacs"]) { order: 1; }
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control > *:has(input[value="stripe"]) { order: 2; }
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control > *:has(input[value="btcpaygf_default"]) { order: 3; }

/* The two card marks keep their own aspect ratio and sit left of the label. */
.wp-block-woocommerce-checkout-payment-block .mitode-pay-marks .mitode-pay-mark {
	height: 20px;
	width: auto;
	max-width: 42px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
 * W61.2 - ONE ROW: MARK, NAME, DELIVERY TIME, PRICE, INFO.
 *
 * The owner's shape, left to right:
 *
 *     [radio] [logo] Name   Lieferzeit   Preis   (i)
 *
 * On a desktop that is ONE line. Only a phone may break it, and then to two
 * lines at most.
 *
 * WHY `display: contents`. WooCommerce nests the parts two levels deep:
 * option-layout > label-group > (label, secondary-label) and, beside it,
 * description-group > description. So the name and the price are siblings of
 * each other but cousins of the delivery time, and no single grid can place
 * all three while those wrappers still generate boxes. `display: contents`
 * removes the two wrappers from the layout without removing them from the
 * DOM, and their children become items of one grid.
 *
 * That is a sharp tool: it also removes the wrappers as SELECTOR targets for
 * child combinators, so nothing here may use `>` through them. W53 learned
 * that the expensive way.
 *
 * COLOUR CARRIES ROLE. The name is body text, the delivery time is muted, the
 * price is the accent - three weights of attention in one line, which is what
 * makes the row scannable rather than merely dense.
 * ------------------------------------------------------------------ */

.wc-block-components-radio-control__option-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: .9rem;
	row-gap: .15rem;
	width: 100%;
	min-width: 0;
}
/*
 * BOTH WRAPPERS, AND WITH ENOUGH SPECIFICITY TO WIN.
 *
 * WooCommerce gives the description wrapper a second class,
 * `...__description-group--column`, and styles it `display: flex` at (0,2,0).
 * A single-class rule here is (0,1,0) and loses - measured: the GLS row stayed
 * 82 px tall with the delivery time on its own line while every other row had
 * already collapsed to one. Qualifying by the layout parent makes these (0,2,0)
 * and (0,3,0), which is enough.
 */
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__description-group,
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__description-group--column {
	display: contents;
}

/*
 * EVERY PART NAMES ITS ROW, NOT JUST ITS COLUMN.
 *
 * Grid places items in DOM order, and the DOM order here is name, PRICE,
 * delivery time - the price comes before the time. With only a column given,
 * the price took row 1 column 3, the auto-placement cursor moved past column 2,
 * and the delivery time was pushed onto row 2. Measured: label top=1350,
 * price top=1351, description top=1373 - one row lower, which is the 73 px
 * row the owner was still seeing.
 *
 * `grid-row: 1` on all three puts them on one line regardless of source order.
 */
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label {
	grid-row: 1;
	grid-column: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
}

/* Delivery time: muted, never wrapped, never the reason a row grows. */
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__description {
	grid-row: 1;
	grid-column: 2;
	white-space: nowrap;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast-2, #5a5a5a);
	margin: 0;
}

/* Price: the accent, hard right, one line. */
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__secondary-label {
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #d80019);
}
/* "Kostenlos" is good news, so it is the good-news colour, not the accent. */
.wc-block-checkout__shipping-option--free,
.wc-block-components-radio-control__secondary-label .wc-block-checkout__shipping-option--free {
	color: var(--wp--preset--color--success, #2f6b46);
	font-weight: 600;
}

/*
 * PHONES: two lines, and the second one carries the time and the price
 * together so the name keeps the full width of the first.
 */
@media (max-width: 700px) {
	.wc-block-components-radio-control__option-layout {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: .6rem;
	}
	/*
	 * ONE line for the name on a phone, so the row is two lines in total -
	 * name, then time and price. A two-line name plus that second row makes
	 * three, which the brief rules out; an ellipsis is the tidier way to lose
	 * the last few characters of a long carrier name.
	 */
	.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label {
		grid-row: 1;
		grid-column: 1 / -1;
		-webkit-line-clamp: 1;
	}
	.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__description { grid-row: 2; grid-column: 1; font-size: .8125rem; }
	.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__secondary-label { grid-row: 2; grid-column: 2; }
}

/*
 * The info button's gutter belongs to the button. `.mitode-infohost > label`
 * already reserves 2.5rem; the shipping rows are not inside an infohost, so
 * they reserve it here. Same number in both places, so the two kinds of row
 * line up with each other.
 */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
	padding-inline-end: 2.75rem;
}
/*
 * 2.75rem, not 2.5. The info button is 2rem wide and anchored to the row's
 * right edge; at 2.5rem the free-shipping label's right edge and the button's
 * left edge measured 0.8 px APART - touching, and overlapping as soon as a
 * price got one character longer. The quarter-rem is the gap between them.
 */
.mitode-infohost > label.wc-block-components-radio-control__option {
	padding-inline-end: 2.75rem;
}

/*
 * The mark strip's height and its responsive steps are emitted together by
 * mitode_store_marks_css(), because that block is added as an INLINE style
 * and would otherwise overwrite any :root value declared here.
 */

@media (max-width: 600px) {
	.wc-block-components-radio-control__label-group { gap: .4rem; }
	.wc-block-components-radio-control__label { font-size: .9375rem; }
	.wc-block-components-radio-control__secondary-label { font-size: .9375rem; }
}

/* At the narrowest, the mark keeps its place and the name gives way. */
@media (max-width: 380px) {
	.wc-block-components-radio-control__label { font-size: .875rem; }
	.wc-block-components-radio-control__secondary-label { font-size: .875rem; }
}

/* =====================================================================
 * W64 §5 - THE LABEL LEAVES THE BOX.
 *
 * Measured on /kasse/ before this block: Woo Blocks' floating label at rest
 * sits INSIDE the input, at 16px, in rgb(15,15,15) - and the value a customer
 * types is rgb(43,45,47). Two states of the same field, drawn the same. The
 * owner read every empty field as filled, and was right to.
 *
 * The label is pinned above the box instead of being animated into it. It
 * keeps its `for` attribute, its position in the DOM and its place in the
 * accessibility tree; only where it is DRAWN changes, which is the half that
 * was wrong.
 *
 * THE DOUBLED CLASS NAME IS NOT A TYPO.
 *
 * `.wc-block-components-text-input label` in WooCommerce's own stylesheet and
 * `.wc-block-components-text-input > label` here are both (0,1,1): a tie, and
 * a tie is decided by which stylesheet was printed last. The first version of
 * this block used the single class, and the measurement came back with the
 * label still 16px, still rgb(15,15,15), still inside the box - because
 * `wc-blocks-style` prints after `mitode-store`. Repeating the class makes it
 * (0,2,1) and the rule wins on its own merits rather than on an ordering this
 * theme does not control. The same lesson as the W9E seam reset; it is worth
 * not learning twice.
 * ================================================================== */
.wc-block-components-text-input.wc-block-components-text-input,
.wc-block-components-combobox.wc-block-components-combobox {
	margin-top: 1.6rem;
	position: relative;
}

/*
 * W65-A - `top` HAD TO BECOME !important, AND ONLY `top`.
 *
 * The block below moved the label out of the box and was measured doing it -
 * on an EMPTY field. The owner photographed a FILLED one, and a filled field
 * is a different selector:
 *
 *   .wc-block-components-form .wc-block-components-text-input.is-active label
 *                                                                    (0,3,1)
 *   .wc-block-components-text-input input:-webkit-autofill + label   (0,2,2)
 *   .wc-block-components-text-input.is-active label                  (0,2,1)
 *        ... all of them  { top: 6px; transform: scale(.82) }
 *
 *   .wc-block-components-text-input.wc-block-components-text-input > label
 *                                                                    (0,2,1)
 *
 * The doubled class was chosen to beat Woo's BASE label rule (0,1,1), and it
 * does. It does not beat the three above: two outrank it outright and the
 * third ties and loses on stylesheet order. `transform: none !important`
 * already neutralised half of the float - which is why nobody caught the
 * other half - but `top: 6px` went on applying, so the label slid back into
 * the box the instant the field gained a value or focus. Measured before this
 * change, at 1440 and 390:
 *
 *   empty            label above the box   top -21.6px
 *   focus            label INSIDE the box  top   6px
 *   filled           label INSIDE the box  top   6px
 *
 * That is every field, not only the e-mail one; the e-mail field is simply
 * the only one a signed-in customer arrives with already filled.
 *
 * Raising the class count to four would win too, but it would win only until
 * Woo adds a fourth class of its own. `!important` on the ONE property whose
 * value this theme owns says what is meant. `left`, `font-size` and `color`
 * stay ordinary - nothing in Woo's floated states touches them.
 */
.wc-block-components-text-input.wc-block-components-text-input > label,
.wc-block-components-combobox.wc-block-components-combobox > label {
	position: absolute;
	top: -1.35rem !important;
	left: 0;
	right: auto;
	bottom: auto;
	transform: none !important;
	transform-origin: top left;
	font-size: .8125rem;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: .01em;
	/*
	 * Muted, not black. The label is a caption for the box, and the darkest
	 * ink on the row has to belong to what the customer wrote.
	 */
	color: rgba(15, 15, 15, .68);
	padding: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	/*
	 * Woo animates the label on focus and on value change. Without this the
	 * label slides back into the box for the length of the transition every
	 * time the field is touched.
	 */
	transition: none !important;
}

/*
 * The input keeps ordinary vertical padding now that nothing shares the box
 * with it. Woo Blocks reserves the top of the field for the floated label
 * (`padding: 1.5em 16px .5em`), which left an empty band above every value
 * once the label moved out.
 *
 * W65-A - AND THE SAME THING HAPPENED TO THE PADDING.
 *
 * Woo re-pads the box for the label it thinks is inside it:
 *
 *   .wc-block-components-text-input.is-active input[type=email]      (0,2,2)
 *   .wc-block-components-text-input input:-webkit-autofill           (0,2,2)
 *        { padding: 24px 9px 8px }
 *
 * both of which outrank the (0,2,1) rule here. Measured before this change,
 * a filled e-mail field computed `24px 9px 8px 9px`: the value sat on the
 * floor of the box with an empty band above it - which is the second half of
 * what the owner's screenshot shows, under the misplaced label. Symmetric
 * padding is what this theme means in every state, so it says so.
 */
.wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-combobox.wc-block-components-combobox input {
	padding-top: .85em !important;
	padding-bottom: .85em !important;
}

/*
 * THE PLACEHOLDER IS A HINT AND MUST LOOK LIKE ONE.
 *
 * Woo Blocks hides placeholders while the label is floating (`opacity: 0`
 * until `is-active`), which is why the first measurement found none at all.
 * With the label outside the box the placeholder can be visible at rest - at
 * 45 % ink, far enough from the value colour that the two cannot be confused
 * and dark enough to read.
 */
.wc-block-components-text-input.wc-block-components-text-input input::placeholder,
.wc-block-components-combobox.wc-block-components-combobox input::placeholder {
	opacity: 1;
	color: rgba(15, 15, 15, .45);
	font-style: normal;
}

/*
 * The country and state selects carry their label the same way, and they are
 * not `.wc-block-components-text-input`.
 */
.wc-block-components-country-input.wc-block-components-country-input,
.wc-block-components-state-input.wc-block-components-state-input {
	position: relative;
	margin-top: 1.6rem;
}
.wc-block-components-country-input.wc-block-components-country-input > label,
.wc-block-components-state-input.wc-block-components-state-input > label {
	position: absolute;
	top: -1.35rem;
	left: 0;
	transform: none !important;
	transition: none !important;
	font-size: .8125rem;
	line-height: 1.2;
	font-weight: 500;
	color: rgba(15, 15, 15, .68);
	padding: 0;
	pointer-events: none;
}