/*
Theme Name: VeinNails
Theme URI: https://veinnails.com
Description: Child theme за VeinNails - онлайн магазин за press-on нокти. Изграден върху Astra с крем/бежов дизайн.
Author: VeinNails
Author URI: https://veinnails.com
Template: astra
Version: 1.10.0
Text Domain: veinnails-theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
  /* Color scheme change, 2026-08-16: background pure white, body/heading
     text pure black. --vn-accent* kept for buttons/badges/price (brand
     accent, not requested to change) — see the color-scheme note below
     for what still uses it. */
  --vn-bg:          #ffffff;
  --vn-bg-alt:      #ffffff;
  --vn-bg-card:     #ffffff;
  --vn-accent:      #b89678;
  --vn-accent-dark: #9a7a5e;
  --vn-accent-light:#d4b99a;
  --vn-dark:        #000000;
  --vn-text:        #000000;
  --vn-text-muted:  #595959;
  --vn-border:      #e0d5c5;
  --vn-white:       #ffffff;

  --vn-font-heading: 'Cormorant Garamond', Georgia, serif;
  --vn-font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --vn-radius-sm:   4px;
  --vn-radius:      8px;
  --vn-radius-lg:   16px;
  --vn-radius-full: 50px;

  --vn-shadow-sm:   0 1px 3px rgba(44, 31, 20, 0.08);
  --vn-shadow:      0 4px 16px rgba(44, 31, 20, 0.10);
  --vn-shadow-lg:   0 8px 32px rgba(44, 31, 20, 0.14);

  --vn-transition:  0.25s ease;

  /* 2026-08-20: standardized button palette (site owner's spec) — one
     source of truth so every button, on every page, resolves to the
     exact same values instead of the ~15 separately-hardcoded #b09070/
     var(--vn-accent) blocks that had accumulated across the file.
     Primary = solid CTA ("Виж продукт", "Купи", "Добави в количката",
     "Разгледай колекцията", "Преглед на количката", "Поръчка").
     Secondary = outline ("Научи повече за нас", "Виж всички продукти"). */
  --vn-btn-primary-bg:       #b09070;
  --vn-btn-primary-bg-hover: #9a7b5e;
  --vn-btn-primary-color:    #ffffff;
  --vn-btn-secondary-color:       #8a6d52;
  --vn-btn-secondary-border:      #c9b299;
  --vn-btn-secondary-bg-hover:    #b09070;
  --vn-btn-secondary-color-hover: #ffffff;
  --vn-btn-disabled-bg:     #e5e0d8;
  --vn-btn-disabled-color:  #a89b8c;
  --vn-btn-radius:   2px;
  --vn-btn-font-size: 12px;
  --vn-btn-font-weight: 400;
  --vn-btn-letter-spacing: 0.2em;
  --vn-btn-padding: 15px 36px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--vn-bg);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.ast-site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--vn-font-heading);
  color: var(--vn-dark);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 3vw, 2rem); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.15rem; }

p, li, td, th, label, input, textarea, select {
  font-family: var(--vn-font-body);
}

a {
  color: var(--vn-dark);
  transition: color var(--vn-transition);
  text-decoration: none;
}

/* Color-scheme change, 2026-08-16: hover no longer changes color —
   underline + slightly bolder weight instead, so links stay black at
   rest and on hover alike. (Buttons/.ast-btn are unaffected — they set
   their own color with !important further down.) */
a:hover {
  color: var(--vn-dark);
  text-decoration: underline;
  font-weight: 600;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header,
#masthead,
.ast-masthead-custom-spacing,
.ast-primary-header-bar {
  background-color: var(--vn-bg) !important;
  border-bottom: 1px solid var(--vn-border);
}

/* 2026-08-17: explicit vertical-padding cap on every header wrapper.
   Checked the live served CSS (child theme + Astra core + inline
   dynamic CSS) top to bottom — none of #masthead, .ast-main-header-wrap,
   .ast-primary-header-bar, .site-primary-header-wrap, or .ast-container
   carry any padding/margin beyond the 65px min-height already covered
   by hb-header-height. So there's no single "culprit" wrapper adding
   height in the code as currently served. This rule is a hard ceiling
   (max 10px, well under that in practice) in case something outside
   the stylesheet — a plugin, the logged-in admin bar context, a stale
   cache on the viewing end — is adding padding I can't see from a
   plain HTTP fetch. If the header is still tall after a hard refresh
   with this in place, the cause isn't padding on these wrappers. */
#masthead,
.ast-main-header-wrap,
.site-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2026-08-17: found via DevTools (not by me — my earlier padding/margin
   sweep missed it because it isn't padding). Astra core
   (main.min.css): ".ast-header-break-point .main-header-bar
   {display:block;line-height:3}" — line-height:3 inherited down
   inflates the row's rendered height well past its 65px min-height,
   since line-height participates in line-box height for the header's
   inline/inline-block descendants. ".ast-header-break-point" is added
   to <body> by wp_is_mobile() server-side (extras.php) as a first-paint
   guess, then corrected client-side by JS comparing actual
   window.innerWidth to the 921px breakpoint (navigation.js
   updateHeaderBreakPoint()) — so it's legitimately present whenever the
   viewport is genuinely under 921px, INCLUDING a desktop browser with
   DevTools docked wide enough to push the live viewport below that
   width. Reset it back to a sane value so that mode never inflates the
   header, regardless of why the class is present. */
.ast-header-break-point .main-header-bar {
  line-height: 1 !important;
}

/* Real logo uploaded 2026-08-16 (veinnails-logo.png, attachment 3854,
   native 360×207, aspect ratio 1.739) — Site Title display is off in
   astra-settings, so this is just width control; showing/hiding of the
   logo image vs. title text is handled by Astra via custom_logo +
   display-site-title-responsive.
   Widths synced to match astra-settings['ast-header-responsive-logo-width']
   (100/95/80), which itself never generates competing CSS for a raster
   (non-SVG) logo on Header Builder — this rule is the only thing that
   actually controls the rendered size, so it's the one kept in sync by
   hand. At 100/95/80 wide, the logo is ≈57.5/54.6/46.0px tall; with the
   8px .site-branding padding below that's a ≈65.5/62.6/54.0px content
   floor — matches hb-header-height (65/65/55) closely, off by <1px. */
.site-header .custom-logo,
.ast-site-identity .custom-logo-link img {
  width: 100px;
  height: auto;
  max-height: none;
  display: block;
}

@media (max-width: 921px) {
  .site-header .custom-logo,
  .ast-site-identity .custom-logo-link img {
    width: 95px;
  }
}

@media (max-width: 768px) {
  .site-header .custom-logo,
  .ast-site-identity .custom-logo-link img {
    width: 80px;
  }
}

/* Text logo styling when site title is displayed */
.ast-site-title {
  font-family: var(--vn-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tagline */
.ast-site-description {
  font-family: var(--vn-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-text-muted);
}

/* Primary navigation */
.ast-nav-menu > li > a,
.main-navigation a,
#site-navigation a {
  font-family: var(--vn-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vn-text) !important;
  transition: color var(--vn-transition);
}

.ast-nav-menu > li > a:hover,
.ast-nav-menu > li.current-menu-item > a {
  color: var(--vn-dark) !important;
  text-decoration: underline;
}

/* Dropdown menus */
.ast-nav-menu .sub-menu,
.ast-nav-menu .children {
  background-color: var(--vn-bg-card) !important;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  box-shadow: var(--vn-shadow);
}

.ast-nav-menu .sub-menu a {
  color: var(--vn-text) !important;
  font-size: 0.85rem;
}

.ast-nav-menu .sub-menu a:hover {
  color: var(--vn-dark) !important;
  text-decoration: underline;
  background-color: var(--vn-bg-alt) !important;
}

/* Header cart count badge — icon color itself is handled once, in the
   HEADER icons block below (var(--vn-dark), not hardcoded). */
.ast-site-header-cart .count {
  background-color: var(--vn-accent) !important;
  color: var(--vn-white) !important;
  border-radius: 50%;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* 2026-08-20: canonical PRIMARY (solid) button — the single source of
   truth every other primary-button rule in this file now points back
   to, instead of re-declaring its own #b09070.
   2026-08-20, follow-up: shop-grid "Виж продукт" and the wishlist
   table's buttons were still rendering pill-shaped. Traced it directly
   in the live served CSS — two DIFFERENT competing rules tie this
   selector's specificity (single class, 0-1-0) and win on cascade
   order (printed later in <head> than this stylesheet):
   Astra's own "button,.ast-button,.button,...{border-radius:4px}"
   (main.min.css) and, worse, WordPress core's own global styles block
   "\:root :where(.wp-block-button__link){border-radius:50px;...}"
   (global-styles-inline-css — :where() zeroes its own specificity but
   :root still counts as one class, tying this rule exactly). Added
   !important throughout so this can't lose a tie against either. */
.ast-btn,
button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
  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;
  background: var(--vn-btn-primary-bg) !important;
  color: var(--vn-btn-primary-color) !important;
  border: none !important;
  border-radius: var(--vn-btn-radius) !important;
  padding: var(--vn-btn-padding) !important;
  cursor: pointer;
  transition: background .3s ease;
}

.ast-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.wp-block-button__link:hover {
  background: var(--vn-btn-primary-bg-hover) !important;
  color: var(--vn-btn-primary-color) !important;
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.button:disabled,
.button.disabled {
  background: var(--vn-btn-disabled-bg) !important;
  color: var(--vn-btn-disabled-color) !important;
  cursor: not-allowed !important;
}

/* Canonical SECONDARY (outline) button — "Научи повече за нас", "Виж
   всички продукти" and anything else marked .alt/.secondary/.vn-btn--outline
   or .vn-btn--ghost (both aliased to the same outline look below). */
.button.alt,
.button.secondary {
  background: transparent !important;
  color: var(--vn-btn-secondary-color) !important;
  border: 1px solid var(--vn-btn-secondary-border) !important;
  border-radius: var(--vn-btn-radius) !important;
}

.button.alt:hover,
.button.secondary:hover {
  background: var(--vn-btn-secondary-bg-hover) !important;
  color: var(--vn-btn-secondary-color-hover) !important;
  border-color: var(--vn-btn-secondary-bg-hover);
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: var(--vn-bg-card);
  border: 1.5px solid var(--vn-border);
  border-radius: var(--vn-radius);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  transition: border-color var(--vn-transition), box-shadow var(--vn-transition);
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--vn-accent);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.15);
  outline: none;
}

/* 2026-08-22 — "input[type=search]" липсваше от списъка по-горе (единствения
   пропуск — text/email/password/tel/number си имаха фокус стил). Резултат:
   полето за търсене в хедъра (мобилно и desktop) падаше на браузърния native
   default за фокусирано <input type="search"> — "border:1px dotted
   rgb(4,107,210)" (потвърдено на живо: НЕ е outline — outline-style беше
   вече "none", нито идва от Astra — нейният ".search-field:focus" пипа само
   width/padding, не border/цвят). Добавянето по-горе решава го за всякъде
   с базовата тема консистенция; тук — само :focus-visible вариант за
   клавиатурна навигация конкретно в мобилния toggle-контейнер, поискан
   изрично, за да е сигурно видим при Tab. */
/* 2026-08-22 — desktop "синя рамка": ОКАЗА СЕ, че не е :focus стил
   изобщо (input#search-field's own border вече беше оправен по-горе)
   — това е отделен, невключен в :focus, ПОСТОЯНЕН border на самата
   <form class="search-form"> обвивка, докато desktop dropdown-ът е
   отворен. Източник (потвърдено през CSS.getMatchedStylesForNode):
   Astra's own ".ast-desktop .ast-header-search .slide-search
   .search-form{border:2px solid var(--ast-global-color-0)}" —
   global-color-0 очевидно резолва до синьо на тази палитра (никога
   не е бил зададен явно за бранда), несвързано с :focus. */
.ast-desktop .ast-header-search .slide-search .search-form {
  border-color: var(--vn-accent) !important;
}

.ast-mobile-header-wrap .search-field:focus,
.ast-mobile-header-wrap .search-field:focus-visible {
  border-color: var(--vn-accent);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.15);
  outline: none;
}

label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--vn-text);
}

/* ============================================================
   WOOCOMMERCE — SHOP PAGE
   ============================================================ */

.woocommerce-page body,
body.woocommerce {
  background-color: var(--vn-bg);
}

/* Shop page title */
.woocommerce-products-header__title,
.woocommerce-loop-product h2 {
  font-family: var(--vn-font-heading);
  color: var(--vn-dark);
}

/* 2026-08-20: tightened the vertical rhythm above the product grid —
   title block, the (usually empty but still space-taking) notices
   wrapper, and the count/sort row. */
.woocommerce-products-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.woocommerce-products-header__title.page-title {
  margin-bottom: 0 !important;
}

/* 2026-08-23: заглавието "Резултати от търсенето: ..." е h1 и по подразбиране
   идва от глобалното h1 { font-size: clamp(2rem, 5vw, 3.5rem) } (виж по-горе) —
   63px на десктоп / ~33px на мобилно, огромно за резултатна страница. Това h1
   правило е глобално (за всички H1 в сайта — единични продукти, страници,
   shop архива), затова НЕ го пипаме тук — скопираме override-а само за
   search резултатите чрез body.search-results (WordPress добавя този клас
   на body само на search шаблона). Стойностите са същата cramp() крива,
   наполовина смалена (2rem→1rem, 5vw→2.5vw, 3.5rem→1.75rem), така че
   резултатът е ~половината на десктоп (63px→~31.5px) и пропорционално
   по-малко на мобилно (~33px→~18px), вместо фиксиран скок на breakpoint. */
body.search-results .woocommerce-products-header__title.page-title {
  font-size: clamp(1rem, 2.5vw, 1.75rem) !important;
  line-height: 1.2 !important;
}
.woocommerce-notices-wrapper:empty {
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-result-count {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Product card */
ul.products li.product,
.wc-block-grid__product {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  overflow: hidden;
  transition: transform var(--vn-transition), box-shadow var(--vn-transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-4px);
  box-shadow: var(--vn-shadow-lg);
}

/* Link wrapping image + title — make it block */
ul.products li.product .woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--vn-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--vn-dark);
  /* 2026-08-21: top/bottom trimmed 0.4rem/0.25rem → 0.25rem/0.15rem —
     part of the "more compact card" pass, see the sibling
     ".ast-loop-product__link"/".vn-product-excerpt"/".price" trims
     below; this box's own top padding stacks with the link wrapper's
     padding-top just above it, so both needed cutting together to
     actually shrink the image→title gap. */
  padding: 0.25rem 1.25rem 0.15rem;
  margin: 0;
  line-height: 1.3;
}

ul.products li.product .price,
.wc-block-grid__product-price {
  font-family: var(--vn-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--vn-accent-dark);
  padding: 0.2rem 1.25rem 0;
}

ul.products li.product .price del {
  color: var(--vn-text-muted);
  opacity: 0.7;
}

ul.products li.product .price ins {
  text-decoration: none;
  color: var(--vn-accent-dark);
}

/* Product image */
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Add to cart / "Виж продукт" button — 90% wide, centred horizontally.
   2026-08-20: found while checking mobile fit for the 2-column
   featured-products change — the global button rule now sets
   "padding: 15px 36px !important", and this rule's own padding had no
   !important of its own, so it was silently losing (same class of bug
   as the wishlist table / mini-cart / hero buttons fixed earlier).
   36px of horizontal padding on a ~90%-of-a-160px-wide card button
   would have overflowed badly at 2 columns on 375px — added !important
   here too, same "color/radius standardized, physical size fits its
   container" pattern as those other fixes. */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  display: block;
  width: 90%;
  /* 2026-08-21: bottom margin (button → card's own bottom edge)
     trimmed 1.25rem → 0.85rem, part of the "more compact card" pass. */
  margin: 0 auto 0.85rem;
  text-align: center;
  font-size: 0.75rem !important;
  padding: 14px 0 !important;
  box-sizing: border-box;
}

/* Summary wrap — flex column so button can be pushed to the bottom */
.astra-shop-summary-wrap {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title link — block so it spans full width, with same left indent as other elements */
/* 2026-08-21: "more compact card" pass — padding-top 1.1rem → 0.6rem
   (this is the main contributor to the image→title gap, stacking with
   the title's own top padding above), padding-bottom 0.6rem → 0.35rem
   and margin-bottom 0.35rem → 0.2rem (title→price gap, together with
   the excerpt/price trims below). Border-bottom (the divider line)
   left alone — that's a visual element, not whitespace to cut. */
.astra-shop-summary-wrap .ast-loop-product__link {
  display: block;
  padding-top: 0.6rem;
  padding-left: 0.9rem !important;
  padding-right: 0 !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--vn-border);
  margin-bottom: 0.2rem;
}
.astra-shop-summary-wrap .woocommerce-loop-product__title {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Excerpt, price — align to same 0.9rem left edge */
ul.products li.product .vn-product-excerpt { padding-left: 0.9rem !important; }
ul.products li.product .price { padding-left: 0.9rem !important; }

/* Centre button — override Astra's desktop/tablet/mobile-align-left margin reset */
/* margin-top: auto pushes it to the bottom of the flex summary wrap */
.astra-shop-summary-wrap .button {
  display: block;
  width: 90%;
  margin-top: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  align-self: center;
}

/* 2026-08-21: sale badge hidden everywhere now (was single-product-
   only) — makes every earlier top/padding/line-height rule for
   ".ast-onsale-card" dead weight, removed rather than left in place.
   Real markup: "<span class="ast-on-card-button ast-onsale-card">
   Промоция!</span>". */
.ast-onsale-card {
  display: none !important;
}

/* Positioning context for the mobile grid-card wishlist-heart overlay
   — ".woocommerce ul.products li.product" already gets
   "position:relative" unconditionally from the base card rule near
   the top of this file; ".astra-shop-thumbnail-wrap" (the image link)
   doesn't, so this stays scoped to what it's actually needed for. */
@media (max-width: 768px) {
  .woocommerce ul.products li.product,
  .astra-shop-thumbnail-wrap {
    position: relative !important;
  }
}

.woocommerce .tinv-wraper.tinvwl-loop-button-wrapper {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
}

.woocommerce ul.products li.product .price {
  display: block !important;
}
.woocommerce ul.products li.product .price del {
  display: block !important;
}

/* Result count & ordering */
.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--vn-font-body);
  font-size: 0.85rem;
  color: var(--vn-text-muted);
}

.woocommerce-ordering select.orderby {
  padding-right: 32px !important;
  background-position: right 10px center !important;
}

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */

.woocommerce div.product .product_title {
  font-family: var(--vn-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--vn-dark);
  margin-bottom: 0.5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--vn-font-body);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vn-accent-dark);
  margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.95rem;
  color: var(--vn-text);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Quantity input */
.woocommerce .quantity .qty {
  border: 1.5px solid var(--vn-border);
  border-radius: var(--vn-radius);
  background-color: var(--vn-bg-card);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  padding: 0.5rem 0.75rem;
  width: 70px;
  text-align: center;
}

/* 2026-08-20: removed — this early partial rule (radius-full, its own
   padding/font-size) was entirely overridden anyway by the later,
   !important "SINGLE PRODUCT — BUY BUTTON" block further down, which
   now carries the standardized --vn-btn-* values. Dead weight, kept
   dropping it out of style-guide sync; removed rather than left as a
   second source of truth. */

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--vn-border);
  padding: 0;
  margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  border-bottom-color: var(--vn-accent);
  background-color: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--vn-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--vn-text-muted);
  padding: 0 0.65rem 0.8rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--vn-accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 0 var(--vn-radius) var(--vn-radius) var(--vn-radius);
  padding: 1.5rem;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--vn-accent);
}

/* ============================================================
   WOOCOMMERCE — CART & CHECKOUT
   ============================================================ */

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce {
  background-color: var(--vn-bg);
}

.woocommerce table.shop_table {
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  overflow: hidden;
}

.woocommerce table.shop_table th {
  background-color: var(--vn-bg-alt);
  color: var(--vn-dark);
  font-family: var(--vn-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--vn-border);
}

.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--vn-border);
  vertical-align: middle;
}

/* Cart totals */
/* 2026-08-23: селекторът беше "..., .woocommerce .order-total" —
   замислен само за кутията .cart_totals (сивкав фон, рамка,
   border-radius, padding), но .order-total е класът на РЕДА "ОБЩО"
   в таблицата (tr.order-total), не на друга кутия. Затова целият ред
   получаваше card-стил (1px рамка, 16px border-radius, 1.5rem
   padding отвсякъде) — изглеждаше като отделен бутон/кутия вътре в
   Обобщение блока, конкуриращ се с истинския "Към плащане" бутон
   под него. Потвърдено на живо с CSS.getMatchedStylesForNode:
   computed border-radius 16px, padding 27px точно на tr.order-total.
   Премахнат от списъка — .cart_totals пази собствения си box стил,
   .order-total вече разчита само на woocommerce.css за удебелен,
   по-едър текст (виж "Обобщение — редове" по-долу). */
.woocommerce .cart_totals {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  padding: 1.5rem;
}

.woocommerce .cart_totals h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Checkout */
.woocommerce-checkout #payment {
  background-color: var(--vn-bg-card);
  border-radius: var(--vn-radius);
  border: 1px solid var(--vn-border);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--vn-border);
}

/* ============================================================
   WOOCOMMERCE — NOTICES & MESSAGES
   ============================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--vn-radius);
  font-family: var(--vn-font-body);
  font-size: 0.9rem;
}

.woocommerce-message {
  border-top-color: var(--vn-accent) !important;
  background-color: rgba(184, 150, 120, 0.08) !important;
}

/* ============================================================
   SIDEBAR & WIDGETS
   ============================================================ */

.widget-area .widget,
.ast-sidebar-wrap .widget {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.widget-title,
.widgettitle {
  font-family: var(--vn-font-heading);
  font-size: 1.2rem;
  color: var(--vn-dark);
  border-bottom: 2px solid var(--vn-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Price filter widget */
.woocommerce .widget_price_filter .ui-slider-handle {
  background-color: var(--vn-accent);
  border-color: var(--vn-accent);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: var(--vn-accent-light);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.ast-breadcrumbs-wrapper,
.woocommerce-breadcrumb {
  font-family: var(--vn-font-body);
  font-size: 0.8rem;
  color: var(--vn-text-muted);
}

.ast-breadcrumbs-wrapper a,
.woocommerce-breadcrumb a {
  color: var(--vn-accent);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer,
#colophon,
.ast-small-footer,
.footer-widget-area,
.ast-footer-widget-area {
  background-color: var(--vn-dark) !important;
  color: rgba(247, 242, 235, 0.7);
}

.site-footer a,
#colophon a,
.ast-small-footer a {
  color: var(--vn-accent-light);
  transition: color var(--vn-transition);
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--vn-white);
}

.footer-widget-area .widget-title,
.ast-footer-widget-area .widget-title {
  color: var(--vn-white);
  border-bottom-color: var(--vn-accent);
}

.ast-small-footer {
  border-top: 1px solid rgba(247, 242, 235, 0.1) !important;
  font-size: 0.8rem;
}

/* ============================================================
   BLOG / ARCHIVE
   ============================================================ */

.ast-article-inner,
.post-thumb {
  background-color: var(--vn-bg-card);
  border-radius: var(--vn-radius-lg);
  overflow: hidden;
  box-shadow: var(--vn-shadow-sm);
  transition: box-shadow var(--vn-transition);
}

.ast-article-inner:hover {
  box-shadow: var(--vn-shadow);
}

.entry-meta,
.ast-post-meta {
  font-family: var(--vn-font-body);
  font-size: 0.78rem;
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   BLOCKS (Gutenberg)
   ============================================================ */

.wp-block-separator {
  border-color: var(--vn-border);
}

.wp-block-quote {
  border-left: 4px solid var(--vn-accent);
  background-color: var(--vn-bg-alt);
  border-radius: 0 var(--vn-radius) var(--vn-radius) 0;
  padding: 1.25rem 1.5rem;
  font-family: var(--vn-font-heading);
  font-size: 1.2rem;
  font-style: italic;
}

.wp-block-pullquote {
  border-top: 4px solid var(--vn-accent);
  border-bottom: 4px solid var(--vn-accent);
}

/* ============================================================
   CUSTOM SECTIONS & COMPONENTS
   ============================================================ */

/* Section divider */
.vn-section {
  padding: 4rem 0;
}

.vn-section-title {
  font-family: var(--vn-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--vn-dark);
  text-align: center;
  margin-bottom: 0.5rem;
}

.vn-section-subtitle {
  font-size: 0.9rem;
  color: var(--vn-text-muted);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

/* Decorative underline for section titles */
.vn-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--vn-accent);
  margin: 0.5rem auto 0;
}

/* Product badge */
.vn-badge {
  display: inline-block;
  font-family: var(--vn-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--vn-accent-light);
  color: var(--vn-dark);
  border-radius: var(--vn-radius-full);
  padding: 3px 10px;
}

/* Highlight box */
.vn-highlight {
  background-color: var(--vn-bg-alt);
  border-left: 3px solid var(--vn-accent);
  border-radius: 0 var(--vn-radius) var(--vn-radius) 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
}

/* ============================================================
   HOMEPAGE — HERO & USP SECTIONS
   ============================================================ */

/* Hero */
.vn-hero {
  background: #ffffff;
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.vn-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(184, 150, 120, 0.08);
  pointer-events: none;
}

.vn-hero::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(184, 150, 120, 0.06);
  pointer-events: none;
}

.vn-hero-eyebrow {
  font-family: var(--vn-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vn-accent);
  margin-bottom: 1rem;
}

.vn-hero h1 {
  font-family: var(--vn-font-heading);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 600;
  color: var(--vn-dark);
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

.vn-hero h1 em {
  font-style: italic;
  color: var(--vn-accent);
}

.vn-hero-sub {
  font-family: var(--vn-font-body);
  font-size: 1.05rem;
  color: var(--vn-text-muted);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.vn-hero-btn {
  display: inline-block;
  background: var(--vn-accent);
  color: var(--vn-white) !important;
  font-family: var(--vn-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  transition: var(--vn-transition);
}

.vn-hero-btn:hover {
  background: var(--vn-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 150, 120, 0.35);
}

/* USP strip */
.vn-usp-strip {
  background-color: var(--vn-bg-card);
  border-top: 1px solid var(--vn-border);
  border-bottom: 1px solid var(--vn-border);
}

.vn-usp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.vn-usp-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--vn-accent);
}

.vn-usp-title {
  font-family: var(--vn-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--vn-dark);
  margin-bottom: 0.4rem;
}

.vn-usp-text {
  font-family: var(--vn-font-body);
  font-size: 0.875rem;
  color: var(--vn-text-muted);
  line-height: 1.6;
}

/* Homepage featured products section */
.vn-featured-products {
  padding: 3rem 2rem 4rem;
  text-align: center;
}

/* 2026-08-20: pulled down slightly from the shorthand's 3rem (48px) to
   40px so the section reads as "peeking up" under the taller hero
   above (see .vn-hero-slideshow min-height change) instead of leaving
   a full extra gap on top of it. */
.vn-featured-products {
  padding-top: 40px !important;
}

.vn-featured-products .vn-section-title {
  margin-bottom: 0.5rem;
}

.vn-view-all-wrap {
  padding: 2rem 1rem 0;
  text-align: center;
}

/* 2026-08-20: "Виж всички продукти" — standardized to the shared
   secondary (outline) button tokens. */
.vn-view-all-btn {
  display: inline-block;
  background: transparent !important;
  color: var(--vn-btn-secondary-color) !important;
  border: 1px solid var(--vn-btn-secondary-border) !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;
  padding: var(--vn-btn-padding) !important;
  border-radius: var(--vn-btn-radius) !important;
  text-decoration: none;
  transition: background .3s ease;
}

.vn-view-all-btn:hover {
  background: var(--vn-btn-secondary-bg-hover) !important;
  color: var(--vn-btn-secondary-color-hover) !important;
  border-color: var(--vn-btn-secondary-bg-hover);
}

@media (max-width: 600px) {
  .vn-hero { padding: 4rem 1.5rem; }
  .vn-usp { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   SINGLE PRODUCT — VARIABLE PRODUCT (ФОРМА DROPDOWN)
   ============================================================ */

/* Variations table */
.woocommerce div.product .variations {
  width: 100%;
  border: none;
  margin-bottom: 1.25rem;
}

.woocommerce div.product .variations td,
.woocommerce div.product .variations th {
  border: none;
  padding: 0;
  vertical-align: middle;
}

.woocommerce div.product .variations .label {
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

.woocommerce div.product .variations .label label {
  font-family: var(--vn-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vn-dark);
}

/* The variation select dropdown */
.woocommerce div.product .variations select,
.woocommerce div.product form.variations_form select {
  width: 100% !important;
  max-width: 340px !important;
  background-color: #ffffff !important;
  border: 1px solid #b89678 !important;
  border-radius: 8px !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  padding: 12px 40px 12px 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b89678' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

.woocommerce div.product .variations select option {
  color: #000000;
  -webkit-text-fill-color: #000000;
  background-color: #ffffff;
}

.woocommerce div.product .variations select:focus,
.woocommerce div.product form.variations_form select:focus {
  border-color: #b89678 !important;
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.18) !important;
  outline: none !important;
}

.woocommerce div.product .variations select:hover {
  border-color: #9a7a5e !important;
}

/* Reset variation link — hidden */
.woocommerce div.product .reset_variations {
  display: none !important;
  font-family: var(--vn-font-body);
  font-size: 0.75rem;
  color: var(--vn-text-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
  display: inline-block;
  margin-top: 0.3rem;
  cursor: pointer;
}

.woocommerce div.product .reset_variations:hover {
  color: var(--vn-accent);
}

/* Variation price display */
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price span.price {
  font-family: var(--vn-font-body);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--vn-accent-dark);
  display: block;
  margin-bottom: 0.5rem;
}

/* Add to cart section for variable products */
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Description row inside variations form */
.woocommerce div.product .woocommerce-variation-description p {
  font-size: 0.9rem;
  color: var(--vn-text-muted);
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--vn-bg-alt);
  border-radius: var(--vn-radius);
  border-left: 3px solid var(--vn-accent);
}

/* ============================================================
   SINGLE PRODUCT — SIZE SELECTOR
   ============================================================ */

.vn-size-selector {
  margin-bottom: 1.25rem;
}

.vn-size-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--vn-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vn-dark);
  margin-bottom: 0.5rem;
}

.vn-size-guide {
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vn-accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

/* Error state on custom dropdown trigger */
.vn-select--error .vn-select__trigger {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important;
  animation: vn-shake 0.3s ease;
}

@keyframes vn-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* ============================================================
   SINGLE PRODUCT — BUY BUTTON ("Купи"/"Добави в количката")
   2026-08-20: now points at the shared --vn-btn-primary-* tokens
   (design tokens block, top of file) instead of its own hardcoded
   #b09070 — one of ~15 blocks consolidated in the site-wide button
   standardization pass.
   ============================================================ */

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt {
  background: var(--vn-btn-primary-bg) !important;
  color: var(--vn-btn-primary-color) !important;
  border: none !important;
  border-radius: var(--vn-btn-radius) !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;
  padding: var(--vn-btn-padding) !important;
  min-width: 200px;
  cursor: pointer;
  transition: background .3s ease !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button.alt:hover {
  background: var(--vn-btn-primary-bg-hover) !important;
}

/* Disabled state (e.g. out of stock / no variation selected yet) —
   needs its own rule since the base one above sets background
   with !important and browsers don't grey out :disabled on their own
   against that. */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
  background: var(--vn-btn-disabled-bg) !important;
  color: var(--vn-btn-disabled-color) !important;
  cursor: not-allowed !important;
}

/* Quantity + button row */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.woocommerce div.product form.cart .quantity {
  margin: 0 !important;
}

/* ============================================================
   SINGLE PRODUCT — quantity / buy / wishlist row alignment
   2026-08-21. Reported "разпилени" (scattered) despite the row
   already being flex + align-items:center + gap above/on
   ".woocommerce-variation-add-to-cart" — that only centers each
   item's OWN box within the row, it doesn't make the three boxes the
   SAME height, and they weren't: the quantity input's own padding
   gives it ~38px, the standardized buy button's "--vn-btn-padding"
   (15px 36px) gives it ~50-54px, and the wishlist link (plain
   "display:inline-block", no sizing of its own beyond its
   icon+text content) was the shortest of the three at ~26px — three
   different statures is what actually read as scattered, not the
   centering (which was already correct). Scoped with descendant
   selectors (not a direct-child chain) so the same rules cover both
   the variable-product markup (nested one level deeper inside
   ".woocommerce-variation-add-to-cart") and the simple-product one
   (these three sit directly in "form.cart") without duplicating
   anything.
   46px chosen as the shared height — close to the quantity input's
   existing size (needs the least adjustment) and comfortably above
   this session's established 44px minimum tap-target floor. The buy
   button keeps its standardized color/font/radius tokens untouched,
   same "compact exception" pattern already used for the wishlist-
   table and mini-cart buttons — only ITS padding is adapted to fit a
   shared height instead of the sitewide default.
   2026-08-21, follow-up: reported still not aligned — "Добави в
   любими" sitting lower than the button, i.e. on its own line, not
   just a height mismatch on the same line. Root cause wasn't
   specificity this time (checked directly: no rule anywhere sets its
   own height/display on ".tinv-wraper" or "tinvwl_add_to_wishlist_
   button" with competing weight) — it's WIDTH. This button, unlike
   the loop-card one, still shows its full text ("Добави в любими" /
   "Вече е в любими") next to the icon, and
   ".woocommerce-variation-add-to-cart" (the flex row) carries Astra's
   own "flex-wrap:wrap" — quantity(70px) + buy button(200px min-width)
   + a full-text wishlist link comfortably exceeds most summary-column
   widths, so the row wraps and the wishlist item drops to its own
   line below, which reads exactly as "sits lower". Fixed at the
   cause: hiding the wishlist button's text (same sr-only technique
   already used on the loop-card version — kept in the DOM/
   accessibility tree, not display:none, the "aria-label" on the <a>
   remains the primary accessible name either way) frees enough width
   that all three fit on one line at normal viewport widths.
   !important added throughout this block too — belt and suspenders,
   since the underlying "no competing rule found" conclusion was
   reached by manual audit, not a live browser. */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart {
  box-sizing: border-box !important;
  height: 46px !important;
}

/* 2026-08-21, follow-up: reported bottom edges still not matching —
   ".quantity" (the wrapper <div>, not the input) hanging lowest.
   Checked box-sizing first, as instructed: Astra's own base CSS
   already sets "html{box-sizing:border-box}" + "*,:after,:before{
   box-sizing:inherit}" globally (main.min.css) — everything on this
   page, including the "qty" input and its border, already inherits
   border-box by default; the "!important box-sizing:border-box"
   declarations here and below are reinforcement, not a fix for an
   actual content-box bug (there wasn't one to find).
   The real gap: unlike the buy button and the wishlist wrapper (both
   already "display:flex;align-items:center"), ".quantity" itself was
   never given the same treatment — just a fixed height with no
   centering rule for its own content. Its child, the ".qty" input,
   sits via plain document flow rather than being vertically
   anchored, and the wrapper also holds an invisible
   ".screen-reader-text" <label> before it in the markup (WooCommerce
   core) — even though that label is normally zero-footprint
   (position:absolute, WordPress's own standard class), giving
   ".quantity" the same flex+align-items+justify-content pattern as
   its two siblings removes any dependency on that holding true, and
   makes all three use one identical, verified mechanism instead of
   three different ones. "overflow:hidden" added as a hard backstop —
   nothing inside can render past this box's own 46px edge, whatever
   the cause. */
.woocommerce div.product form.cart .quantity {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.woocommerce div.product .quantity .qty {
  box-sizing: border-box !important;
  height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* 2026-08-21, follow-up: reported the button STILL shorter than
   46px, bottom edge above the shared line — quantity/wishlist left
   untouched, this is button-only. Checked what was asked: the shared
   "height:46px!important;box-sizing:border-box!important" rule above
   already includes this exact selector (confirmed live, byte for
   byte, not assumed) — no competing "height" declaration anywhere
   else in this file for ".single_add_to_cart_button" or a generic
   "button"/".button" selector that could out-order or out-specify it
   (the sitewide button standardization block near the top of this
   file sets padding/color/font, never height). On paper this should
   already be exactly 46px. Since I can't read the live computed
   height myself (no browser this session) to find where that reasoning
   breaks down, hardening defensively instead of re-asserting the same
   declaration: "min-height"/"max-height" alongside "height" (removes
   any path where height alone gets treated as a floor/ceiling rather
   than a fixed value) and an explicit "line-height:1" (removes any
   chance the button's text line-box is what's actually being
   measured instead of the box "height" sets). */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  /* 2026-08-21, follow-up: found via DevTools — height was already
     correct (46px), the box model's margin layer showed
     "margin-bottom:12px" (WooCommerce/Astra's default button spacing)
     pushing it up relative to quantity/wishlist, neither of which
     carry that margin. */
  margin-bottom: 0 !important;
}

/* The wishlist widget wrapper — plugin's own markup, not ours (see
   the "WISHLIST HEART" section in woocommerce.css for the loop-card
   equivalent; this is the SEPARATE single-product instance, no
   ".tinvwl-loop" class here, needs its own rule). Zeroing the
   plugin's own "margin-top:15px" (its public.css,
   ".tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button") — that
   vertical offset was fighting the centering. */
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
/* 2026-08-21, follow-up: two more reports on this same button —
   (a) the heart glyph read too small next to "КУПИ", (b) the gap to
   "КУПИ" looked bigger than the quantity→button gap. Both trace to
   this rule's own "padding: 0 12px" — with the text now hidden (see
   below), that padding was pure empty space in front of a small
   glyph, stacking visually on TOP of the row's own flex "gap"
   (nothing comparable sits on the quantity/button side, since
   neither of those has its OWN extra edge-padding facing outward).
   Switched to a fixed "width:46px;padding:0" — a plain 46×46 square
   matching the shared row height, so the glyph sits flush at the same
   distance from "КУПИ" as "КУПИ" sits from the quantity input (both
   now purely the row's own "gap", nothing added on top),
   "justify-content:center" centers the (now larger, see the ":before"
   rule below) glyph inside that square. Click zone is still the full
   46×46 box — width changed, not shrunk. */
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  width: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* Text hidden the same way as the loop-card heart — sr-only, stays in
   the DOM/accessibility tree, just not painted (the width fix this
   section is actually about). */
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist-text,
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart .tinvwl_already_on_wishlist-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Glyph itself, untouched otherwise: ":before" content ("\e909" empty
   / "\e908" filled, plugin's own ".tinvwl-product-in-list"
   JS-toggled class) and color aren't touched here, only size —
   Astra/plugin default is 20px (".tinvwl-icon-heart:before",
   public.min.css), too small next to a 46px-tall row.
   2026-08-21, follow-up: 25px reportedly didn't read as bigger.
   Re-audited the cascade for a competing rule — checked every plugin
   ".tinvwl..." block with "font-size" freshly, plus Astra's dynamic
   CSS and WC-compat file: nothing else sets font-size on this exact
   ":before" with equal-or-higher specificity or !important, this
   rule's own specificity+!important already beats the plugin's base
   20px rule outright. No live browser this session to read the
   actual computed value directly (can't confirm from here whether
   25px genuinely wasn't applying, or applied but still looked small
   against the 46px box/next to "КУПИ" — can't tell those apart
   without DevTools). Taking the requested fallback: bumped straight
   to 32px, the top of the 24-26/30-32px range given, since a webfont
   glyph commonly occupies less than its full em-square (this one's
   generated by an icon-font tool, same family as the 60px
   ".icon_big_heart_check" the plugin itself uses for a "big" state
   elsewhere in its own CSS — its own scale suggests a much larger
   em-size is expected for a visually prominent heart, not just a
   small bump from 20px).
   2026-08-21, third follow-up: reported the heart landing BELOW
   "КУПИ" entirely — its top edge under the button's bottom edge, so
   this wasn't a small baseline nudge, the glyph was rendering well
   outside the 46px box. Root cause per the report: at 32px, the icon
   font's baseline (where "line-height:1" anchors the line box) sits
   far enough down the em-square that the actual glyph ink drew mostly
   below the 46px row. Took the "cleaner" option requested: making the
   ":before" pseudo-element itself a flex container with an explicit
   height matching the row (46px) and its own "align-items:center" —
   this centers the glyph's line box within that fixed height directly,
   instead of relying on the surrounding inline layout/baseline math
   the parent's own "align-items:center" was going through before (a
   pseudo-element's generated content still resolves position via
   baseline when it's plain inline content, even inside a flex
   ancestor — turning it into its own flex box with a fixed height
   sidesteps that entirely, per the site owner's own diagnosis). No
   "position:relative;top" offset added on top of this — the earlier
   report described a large (~46px-scale) displacement consistent with
   the structural baseline-dependency bug this fixes at the cause, not
   a few-px residual that would call for a manual nudge; stacking one
   on top of an already-correct structural fix risks re-introducing
   misalignment blind, without a live render to check it against. */
.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button:before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  margin-right: 0 !important;
  /* 2026-08-21, fourth/fifth follow-up (history): -6px, then -12px,
     were added to compensate for the glyph's own baseline sitting low
     in its line box.
     2026-08-21, sixth follow-up: that compensation is gone now — once
     ".quantity"/the button/this wrapper were all leveled to the same
     46px box with identical flex-centering (see the row-alignment
     section above), the -12px nudge (tuned against the PREVIOUS,
     unequal box heights) started overshooting, pushing the heart
     above the shared bottom edge instead of onto it. Removed outright
     to retest the plain "display:flex;align-items:center" on this
     ":before" alone, now that its container is the same height as its
     two neighbors — per direct instruction, rather than guessing at a
     smaller offset blind.
     2026-08-21, seventh follow-up: flex-centering alone left it too
     LOW this time (opposite direction from the pre-46px-alignment
     reports) — confirms the residual gap really is the glyph's own
     off-center ink within its line box, now a small, consistent
     amount rather than the large box-mismatch this was chasing
     before. Small nudge back, per direct instruction: -4px.
     2026-08-21, eighth follow-up: reported still a few px below
     optical center at -4px. Requested target ("-3px or -4px") reads
     as the size of the ADDITIONAL nudge wanted, not a smaller
     absolute value than the -4px already live (that would move it
     further down, the opposite of "вдигни го леко") — stacking ~3px
     onto the existing -4px: -7px. */
  position: relative !important;
  top: -7px !important;
}

/* ============================================================
   SINGLE PRODUCT — hide the gallery zoom image, 2026-08-21
   ============================================================ */
.woocommerce-product-gallery__image .zoomImg,
.woocommerce-product-gallery img.zoomImg {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   SINGLE PRODUCT — hide the tags line, 2026-08-21
   "<div class="product_meta"><span class="sku_wrapper">...</span>
   <span class="posted_in">...</span><span class="tagged_as">Tags:
   ...</span></div>" — WooCommerce's product tags are plugin-internal
   category-like data (English label, English/default tag names here,
   no customer value). Visual-only: the tags themselves, their term
   relationships and the "tagged_as" markup all stay exactly as they
   are in the database/DOM — untouched for SEO and any internal use,
   just not rendered on screen. SKU ("Код: ...") and category
   ("Категория: ...") are separate siblings in this same
   ".product_meta" block, both left visible. */
/* 2026-08-21, follow-up: reported still visible — found why. Astra's
   own WooCommerce compatibility CSS ("woocommerce-grid.min.css",
   loaded via the "woocommerce-general-css" handle) has
   ".woocommerce-js div.product .product_meta>span{display:
   inline-block;...}" — 3 classes + 2 type selectors
   (div.product/span) = higher specificity than this rule's 2 classes,
   confirmed by direct comparison, not guessed. Neither rule had
   !important, so Astra's higher specificity won outright regardless
   of source order. Adding !important settles it. */
.product_meta .tagged_as {
  display: none !important;
}

/* ============================================================
   SINGLE PRODUCT — БЫСТРА ПОРЪЧКА (QUICK ORDER)
   ============================================================ */

.vn-quick-order {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.vn-quick-order-inner {
  background: linear-gradient(135deg, var(--vn-bg-card) 0%, var(--vn-bg-alt) 100%);
  border: 1px solid var(--vn-border);
  border-top: 3px solid var(--vn-accent);
  border-radius: var(--vn-radius-lg);
  padding: 2rem;
  max-width: 600px;
}

.vn-quick-order-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.vn-quick-order-icon {
  font-size: 1.8rem;
  color: var(--vn-accent);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.vn-quick-order-title {
  font-family: var(--vn-font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--vn-dark);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.vn-quick-order-subtitle {
  font-family: var(--vn-font-body);
  font-size: 0.85rem;
  color: var(--vn-text-muted);
  margin: 0;
  line-height: 1.5;
}

.vn-quick-order-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.vn-qo-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vn-qo-field label {
  font-family: var(--vn-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vn-text);
}

.vn-qo-field input {
  background-color: var(--vn-white);
  border: 1.5px solid var(--vn-border);
  border-radius: var(--vn-radius);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  transition: border-color var(--vn-transition), box-shadow var(--vn-transition);
  width: 100%;
}

.vn-qo-field input:focus {
  border-color: var(--vn-accent);
  box-shadow: 0 0 0 3px rgba(184, 150, 120, 0.15);
  outline: none;
}

/* 2026-08-20: "Изпрати заявка" (quick-order form) — a purchase-flow
   action, standardized as primary along with the other CTA buttons. */
.vn-quick-order-btn {
  display: block;
  width: 100%;
  background: var(--vn-btn-primary-bg) !important;
  color: var(--vn-btn-primary-color) !important;
  border: none !important;
  border-radius: var(--vn-btn-radius) !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;
  padding: var(--vn-btn-padding) !important;
  cursor: pointer;
  transition: background .3s ease !important;
  margin-top: 0.25rem;
}

.vn-quick-order-btn:hover {
  background: var(--vn-btn-primary-bg-hover) !important;
}

.vn-quick-order-btn:disabled {
  background: var(--vn-btn-disabled-bg) !important;
  color: var(--vn-btn-disabled-color) !important;
  cursor: not-allowed !important;
}

.vn-quick-order-note {
  font-family: var(--vn-font-body);
  font-size: 0.75rem;
  color: var(--vn-text-muted);
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Success state */
.vn-quick-order-success {
  text-align: center;
  padding: 1rem 0;
}

.vn-qo-checkmark {
  display: block;
  font-size: 2.5rem;
  color: var(--vn-accent);
  margin-bottom: 0.5rem;
}

.vn-quick-order-success strong {
  font-family: var(--vn-font-heading);
  font-size: 1.4rem;
  color: var(--vn-dark);
  display: block;
  margin-bottom: 0.25rem;
}

.vn-quick-order-success p {
  color: var(--vn-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 544px) {
  .vn-quick-order-fields {
    grid-template-columns: 1fr;
  }
  .vn-quick-order-inner {
    padding: 1.25rem;
  }
}

/* ============================================================
   SCROLLBAR (Webkit)
   ============================================================ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--vn-bg-alt); }
::-webkit-scrollbar-thumb { background-color: var(--vn-accent-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--vn-accent); }

/* ============================================================
   SELECTION
   ============================================================ */

::selection {
  background-color: var(--vn-accent-light);
  color: var(--vn-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 782px) {
  .ast-nav-menu,
  #site-navigation {
    background-color: var(--vn-bg-card);
    border-bottom: 1px solid var(--vn-border);
  }

  ul.products li.product {
    margin-bottom: 1.5rem;
  }

  .vn-section {
    padding: 2.5rem 0;
  }
}

@media (max-width: 544px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .woocommerce div.product .product_title {
    font-size: 1.8rem;
  }
}

/* ============================================================
   GLOBAL PADDING IMPROVEMENTS
   ============================================================ */

/* Astra container max-width & horizontal padding */
.ast-container,
.entry-content,
.woocommerce .woocommerce-notices-wrapper,
.site-content > .ast-container {
  max-width: 1240px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* Ensure page content doesn't touch screen edges */
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child  { margin-bottom: 0; }

/* Page content vertical padding */
.page .entry-content,
.single .entry-content {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* WooCommerce pages vertical padding */
.woocommerce-page .woocommerce {
  padding-top: 1.5rem;
}

/* Product loop items spacing */
.woocommerce ul.products li.product {
  margin-bottom: 2.5rem !important;
}

/* Single product page */
.woocommerce div.product {
  padding-top: 1.5rem;
}

/* ============================================================
   CUSTOM FOOTER
   ============================================================ */

.vn-site-footer {
  background-color: var(--vn-dark);
  color: rgba(247, 242, 235, 0.75);
  font-family: var(--vn-font-body);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Inner grid */
.vn-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 3.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
}

/* Brand column */
.vn-footer-brand {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.vn-footer-logo-link {
  text-decoration: none;
}

.vn-footer-logo {
  font-family: var(--vn-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vn-accent-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vn-footer-tagline {
  color: rgba(247, 242, 235, 0.6);
  font-size: 0.82rem;
  margin: 0;
}

.vn-footer-social {
  display: flex;
  gap: .625rem;
  margin-top: .25rem;
}

.vn-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247, 242, 235, 0.2);
  color: rgba(247, 242, 235, 0.7);
  text-decoration: none;
  transition: border-color var(--vn-transition), color var(--vn-transition), background-color var(--vn-transition);
}

.vn-footer-social-link:hover {
  border-color: var(--vn-accent);
  color: var(--vn-accent);
  background-color: rgba(184, 150, 120, 0.1);
}

/* 2026-08-20: same icon set/shape as .vn-footer-social-link (page
   "Контакти" reuses the identical <svg> markup), but re-colored — the
   footer version is near-white (rgba(247,242,235,...)) for a dark
   background; this page's content area is light, so that palette
   would render the icons almost invisible. Uses the site's beige
   accent border/hover-fill pattern already established for buttons
   elsewhere (mini-cart "Преглед на количката") instead. */
.vn-contact-social {
  display: flex;
  gap: .625rem;
  margin: 1rem 0;
}

.vn-contact-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--vn-accent);
  color: var(--vn-dark);
  text-decoration: none;
  transition: border-color var(--vn-transition), color var(--vn-transition), background-color var(--vn-transition);
}

.vn-contact-social-link:hover {
  background-color: var(--vn-accent);
  color: var(--vn-white);
}

/* Footer columns */
.vn-footer-col-title {
  font-family: var(--vn-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--vn-accent-light);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.vn-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.vn-footer-links a {
  color: rgba(247, 242, 235, 0.65);
  text-decoration: none;
  transition: color var(--vn-transition);
  font-size: 0.875rem;
}

.vn-footer-links a:hover {
  color: var(--vn-accent-light);
}

/* Contact list with icons */
.vn-footer-contact li {
  /* 2026-08-20: was align-items:center — fine for single-line rows,
     but misaligned the icon once a row's text wraps to two lines
     (icon centers on the whole block, drifting below the first line).
     flex-start + a small top nudge on the svg (below) keeps the icon
     level with line 1 regardless of how many lines the text takes. */
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: rgba(247, 242, 235, 0.65);
}

.vn-footer-contact svg {
  flex-shrink: 0;
  stroke: var(--vn-accent);
  /* Optical alignment with the first line of text now that align-items
     is flex-start instead of center. */
  margin-top: 3px;
}

.vn-footer-contact span,
.vn-footer-contact a {
  font-size: 0.875rem;
}

/* 2026-08-20: "Пн–Пт: 9:00–18:00" was wrapping, dropping the trailing
   "ч." (removed separately in footer.php — redundant once the hours
   are spelled out) onto its own line. Belt-and-braces against wrapping
   in general, in case the column narrows further at some width. */
.vn-footer-contact li span {
  white-space: nowrap;
}

/* Footer bottom bar */
.vn-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(247, 242, 235, 0.08);
}

.vn-footer-copy,
.vn-footer-shipping,
.vn-footer-made {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(247, 242, 235, 0.4);
}

/* Footer responsive */
@media (max-width: 1024px) {
  .vn-footer-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .vn-footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
  .vn-footer-tagline { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .vn-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding-top: 2.5rem;
  }
  .vn-footer-brand {
    grid-column: 1 / -1;
  }
  .vn-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .vn-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HERO SLIDESHOW
   ============================================================ */

/* Front page — remove container constraints so hero is full-width */
body.home .site-content > .ast-container {
  max-width: unset;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.vn-hero-slideshow {
  position: relative;
  overflow: hidden;
  /* 2026-08-18: was a flat 550px. The banner photo (banner-veinnails-
     final.jpg) is 2560×730 — a 3.5:1 ratio — so instead of a fixed
     height fighting background-size:cover to decide what gets cropped,
     aspect-ratio just makes the container match the photo's own shape.
     background-size:cover on a same-ratio box is then a no-op crop-
     wise: the whole image shows, edge to edge, at any width. At the
     two widths this was checked against: 1920px → 548.6px tall (barely
     off the old 550px target); 1366px → 390.3px tall.
     This only governs desktop — ≤768px and ≤480px below still pin an
     explicit height instead of continuing the ratio down, because at
     mobile widths 3.5:1 gets too short for the heading+button to fit
     (e.g. 480px wide → 137px tall, well under the ~180px they need).
     An explicit height wins over aspect-ratio per spec, so those two
     media queries below simply keep working unchanged. */
  aspect-ratio: 3.5 / 1;
  outline: none;
  /* Break out of any container to span full viewport width */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* 2026-08-20: requested min-height was pasted onto .vn-slide, but that
   element is "position:absolute; inset:0" inside THIS container — its
   rendered height is already fully pinned to this parent's height by
   inset:0 (top:0 + bottom:0 together), so a min-height on .vn-slide
   itself has no effect at all, it's already an exact value, not an
   auto one a minimum could raise. The actual height-defining box is
   .vn-hero-slideshow (aspect-ratio: 3.5/1 above) — applying the
   min-height here instead, as a floor on top of the aspect-ratio's
   own computed height (whichever is taller wins, standard CSS sizing
   behaviour), gives the intended "taller but not full-screen" result
   without fighting the ratio. Desktop-only (min-width:769px, mirrors
   the max-width:768px mobile breakpoint below) — the mobile tiers
   already pin their own explicit, separately-tuned heights (see the
   comments in the 768px/480px media queries above) and 100vh-260px
   would otherwise silently override those on tall phones. */
@media (min-width: 769px) {
  .vn-hero-slideshow {
    min-height: calc(100vh - 260px) !important;
  }
}

/* Slides container */
.vn-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.vn-slide {
  position: absolute;
  inset: 0;
  display: flex;
  /* 2026-08-17: was align-items:center. Centering left a big dead gap
     above the heading. Anchoring to the top with modest breathing room
     puts the heading close to where the fold actually is.
     2026-08-18: 2.5rem padding-top was still too generous once the
     hero switched to aspect-ratio: 3.5/1 — at 1366px/1280px wide
     (390px/366px tall) the button was clipped at the bottom edge.
     Trimmed to 1rem; see also the heading/text margins and button
     padding below, all cut together to clear 60px+ at 1280px. */
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 1rem;
  /* 2026-08-18: the 15%/8% horizontal inset used to live on
     .vn-slide-inner's own padding. That broke once .vn-slide-inner got
     a max-width cap: percentage padding is always resolved against the
     CONTAINING block's width (this element, .vn-slide, full hero
     width), never against the padded element's own (now much narrower,
     max-width-capped) rendered width. So a 15%/8% pair meant for a
     ~1900px-wide box was instead being applied on top of an already
     560px-wide box, leaving only ~120px for actual text — enough to
     force "Нокти с характер." onto 3 lines despite the explicit <br>.
     Moving the inset here, onto the actual full-width element, makes
     the percentages mean what they look like; .vn-slide-inner now only
     carries its max-width cap. */
  padding-left: 15%;
  padding-right: 8%;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  user-select: none;
}

.vn-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 2026-08-20: crop control for the hero photo — !important here beats
   .vn-slide--1's own (non-!important) "background-position: center",
   so this is the one that actually wins for the current single slide. */
.vn-slide {
  background-position: center left !important;
}

/* Slide background — dark gradient fallback for when $vn_hero_bg_path
   (front-page.php) is empty; background-size/position/repeat here also
   govern the real photo, since the inline style only overrides
   background-image, not the rest of the shorthand. */
.vn-slide--1 {
  background: linear-gradient(135deg, #1a1008 0%, #2c1f14 50%, #3d2b1f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Decorative grain overlay */
.vn-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

/* Slide inner content — capped width keeps the heading/button anchored
   in the left third of the banner instead of sprawling toward center
   on wide screens. Sizes to its own content (shrink-to-fit, since it's
   a flex item with no explicit width) up to this cap; the 15%/8% inset
   from the edges now lives on .vn-slide, see the comment there. */
.vn-slide-inner {
  position: relative;
  z-index: 2;
  max-width: min(560px, 45vw);
  text-align: left;
}

.vn-slide-eyebrow {
  display: none;
  font-family: var(--vn-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.vn-slide--1 .vn-slide-eyebrow {
  color: var(--vn-accent-light);
}

/* Slide heading — override h1/h2 defaults from Astra */
.vn-slide-inner h1.vn-slide-heading,
.vn-slide-inner h2.vn-slide-heading {
  font-family: var(--vn-font-heading);
  font-size: clamp(2.4rem, 6.4vw, 4.4rem) !important;
  font-weight: 600;
  /* 2026-08-17: line-height:1.0 was clipping the tops of capital letters
     (Cormorant Garamond's ascent exceeds its em-box at this weight) —
     the ancestor .vn-hero-slideshow has both overflow:hidden and a
     transform, and that combination clips glyph ink that pokes above a
     line-height:1 box instead of letting it render. 1.1 gives the
     ascent room without visibly loosening the tight display look. */
  line-height: 1.1;
  /* 2026-08-18: was 1rem — trimmed to help the button clear the bottom
     edge at 1280-1366px (aspect-ratio hero, see .vn-slide comment). */
  margin: 0 0 .5rem !important;
  padding: 0;
  letter-spacing: -0.01em;
}

.vn-slide--1 .vn-slide-heading,
.vn-slide--1 h1.vn-slide-heading {
  color: var(--vn-white);
}

/* Slide body text */
.vn-slide-text {
  font-family: var(--vn-font-body);
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  line-height: 1.7;
  /* 2026-08-18: was 2rem — same 1280-1366px clearance trim as the
     heading margin above. */
  margin: 0 0 1rem;
}

.vn-slide--1 .vn-slide-text {
  color: rgba(247, 242, 235, 0.75);
}

/* Slide CTA button */
/* 2026-08-20: "Разгледай колекцията" — standardized to the shared
   primary-button tokens. Kept display:inline-flex/gap (structural,
   for the icon+label layout), dropped the bespoke padding/colors. */
.vn-slide-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  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-slide-btn:hover {
  background: var(--vn-btn-primary-bg-hover) !important;
  color: var(--vn-btn-primary-color) !important;
}

/* Slideshow responsive */
@media (max-width: 768px) {
  .vn-hero-slideshow {
    /* 2026-08-17: fixed 450px (was 72vh/420 min) — matches the desktop
       550px → tablet 450px → mobile 400px three-tier target. */
    height: 450px;
  }

  .vn-slide {
    /* .vn-slide-inner takes over the horizontal inset below (fixed
       units, not %, so no containing-block mismatch at this width) —
       zero these out here or it'd be double-padded.
       2026-08-20: switched from flex-start to center — reported live
       as content bunched at the top with the bottom half of the fixed-
       height box (450px/400px) empty. The desktop flex-start choice
       (see the base .vn-slide rule) was tuned for a wider, shorter-
       relative-to-content box; doesn't hold at this aspect ratio. */
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .vn-slide-inner {
    /* No arrows left to clear — plain symmetric side padding.
       2026-08-20: top padding was 60px, actively fighting the new
       vertical centering above by shoving content down from center. */
    max-width: 100%;
    padding: 0 1.5rem;
  }

  /* 2026-08-20: the site-wide button standardization gave .vn-slide-btn
     a taller padding (15px 36px, up from .6rem/9.6px) — reported live
     at 375px as the button overlapping the subtitle / the heading
     getting clipped inside this section's fixed, overflow:hidden
     height. Scaled back down for this specific tight container,
     matching the same "compact exception" pattern already applied to
     the wishlist table and mini-cart buttons — color/radius stay
     standardized, physical size fits its container. */
  .vn-slide-btn {
    padding: 10px 20px !important;
  }

  /* 2026-08-20: reported live as hard to read — the mobile hero photo
     (front-page.php) has lighter areas than the desktop one, and the
     base .vn-slide--1 .vn-slide-text color (75%-opacity off-white,
     tuned against the desktop photo/gradient) wasn't contrasty enough
     against them even with the dark scrim behind it. Pure white here,
     mobile-only — desktop keeps the softer off-white. */
  .vn-slide--1 .vn-slide-text {
    color: #ffffff !important;
  }
}

@media (max-width: 480px) {
  .vn-hero-slideshow {
    /* 2026-08-17: fixed 400px (was 90vw/360 min) — third tier of the
       550/450/400 desktop/tablet/mobile target. */
    height: 400px;
  }

  .vn-slide {
    padding-top: 2rem;
  }

  /* 2026-08-20: was display:none — reported live that the content
     column now sits bunched at the top with the bottom half of the
     400px box empty (see the align-items:center fix in the 768px
     query above, inherited down to this width too), so there's room
     for the subtitle again; no longer trading it away for vertical
     space that isn't actually short on this box. Sized down to match
     the button's own compact mobile treatment instead of hiding it. */
  .vn-slide-text {
    display: block;
    font-size: .85rem;
    line-height: 1.5;
    margin: 0 0 .75rem;
  }

  .vn-slide-btn {
    padding: 9px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }
}

/* ============================================================
   USP STRIP
   ============================================================ */

.vn-usp-strip {
  position: relative;
  background-color: var(--vn-bg-alt);
  border-top: 1px solid var(--vn-border);
  border-bottom: 1px solid var(--vn-border);
  /* Break out of any container to span full viewport width */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.vn-usp-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.vn-usp-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--vn-border);
}

.vn-usp-item:last-child {
  border-right: none;
}

.vn-usp-icon {
  font-size: 1.25rem;
  color: var(--vn-accent);
  flex-shrink: 0;
}

.vn-usp-title {
  display: block;
  font-family: var(--vn-font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--vn-dark);
  margin-bottom: .125rem;
}

.vn-usp-sub {
  display: block;
  font-size: .78rem;
  color: var(--vn-text-muted);
}

@media (max-width: 768px) {
  .vn-usp-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-usp-item:nth-child(2) {
    border-right: none;
  }

  .vn-usp-item:nth-child(3) {
    border-right: 1px solid var(--vn-border);
  }
}

@media (max-width: 480px) {
  .vn-usp-inner {
    grid-template-columns: 1fr;
  }

  .vn-usp-item {
    border-right: none;
    border-bottom: 1px solid var(--vn-border);
    padding: 1rem;
  }

  .vn-usp-item:last-child { border-bottom: none; }
}

/* ============================================================
   FEATURED PRODUCTS SECTION
   ============================================================ */

.vn-featured-products {
  padding: 4rem 0;
}

.vn-featured-products .vn-section-inner {
  /* 2026-08-20: narrowed from 1240px to 1140px so the whole grid reads
     proportionally smaller (site owner's framing: "everything becomes
     proportionally smaller"), rather than adding a second overriding
     rule — this is the section's only max-width definition. Kept the
     existing responsive side padding as-is; the request only asked
     for max-width/margin. */
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.vn-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.vn-section-title {
  font-family: var(--vn-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--vn-dark);
  margin: 0 0 .5rem;
}

.vn-section-subtitle {
  font-size: .95rem;
  color: var(--vn-text-muted);
  margin: 0;
}

.vn-products-grid .products {
  display: grid !important;
  /* 2026-08-20: 4 columns, was 3 — parity with /shop/. Checked the
     resulting card width against the section's own max-width (1140px,
     narrowed earlier this session) + padding + 3×24px gaps:
     ~247px/card at 1440px viewport, ~218px/card at 1024px — both
     comfortably wider than the ~160px 2-column mobile card already
     confirmed working with the grid-button padding fix (14px 0
     !important, width:90%), so nothing new to patch for fit at these
     desktop tiers specifically. */
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  float: none !important;
  width: auto !important;
}

/* 2026-08-20: card redesign — soft rounded corners, no visible border,
   a subtle resting shadow that deepens + a slight lift on hover.
   Scoped to .vn-products-grid (this homepage section only) so the main
   shop archive grid is unaffected. */
.vn-products-grid ul.products li.product {
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(26, 16, 8, .06) !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
.vn-products-grid ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(26, 16, 8, .12) !important;
  transform: translateY(-3px) !important;
}

/* More breathing room around the title/price/button block. Overrides
   the site-wide ".astra-shop-summary-wrap{padding:0}" rule above, but
   only inside this grid — children (title link, excerpt, price) keep
   their own 0.9rem left-align paddings independently. */
.vn-products-grid .astra-shop-summary-wrap {
  padding: 18px 20px 22px !important;
}

.vn-section-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* 2026-08-20: "Виж всички продукти" (.vn-btn--outline) and "Научи
   повече за нас" (.vn-btn--ghost) — both secondary/outline buttons,
   standardized to the same tokens. Found this was actually a SECOND,
   differently-styled "Виж всички продукти" instance (.vn-view-all-btn,
   fixed earlier in this pass, is the other one) — same label, two
   diverging button classes; both now resolve to identical values. */
.vn-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--vn-btn-padding) !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;
  cursor: pointer;
}

.vn-btn--outline,
.vn-btn--ghost {
  background: transparent !important;
  border: 1px solid var(--vn-btn-secondary-border) !important;
  color: var(--vn-btn-secondary-color) !important;
}

.vn-btn--outline:hover,
.vn-btn--ghost:hover {
  background: var(--vn-btn-secondary-bg-hover) !important;
  color: var(--vn-btn-secondary-color-hover) !important;
  border-color: var(--vn-btn-secondary-bg-hover);
}

.vn-no-products {
  text-align: center;
  color: var(--vn-text-muted);
  padding: 3rem 0;
}

/* ============================================================
   ABOUT TEASER SECTION
   ============================================================ */

.vn-about-teaser {
  background-color: var(--vn-bg-alt);
  padding: 4rem 0;
}

.vn-about-teaser .vn-section-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.vn-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.vn-about-text .vn-section-title {
  text-align: left;
  margin-bottom: 1rem;
}

.vn-about-text p {
  color: var(--vn-text-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.vn-about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.vn-about-list li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .9rem;
  color: var(--vn-text);
}

.vn-about-list span {
  color: var(--vn-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.vn-about-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vn-about-placeholder {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--vn-accent-light) 0%, var(--vn-accent) 50%, var(--vn-accent-dark) 100%);
  border-radius: var(--vn-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vn-shadow-lg);
  /* 2026-08-20: needed once a real <img> replaced the beige/"VeinNails"
     placeholder content — without it the image's square corners would
     stick out past this box's own border-radius. The gradient/flex/
     centering rules above are left in place as a fallback background
     in case wp_get_attachment_image() ever returns empty (deleted
     attachment, etc.). */
  overflow: hidden;
}

.vn-about-placeholder span {
  font-family: var(--vn-font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: rgba(247, 242, 235, 0.85);
  letter-spacing: 0.1em;
}

/* 2026-08-23: .vn-about-placeholder is a flex container with
   align-items:center (needed to center the fallback "VN" <span> text
   when no photo is set) — that same align-items:center stops a flex
   child's height:100% from taking effect, so the photo sized itself
   to its own intrinsic aspect ratio (this image is a 1:1 square)
   instead of filling the 3:4 box, leaving beige bars top/bottom on
   both desktop and the 768px-mobile breakpoint. align-self:stretch
   opts the photo back into stretching without touching the
   placeholder-text centering.
   The direct flex child here is actually <picture>, not <img> — the
   webp <picture>-wrap hook (functions.php, section 29) wraps this
   particular photo because a .webp sibling exists on disk. <picture>
   has no intrinsic box of its own, so it also needs display:block +
   explicit sizing, or the align-self on the inner .vn-about-photo
   below has nothing to stretch against. Both rules are kept: this one
   covers the current webp-wrapped case, .vn-about-photo's own
   align-self covers the fallback where no <picture> wrapper exists
   (e.g. before a .webp sibling has been generated). */
.vn-about-placeholder > picture {
  display: block;
  width: 100%;
  height: 100%;
  align-self: stretch;
}

.vn-about-photo {
  width: 100%;
  height: 100%;
  align-self: stretch;
  object-fit: cover;
  object-position: center;
  border-radius: var(--vn-radius-lg);
  display: block;
}

@media (max-width: 768px) {
  .vn-about-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .vn-about-visual {
    order: -1;
  }

  .vn-about-placeholder {
    aspect-ratio: 16/7;
    max-width: 100%;
  }

  .vn-products-grid .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2026-08-20: 2 columns here now means each card is roughly half
     the width it used to be — 20px (1.25rem) headings had no mobile
     reduction at all before. Scaled down for the narrower card, not
     because anything was overflowing outright, but titles at full
     desktop size in a ~160px-wide column read cramped/unbalanced. */
  .vn-products-grid ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05rem !important;
  }
}

/* 2026-08-20: was 1-column below 480px — changed to match the 2-column
   tier above instead of stepping down further, per direct request for
   parity with /shop/ (already 2 columns at this width, not 1). No
   separate 480px override needed anymore; the 768px query's 2-column
   rule now simply continues down to 375px and below. */

/* ============================================================
   GDPR COOKIE BANNER
   ============================================================ */

.vn-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--vn-dark);
  color: rgba(247, 242, 235, 0.85);
  font-family: var(--vn-font-body);
  font-size: .875rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  box-shadow: 0 -4px 24px rgba(44, 31, 20, 0.25);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.vn-cookie-banner--visible {
  transform: translateY(0);
}

.vn-cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.vn-cookie-text strong {
  display: block;
  color: var(--vn-accent-light);
  margin-bottom: .25rem;
  font-size: .9rem;
}

.vn-cookie-text p {
  margin: 0;
  color: rgba(247, 242, 235, 0.65);
  font-size: .82rem;
  line-height: 1.5;
}

.vn-cookie-text a {
  color: var(--vn-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vn-cookie-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* 2026-08-20: another bare-<button> casualty of the same bug — the
   cookie-consent banner is a separate legal/utility UI element, out of
   scope for the commerce-button standardization itself, but it still
   needs protecting from the global button rule's !important now that
   that rule exists. Restoring its own original design, not the new
   commerce palette. */
.vn-cookie-btn {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.4rem !important;
  font-family: var(--vn-font-body) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--vn-radius-full) !important;
  cursor: pointer;
  transition: all var(--vn-transition);
}

.vn-cookie-btn--primary {
  background: var(--vn-accent) !important;
  color: var(--vn-white) !important;
}

.vn-cookie-btn--primary:hover {
  background: var(--vn-accent-dark) !important;
  transform: translateY(-1px);
}

.vn-cookie-btn--ghost {
  background: transparent !important;
  color: rgba(247, 242, 235, 0.65) !important;
  border: 1px solid rgba(247, 242, 235, 0.2) !important;
}

.vn-cookie-btn--ghost:hover {
  border-color: rgba(247, 242, 235, 0.5);
  color: var(--vn-white) !important;
}

@media (max-width: 600px) {
  .vn-cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .vn-cookie-actions {
    width: 100%;
  }

  .vn-cookie-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   MOBILE MENU — submenu dropdown arrow ("Меню", "Категории")
   2026-08-20. Reported pale-grey/near-invisible and hard to tap.
   Astra's static CSS (main.min.css) sets no explicit color/fill on
   this arrow at all — sets only size/margin — so whatever muted grey
   is showing comes from browser/inherited default, not something
   overridable through a single confirmed property. Setting both
   "color" and "fill" explicitly (learned from the mobile-trigger
   burger bug above: that one turned out to need "fill" specifically,
   not "color" — covering both here rather than guessing which one
   this SVG actually reads from).
   ============================================================ */
/* 2026-08-20, superseded: the sizing/color rules that used to be here
   are gone — turned out ".dropdown-menu-toggle" isn't wired to any
   click/tap handler at all (checked Astra's frontend.js: only a
   keydown-Enter listener exists for it), while the SEPARATE sibling
   "<button class="ast-menu-toggle">" is the one actually doing the
   work (confirmed live — tap on it expands the submenu). Two visible,
   differently-positioned controls for one action was the real
   complaint ("активната зона е откъсната от стрелката"), not just a
   styling gap. Simplest fix: hide the decorative, non-functional one
   entirely and keep the real one. */
.dropdown-menu-toggle.ast-header-navigation-arrow {
  display: none !important;
}

/* 2026-08-20: reported the arrow now shows before EVERY submenu item
   (Начало, Магазин, За нас, FAQ, Контакти), not just the ones with
   children. Traced it in the live markup: Astra renders the SAME
   ".ast-icon.icon-arrow" SVG inside every ".menu-link" unconditionally
   — for parent items it's nested one level deeper, inside
   ".dropdown-menu-toggle" ("Меню": <a class="menu-link">Меню<span
   class="dropdown-menu-toggle">...</span></a>); for plain items it's
   a DIRECT child of the link itself ("Начало": <a class="menu-link">
   <span class="ast-icon icon-arrow">...</span>Начало</a>). This was
   never actually caused by anything I added — it's Astra's own
   always-render-the-icon markup, just small/pale enough by default
   that it went unnoticed until this mobile audit. The direct-child
   combinator here targets only the un-wrapped case, so the "Меню"/
   "Категории" arrows fixed above (nested inside .dropdown-menu-toggle,
   not a direct child of .menu-link) are untouched. */
.main-header-menu .menu-link > .ast-icon.icon-arrow {
  display: none !important;
}

/* ============================================================
   DESKTOP FLYOUT ARROW — "КАТЕГОРИИ" (submenu-of-submenu), 2026-08-21
   Checked as requested: for items with children, the icon-arrow sits
   inside ".dropdown-menu-toggle" (a direct child of ".menu-link"), NOT
   as a direct child of ".menu-link" itself — so the ">" rule right
   above this one does NOT touch it, correct as suspected.
   What DOES hide it is the OTHER rule above (".dropdown-menu-toggle.
   ast-header-navigation-arrow{display:none}", 2026-08-20) — that one
   is unscoped by nesting level, so it hides this arrow at every depth,
   not just on the top-level "Меню" bar item it was written for. That
   was intentional there (".ast-menu-toggle" duplicates it on mobile),
   but ".ast-menu-toggle" is "display:none" by default on desktop
   (Astra's own static CSS, only becomes visible once
   ".ast-header-break-point" is added at tablet/mobile widths) — so on
   desktop, nested items like "Категории" were left with NO has-children
   indicator at all. Restoring just for this case: items with children
   living INSIDE a submenu (".sub-menu .menu-item-has-children"), not
   the top-level bar items, which keep today's behavior untouched.
   Astra's arrow SVG is a down-chevron ("⌄", for a below-opening
   dropdown) — this submenu opens sideways (Astra's own CSS:
   ".menu-item:hover>.sub-menu{left:0}").
   2026-08-21 follow-up: reported pointing UP, not right. Found why —
   Astra's own static CSS already has a rule for exactly this desktop
   case, one I hadn't searched for by this exact property before:
   "#ast-desktop-header .main-header-menu .sub-menu .menu-item.
   menu-item-has-children>.menu-link .ast-header-navigation-arrow
   {position:absolute;right:.6em;top:50%;transform:translate(0,-50%)
   rotate(270deg)}" — Astra ALREADY rotates the wrapper 270deg (same
   final angle as -90deg) to turn its down-chevron into a right-
   pointing one for this exact scenario, absolutely positioned at the
   link's right edge. My own "rotate(-90deg)" on the child svg was
   stacking on TOP of that (CSS transforms on nested elements compound
   visually) — 270 + (-90) = 180 net off the original down-chevron,
   landing on "up". Removed the duplicate rotation entirely and
   simplified the wrapper override to just re-enable display — Astra's
   own position/rotation was already correct and didn't need fighting,
   only un-hiding.
   2026-08-21, third follow-up: this whole block was missing a
   min-width:769px guard — forgot it applies unconditionally, so
   "display:block!important" was ALSO un-hiding this on mobile, where
   Astra deliberately keeps ".dropdown-menu-toggle" hidden by its own
   design (".ast-header-break-point .dropdown-menu-toggle{display:
   none}", main.min.css — the mobile UI relies on ".ast-menu-toggle"
   alone for this). Breaking that on mobile caused three visible bugs
   at once, all from the one root cause: the now-forced-visible arrow
   had no absolute positioning to fall into (Astra's own rotate/
   position rule for it is itself gated behind "#ast-desktop-header",
   inactive on mobile), so it rendered in normal flow and wrapped onto
   its own line under "Категории"; being newly visible AND focusable
   (inherited "role=button tabindex=0" from the markup) it also picked
   up its own default tap/focus background — easy to mistake for the
   ".ast-menu-toggle" beige-background bug returning, since visually
   near-identical, but actually a fresh instance on this other,
   previously-always-hidden-on-mobile element; and the wrapped extra
   line made the whole submenu read as more cramped even though the
   ".sub-menu .menu-link" padding values below were never touched on
   mobile. Wrapping the whole block in the same guard as the rest of
   this section fixes all three by restoring Astra's original,
   correct mobile behavior — nothing on mobile needed changing, only
   not fighting it in the first place. */
@media (min-width: 769px) {
  .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .dropdown-menu-toggle.ast-header-navigation-arrow {
    display: block !important;
  }

  .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .dropdown-menu-toggle .ast-icon.icon-arrow svg {
    width: 10px !important;
    height: 10px !important;
    color: var(--vn-dark) !important;
    fill: var(--vn-dark) !important;
  }

  .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .dropdown-menu-toggle .ast-icon.icon-arrow svg path {
    fill: var(--vn-dark) !important;
  }
}

/* ============================================================
   PRIMARY MENU — TranslatePress language switcher (BG / EN)
   Added 2026-08-16. Matches the surrounding menu items' font,
   size and color; TRP already renders the labels in caps (BG/EN)
   so no text-transform is needed. Kept minimal on purpose — the
   items already inherit Astra's .menu-item/.menu-link rules
   (same selector as every other menu item), this block only
   guards against the extra inner <span> wrapper disrupting
   spacing/alignment, and keeps the two items compact so they
   never compete for space with the social icons block.
   ============================================================ */

.main-header-menu .menu-item.trp-language-switcher-container > .menu-link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--ast-global-color-2);
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

.main-header-menu .menu-item.trp-language-switcher-container:hover > .menu-link {
  color: var(--ast-global-color-2);
}

.main-header-menu .menu-item.trp-language-switcher-container .trp-ls-language-name {
  font: inherit;
  color: inherit;
}

/* Current language: quietly inert, not a real link target */
.main-header-menu .menu-item.trp-language-switcher-container.current-language-menu-item > .menu-link {
  opacity: 0.55;
  cursor: default;
}

/* Small gap before the pair, and no wrap on narrow desktop widths so it
   never collides with the social icons block that follows the nav. */
.main-header-menu .menu-item.trp-language-switcher-container:first-of-type {
  margin-left: 6px;
}

@media (max-width: 921px) {
  /* Below Astra's desktop breakpoint the primary menu isn't rendered here
     at all (off-canvas takes over) — this just guards the in-between
     tablet range where .main-header-menu can still be visible. */
  .main-header-menu .menu-item.trp-language-switcher-container > .menu-link {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ============================================================
   HEADER ICONS — bare search + cart icons, 2026-08-16
   (Renamed from "HEADER v2": that name described a lightweight
   center-menu layout with a custom off-canvas panel, rolled back
   same day because it duplicated Astra's own native mobile popup.
   Only the icon styling below ever survived — see functions.php /
   astra-settings for the native mobile menu.)
   ============================================================ */

/* Bare icons: no border/background/box around search + cart, thin strokes */
.ast-header-search .ast-search-menu-icon,
.ast-header-woo-cart .ast-site-header-cart-li,
.ast-header-woo-cart .ast-site-header-cart-li > a {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 6px !important;
}

/* 2026-08-22 — НАМЕРЕНАТА, РЕАЛНА причина количката да не се кликва
   на мобилно (потвърдена през реален headless Chrome + CDP —
   getBoundingClientRect и elementFromPoint на живия сайт, не
   симулация): <a class="cart-container"> на мобилно имаше computed
   "pointer-events: none", генерирано от самата Astra
   (".../inc/class-astra-dynamic-css.php": "#ast-mobile-header
   .ast-site-header-cart-li a{pointer-events:none}", винаги освен ако
   Customizer опцията "responsive-cart-click-action" е "redirect").
   На този сайт тя беше "flyout" — Astra очакваше JS да отваря
   мобилно flyout чекмедже вместо да navigate-ва линка, но
   "mobile-cart.js" търси елемент с id="astra-mobile-cart-drawer"
   ("cart_flyout" в скрипта), а такъв елемент изобщо не съществуваше
   на страницата — JS-ът тихо не закачаше click listener-а
   (".addEventListener" обвит в "if (... && cart_flyout)"), затова
   количката беше едновременно: не навигира (pointer-events:none) И
   не отваря нищо — напълно мъртва икона.
   Първата версия на тази поправка беше CSS override тук
   ("pointer-events: auto !important"), копиращ Astra-иния селектор.
   2026-08-22, follow-up: заменено с поправка в самия източник —
   "responsive-cart-click-action" сменено на "redirect" директно в
   опцията "astra-settings" (виж update_option в историята на сесията;
   в Customizer: Appearance → Customize → Header → Woo Cart → Click
   Action → "Redirect to cart page"). Astra вече изобщо не генерира
   "pointer-events:none" правилото — потвърдено, живото inline CSS
   вече няма нито едно съвпадение за него — затова override-ът тук
   стана излишен и е премахнат. По-стабилно за бъдещи ъпдейти на
   темата: сега Customizer state-ът отразява реалното поведение (ако
   собственикът някога отвори Header → Woo Cart в Customizer, ще види
   коректно "Redirect", не "Flyout" зад гърба на CSS override), и няма
   риск бъдещ Astra ъпдейт да смени селектора/механизма и override-ът
   тук да спре да пасва мълчаливо. */

/* Single source of truth for icon color — through the token, not
   hardcoded, so it stays in sync with --vn-dark if it ever changes.
   Covers both search and cart icons; also covered what the removed
   ".ast-site-header-cart a" color rule used to duplicate. */
.ast-header-search .ast-icon.icon-search svg,
.ast-header-woo-cart .ast-icon svg {
  stroke-width: 1px;
  color: var(--vn-dark) !important;
  transform: scale(1.2);
  transform-origin: center;
}

.ast-header-woo-cart .count-container,
.ast-site-header-cart .ast-site-header-cart-data {
  font-size: 13px;
}

/* ============================================================
   HEADER MOBILE SPACING — tighter grouping, more conservative than
   desktop, 2026-08-21 (~20%, not ~30-55% like the desktop version
   above/below). Split into what's safe to touch and what isn't,
   per the 44x44px minimum tap-target requirement:

   - Search: the 6px padding above lives on ".ast-search-menu-icon", a
     WRAPPER div around the actual clickable
     "<a class="astra-search-icon">" inside it — reducing it only
     tightens the wrapper's own visual whitespace; the link's own hit
     box is a separate element, untouched by this. Safe. 6px → 5px,
     then 2026-08-21 follow-up, another ~20%: 5px → 4px.

   - Cart: deliberately left at 6px, NOT reduced here. Unlike search,
     its 6px padding above (same combined "Bare icons" rule) sits on
     ".ast-site-header-cart-li > a" — the real clickable "<a
     class="cart-container">" itself — so shrinking it directly
     shrinks the tap target. Its actual rendered width is the sum of
     several stacked layers (Astra's native ~20px icon + 2px native
     icon padding, this theme's own transform:scale(1.2) on the svg,
     possibly Astra's ".ast-hfb-header .ast-addon-cart-wrap{padding:
     .4em}" depending on which header-cart variant is active) that
     can't be measured without a real browser/DevTools this session —
     no way to confirm the result would stay ≥44px either way, so per
     instruction: flagging this instead of guessing, not touching it.

   - Burger (mobile-trigger): same reasoning, not touched. Its tap box
     is a fixed Astra-native "width:2.2em;height:2.1em" (see the
     "square frame" comment further down) with no gap-controlling
     margin of this theme's own — nothing here to safely reduce either
     without the same unmeasurable risk.
   ============================================================ */
@media (max-width: 768px) {
  .ast-header-search .ast-search-menu-icon {
    padding: 0 4px !important;
  }
}

/* 2026-08-22 — mobile: отвореното търсене вече излиза на отделен ред
   ПОД хедъра, на пълна ширина, вместо да покрива логото. Реалната
   причина (проверена на живо, реален 390px CSS viewport през
   Emulation.setDeviceMetricsOverride, не --window-size — последното
   се оказа мащабирано от Windows display scaling на този хост,
   390 заявени рендираха се като innerWidth:526): Astra прави
   ".ast-search-menu-icon.ast-dropdown-active" positioning context
   (position:relative) за детето си ".search-form" (position:absolute,
   right:-1em, top:50%), а на самото поле слага фиксирано
   "width:235px", без значение от viewport-а. Измерено: разгънатата
   форма седеше left:-34px (извън екрана вляво) до right:203px —
   изцяло покриваща логото (left:20px–right:100px) със собствения си
   плътен бял фон, оттам "логото изчезва". Иконките (сърце/количка/
   бургер) не бяха засегнати — само логото.
   Поправка: спираме .ast-search-menu-icon да бъде positioning
   context (position:static), за да "избяга" полето нагоре към
   следващия позициониран предшественик — ".ast-primary-header-bar"
   (потвърдено position:relative, пълна ширина на хедъра) — вместо
   към малката 26px иконка. "top:100%; left:0; right:0; width:100%"
   спрямо ЦЕЛИЯ хедър ред дава точно "ред под хедъра, пълна ширина".
   Самата иконка за search/close НЕ се мести (само .search-form),
   затова остава на същото място, кликаема — closes на същия toggle. */
@media (max-width: 921px) {
  /* "ast-header-search" добавен нарочно пред всеки от трите селектора
     по-долу (4 класа вместо 3) — !important + равна на Astra-иния
     конкурент специфичност се оказа ненадеждно в тази версия на
     Chrome (същият bug като .coupon display fight-а по-рано: правилото
     се показваше като "matched" и "important" през CSS.
     getMatchedStylesForNode, но computed style пак взимаше Astra-ината
     стойност — тук конкретно top:50%+translateY(-50%) вместо
     top:100%+none). Genuinely по-висока специфичност решава без да
     разчита на tie-break. */
  .ast-header-search .ast-search-menu-icon.ast-dropdown-active {
    position: static !important;
  }

  .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-form {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    padding-left: 16px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }

  .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-field {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   MOBILE ACCORDION MENU — item height, 2026-08-21
   Reported ~125px per row, far taller than it needs to be, making the
   open menu scroll for a long time. Root cause: Astra ties the
   accordion rows' line-height to a unitless multiplier, not a fixed
   px value — ".ast-header-break-point .ast-nav-menu .sub-menu
   {line-height:3}" (main.min.css) — 3× whatever the inherited font-
   size resolves to (not itself set anywhere in this theme or in
   Astra's Customizer options for this site, "header-mobile-menu-font-
   size"/"header-menu1-font-size" are both empty in astra-settings, so
   it falls through to Astra's own default). Rather than fight an
   unitless multiplier against an uncertain inherited font-size,
   overriding with fixed px values directly on the link, which also
   makes hitting the 44px tap-target floor a certainty instead of a
   calculation: line-height alone is already exactly 44px, and the
   10px top/bottom padding (Astra's own horizontal 20px, from
   ".ast-header-break-point .main-navigation ul .menu-item .menu-link
   {padding:0 20px}", is untouched — only vertical spacing requested)
   is pure extra room on top of that floor, landing the total row at
   ~64-66px (44 + 10 + 10 + the existing 1px border), inside the
   requested 60-70px band. Applies to every level — top-level
   accordion headers ("МЕНЮ", "ЖУРНАЛ") and nested items ("Начало",
   "Категории" etc. inside ".sub-menu") alike, since the request was
   "всеки пункт". Desktop untouched — its own menu-link padding is a
   separate, already-scoped rule (see "HEADER DESKTOP SPACING" below,
   min-width:769px), and this row-height mechanism
   (".ast-header-break-point", only active at/below Astra's own mobile
   breakpoint) doesn't apply there regardless.
   2026-08-21 follow-up: reported still ~125px / full-screen menu.
   Re-verified the rule above is correctly live (fetched the served
   stylesheet directly, byte-for-byte match, braces balanced, nothing
   later in the cascade re-touches ".menu-link" on mobile — audited
   every ".menu-link" occurrence in this file). The math should have
   held: an explicit "line-height:44px" on the element itself doesn't
   need to fight the ancestor's unitless "line-height:3" (inheritance
   only applies where nothing more specific is set, it's not a
   cascade contest), and no other rule anywhere overrides it. Since a
   line-height-only approach still leaves room for something
   unaccounted-for to inflate the box (an unmeasured icon/child
   pushing the line taller, e.g.), switching to a fixed "height" +
   "overflow:hidden" instead removes that possibility outright — an
   explicit height on a box-sizing:border-box element caps the
   RENDERED box size directly, regardless of what its content or an
   ancestor's line-height would otherwise compute. line-height is
   kept too, now just for centering the text within that fixed
   height, not as the sizing mechanism itself. 62px total (mid-way in
   the requested 60-65px band); min-height:44px is redundant with a
   fixed 62px height but kept as an explicit, self-documenting floor
   in case this value is ever tuned down later. */
/* 2026-08-21, consolidated: this used to be two separate
   "@media(max-width:768px)" blocks from two rounds of edits the same
   day — one setting ".menu-link" to a hard height:44px, a second
   (added for the absolute-positioned dropdown panel below) re-setting
   height to auto plus its own font-size:13px/letter-spacing:0. The
   second block's height:auto/max-height:none is genuinely needed
   (the panel sizes to its content), but its font-size/letter-spacing
   values were just cascade drift, not an intended change — merged
   into one block, one ".menu-link" rule, with the panel's real
   requirement (auto height) and the intended text values (14px/
   0.5px) together instead of fighting across two rules. */
@media (max-width: 768px) {
  .main-header-menu .menu-link {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
  }
  .main-header-menu .ast-menu-toggle {
    height: 44px !important;
    line-height: 44px !important;
  }
  /* 2026-08-22 — почистване след разследването на "количката не се
     кликва": и диагнозата тук (навигационният панел поглъща клика), и
     следващата (промо лентата застъпва хедъра) се оказаха погрешни.
     Реалната причина беше другаде изцяло — Astra сама слага
     "pointer-events: none" на самия <a class="cart-container">, виж
     поправката при ".ast-header-woo-cart .ast-site-header-cart-li"
     по-горе. z-index-ът тук не вредеше, но и не решаваше нищо реално
     (потвърдено с реални getBoundingClientRect измервания през
     headless Chrome: лентата и мобилният хедър се допират точно на
     границата, 0px застъпване) — премахнат, position:relative остава,
     нужен е като positioning context за абсолютно позиционирания
     dropdown панел по-долу, несвързано с тази история. */
  .ast-mobile-header-wrap {
    position: relative !important;
  }
  .ast-mobile-header-wrap .ast-main-header-bar-alignment {
    position: static !important;
  }
  .ast-mobile-header-wrap .main-header-bar-navigation {
    position: absolute !important;
    top: 100% !important;
    right: 15px !important;
    left: auto !important;
    width: 220px !important;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 999;
  }
}

/* ============================================================
   HEADER DESKTOP SPACING — tighter grouping, 2026-08-21
   Desktop-only (min-width:769px) — mobile keeps its own separately-
   tuned spacing untouched, see the 768px queries elsewhere in this
   file.

   1) Menu items ("МЕНЮ", "ЖУРНАЛ" etc.): requested target was
      ".main-header-menu .menu-item", but that class (the <li>) carries
      no padding at all — the real horizontal spacing is Astra's own
      static rule ".main-header-menu .menu-link, .main-header-menu>a
      {padding:0 1em}" (main.min.css), on the <a>, not the <li>.
      Reduced 1em → 0.6em (-40%), then 2026-08-21 follow-up: still too
      loose, tightened again 0.6em → 0.4em (-33% more, -76% off Astra's
      original 1em total).
      2026-08-21, second follow-up: reported the 0.4em compression was
      ALSO hitting the dropdown submenu items (".sub-menu .menu-link"
      inherits the same base Astra rule and matched this selector too),
      cramming "Начало"/"Магазин"/etc. Split the selector to only the
      first-level bar items (direct children of ".main-header-menu",
      excludes anything nested inside ".sub-menu") and gave the
      submenu its own, separate, more generous values below instead of
      sharing this one.

   2) Icon group (search/wishlist/cart): the gap here isn't one
      property but two, both already in this file: the 6px side
      padding this theme already added to the bare search+cart icons
      (".ast-header-search .ast-search-menu-icon" etc., "HEADER ICONS"
      block above) and the 14px margin-left this theme already added
      to the wishlist icon to space it off the cart ("HEADER WISHLIST
      ICON" block below). Both reduced ~35-40%: 6px→4px, 14px→9px;
      then 2026-08-21 follow-up, ~30% further: 4px→3px, 9px→6px.
   ============================================================ */
@media (min-width: 769px) {
  .main-header-menu > li > .menu-link {
    padding: 0 0.4em !important;
  }

  .ast-header-search .ast-search-menu-icon,
  .ast-header-woo-cart .ast-site-header-cart-li,
  .ast-header-woo-cart .ast-site-header-cart-li > a {
    padding: 0 3px !important;
  }

  .header-widget-area a.wishlist_products_counter {
    margin-left: 6px;
  }

  /* 2026-08-21: dropdown submenu — own values, independent of the
     compact bar-item padding above (see the note in the comment block
     up top). Astra's own default here is ".main-header-menu .sub-menu
     .menu-link{padding:.9em 1em}" (main.min.css), same specificity as
     this override (3 classes each), so !important to be safe. */
  .main-header-menu .sub-menu .menu-link {
    padding: 10px 20px !important;
    line-height: 1.5 !important;
  }

  /* Vertical breathing room inside the panel itself, above/below the
     item list. */
  .main-header-menu .sub-menu {
    padding: 12px 0 !important;
  }

  /* 2026-08-21: panel width — Astra's own static rule fixes every
     ".sub-menu" (any depth) at a flat "width:240px" (main.min.css),
     far wider than short items like "Начало"/"Магазин" need. That
     matters beyond just wasted whitespace: "Категории"'s own nested
     flyout opens via "left:100%" of ITS PARENT panel — so a needlessly
     wide 240px parent pushes the flyout's starting x-position 240px+
     to the right before it even begins, the direct cause of it running
     off-screen at 1280/1440px. Only "left" is set on the base rule
     (no "right"), so the CSS shrink-to-fit sizing algorithm for
     absolutely-positioned boxes already applies here in principle —
     Astra's fixed width simply overrides it. "max-content" restores
     that shrink-to-fit explicitly (more consistent cross-browser than
     relying on plain "auto" here); min/max-width keep it from going
     unreadably narrow or, for a long category name, unreasonably wide
     — Astra's own ".sub-menu .menu-link{word-wrap:break-word}" still
     wraps text past max-width same as before. Applies at every
     nesting level via the same selector (".sub-menu" matches any
     depth), so "Категории"'s own flyout panel shrinks the same way.
     Not independently verified at 1024/1280/1440px — no live browser
     this session — but this removes the identified cause of the
     overflow rather than papering over it, and Astra ships its own
     overflow-detection fallback already (".main-header-menu
     .ast-sub-menu-goes-outside:hover>.sub-menu{left:-100%}",
     main.min.css — JS-driven, flips a submenu to open leftward when it
     would clip the viewport). That class is Astra's own, not
     something added here, so it should self-activate at 1024px if
     content-width alone still isn't enough — please check and report
     back rather than assume either way. */
  .main-header-menu .sub-menu {
    width: max-content !important;
    min-width: 180px !important;
    max-width: 320px !important;
  }

  /* "Категории"'s own nested flyout (the sub-menu-of-a-sub-menu,
     positioned via Astra's own ".sub-menu .menu-item:hover>.sub-menu
     {left:100%}") was rendering flush against its parent panel — same
     background/border/shadow, zero gap, reading as one continuous
     surface instead of two stacked layers. Astra's own
     ".main-header-menu.ast-menu-shadow .sub-menu{box-shadow:0 4px 10px
     -2px rgba(0,0,0,.1)}" (this menu already carries the
     "ast-menu-shadow" class) already gives every panel a soft shadow —
     it just had no gap to be visible IN. A small margin here is enough
     to both create the requested 2-3px separation AND let that
     existing shadow actually show in the gap, rather than layering a
     second one on top. */
  .main-header-menu .sub-menu .sub-menu {
    margin-left: 3px !important;
  }
}

/* 2026-08-20: audited for other bare <button> elements silently hit by
   the same global-button-!important bug as the wishlist "×" remove
   button (see WISHLIST PAGE section) and the Quick View close button
   (assets/css/woocommerce.css). Confirmed live in Astra's own dynamic
   CSS: ".ast-search-menu-icon .search-form button.search-submit
   {padding:0 4px;}" and the mobile-trigger rules have no !important of
   their own, so my global "button{padding:...!important}" was
   silently winning underneath the "Bare icons" fix above (which only
   resets the .ast-search-menu-icon WRAPPER <div>, not the actual
   <button> inside it — a separate element). Neutralizing the CTA-style
   properties back to transparent/no-padding/no-radius so Astra's own,
   more specific sizing/position rules keep working as designed. */
.ast-header-search .search-submit,
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
}

/* 2026-08-20: ".ast-menu-toggle" — the real, functional submenu
   expand/collapse button (confirmed: tapping it works; the decorative
   ".dropdown-menu-toggle" arrow above is hidden now because it never
   had a click/tap handler at all). Pulled out of the bundled rule
   above into its own block, unchanged in effect, per direct request —
   the properties are identical to what was already applied there;
   checked the cascade for the reported beige background and found no
   conflicting rule of equal-or-higher weight anywhere in this file or
   Astra's own CSS (dynamic or static) — this selector (.ast-menu-toggle,
   specificity 0-1-0) already beats the global "button" tag selector
   (0-0-1) on specificity alone, before source order even matters.
   Added -webkit-tap-highlight-color as a new line of investigation:
   mobile browsers tint a tap with a translucent highlight color by
   default, on ANY element regardless of its "background-color" CSS —
   entirely unrelated to background, and nothing here or in Astra
   addresses it. If the beige is this, this fixes it; if it's still
   there after, it's coming from somewhere `background` can't explain
   and needs the exact DevTools rule (file:line) to go further.
   POSITION LEFT ALONE ON PURPOSE: Astra's own static CSS
   (".menu-item-has-children>.ast-menu-toggle{position:absolute;
   top:0;right:20px}") exists specifically because ".menu-link" is
   "width:100%" at this breakpoint — without absolute positioning this
   button would wrap onto its own line below the text instead of
   sitting at the row's right edge, not "next to text" as hoped. Moving
   it takes more than removing position:absolute (the link's own width
   has to change too), so not attempted here — flagging this as a
   separate, bigger layout question rather than guessing at it. */
.ast-menu-toggle {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2026-08-20, follow-up: not tap-highlight after all — reported live
   that the beige shows specifically at aria-expanded="true", and
   inconsistently between levels ("Меню" white, "Категории" beige, same
   open state). Couldn't find the source rule in either Astra CSS
   source (checked for backgrounds on .ast-menu-hover,
   .ast-submenu-expanded, .current-menu-ancestor/-parent/-item — none
   defined anywhere), so rather than keep searching, targeting the
   exact reported condition directly with higher specificity, covering
   both plausible state markers (attribute and class — same
   "don't assume which one" approach as the ×/hamburger icon fix).
   Consistency choice: transparent for both, matching every other bare
   header icon this session (no boxed/backgrounded state anywhere
   else), rather than beige for both. */
li.menu-item-has-children > .ast-menu-toggle[aria-expanded="true"],
li.ast-submenu-expanded > .ast-menu-toggle {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2026-08-20: make the arrow itself the visible/legible thing instead
   of a background box — darkened, sized up, and set to flip on
   expand. Both "color" and "fill" set explicitly again (the mobile-
   trigger burger icon earlier this session needed fill specifically,
   not color, so covering both rather than assuming). Astra's own
   static CSS has a rotateX(180deg) transform tied to
   ".ast-submenu-expanded>.ast-menu-toggle::before" — a ::before
   pseudo-element, not the actual <svg> this site renders inside the
   button, so it doesn't apply here; rotating our own element instead,
   watching the same two state markers as the background fix above. */
.ast-menu-toggle .ast-icon.icon-arrow svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--vn-dark) !important;
  fill: var(--vn-dark) !important;
  transition: transform 0.25s ease;
}
.ast-menu-toggle .ast-icon.icon-arrow svg path {
  fill: var(--vn-dark) !important;
}
.ast-menu-toggle[aria-expanded="true"] .ast-icon.icon-arrow svg,
li.ast-submenu-expanded > .ast-menu-toggle .ast-icon.icon-arrow svg {
  transform: rotate(180deg);
}

/* 2026-08-20: found it — not aria-expanded at all, :focus. The button
   keeps focus after a click/tap and picks up a focus background style
   from somewhere (still unidentified, same as the earlier border/
   tap-highlight dead ends — targeting the reported condition directly
   again rather than continuing to search for the source).
   2026-08-21, actually found it: DevTools computed style on the live
   element — "background-color: rgb(154, 123, 94)" = #9a7b5e on
   "button.ast-menu-toggle". That's "--vn-btn-primary-bg-hover" from
   the site-wide button standardization, via its unqualified
   "button:hover" rule — matches ANY <button>, including this one, the
   same class of bug as every other bare-<button> collision this
   session (search-submit, mobile-trigger, wishlist remove, Quick View
   close). ":hover" was the one state this list never covered — only
   the base rule, ":focus", ":active" and ":focus-visible" got a
   transparent reset, so a tap that leaves the browser's synthetic
   ":hover" stuck active afterward (common on touchscreens — no mouse
   to move away and clear it) kept showing the button-standardization
   hover color underneath, indistinguishable by eye from the
   aria-expanded/focus theories tried and ruled out earlier. Adding
   ":hover" here closes that last gap. */
.ast-menu-toggle:focus,
.ast-menu-toggle:hover,
.ast-menu-toggle:active,
.ast-menu-toggle:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
}
/* Keyboard accessibility: :focus-visible only matches keyboard/
   programmatic focus in supporting browsers, not a mouse click or a
   touch tap — so this shows for Tab-key navigation without bringing
   back the beige on every tap. */
.ast-menu-toggle:focus-visible {
  outline: 2px solid var(--vn-dark) !important;
  outline-offset: 2px;
}

/* 2026-08-20, follow-up: reported a visible frame/square around the
   burger despite border:none above. Searched exhaustively — Astra's
   dynamic (Customizer) CSS and its static main.min.css bundle both —
   for any border/box-shadow/outline on .ast-mobile-menu-trigger-minimal,
   .menu-toggle.main-header-menu-toggle, or .ast-button-wrap; found
   none (only a fixed width:2.2em/height:2.1em box with no visible
   styling, and the border-radius:2px this file already zeroes out).
   Adding outline/box-shadow as defensive coverage since those weren't
   explicitly zeroed before, but flagging honestly: unlike the fill/
   color bugs above, I don't have direct evidence for what's actually
   painting this one. If it's still visible after this, the real
   selector needs to come from DevTools — same as how the wishlist
   heart icon size bug was finally solved this session. */
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal {
  outline: none !important;
  box-shadow: none !important;
}

/* 2026-08-20, follow-up: found the actual reported bug — the reset
   above never touched "color", so the global primary-button rule's
   "color: var(--vn-btn-primary-color) !important" (white) was still
   winning here. The mobile trigger's icon is an inline <svg
   fill="currentColor">, so a forced-white color made it a white icon
   on the (white/light) header — effectively invisible, read by the
   site owner as "the burger button is missing" at 375px. */
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal {
  color: var(--vn-dark) !important;
}

/* 2026-08-20, follow-up: "color" fix above was ineffective — reported
   still invisible after deploy. Checked Astra's own live dynamic CSS
   again and found the actual paint source: the icon isn't relying on
   currentColor inheritance from the button's "color" at all. Astra's
   own rule sets fill DIRECTLY on the svg: "...ast-mobile-svg
   {width:20px;height:20px;fill:var(--ast-global-color-5);}" — and
   --ast-global-color-5 resolves to #FFFFFF (confirmed live in this
   theme's Astra global palette). A CSS fill declaration on the <svg>
   overrides its own inline fill="currentColor" attribute, so the
   button's "color" was never in the paint path to begin with — fixing
   "fill" directly is what was actually needed. */
[data-section="section-header-mobile-trigger"] .ast-mobile-svg {
  fill: var(--vn-dark) !important;
}

/* 2026-08-20: reported showing "×" (ast-close-svg) even when the menu
   is closed, instead of the three-line hamburger (ast-menu-svg).
   Astra's own default (main.min.css): ".ast-close-svg{display:block}"
   globally, THEN ".menu-toggle .ast-close-svg{display:none}" scopes it
   back to hidden specifically inside a "menu-toggle"-classed button —
   which this one is. Couldn't find what's defeating that default in
   static analysis, so enforcing the correct default state directly:
   × hidden at rest, lines shown; JS still toggles Astra's own
   "toggled"/"active" class on interaction, this only fixes the
   at-rest default. */
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal .ast-close-svg {
  display: none !important;
}
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal .ast-menu-svg {
  display: block !important;
}
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal.toggled .ast-close-svg,
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal[aria-expanded="true"] .ast-close-svg {
  display: block !important;
}
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal.toggled .ast-menu-svg,
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal[aria-expanded="true"] .ast-menu-svg {
  display: none !important;
}

/* 2026-08-20: the square frame around the cart icon — separate bug
   from the height one below, found by reading Astra's generated CSS
   directly rather than guessing again: the "Bare icons" rule above
   strips border from .ast-site-header-cart-li and its <a>, but the
   actual border comes from a different, more specific rule Astra
   emits for the "Outline" cart style:
   ".ast-menu-cart-outline .ast-cart-menu-wrap .count,
    .ast-menu-cart-outline .ast-addon-cart-wrap
    {border-style:solid;border-color:#b89678;border-width:2px;}"
   — targets .ast-addon-cart-wrap (the icon's own wrapper, one level
   deeper than what was already covered) and the count badge. Not
   switching the Customizer style away from "Outline" — the earlier
   height bug (below) already proved that setting isn't actually
   style-specific and Fill would inherit the exact same issues; this
   overrides the border directly instead, same approach as the height
   fix. The count badge keeps its round look regardless — that comes
   from this theme's own background-color + border-radius:50% rule
   above, not from this border, so removing the border here doesn't
   flatten it back to a plain number. */
.ast-menu-cart-outline .ast-addon-cart-wrap,
.ast-menu-cart-outline .ast-cart-menu-wrap .count {
  border: none !important;
}

/* Бутон "Преглед на количката" в мини-количката — 2026-08-20, updated:
   moved from its own outline treatment to the standardized PRIMARY
   button (it's explicitly listed as a primary/solid CTA in the
   site-wide button spec, alongside "Купи"/"Добави в количката").
   Selectors are the standard WooCommerce classes from
   templates/cart/mini-cart.php (woocommerce-mini-cart__buttons is the
   wrapper; wc-forward is on both buttons, so :not(.checkout) excludes
   "Плащане" — which already gets the same primary look for free from
   the base .button rule, no separate block needed for it). */
/* 2026-08-20: reported wrapping to two lines — the global .button
   rule's padding (15px 36px) + 0.2em letter-spacing don't fit "Преглед
   на количката" inside the mini-cart dropdown's narrow width. Same
   fix category as the wishlist table button above: color/radius stay
   standardized, padding/letter-spacing scaled down for this specific
   tight container. */
.woocommerce-mini-cart__buttons a.button:not(.checkout),
.widget_shopping_cart_content a.button.wc-forward:not(.checkout) {
  color: var(--vn-btn-primary-color) !important;
  background: var(--vn-btn-primary-bg) !important;
  border: none !important;
  border-radius: var(--vn-btn-radius) !important;
  padding: 12px 16px !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--vn-btn-primary-bg-hover) !important;
  color: var(--vn-btn-primary-color) !important;
}

/* Скриване на "0" при празна количка — 2026-08-20.
   Пратеният селектор (.cart-contents-count) не съществува в маркъпа
   на този сайт — това е класът от Storefront/generic WooCommerce теми.
   Astra изобщо не рисува броя в отделен <span>: числото е генерирано
   съдържание на псевдоелемент, ".ast-site-header-cart i.astra-icon:after
   {content: attr(data-cart-total); ...}" (виж
   astra/inc/class-astra-dynamic-css.php), а самата стойност седи като
   HTML атрибут data-cart-total="0"/"1"/... върху <i class="astra-icon
   ast-icon-shopping-bag" data-cart-total="0">. Затова :empty и
   [data-count="0"] никога няма да съвпаднат тук — вместо това:
   атрибутен селектор върху истинския атрибут, скриващ само
   псевдоелемента, само при стойност "0" (при 1+ бройката се показва
   нормално, без промяна). Проверих и алтернативата през PHP filter
   astra_header_cart_count — тя е all-or-nothing (крие бройката
   винаги, дори когато има артикули), затова не пасва тук. */
.ast-site-header-cart i.astra-icon[data-cart-total="0"]:after {
  display: none !important;
}

/* ============================================================
   HEADER CART HEIGHT FIX — 2026-08-20
   Found via DevTools: .ast-site-header-cart.ast-menu-cart-outline was
   rendering at 170.9px tall, dragging the whole header down with it.
   Root cause, confirmed by reading Astra's own generated CSS on this
   page directly (not guessed): Astra core ties every header-row
   item's line-height to the row height itself —
   ".ast-desktop .ast-primary-header-bar .ast-header-woo-cart{
   line-height:65px;min-height:65px;}" — the SAME rule that gives menu
   items and the search icon their line-height. That's harmless for
   single-line text (it just centers), but .ast-header-woo-cart wraps
   a multi-part structure (icon + count badge), and the inherited
   65px line-height compounds across its inline content instead of
   collapsing — hence 170.9px.
   This is NOT specific to the "Outline" cart style — the rule above
   has no style qualifier, so "Fill" inherits the exact same 65px and
   would break the same way. Switching the Customizer style setting
   would not have fixed this; the line-height itself needs resetting.
   Safe to reset: both .ast-header-woo-cart and .ast-site-header-cart
   are display:flex with align-items:center (also Astra's own CSS),
   so vertical centering of the icon/badge comes from flexbox, not
   from line-height — resetting it can't un-center anything.
   min-height:65px is left alone; that's the correct header row
   height and isn't part of the bug.
   ============================================================ */
.ast-primary-header-bar .ast-header-woo-cart,
.ast-site-header-cart {
  line-height: 1 !important;
}

/* ============================================================
   HEADER WISHLIST ICON — 2026-08-20
   Placed via Astra's native "Header Widget" builder slot (widget-1,
   right after woo-cart in header-desktop-items) holding a Text widget
   with [ti_wishlist_products_counter]. Learned from the cart height
   bug above: reset line-height/margin/padding explicitly here too,
   rather than trust the generic .widget-area/.widget defaults not to
   inflate the row the same way. icon_style=black is set in the
   plugin's own tinvwl-topline option, so the heart glyph is already
   #000 (.top_wishlist-black:before{color:#000}, plugin's own CSS) —
   no color override needed here, just sizing/spacing to sit flush
   with the search + cart icons beside it.
   ============================================================ */
.header-widget-area {
  line-height: 1;
  display: flex;
  align-items: center;
}
.header-widget-area .widget {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.header-widget-area .textwidget {
  line-height: 1;
  display: flex;
  align-items: center;
}
.header-widget-area a.wishlist_products_counter {
  display: flex;
  align-items: center;
  line-height: 1;
  /* 2026-08-21: this value is the real, effective one for mobile
     (≤768px) — the desktop override two sections up ("HEADER DESKTOP
     SPACING", min-width:769px) takes over above that width, so editing
     this base declaration only ever changes the mobile result. Reduced
     14px → 11px (~20%, more conservative than desktop's ~55% cut) —
     pure external margin on the link itself, doesn't touch its own
     clickable box, so no tap-target risk. 2026-08-21 follow-up,
     another ~20%: 11px → 9px, same reasoning. */
  margin-left: 9px; /* breathing room from the cart icon, matches search-to-cart gap */
}

/* 2026-08-20: reported as a "frame/capsule" around the heart, bigger
   than search/cart. Confirmed the glyph itself isn't the cause — \e909
   is ftinvwl-heart-o, a plain line-art outline, nothing baked in — so
   this is a box-model issue on the <a>.
   2026-08-20, follow-up: same lesson as the ::before size fix below —
   the ".header-widget-area"-scoped version of this rule is exactly
   the pattern that turned out dead (DevTools showed it never matched,
   cascade fell through to "body"). Switched to the unscoped selector
   for the same reason it fixed the size: matches what's actually
   applied in the live cascade instead of an ancestor chain that isn't
   really the one winning. */
a.wishlist_products_counter,
a.wishlist_products_counter:hover,
a.wishlist_products_counter:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.header-widget-area a.wishlist_products_counter:before {
  margin-right: 0 !important; /* no-txt mode: plugin's own 5px text-gap isn't needed with no label */
}
.header-widget-area .wishlist_products_counter_number {
  font-size: 11px;
}
/* Safety net for the same capsule/border report: neither the plugin's
   own public.css nor Astra's dynamic inline CSS defines any border on
   .wishlist_products_counter or its two child spans (checked both
   directly — no matching rule exists anywhere outside this file), so
   the only remaining candidate is a border sitting on the *_text/
   *_number child spans rather than the <a> itself. Covering both
   explicitly costs nothing (neither has other box styling to protect)
   and removes that possibility outright. */
.wishlist_products_counter_text,
.wishlist_products_counter_number {
  border: none !important;
  box-shadow: none !important;
}

/* 2026-08-20, second safety net: exhausted static-CSS search (Astra's
   main.min.css .widget rule is margin-only, no border; nothing named
   "text-3" or "wishlist" anywhere in Astra's own bundle or in this
   theme's separate woocommerce.css) and still no source found for the
   reported capsule. #text-3 is the real, confirmed <section> id for
   this widget slot (from the live rendered HTML, not guessed) — adding
   the reset at ID specificity as the highest-priority layer available,
   covering the wrapper section + textwidget + link in one place. */
#text-3,
#text-3 .textwidget,
#text-3 a.wishlist_products_counter {
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#text-3 .textwidget,
#text-3 a.wishlist_products_counter {
  padding: 0 !important;
}
/* 2026-08-20: base for the overlay badges — both the heart and the
   cart's number move out of normal flow onto an absolutely-positioned
   corner badge, so each icon needs to be the positioning context.
   i.astra-icon already has position:relative from Astra's own CSS
   (".ast-site-header-cart i.astra-icon{position:relative;...}") but
   repeated here !important so this doesn't silently depend on that
   staying true across an Astra update. */
#text-3 a.wishlist_products_counter,
.ast-site-header-cart i.astra-icon {
  position: relative !important;
  display: inline-block !important;
}

/* 2026-08-20: unified badge look for both counters, one place instead
   of two separately-tuned versions. Heart keeps :not(:empty) so it
   disappears when the wishlist has 0 items (plugin empties the span's
   HTML at count 0 — see public.js); the cart's 0-state is already
   handled by the separate [data-cart-total="0"]:after{display:none}
   rule above, so no equivalent guard is needed on this side. box-shadow
   and letter-spacing are reset !important here too, since Astra's own
   cart badge rule (class-astra-dynamic-css.php) sets both
   (box-shadow 1px 1px 3px, letter-spacing -.5px) and those would
   otherwise still show through underneath the shared look. */
#text-3 .wishlist_products_counter_number:not(:empty),
.ast-site-header-cart i.astra-icon:after {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  line-height: 18px !important;
  background: #b09070 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-align: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
}

/* 2026-08-20: closes a gap in the :not(:empty) guard above. The AJAX
   refresh in public.js does ".html(counter)" whenever counter !== the
   string 'false' — and it separately computes
   "has_products = !('0' == counter || 'false' == counter)" only to toggle
   the .wishlist-counter-with-products CLASS. So when the wishlist is
   emptied down to exactly 0 (as opposed to never-had-anything, which
   ships the sentinel 'false' and empties the span), the span can end
   up holding the literal text "0" — non-empty, so :not(:empty) alone
   would still show a "0" badge. .wishlist-counter-with-products is the
   one signal that's correct in every case (server-renders it
   conditionally on load too — see the ' (0 < $counter ...)' check in
   the plugin's own ti-wishlist-product-counter.php template — and the
   JS toggles it in lockstep with has_products), so gate on that
   instead for this specific edge case. */
#text-3 a.wishlist_products_counter:not(.wishlist-counter-with-products) .wishlist_products_counter_number {
  display: none !important;
}

/* 2026-08-20, third attempt — first two rounds (font-size:20px +
   transform:scale(1.2), then font-size:24px !important) both targeted
   ".header-widget-area a.wishlist_products_counter:before". Site
   owner found via real DevTools that this selector never matched the
   element at all — the cascade for the actual heart ::before bottomed
   out at a plain "body" rule, meaning every earlier attempt here was
   dead CSS the whole time, not overridden-but-present. Replaced with
   the exact selector confirmed live in the inspector:
   ".wishlist_products_counter.top_wishlist-heart::before". Left
   unscoped (no ".header-widget-area" ancestor) to match verbatim what
   was confirmed working, rather than reintroduce a qualifier that may
   be part of why the old one silently failed.
   2026-08-20, follow-up — 24px matched the cart's font-size but not
   its real rendered box height (~31px, taller than its own font-size
   due to Astra's own padding/line-height stacking on that element,
   not reproduced here). Bumped to 28px per direct instruction after
   visual confirmation on the live site that 24px still read smaller
   than the cart.
   Vertical centering: unaffected by this change — centering comes
   from ".header-widget-area a.wishlist_products_counter{display:flex;
   align-items:center}" above, on the *element*, not the pseudo's own
   font-size, so a bigger glyph still centers in the flex row the same
   way the smaller one did. */
.wishlist_products_counter.top_wishlist-heart::before {
  font-size: 28px !important;
}

/* ============================================================
   LOGO WRAPPER PADDING — 2026-08-16, revised same day after the
   real logo was added.
   The primary header's min-height/line-height used to be fought here
   with !important against Astra's own dynamic CSS. That's gone now —
   height is set natively via the "hb-header-height" Customizer value
   (see veinnails_astra_defaults() in functions.php, currently 94px),
   so Astra generates the right CSS from the start instead of being
   overridden.
   ============================================================ */

/* Logo wrapper vertical padding — this, not the row min-height, is
   what actually determines the header's real height at desktop: the
   full-size logo (~86px tall at its 150px width) plus this padding is
   what the row grows to fit. Kept tight at 4px top/bottom (8px total)
   so 86 + 8 ≈ 94px — the header is shorter than the original ~122px
   purely by trimming this padding, without touching the logo size.
   Going shorter than this floor requires shrinking the logo again.
   Flex + align-items:center keeps the logo vertically centered inside
   that padding regardless of row height. */
.site-header [data-section="title_tagline"],
.site-header .site-branding {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.site-header .site-logo-img {
  display: flex;
  align-items: center;
}

/* ============================================================
   HIDE THE MOBILE TRIGGER ON DESKTOP — 2026-08-16
   The toggle button ("section-header-mobile-trigger") is only
   meant to appear below Astra's mobile breakpoint (921px). Force
   it hidden above that width explicitly, instead of relying only
   on Astra's own internal breakpoint CSS.
   ============================================================ */
@media (min-width: 922px) {
  [data-section="section-header-mobile-trigger"] {
    display: none !important;
  }
}

/* ============================================================
   PRODUCT TABS
   2026-08-19, restructured 2026-08-19 — see functions.php section 12.
   Four tabs (Какво включва / Начин за измерване / Начин за поставяне /
   Защо VeinNails) share one styling class, .vn-product-tab — they're
   all now full, equal-weight tabs (none is squeezed under the
   description anymore), so they get the same "can breathe" treatment
   the old .vn-how-to-apply-tab alone used to have.
   ============================================================ */
.vn-product-tab h3 {
  font-family: var(--vn-font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--vn-dark);
  margin: 1.75rem 0 .75rem;
}

/* ============================================================
   WISHLIST PAGE — button hierarchy
   2026-08-20. Every button on /любими/ (TI Wishlist's own templates)
   inherits the theme's global CTA-sized .button — sized for "single
   Add to Cart button on a product page", far too heavy repeated many
   times on a utility list page ("стена от кафяви капсули"). Nothing
   in this theme styled .tinv-wishlist buttons before this, so this
   is written fresh and scoped to the wishlist wrapper rather than
   touched globally, to avoid affecting the real product-page CTA.

   Three roles, one visual weight each:
   1. "Виж продукт" (td.product-action — WooCommerce's own
      add_to_cart_button, rendered for every row since every product
      here is variable and can't add-to-cart without picking form ×
      size — see functions.php woocommerce_product_add_to_cart_text
      filter, "Виж продукт" sitewide) — primary row action, stays
      solid/accent but compact.
   2. "Добави избраните/всички в количката" — button[name] selectors,
      not .alt (plugin's own class_action() filter adds .alt to
      exactly these two, but relying on that indirectly would break
      silently if the plugin ever changes it — the name attributes
      are the plugin's own stable public API for these two buttons)
      — secondary, outline.
   3. "Приложи действие" (name=tinvwl-action-product_apply, no .alt)
      — utility next to the bulk-action dropdown, most muted.
   ============================================================ */

/* 2026-08-20: kept this row-button size compact !important — full
   button spec padding (15px 36px) + 0.2em letter-spacing + uppercase
   made "Виж продукт" wrap to two lines inside this narrow table
   column (reported live). Same fix category the site owner asked for
   on the mini-cart button below: color/radius standardized, physical
   size stays fitted to its container. Needs !important on every one
   of these now, not just color — the global .button rule two blocks
   up is itself !important since the WP-core/Astra tie-break fix, so a
   plain (non-!important) override here would silently lose to it. */
.tinv-wishlist .button,
.tinv-wishlist button.button {
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  border-radius: var(--vn-btn-radius) !important;
  min-height: 0;
  height: auto;
  line-height: 1.3;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
}

/* 1. Primary — row-level "Виж продукт" */
.tinv-wishlist td.product-action .button {
  background: var(--vn-btn-primary-bg) !important;
  color: var(--vn-btn-primary-color) !important;
  border: none !important;
}
.tinv-wishlist td.product-action .button:hover {
  background: var(--vn-btn-primary-bg-hover) !important;
}

/* 2. Secondary — bulk "add to cart" actions, outline instead of filled */
.tinv-wishlist button[name="tinvwl-action-product_selected"],
.tinv-wishlist button[name="tinvwl-action-product_all"] {
  background-color: transparent !important;
  color: var(--vn-btn-secondary-color) !important;
  border: 1px solid var(--vn-btn-secondary-border) !important;
  font-weight: 500 !important;
}
.tinv-wishlist button[name="tinvwl-action-product_selected"]:hover,
.tinv-wishlist button[name="tinvwl-action-product_all"]:hover {
  background-color: var(--vn-btn-secondary-bg-hover) !important;
  border-color: var(--vn-btn-secondary-bg-hover) !important;
  color: var(--vn-btn-secondary-color-hover) !important;
}

/* 3. Utility — "Приложи действие" next to the dropdown, most muted */
.tinv-wishlist button[name="tinvwl-action-product_apply"] {
  background-color: transparent !important;
  color: var(--vn-text-muted) !important;
  border: 1px solid var(--vn-border) !important;
  font-weight: 500;
}
.tinv-wishlist button[name="tinvwl-action-product_apply"]:hover {
  border-color: var(--vn-text-muted) !important;
  color: var(--vn-dark) !important;
}

/* 4. Icon-only "×" remove button (td.product-remove) — this is a bare
   <button> with no .button class (templates/ti-wishlist.php), so it
   was matching the global site-wide "button" selector and inheriting
   its full CTA padding/uppercase/letter-spacing !important, turning
   into a large rectangle. Explicitly excluded here with an equally
   !important, compact icon-button reset. button[name="tinvwl-remove"]
   is the plugin's own stable attribute (same reasoning as the two
   name= selectors above), not a guessed class. */
/* 2026-08-20, follow-up: 28px/12px/muted read as too small/faint —
   sized back up and darkened. */
.tinv-wishlist button[name="tinvwl-remove"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--vn-text) !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
}
.tinv-wishlist button[name="tinvwl-remove"] i {
  font-size: 18px !important;
  line-height: 1 !important;
}
.tinv-wishlist button[name="tinvwl-remove"]:hover {
  background: var(--vn-border) !important;
  color: var(--vn-dark) !important;
}

/* 2026-08-20: "already in wishlist" dialog (ti-addedtowishlist-
   dialogbox.php override) — the view button's icon (ftinvwl-heart-o or
   our own ftinvwl-chevron-right, context-dependent — see section 21c/
   21e in functions.php) looked smaller/misaligned next to the close
   button's icon (ftinvwl-times). Traced to the plugin's own CSS
   (assets/css/public.css): ".tinvwl-buttons-group button i.ftinvwl-
   heart-o, ...i.ftinvwl-key, ...i.ftinvwl-times {font-size:20px; top:0;
   vertical-align:initial}" (plus a matching ::before top:3px nudge) —
   explicitly lists heart-o/key/times but NOT chevron-right, so the
   chevron silently fell back to the webfont's own smaller default
   size with no vertical nudge whenever the redirect-to-product variant
   of this dialog was shown. All three are single-weight line-art
   glyphs from the same icon font (no separate outline/filled variants
   exist for any of them) — matching size/alignment is what actually
   unifies their look. Spacing to the button text is already uniform
   from the plugin's own ".tinv-wishlist .button i{margin-right:6px}",
   untouched here. */
.tinv-wishlist .tinvwl-buttons-group button i.ftinvwl-chevron-right {
  font-size: 20px !important;
  top: 0 !important;
  vertical-align: initial !important;
}
.tinv-wishlist .tinvwl-buttons-group button i.ftinvwl-chevron-right::before {
  position: relative !important;
  top: 3px !important;
}

/* 2026-08-20: "Затвори" made secondary (outline) so it doesn't compete
   with "Виж любими"/"Отиди на продукта" for attention — that one stays
   the plain primary .button it already inherits, untouched. */
.tinv-wishlist .tinvwl_added_to_wishlist button.tinvwl_button_close {
  background: transparent !important;
  color: var(--vn-btn-secondary-color) !important;
  border: 1px solid var(--vn-btn-secondary-border) !important;
}
.tinv-wishlist .tinvwl_added_to_wishlist button.tinvwl_button_close:hover {
  background: var(--vn-btn-secondary-bg-hover) !important;
  color: var(--vn-btn-secondary-color-hover) !important;
  border-color: var(--vn-btn-secondary-bg-hover) !important;
}

/* 2026-08-20: hide the small "wishlisted N times" popularity badge on
   product-card wishlist buttons. Verified real: span.tinvwl-product-stats
   is the plugin's own absolute-positioned circular counter (public.css,
   ~line 1422). It's injected client-side by public.js's mark_products()
   only when the AJAX response carries stats data, appended INSIDE
   a.tinvwl_add_to_wishlist_button — a separate element from the button
   itself, so hiding it has no effect on the button's own add/remove
   click handling. */
.tinv-wishlist .tinvwl-product-stats {
  display: none !important;
}

/* 2026-08-20: hide the bulk-actions dropdown + checkbox column on
   "Любими". Selectors verified against the plugin's own markup:
   ".tinvwl-to-left.look_in" is the "Действия"/"Приложи Действие" wrapper
   (public/tinvwl.class.php, wishlist_button_action_before()); the
   checkbox column is genuinely th/td:first-child (product-cb, see
   templates/ti-wishlist.php) — nothing else sits before it. */
.tinv-wishlist .tinvwl-to-left.look_in {
  display: none !important;
}
.tinv-wishlist table th:first-child,
.tinv-wishlist table td:first-child {
  display: none !important;
}

.vn-product-tab h3:first-child {
  margin-top: 0;
}

.vn-product-tab p {
  color: var(--vn-text-muted);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.vn-product-tab ol,
.vn-product-tab ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--vn-text-muted);
  line-height: 1.65;
}

.vn-product-tab li {
  margin-bottom: .5rem;
}

.vn-product-tab ol li::marker {
  color: var(--vn-accent);
  font-weight: 600;
}

.vn-product-tab ul {
  list-style: none;
  padding-left: 0;
}

.vn-product-tab ul li {
  position: relative;
  padding-left: 1.25rem;
}

.vn-product-tab ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--vn-accent);
}

/* Real <table> for sizes — thin borders, small type, no heavy shading */
.vn-size-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: 0 0 1rem;
}

.vn-size-table th,
.vn-size-table td {
  border: 1px solid var(--vn-border);
  padding: .5rem .85rem;
  text-align: center;
}

.vn-size-table th {
  font-family: var(--vn-font-body);
  font-weight: 600;
  color: var(--vn-text-muted);
  background-color: var(--vn-bg-alt);
}

.vn-size-table td:first-child,
.vn-size-table th:first-child {
  font-weight: 600;
  color: var(--vn-dark);
}

.vn-color-note {
  font-size: .85rem;
  color: var(--vn-text-muted);
}

.vn-bonus-gift {
  background-color: var(--vn-bg-alt);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  padding: .875rem 1.125rem;
  font-size: .9rem;
  color: var(--vn-text);
}

/* ============================================================
   PRODUCT PAGE — short custom-made note under the price
   2026-08-19 — deliberately quiet: small type, muted color, no
   background/border, so it reads as a qualifier under the price
   rather than a competing UI element next to the shape/size dropdowns
   right below it.
   ============================================================ */
.vn-custom-made-note {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--vn-text-muted);
  margin: .25rem 0 1rem;
}

.vn-custom-made-note span {
  color: var(--vn-accent);
  font-size: .75rem;
}

/* ============================================================
   POLEZNO PAGE — blog listing (template-polezno.php)
   2026-08-19 — migrated blog from veinnails.com/news.html.
   ============================================================ */
.vn-polezno-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.vn-polezno-header {
  text-align: center;
  margin-bottom: 3rem;
}

.vn-polezno-header h1 {
  font-family: var(--vn-font-heading);
  font-size: 2.25rem;
  color: var(--vn-dark);
}

.vn-polezno-intro {
  max-width: 640px;
  margin: 0.75rem auto 0;
  color: var(--vn-text-muted);
}

.vn-polezno-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .vn-polezno-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vn-polezno-grid {
    grid-template-columns: 1fr;
  }
}

.vn-polezno-card {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.vn-polezno-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.vn-polezno-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--vn-bg-alt);
}

.vn-polezno-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vn-polezno-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.vn-polezno-card-date {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vn-accent);
  font-weight: 600;
}

.vn-polezno-card-title {
  font-family: var(--vn-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin: .5rem 0 .6rem;
}

.vn-polezno-card-title a {
  color: var(--vn-dark);
  text-decoration: none;
}

.vn-polezno-card-title a:hover {
  color: var(--vn-accent);
}

.vn-polezno-card-excerpt {
  color: var(--vn-text-muted);
  font-size: .9rem;
  line-height: 1.6;
  flex-grow: 1;
}

.vn-polezno-card-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--vn-accent);
  text-decoration: none;
}

.vn-polezno-card-link:hover {
  text-decoration: underline;
}

/* Single post featured image — see functions.php section 20 */
.vn-single-post-featured-image {
  margin: 0 0 2rem;
  border-radius: var(--vn-radius);
  overflow: hidden;
}

.vn-single-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   ANNOUNCEMENT BAR
   2026-08-19 — originally #1a261a, sampled from banner-veinnails-final.jpg
   ("тона на банера"). Changed same day to burgundy (#6B1F2E) at the
   site owner's request, ahead of a promo — sits directly above a pure
   white (#fff) header with a light tan border, so the dark saturated
   bar reads as a deliberate accent stripe rather than clashing with
   the header's black/white palette. Static positioning (scrolls away
   with the page) is the deliberately simpler of the two options asked
   for, kept unchanged.
   ============================================================ */
.vn-announcement-bar {
  position: relative;
  background-color: #6B1F2E;
  color: var(--vn-white);
  font-family: var(--vn-font-body);
  font-size: 14px;
  text-align: center;
  height: 40px;
  letter-spacing: 0.02em;
  overflow: hidden;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* 2026-08-22 — "pointer-events: none" тук беше премахнат след
   почистване: беше добавен по подозрение, че лентата застъпва хедъра
   на мобилно и поглъща клика върху количката. Реалната причина се
   оказа съвсем друга (Astra сама слага pointer-events:none на
   <a class="cart-container">, виж поправката горе при
   .ast-header-woo-cart), а измерено с реални getBoundingClientRect
   през headless Chrome: лентата (bottom:52px) и мобилният хедър
   (top:52px) се допират точно на границата — 0px застъпване, дори на
   самия пиксел на границата elementFromPoint не хваща нищо кликаемо.
   Лентата не пречи на нищо и не се налага да е "прозрачна" за клик. */

/* Two messages, cross-fading in place. Pure CSS (no JS): both spans
   share the same 10s keyframe loop, offset by animation-delay so one
   fades out exactly as the other fades in — each message effectively
   shows for ~5s. position:absolute stacks them on top of each other;
   the bar's own height above is fixed so the layout doesn't jump. */
.vn-announcement-bar .vn-ann-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  opacity: 0;
  animation: vn-ann-fade 10s infinite;
}
.vn-announcement-bar .vn-ann-msg:nth-child(1) { animation-delay: 0s; }
.vn-announcement-bar .vn-ann-msg:nth-child(2) { animation-delay: 5s; }

@keyframes vn-ann-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Longer message can wrap on narrow screens — give the bar room for
   two lines there instead of clipping it.
   2026-08-22 — breakpoint разширен от 480px на 921px (Astra-иния
   мобилен breakpoint, същия, ползван навсякъде другаде в тази сесия
   за мобилни поправки). Причината: съобщение 1 по подразбиране
   ("Безплатна доставка до офис на куриер за поръчки над 70 €") е
   достатъчно дълго да се пренесе на 2 реда доста преди 480px ширина
   — оставаше "процеп" 481–921px, в който текстът вече се пренасяше
   (white-space си е "normal" по подразбиране навсякъде, не само тук),
   но лентата още беше заключена на 40px с overflow:hidden, режейки
   втория ред. .vn-ann-msg е "position:absolute;inset:0" вътре в
   позиционирания .vn-announcement-bar, така че реалната му височина
   е принудително равна на родителя (40px) — не расте с текста; вторият
   ред просто изчезваше зад overflow:hidden, без сам по себе си да
   създава кликаема зона извън лентата. Разширяването на 52px+line-
   height правилото решава проблема при неговия източник (текстът
   вече има мястото, което са му нужно на всички мобилни ширини),
   вместо да разчита само на новия z-index при header-а по-горе да
   маскира резултата. */
@media (max-width: 921px) {
  .vn-announcement-bar {
    height: 52px;
    font-size: 13px;
  }
  .vn-announcement-bar .vn-ann-msg {
    white-space: normal;
    line-height: 1.3;
  }
}

/* Respect "reduce motion" — show message 1 only, no looping fade */
@media (prefers-reduced-motion: reduce) {
  .vn-announcement-bar .vn-ann-msg {
    animation: none;
    opacity: 0;
  }
  .vn-announcement-bar .vn-ann-msg:nth-child(1) {
    opacity: 1;
  }
}

/* ============================================================
   CHECKOUT BLOCK — typography
   2026-08-19: the block checkout (wp:woocommerce/checkout, wrapper
   class .wc-block-checkout) is a React app — its text is inserted by
   JS, not present in the server-rendered HTML, and a lot of it lives
   in <div>/<span> elements rather than the <p>/<label>/<input> tags
   our base typography rule (line ~89) targets. font-family is
   normally inherited, so in principle body's font should still reach
   these — but form controls (input/select/textarea/button) don't
   inherit by default per the CSS spec, and our base rule forgot
   "button". Blanket-covering the whole checkout subtree is simpler
   and more robust than chasing every individual wc-block-checkout-*
   element class. wc-blocks.css's own font-family rules are scoped to
   ".theme-twentytwenty" or are the "WooCommerce" icon font used only
   by cart/rating elements (not present on this page), so this doesn't
   fight anything or break icons.
   ============================================================ */
.wc-block-checkout,
.wc-block-checkout * {
  font-family: var(--vn-font-body);
}

.wc-block-checkout h1,
.wc-block-checkout h2,
.wc-block-checkout h3 {
  font-family: var(--vn-font-heading);
}

/* ============================================================
   CLASSIC CHECKOUT — hide the empty "Shipment 1" package header row
   2026-08-19: vn_translate_shipping_package_name() in functions.php
   returns '' for the package name when there's only one shipping
   package (the normal case here), leaving an empty <th> in
   .woo-bg--shipping-title. Hiding the whole row is cleaner than an
   empty header cell; :has() has full support in current browsers.
   ============================================================ */
.woo-bg--shipping-title:has(th:empty) {
  display: none;
}