@charset "UTF-8";
/* the charset is declared because a rule below carries a Bulgarian word in a
   content string, and a stylesheet served without one is decoded by guess */
/*
  woo.css - the new design applied to the pages WordPress keeps.

  Loaded ONLY on the WordPress side (cart, checkout, order received,
  account). It is not part of the Astro bundle and not counted by the
  performance budget, because no visitor downloads it on a static page.

  It styles WooCommerce 6.3.2's own template markup, read from
  wp-content/plugins/woocommerce/templates/. Class names here are theirs,
  not ours: .shop_table, .form-row, .wc_payment_methods and friends.

  The theme dequeues WooCommerce's stylesheets, which means we also inherit
  responsibility for the UTILITY classes their templates emit.
  .screen-reader-text is the one that bites: without it every "hidden" label
  renders as visible text jammed against its input. That shipped once, on
  24.08.2026, and Haro caught it. It is defined below.

  About .payment_box, where tbi bank and UniCredit render their own panels:
  we do not touch their WORDS. The ГЛП and ГПР figures and the consent copy
  are regulated text and not ours to edit. We do lay them out, and until
  26.08.2026 we did not, which is a different thing from restraint. The panel
  had no top padding and shared the selected row's background, so every
  description sat flush against the label above it, and UniCredit's
  calculator inherited the browser's 1px table cell padding: a 22 character
  Bulgarian label wrapped to three lines two pixels from its own input. Haro
  called it collided and tight and both were literally true. Layout is ours,
  content is theirs.

  Every value comes from tokens.css, which the shell stylesheet already
  loads. No literal colours here.
*/

/* ---------------------------------------------- the bank panels' typefaces */

/* tbi asks for 'Inter' and UniCredit for 'Roboto Condensed' (24 times, with
   !important), and both fetched them from Google on every WordPress page. The
   theme stops both requests (functions.php, 18.09.2026); here the two names
   belong to the site's own font files, already in the visitor's cache, so the
   panels set in the page's typeface and not in the system's fallback. The
   plugins and their words stay exactly as they are. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/mont-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/mont-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/mont-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/mont-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/mont-600.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/mont-700.woff2') format('woff2'); }

/* ------------------------------------------------------------ utilities */

/* WooCommerce templates emit this on labels that must exist for screen
   readers but never be seen. Their stylesheet defines it; ours must too. */
.screen-reader-text,
.woocommerce .screen-reader-text {
  position: absolute !important;
  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;
}

/* ---------------------------------------------------------------- page */

.woo-page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-6) var(--s-3) var(--s-12);
}

.woo-page h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 var(--s-4);
  color: var(--ink);
}

.woo-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  align-items: center;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

.woo-steps li { display: flex; align-items: center; gap: var(--s-2); }
.woo-steps li + li::before { content: "›"; color: var(--line); }
.woo-steps [aria-current] { color: var(--ink); font-weight: 600; }

.woocommerce h2,
.woocommerce h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 var(--s-3);
  color: var(--ink);
}

/* ------------------------------------------------------------- controls */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap-min);
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font: 600 var(--fs-small)/1 var(--f-ui);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.woocommerce .button:hover { background: var(--paper-ice); border-color: var(--ink-faint); }
.woocommerce .button:active { transform: translateY(1px) scale(.99); }
/* WooCommerce's cart.js disables Обнови количката until a quantity changes.
   Without this it looked active while dead (found 10.09.2026). The same
   greyed state .btn[aria-disabled] has in base.css. */
.woocommerce .button:disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft);
                                cursor: default; pointer-events: none; transform: none; }

.woocommerce .button.alt,
.woocommerce #place_order,
.woocommerce a.checkout-button {
  background: var(--action);
  border-color: var(--action);
  color: var(--paper);
}

.woocommerce .button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce a.checkout-button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}

/* The one primary action on the page is allowed to be bigger than 44. */
.woocommerce #place_order,
.woocommerce a.checkout-button {
  width: 100%;
  height: 52px;
  font-size: var(--fs-body);
}

/* The place-order label is the law's wording since 23.09.2026, "Поръчка със
   задължение за плащане" (ЗЗП чл. 49, ал. 2; otherwise the customer is not
   bound). At 17px with 24px sides it needed 391px and the order column is
   350, so it wrapped even on a desktop; at the small step with 16px sides it
   takes 335 there and stays on one line. A phone's button is narrower than the
   words at any readable size, and the button already spans the row, so there
   the words take two centred lines instead of pushing the page 19px sideways,
   as they did. ui-audit.js exempts this one label from cta-wraps, and only it. */
.woocommerce #place_order {
  white-space: normal;
  height: auto;
  min-height: 52px;
  padding: 10px var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.25;
  text-align: center;
}

/* the line that opens the EU notice on the legal guarantee, above the order
   button (functions.php, perfect_checkout_guarantee_line; 23.09.2026) */
.woocommerce .perfect-guarantee { margin: 0 0 var(--s-1); font-size: var(--fs-small); }
.woocommerce .perfect-guarantee a { display: inline-flex; align-items: center; min-height: var(--tap-min);
                                    color: var(--action); font-weight: 600; text-decoration: none; }
.woocommerce .perfect-guarantee a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* where we deliver and how one can pay, under the cart's totals (ЗЗП чл. 49, ал. 4; 23.09.2026) */
.woocommerce .perfect-cart-terms { margin: var(--s-2) 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------------- forms */

.woocommerce .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--s-2);
  padding: 0;
}

.woocommerce .form-row label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
}

.woocommerce .form-row .optional { font-weight: 400; color: var(--ink-faint); }

/* The required mark is a mark, not an alarm. At full red beside every second
   label it was the loudest repeated element on the page, and on this form
   almost everything is required, so it was shouting the unexceptional. */
.woocommerce .form-row abbr.required {
  border: 0;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

/* Height is set, not min-height: a min-height plus vertical padding gave
   46px inputs sitting beside 44px buttons, which reads as a misfit. */
.woocommerce .input-text,
.woocommerce select {
  width: 100%;
  height: var(--tap-min);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.2 var(--f-ui);
}

.woocommerce textarea.input-text {
  height: auto;
  min-height: 112px;
  padding: 10px var(--s-2);
  line-height: var(--lh-body);
  resize: vertical;
}

.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: 2px solid var(--action);
  outline-offset: 1px;
  border-color: var(--action);
}

.woocommerce .input-text::placeholder { color: var(--ink-faint); }

/* The eye that shows the password. WooCommerce 11 appends a bare <button
   class="show-password-input"> to span.password-input (6.3.2 added an empty
   span, which painted nothing), so after the update of 02.10.2026 it was a grey
   lozenge under the login's password field (Haro's phone). It sits in the
   field's right end: woocommerce.js toggles .display-password and the input's
   type, and gives the field the focus back. The masks are icons.js's 'eye'
   and 'eye-off', and a test holds them to the table. */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .password-input .input-text { padding-right: var(--tap-min); }
.woocommerce .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce .show-password-input::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce .show-password-input.display-password::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}
.woocommerce .show-password-input:hover,
.woocommerce .show-password-input.display-password { color: var(--action); }
.woocommerce .show-password-input:focus-visible { outline: 2px solid var(--action); outline-offset: -6px; }

/* WooCommerce's checkout script marks a row whose field it finds empty or
   malformed on blur (woocommerce-invalid); nothing drew it until 17.09.2026, so
   a failed checkout was a list of sentences above a form with no mark on any
   field. The colour is the error colour the notices already use. */
.woocommerce .form-row.woocommerce-invalid .input-text,
.woocommerce .form-row.woocommerce-invalid select,
.woocommerce .form-row.woocommerce-invalid .select2-container--default .select2-selection--single,
.woocommerce .form-row.woocommerce-invalid .select2-container--default .select2-selection--multiple { border-color: var(--cut); }
.woocommerce .form-row.woocommerce-invalid > label { color: var(--cut); }

.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--s-2);
}

.woocommerce .woocommerce-billing-fields__field-wrapper > * { min-width: 0; }
.woocommerce .form-row-first { grid-column: 1; }
.woocommerce .form-row-last { grid-column: 2; }
.woocommerce .form-row-wide { grid-column: 1 / -1; }

/* --------------------------------------------------------------- tables */

.woocommerce .shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* No capitals and no tracking with them: the client asked for it by name on
   08.09.2026 and Haro extended it to the whole site the next day. woo.css was
   missed by that pass, so the cart, the checkout and the order page kept
   printing ПРОДУКТ and ОБЩО until 09.09.2026. Letter-spacing goes too, since it
   exists to open up capitals and only loosens lowercase. */
.woocommerce .shop_table th {
  text-align: left;
  padding: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--paper-ice);
  border-bottom: 1px solid var(--line);
}

.woocommerce .shop_table td {
  padding: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--ink);
}

.woocommerce .shop_table tbody tr:last-child td { border-bottom: 0; }

/* At 320px the checkout summary and the orders table were 10 and 11px wider
   than the screen. 16px of padding on both sides of every cell is what did
   it, so the smallest phones get 10px and the tables fit. */
@media (max-width: 360px) {
  .woocommerce .shop_table th,
  .woocommerce .shop_table td { padding: var(--s-1) 10px; }

}

/* ----------------------------------------------------------------- cart */

/* Table left, money right, both starting at the top. The default puts the
   total under a wide table where it competes with nothing and is read last,
   and it is the number the page exists to show. */
.woocommerce-cart .woocommerce:has(.cart-collaterals) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--s-4);
  align-items: start;
}

.woocommerce-cart .woocommerce-cart-form { min-width: 0; grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; }

/* WooCommerce prints a notices wrapper, usually empty, as the FIRST child of
   .woocommerce, ahead of the form. Auto placement gave it column 1, the table
   landed in column 2 and the totals fell to a second row, which is what Haro
   saw on staging on 11.09.2026. The preview mock had no such wrapper, so the
   preview never showed it (it does now). Anything that is not the form or
   the totals spans both columns, and an empty wrapper takes no row at all. */
.woocommerce-cart .woocommerce:has(.cart-collaterals) > :not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
.woocommerce .woocommerce-notices-wrapper:empty { display: none; }

/* the shipping choice inside the totals: a plain list of radios with their
   labels, on the money side, then the destination and the change link */
.woocommerce ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  justify-items: end;
}
.woocommerce ul.woocommerce-shipping-methods li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.woocommerce ul.woocommerce-shipping-methods input[type="radio"] { margin: 0; width: 18px; height: 18px; accent-color: var(--action); }
/* the label is the target: 44px tall, so a thumb lands on it (the audit read
   the radio and its label as a 26px row before this) */
.woocommerce ul.woocommerce-shipping-methods label { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-small); color: var(--ink); white-space: nowrap; cursor: pointer; }
.woocommerce .cart_totals .woocommerce-shipping-destination { margin: 4px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.woocommerce .cart_totals .shipping-calculator-button { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-small); font-weight: 600; color: var(--action); }

.woocommerce .cart th.product-thumbnail,
.woocommerce .cart td.product-thumbnail { width: 104px; }

.woocommerce .cart .product-thumbnail img {
  display: block;
  width: 88px;
  max-width: none;
  height: 88px;
  object-fit: contain;
  background: var(--img-bg);
  border-radius: var(--radius);
}

.woocommerce .cart .product-name a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce .cart .product-name a:hover { color: var(--action); text-decoration: underline; }

/*
  FIXED COLUMNS, so a number changing width cannot move the row around it.

  Haro, 27.08.2026: stepping the quantity from 1 to 2 turned 709,00 EUR into
  1 418,00 EUR and the table re-laid itself out around the wider figure, the
  price column sliding right to make room. An auto table sizes every column to
  the widest cell it currently holds, so ANY quantity change reflows the whole
  row. Nothing was broken; the layout was simply free to move, and a price that
  jumps sideways while you press a button reads as a glitch.

  Percentages rather than pixels, because the cart runs full width below
  1000px where fixed pixel columns would leave the product name 80px. Above
  640px only: below that WooCommerce's shop_table_responsive stops being a
  table at all and every cell becomes its own row.

  Sized for the widest figure this shop can produce. The dearest product is
  4 189,00 EUR, so a line subtotal reaches five figures at quantity three.
*/
/*
  SINCE 14.09.2026 THE LINE IS A GRID, sized to the FORM rather than the
  screen. The fixed table above measured 801px at its narrowest, whatever the
  percentages said, because the stepper and the prices will not shrink below
  their content. So it spilled out of its column wherever the form was
  narrower: over the totals card from 1001 to about 1255px, where the form
  shares the row with it (232px of overlap at 1024), and past the screen from
  641 to about 865px (72px sideways at 768). Nothing measured 1024 or 768.

  Now the form is a size container. At 800px of form and wider the line is one
  grid row: pixel tracks for every figure, so a number that changes width
  still cannot move the row, and the name takes what is left. Narrower, the
  line stacks the way it does on a phone (the block after the phone rules).

  In the grid the remove control goes LAST, by order, where the approved
  design had it (Haro, 14.09.2026: "the X is on the left side and I believe
  this is old design"). WooCommerce prints it first and the theme overrides no
  template; the header row takes the same tracks, so the columns line up.
*/
.woocommerce-cart .woocommerce-cart-form { container: cartform / inline-size; }

@container cartform (min-width: 800px) {
  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart > thead,
  .woocommerce table.shop_table.cart > tbody { display: block; }
  .woocommerce table.shop_table.cart tr {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 112px 160px 128px 60px;
  }
  .woocommerce table.shop_table.cart :is(th, td):not(.actions) {
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
  }
  .woocommerce .cart .product-thumbnail { order: 1; }
  .woocommerce table.shop_table.cart :is(th, td).product-name { order: 2; flex-direction: column; align-items: flex-start; justify-content: center; }
  /* a figure cell can hold two lines (the leva plugin prints a second amount on
     staging until launch), so its lines stack, right-aligned, inside the track;
     side by side they ran over the name and the stepper (Haro, 14.09.2026) */
  .woocommerce table.shop_table.cart :is(th, td).product-price { order: 3; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
  .woocommerce .cart .product-quantity  { order: 4; justify-content: center; }
  .woocommerce table.shop_table.cart :is(th, td).product-subtotal { order: 5; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
  .woocommerce .cart .product-remove    { order: 6; justify-content: center; }
  .woocommerce .cart .product-remove a.remove { flex: none; }
  .woocommerce .cart td.actions         { grid-column: 1 / -1; }
}

.woocommerce .cart .product-price,
.woocommerce .cart .product-subtotal { white-space: nowrap; text-align: right; }
.woocommerce .cart th.product-price,
.woocommerce .cart th.product-subtotal { text-align: right; }
.woocommerce .cart .product-subtotal { font-weight: 700; }

/* The dual-currency plugin (gb-woo-bgn-eur) appends " | 1,386.68 лв." to every
   price and made every price cell 230px wide on staging (11.09.2026). It goes
   off at launch (the project rules, Currency); while it is on, its second currency
   sits on its own quieter line so the tables keep their columns. Its separator
   is printed at zero size, the amount is not. */
.woocommerce .amount-bgn { display: block; font-size: 0; }
.woocommerce .amount-bgn bdi { font-size: var(--fs-small); font-weight: 400; color: var(--ink-soft); }

/* Remove is printed FIRST by WooCommerce and the theme ships no template
   override to move it. Since 14.09.2026 the grid above places it last in a
   wide form, and a stacked line places it last under the line's total, both
   by order. Centred in a narrow track it reads as a quiet control. */
.woocommerce .cart th.product-remove,
.woocommerce .cart td.product-remove { width: 60px; text-align: center; }

.woocommerce .cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-control);
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.woocommerce .cart a.remove:hover { background: var(--cut-wash); color: var(--cut); }

/*
  A stepper, not a spinner.

  A number input's own arrows appear on hover, are about 8px tall, and do not
  exist at all on a phone, so the only way to change a quantity was to select
  the text and retype it. Haro asked for real plus and minus buttons on
  26.08.2026 and he was right: this is the one control on the cart page that
  anybody actually uses.

  One joined group with a shared outline, so it reads as a single control
  rather than three. Both buttons are the full 44px.
*/
.woocommerce .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  overflow: hidden;
}

.woocommerce .quantity .qty-step {
  width: var(--tap-min);
  min-height: var(--tap-min);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 18px/1 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.woocommerce .quantity .qty-step:hover { background: var(--action-wash); color: var(--action); }
.woocommerce .quantity .qty-step:active { background: var(--action-wash); }
.woocommerce .quantity .qty-step:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }

.woocommerce .quantity .qty {
  width: 52px;
  height: var(--tap-min);
  padding: 0;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  font: 600 var(--fs-body)/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}
.woocommerce .quantity .qty:focus { outline: 2px solid var(--action); outline-offset: -2px; }

/* The spinners are replaced, so hide them rather than leave two ways to do
   the same thing at two different sizes. */
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.woocommerce .quantity .qty { -moz-appearance: textfield; appearance: textfield; }

/* Set when the Store API could not save a change: the figures on screen are
   ahead of the server, so the button that reconciles them stops being quiet. */
.woocommerce [data-unsaved="true"] {
  border-color: var(--action);
  background: var(--action-wash);
  color: var(--action);
}

/* The actions row: coupon on the left, update on the right, one line, one
   height. It was a float, which dropped the update button onto a second line,
   and the coupon field was allowed to grow to 1019px.

   The cell KEEPS its table-cell display and the flex row goes in a wrapper
   inside it. Setting display: flex on the td itself pulls it out of the table
   layout, so colspan stops spanning: the cell collapsed to 567px around
   content that needed 722px and the button wrapped again, which looked
   exactly like the float bug it replaced. */
.woocommerce td.actions {
  padding: var(--s-2);
  background: var(--paper-ice);
  border-top: 1px solid var(--line);
}

/* WooCommerce prints the coupon block and the update button as direct
   children of the cell, with no wrapper (the mock had one until 11.09.2026
   and the update button sat 0px under the input on staging), and the cell
   itself cannot be a flex box or its colspan stops spanning. So the coupon is
   an inline flex row, the update button floats to the right, and both carry
   a 4px vertical margin, which keeps 8px between the rows when the cell is
   too narrow for one line. */
.woocommerce td.actions::after { content: ''; display: block; clear: both; }

.woocommerce td.actions .coupon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  vertical-align: middle;
  margin: 4px var(--s-2) 4px 0;
}

.woocommerce td.actions > .button { float: right; margin: 4px 0; }

.woocommerce td.actions .coupon label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.woocommerce td.actions .coupon .input-text { width: 240px; }

.woocommerce .cart_totals {
  position: sticky;
  top: var(--s-2);
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
}

.woocommerce .cart_totals .shop_table { border: 0; border-radius: 0; }
.woocommerce .cart_totals .shop_table th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  padding-left: 0;
}
.woocommerce .cart_totals .shop_table td { text-align: right; padding-right: 0; }

/* Rows are wrapping flex rows at every width since 11.09.2026, not table
   cells: the card is 360px, the shipping choice (two radios with labels kept
   whole) needs 200px beside a 105px label, and as table cells that made the
   table 362px and the page scroll 3px sideways. As flex items the choice drops
   under its label when it must and the card never grows. These rules lived in
   the phone block until then, where they had been written for the same reason
   at 301px. */
.woocommerce .cart_totals .shop_table tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
                                           gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.woocommerce .cart_totals .shop_table th,
.woocommerce .cart_totals .shop_table td { display: block; padding: 0; border: 0; }
.woocommerce .cart_totals .shop_table th { flex: 0 1 auto; min-width: 0; }
.woocommerce .cart_totals .shop_table td { flex: 0 0 auto; max-width: 100%; margin-left: auto; font-size: var(--fs-small); }
.woocommerce .cart_totals .shop_table td::before { content: none; }
/* the row carries the total's rule, and the row above gives up its own so
   the two do not double */
.woocommerce .cart_totals .shop_table tr.order-total { border-top: 1px solid var(--line); padding-top: var(--s-2); border-bottom: 0; }
.woocommerce .cart_totals .shop_table tr:has(+ tr.order-total) { border-bottom: 0; }
.woocommerce .cart_totals .shop_table tr.order-total td { font-size: 22px; font-weight: 700; color: var(--ink); }
.woocommerce .wc-proceed-to-checkout { margin-top: var(--s-3); }

/* The number the page exists to show. */
.woocommerce .order-total th,
.woocommerce .order-total td {
  border-top: 1px solid var(--line);
  padding-top: var(--s-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
}

/* --------------------------------------------------------- empty states */

/* An empty cart is a normal outcome, not an alert. It gets a real empty
   state with a way forward, not a coloured notice bar. */
.woocommerce .cart-empty {
  margin: 0 0 var(--s-3);
  padding: var(--s-6) var(--s-3);
  background: var(--paper-ice);
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  text-align: center;
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce .cart-empty::before { content: none; }
.woocommerce .return-to-shop { text-align: center; margin: 0; }

/* ------------------------------------------------------------- checkout */

/*
  THE CHECKOUT.

  Haro, 26.08.2026: it did not look like a premium platform. Screenshotted and
  he was right, and the reasons were specific rather than a matter of taste:

  1. THE FORM SPRAWLED. The left column was 875px, so "Име" was a 440px box.
     A field far wider than anything anyone will type into it reads as a form
     that was never laid out. Every checkout worth copying constrains this to a
     comfortable measure, and so does this one now.
  2. THE TWO COLUMNS SPOKE DIFFERENT LANGUAGES. The summary sat in a card and
     the form floated loose on the page beside it, so the page looked like one
     designed thing next to one undesigned thing.
  3. THE SUMMARY WAS A DATA TABLE. Uppercase, letter-spaced ПРОДУКТ and ОБЩО
     headers over two columns that need no labels, and product names running to
     five lines each, which pushed the total, the thing the page exists to
     show, off the bottom of the card.

  What it is NOT: a redesign of WooCommerce's markup. Every class here is
  still theirs.
*/

/* Explicit rows. With auto placement the review column was pushed to row 2
   and started level with the BOTTOM of the billing form, which read as an
   unrelated block appearing halfway down the page. */
/* Above the checkout form WooCommerce prints "Имате купон?" as a notice with
   a link, and a coupon form its own script reveals by setting an inline
   display, so the row is laid out through the children, never the form. */
/* Both sit above form.checkout, which is a centred grid of a 620px column and
   a 400px one, so they take that same track instead of the full width of the
   page: measured at 1425 on 14.09.2026, the notice ran from 24 to 1386 while
   the columns under it ran from 171 to 1239, which Haro read as a box bigger
   than the fields on either side. The sentence keeps the form column's
   measure. */
.woocommerce .woocommerce-form-coupon-toggle,
.woocommerce form.checkout_coupon {
  width: 100%;
  max-width: calc(620px + 400px + var(--s-6));
  margin-inline: auto;
}
.woocommerce .woocommerce-form-coupon-toggle { margin-bottom: var(--s-3); }
.woocommerce form.checkout_coupon { margin-bottom: var(--s-4); }
.woocommerce form.checkout_coupon > p:first-child { max-width: 620px; margin: 0 0 var(--s-2); font-size: var(--fs-small); color: var(--ink-soft); }
.woocommerce form.checkout_coupon .form-row { display: inline-block; vertical-align: middle; margin: 0 var(--s-2) var(--s-2) 0; width: auto; }
.woocommerce form.checkout_coupon .input-text { width: 240px; max-width: 100%; }

/* WooCommerce's country and region selects are selectWoo (select2) widgets on
   the server, 28px tall in the browser's grey (staging, 11.09.2026). Dressed as
   our field: 44px, our border and radius, the site's type; and the list it
   opens, which select2 appends to body, outside .woocommerce. */
.woocommerce .select2-container--default .select2-selection--single {
  height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 36px 0 var(--s-2);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: normal; color: var(--ink); font-size: var(--fs-body); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--tap-min); right: 8px; }
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-wash); }
.select2-container--default .select2-dropdown { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-raise); font-family: inherit; overflow: hidden; }
.select2-container--default .select2-results__option { padding: 10px var(--s-2); font-size: var(--fs-small); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--action); color: var(--paper); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; font: inherit; }

/* The team preference at the checkout is a selectWoo multi-select
   (functions.php, 14.09.2026): the same 44px field, each chosen person a chip
   in the brand's wash with its own round x, the empty field reading "Без
   предпочитание" as a value, and a face beside each name in the list, the head
   where the portraits put it (20% down the crop). A chosen row in the list is
   the wash too, and choosing it again takes it off. With no script the field is
   the plain multiple select, so it gets its rows back from the height above. */
.woocommerce select[multiple] { height: auto; padding: 4px; }
.woocommerce .select2-container--default .select2-selection--multiple {
  min-height: var(--tap-min);
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.woocommerce .select2-container--default.select2-container--focus .select2-selection--multiple,
.woocommerce .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-wash); }
/* THE CHEVRON (22.09.2026, Haro on staging: "it is dropdown but there isn't arrow to
   signal dropdown"). select2 draws an arrow for a single select only. This is the one
   our own Select draws (src/components/Select.astro): Lucide's chevron-down from
   src/lib/icons.js at 18px with a 1.8px stroke, in --ink-faint, turning over and taking
   the accent while the list is open. A mask, so its colour is a token. It sits on the
   first row (a 44px field) and the chips keep 40px clear of it. */
.woocommerce .select2-container--default .select2-selection--multiple { position: relative; padding-right: 40px; }
.woocommerce .select2-container--default .select2-selection--multiple::after {
  content: '';
  position: absolute;
  top: calc(var(--tap-min) / 2 - 1px);
  right: 12px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--ink-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.woocommerce .select2-container--default.select2-container--open .select2-selection--multiple::after { transform: rotate(180deg); background: var(--action); }
@media (prefers-reduced-motion: reduce) {
  .woocommerce .select2-container--default .select2-selection--multiple::after { transition: none; }
}
.woocommerce .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
/* A chip wraps its name inside itself rather than run past the field:
   "Станислав Йорданов" was 233px in a 220px field at 320 (14.09.2026), and
   select2 sets the row nowrap. */
.woocommerce .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  padding: 4px 12px 4px 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--action-wash);
  color: var(--action);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 24px;
}
.woocommerce .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 0;
  border-radius: var(--radius-control);
  color: var(--action);
  font-size: 18px;
  font-weight: 400;
}
.woocommerce .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: var(--paper); color: var(--action); }
/* select2 writes the search box's width inline, 0.75em beside the chips, so
   the audit measured a 13px control; it takes the rest of the row instead. */
/* and margin 0: select2.css gives every row item 5px on top, which made the empty field 49px,
   not 44, and put its text 5px under the chevron (measured 22.09.2026) */
.woocommerce .select2-container--default .select2-selection--multiple .select2-search--inline { flex: 1 1 var(--tap-min); min-width: var(--tap-min); margin: 0; }
.woocommerce .select2-container--default .select2-search--inline .select2-search__field {
  width: 100% !important;
  height: 32px;
  margin: 0;
  padding: 0 4px;
  color: var(--ink);
  font: 400 var(--fs-body)/1.2 var(--f-ui);
}
.woocommerce .select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--ink); opacity: 1; }
.woocommerce .perfect-team-note { color: var(--ink-soft); font-size: var(--fs-small); }
#select2-perfect_team-results { max-height: 288px; }
/* selectWoo, WooCommerce's select2, marks a chosen row data-selected and gives aria-selected
   only to the highlighted one, so with the aria rule alone a chosen row showed select2's grey
   #ddd instead of the wash (seen 22.09.2026 with WooCommerce's own selectWoo loaded) */
.select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted),
.select2-container--default .select2-results__option[data-selected=true]:not(.select2-results__option--highlighted) { background: var(--action-wash); color: var(--action); font-weight: 600; }
.perfect-team-option { display: flex; align-items: center; gap: 10px; }
.perfect-team-option img {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  object-fit: cover;
  object-position: 50% 10%;   /* the crown sits at 10% of every portrait (scripts/build-team-photos.py) */
  background: var(--paper-ice);
}

/* The notices above the form take the same track as the two columns under it,
   or a message about a coupon is a box wider than the page's own content
   (Haro, 14.09.2026: "this is bigger than the upper box"). */
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce > .woocommerce-error,
.woocommerce-checkout .woocommerce > .woocommerce-info,
.woocommerce-checkout .woocommerce > .woocommerce-message {
  width: 100%;
  max-width: calc(620px + 400px + var(--s-6));
  margin-inline: auto;
}

.woocommerce form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 400px);
  grid-template-rows: auto auto 1fr;
  gap: 0 var(--s-6);
  align-items: start;
  justify-content: center;
}

/* WooCommerce prepends its validation group INSIDE the form (checkout.js), so
   it is a grid item: it takes a row of its own across both columns. The row is
   `auto`, so it is 0 tall and changes nothing while there is no notice. */
.woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
.woocommerce #customer_details { grid-column: 1; grid-row: 2 / span 2; min-width: 0; }
.woocommerce #order_review_heading { grid-column: 2; grid-row: 2; margin: 0 0 var(--s-2); }
.woocommerce #order_review { grid-column: 2; grid-row: 3; min-width: 0; }

/* Both columns are cards, so neither looks like an afterthought beside the
   other. The form's is quieter: it is where the work happens, not where the
   money is. */
.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-additional-fields {
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.woocommerce .woocommerce-billing-fields > h2,
.woocommerce .woocommerce-additional-fields > h2 {
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}

.woocommerce #order_review {
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  /* It follows you down the page. On a checkout the summary is the reason to
     keep going, and scrolling away from the total to fill in a postcode is how
     a customer loses track of what they are agreeing to. */
  position: sticky;
  top: var(--s-3);
}

.woocommerce .woocommerce-checkout-review-order-table { border: 0; border-radius: 0; }
/*
  Rows are flex rows of their own, not table cells (25.09.2026): the cart
  totals' pattern of 11.09.2026, for the same reason. As a table, the widest
  thing in the right-hand column set it for every row, and that was the
  delivery choice (two radios with labels kept whole, about 200px), so a
  product's name had 150px of the 350px card and its lines ended at
  "Инверторен климатик..." (Haro: "It doesn't show the name"). Now the price
  takes what it needs and the name the rest, about 260px on a desktop, and the
  delivery choice drops under its label on a phone too narrow for both. The
  rules sit on the rows, so the gap between two cells cannot break one.
*/
.woocommerce .woocommerce-checkout-review-order-table,
.woocommerce .woocommerce-checkout-review-order-table :is(tbody, tfoot) { display: block; }
.woocommerce .woocommerce-checkout-review-order-table tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: var(--s-2);
}
.woocommerce .woocommerce-checkout-review-order-table :is(th, td) { display: block; border: 0; }
.woocommerce .woocommerce-checkout-review-order-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
.woocommerce .woocommerce-checkout-review-order-table tfoot :is(tr:first-child, tr.order-total) { border-top: 1px solid var(--line); }
.woocommerce .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { align-items: center; }
/*
  No column headers. Two columns, one of them obviously a product and the
  other obviously a price, do not need ПРОДУКТ and ОБЩО set in uppercase
  letter-spaced small caps above them. They were the loudest thing in the card.
*/
.woocommerce .woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce .woocommerce-checkout-review-order-table td { text-align: right; padding: var(--s-2) 0; vertical-align: top; }
.woocommerce .woocommerce-checkout-review-order-table td.product-name {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink);
}
/* Three lines, then stop. These are full technical product names and one of
   them ran to five lines, which is most of a summary card spent on a string
   the customer has already chosen. It was two until 25.09.2026, when the name
   had 150px and two lines ended before the brand; at the width the row gives
   it now, every name in the catalogue fits three (median 69 characters, the
   longest 98), so the clamp only catches an outlier to come. */
.woocommerce .woocommerce-checkout-review-order-table td.product-name .name-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce .woocommerce-checkout-review-order-table .product-total { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The quantity is a fact about the line, not part of the product's name. */
.woocommerce .woocommerce-checkout-review-order-table .product-quantity {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-control);
  background: var(--paper-ice);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.woocommerce .woocommerce-checkout-review-order-table tfoot th {
  flex: 0 1 auto;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-soft);
  background: transparent;
  padding: 10px 0;
  border-bottom: 0;
}
.woocommerce .woocommerce-checkout-review-order-table tfoot td {
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
  padding: 10px 0;
  border-bottom: 0;
  font-variant-numeric: tabular-nums;
  /* "Безплатна доставка" broke over two right-aligned lines, which read as a
     mistake rather than as a value. It fits on one; it was only wrapping
     because nothing told it not to. */
  white-space: nowrap;
}

/* The total is the anchor of the page. It should not be the same size as the
   shipping line above it. */
.woocommerce .woocommerce-checkout-review-order-table tfoot .order-total th { color: var(--ink); font-weight: 600; }
.woocommerce .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 22px; font-weight: 700; color: var(--ink); }

/* payment methods: one pressable row each */

.woocommerce .wc_payment_methods {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/*
  THE ROW IS A GRID, and it has to be.

  WooCommerce emits the three children as siblings:

      <li> <input type="radio"> <label> <div class="payment_box"> </li>

  Making the label `display: flex` to line up its own contents turned it into a
  block, so the inline radio was pushed onto a line of its own ABOVE the label
  and every method read as a stray dot with a heading under it. Haro's
  screenshot on 26.08.2026. The fix is to stop styling the children and give
  the ROW the layout: radio and label share the first line, the panel takes the
  full width underneath.
*/
.woocommerce li.wc_payment_method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.woocommerce li.wc_payment_method:last-child { border-bottom: 0; }

.woocommerce li.wc_payment_method > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce li.wc_payment_method > input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0 var(--s-2);
  accent-color: var(--action);
  flex: none;
}

/* The panel is the second row and spans both columns. */
.woocommerce li.wc_payment_method > .payment_box { grid-column: 1 / -1; }

.woocommerce li.wc_payment_method > label img { max-height: 22px; width: auto; }
.woocommerce li.wc_payment_method:has(input:checked) { background: var(--action-wash); }

/*
  The bank panel.

  We do not touch the gateway's WORDS: the ГЛП and ГПР figures and their
  wording are regulated and belong to the bank. We do have to lay them out.
  Haro, 26.08.2026: "when you select the payment method the text collides and
  it's tight". Measured, and he was right on both counts:

    - `padding-top: 0` put the description's first line flush against the
      bottom of the label. Gap measured 0px on all four gateways.
    - the panel and the selected row carried the SAME background, so there was
      nothing at all to separate a heading from its body.

  The panel is now its own surface inside the row, with a rule above it and
  real breathing room.
*/
.woocommerce .payment_box {
  /* Indented to sit under the method it belongs to, but only by the radio's
     own width: the full label indent cost 36px of a 300px panel. */
  margin: 0 var(--s-2) var(--s-2) calc(var(--s-2) + 20px);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2);
  border-left: 2px solid var(--action);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-soft);
}

.woocommerce .payment_box p:first-child { margin-top: 0; }
.woocommerce .payment_box p:last-child { margin-bottom: 0; }
.woocommerce .payment_box p { max-width: 68ch; }

/*
  The UniCredit calculator, which was the worst of it.

  Its markup is a bare table that inherited the browser's 1px cell padding, so
  every label sat two pixels from the control beside it. Splitting the width
  55/45 did not save it either: the payment column of the checkout is 420px by
  design (form left, order summary right), which leaves the panel about 300px,
  and at that width a 22-character Bulgarian label still wrapped.

  So it stops being laid out as five fields. Read what it actually contains:
  ONE control, the loan term, and FOUR figures the bank calculates. A figure is
  not something you fill in, so it loses its box and becomes a right-aligned
  value on the same line as its label. Only the select keeps a field's
  appearance, and it takes the full width because it is the one thing to press.
*/
.woocommerce .payment_box table {
  width: 100%;
  margin: var(--s-2) 0 0;
  border-collapse: collapse;
  /* Fixed, so the columns obey the split below. Left to `auto`, an <input>
     brings its own default width of about twenty characters, takes 215 of the
     300 available pixels and squeezes every label into three lines. */
  table-layout: fixed;
}
.woocommerce .payment_box table td { padding: 6px 0; vertical-align: middle; }
.woocommerce .payment_box table tr + tr > td { border-top: 1px solid var(--line-soft); }
.woocommerce .payment_box table td:first-child { width: 56%; padding-right: var(--s-2); color: var(--ink-soft); }
.woocommerce .payment_box table td:last-child { width: 44%; text-align: right; }

.woocommerce .payment_box input,
.woocommerce .payment_box select {
  max-width: 100%;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The four figures: values, not fields. No box, because there is nothing to
   fill in, and a box invites a tap that does nothing. */
.woocommerce .payment_box input[readonly] {
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-weight: 700;
  font-size: var(--fs-body);
}

/* The one thing to press keeps a control's appearance. 16px, not the
   inherited 15px: iOS zooms the whole page when a field under 16px takes
   focus, and doing that mid-checkout is how a customer loses their place. */
.woocommerce .payment_box select {
  width: 100%;
  height: var(--tap-min);
  padding: 0 var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 16px;
  text-align: left;
}

.woocommerce .form-row.place-order { margin: var(--s-3) 0 0; }
/* The data-protection notice sits directly above the order button, so it
   is the last thing read before a purchase. Small step, not micro. */
.woocommerce .woocommerce-privacy-policy-text {
  max-width: 62ch;
  margin: 0 0 var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- notices */

/* A dot, not a coloured bar down the left edge. The bar is a stock tutorial
   pattern and Haro called it out on sight. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  position: relative;
  display: block;
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 8px + var(--s-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-rest);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink);
  list-style: none;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: calc(var(--s-2) + var(--fs-small) * var(--lh-small) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* A failed checkout prints a LIST, one message per field. The notice was a flex
   row, so five messages became five columns and ran out of their own box (Haro,
   14.09.2026). They are lines now, and the row the notice used to need for its
   dot is a pinned circle instead. */
.woocommerce-error > li:not(.perfect-notice-close-item),
.woocommerce-message > li:not(.perfect-notice-close-item),
.woocommerce-info > li:not(.perfect-notice-close-item) { margin: 0; }
.woocommerce-error > li + li:not(.perfect-notice-close-item),
.woocommerce-message > li + li:not(.perfect-notice-close-item),
.woocommerce-info > li + li:not(.perfect-notice-close-item) { margin-top: var(--s-1); }
/* WooCommerce puts its "see the cart" button first inside the message. Every
   add to cart on this site lands ON the cart, where a button to the cart is
   noise; and floated in a notice of one line, the 44px pill hung out of the
   box and over its lower edge (Haro's screenshot, 18.09.2026). On the cart it
   is gone. Anywhere else the message is its own formatting context, so the
   float stays inside, and the pill is pulled up by half the difference so its
   middle sits on the first line like the dot and the close control. */
.woocommerce-cart .woocommerce-message > .wc-forward { display: none; }
.woocommerce-message { display: flow-root; }
.woocommerce-message > .button {
  float: right;
  margin: calc((var(--fs-small) * var(--lh-small) - var(--tap-min)) / 2) 0 0 var(--s-2);
}

/* Closed by hand, never on a timer: assets/notices.js adds the control and the
   class, so the room for it is only taken where it is. */
.perfect-notice { padding-right: calc(var(--s-3) + var(--tap-min)); }
.perfect-notice-close-item { list-style: none; }
/* Centred on the first line, which on a notice of one line is the middle of
   the notice, and on a list of messages is the line the eye starts at. Its
   centre sits as far from the right edge as the dot's does from the left. */
.perfect-notice-close {
  position: absolute;
  top: calc(var(--s-2) + var(--fs-small) * var(--lh-small) / 2 - var(--tap-min) / 2);
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.perfect-notice-close:hover { background: var(--paper-ice); color: var(--ink); }
.perfect-notice-close:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.woocommerce-info::before { background: var(--action); }
.woocommerce-message::before { background: var(--ok); }
.woocommerce-error::before { background: var(--cut); }

/* ------------------------------------------------------- order received */

/*
  The receipt. Haro, 17.09.2026: "looks like an excel page". WooCommerce prints
  a notice, four facts, the gateway's block and the order table at full width;
  this is a receipt's width, the tick and the thanks in the middle, the facts
  band, our "how to pay" card (functions.php, perfect_received_bacs) and the
  order summary without the grid. The page's own h1 ("Получена поръчка") says
  what the thanks say, so it stays for the reader who cannot see and goes for
  the one who can.
*/
.woocommerce-order-received .woo-page > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.woocommerce .woocommerce-order { max-width: 720px; margin: 0 auto; }

.perfect-received-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: var(--s-2) auto var(--s-3);
  border-radius: var(--radius-control);
  background: var(--ok-wash);
  color: var(--ok);
  animation: perfect-pop 360ms var(--ease) both;
}
.perfect-received-mark svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: perfect-draw 420ms var(--ease) 220ms forwards;
}
@keyframes perfect-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes perfect-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .perfect-received-mark { animation: none; }
  .perfect-received-mark svg path { animation: none; stroke-dashoffset: 0; }
}

.woocommerce .woocommerce-thankyou-order-received {
  max-width: none;
  margin: 0 0 var(--s-4);
  text-align: center;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
/* what happens next (the office calls within the working day), under the thanks and
   inside the same paragraph, because WooCommerce gives no hook between the two */
.woocommerce .woocommerce-thankyou-order-received .perfect-received-next {
  display: block;
  max-width: 52ch;
  margin: var(--s-2) auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink-soft);
}

/* Two facts to a row at a receipt's width: four columns put "17 септември 2026"
   on two lines (17.09.2026). */
.woocommerce .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  list-style: none;
  background: var(--paper-ice);
  border-radius: var(--radius);
}
.woocommerce .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
}
.woocommerce .woocommerce-order-overview li strong {
  font-size: var(--fs-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* How to pay: the card a bank transfer customer reads, the one thing on this
   page that asks something of them. */
.woocommerce .perfect-pay {
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-rest);
}
.woocommerce .perfect-pay-title { margin: 0 0 var(--s-1); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.woocommerce .perfect-pay-lead { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.woocommerce .perfect-pay-facts { display: grid; gap: 0; margin: var(--s-3) 0 0; }
.woocommerce .perfect-pay-facts > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.woocommerce .perfect-pay-facts dt { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.woocommerce .perfect-pay-facts dd { margin: 0; font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.woocommerce .perfect-pay-facts strong { font-weight: 700; }
.woocommerce .perfect-pay-code { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.woocommerce .perfect-pay-iban dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.woocommerce .perfect-copy {
  min-height: var(--tap-min);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--action);
  font: 600 var(--fs-small)/1 var(--f-ui);
  cursor: pointer;
}
.woocommerce .perfect-copy:hover { border-color: var(--action); }
.woocommerce .perfect-copy.is-done { border-color: var(--ok); color: var(--ok); }
@media (max-width: 640px) {
  .woocommerce .perfect-pay-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* The order summary: a receipt's lines, not a spreadsheet. The generic
   shop_table rules give every heading cell a grey ground; not here. */
.woocommerce .woocommerce-order-details__title { margin: 0 0 var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.woocommerce table.shop_table.woocommerce-table--order-details { width: 100%; margin: 0 0 var(--s-4); border: 0; border-collapse: collapse; }
.woocommerce table.shop_table.woocommerce-table--order-details th,
.woocommerce table.shop_table.woocommerce-table--order-details td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink);
}
.woocommerce table.shop_table.woocommerce-table--order-details th:last-child,
.woocommerce table.shop_table.woocommerce-table--order-details td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table.woocommerce-table--order-details thead th { padding-top: 0; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-faint); }
.woocommerce table.shop_table.woocommerce-table--order-details tfoot th { font-weight: 600; color: var(--ink-soft); }
.woocommerce table.shop_table.woocommerce-table--order-details tfoot td { font-weight: 600; }
.woocommerce table.shop_table.woocommerce-table--order-details tfoot td:last-child { white-space: normal; }
.woocommerce table.shop_table.woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--ink-soft); }
.woocommerce table.shop_table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.shop_table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- account */

/* The two columns exist only for a signed-in visitor, who has the navigation.
   Signed out, WooCommerce prints the notices wrapper, a heading and the login
   form, and a grid would spread those across the columns. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--line-soft); }

.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-2);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { background: var(--paper-ice); color: var(--ink); }

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--action-wash);
  color: var(--action-deep);
  box-shadow: inset 3px 0 0 var(--action);
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
/* signed out: the login form and the lost password form, at a reading width */
.woocommerce form.woocommerce-form-login,
.woocommerce form.lost_reset_password { max-width: 440px; }
.woocommerce form.woocommerce-form-login .form-row { margin: 0 0 var(--s-2); }
.woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-2); }
.woocommerce form.woocommerce-form-login .lost_password { font-size: var(--fs-small); }
/* Each ends in its one action, so that is the primary button at full width, the
   way the checkout ends: "Влизане" and "Нулиране на парола" were the plain white
   control, which on a white page reads as switched off (Haro's phone, 02.10.2026). */
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce form.lost_reset_password button.button {
  width: 100%;
  height: 52px;
  border-color: var(--action);
  background: var(--action);
  color: var(--paper);
  font-size: var(--fs-body);
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce form.lost_reset_password button.button:hover { border-color: var(--action-hover); background: var(--action-hover); }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; max-width: 62ch; }
.woocommerce .woocommerce-orders-table td.woocommerce-orders-table__cell { white-space: nowrap; }
/* ...except the total, which may break after its amount ("2 814,04 €" / "за 3 продукта"):
   all five columns whole made the table 763px, and with the account menu beside it at 1024,
   or alone at 768, the page scrolled sideways and "Виж" was cut off (24.09.2026) */
.woocommerce .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { white-space: normal; }
.woocommerce .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .amount { display: block; white-space: nowrap; }
/* Order-number and Виж are the only way into an order, so they are controls
   at full size, not table decoration. */
.woocommerce .woocommerce-orders-table td a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--action);
  font-weight: 600;
}

/* WooCommerce's checkboxes (ship elsewhere, the terms, remember me) were the
   browser's 13px boxes on staging. The enquiry form's 22px box with the brand
   accent, inside the label row WooCommerce already wraps them in, 44px tall. */
.woocommerce input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--action); }
.woocommerce .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); cursor: pointer; }
.woocommerce .woocommerce-form__label-for-checkbox > span { font-size: var(--fs-small); }

/* The price a line costs, once. The client's Advanced Dynamic Pricing stays on for its
   gift rule (free anti-vibration pads with one category, since 08.04.2024), and its
   show_striked_prices prints the regular price struck through beside the sale price in
   the cart and in the checkout's summary: <del>1 300,00 €</del> <ins>1 110,00 €</ins>, the
   <ins> underlined by the browser. Haro on the live site, 24.09.2026: "scratched on 3
   places". The product page already shows the reduction; here the line says what it costs,
   as it did on staging, where that plugin was off. WooCommerce itself puts no <del> in
   these cells, so nothing else is hidden. */
.woocommerce-cart-form :is(.product-price, .product-subtotal) del,
.woocommerce-checkout-review-order-table .product-total del { display: none; }
.woocommerce-cart-form :is(.product-price, .product-subtotal) ins,
.woocommerce-checkout-review-order-table .product-total ins { text-decoration: none; }

/* --------------------------------------------------------------- phone */

@media (max-width: 1000px) {
  .woocommerce-cart .woocommerce:has(.cart-collaterals),
  .woocommerce form.checkout,
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--s-4);
  }
  .woocommerce form.checkout > .woocommerce-NoticeGroup,
  .woocommerce #customer_details,
  .woocommerce #order_review_heading,
  .woocommerce #order_review,
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; grid-row: auto; }
  .woocommerce .cart_totals { position: static; }
}

@media (max-width: 640px) {
  .woo-page { padding: var(--s-4) var(--s-2) var(--s-8); }

  .woocommerce .woocommerce-billing-fields__field-wrapper,
  .woocommerce .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
  .woocommerce .form-row-first,
  .woocommerce .form-row-last { grid-column: 1; }

  /* shop_table_responsive: WooCommerce puts the column name on every cell
     as data-title, precisely so the table can stop being a table. */
  .woocommerce .shop_table_responsive thead { display: none; }

  .woocommerce .shop_table_responsive tbody tr {
    display: flex;
    flex-direction: column;
    padding: var(--s-2);
    border-bottom: 1px solid var(--line-soft);
  }

  /* The label and the value share a row and BOTH have to be able to give.
     Without min-width and wrapping, a stacked row's minimum width is the
     label plus the whole value on one line, which is how the account orders
     table came out 315px wide inside a 288px column at 320px and took the
     page 11px sideways. Found 26.08.2026. */
  .woocommerce .shop_table_responsive tbody td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px var(--s-2);
    padding: 6px 0;
    border: 0;
    text-align: right;
    min-width: 0;
  }
  .woocommerce .shop_table_responsive tbody td > * { min-width: 0; }

  .woocommerce .shop_table_responsive tbody td::before {
    content: attr(data-title);
    min-width: 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--ink-faint);
    text-align: left;
  }

  /* An order's total is two flex items, wc_price's amount span and the words after it, and
     space-between set them apart across the row ("2 814,04 €      за 3 продукта"). They stay
     together on the right; the label alone takes the free space (24.09.2026). */
  .woocommerce .shop_table_responsive tbody td.woocommerce-orders-table__cell-order-total { justify-content: flex-end; column-gap: 0.3em; }
  .woocommerce .shop_table_responsive tbody td.woocommerce-orders-table__cell-order-total::before { margin-right: auto; padding-right: var(--s-2); }
  .woocommerce .shop_table_responsive tbody td.woocommerce-orders-table__cell-order-total .amount { display: inline; }

  /* product-name is display:block, so its label is an inline box with nothing to
     separate it, and it ran straight into the name: "ПродуктИнверторен климатик".
     In capitals it at least read as a label; sentence case made it one word, which
     is how Haro caught it on 09.09.2026. It goes, like the two below it: a
     photograph of an air conditioner above its own model number does not need the
     word Продукт over it, and the th is still in the DOM for anything reading the
     table as a table. */
  .woocommerce .shop_table_responsive tbody td.product-name::before,
  .woocommerce .shop_table_responsive tbody td.product-remove::before,
  .woocommerce .shop_table_responsive tbody td.product-thumbnail::before { content: none; }
  .woocommerce .cart td.product-thumbnail { justify-content: flex-start; }
  .woocommerce .cart td.product-name { display: block; text-align: left; }
  /* width: auto, because the desktop rule above fixes this cell at 60px for its
     one glyph, and on a phone the cell is a row of its own: at 60px the labelled
     control below was squeezed to the cell and its word spilled out to the left */
  .woocommerce .cart td.product-remove { width: auto; justify-content: flex-end; order: 9; }
  /* On a phone the × was a bare glyph under the line's total: its column header
     is gone and its label went with the thumbnail's, so nothing said what it
     did (Haro, 09.09.2026: "one X staying into the nothing"). The control now
     says so. The word lives here rather than in a template because WooCommerce
     builds this link itself, and the aria-label already names it for a reader;
     this is only the visible half. */
  .woocommerce .cart a.remove { width: auto; gap: 6px; padding: 0 14px 0 12px;
                                border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600;
                                color: var(--ink-soft); }
  .woocommerce .cart a.remove::after { content: "Премахни"; }

  /*
    The actions box on a phone, 10.09.2026, from Haro's screenshot: the label,
    the field and both buttons were four full-width rows 8px apart, and the two
    buttons read as one thing. The coupon is one row now, the field beside its
    button, each taking the full width only when 320 leaves no room for both;
    and Обнови количката sits 24px under it on its own, because it is a
    different act. (The old first rule set flex-direction on the td, which is
    not a flex box; the wrapper inside it is.)
  */
  /* text-align: left, because the generic cell rule above right-aligns every
     td on a phone and this one holds a label. Written with the same selector
     as that rule plus the class, or it loses on specificity, which it did. */
  .woocommerce .shop_table_responsive tbody td.actions { padding: var(--s-3) var(--s-2); text-align: left; }
  .woocommerce td.actions .coupon { display: flex; margin: 0 0 var(--s-3); }
  .woocommerce td.actions .coupon { flex-wrap: wrap; gap: 12px; }
  .woocommerce td.actions .coupon label { flex: 1 1 100%; }
  /* A definite width, then flex grows it. A text input's own min-content is
     about 20 characters, 244px at 17px, and a table cell honours that even
     inside a flex row, so the whole cart table came out 19px wider than a 320
     screen and the page scrolled 3px (10.09.2026). With width set, the sizing
     pass uses 150 and the field still fills the row. */
  .woocommerce td.actions .coupon .input-text { width: 150px; flex: 1 1 auto; }
  .woocommerce td.actions .coupon .button { flex: 1 0 auto; }
  .woocommerce td.actions > .button { float: none; width: 100%; margin: 0; }

  /*
    THE TOTALS, 10.09.2026. The totals table carries shop_table_responsive too,
    so the rules above stacked it like a cart line: the label as a table cell
    with its own short underline, the figure flex-boxed onto a line of its own,
    three lines and two rules per number (Haro's screenshot). Nothing here
    needs stacking: a label and a figure fit one line at 320. And on real
    WooCommerce these cells carry data-title, so the generic ::before would
    have printed every label twice; content: none stops that.
  */
  /* The row wraps, the figure never breaks: at 320 "2 814,04 €" lost its euro
     sign off the edge when the cell was allowed to shrink. The label may wrap;
     the figure keeps its width and, when the two cannot share a line, drops to
     its own line still flush right. */
  /* the totals rows are flex rows at every width now; the rules moved up to
     the cart section on 11.09.2026 */
}

/*
  Narrow-screen overrides live at the END on purpose.

  This pair was first written next to the table rules, three hundred lines
  above the checkout section, and did nothing at all: same specificity, and
  the later rule wins, so `#order_review` kept its desktop padding and the
  page still scrolled 21px at 320. A media query does not outrank anything by
  being a media query.
*/
/*
  480, not 360, measured 09.09.2026. These two rules are what let the order
  review card fit a narrow screen: the padding gives back 16px and the wrapping
  tfoot drops the table's minimum width from 326px to 258. Keyed at 360 they
  never engaged on an actual phone, and the checkout scrolled sideways for every
  viewport from 361 to 389: 7px at 375 and 21px at 361, because the table cannot
  go under 326 and the card needs 65 more around it than that.

  It survived because a media query matches the VIEWPORT while the overflow is
  decided by the CONTENT BOX, which is 15px narrower whenever there is a classic
  scrollbar, and because the audit sweeps 1425, 375 and 320: 375 was inside the
  broken band all along and the finding was read as belonging to the page rather
  than to this rule. Both rules are right for every phone, not only the smallest.
*/
/*
  THE CART'S LINES STACK IN A NARROW FORM, 14.09.2026, on any screen: the
  phone rules above, copied with the same selectors into a container query.
  A container query only reaches elements inside that container, so the
  totals table and the account tables beside the form are untouched; below
  641px both copies apply and say the same thing. Keep the two in step.
*/
@container cartform (max-width: 799.98px) {
  .woocommerce .shop_table_responsive thead { display: none; }
  .woocommerce .shop_table_responsive tbody tr {
    display: flex;
    flex-direction: column;
    padding: var(--s-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .woocommerce .shop_table_responsive tbody td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px var(--s-2);
    padding: 6px 0;
    border: 0;
    text-align: right;
    min-width: 0;
  }
  .woocommerce .shop_table_responsive tbody td > * { min-width: 0; }
  .woocommerce .shop_table_responsive tbody td::before {
    content: attr(data-title);
    min-width: 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--ink-faint);
    text-align: left;
  }
  .woocommerce .shop_table_responsive tbody td.product-name::before,
  .woocommerce .shop_table_responsive tbody td.product-remove::before,
  .woocommerce .shop_table_responsive tbody td.product-thumbnail::before { content: none; }
  .woocommerce .cart td.product-thumbnail { justify-content: flex-start; }
  .woocommerce .cart td.product-name { display: block; text-align: left; }
  .woocommerce .cart td.product-remove { width: auto; justify-content: flex-end; order: 9; }
  .woocommerce .cart a.remove { width: auto; gap: 6px; padding: 0 14px 0 12px;
                                border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600;
                                color: var(--ink-soft); }
  .woocommerce .cart a.remove::after { content: "Премахни"; }
  .woocommerce .shop_table_responsive tbody td.actions { padding: var(--s-3) var(--s-2); text-align: left; }
  .woocommerce td.actions .coupon { display: flex; margin: 0 0 var(--s-3); flex-wrap: wrap; gap: 12px; }
  .woocommerce td.actions .coupon label { flex: 1 1 100%; }
  .woocommerce td.actions .coupon .input-text { width: 150px; flex: 1 1 auto; }
  .woocommerce td.actions .coupon .button { flex: 1 0 auto; }
  .woocommerce td.actions > .button { float: none; width: 100%; margin: 0; }
}

/* A form under 360px, a 320 phone: the coupon button and the update button
   hold their words on one line and neither would shrink, so the actions row
   came out 348px wide in a 288px form and the page went 44px sideways
   (measured 14.09.2026, not new: it predates the grid). Below 360px of form
   each button takes a row of its own and the label takes the small step, as
   the checkout button does below 360: a two-line button reads as broken and
   the audit's cta-wraps rule says so. */
@container cartform (max-width: 359.98px) {
  .woocommerce td.actions .button { min-width: 0; max-width: 100%; font-size: 15px; padding: 0 12px; }
  .woocommerce td.actions .coupon .button { flex: 1 1 100%; }
  /* the row already has its own 16px a side; the cell doubling it was the last
     21px (Обновяване на количката is 241px at the small step) */
  .woocommerce .shop_table_responsive tbody td.actions { padding-left: 0; padding-right: 0; }
}

@media (max-width: 480px) {
  .woocommerce #order_review { padding: var(--s-2); }
  .woocommerce .woocommerce-checkout-review-order-table tfoot td { white-space: normal; }
  /* On the real checkout the summary carries the shipping choice, and its
     labels are one line each by the rule far above: "Вземане от магазина"
     with its radio is 212px, the heading column 130, so the table stood 342px
     wide and pushed the page sideways on every phone under 375 (found
     18.09.2026 on staging's own markup; the mock's summary has no shipping
     choice in it, so the 375 and 320 sweeps never saw this row). */
  .woocommerce .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods label { white-space: normal; text-align: right; }
  /* A phone gives the name the whole row and the price the foot of it, on the
     line of the "x 1" chip: beside the price the name had 197px at 375 and
     142 at 320, three lines ended in the model code, and the rest of the row
     under the price stood empty (25.09.2026). */
  .woocommerce .woocommerce-checkout-review-order-table tbody tr { position: relative; }
  .woocommerce .woocommerce-checkout-review-order-table td.product-name { flex-basis: 100%; }
  .woocommerce .woocommerce-checkout-review-order-table td.product-total { position: absolute; right: 0; bottom: var(--s-2); padding: 0; }
}

/*
  Below 360 the one primary button did not fit: "Продължи към поръчката" at
  17px is 250px of text and a 320 screen leaves its pill 238, so it clipped at
  both ends (10.09.2026, the 320 sweep had never measured text inside a nowrap
  button). Letting it wrap fails the audit's cta-wraps rule, and rightly: a
  two-line primary button reads as broken. So the card gives back 8px a side
  and the label takes the small step at its desktop size, which is the one
  place that size is used on a phone. If the label ever shortens (the theme's
  cart.php decides it), this block can go.
*/
@media (max-width: 360px) {
  .woocommerce .cart_totals { padding: var(--s-2); }
  .woocommerce a.checkout-button { font-size: 15px; padding: 0 12px; }
}