/* ============================================================
   Carino Natural — woo-blocks.css
   T25: restyle the WooCommerce block cart and checkout.

   RESTYLE, NOT REBUILD. carino-project-context.md is explicit that
   rebuilding cart and checkout breaks tax, shipping and payment edge
   cases. Every selector below is a class WooCommerce itself emits;
   nothing here replaces Woo's markup, and no rule depends on the order
   or presence of a field. The class names were read out of the shipped
   stylesheets of the installed version — WooCommerce 11.0.0,
   assets/client/blocks/{cart,checkout,packages-style}.css — not
   guessed, and not copied from a tutorial.

   HOW TO READ IT
   Each block below names the prototype element it is reproducing, so
   carino-prototype.html stays the readable spec. The prototype's own
   class names (.line, .sum, .pick, .field, …) are already ported in
   main.css for the parts of the site we render ourselves; this file is
   the same design expressed against Woo's names. Values are restated
   rather than shared because most rules here also have to *undo* a
   WooCommerce default, which a shared selector list could not do.

   Same rules as the rest of the port: no literal colour, spacing,
   font-family or layout width — all from theme.json presets, plus the
   --brand / --hair / --ease aliases critical.css defines.

   SPECIFICITY
   WooCommerce ships long selector chains. Where a rule has to win, the
   selector deliberately mirrors Woo's own chain: equal specificity,
   and this sheet is enqueued after Woo's, so source order decides.
   Selectors that look redundant are load-bearing — see the notes.

   RESPONSIVE
   Woo sizes cart and checkout from *container* queries on
   .wp-block-woocommerce-cart / .wp-block-woocommerce-checkout, not
   viewport media queries. The two-column rules below use the same
   containers and the same 700px threshold, so the layout keeps one
   breakpoint contract instead of two that disagree.

   SCOPE
   Enqueued only on the cart and checkout pages (functions.php).
   ============================================================ */

/* ------------------------------------------------------------
   TWO-COLUMN SHELL — prototype .cart (1.6fr 1fr) and .co (1.4fr 1fr)

   Woo's sidebar layout is flex: main 65%, sidebar the remainder, with
   the gutter as padding-right on main. Only the proportions and the
   gutter change here.
   ------------------------------------------------------------ */
@container (min-width: 700px) {
	.wc-block-cart .wc-block-components-main {
		width: 61.5%; /* 1.6fr of 2.6fr */
		padding-right: var(--wp--preset--spacing--70);
	}
	.wc-block-cart .wc-block-components-sidebar {
		width: 38.5%;
	}

	.wc-block-checkout .wc-block-components-main {
		width: 58.3%; /* 1.4fr of 2.4fr */
		padding-right: var(--wp--preset--spacing--70);
	}
	.wc-block-checkout .wc-block-components-sidebar {
		width: 41.7%;
	}
}

/* --hdr-h (critical.css) + a 20px gap, the same figure main.css uses for
   .sum and .pdp__buy. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	top: calc(var(--hdr-h) + 20px);
}

/* ============================================================
   CART
   ============================================================ */

/* ------------------------------------------------------------
   LINE ROWS — prototype .line

   Woo renders the line items as a real <table>. The prototype has no
   column header, and neither does Woo below 700px; hiding the header
   row makes the two agree. Nothing is lost with it gone: every cell is
   self-describing (image, name, price), which is why Woo itself drops
   it on narrow screens.
   ------------------------------------------------------------ */
.wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header {
	display: none;
}

.wc-block-cart__main .wc-block-cart-items td {
	border-top: var(--hair);
	padding: var(--wp--preset--spacing--50) 0;
	vertical-align: top;
}

/* The 88px image column of the prototype's `88px 1fr auto` grid, plus
   the 16px gutter — the cell is border-box, so the padding has to be
   added on or the image comes out at 72px. The width lives on the cell
   because the <th> that used to carry it is now hidden. */
.wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__image {
	width: calc(88px + var(--wp--preset--spacing--40));
	padding-right: var(--wp--preset--spacing--40);
}

/* display:table-cell is load-bearing. Woo sets display:flex on this
   <td>, which takes it out of the table box model entirely — the row
   then ends at the middle column, an anonymous cell holds the price,
   and the row's top border stops dead two thirds of the way across.
   That was the short rule under the line item. Alignment moves to
   text-align, which a real cell honours.

   width:1px is the shrink-to-content idiom for a table cell: with
   nowrap the min-content width wins, and every remaining pixel goes to
   the middle column. Do NOT give that middle column width:100%
   instead — in auto table layout it outranks the image cell's fixed
   width and collapses the thumbnail to nothing. */
.wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__total {
	display: table-cell;
	width: 1px;
	text-align: right;
	white-space: nowrap;
}

/* prototype .line__img */
.wc-block-cart-items__row .wc-block-cart-item__image img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--wp--preset--color--paper-pure);
	border: var(--hair);
	border-radius: 2px;
}

/* prototype .line h4 — the display face, one step up from Woo's 14px */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	max-width: none;
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--damask);
}

/* prototype .line__meta — "Разфасовка: 150 гр" */
.wc-block-cart-items__row .wc-block-components-product-metadata {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}

/* The prototype's line carries a name, its pack size and the line
   total — nothing else. Woo adds two more things to the middle column:
   the unit price, which repeats the total at quantity 1 and competes
   with it above that, and the product's short description, which is a
   paragraph of marketing copy in a row the customer is scanning for
   numbers. Both go. The variation data ("Разфасовка: 150 гр") stays —
   that is the .line__meta line.

   NOTE: at quantity 3 the customer now sees 13,80 € without seeing
   4,60 € each. That is the prototype's call, not a side effect; worth
   revisiting in the T80 usability round. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata__description {
	display: none;
}

/* The stepper and "Премахни" stack in the prototype; Woo puts them on
   one row. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
}

/* prototype .line__rm — "Премахни"

   WooCommerce 11 renders this as an icon button: a 24px trash SVG and
   no text. The prototype has a small underlined word. The swap needs a
   Bulgarian string, and a stylesheet is the wrong place for one, so
   both halves of it — hiding the icon and printing the word — are
   emitted together by inc/block-checkout.php, which has the
   translatable string. Only the typography is here.

   The button keeps its own Bulgarian aria-label ("Премахни X от
   количка"), which is what assistive tech reads either way — generated
   content never becomes its accessible name. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: underline;
	width: auto;
	height: auto;
	line-height: 1.4;
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--damask);
}
/* prototype: "← Продължи с пазаруването" under the line items.
   Printed by inc/block-checkout.php — Woo's cart block has no such
   link, and the table's own bottom border is the prototype's <hr>. */
.cart__continue {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--sm);
}

/* prototype line price — ink, semibold, tabular */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
   QUANTITY STEPPER — prototype .qty

   Same control as assets/js/qty-stepper.js drives elsewhere, so the
   two look identical: 32px square buttons, a 36px hairline-flanked
   value, 2px corners.
   ------------------------------------------------------------ */
.wc-block-components-quantity-selector {
	width: auto;
	border: var(--hair);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	width: 32px;
	min-width: 32px;
	height: 32px;
	border-radius: 0;
	opacity: 1;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: .35;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: 0 0 auto;
	width: 36px;
	min-width: 36px;
	height: 32px;
	padding: 0;
	border-inline: var(--hair);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
   SUMMARY PANEL — prototype .sum

   The whole sidebar is the panel: totals, the free-shipping bar T25
   injects at the top of it, the checkout button and the trust line all
   sit inside one white card, as in the prototype.
   ------------------------------------------------------------ */
.wc-block-cart__sidebar {
	background: var(--wp--preset--color--paper-pure);
	border: var(--hair);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
}

/* Woo pads the sidebar's rows by 16px to clear a card that we have
   replaced with the panel above — otherwise everything is double-inset. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-coupon,
.wc-block-components-sidebar .wc-block-components-totals-item {
	padding-left: 0;
	padding-right: 0;
}

/* The prototype's rules are between the rows, not around the group. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
}
.wc-block-cart .wc-block-components-totals-wrapper {
	border-top: 0;
	padding: 0;
}

/* prototype .sum__row */
.wc-block-components-totals-item {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
}
.wc-block-components-totals-item__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

/* prototype .sum__row--tot */
.wc-block-cart .wc-block-components-totals-footer-item,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	border-top: var(--hair);
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: 0;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--lg);
}

/* prototype .btn--block.btn--lg. Fill, radius and weight already come
   from theme.json's button element styles — only the large size does not. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	padding: 1.125rem var(--wp--preset--spacing--60);
	font-size: 1rem;
}
.wc-block-cart__submit {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

/* inc/block-checkout.php prints the prototype's own .co__trust, which
   main.css already styles. Woo's terms line sits in the same place and
   says the same kind of thing, so it is given the same treatment. */
.wc-block-checkout__terms {
	font-size: var(--wp--preset--font-size--xs);
	text-align: center;
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Payment-method icons under the cart button: quiet, centred, small. */
.wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------
   CROSS-SELLS — prototype .xsell

   Woo renders three centred tiles in a 3-up grid under the line items.
   The prototype's cross-sell is a compact horizontal row. The children
   are pinned to explicit grid cells rather than flowed, so the layout
   does not depend on Woo's source order; `display:contents` on the
   wrapper Woo puts around the product body lets those children reach
   the grid.
   ------------------------------------------------------------ */
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 2px;
	align-items: center;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	border: var(--hair);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	text-align: left;
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div {
	display: contents;
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 2px;
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-cart-cross-sells-product__product-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
	grid-column: 2;
	grid-row: 2;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
	grid-column: 3;
	grid-row: 1 / span 2;
}
/* The prototype's "Добави" is a link, not a filled button — a filled
   one here would compete with "Към поръчката". */
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button__button {
	margin-top: 0;
	padding: 0;
	min-height: 0;
	background: none;
	box-shadow: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	white-space: nowrap;
}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-rating {
	display: none;
}

/* ============================================================
   CHECKOUT
   ============================================================ */

/* ------------------------------------------------------------
   NUMBERED STEPS — prototype .co__step / .co__n

   Woo already numbers its steps, with a CSS counter printed as plain
   text ("1. Contact") and only when the Checkout block's step-number
   option is on. The prototype's number is a filled brand disc, and it
   is not optional. Both are fixed by taking over the same
   pseudo-element with our own counter: when Woo's option is on this
   overrides its content, when it is off it supplies the numbering Woo
   was not going to print.

   The hook is `.wc-block-components-checkout-step`, NOT its
   `--with-step-number` modifier. The modifier is only added when that
   block option is on, and it defaults to off — keying on it meant the
   discs never rendered at all, which is exactly what the first deploy
   showed. Verified against the live DOM: the steps carry the base
   class only.

   Only steps with a title are numbered. The order-notes step is a
   plain div with no heading, so it never takes a number — which is
   correct, it is a checkbox, not a step.
   ------------------------------------------------------------ */
.wc-block-checkout__form {
	counter-reset: carino-step;
}

.wc-block-components-form .wc-block-components-checkout-step {
	margin-bottom: var(--wp--preset--spacing--70);
}

.wc-block-components-checkout-step__heading-container {
	margin-bottom: var(--wp--preset--spacing--50);
}

.wc-block-components-title.wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-checkout-step__title::before {
	counter-increment: carino-step;
	content: counter(carino-step);
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--on-brand);
	box-shadow: inset 0 0 0 1px var(--brand-edge);
	font-family: var(--wp--preset--font-family--body);
	font-size: .75rem;
	font-weight: 600;
	/* Undo Woo's absolute placement of the same pseudo-element. */
	position: static;
	transform: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Woo indents numbered steps and runs a vertical rule down the gutter
   when its own option is on. The prototype has neither. Kept keyed on
   the modifier, because these only exist when the modifier does. */
.wc-block-checkout__form .wc-block-components-checkout-step--with-step-number {
	padding: 0;
}
.wc-block-checkout__form .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before,
.wc-block-checkout__form .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before {
	content: none;
}

.wc-block-components-checkout-step__description {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------
   ONE „Данни за доставка" SECTION INSTEAD OF TWO

   Woo splits what the prototype shows as one step across two
   blocks, and the split is not movable: `addressFieldsLocations`
   puts `email` in `contact` and first name, last name and phone
   in `address`, core fields cannot change location, and the
   checkout's inner blocks are template-locked
   (docs/guest-checkout.md §7).

   So the two blocks are merged visually rather than structurally:
   the second heading goes, the gap between them closes, and the
   fields are reordered *within* the address block, where they are
   already flex siblings. Nothing crosses a block boundary, which
   is why this needs no `display: contents` and degrades to Woo's
   own order if a class name changes upstream.

   Read off the live DOM 14 Aug 2026: five titled steps, the
   address form is `display:flex` with a 12px column gap, and
   every field is a direct child carrying its own
   `__<key>` class.
   ------------------------------------------------------------ */

/* The heading is hidden from sight but kept for screen readers —
   `display:none` would drop the section boundary out of the
   accessibility tree and leave the address fields announced under
   the contact heading. */
.wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__heading-container {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* `content: none` suppresses the pseudo-element outright, so the
   counter never increments for this step. A clipped title would
   still have counted — the increment lives on the ::before, not
   on the step. This is what renumbers the rest: Данни за доставка
   1, Настройки за доставка 2, Начин на плащане 3.

   „Допълнителна информация за поръчката" keeps its visible
   heading and loses only the disc. Note this is the
   `additional-information` block — the `order-note` block below it
   has no title and was never numbered. */
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::before,
.wc-block-checkout__form .wc-block-checkout__order-fields .wc-block-components-checkout-step__title::before {
	content: none;
}

/* Close the seam so step 1 and the address fields read as one. */
.wc-block-components-form .wc-block-checkout__contact-fields {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   SAVED ADDRESS CARD

   A returning visitor — guest included, Woo keeps the address in
   the session — gets Woo's address card in place of the address
   form, with an „Редактиране" link that swaps the form back in.

   The card ships `margin: 0`, and every gap in this step comes
   from the *fields'* own `margin-top` (see TEXT FIELDS below).
   With the seam closed above, that left the card welded to the
   bottom of the Имейл input. Same top margin as a field puts it
   back on the section's rhythm.

   Scoped to `:not(.is-editing)` because in the editing state Woo
   parks the card wrapper at `position:absolute; top:0` behind the
   form; a margin there would only nudge an invisible box.

   The rest is skin: Woo draws the card at 4px with a
   currentColor-derived border, next to inputs that are 2px on
   `salt`. Matching them makes the card read as part of the field
   set instead of a stray panel.
   ------------------------------------------------------------ */
.wc-block-checkout__form .wc-block-components-address-address-wrapper:not(.is-editing) .wc-block-components-address-card-wrapper {
	margin-top: var(--wp--preset--spacing--40);
}
.wc-block-checkout__form .wc-block-components-address-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}
.wc-block-checkout__form .wc-block-components-address-card__edit {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------
   FIELD ORDER

   Target, matching the approved screenshots:

     Имейл                      (contact block, above)
     Име · Фамилия
     Телефон
     Град · Пощенски код
     Адрес

   Woo indexes phone at 100, i.e. last, so it has to move. Country
   and Област are gone — see below.

   FOUR classes deep on purpose, and the depth is load-bearing.
   Woo's own field widths live inside a `@media` block, so a
   two-class selector ties on specificity and loses on order. This
   was measured, not guessed: at two classes `flex` and `order`
   both silently kept Woo's values on the live page.
   ------------------------------------------------------------ */
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__first_name { order: 1; }
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__last_name  { order: 2; }
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__city       { order: 4; }
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__postcode   { order: 5; }
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_1  { order: 6; }
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2 { order: 7; }

/* Woo ships `phone` at `flex: 1 0 calc(50% - 12px)`, so left alone it
   pairs with Град and pushes Пощенски код onto a row of its own.
   The approved layout puts it on its own line, under the names. */
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__phone {
	order: 3;
	flex: 0 0 100%;
}

/* Област is removed server-side, by the BG locale filter in
   carino-speedy — NOT here. CSS-hiding it would keep its
   pre-filled `BG-22` and stamp „София" on a Варна order.

   The `order` is insurance, not layout: with no rule it defaults
   to 0 and jumps ahead of Име, which is exactly how the first
   deploy rendered when the field survived. If it ever comes back,
   it comes back at the bottom. */
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__state {
	order: 8;
}

/* Държава/Регион — hidden here and NOT through
   `woocommerce_default_address_fields`. A field hidden that way is
   pushed to the cart as an empty string (docs/guest-checkout.md
   §6.2), which would blank `BG` and leave nothing to rate shipping
   against. One pre-selected option; hiding it in CSS keeps the
   value in Woo's state. Област is the opposite case and goes
   through the filter, in the plugin — hiding it here would stamp
   „София" on a Варна customer's order. */
.wc-block-checkout__form .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__country {
	display: none;
}

/* ------------------------------------------------------------
   PICKUP — no street, no postcode

   `.carino-pickup` is set on the form by the Speedy picker script
   whenever a collection-point method is selected (Спиди офис/
   автомат or Box Now). Presentation only: the fields are already
   optional server-side, and a to-the-door order missing them is
   rejected at order creation, so a failure here costs two stray
   optional fields and never a bad order.

   Scoped to the shipping form on purpose — the billing form that
   appears when „Използвай същия адрес и за фактуриране" is
   unticked keeps everything it has.
   ------------------------------------------------------------ */
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__postcode,
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__city,
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2,
/* Woo's off-screen companion input for the collapsed address_2 —
   `position: absolute`, `aria-hidden`, `tabindex="-1"`. It costs no
   layout either way; it goes because there is no address_2 to
   collect at a collection point. */
.wc-block-checkout__form.carino-pickup .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2-hidden-input {
	display: none;
}

/* ------------------------------------------------------------
   GUEST NOTICE — prototype .guest

   Injected by inc/block-checkout.php above the contact step. Woo's own
   one-line "checking out as a guest" notice is hidden: it says less,
   in a place the prototype does not have, and two notices saying the
   same thing is worse than either.
   ------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

/* .guest itself is already ported in main.css — inc/block-checkout.php
   prints the prototype's own class name, so there is nothing to restate. */

/* ------------------------------------------------------------
   TEXT FIELDS — prototype .field

   Woo floats the label inside the input and slides it up on focus. The
   prototype puts a small bold label above the field and leaves it
   there. Turning the wrapper into a column and taking the label out of
   absolute flow does it without touching a single input's markup — the
   input keeps its id, its label keeps its `for`, and validation
   messages still land underneath.

   The doubled selectors are the .is-active state Woo adds once a field
   has a value: without them the label would jump back inside the box
   the moment someone types. [type] carries the same weight as Woo's
   [type=text] and friends, in one selector instead of six.
   ------------------------------------------------------------ */
.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-text-input {
	display: flex;
	flex-direction: column;
	line-height: inherit;
	white-space: normal;
	margin-top: var(--wp--preset--spacing--40);
}
.wc-block-components-text-input .wc-block-components-text-input__wrapper {
	display: flex;
	flex-direction: column;
}

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill + label,
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
	order: -1;
	position: static;
	transform: none;
	left: auto;
	top: auto;
	max-width: none;
	overflow: visible;
	white-space: normal;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-form .wc-block-components-text-input.is-active input[type],
.wc-block-components-text-input input[type],
.wc-block-components-text-input.is-active input[type] {
	height: auto;
	padding: .8125rem var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wc-block-components-form .wc-block-components-text-input.is-active input[type]:focus,
.wc-block-components-text-input input[type]:focus,
.wc-block-components-text-input.is-active input[type]:focus {
	border: 1px solid var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
	outline: none;
}

/* prototype .field small */
.wc-block-components-validation-error {
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 6px;
}

/* ------------------------------------------------------------
   SELECTS — prototype .field select

   Same conversion, plus one wrinkle: Woo's chevron is absolutely
   positioned and centred on the container, which stops being the
   select's box once the label moves above it. Placing container
   children on an explicit grid puts the chevron back in the select's
   own cell, centred, without a second asset or a background image.
   ------------------------------------------------------------ */
.wc-block-checkout__form .wc-blocks-components-select,
.wc-blocks-components-select {
	margin-top: var(--wp--preset--spacing--40);
}
.wc-blocks-components-select .wc-blocks-components-select__container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	background: none;
	line-height: inherit;
}
.wc-blocks-components-select .wc-blocks-components-select__label {
	grid-row: 1;
	position: static;
	left: auto;
	top: auto;
	max-width: none;
	overflow: visible;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}
.wc-blocks-components-select .wc-blocks-components-select__select {
	grid-row: 2;
	grid-column: 1;
	height: auto;
	padding: .8125rem var(--wp--preset--spacing--60) .8125rem var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border: 1px solid var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
	padding: .8125rem var(--wp--preset--spacing--60) .8125rem var(--wp--preset--spacing--40);
}
.wc-blocks-components-select .wc-blocks-components-select__expand {
	grid-row: 2;
	grid-column: 1;
	position: static;
	justify-self: end;
	align-self: center;
	margin-right: var(--wp--preset--spacing--30);
	transform: none;
	fill: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------
   SELECTOR ROWS — prototype .pick / .pick__opt / .pick__radio /
   .pick__price

   Delivery methods, shipping rates and payment methods are all the
   same Woo radio control. The prototype makes each option a separate
   bordered card with a gap; Woo draws one border around the group and
   hairlines between the rows. Those two ::after rules are what draws
   them, so they go, and the border moves onto the row.
   ------------------------------------------------------------ */
.wc-block-components-radio-control {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control .wc-block-components-radio-control__option::after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
	content: none;
}

.wc-block-components-radio-control .wc-block-components-radio-control__option {
	/* 16px inset + the 18px control + a 16px gap, as in .pick__opt */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40)
		var(--wp--preset--spacing--40)
		calc(var(--wp--preset--spacing--40) * 2 + 18px);
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	transition: border-color .15s var(--ease);
}
.wc-block-components-radio-control .wc-block-components-radio-control__option:hover {
	border-color: var(--wp--preset--color--ink-soft);
}
.wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--wp--preset--color--ink);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

/* prototype .pick__radio */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
	width: 18px;
	height: 18px;
	left: var(--wp--preset--spacing--40);
	/* Woo settles for translateY(-45%); the prototype's control is centred. */
	top: 50%;
	transform: translateY(-50%);
	border: 1px solid var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--paper-pure);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border: 1px solid var(--wp--preset--color--ink);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	width: 12px;
	height: 12px;
	background: var(--wp--preset--color--ink);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
	outline: 2px solid var(--wp--preset--color--damask);
	outline-offset: 2px;
}

/* prototype .pick__opt b / span / .pick__price */
.wc-block-components-radio-control .wc-block-components-radio-control__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-radio-control .wc-block-components-radio-control__description,
.wc-block-components-radio-control .wc-block-components-radio-control__secondary-description {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}
.wc-block-components-radio-control .wc-block-components-radio-control__secondary-label {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* Shipping rates arrive inside a "package" panel. With one package —
   which is every order this shop will take — the panel is a wrapper
   with nothing to say. */
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package {
	gap: var(--wp--preset--spacing--30);
	margin-bottom: 0;
}
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control .wc-block-components-radio-control__input {
	top: 50%;
	transform: translateY(-50%);
}

/* Payment methods put the row inside an accordion wrapper, so the card
   border belongs on the wrapper, not the row. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	transition: border-color .15s var(--ease);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--wp--preset--color--ink-soft);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wp--preset--color--ink);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	background: none;
	box-shadow: none;
}

/* The Delivery / Pickup switch, when local pickup is ever enabled. */
.wc-block-checkout__shipping-method-container {
	gap: var(--wp--preset--spacing--30);
}
.wc-block-checkout__shipping-method-option {
	border: 1px solid var(--wp--preset--color--salt);
	border-radius: 2px;
	background: var(--wp--preset--color--paper-pure);
	transition: border-color .15s var(--ease);
}
.wc-block-checkout__shipping-method-option--selected {
	border-color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}
.wc-block-checkout__shipping-method-option-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.wc-block-checkout__shipping-method-option-price {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
   ORDER SUMMARY ASIDE — prototype .sum with .xsell item rows
   ------------------------------------------------------------ */
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--paper-pure);
	border: var(--hair);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary {
	padding: 0;
}
.wp-block-woocommerce-checkout-order-summary-totals-block {
	border-top: 0;
	padding-bottom: 0;
}

/* prototype .xsell, in its read-only form: image, name + meta, price */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	border: var(--hair);
	border-radius: 2px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	width: 56px;
	margin-top: 0;
	padding-bottom: 0;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	width: 56px;
	max-width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 2px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	padding: 0;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	padding-top: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}
/* The quantity pill overlaps the thumbnail's top-right corner; on a
   56px image inside a bordered row it needs to stay inside the card. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	transform: translate(25%, -25%);
}