/* WordPress owns the outer template wrappers; the SKLAD design system owns
   spacing inside the page. Keep core defaults from adding a second rhythm. */
.wp-site-blocks,
.wp-site-blocks > * {
  margin-block-start: 0;
}

.wp-site-blocks {
  padding: 0;
}

.wp-block-template-part {
  margin: 0;
}

/* The block layout reset above has the same specificity as the design-system
   overlay rule and loads later. Restate the overlap at the WordPress boundary
   now that the header itself is the template-part element. */
.wp-site-blocks > .header--overlay + *,
.wp-site-blocks > .header-checkout + * {
  margin-block-start: calc(var(--header-height) * -1);
}
/* .header-checkout is the checkout / order-confirmation header (#250). It is
   in normal flow like the full header, and .page-grid's padding-top counts
   --header-height on the assumption that <main> starts UNDER the header — so
   it needs the same pull-up, and it needs it here: a `.header-checkout + *`
   in components.css loses to the reset above on order alone (same
   specificity, this sheet loads later) — measured on staging 05.09.2026,
   main's margin stayed 0 and „Plaćanje" sat 120px under the header. */

/* There were two rules here that changed this margin again once .is-sticky was
   set, to compensate for the header leaving document flow when it pinned. The
   header is `position: sticky` and never `fixed`, so it does not leave flow and
   there is nothing to compensate for. What they produced instead was the jump
   they were written to prevent: .is-sticky is toggled by JS at the exact frame
   the header's top edge reaches 0, so the margin changed by one header height
   right at that boundary and the content stepped 56px while the page height
   moved 5243 <-> 5299. Scrolling across it flickered. The static frontend has
   no such rules and did not flicker.

   If a future header really is fixed, the compensation belongs with whatever
   makes it fixed, not keyed to a class that only carries colour state. */

/* Raw section patterns intentionally preserve the verified frontend markup. */
.wp-block-html {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.admin-bar .header.is-sticky {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .header.is-sticky {
    top: 46px;
  }
}
.sklad-page {
  padding-block: calc(var(--header-height) + var(--space-xxlarge)) var(--space-xxxlarge);
  padding-inline: var(--gutters-side);
}
.sklad-page > .wp-block-post-title { margin-bottom: var(--space-xlarge); }
.sklad-page .sklad-list-page { padding: 0; }
.sklad-page .sklad-list-page > .title { display: none; }

/* AJAX search reuses the verified search-empty component inside the query state. */
.header-search.has-query .search-results .search-empty:not([hidden]) { display: block; }

/* --------------------------------------------------------------------------
   PLUGIN AND WOO SEAMS

   These used to live in components.css, which meant that file differed from
   the frontend's copy and could not simply be synced. They belong here: this
   stylesheet is the theme's own and is never overwritten by the design system,
   so components.css can stay a byte-identical copy.
   -------------------------------------------------------------------------- */

/* Woo's block notice banner, wherever it appears.

   The static FE was built against Woo's old `.woocommerce-info` markup and
   styles it as .checkout-notice — white, hairline border, one sentence beside a
   small grey icon. WooCommerce 11 emits a block notice banner instead, which its
   own stylesheet paints information-blue with a 24px circle-i and loads after
   ours. Nothing in the design system matches that selector, so it comes through
   as raw Woo.

   This was first fixed scoped to the checkout's login and coupon prompts,
   because those were the two places anyone had looked at. The same banner then
   turned up on the account's Orders screen — Woo prints the "confirm your email
   to find past orders" notice through it — still blue, because the fix named
   two parents instead of the component.

   So it is unscoped now. Tone is kept rather than flattened: an error has to
   still read as an error, which the earlier scoped rule did not have to worry
   about because neither prompt it covered was ever anything but informational.
   */
.sklad-site .wc-block-components-notice-banner {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  margin: 0;
  padding: var(--space-medium);
  border: 1px solid var(--ui-100);
  border-left-width: 1px;
  border-radius: var(--space-xxsmall);
  background: var(--ui-00);
  color: var(--ui-800);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
}

/* Woo's icon is its own inline SVG at 24px, sized and coloured by the banner's
   tone. The design's icon is 20px in --ui-500 regardless of tone. */
.sklad-site .wc-block-components-notice-banner > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  fill: currentColor;
  color: var(--ui-500);
}

.sklad-site .wc-block-components-notice-banner__content {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Tone.

   Every rule here is prefixed with .sklad-site, the theme's own body class, and
   that is load-bearing rather than tidy. wc-blocks.css is enqueued AFTER
   wordpress.css — measured off document.styleSheets, it is the last sheet on
   the page — so matching Woo's two-class specificity only ties, and a tie goes
   to whoever comes last, which is Woo. The tone rules had in fact been losing:
   an error banner measured Woo's own rgb(255,240,240) on a rgb(204,24,24)
   border while this file said otherwise. One extra class settles it.

   All four are the same white panel now. The tint used to move per tone, which
   put a green band and a bordered white box on the same screen looking like two
   unrelated components. Tone moved to the icon below — the same rule
   .sklad-notice follows in components.css. */
.sklad-site .wc-block-components-notice-banner.is-info,
.sklad-site .wc-block-components-notice-banner.is-error,
.sklad-site .wc-block-components-notice-banner.is-success,
.sklad-site .wc-block-components-notice-banner.is-warning { background: var(--ui-00); border-color: var(--ui-100); }

/* Woo fills the icon: white glyph on a solid tone-coloured disc. The design's
   icon is a plain 20px mark in --ui-500 with nothing behind it. Undoing the disc
   needs the same two-class specificity as the rules that draw it. */
.sklad-site .wc-block-components-notice-banner.is-info > svg,
.sklad-site .wc-block-components-notice-banner.is-error > svg,
.sklad-site .wc-block-components-notice-banner.is-success > svg,
.sklad-site .wc-block-components-notice-banner.is-warning > svg {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
  fill: currentColor;
  color: var(--ui-500);
  transform: none;
}

/* And the mark is where the tone lives. Info and warning stay neutral: neither
   is an outcome, so neither has anything to report in colour. */
.sklad-site .wc-block-components-notice-banner.is-error > svg   { color: var(--status-error); }
.sklad-site .wc-block-components-notice-banner.is-success > svg { color: var(--status-success); }

/* Cart: the invalid-coupon banner rendered under the sticky header, not just
   behind it in the stacking order.

   sklad_render_cart_page() opens with do_action( 'woocommerce_before_cart' ),
   which is where woocommerce_output_all_notices() prints this banner — before
   .cart-items.page-grid even starts. That places it as the first child of the
   wrapper .wp-site-blocks > .header--overlay + * pulls up by --header-height
   to seat page-grid under the header. page-grid then pushes its own content
   back down with padding-top; the banner, printed one level above page-grid,
   never gets that compensation and sits exactly where the pinned header
   paints, one z-index behind it.

   Give it the same clearance page-grid gives its own content, so it lands
   where page-grid's first row would rather than under the header. */
.woocommerce-cart .wc-block-components-notice-banner {
  margin-top: calc(var(--header-height) + var(--space-xlarge-plus));
}

@media (min-width: 1024px) {
  .woocommerce-cart .wc-block-components-notice-banner {
    margin-top: calc(var(--header-height) + var(--space-xxlarge-plus));
  }
}

/* --- Account: nothing here yet ----------------------------------------------
   The Orders, Addresses and Downloads screens can all be empty, and Woo answers
   that with wc_print_notice() — the same bar it uses to say a coupon was
   applied. The theme replaces it with the cart's empty state so an empty account
   reads as a place to start from rather than a system message.

   The centring that used to live here is now the shared empty-state rule in
   components.css, which covers every one of these screens. `.account-empty`
   stays on the markup: it is what tells you which empty state you are looking
   at, and the account may yet need something the cart does not. */

/* WooCommerce prints this inline link without any of our link classes on it,
   so the selector Woo emits is the component. Matches .link's underline. */
.product-summary__description a {
  background-image: linear-gradient(
    transparent calc(100% - 1px),
    var(--link-underline-color, var(--ui-200)) 1px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
  transition: background-size var(--duration-fast) var(--ease-out);
}

.product-summary__description a:hover {
  background-size: 0% 100%;
  background-position: right;
}

/* --- Checkout headings ----------------------------------------------------
   Woo prints the section headings as bare <h3>. Only "Your order" carries
   .title-h6, because that one comes from the theme's own form-checkout.php —
   the other three are Woo's templates and arrive with no class at all, so
   they were rendering at body size and weight: 14px DM Sans where the design
   asks for 20px Sklad. The declarations are .title-h6's, restated
   against the selectors Woo emits rather than pushed into its templates,
   which would put three more overrides in the way of a WooCommerce update.
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-serif-condensed);
  font-size: var(--title-h6-size);
  line-height: var(--title-h6-lh);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
  font-variant-ligatures: no-contextual;
}

/* --- "Log in" and "Enter your code" ---------------------------------------
   The two prompts above the form end in a link Woo prints bare, so it read as
   plain text in the middle of a sentence — nothing said it could be clicked.
   Same underline as .link--underlined, on the selector Woo emits.
   -------------------------------------------------------------------------- */

.woocommerce-checkout .showlogin,
.woocommerce-checkout .showcoupon {
  color: var(--link-color, var(--ui-950));
  background-image: linear-gradient(
    transparent calc(100% - 1px),
    var(--link-underline-color, var(--ui-200)) 1px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
  cursor: pointer;
  transition: background-size var(--duration-fast) var(--ease-out);
}

.woocommerce-checkout .showlogin:hover,
.woocommerce-checkout .showcoupon:hover {
  background-size: 0% 100%;
  background-position: right;
}

/* --- The state field ------------------------------------------------------
   Woo swaps this one select for a select2 widget, which brings its own skin:
   24px tall with a #aaa hairline, standing among 44px fields with the design's
   own border. The widget is left in place — the country/state syncing is
   built on it — and given the geometry of the input it replaced.
   -------------------------------------------------------------------------- */

.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-account .select2-container .select2-selection--single {
  height: auto;
  min-height: 3.125rem;
  display: flex;
  align-items: center;
  padding: 15px var(--space-medium-plus);
  border: 1px solid var(--ui-100);
  border-radius: var(--radius-control);
  background-color: var(--ui-00);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--ui-800);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: var(--space-medium);
  transform: translateY(-50%);
  height: auto;
}

.woocommerce-checkout .select2-container--open .select2-dropdown,
.woocommerce-account .select2-container--open .select2-dropdown {
  border-color: var(--ui-100);
  border-radius: var(--radius-control);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
}

/* --- The account pages -----------------------------------------------------
   Woo prints some of these screens without going through woocommerce_form_field(),
   so the theme's field classes never reach them: the account details form came
   out in the browser's own controls — a 24px box with a 2px #767676 border —
   next to a checkout built from the design system. Restated against the markup
   Woo emits, for the same reason the checkout headings are.

   :not(.input) is doing real work, and was added after this block quietly
   started fighting the component it was standing in for. A control that HAS
   .input is the design system's to style; this file loads later, so without the
   guard its copy won it. Measured on the account login: the field's border came
   out --ui-100 where .input now says --ui-200, and its padding came out an even
   12px/16px where the floating label needs 20px above and 4px below — the label
   floated onto the value. Two properties drifted the moment .input moved, which
   is what a restatement does if you let it match the thing it duplicates.
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Input:not(.input),
.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:not(.input),
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:not(.input),
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:not(.input),
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:not(.input) {
  width: 100%;
  padding: 15px var(--space-medium-plus);
  border: 1px solid var(--ui-200);
  border-radius: var(--radius-control);
  background-color: var(--ui-00);
  color: var(--ui-800);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.woocommerce-account .woocommerce-MyAccount-content input:not(.input):hover { border-color: var(--ui-300); }
.woocommerce-account .woocommerce-MyAccount-content input:not(.input):focus-visible {
  outline: 2px solid var(--ui-950);
  outline-offset: 1px;
}

/* Woo's own button class, and the block theme's wp-element-button under it,
   both land on these forms as a slate-grey rectangle with square corners. */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: var(--button-offset-y) var(--button-offset-x);
  border: 1px solid transparent;
  border-radius: var(--space-xsmall);
  background-color: var(--ui-950);
  color: var(--ui-00);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
  background-color: var(--ui-700);
}

/* The address form is a 36rem column centred in the content, but the heading
   Woo prints above it is a plain h2 at the content's full width — so the
   label stood 248px to the left of the thing it labels. Same column, and the
   display face it should have had. */
.woocommerce-account .woocommerce-MyAccount-content form > h2,
.woocommerce-account .woocommerce-MyAccount-content > h2 {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  margin-block-end: var(--space-medium);
  font-family: var(--font-serif-condensed);
  font-size: var(--title-h6-size);
  line-height: var(--title-h6-lh);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--tracking-display);
}

/* --- My account: the two forms WooCommerce renders itself ------------------
   `form-edit-account.php` and `form-edit-address.php` are not overridden, and
   both submit through Woo's own `.button` — which this theme never styles,
   because every button it does render carries .sklad-button. So the two forms
   a customer actually fills in ended with an unstyled browser button.

   Restated here rather than by overriding the templates: those two carry the
   password fields and the country/state logic, and a copy of them is a copy to
   keep in step with WooCommerce for the sake of one element. */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"]:not(.sklad-button):not([class*="sklad-"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xsmall);
  width: max-content;
  min-height: 48px;
  padding: var(--space-small) var(--space-medium);
  border: 1px solid var(--ui-950);
  border-radius: var(--radius-control);
  background-color: var(--ui-950);
  color: var(--ui-00);
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-cubic),
              border-color var(--duration-fast) var(--ease-out-cubic);
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce-MyAccount-content .button:hover,
  .woocommerce-MyAccount-content button[type="submit"]:not(.sklad-button):not([class*="sklad-"]):hover {
    background-color: var(--ui-800);
    border-color: var(--ui-800);
  }
}

/* --- "Promena lozinke" -----------------------------------------------------
   Woo groups the password fields in a <fieldset><legend>. Left alone that is a
   browser default: a hairline box drawn around the group with the legend
   notched into its top edge, which is why the rule appeared to run through the
   heading rather than under it.

   The group is real and worth marking, so the border becomes a single rule
   above it and the legend becomes what it reads as — a section heading in the
   serif face, like every other heading on the site. */
.woocommerce-MyAccount-content fieldset {
  margin-block-start: var(--space-xxlarge);
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--ui-100);
}

.woocommerce-MyAccount-content fieldset legend {
  float: left;          /* Takes the legend out of the border notch. */
  width: 100%;
  padding: var(--space-xlarge) 0 var(--space-small);
  font-family: var(--font-serif-condensed);
  letter-spacing: var(--tracking-display);
  font-size: var(--title-h6-size);
  line-height: var(--title-h6-lh);
  color: var(--ui-950);
}

/* The float has to be cleared or the first form row sits beside the heading. */
.woocommerce-MyAccount-content fieldset legend + * { clear: both; }

/* The submit on the two forms a customer fills in runs the column.

   components.css:8810 already said so, and had been losing since the block
   above was written: that one is (0,4,1) against its (0,3,2) and it loads
   later, so `width: max-content` won and the button sat at 134px under a 576px
   column of fields. Restated here, after it, and scoped to those two forms so
   the order-action buttons elsewhere in the account keep sizing to their
   words.

   The leading .woocommerce-account is not decoration: it buys the fourth class
   that beats the (0,4,1) above. Coming later in the file is not enough. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields > p button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p button[type="submit"] {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   ORDER CONFIRMATION — the checkout thank-you page.

   The theme had no templates/order-confirmation.html, so WooCommerce fell
   back to its own plugin-supplied block template: a bare <main> whose
   template-part references carry no className, so the header loses every
   theme class, and the confirmation blocks get no theme styling at all.
   templates/order-confirmation.html now mirrors page-checkout.html — the
   same header/footer/site-overlays parts — and wraps Woo's confirmation
   blocks in .page-grid, the same clearance-and-gutters mechanism cart,
   checkout and the account pages already use.

   What follows styles that block output. .wc-block-order-confirmation-* is
   Woo's naming, not ours (rule 1), so it is the selector rather than
   something renamed or aliased. The FE reference at repo-root
   order-received.html was drawn against Woo's older classic thank-you markup
   (.woocommerce-order-overview, .shop_table) — components.css already carries
   a full pass for it, at "ORDER RECEIVED — the thank-you page", built for
   the account's View Order screen, which still renders that classic markup.
   The block-based confirmation template renders different classes for the
   same content, so matching the reference here means reusing its sizes,
   colours and rhythm — the same tokens .page-header, .title-h2 and
   .woocommerce-order-overview already spend — against Woo's block selectors,
   not reusing the classic selectors themselves. */

/* Every top-level confirmation block is a direct child of .page-grid and
   needs to say so explicitly: .page-grid is a real CSS grid, and a child that
   does not span every track only gets the width of one.

   Full width below the breakpoint, and the checkout's own measure above it.
   This page is the last screen of the checkout and reads as its continuation,
   so it takes the same column: 6 / 20, which is what #customer_details and
   #order_review span between them. At 1440 that is 755px against the 1312 it
   used to run to — the totals table was setting a two-column ledger across
   most of the window. */
.woocommerce-order-received .page-grid > [class*="wc-block-order-confirmation-"] {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .woocommerce-order-received .page-grid > [class*="wc-block-order-confirmation-"] {
    grid-column: 6 / 20;
  }
}

/* Vertical rhythm between sections. Woo's own blocks carry no gap of their
   own here — that is normally theme.json's job, which .page-grid's plain
   "default" layout does not opt into. */
.woocommerce-order-received .page-grid > [class*="wc-block-order-confirmation-"] + [class*="wc-block-order-confirmation-"] {
  margin-block-start: var(--space-xlarge);
}

/* Title and subtitle. Same measure as .page-header__title/.page-header__intro,
   restated rather than shared because Woo prints a plain <h1>/<p> with no
   class of its own to hang the utility classes on. */
.woocommerce-order-received .wc-block-order-confirmation-status h1 {
  margin: 0 0 var(--space-small);
  font-family: var(--font-serif-contrast);
  font-weight: var(--font-display-weight);
  font-size: var(--title-h2-size);
  line-height: var(--title-h2-lh);
  letter-spacing: var(--tracking-display);
  font-variant-ligatures: no-contextual;
  text-align: center;
  color: var(--ui-950);
}

.woocommerce-order-received .wc-block-order-confirmation-status > p {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
  text-align: center;
  color: var(--ui-600);
}

/* The door states. When the order cannot be shown — a guest after the
   ten-minute grace, or an account order opened logged out — WooCommerce
   prints the whole title as a bare <p>, which the rule above styles as the
   14px subtitle: the one instruction on the page was its smallest text
   (staging #1127/#1133, 06.09.2026, against the 68px h1 of the full page).
   The render filter in inc/woocommerce.php now emits it as the page's <h1>;
   alone in the block it takes the support band's measure rather than the
   thank-you's, and the paragraphs and the button under it get a rhythm. */
.woocommerce-order-received .wc-block-order-confirmation-status > h1:only-child {
  margin: 0;
  font-size: var(--title-h4-size);
  line-height: var(--title-h4-lh);
}

.woocommerce-order-received .wc-block-order-confirmation-status-description > p + p {
  margin-block-start: var(--space-small);
}

.woocommerce-order-received .wc-block-order-confirmation-status-description > .order-received__actions {
  display: flex;
  margin-block: var(--space-large) var(--space-medium);
}

/* The button spans the column like the verification form's submit next door
   (measured 06.09.2026 on production #1048 vs #1049: the submit filled the
   column, the account door's button shrank to its text and hung on the left
   of centred copy — the recipe's width: 100% loses to flex-item shrinking). */
.woocommerce-order-received .wc-block-order-confirmation-status-description > .order-received__actions > .sklad-button {
  flex: 1 1 100%;
}

/* After the link is sent the button gives way to a small „Pošalji ponovo"
   line — a form, because it posts — that sits where the button sat. */
.woocommerce-order-received .wc-block-order-confirmation-status-description > .order-received__resend {
  margin-block-start: var(--space-medium);
}

.woocommerce-order-received .wc-block-order-confirmation-status-description > .order-received__resend + p {
  margin-block-start: var(--space-small);
}

/* The confirmation page is short when it is only the verification form, and
   the footer floated with a band of white under it (Niko, 05.09.2026:
   „footer treba da bude zalepljen za dno"). The site wrapper becomes a
   column at least one viewport tall and <main> takes the slack, so the
   support band and the footer end at the bottom edge on a short page and
   simply follow the content on a long one. Scoped to the confirmation:
   the checkout is never short. */
.woocommerce-order-received .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.woocommerce-order-received .wp-site-blocks > main { flex: 1 0 auto; }

/* The email verification form. Since #288 a visitor who cannot be matched to
   the order (the order email opened in a fresh browser, after the ten-minute
   grace) gets this instead of a login wall. It is the Status block's own
   markup; a render filter in inc/woocommerce.php adds the theme's classes
   (field / input / sklad-button), so the checkout's field and button recipes
   from components.css apply here unchanged — nothing is restated. What is
   left to say is the frame: one narrow centred column, the account forms'
   measure (Niko, 05.09.2026: „centrirana u užem kontejneru"), and two things
   the recipes cannot reach — WooCommerce pins the field to width: 50% by id,
   and the submit is an <input>, so the button recipe's text span is not
   there to carry the font. */
.woocommerce-order-received .wc-block-order-confirmation-status-description {
  max-width: calc(438 * var(--design-ratio));
  margin-inline: auto;
  text-align: center;
}

.woocommerce-order-received .woocommerce-verify-email {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  margin-block-start: var(--space-large);
  text-align: start;
}

.woocommerce-order-received .woocommerce-verify-email .form-row { margin: 0; }

.woocommerce-order-received .wc-block-order-confirmation-status-description .woocommerce-verify-email #verify-email { width: 100%; }

.woocommerce-order-received .woocommerce-verify-email .sklad-button {
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
}

/* Order #, Date, Total, Email, Payment — the label/value grid, same shape and
   tokens as .woocommerce-order-overview (components.css), which is the same
   row of facts printed by the classic template the reference was drawn from. */
.woocommerce-order-received .wc-block-order-confirmation-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-medium) var(--space-large);
  margin: 0;
  padding: var(--space-medium-plus);
  background: var(--beige-100);
  border-radius: var(--space-xxsmall);
  list-style: none;
}

.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
  /* A grid item's min-width is its content, so a long address ran under the
     next column (staging #1136, 06.09.2026: a 242px email in a 155px cell). */
  min-width: 0;
  font-family: var(--font-sans-serif);
  font-size: var(--text-xsmall-size);
  color: var(--ui-600);
}

.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
  font-size: var(--text-medium-size);
  font-weight: var(--font-weight-medium);
  color: var(--ui-950);
  overflow-wrap: anywhere;
}

/* Section headings — Order details, Shipping/Billing address, Downloads,
   Additional information. Woo's own pattern already sets these at 24px
   inline; left alone rather than fought with !important, and given the same
   serif family and colour as .woocommerce-order-details__title.

   The size is stated here as well, because not every heading in this column
   is Woo's: „Podaci za uplatu" is the theme's own h2 (woocommerce_thankyou_bacs
   in inc/woocommerce.php), carries no inline style, and was rendering at the
   body's 14px under neighbours at 24 — measured on staging, 05.09.2026, on
   Niko's report. Same token the account's View Order titles use for the same
   look. Woo's inline 24px still wins on its own headings; the values agree. */
.woocommerce-order-received .page-grid h2.wp-block-heading {
  margin: 0 0 var(--space-medium);
  font-family: var(--font-serif-condensed);
  font-weight: var(--font-display-weight);
  font-size: var(--title-h6-size);
  line-height: var(--title-h6-lh);
  letter-spacing: var(--tracking-display);
  color: var(--ui-950);
}

/* The lines under the payment rows — the deadline, the email echo, the
   gateway's own instruction — are paragraphs the base reset leaves at margin
   0, so they sat on the beige panel's edge and on each other. */
.woocommerce-order-received .wc-block-order-confirmation-summary-list + p { margin-block-start: var(--space-medium); }
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information p + p { margin-block-start: var(--space-xsmall); }

/* Room before the support band. <main> ended exactly where the band's
   hairline began (measured: main bottom = band top), so the last block —
   the payment details, on a predračun order — touched it. The checkout
   solves the same edge under its order button; this is the confirmation's
   share of it. */
.woocommerce-order-received main.page-grid { padding-block-end: var(--space-xxlarge-plus); }

/* The line-items table. Same shape as .shop_table (components.css) — hairline
   rule under the head, right-aligned amounts, quiet header colour. */
.woocommerce-order-received .wc-block-order-confirmation-totals__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans-serif);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
}

.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
  padding-block: var(--space-small);
  text-align: left;
  font-weight: var(--font-weight-regular);
  vertical-align: top;
}

.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
  padding-block-end: var(--space-small);
  border-block-end: 1px solid var(--beige-200);
  color: var(--ui-500);
}

/* Row lines under items, matching .shop_table in components.css. */
.woocommerce-order-received .wc-block-order-confirmation-totals__table tbody tr td { border-block-end: 1px solid var(--beige-200); }

.woocommerce-order-received .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot td {
  border-block-end: 0;
}

.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot th {
  color: var(--ui-950);
  font-weight: var(--font-weight-medium);
}

/* Shipping and billing addresses. Same read as .woocommerce-customer-details
   address in components.css, restated because that rule is scoped to a
   wrapper class this block markup does not carry. */
/* Woo lays the two addresses out as core columns, which carry no gap of their
   own here for the same reason the sections above do not: theme.json's block
   gap is not in play inside .page-grid's plain layout. The two panels were
   touching, so delivery and invoice read as one block with a rule down the
   middle of it. The grid's own gutter is the spacing the rest of the page
   already uses between two columns. */
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
  gap: var(--gutters);
}

@media (max-width: 1023px) {
  /* Stacked, a horizontal gutter says nothing; the vertical one does. */
  .woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
    gap: var(--space-xlarge);
  }
}

.woocommerce-order-received .wc-block-order-confirmation-shipping-address address,
.woocommerce-order-received .wc-block-order-confirmation-billing-address address {
  font-style: normal;
  font-size: var(--text-medium-size);
  line-height: var(--text-paragraph-lh);
  color: var(--ui-800);
}

.woocommerce-order-received .wc-block-order-confirmation-shipping-address .woocommerce-customer-details--phone,
.woocommerce-order-received .wc-block-order-confirmation-shipping-address .woocommerce-customer-details--email,
.woocommerce-order-received .wc-block-order-confirmation-billing-address .woocommerce-customer-details--phone,
.woocommerce-order-received .wc-block-order-confirmation-billing-address .woocommerce-customer-details--email {
  margin: var(--space-small) 0 0;
  font-size: var(--text-medium-size);
  color: var(--ui-800);
}

/* --------------------------------------------------------------------------
   VIEW ORDER — the same order, seen from the account.

   It shows what the confirmation shows: the line items, the totals, and the
   two addresses. It was showing them in a different language — full account
   width, a plain unruled table, and the addresses stacked as two headings with
   no boxes — so the same order looked like two different documents depending
   on which door you came through.

   Woo renders classic markup here (.woocommerce-order-details, .col2-set) and
   block markup on the confirmation, so nothing can be shared by selector. What
   is shared is the measure, the border and the rhythm, restated against the
   classic classes in our own tokens rather than Woo's — the boxes on the
   confirmation come from WooCommerce's block stylesheet, at a hard-coded
   1px rgba(0 0 0 / 0.2) and 4px radius, which is close enough to --ui-200 and
   --radius-control that matching it by eye would have been a coincidence
   waiting to drift.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* The confirmation's measure, which is the checkout's. .my-account is the
     same .page-grid, so this is the same span, not a width that resembles it.
     Only the order screen: the other tabs are lists and forms that use the
     wider column deliberately. */
  .woocommerce-view-order .woocommerce-MyAccount-content { grid-column: 6 / 20; }
}

/* Section headings: the confirmation sets its h2 in the condensed display cut
   at 24px with 16px under it. Woo's classic titles carry their own classes. */
.woocommerce-view-order .woocommerce-order-details__title,
.woocommerce-view-order .woocommerce-column__title {
  margin: 0 0 var(--space-medium);
  font-family: var(--font-serif-condensed);
  font-weight: var(--font-display-weight);
  font-size: var(--title-h6-size);
  line-height: var(--title-h6-lh);
  letter-spacing: var(--tracking-display);
  font-variant-ligatures: no-contextual;
  color: var(--ui-950);
}

.woocommerce-view-order .woocommerce-customer-details { margin-block-start: var(--space-xlarge); }

/* The .woocommerce-table--order-details already carries the .shop_table class, so it inherits
   table styling from components.css. */

/* Two addresses, side by side, in the gutter the confirmation uses. */
.woocommerce-view-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xlarge);
}

@media (min-width: 1024px) {
  .woocommerce-view-order .woocommerce-columns--addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutters);
  }
}

.woocommerce-view-order .woocommerce-columns--addresses address {
  margin: 0;
  padding: var(--space-medium);
  border: 1px solid var(--ui-200);
  border-radius: var(--radius-control);
  font-style: normal;
  font-size: var(--text-medium-size);
  line-height: var(--text-paragraph-lh);
  color: var(--ui-800);
}

.woocommerce-view-order .woocommerce-columns--addresses .woocommerce-customer-details--phone,
.woocommerce-view-order .woocommerce-columns--addresses .woocommerce-customer-details--email {
  margin: var(--space-small) 0 0;
  font-size: var(--text-medium-size);
  color: var(--ui-800);
}

/* The actions in the orders table are links, not buttons.

   The design system draws them that way — account-orders.html sets View at
   31x19 on a transparent ground, underlining on hover, which is also why
   .woocommerce-button is in the link list in components.css. In WordPress they
   arrive carrying .button as well, because that is what WooCommerce puts on
   them, and the account form rule above then made each one a 48px filled
   rectangle. Three of those in one cell is more weight than the row it belongs
   to, and the hover ran two effects against each other: the fill darkened
   while the link rule drew its 1px underline inside it.

   Stated as an override rather than by excluding them from the rule above.
   Excluded, they fall through to WooCommerce's own wp-element-button — a slate
   rectangle with square corners, which is the very thing the account rule was
   written to cover. So the link has to be asked for, not merely left alone. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ui-950);
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-lh);
  font-weight: var(--font-weight-regular);
}

/* The hover is the underline the link rules already draw, and only that. */
@media (hover: hover) and (pointer: fine) {
  .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--ui-950);
  }
}

/* Several actions in one cell read as a list, not as a row of controls. */
.woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-medium);
}

/* Delivery rates from Site Core's sklad_delivery method carry a second line
   inside their label — what the service is, and from which basket value it is
   free — because the checkout's rate list prints the label and nothing else.
   A block so it wraps under the name rather than running on from the price. */
.sklad-shipping__note {
  display: block;
  margin-top: var(--space-xxsmall, 4px);
  color: var(--text-secondary);
  font-size: var(--text-xsmall-size);
  line-height: var(--text-xsmall-lh);
}

.sklad-shipping__free {
  font-weight: var(--font-weight-medium);
}

/* The basket's free-delivery thresholds, under the totals it refers to. */
.cart-total__note {
  margin: var(--space-xsmall) 0 0;
  color: var(--text-secondary);
}