/*
 * VeinNails — WooCommerce Extra Styles
 * Допълнителни стилове за WooCommerce
 */

/* ============================================================
   MODERNCART SIDEBAR — brand colours
   ============================================================ */

/* Override primary colour variable (purple → accent gold) */
#moderncart-slide-out,
.moderncart-plugin {
  --moderncart-primary-color: #b89678;
  --moderncart-primary-color-light: rgba(184, 150, 120, 0.15);
  --moderncart-highlight-color: #b89678;
}

/* Product title links: dark instead of purple */
.moderncart-cart-item-product-link a,
.moderncart-cart-item-product-link a:visited,
#moderncart-slide-out .moderncart-cart-item-product-link a {
  color: #2c1f14 !important;
  text-decoration: none !important;
}
.moderncart-cart-item-product-link a:hover {
  color: #b89678 !important;
}

/* Checkout button: accent gold */
#moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button,
#moderncart-slide-out a.checkout-button,
.moderncart-plugin a.checkout-button {
  background-color: #b89678 !important;
  border-color: #b89678 !important;
  color: #ffffff !important;
}
#moderncart-slide-out a.checkout-button:hover {
  background-color: #9a7a5e !important;
  border-color: #9a7a5e !important;
}

/* Floating cart button: dark */
.moderncart-floating-cart-button {
  background-color: #2c1f14 !important;
}

/* Cart item meta (variation info — Форма, Размер) under product name */
.moderncart-cart-item .woocommerce-cart-item__meta,
.moderncart-cart-item .wc-item-meta,
.moderncart-cart-item dl.variation,
.moderncart-cart-item dl.variation dt,
.moderncart-cart-item dl.variation dd {
  font-size: 0.78rem;
  color: #7a6152;
  margin: 2px 0 0;
}
.moderncart-cart-item dl.variation dt {
  font-weight: 600;
  color: #2c1f14;
}

/* ── ModernCart: показвай variation данните директно (без collapse) ── */

/* Скрий "View details" бутона */
#moderncart-slide-out .moderncart-collapse-btn-link {
  display: none !important;
}

/* Покажи данните (variation + Размер) винаги видими */
#moderncart-slide-out .moderncart-cart-item-product-data {
  display: block !important;
  border-top: none !important;
  box-shadow: none !important;
  padding: 4px 0 0 !important;
  max-width: none !important;
  max-height: none !important;
  font-size: 0.78rem !important;
}

/* Скрий "Product details" заглавието */
#moderncart-slide-out .moderncart-cart-item-product-data h5 {
  display: none !important;
}

/* Variation dl стилизация */
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation {
  margin: 0;
  padding: 0;
}
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation dt,
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation dd {
  font-size: 0.78rem;
  margin: 0;
  padding: 0;
  color: #7a6152;
  line-height: 1.5;
}
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation dt {
  font-weight: 600;
  color: #2c1f14;
  float: none;
  width: auto;
}
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation dt::after {
  content: ':';
  margin-right: 4px;
}
#moderncart-slide-out .moderncart-cart-item-product-data dl.variation dd p {
  display: inline;
  margin: 0;
}

/* WooCommerce Blocks cart item meta */
.wc-block-cart-item__meta,
.wc-block-components-product-details {
  font-size: 0.8rem;
  color: #7a6152;
}
.wc-block-components-product-details__name {
  font-weight: 600;
  color: #2c1f14;
}

/* ============================================================
   PRODUCT IMAGE HOVER (secondary image)
   ============================================================ */

.vn-product-img-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--vn-bg-alt);
}

.vn-product-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  /* 2026-08-20: was 1/1 (square) — changed to 4/5 (taller than wide)
     per site owner's request for a less cropped, more portrait frame. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Product card excerpt — consistent 20px padding */
/* 2026-08-21: bottom padding (excerpt → price gap) trimmed 0.75rem →
   0.4rem, part of the "more compact card" pass — see style.css,
   ".ast-loop-product__link"/".price"/title padding, same title→price
   gap this sits inside of. */
ul.products li.product .vn-product-excerpt {
  font-size: 0.8rem;
  color: var(--vn-text-muted);
  padding: 0.1rem 1.25rem 0.4rem 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   WISHLIST HEART — overlay on the product image, 2026-08-21
   Moved here from the card bottom via functions.php — see "21a.
   Shop-loop card — move the wishlist heart onto the image" there.
   2026-08-21 follow-up: first version anchored this inside
   ".vn-product-img-wrap" — broke the click (nested <a> inside
   WooCommerce's own product-link anchor, invalid HTML, click always
   went to the outer link). Now hooked as a real sibling of that
   anchor, a direct child of "<li class="product">" instead — already
   "position:relative" ("ul.products li.product", style.css), so
   "top:10px;right:10px" below anchors to THAT now. Visually unchanged
   (same top-right-of-photo spot): the image sits flush at the card's
   own top edge, only the ~1px card border between them.
   Only layout/position/background touched here — icon glyph
   (":before" content, "\e909" empty / "\e908" filled via the plugin's
   own ".tinvwl-product-in-list" class, JS-toggled live on add/remove)
   and its color are untouched, so the existing working empty↔filled
   state swap keeps working exactly as before, just relocated.
   Markup (plugin-rendered, confirmed live):
     <div class="tinv-wraper ... tinvwl-loop-button-wrapper ...">
       <div class="tinv-wishlist-clear"></div>
       <a class="tinvwl_add_to_wishlist_button tinvwl-icon-heart ... tinvwl-loop" aria-label="Добави в любими">
         <span class="tinvwl_add_to_wishlist-text">Добави в любими</span>
         <span class="tinvwl_already_on_wishlist-text">Вече е в любими</span>
       </a>
       <div class="tinv-wishlist-clear"></div>
       <div class="tinvwl-tooltip">Добави в любими</div>
     </div>
   "aria-label" on the <a> is the plugin's own, already correct and
   already swaps text via its own JS/PHP state logic — nothing added
   here for that. The two <span> texts stay in the DOM (not display:
   none, which would pull them out of the accessibility tree too) but
   are visually clipped off-screen (standard sr-only technique) so
   only the heart icon shows; ".tinvwl-tooltip" (plugin ships this,
   "display:none" by default, unused by this theme until now) is
   turned into a real hover/focus tooltip using its own existing text
   instead of adding a duplicate. */
.tinv-wraper.tinvwl-loop-button-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  margin: 0 !important;
}

.tinv-wraper.tinvwl-loop-button-wrapper > .tinv-wishlist-clear {
  display: none;
}

.tinvwl_add_to_wishlist_button.tinvwl-loop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

.tinvwl_add_to_wishlist_button.tinvwl-loop:hover,
.tinvwl_add_to_wishlist_button.tinvwl-loop:focus-visible {
  background: #ffffff;
  transform: scale(1.06);
}

.tinvwl_add_to_wishlist_button.tinvwl-loop:before {
  margin: 0 !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}

/* Visually hide the text labels — kept in the DOM and in the
   accessibility tree (unlike display:none), the <a>'s own aria-label
   is the primary accessible name anyway; this just stops the raw
   text from rendering as bulky text over/around the circle. */
.tinvwl_add_to_wishlist_button.tinvwl-loop .tinvwl_add_to_wishlist-text,
.tinvwl_add_to_wishlist_button.tinvwl-loop .tinvwl_already_on_wishlist-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mouse-hover tooltip, using the plugin's own ".tinvwl-tooltip" div
   (ships hidden by default, unused elsewhere on this site). */
.tinv-wraper.tinvwl-loop-button-wrapper .tinvwl-tooltip {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--vn-dark);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  z-index: 6;
}

.tinv-wraper.tinvwl-loop-button-wrapper:hover .tinvwl-tooltip,
.tinvwl_add_to_wishlist_button.tinvwl-loop:focus-visible ~ .tinvwl-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile (2 columns, see the ".vn-products-grid" 768px query in
   style.css) — smaller image, smaller circle/inset so the heart
   doesn't sit over a meaningful chunk of a narrow nail-design photo. */
@media (max-width: 768px) {
  .tinv-wraper.tinvwl-loop-button-wrapper {
    top: 8px;
    right: 8px;
  }
  .tinvwl_add_to_wishlist_button.tinvwl-loop {
    width: 28px;
    height: 28px;
  }
  .tinvwl_add_to_wishlist_button.tinvwl-loop:before {
    font-size: 13px !important;
  }
}

/* ============================================================
   ON-CARD "SELECT OPTIONS" TRIGGER — removed, 2026-08-21
   Astra's own hover-cart-icon overlay on the product image
   (".ast-on-card-button" is Astra's shared wrapper class for this AND
   the sale badge — ".ast-onsale-card" is the OTHER one, untouched;
   ".ast-select-options-trigger" is the specific cart-icon button,
   the one actually being removed here). Redundant with the "Виж
   продукт" button already in the card summary below the image —
   two different-looking controls doing the same "go pick options"
   job. */
.ast-on-card-button.ast-select-options-trigger {
  display: none !important;
}

/* ============================================================
   QUICK VIEW BUTTON
   ============================================================ */

/* The button sits inside .vn-product-img-wrap (overflow: hidden),
   slides up from below the image edge on card hover. */
.vn-quick-view-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem 1rem;
  background: rgba(44, 31, 20, 0.88);
  color: rgba(247, 242, 235, 0.9);
  font-family: var(--vn-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transform: translateY(100%);
  transition: transform 0.28s ease, background-color 0.2s ease;
  backdrop-filter: blur(2px);
  width: 100%;
  box-sizing: border-box;
}

/* Appears on card hover or button focus */
ul.products li.product:hover .vn-quick-view-btn,
.vn-quick-view-btn:focus-visible {
  transform: translateY(0);
}

.vn-quick-view-btn:hover {
  background: rgba(44, 31, 20, 0.96);
  color: var(--vn-accent-light);
}

/* ============================================================
   QUICK VIEW MODAL
   ============================================================ */

.vn-qv-modal {
  position: fixed;
  inset: 0;
  z-index: 99997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vn-qv-modal[hidden] {
  display: none;
}

/* Overlay */
.vn-qv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 31, 20, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Dialog box */
.vn-qv-dialog {
  position: relative;
  z-index: 1;
  background: var(--vn-bg-card);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(44, 31, 20, 0.3);
  animation: vn-qv-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes vn-qv-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Close button — bare <button>, so it also inherits the global
   site-wide "button" selector's CTA padding/radius/uppercase
   !important (same class of bug as the wishlist "×" remove button —
   see style.css, WISHLIST PAGE section). Reset explicitly, !important. */
.vn-qv-close {
  position: absolute;
  top: .875rem;
  right: .875rem;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(247, 242, 235, 0.9) !important;
  border: none !important;
  cursor: pointer;
  color: var(--vn-dark) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0 !important;
  font-size: initial !important;
  font-weight: initial !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.vn-qv-close:hover {
  background: var(--vn-accent);
  color: var(--vn-white);
}

/* Image column */
.vn-qv-image-col {
  overflow: hidden;
  background: var(--vn-bg-alt);
}

.vn-qv-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content column */
.vn-qv-content-col {
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  overflow-y: auto;
}

.vn-qv-category {
  font-family: var(--vn-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-accent);
  margin: 0;
  min-height: 1em;
}

.vn-qv-name {
  font-family: var(--vn-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--vn-dark);
  margin: 0;
  line-height: 1.1;
}

.vn-qv-price {
  font-family: var(--vn-font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--vn-accent-dark);
  margin: 0;
}

.vn-qv-desc {
  font-family: var(--vn-font-body);
  font-size: 0.88rem;
  color: var(--vn-text-muted);
  line-height: 1.7;
  margin: .25rem 0 auto;
}

/* Actions */
.vn-qv-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

/* 2026-08-20: quick-view modal "КУПИ" — found still on the old dark
   (--vn-dark) treatment from before the site-wide button
   standardization pass; brought in line with the shared primary
   tokens like every other buy/add-to-cart button. */
.vn-qv-buy-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--vn-btn-padding) !important;
  background: var(--vn-btn-primary-bg) !important;
  color: var(--vn-btn-primary-color) !important;
  font-family: var(--vn-font-body) !important;
  font-size: var(--vn-btn-font-size) !important;
  font-weight: var(--vn-btn-font-weight) !important;
  letter-spacing: var(--vn-btn-letter-spacing) !important;
  text-transform: uppercase !important;
  text-decoration: none;
  border-radius: var(--vn-btn-radius) !important;
  transition: background .3s ease;
}

.vn-qv-buy-btn:hover {
  background: var(--vn-btn-primary-bg-hover);
}

/* "Виж продукта →" — a lighter secondary action next to the modal's
   one primary CTA; kept as an underlined text link (not a bordered
   button — the modal's own small actions row), recolored to the same
   secondary token so its color is at least consistent everywhere else
   secondary is used. */
.vn-qv-view-link {
  font-family: var(--vn-font-body);
  font-size: 0.85rem;
  color: var(--vn-btn-secondary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vn-qv-view-link:hover {
  color: var(--vn-btn-secondary-bg-hover);
}

/* Body scroll lock when modal is open */
body.vn-qv-open {
  overflow: hidden;
}

/* Modal responsive */
@media (max-width: 600px) {
  .vn-qv-dialog {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .vn-qv-image-col {
    height: 220px;
    flex-shrink: 0;
  }

  .vn-qv-image-col img {
    height: 220px;
  }

  .vn-qv-content-col {
    padding: 1.5rem;
  }
}

/* ============================================================
   WOOCOMMERCE ACCOUNT PAGE
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  padding: 1.25rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--vn-border);
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--vn-text);
  border-radius: var(--vn-radius-sm);
  transition: background-color var(--vn-transition), color var(--vn-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--vn-accent);
  color: var(--vn-white);
}

/* ============================================================
   ORDER STATUS BADGES
   ============================================================ */

.woocommerce-orders-table__cell-order-status mark,
.woocommerce-order-details .woocommerce-order-overview__order mark {
  border-radius: var(--vn-radius-full);
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

mark.pending     { background-color: #f0e4d0; color: #8a5c30; }
mark.processing  { background-color: #d8edda; color: #276130; }
mark.on-hold     { background-color: #fff0cc; color: #6b4c00; }
mark.completed   { background-color: rgba(184,150,120,0.15); color: var(--vn-accent-dark); }
mark.cancelled   { background-color: #fde8e8; color: #a52834; }
mark.refunded    { background-color: #eee; color: #555; }

/* ============================================================
   MINI CART FLYOUT
   ============================================================ */

.woocommerce-cart-form .cart-subtotal,
.woocommerce-cart-form .order-total {
  font-weight: 700;
  color: var(--vn-dark);
}

/* ============================================================
   CART PAGE — елегантен крем/бежов стил
   ============================================================ */

/* Wrapper layout — таблица вляво, totals вдясно */
.woocommerce-cart .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Main cart table */
.woocommerce-cart table.shop_table {
  background: #ffffff;
  border: 1px solid #e8dfd5 !important;
  border-radius: 12px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

/* Thead */
.woocommerce-cart table.shop_table thead tr {
  background-color: #f7f2eb;
}

.woocommerce-cart table.shop_table thead th {
  padding: 14px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a6152;
  border-bottom: 1px solid #e8dfd5 !important;
  border-top: none !important;
}

/* Rows */
.woocommerce-cart table.shop_table tbody tr {
  border-bottom: 1px solid #f0e8df;
  transition: background-color 0.15s ease;
}

.woocommerce-cart table.shop_table tbody tr:last-child {
  border-bottom: none;
}

.woocommerce-cart table.shop_table tbody tr:hover {
  background-color: #fdf9f5;
}

.woocommerce-cart table.shop_table td {
  padding: 18px 16px;
  vertical-align: middle;
  border-top: none !important;
  border-bottom: 1px solid #f0e8df !important;
}

.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* ── Remove (×) button ── */
.woocommerce-cart table.shop_table td.product-remove {
  width: 40px;
  text-align: center;
  padding: 18px 8px;
}

.woocommerce-cart a.remove.vn-remove,
.woocommerce-cart a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #b89678 !important;
  color: #b89678 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 0 !important; /* hide the × text if still there */
}

.woocommerce-cart a.remove.vn-remove:hover,
.woocommerce-cart a.remove:hover {
  background-color: #b89678 !important;
  color: #ffffff !important;
  border-color: #b89678 !important;
}

.woocommerce-cart a.remove.vn-remove svg {
  display: block;
}

/* ── Product thumbnail ── */
.woocommerce-cart td.product-thumbnail {
  width: 80px;
  padding: 14px 12px;
}

.woocommerce-cart td.product-thumbnail img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ── Product name + meta ── */
.woocommerce-cart td.product-name {
  font-family: 'Jost', sans-serif;
}

.woocommerce-cart td.product-name a {
  color: #2c1f14;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.woocommerce-cart td.product-name a:hover {
  color: #b89678;
}

/* Variation & meta under product name
   2026-08-21 — преработено на CSS grid, замествайки цялата поредица
   inline/inline-block/::after хакове от по-рано същия ден. Проблемът
   с тях не беше единичен бъг, а системен: dt/dd като inline елементи
   зависят от baseline подравняване на текстов ред, което е чуплО —
   вложеният <p> вътре в dd внасяше собствена inline кутия с
   потенциално различна височина, а min-width/margin-bottom тихо не
   важаха, защото елементите бяха inline. Grid елиминира целия този
   клас проблеми наведнъж: всяка двойка dt+dd е ред в grid-а, dt е
   първата колона (авто-широка по най-дългия етикет — "Форма:" и
   "Размер:" вече АВТОМАТИЧНО се подравняват по най-широкия, без
   фиксиран min-width), dd е втората колона, а "align-items:
   baseline" подравнява dt/dd текста в реда по обща базова линия,
   вместо да се разчита на inline-flow поведение. */
.woocommerce-cart td.product-name dl.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: baseline;
  margin: 0;
}

.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dd {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

.woocommerce-cart td.product-name dl.variation dt {
  font-weight: 600;
  color: #2c1f14;
}

.woocommerce-cart td.product-name dl.variation dd {
  color: #7a6152;
}

.woocommerce-cart td.product-name dl.variation dd p {
  margin: 0;
  line-height: inherit;
}

/* 2026-08-21 — mobile-only, "Проблем 2": Форма/Размер изглеждаха
   разместени на телефон, макар реалният HTML (проверено през реална
   HTTP заявка, не симулация) да е коректен — <dt>Форма:</dt><dd>Овал</dd>
   <dt>Размер:</dt><dd>XS</dd>, в правилния ред. Причината е чисто
   визуална и НЕ е в WooCommerce core, а в Astra темата — тя изключва
   WooCommerce-овия core woocommerce-smallscreen.css и слага СВОЙ
   заместител (astra/assets/.../woocommerce-smallscreen-grid.min.css),
   зареден с media="only screen and (max-width: 921px)" — потвърдено
   от реалния <link> таг на живо. Въпреки името "-grid", за тази
   таблица прави същото каквото и core файла: `td{display:block;
   text-align:right!important}` плюс `td::before{content:
   attr(data-title)": "; float:left}` за етикета "Продукт:". Нашето
   dl.variation dt/dd е нарочно "display: inline" (за да се четат в
   един ред "Форма: Овал"), но inline съдържание, увито до ляво
   плаващ елемент ВЪТРЕ в дясно подравнена клетка, се пренася ред по
   ред и всеки ред се подравнява отделно надясно — затова "XS"
   визуално кацаше до "Форма: Овал", а "Размер:" оставаше само на
   следващия ред, без стойност до себе си. Не е бъг в реда на dt/dd,
   а в тази float+text-align комбинация от Astra-ината подмяна.
   Поправка: изключваме продуктовото име от тази подредба — етикетът
   "Продукт:" пада на собствен ред (float:none), а реалното
   съдържание се подравнява наляво. Ширината на media заявката е
   921px (не 768px), за да покрие ТОЧНО същия breakpoint, на който
   Astra-иният файл се зарежда — по-тесен breakpoint тук би оставил
   празнина 769–921px, в която бъгът пак би се проявявал. */
@media (max-width: 921px) {
  .woocommerce-cart table.shop_table_responsive tr td.product-name {
    text-align: left !important;
  }
  .woocommerce-cart table.shop_table_responsive tr td.product-name::before {
    float: none;
    display: block;
    margin-bottom: 4px;
  }
}

/* ── Price & subtotal ── */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  color: #2c1f14;
}

.woocommerce-cart td.product-subtotal {
  font-weight: 600;
}

/* ── Quantity input ── */
.woocommerce-cart td.product-quantity .quantity input.qty {
  width: 60px;
  text-align: center;
  border: 1px solid #e8dfd5;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: 'Jost', sans-serif;
  color: #2c1f14;
  background: #fdf9f5;
  transition: border-color 0.2s ease;
}

.woocommerce-cart td.product-quantity .quantity input.qty:focus {
  outline: none;
  border-color: #b89678;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.15);
}

/* ── Actions row (coupon + update) ── */
.woocommerce-cart table.shop_table td.actions {
  background-color: #fdf9f5;
  border-top: 1px solid #e8dfd5 !important;
  padding: 16px 20px !important;
}

.woocommerce-cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* 2026-08-23: WooCommerce 10.x core (assets/js/frontend/cart.js,
   show_coupon_error()) вкарва грешката за невалиден купон директно
   ВЪТРЕ в .coupon — като <p class="coupon-error-notice" role="alert">,
   последно дете, СЛЕД бутона "Приложи купон" — нарочно, за да работи
   aria-describedby/role="alert" на screen reader (core accessibility
   поведение, не бъг и не нещо, добавено от темата — потвърдено с
   grep в plugins/woocommerce/assets/js/frontend/cart.js). На тесен
   flex ред с input+бутон това петно текст се блъска до тях, чупи се
   на срички и разбутва всичко. Success/info съобщенията НЕ минават
   през този път — те се показват през show_notice() в
   .woocommerce-notices-wrapper, най-отгоре на страницата (вижте
   .woocommerce-message/.woocommerce-info/.woocommerce-error по-долу
   в style.css), затова тук трябва да оправим само .coupon-error-notice.
   Решение: оставяме го на мястото му в DOM-а (не пипаме JS — това би
   счупило aria-describedby връзката), само визуално го качваме над
   input+бутона с flex order:-1 и full-width flex-basis — редът в
   DOM/ARIA остава непроменен, само визуалният ред се сменя. */
.woocommerce-cart td.actions .coupon .coupon-error-notice {
  order: -1;
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 10px 14px;
  border-radius: var(--vn-radius);
  border: 1px solid rgba(184, 28, 35, 0.25);
  background-color: rgba(184, 28, 35, 0.06);
  color: #8f151b;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
}

.woocommerce-cart td.actions .coupon input#coupon_code {
  border: 1px solid #e8dfd5;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-family: 'Jost', sans-serif;
  color: #2c1f14;
  background: #ffffff;
  width: 200px;
  transition: border-color 0.2s ease;
}

.woocommerce-cart td.actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: #b89678;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.15);
}

/* Action buttons */
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-cart td.actions button[name="update_cart"] {
  background-color: transparent !important;
  border: 1.5px solid #b89678 !important;
  color: #b89678 !important;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions button[name="update_cart"]:hover {
  background-color: #b89678 !important;
  color: #ffffff !important;
}

/* 2026-08-22 — mobile-only (под 921px, същия breakpoint като Astra-иния
   grid-compat файл по-долу в този файл): "ПРИЛОЖИ КУПОН" се пренасяше
   на два реда, полето за код беше твърде тясно, а "ОБНОВИ КОЛИЧКАТА"
   се блъскаше отдолу. Проверена реалната маркировка на живо преди
   поправката — "Обнови количката" НЕ е дете на .coupon, а пряк
   съсед в td.actions (виж cart.php override: .coupon съдържа само
   label+input+apply_coupon бутона, update_cart идва след затварящия
   таг на .coupon), затова е нужен отделен селектор за него, извън
   .coupon веригата.
   Двата "!important" за width са задължителни — Astra-иният
   woocommerce-smallscreen-grid.min.css (зареден на същия 921px
   breakpoint) вече слага `.coupon .button, input{width:48%}` с ID
   селектор (#content), по-висока суровата специфичност от нашия тук;
   само !important го бие надеждно, без значение от реда на зареждане
   на файловете. */
@media (max-width: 921px) {
  .woocommerce-cart .coupon {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .woocommerce-cart .coupon input#coupon_code,
  .woocommerce-cart .coupon button,
  .woocommerce-cart .actions button[name="update_cart"] {
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  /* .coupon е flex-direction:column тук — "flex: 1 1 100%" от основното
     правило по-горе означава flex-basis по ГЛАВНАТА ос, която в column
     е височината, не ширината; без тази корекция съобщението се
     опъва високо колкото input+бутона взети заедно. auto връща
     нормална, съдържание-съобразена височина; order:-1 остава в сила
     и тук, качва го визуално над полето и бутона. */
  .woocommerce-cart td.actions .coupon .coupon-error-notice {
    flex: 0 0 auto;
    margin: 0 0 4px !important;
  }

  .woocommerce-cart .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* 2026-08-22 — desktop: купон-редът (label+input+"Приложи купон") и
   "Обнови количката" подравнени вдясно, един под друг.
   td.actions си остава недокоснат table-cell (не display:flex) —
   direct display:flex върху него (colspan=6) счупва auto table
   layout-a: браузърът пресмята min-content ширината на цялата
   таблица по друг начин и .woocommerce grid-ът (1fr 380px) наду
   първата колона до ~970px вместо 640px, избутвайки дясната колона
   извън viewport-а (проверено на живо).
   .coupon се мести с float:right (не display:inline-flex) — Astra-
   иният compat файл слага "float:left" на .coupon, което вече я
   прави shrink-to-fit кутия; float:right !important просто сменя
   коя страна. Пробвахме и display:inline-flex!important с по-висока
   специфичност от Astra-иния конкурент — губеше необяснимо срещу
   собственото си НЕ-important "display:flex" правило по-горе в
   СЪЩИЯ файл (потвърдено през CDP CSS.getMatchedStylesForNode: и
   двете се показваха "matched", важното с по-висока специфичност,
   но computed style оставаше "flex" — изглежда като tie-break бъг в
   тази dev/canary версия на Chrome между обикновено и @media-wrapped
   правило за идентичен selector, невъзпроизведим в изолиран тест).
   float заобикаля целия проблем, защото не се конкурира с display.
   text-align:right на td.actions подрежда "Обнови количката"
   (inline-level бутон) вдясно по същия принцип, без нужда от float. */
@media (min-width: 922px) {
  .woocommerce-cart table.shop_table td.actions {
    text-align: right;
  }

  /* 2026-08-22 (ревизия) — float:right (предишния подход) даваше на
     .coupon shrink-to-fit ширина колкото label+input+бутон заедно,
     затова полето и бутонът се движеха вдясно СЛЕПЕНИ — нямаше начин
     да се отделят на "поле ляво / бутон дясно" в един ред. Вместо
     float: неутрализираме Astra-иния "float:left" с "float:none", и
     .coupon остава пълна ширина (width:100% на td.actions-а);
     display:flex вече е зададено в основното правило по-горе, тук
     само justify-content:space-between разпределя двата видими flex
     child-а (label-ът е screen-reader-text, position:absolute — не
     участва в flex layout-a) — input в левия край, бутон в десния.
     "Обнови количката" на реда под него получава идентична изрична
     ширина и margin-left:auto — понеже двата бутона в крайна сметка
     се подравняват спрямо ЕДНА и съща контейнерна ширина (td.actions
     content box), еднаквата ширина автоматично им дава еднакъв десен
     ръб, без значение по кой механизъм всеки е избутан там. */
  /* 2026-08-22 — "table.shop_table" добавен нарочно (както при
     display/coupon fix-а по-горе) + !important на margin-bottom:
     Astra-иният compat CSS слага ДВЕ конкуриращи правила с 4-класова
     специфичност — ".woocommerce-cart table.cart td.actions .coupon
     {margin-bottom:5px}" и "...table.cart td.actions .coupon
     {margin-bottom:0px}" — и двете по-специфични от голия
     ".woocommerce-cart td.actions .coupon" (3 класа) отгоре, затова
     нашият margin-bottom:12px тихо губеше и бутоните залепваха.
     Проверено на живо през CSS.getMatchedStylesForNode. */
  .woocommerce-cart table.shop_table td.actions .coupon {
    float: none;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 12px !important;
  }

  .woocommerce-cart td.actions button[name="apply_coupon"],
  .woocommerce-cart td.actions button[name="update_cart"] {
    width: 233px !important;
  }

  .woocommerce-cart td.actions button[name="update_cart"] {
    display: block;
    margin-left: auto;
  }
}

/* ── Cart collaterals (totals box) ── */
.woocommerce-cart .cart-collaterals {
  display: flex;
  justify-content: flex-end;
}

/* Специфичността тук ("4 класа": .woocommerce-cart .cart-collaterals
   .cart_totals) е нарочно завишена + !important на width/float — WC
   core's woocommerce-layout.css слага ".woocommerce .cart-collaterals
   .cart_totals{float:right;width:48%}" (3 класа), по-специфично от
   обикновен ".woocommerce-cart .cart_totals" (2 класа), и печели
   въпреки по-късното зареждане на нашия файл. Измерено на живо
   2026-08-22: computed width беше 182px точно (= 48% от 380px
   колоната) вместо очакваните ~380px — текстът в тотала се чупеше
   буква по буква заради това. */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #ffffff;
  border: 1px solid #e8dfd5;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  width: 100% !important;
  max-width: 420px;
  float: none !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--vn-font-heading, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c1f14;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e8dfd5;
}

.woocommerce-cart .cart_totals table.shop_table {
  border: none !important;
  border-radius: 0;
  width: 100%;
  background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 14px 0 !important;
  font-size: 0.9rem;
  color: #2c1f14;
  border: none !important;
  background: none;
  border-bottom: 1px solid #f0e8df !important;
}

.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* 2026-08-23 — "ОБЩО": премахнахме случайната card-рамка (виж
   style.css, .woocommerce .cart_totals/.order-total бъга) —
   визуалната тежест на финалната сума вече идва САМО от размер и
   удебеляване, не от рамка, за да не се конкурира визуално с
   истинския бутон "Към плащане" под нея. padding: 14px 0 !important
   (същото както другите редове горе, symmetric top/bottom, вместо
   предишното padding-top:16px-само — то оставяше реда с неравна
   горна/долна кора спрямо съседите). */
.woocommerce-cart .cart_totals table.shop_table .order-total th,
.woocommerce-cart .cart_totals table.shop_table .order-total td {
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: #2c1f14;
  padding: 14px 0 !important;
}

/* 2026-08-23 — разстоянието "Доставка" → "ОБЩО" беше ~60px, докато
   между другите редове е ~20px. Причината не е в td padding-а (той е
   еднакъв 14px навсякъде) — вътре в тази клетка стои <p> (плейсхолдър
   текстът "Доставката се изчислява..." или, при реален адрес,
   <ul>+<p class="woocommerce-shipping-destination">), и параграфът
   носи собствен margin-bottom (~26px на десктоп, browser/WC default,
   не е нулиран никъде другаде в темата) — добавен ВЪРХУ td-то padding,
   само в този ред. Нулираме margin-а на директните деца, за да остане
   само еднаквия td padding като разстояние — както при всички
   останали редове, потвърдено на живо и на десктоп, и на 390px. */
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td > p,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td > ul {
  margin: 0 !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td > ul + p {
  margin-top: 8px !important;
}

/* Checkout button */
.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 1.25rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #b89678 !important;
  color: #ffffff !important;
  border-color: #b89678 !important;
  border-radius: 10px;
  padding: 14px 24px;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #9a7a5e !important;
  border-color: #9a7a5e !important;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 640px) {
  .woocommerce-cart table.shop_table thead {
    display: none;
  }

  .woocommerce-cart table.shop_table td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px !important;
    border-bottom: none !important;
  }

  .woocommerce-cart table.shop_table td::before {
    content: attr(data-title) ': ';
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a6152;
    min-width: 80px;
  }

  .woocommerce-cart table.shop_table td.product-remove::before,
  .woocommerce-cart table.shop_table td.product-thumbnail::before {
    display: none;
  }

  .woocommerce-cart .cart-collaterals {
    justify-content: stretch;
  }

  .woocommerce-cart .cart_totals {
    max-width: 100%;
  }
}

/* 2026-08-22 — мобилни редове ЦЕНА / КОЛИЧЕСТВО / СУМА: етикетите да
   започват от една и съща лява линия, стойностите — вдясно.
   Astra рендира тия td-та като block с ::before{float:left} (собствен
   responsive table CSS), което печели въпреки нашето по-горе
   ".shop_table td{display:flex}" (max-width:640px, без !important) —
   проверено на живо: computed display беше "block", не "flex", за
   точно тези клетки. table.shop_table добавен за по-висока
   специфичност + !important — установеният модел на тази страница
   за печелене срещу Astra.
   Продуктовата клетка (снимка + име + dl.variation "Форма"/"Размер")
   НАРОЧНО е изключена — тя вече е коректно ляво подравнена по друг
   механизъм (нейният ::before вече е float:none) и grid с една stray
   колона би разбъркал снимка/име/dl вътре в нея. */
@media (max-width: 921px) {
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-subtotal {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: baseline;
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table td.product-price::before,
  .woocommerce-cart table.shop_table td.product-quantity::before,
  .woocommerce-cart table.shop_table td.product-subtotal::before {
    float: none !important;
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table td.product-price > *,
  .woocommerce-cart table.shop_table td.product-quantity > *,
  .woocommerce-cart table.shop_table td.product-subtotal > * {
    justify-self: end;
  }
}

/* 2026-08-23 — редът с купона в Обобщение блока ("-54.78 €
   [Премахване]") се чупеше по средата на числото на тесен екран
   (потвърдено на живо: 22 бр. продукт × 24.90 + 10% купон = точно
   този пример). Причината е същата като при ЦЕНА/КОЛИЧЕСТВО/СУМА-
   фикса по-горе: Astra-иният woocommerce-smallscreen-grid.min.css
   слага td{display:block} + td::before{content:attr(data-title)": ";
   float:left} на 921px, печели срещу по-ниско-специфичното
   .shop_table td{display:flex} (max-width:640px) по-долу в този
   файл — потвърдено computed display:"block" за точно тази клетка.
   ВАЖНО: тук НЕ използваме grid (за разлика от ЦЕНА/КОЛИЧЕСТВО/СУМА
   по-горе) — тази клетка съдържа разхвърляни възли ("-" текстов
   възел, span за сумата, интервал, <a> линк, не един-единствен
   обвиващ елемент), а CSS grid auto-placement разпределя всеки
   отделен top-level "item" (включително самотния "-" текстов възел)
   в собствена клетка по имплицитната row/column мрежа — проверено
   на живо, "-" кацаше до label-а на РЕДА ОТГОРЕ, а "54.78 € Премахни"
   пропадаше на следващ ред, визуално разделяйки знака минус от
   числото. block вместо grid избягва изцяло този проблем: ::before
   пада на собствен ред (display:block, float:none), а ВСИЧКО
   останало (текст + span + линк) остава в ЕДИН общ inline поток на
   следващия ред — вече с пълната ширина на клетката (не свита от
   плаващия label), затова "-54.78 € Премахни" се събира на един
   ред естествено, без нужда от изкуствено разделяне на колони. */
/* 2026-08-23 (ревизия) — редът с купона не приличаше на съседите си
   (Междинна сума/Общо): при ≤921px Astra слага text-align:right на
   ВСИЧКИ td в тази таблица (по подразбиране, непипнато от нас за
   другите редове) — стойността седи вдясно на реда, до float:left
   label-а. Първият вариант на тази поправка задаваше
   text-align:left !important САМО тук, за да избегне mid-number
   wrap бъга — but това счупи подравняването спрямо съседните
   редове (потвърдено на живо: subtotalTd text-align:"right",
   discountTd text-align:"left" — точно разминаването, което личеше
   визуално). Сега: label-ът (::before) остава block/float:none на
   собствен ред (нужно е — "Код за отстъпка: <код>" е с променлива,
   често по-голяма дължина от late другите къси labels и се нуждае
   от своя ред, за да не се стеснява стойността до нея), но самата
   стойност вече е text-align:right — както Общо/Междинна сума.
   При нужда "Премахни" пада на собствен ред ПОД сумата (нормално
   пренасяне на inline съдържание), но остава подравнен вдясно
   заедно със сумата — без допълнителен CSS за това, text-align:right
   го прави автоматично на всеки пренесен ред. */
@media (max-width: 921px) {
  .woocommerce-cart table.shop_table tr.cart-discount td {
    display: block !important;
    text-align: right !important;
  }

  .woocommerce-cart table.shop_table tr.cart-discount td::before {
    display: block !important;
    float: none !important;
    text-align: left !important;
    margin-bottom: 4px;
  }

  .woocommerce-cart table.shop_table tr.cart-discount td .woocommerce-Price-amount {
    white-space: nowrap;
  }
}

/* 2026-08-23 — линкът "Премахни" (текстът без скоби идва от PHP
   филтъра vn_clean_coupon_remove_link() в functions.php) да изглежда
   като дискретна вторична опция, не като случаен текст по средата
   на сумата — по-малък, приглушен цвят, подчертаване само на hover.
   Важи на десктоп и мобилно еднакво, извън media заявката отгоре. */
.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
  margin-left: 6px;
  color: #a89484;
  font-size: 0.8rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.woocommerce-cart .cart_totals .woocommerce-remove-coupon:hover {
  color: var(--vn-accent, #b89678);
  text-decoration-color: currentColor;
}

/* 2026-08-22 — намалява разстоянието "Количка" → съдържание, САМО
   на тази страница (потвърдено с потребителя да не е global fix).
   Astra слага ".woocommerce-page .woocommerce{padding-top:1.5rem}"
   (динамичен customizer CSS, не статичен файл — важи на ВСЯКА
   WooCommerce страница: shop, cart, checkout, моят акаунт, продукт).
   Тук го смъкваме само за .woocommerce-cart, за да не пипаме
   разстоянието на другите WC страници. Комбинирано с row-gap:0
   fix-а по-долу, отрязва общо ~64px от заглавие до таблица (127px
   → ~63px, точно наполовина, проверено на живо). */
.woocommerce-cart .woocommerce {
  padding-top: 3px !important;
}

/* ============================================================
   CART — 2-колонен layout на десктоп, 2026-08-22
   Реалната структура (проверена през жива HTTP заявка, не по
   темплейта наизуст): вътре в WooCommerce-овия shortcode wrapper
   "<div class="woocommerce">" стоят ТРИ преки деца, в този ред:
   1) "<div class="woocommerce-notices-wrapper">" (празно, освен
      когато има съобщение за грешка/успех — купон, "added to cart"
      и т.н.; идва от wc_print_notices() в самия shortcode темплейт,
      ПРЕДИ cart.php темплейта изобщо да се рендира),
   2) "<form class="woocommerce-cart-form">" (таблицата с продуктите),
   3) "<div class="cart-collaterals">" (блокът "Обобщение").
   Затова grid-ът е на ".woocommerce", не на ".woocommerce-cart-form"
   или обратно — те са СЪСЕДИ, не един е родител на друг.
   Двете неща, за които трябваше да се внимава:
   1) WooCommerce core слага floats built-in върху "table.cart"'s
      съседи чрez ".cart-collaterals{float:right;width:48%}" (общия
      WC core stylesheet) — с "float: none !important" по-долу се
      неутрализира, иначе float продължава да важи ВЪТРЕ в grid
      клетката (float не се маха автоматично от display:grid на
      родителя).
   2) ".woocommerce-notices-wrapper" е ТРЕТИ, необявен съсед — без
      изрично място в grid-а щеше да се auto-placement-не в първата
      свободна клетка по подразбиране (ред 1, колона 1), т.е. точно
      върху/зад таблицата с продуктите. "grid-column: 1 / -1" го
      разпъва на пълна ширина, на собствен ред отгоре — работи и
      когато е празен (без видима височина), и когато реално показва
      съобщение за невалиден купон и т.н. */
@media (min-width: 922px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    /* column-gap (между таблицата и "Обобщение") си остава 40px;
       row-gap 0 нарочно — 2026-08-22: с общ "gap:40px" тази
       разстояние важеше и МЕЖДУ notices-wrapper реда и формата под
       него, дори когато notices е напълно празен (обичайният
       случай) — чист прахосан отстъп, видим като част от твърде
       голямата "празнина" под заглавието "Количка". row-gap:0 го
       премахва; когато notices-wrapper РЕАЛНО показва съобщение
       (грешен купон и т.н.), то просто ляга директно над формата —
       приемливо, рядък случай. */
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
  }

  .woocommerce-cart .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    margin: 0;
  }

  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
    width: 100% !important;
    float: none !important;
    margin: 0;
  }
}

/* ============================================================
   REVIEW FORM
   ============================================================ */

#review_form .comment-reply-title {
  font-family: var(--vn-font-heading);
  font-size: 1.4rem;
  color: var(--vn-dark);
}

#review_form .stars a {
  color: var(--vn-accent);
  font-size: 1.2rem;
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

/* 2026-08-23: селекторът беше без direct-child комбинатор (">"), затова
   border-bottom-ът, мислен само за заглавието на секцията "Подобни
   продукти", хващаше и h2.woocommerce-loop-product__title във всяка карта
   долу (те също са h2, вложени по-надолу в същия .related.products/
   .upsells.products контейнер) — линия до ръба на всяка карта, каквато
   в shop/начална страница я няма. WooCommerce маркъпът е
   <div class="related products"><h2>…</h2><ul class="products">…</ul></div>,
   т.е. заглавието е директно дете — ">" го изолира без да пипа картите. */
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--vn-font-heading);
  font-size: 1.8rem;
  color: var(--vn-dark);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--vn-border);
}

/* ============================================================
   COUPON FIELD
   ============================================================ */

.woocommerce-cart .coupon {
  border: 1px dashed var(--vn-border);
  border-radius: var(--vn-radius);
  padding: 1rem 1.25rem;
  background-color: var(--vn-bg-alt);
}
/* ^ 2026-08-24: narrowed from ".woocommerce form.checkout_coupon,
   .woocommerce-cart .coupon" to cart-only — this box style never
   actually painted on /cart/ anyway (the more specific
   ".woocommerce-cart td.actions .coupon{border:none!important}"
   rule above always won), and on /checkout/ it was the ONLY rule
   touching that form, so its leftover dashed border rendered
   as-is there — replaced below with real checkout-specific styling. */

/* ============================================================
   CHECKOUT — coupon box, error notice, form-field radius
   2026-08-24: checkout uses WooCommerce's checkout/form-coupon.php
   template, a completely different DOM from cart/form-cart.php — none
   of the cart-only ".coupon"/"td.actions" rules above ever matched
   here. Verified live (headless Chrome + CDP: submitted an invalid
   code for real, read computed styles and matched CSS rules via
   getMatchedStylesForNode) — five separate gaps found and fixed here.
   ============================================================ */

/* 1) Coupon box: was dashed (see note above) — solid border matches
   the site's other card-style boxes (cart_totals, widgets, #payment). */
.woocommerce-checkout form.checkout_coupon {
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  background-color: var(--vn-bg-alt);
}

/* 2) WooCommerce's own Customizer color scheme ("Base Color") writes
   a literal #000000 into an auto-generated <style id="woocommerce-
   general-inline-css"> for ".woocommerce-message, .woocommerce-info"
   — confirmed live via getMatchedStylesForNode: it beats WC core's
   blue default AND Astra's compat CSS (both set border-top-color to
   blue, this inline block loads later). ".woocommerce-message"
   (success notices, e.g. "added to cart") is already neutralised
   further up this file; ".woocommerce-info" — the "Имате купон?"
   prompt on checkout, and any other info-type notice site-wide — was
   never covered, so its 3px top border rendered as plain black. */
.woocommerce-info {
  border-top-color: var(--vn-accent) !important;
}

/* 3) Checkout's coupon row, made flex so the error notice (next
   point) can go full-width above it. The "Apply coupon" button's
   radius is deliberately left alone here — it, and every other button
   site-wide, gets its shape from "--vn-btn-radius" (2px, !important,
   defined near the top of style.css) which already reaches this
   button too; cart's own apply_coupon rule sets a literal 8px but
   that declaration has never actually painted (checked live: cart's
   button computes to 2px as well, same !important rule wins there)
   — matching it here would have made checkout the odd one out
   instead of cart. Verified live at both desktop and a narrow (400px)
   viewport — flex-wrap lets the button drop under the input on its
   own when the row doesn't fit, no separate breakpoint needed the way
   cart's did. */
.woocommerce-checkout form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.25rem;
}

/* WooCommerce wraps the input in <p class="form-row-first"> and the
   button in <p class="form-row-last"> — display:contents un-boxes
   both <p>s so their children (label/input, error span, button)
   become direct flex items of the row above, instead of being stuck
   one level too deep to take part in it. Selector matching and
   role="alert"/aria-describedby on the error span are untouched by
   this — display:contents only removes the <p>'s own box, not the
   element or its place in the DOM. */
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
  display: contents;
}

.woocommerce-checkout form.checkout_coupon input#coupon_code {
  flex: 1 1 220px;
  margin: 0;
}

.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
  flex: 0 0 auto;
  margin: 0;
}

.woocommerce-checkout form.checkout_coupon .clear {
  display: none; /* clearfix <div> is meaningless once the row is flex */
}

/* 4) The invalid-coupon message itself. Checkout's DOM shape differs
   from cart's: WC inserts <span class="coupon-error-notice"> as the
   LAST child INSIDE <p class="form-row-first"> (right after the
   input), not as a sibling of the whole coupon row like on cart —
   confirmed live by submitting a bogus code and reading the real DOM.
   Left alone it was a 227px-wide inline span crammed next to/above
   the button, wrapping across 3 lines. With the <p>s flattened above,
   the same "order:-1 + flex-basis:100%" trick used for cart's own
   coupon-error-notice now works here too — full-width banner above
   the input+button row, in normal flow (nothing overlaps or clips). */
.woocommerce-checkout form.checkout_coupon .coupon-error-notice {
  order: -1;
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--vn-radius);
  border: 1px solid rgba(184, 28, 35, 0.25);
  background-color: rgba(184, 28, 35, 0.06);
  color: #8f151b;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* 5) Wider than just the coupon: EVERY checkout field — billing
   inputs, the order-notes textarea, and the Select2-powered country/
   state dropdowns — was rendering with Astra's base 0px radius.
   Nothing checkout-specific ever set --vn-radius on these, unlike
   cart/shop/single-product inputs elsewhere in this file. Select2
   hides the real <select> and renders its own ".select2-selection"
   box (confirmed live: billing_country carries "select2-hidden-
   accessible"), so the visible dropdown needs its own selector — the
   native <select> rule covers the brief pre-JS state and any select
   Select2 doesn't touch. Scoped to "--single" (the closed-selection
   box) so Select2's own corner-flattening rules for the open/attached
   states (".select2-container--open .select2-selection--single" etc.,
   which zero out only the corners touching the results dropdown)
   still apply on top of this by construction (no "!important" here to
   compete with them) — the closed state itself (8px, all four corners)
   was confirmed live; a synthetic click couldn't get Select2's JS to
   actually open the dropdown in this session's headless check, so the
   open-state corner behavior is inferred from cascade order, not
   independently confirmed on screen.
   "!important" required on the first rule: Astra's own WC-compat CSS
   (woocommerce-grid.min.css) sets ".woocommerce-page textarea" etc.
   to "border-radius:0!important" at equal raw specificity to a plain
   "textarea" selector — confirmed live via getMatchedStylesForNode
   that a non-important version of this rule (higher specificity,
   ".woocommerce-checkout textarea.input-text") still lost to Astra's
   !important one; !important was the only thing that actually flips
   it, matching every other radius/button override already in this
   codebase for the same reason. */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea.input-text,
.woocommerce-checkout select {
  border-radius: var(--vn-radius) !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
  border-radius: var(--vn-radius); /* no !important here on purpose —
    would also beat Select2's own unimportant corner-flattening rules
    for the open/attached states, leaving a seam where the box meets
    the results dropdown; unneeded anyway, this already wins as-is. */
}

/* 2026-08-24 — "Доставяме само на територията на България" (see
   vn_checkout_bg_only_notice() in functions.php). Deliberately plain:
   one line, muted color, no border/background/icon — the user asked
   for the opposite of the coupon-error-notice treatment above. */
.vn-checkout-bg-only-note {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--vn-text-muted);
  font-family: var(--vn-font-body);
}

/* 2026-08-24 — validated-field border was rendering bright stock
   green. Two sources found (grep across WC core + Astra's WC-compat
   CSS, no theme rule anywhere set green — confirmed nothing here was
   already trying to fix this):
     WC core (woocommerce.css):     border-color: var(--wc-green)   (#7ad03a)
     Astra (woocommerce-grid.min.css): border-color: #69bf29 (hardcoded, no var)
   Checked live (headless Chrome, real jQuery 'validate' trigger, both
   desktop and a 375px mobile viewport): in THIS build neither of
   those actually wins for the plain <input> case — a plain "border"
   shorthand rule (input[type="text"] etc., no validated-state scoping)
   from Astra's main.min.css or this file's own sitewide input-border
   rule ends up resolving the border-color regardless of validation
   state, so the bright green never showed for basic text fields in
   testing. Left in anyway, deliberately over-defensive: this cascade
   is fragile (three rules across two stylesheets touching the same
   property, order/specificity interaction not fully pinned down), and
   the ".select2-container" branch of both source rules WAS untested
   (country/state dropdowns don't reach "not '.select2-container--
   open'" in an automated pass) — a small, harmless override here
   removes the risk entirely rather than leaving it to cascade chance. */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
  border-color: var(--vn-accent) !important;
}

/* Same fix at the CSS-variable source, in case anything else on the
   site (now or later) reads --wc-green directly instead of a rule
   this file already overrides above. */
:root {
  --wc-green: var(--vn-accent);
}

/* 2026-08-24 — shipping method label ("Доставка до офис на Еконт:
   Не е калкулирано" etc.) reported as visually cut off. Checked live
   at both desktop and 375px mobile, default (pre-calculated) state:
   the DOM text was already complete and un-truncated everywhere in
   this build — no element in the label's whole ancestor chain (li,
   ul, td, tr, table, form, .woocommerce) had scrollWidth exceeding
   clientWidth, and none carried overflow:hidden/white-space:nowrap/
   text-overflow:ellipsis. Source string confirmed complete too (WC
   plugin's own .po file: msgid "Not calculated" → msgstr "Не е
   калкулирано", nothing longer upstream that could be getting cut).
   Could not reproduce the report from static/DOM inspection alone —
   possibly a state only visible once a real price/office is selected
   through the Econt widget's own live-search UI (couldn't drive that
   through automation — see prior conversation). Adding this rule
   anyway as a cheap, harmless safeguard in case some other/future
   state does add wrapping constraints here; if the report persists
   after this, it's likely inside the Econt picker's own selected-
   office chip (bulgarisation-for-woocommerce's
   ".multiselect__tag" — background:#41b883, which already has its own
   deliberate white-space:nowrap+ellipsis for long office names — a
   separate, third-party widget element, not this label). */
.woocommerce-shipping-methods li label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ============================================================
   CHECKOUT STEPS INDICATOR (if using Astra checkout)
   ============================================================ */

.ast-checkout-steps .ast-checkout-step.active {
  color: var(--vn-accent);
  border-color: var(--vn-accent);
}

/* ============================================================
   PRODUCT VARIATION SELECT — native hidden when JS active
   ============================================================ */

/* Fallback: native select before JS initialises */
.variations .value select {
  display: block;
  width: 100%;
  max-width: 340px;
  background-color: #ffffff;
  border: 1px solid #b89678;
  border-radius: 8px;
  color: #2c1f14;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  padding: 12px 40px 12px 16px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  line-height: 1.4;
}

/* Hide native select once custom dropdown is built */
.variations .value select.vn-select-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

/* ============================================================
   CUSTOM VN-SELECT DROPDOWN
   ============================================================ */

.vn-select {
  position: relative;
  width: 100%;
  max-width: 340px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  user-select: none;
  -webkit-user-select: none;
}

/* Trigger button */
.vn-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 12px 16px;
  background: #ffffff;
  border: 1px solid #b89678;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 47px;
}

.vn-select__trigger:hover {
  border-color: #9a7a5e;
}

.vn-select--open .vn-select__trigger {
  border-color: #b89678;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.18);
}

/* Label text inside trigger */
.vn-select__label {
  flex: 1;
  color: #2c1f14;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vn-select__label--placeholder {
  color: #7a6152;
}

/* Chevron arrow */
.vn-select__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
}

.vn-select--open .vn-select__arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.vn-select__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
  border: 1px solid #b89678;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px rgba(44, 31, 20, 0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
}

.vn-select__dropdown::-webkit-scrollbar {
  width: 4px;
}
.vn-select__dropdown::-webkit-scrollbar-track {
  background: #f7f2eb;
}
.vn-select__dropdown::-webkit-scrollbar-thumb {
  background: #b89678;
  border-radius: 2px;
}

.vn-select--open .vn-select__dropdown {
  display: block;
}

/* Option items */
.vn-select__option {
  padding: 10px 16px;
  color: #2c1f14;
  cursor: pointer;
  line-height: 1.4;
  transition: background-color 0.12s ease;
  font-size: 0.95rem;
}

.vn-select__option:hover {
  background-color: #f7f2eb;
}

.vn-select__option--placeholder {
  color: #7a6152;
  font-style: italic;
}

.vn-select__option--selected {
  background-color: rgba(184, 150, 120, 0.14);
  font-weight: 500;
}

.vn-select__option--disabled {
  color: #c0b0a0;
  cursor: not-allowed;
  text-decoration: line-through;
}

.vn-select__option--disabled:hover {
  background-color: transparent;
}

/* ============================================================
   STOCK STATUS
   ============================================================ */

.woocommerce div.product .stock {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.in-stock {
  color: #4a7c59 !important;
}

.out-of-stock {
  color: #a52834 !important;
}

/* Hide SKU (Код: N/A) */
.woocommerce div.product .sku_wrapper {
  display: none;
}