/* ============================================
   WOOCOMMERCE BLOCKS THEME — Checkout & Cart
   ============================================
   Restyles the block-based Checkout (`woocommerce/checkout`) and Cart
   (`woocommerce/cart`) blocks to match the Berry Landing design language
   (see assets/css/berry-reference.css) — cream background, deep-purple /
   mint-green accents, pill buttons, soft-shadow cards.

   Scoping: enqueued only on is_checkout() / is_cart() (see functions.php)
   AND every selector below is namespaced under body.woocommerce-checkout
   / body.woocommerce-cart so this file is inert anywhere else even if
   accidentally loaded elsewhere.

   The block checkout/cart render via WooCommerce Blocks' own React
   components, not classic template files, so every hook here targets the
   library's own stable `wc-block-*` / `wp-block-woocommerce-*` class
   names (inspected directly from the rendered DOM) rather than assumed
   markup structure.
   ============================================ */

body.woocommerce-checkout,
body.woocommerce-cart {
  --berry-bg:          #f7f5f2;
  --berry-surface:     #ffffff;
  --berry-border:      rgba(0,0,0,0.08);
  --berry-border-2:    rgba(0,0,0,0.14);

  --berry-purple:      #5b21b6;
  --berry-purple-dark: #3b0768;
  --berry-purple-soft: #9c50ff;
  --berry-grad-brand:  linear-gradient(135deg, #8d5bf5 0%, #d347ee 100%);
  --berry-mint:        #00f08b;

  --berry-text:        #1a0a1e;
  --berry-text-muted:  #5c4466;
  --berry-text-dim:    #a08ab0;

  --berry-shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --berry-shadow-md:   0 8px 24px rgba(0,0,0,0.10);
  --berry-shadow-lg:   0 20px 60px rgba(91,33,182,0.12);

  --berry-radius-card: 20px;
  --berry-radius-field:12px;
  --berry-radius-pill: 50px;

  --berry-font-display:'Space Grotesk', system-ui, sans-serif;
  --berry-font-sans:   'Inter', system-ui, sans-serif;

  background-color: var(--berry-bg);
}

/* ---------- PAGE BACKGROUND & TITLE ---------- */
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks {
  background-color: var(--berry-bg);
}

body.woocommerce-checkout main,
body.woocommerce-cart main {
  background-color: var(--berry-bg);
  font-family: var(--berry-font-sans);
  color: var(--berry-text);
  padding-bottom: 48px;
}

body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-cart h1.entry-title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
}

/* ---------- LAYOUT / CARD SHELL ----------
   Each checkout "step" (contact info, shipping address, shipping method,
   payment, order notes) is a <fieldset class="wc-block-components-checkout-step">.
   The cart line-items table and the totals sidebar get the same card
   treatment so the whole page reads as one family of surfaces. */
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-cart .wc-block-components-sidebar {
  background: var(--berry-surface);
  border-radius: var(--berry-radius-card);
  box-shadow: var(--berry-shadow-sm);
  border: 1px solid var(--berry-border);
  padding: 24px 28px;
  margin-bottom: 20px;
}

body.woocommerce-cart .wc-block-cart-items {
  padding: 8px 12px;
  /* WooCommerce Blocks' own cart.css ships
     `table.wc-block-cart-items { background: none !important }` — only
     !important can beat !important, so this is a deliberate, narrowly
     scoped override (not a general !important habit). */
  background: var(--berry-surface) !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step:last-child {
  margin-bottom: 0;
}

/* Step heading */
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
  color: var(--berry-text-muted);
}

/* Step number badges (1, 2, 3…) */
body.woocommerce-checkout .wc-block-components-checkout-step__title-icon {
  background: var(--berry-grad-brand);
  color: #fff;
}

/* ---------- FORM FIELDS ----------
   WooCommerce's own checkout.css targets inputs with
   `.wc-block-components-text-input input[type="email"]` etc. — a
   class+attribute compound that out-specifies a plain descendant
   selector. `!important` here is a deliberate, narrow override (same
   rationale as the cart-table background fix above), not a general
   habit — every other rule in this file wins on specificity alone. */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-blocks-components-select select,
body.woocommerce-cart .wc-blocks-components-select select {
  border-radius: var(--berry-radius-field) !important;
  border: 1.5px solid var(--berry-border-2) !important;
  background-color: var(--berry-bg) !important;
  font-family: var(--berry-font-sans);
  color: var(--berry-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select select:focus {
  border-color: var(--berry-purple-soft) !important;
  box-shadow: 0 0 0 3px rgba(156,80,255,0.15);
  outline: none;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select label {
  color: var(--berry-text-muted);
  font-family: var(--berry-font-sans);
}

body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-blocks-components-select.is-active label {
  color: var(--berry-purple);
}

/* Country/region custom select control */
body.woocommerce-checkout .wc-blocks-components-select__container {
  border-radius: var(--berry-radius-field);
}

/* Checkbox ("Use same address for billing") */
body.woocommerce-checkout .wc-block-components-checkbox svg {
  fill: var(--berry-purple);
}
body.woocommerce-checkout .wc-block-components-checkbox__input:checked + svg,
body.woocommerce-checkout .wc-block-components-checkbox__mark {
  color: var(--berry-purple);
}
body.woocommerce-checkout .wc-block-components-checkbox__label {
  color: var(--berry-text);
}

/* Address summary card (read-only "reviewed" state) */
body.woocommerce-checkout .wc-block-components-address-card {
  border-radius: var(--berry-radius-field);
  border: 1.5px solid var(--berry-border);
  padding: 14px 16px;
}
body.woocommerce-checkout .wc-block-components-address-card__edit {
  color: var(--berry-purple);
}

/* ---------- ADDRESS AUTOCOMPLETE ----------
   Suggestion dropdown for the street-address field — see
   initCheckoutAddressAutocomplete() in assets/js/berry-app.js (fetches
   from LocationIQ) and inc/checkout-address-autocomplete.php (localizes
   the API key). Appended to <body> by the JS, not as a descendant of the
   field itself, so this isn't nested under any wc-block-* wrapper — no
   scoping issue since the JS only ever creates it on the Checkout page,
   but body.woocommerce-checkout kept anyway for consistency with every
   other rule in this file. */
body.woocommerce-checkout .berry-address-suggestions {
  position: absolute;
  z-index: 9999;
  background: var(--berry-surface);
  border: 1.5px solid var(--berry-border-2);
  border-radius: var(--berry-radius-field);
  box-shadow: var(--berry-shadow-md);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

body.woocommerce-checkout .berry-address-suggestions__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  font-family: var(--berry-font-sans);
  font-size: 14px;
  line-height: 1.35;
  color: var(--berry-text);
  cursor: pointer;
  border-radius: calc(var(--berry-radius-field) - 4px);
}

body.woocommerce-checkout .berry-address-suggestions__item:hover,
body.woocommerce-checkout .berry-address-suggestions__item:focus {
  background: #f6f0ff;
  outline: none;
}

/* ---------- RADIO OPTIONS ----------
   Used for both shipping methods (Speedy / Econt / Free shipping) and
   payment methods — same component in both places, so one ruleset
   covers both and any future gateway added. */
body.woocommerce-checkout .wc-block-components-radio-control__option {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--berry-border-2);
  border-radius: var(--berry-radius-field);
  background: var(--berry-bg);
  margin-bottom: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* The radio dot (native <input>) is positioned `position: absolute` by
   WooCommerce Blocks' own stylesheet (confirmed via computed styles —
   it's pulled out of the flex flow entirely), which is why plain
   margin/align-self on it did nothing: it was floating at a fixed
   top offset independent of the option row's height, and the label
   content next to it started at almost the same x-position, so it
   visually overlapped the courier logo instead of sitting centered
   with a gap. Pin it explicitly instead of relying on WC Blocks'
   default offset, then give the label content matching left space. */
body.woocommerce-checkout .wc-block-components-radio-control__input {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
  margin-left: 40px;
  /* min-width:0 overrides the flex-item default of min-width:auto, which
     otherwise floors this row's width at its own content's natural
     unwrapped size — with Econt's courier chip being the widest of the
     four (96px, vs. 84px/44px/44px for the others) plus its own longer
     label text ("Econt: Безплатна доставка"), that unwrapped floor left
     no room for the "БЕЗПЛАТНО" free-shipping badge sitting next to it,
     pushing the badge out past the option card's own right edge/border
     instead of letting the text wrap first. Same root cause/fix already
     used elsewhere on this site for an identical class of bug (the
     search-results page-title overflow, .berry-shop-layout .site-main). */
  min-width: 0;
}

@media (max-width: 600px) {
  body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
    margin-left: 34px;
  }
}

/* The label (logo + courier name) is itself the flex child that needs to
   actually shrink/wrap when space is tight — without its own min-width:0
   an inline-flex element defaults to min-width:auto too, which would
   still force the row wider regardless of the parent's own min-width
   above. flex-wrap:wrap lets the text drop to its own line under/after
   the logo chip instead of forcing the whole label — and everything
   after it — wider than the card. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:7"] .wc-block-components-radio-control__label {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
}

/* The price/"БЕЗПЛАТНО" badge itself must NOT shrink — it's a short fixed
   pill; if space runs out it should be the courier label that wraps (the
   fix above), never this badge getting squeezed/distorted. */
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label,
body.woocommerce-checkout .wc-block-checkout__shipping-option--free {
  flex-shrink: 0;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:hover {
  border-color: var(--berry-purple-soft);
}

body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control__option[aria-checked="true"] {
  border-color: var(--berry-purple);
  background: #f6f0ff;
  box-shadow: 0 0 0 1px var(--berry-purple);
}

/* Radio dot itself */
body.woocommerce-checkout .wc-block-components-radio-control__input {
  accent-color: var(--berry-purple);
}
body.woocommerce-checkout .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input,
body.woocommerce-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--berry-purple);
  background-color: var(--berry-purple);
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__label {
  color: var(--berry-text);
  font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
  color: var(--berry-purple-dark);
  font-weight: 700;
}

/* Pickup location options (if enabled) share the same visual family */
body.woocommerce-checkout .wc-block-components-radio-control--pickup .wc-block-components-radio-control__option {
  border-radius: var(--berry-radius-field);
}

/* "Free"/€0.00 secondary label (WooCommerce Blocks adds this class itself
   whenever a rate's calculated cost is 0 — confirmed in the rendered DOM:
   <span class="wc-block-checkout__shipping-option--free">) — turned into
   a mint pill so a courier that just crossed the free-shipping threshold
   stands out, matching the sale-badge treatment used elsewhere on this
   page (see .wc-block-components-sale-badge below). */
body.woocommerce-checkout .wc-block-checkout__shipping-option--free {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--berry-radius-pill);
  background: var(--berry-mint);
  color: var(--berry-purple-dark);
  font-weight: 800;
  font-size: 0.85em;
  letter-spacing: 0.01em;
}

/* Order-summary totals row's own "Доставка" value, when it reads
   "Безплатно" — class applied by initCheckoutFreeShippingLabelColor() in
   berry-app.js (text-matched there since the .wc-block-components-totals-
   item__value class it's added to is shared by every totals row AND a
   real non-zero shipping cost, so a bare CSS rule on that class alone
   would incorrectly turn a genuine paid delivery fee green too). */
.berry-shipping-value--free {
  color: var(--berry-mint);
  font-weight: 800;
}

/* ---------- SHIPPING METHOD COURIER ICONS ----------
   Goal: show the Speedy / Econt / Box Now brand mark to the left of each
   shipping option's name in the checkout radio list.

   Why CSS and not an <img> in the rate label: WooCommerce Blocks renders
   each rate's `label` into a real DOM text node —
     <span class="wc-block-components-radio-control__label">Speedy</span>
   — verified directly in the rendered checkout DOM (devtools inspection,
   not assumed). It is not inserted via dangerouslySetInnerHTML, so HTML
   passed through woocommerce_package_rates' $rate->label would render as
   literal escaped text ("<img ...>" showing on the page), not an image.
   CSS ::before backgrounds are therefore the only reliable route here.

   Selector anchor: WooCommerce Blocks gives each option's wrapping
   <label> a `for` attribute of `radio-control-{package index}-{rate id}`
   (e.g. for="radio-control-0-flat_rate:5"), where {rate id} is
   `{method_id}:{instance_id}` — also verified directly in the rendered
   DOM. An attribute-*contains* match ([for*="flat_rate:5"]) is used
   rather than an exact match so this survives the package-index prefix
   changing (e.g. if this store ever ships multi-package orders).

   The 4 instance IDs below — 5 (Speedy), 2 (Econt), 4 (Box Now), 7
   (Доставка до адрес) — are this store's actual Bulgaria-zone flat_rate
   method instances (the same 4 IDs the woocommerce_package_rates filter
   in functions.php checks).
   There's no text- or class-based alternative to anchor on instead: the
   courier name only exists as a text node, and CSS has no text-content
   selector. If a method is ever deleted and recreated in wp-admin it
   will get a new instance_id and these selectors (and the PHP filter)
   both need updating together — documented in both places for that
   reason. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:7"] .wc-block-components-radio-control__label {
  display: inline-flex;
  align-items: center;
}

body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label::before,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label::before,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label::before,
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:7"] .wc-block-components-radio-control__label::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 44px;
  margin-right: 14px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Speedy — official orange/red wordmark; opaque artwork reads fine
   directly on the option's cream card background, no chip needed. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label::before {
  width: 84px;
  background-image: url("../img/couriers/speedy-logo.svg");
  background-size: contain;
}

/* Econt — the source SVG (econt-logo.svg) is a pure white silhouette
   (every <path fill="#FFFFFF">, confirmed by reading the file directly),
   so it would be invisible placed straight onto this card's light cream
   background. Given a dark chip behind it instead — reuses the
   theme's own deep-purple brand color rather than guessing at Econt's
   real brand color, so it stays visually consistent with the rest of
   the Berry palette instead of introducing an unrelated new color. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label::before {
  width: 96px;
  background-color: var(--berry-purple-dark);
  background-image: url("../img/couriers/econt-logo.svg");
  background-size: 72% auto;
  border-radius: 10px;
}

/* Box Now — logo already ships as a self-contained green tile with its
   own dark outline (see boxnow-logo.svg: a full-bleed #44D62C background
   rect plus a #260563 border stroke baked into the artwork), so it reads
   fine as-is on any page background. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label::before {
  width: 44px;
  background-image: url("../img/couriers/boxnow-logo.svg");
  background-size: cover;
  border-radius: 10px;
}

/* Доставка до адрес — no courier brand to show (it's a plain generic
   home-delivery option, not tied to a specific carrier), so a simple
   house glyph stands in for a logo instead — same purple chip treatment
   as Econt's, for visual consistency with the other 3 options, drawn
   inline as an SVG data URI rather than a separate asset file since it's
   just a plain two-stroke icon. */
body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:7"] .wc-block-components-radio-control__label::before {
  width: 44px;
  background-color: var(--berry-purple-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5 10v9a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E");
  background-size: 50% auto;
}

@media (max-width: 600px) {
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label::before,
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label::before,
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label::before {
    height: 34px;
    margin-right: 10px;
  }
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:5"] .wc-block-components-radio-control__label::before {
    width: 64px;
  }
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:2"] .wc-block-components-radio-control__label::before {
    width: 74px;
  }
  body.woocommerce-checkout .wc-block-components-radio-control__option[for*="flat_rate:4"] .wc-block-components-radio-control__label::before {
    width: 34px;
  }
}

/* ---------- PRIMARY / SECONDARY BUTTONS ----------
   Place Order, Proceed to Checkout, Update Cart, Apply coupon — the
   homepage's mint-pill CTA (see .hero-cta-btn in berry-reference.css:
   background #00f08b, color #5b21b6, radius 40-50px). */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-totals-coupon__button):not(.wc-block-components-checkout-return-to-cart-button),
body.woocommerce-cart .wc-block-components-button:not(.wc-block-components-totals-coupon__button) {
  background: var(--berry-mint);
  color: var(--berry-purple);
  border: none;
  border-radius: var(--berry-radius-pill);
  font-weight: 800;
  font-family: var(--berry-font-sans);
  letter-spacing: 0.02em;
  box-shadow: 0 8px 15px rgba(0,240,139,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  padding-left: 28px;
  padding-right: 28px;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-totals-coupon__button):not(.wc-block-components-checkout-return-to-cart-button):hover,
body.woocommerce-cart .wc-block-components-button:not(.wc-block-components-totals-coupon__button):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,240,139,0.4);
  filter: brightness(1.03);
  color: var(--berry-purple);
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled,
body.woocommerce-cart .wc-block-cart__submit-button[aria-disabled="true"] {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* "Return to cart" secondary link keeps a quieter outline treatment */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  border-radius: var(--berry-radius-pill);
  border: 1.5px solid var(--berry-border-2);
  color: var(--berry-purple);
  background: transparent;
  font-weight: 600;
}
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  border-color: var(--berry-purple);
  background: #f6f0ff;
}

/* Coupon "Apply" button — smaller, deep-purple pill (distinct from the mint CTA) */
body.woocommerce-checkout .wc-block-components-totals-coupon__button,
body.woocommerce-cart .wc-block-components-totals-coupon__button {
  border-radius: var(--berry-radius-pill);
  background: var(--berry-purple);
  color: #fff;
  border: none;
  font-weight: 700;
}
body.woocommerce-checkout .wc-block-components-totals-coupon__button:hover,
body.woocommerce-cart .wc-block-components-totals-coupon__button:hover {
  background: var(--berry-purple-dark);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__input input,
body.woocommerce-cart .wc-block-components-totals-coupon__input input {
  border-radius: var(--berry-radius-field);
  border: 1.5px solid var(--berry-border-2);
}

/* ---------- ORDER SUMMARY / TOTALS SIDEBAR ---------- */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  border-bottom: 1px solid var(--berry-border);
  padding-bottom: 14px;
  margin-bottom: 10px;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name,
body.woocommerce-cart .wc-block-components-product-name {
  color: var(--berry-text);
  font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-item__label {
  color: var(--berry-text-muted);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--berry-purple-dark);
  font-weight: 800;
  font-size: 1.1em;
}

/* Small circular quantity badge on order-summary line items (checkout
   sidebar only) — distinct from the cart table's +/- quantity stepper,
   which gets its own pill treatment further down. */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  background: var(--berry-mint);
  color: var(--berry-purple);
  font-weight: 700;
  border-radius: 50%;
}

/* ---------- COUPON / DISCOUNT ROW ----------
   "Отстъпка" (discount) row — was plain default text, same weight/color
   as every other totals row, easy to miss. Same red already used for
   every other "you're saving money" surface on this site (.price ins on
   product cards, the cart-drawer's own discounted line price). */
body.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value {
  color: #e11d48 !important;
  font-weight: 800 !important;
}

body.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__label {
  font-weight: 700 !important;
}

/* Applied coupon code chip ("promomomo10 ✕") */
body.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item,
body.woocommerce-cart .wc-block-components-totals-discount__coupon-list-item {
  font-weight: 700 !important;
  color: var(--berry-purple-dark) !important;
  background: #f6f0ff !important;
  border-color: var(--berry-purple) !important;
}

/* ---------- CART TABLE ---------- */
body.woocommerce-cart .wc-block-cart-items__header th {
  color: var(--berry-text-dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-bottom: 1px solid var(--berry-border);
}

body.woocommerce-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--berry-border);
}

body.woocommerce-cart .wc-block-cart-item__image img {
  border-radius: var(--berry-radius-field);
}

body.woocommerce-cart .wc-block-components-quantity-selector {
  border: 1.5px solid var(--berry-border-2);
  border-radius: var(--berry-radius-pill);
  overflow: hidden;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
  color: var(--berry-purple);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  background: #f6f0ff;
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
  color: #ef4444;
  font-weight: 600;
}

body.woocommerce-cart .wc-block-components-product-price__value.is-discounted,
body.woocommerce-checkout .wc-block-components-product-price__value.is-discounted {
  color: var(--berry-purple);
}

body.woocommerce-cart .wc-block-components-product-badge.wc-block-components-sale-badge {
  background: var(--berry-mint);
  color: var(--berry-purple);
  border-radius: var(--berry-radius-pill);
  font-weight: 700;
}

/* ---------- NOTICES / VALIDATION ---------- */
body.woocommerce-checkout .wc-block-components-validation-error,
body.woocommerce-cart .wc-block-components-validation-error {
  border-radius: var(--berry-radius-field);
}

body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-cart .wc-block-components-notice-banner {
  border-radius: var(--berry-radius-field);
  box-shadow: var(--berry-shadow-sm);
}

body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
  border-left: 4px solid #ef4444;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-success {
  border-left: 4px solid var(--berry-mint);
}

/* ---------- TERMS / ORDER NOTE ---------- */
body.woocommerce-checkout .wc-block-checkout__terms {
  color: var(--berry-text-muted);
  font-size: 13px;
}
body.woocommerce-checkout .wc-block-checkout__terms a {
  color: var(--berry-purple);
  text-decoration: underline;
}

body.woocommerce-checkout .wc-block-components-textarea {
  border-radius: var(--berry-radius-field);
  border: 1.5px solid var(--berry-border-2);
  background-color: var(--berry-bg);
}

/* Checkout's own "cart is empty" fallback (Wt component in
   checkout-frontend.js) — shown if the cart empties out while already on
   Checkout, e.g. removing the last item via the order-summary qty
   stepper/remove button (see initCheckoutOrderSummaryQtyStepper() in
   berry-app.js). .wc-block-checkout-empty__image is the <svg> itself
   (this particular icon — module 8207 in wc-cart-checkout-base-
   frontend.js — confirmed straight from source), but unlike most
   @wordpress/icons glyphs its cart-shape <path> has no fill attribute at
   all, so it falls back to SVG's own spec default (plain black) rather
   than currentColor — a plain `color` rule here did nothing, confirmed
   live. `fill` on the <svg> itself inherits down to that unfilled path
   the normal SVG-presentation-property way, so setting it directly here
   (not `color`) is what actually recolors it. Description paragraph left
   in its normal muted color, matching how other heading-vs-body-copy
   pairs in this design already work. */
body.woocommerce-checkout .wc-block-checkout-empty__image {
  fill: var(--berry-purple-soft);
}
body.woocommerce-checkout .wc-block-checkout-empty__title {
  color: var(--berry-purple-soft);
}

/* "Save X" badge (Bulgarian: "Спестявате X €", see the 'Save %s' override
   in functions.php/berry-app.js) — the difference between regular and
   sale price for a discounted order-summary line item. Layout (position,
   single-line width, spacing) is handled entirely in JS now — see
   initSavingsBadgeSpacing() in berry-app.js for why: it's relocated out
   of its original cramped price column onto its own full-width line,
   after two CSS-only layout attempts here (a max-width cap, then a
   margin-right) both had zero visible effect, which turned out to be
   because the real bug was the parent row rendering wider than its own
   column, not anything fixable by styling the badge in place. This rule
   only owns the visual styling now — recolored to red per request, so
   the savings amount reads as a clear, attention-grabbing callout rather
   than blending into the same faint tinted-grey background every WC
   Blocks product badge (backorder, etc.) shares by default. Scoped to
   being a child of the order-summary item's description column (where
   JS moves it to), not the bare .wc-block-components-product-badge
   class — that base class is reused for the unrelated "Available on
   backorder" badge elsewhere, which shouldn't turn red/savings-styled
   too. */
body.woocommerce-checkout .wc-block-components-order-summary-item__description > .wc-block-components-product-badge,
body.woocommerce-cart .wc-block-components-order-summary-item__description > .wc-block-components-product-badge {
  font-size: 11px;
  background: rgba(220,38,38,0.1) !important;
  color: #dc2626 !important;
  font-weight: 700;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  body.woocommerce-checkout .wc-block-components-checkout-step,
  body.woocommerce-cart .wc-block-cart-items,
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-cart .wc-block-components-sidebar {
    padding: 18px 16px;
    border-radius: 16px;
  }

  /* Less empty space below "Общо" (the last row in this card) — was the
     card's flat 18px bottom padding applying uniformly on every side,
     which reads as a lot of empty room specifically at the bottom since
     nothing else sits below the grand total inside this card. Top/side
     padding stays the same; only the bottom is trimmed. */
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-cart .wc-block-components-sidebar {
    padding-bottom: 6px;
  }

  /* Belt-and-suspenders: zero out any bottom margin/padding WC core's own
     default styling might carry on the grand-total row itself, in case
     that (not just the card's own padding above) was also contributing. */
  body.woocommerce-checkout .wc-block-components-totals-footer-item,
  body.woocommerce-cart .wc-block-components-totals-footer-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}