/* ========================================================================== Astra Child — Evolet / ELIKO 143 дизайн система Палитра и типография, изведени от брандинга на Evolet Selection. (Footer не се стилизира тук — оставен на Astra по подразбиране. Header-ът има само sticky позициониране по-долу, без друга собствена стилизация — визията му си остава изцяло от Astra Customizer.) ========================================================================== */ :root { /* Брандинг цветове — свързани с глобалната цветова палитра на Astra (Customize → Global Colors), за да могат да се менят на едно място в админ панела, вместо да са хардкоднати тук. Съответствие (по стойност, към момента на свързването 2026-08-05): --ast-global-color-0/2/6 = #0e3640 (Primary/Text/Alternate Background) --ast-global-color-1 = #e07a3e (Secondary) --ast-global-color-3 = #1c2e2b (Text) --ast-global-color-4/5 = #faf8f3 (Background) --ast-global-color-7 = #e5f2ef --ast-global-color-8 = #5dcaa5 Стойността в hex след var() е само fallback (ако Astra CSS-ът по някаква причина не се е заредил) — реалната стойност винаги идва от Customizer. */ --evolet-teal-900: var(--ast-global-color-6, #0e3640); /* тъмен teal фон на header/footer/hero — Astra "Alternate Background" */ --evolet-teal-700: #175650; /* по-светъл teal за градиенти/hover — няма пряко съответствие в палитрата, остава фиксиран */ --evolet-teal-mid: var(--ast-global-color-8, #5dcaa5); /* среден teal акцент (credit notes, дот десен) */ --evolet-teal-050: var(--ast-global-color-7, #e5f2ef); /* бледо teal фонче за секции/бадж */ --evolet-copper-500: var(--ast-global-color-1, #e07a3e); /* оранжев CTA акцент — Astra "Secondary". НЕ за текст/тънки бутонни фонове — само 2.6–3:1 срещу бяло/crem, под WCAG AA. Виж copper-text/copper-on-dark по-долу. */ --evolet-copper-600: #b85c28; /* по-тъмно оранжево — сега основен фон на .evolet-btn-primary (4.57:1 с бял текст), преди беше само hover */ --evolet-copper-700: #85431d; /* нов, най-тъмен — hover на .evolet-btn-primary (7.45:1 с бял текст) */ --evolet-copper-100: #fdf1ea; /* светъл оранжев фон за notice/badge */ /* AA-безопасни варианти за ТЕКСТ (2026-08-12) — пазят hue/наситеността на copper-500/ink-soft, само затъмнени (или, за тъмен фон, изсветлени) дотолкова, че да минат WCAG AA (4.5:1) на фона, на който реално стоят. Оригиналните copper-500/ink-soft остават за ФОНОВЕ/декоративни акценти (баджове, точки, бордюри) — там контрастът върши работа на елемента до тях (напр. тъмен текст върху светъл copper-100 фон), не на самите тях. */ --evolet-copper-text: #ac511c; /* линкове/числа на бял или cream фон — 5.32:1 / 4.55:1 */ --evolet-copper-on-dark: #e17f45; /* дребен/удебелен текст върху teal-900 (hero eyebrow) — 4.52:1 */ --evolet-ink-soft-text: #656e6a; /* второстепенен текст (лийд абзаци, подписи, ЧЗВ) на бял/cream фон — 5.26:1 / 4.50:1 */ --evolet-gold-500: #c9a227; /* златен точков десен акцент (запазен) */ --evolet-cream: var(--ast-global-color-4, #faf8f3); /* топъл неутрален фон — Astra "Background" */ --evolet-cream-2: #f2ede0; /* по-тъмен крем за редуващи се секции */ --evolet-ink: var(--ast-global-color-3, #1c2e2b); /* основен текст — Astra "Text Color" */ --evolet-ink-soft: #7a8580; /* второстепенен ДЕКОРАТИВЕН цвят (не за текст с достатъчна четимост — виж ink-soft-text) */ --evolet-border: #e8e2d2; /* стандартна тънка граница на карти/таблици */ --evolet-success: #3f8a5c; --evolet-danger: #c0392b; /* Типография — УПРАВЛЯВА СЕ ИЗЦЯЛО ОТ ASTRA CUSTOMIZER: Customize → Typography (Base Font / Headings). Тук нарочно няма променливи за шрифт и никъде в този файл няма font-family — така има един-единствен източник на истината и заглавията не могат да се разминат от останалия сайт. РАЗМЕРИ (преработено 2026-08-11): и размерите вече идват от Astra. Преди тук имаше 85 хардкоднати px стойности, които мълчаливо биеха настройките на Customizer-а — смяната на "Base Font Size" или на заглавията не се отразяваше на нищо. Сега: h1 / h2 (заглавия на страница) — БЕЗ font-size тук → 100% Astra всичко останало (вкл. h3 в картите и дребния UI текст) — в `rem` = дял от Base Font Size ЗАЩО rem, а НЕ em: при font-size `em` се смята спрямо РОДИТЕЛЯ, а не спрямо правилото на Astra за същия елемент. Пробвано и отхвърлено — `.evolet-why-item h3 { font-size: 0.5em }` даде 0.5 x 17px = 8.5px (спрямо родителя), а не 0.5 x 32px, и заглавията в картите излязоха по-дребни от текста под тях. `rem` винаги е спрямо root-а, който Astra задава (html { font-size: 106.25% } = 17px), затова е и имунизиран срещу вложеност (иконата в .evolet-brew-badge не се смалява спрямо баджа). СЛЕДСТВИЕ: заглавията в картите следват "Base Font Size" на Astra, а не heading скалата — Astra не изнася размерите на H1-H6 като CSS променливи, за да може да се сметне дял от тях. line-height също е на Astra. Останалите тук НЕ са глобална типография: line-height: 1 — центриране на бадж/икона line-height: 48px — височина на бутона "Добави в количката" line-height: 1.3/1.4 — компактни компоненти, където заглавието се пренася на 2-3 реда (заглавия в продуктовата решетка, тесният банер) и 1.65 на Astra е твърде хлабаво */ --evolet-radius: 8px; --evolet-radius-lg: 14px; } /* --- Sticky header --- Astra (без Astra Pro) няма вградена Customizer опция за sticky header (само "sticky add to cart" на продуктовата страница, друго нещо) — затова е нужен custom CSS. position:sticky е достатъчен, без JS: header-ът остава на естественото си място, докато не стигнеш до него при скрол, после "залепва" за горния край. Проверено — няма overflow правило по веригата от родители (#page, body), което да го блокира. */ #masthead.site-header { position: sticky; top: 0; z-index: 999; } /* --- Мобилен header: меню вляво, лого в средата --- Astra рендира мобилния header в отделен DOM блок (#ast-mobile-header), само с ляво (лого) и дясно (menu toggle) поле — няма централно поле в mobile builder-а. Редът е CSS grid (grid-template-columns:auto auto по подразбиране), не flex — затова пипаме грида директно вместо да ползваме position:absolute (пробвано, но се застъпи с бутона, защото при grid изваждането на елемент от потока не го "връща" автоматично в ляво). 3 колони (1fr auto 1fr): бутонът за менюто отива в колона 1 (естествено вляво), логото — в колона 2, центрирано; средните разстояния отляво/ отдясно на логото са равни (1fr от двете страни), затова е вярно центрирано спрямо целия ред, не спрямо остатъчното пространство. */ #ast-mobile-header .ast-builder-grid-row-has-sides { grid-template-columns: 1fr auto 1fr !important; grid-template-rows: auto !important; align-items: center !important; } #ast-mobile-header .site-header-primary-section-right { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } #ast-mobile-header .site-header-primary-section-left { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; } /* --- Текстовото име на сайта в header-а (2026-08-11) --- ПРОБЛЕМ: под логото на мобилно оставаше голямо празно петно. ПРИЧИНА: Astra рендира и текстово заглавие до логото (.site-branding > .ast-site-title-wrap > .site-title) с font-size:26px; display:block. Цветът му е var(--ast-global-color-2) = #0e3640, а фонът на header-а е --evolet-teal-900, който сочи към var(--ast-global-color-6) = също #0e3640. Двата са идентични, тоест надписът "Evolet.bg" се изписва тъмно върху тъмно — невидим, но заемащ реална височина под логото. Точно това беше "празното" място. Появи се, когато blogname беше попълнено (беше празно и затова дотогава не се рендираше нищо). Промяната си остава правилна — от нея зависи заглавието на страниците в Google — просто извади наяве, че Astra показва и текстово име редом с логото. РЕШЕНИЕ: логото вече носи името на бранда, затова текстовото дублиране се крие. Достъпността не страда: линкът на логото има alt="Evolet.bg", значи екранните четци пак прочитат името на сайта. ПО-ЧИСТАТА АЛТЕРНАТИВА: Customize → Header Builder → Site Title & Logo → изключване на "Site Title". Прави същото, но от настройките. Ако се изключи оттам, това правило става излишно и може да се махне. Ако пък някога заглавието трябва ДА се вижда, първо махни това правило. */ #masthead .site-branding .ast-site-title-wrap { display: none; } /* --- Типография --- Решено (2026-08-05): шрифтовете се задават САМО от Astra Customizer (Customize → Typography). Тук нямаме нито font-family, нито собствени Google Fonts — child темата вече не тегли отделни шрифтове. Ако трябва да се върне брандовият Fraunces, той се избира от Customizer, а не се добавя обратно като custom CSS. */ /* --- Бутони: единен акцентен цвят навсякъде в магазина --- Закоментирано временно (2026-07-29) — тества се дали Astra Customizer (Appearance → Customize → WooCommerce/Buttons) може да зададе същия цвят на бутоните глобално, без custom CSS. .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button { background-color: var(--evolet-copper-500); color: #fff; border: none; border-radius: var(--evolet-radius); font-weight: 600; transition: background-color 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background-color: var(--evolet-copper-600); color: #fff; } */ /* ========================================================================== Магазин / каталог (архивни и категорийни страници) ========================================================================== */ /* Бел.: тук нарочно НЯМА стилове за .woocommerce-breadcrumb — това е собственият breadcrumb на WooCommerce, който Astra не рендира никъде (замества го с .ast-breadcrumbs-wrapper по-долу). Ако някога изключиш Astra breadcrumb-а и WooCommerce-овият се появи, тогава се добавя тук. */ /* --- Заглавие + breadcrumb на WooCommerce страници (акаунт, количка и т.н.), за да следват тийл брандинга навсякъде, не тъмно сивото на Astra --- */ .woocommerce-page .entry-title, .woocommerce-account .entry-title { color: var(--evolet-teal-900); } /* --- Единен вид на breadcrumb навсякъде в сайта --- Astra рендира breadcrumb-а (.ast-breadcrumbs-wrapper > ... > ul.trail-items) по еднакъв начин навсякъде — в тъмния банер на категория/продукт, и на светъл фон на всички други страници (количка, акаунт, обикновени страници и т.н.). До момента стилизирахме само тъмния вариант (вътре в .ast-archive-entry-banner / .ast-single-entry-banner); тук слагаме база, която важи навсякъде — размер, разстояния, цвят на пътя и на текущата страница. По-специфичните правила на банерите по-долу (3 класа вместо 2) продължават да ги бият автоматично по CSS специфичност, без !important. */ .ast-breadcrumbs-wrapper .trail-items { font-size: 0.7647rem; } .ast-breadcrumbs-wrapper .trail-items li, .ast-breadcrumbs-wrapper .trail-items span { color: var(--evolet-ink-soft); } /* Текущата страница (последният елемент, без линк) — по-открояваща се от останалите "трохички" по пътя, за да личи ясно къде си в момента. */ .ast-breadcrumbs-wrapper .trail-items li.trail-end { color: var(--evolet-ink); font-weight: 500; } .ast-breadcrumbs-wrapper .trail-items a { color: var(--evolet-copper-600); text-decoration: none; } .ast-breadcrumbs-wrapper .trail-items a:hover { text-decoration: underline; } /* --- Трохите се крият на мобилна ширина (2026-08-11) --- Решение на собственика: на телефон трохите ядат вертикално място в горната част на екрана, без да носят стойност — навигацията там минава през менюто. Чупката е 544px, същата, която Astra ползва за "mobile" в Customizer и която се ползва и в останалите мобилни правила по-долу. ВАЖНО ЗА SEO: това е само визуално скриване. Yoast продължава да извежда BreadcrumbList структурните данни в напълно независимо от този CSS, а именно те захранват пътечката (Начало > Категория > Продукт) в резултатите на Google — тя не се губи. Тук стоеше обходно решение за дълги трохи на телефон (nowrap + скрит хоризонтален скрол в рамките на breadcrumb-а). То е излишно, щом елементът изобщо не се вижда — премахнато, остава в git историята. ЗАЩО две различни правила: банерите имат различно съдържание. .ast-archive-entry-banner (категория/магазин) = трохи + H1 + описание -> крием само трохите, заглавието и текстът остават .ast-single-entry-banner (продукт, "За нас", B2B) = САМО трохи -> крие се целият банер, иначе остава празна тъмна лента */ @media (max-width: 544px) { .ast-archive-entry-banner .ast-breadcrumbs-wrapper { display: none; } .ast-single-entry-banner { display: none !important; } } /* --- Хедър на категория/магазин --- Astra рендира заглавието/описанието през собствения си .ast-archive-entry-banner (не през WooCommerce-овия .woocommerce-products-header) — затова стилизираме реалния елемент. WC-овият wrapper остава празен под Astra layout-1, крием го, за да не увисва като празна кутия. */ /* Безусловно скрито (не само :empty) — съдържа whitespace текст възли (нови редове/табове) вътре, затова :empty не го хваща, а под Astra layout-1 никога няма реално съдържание (заглавието идва от .ast-archive-entry-banner по-горе). */ .woocommerce-products-header { display: none; } /* Истинският източник на голямото разстояние: Astra има безусловно .ast-separate-container #primary{padding:4em 0;margin:0} в main.min.css (не в inline блока, затова се изплъзна първите пъти) — 4em ≈ 64px. На desktop (≥993px) Astra превключва това на margin:4em 0;padding:0, затова margin:0 стигаше там. Под 993px (таблет/мобилна) обаче базовото правило с padding:4em 0 си остава активно — затова трябва да занулим и padding-top/bottom, не само margin, за да изчезне разстоянието и там. !important за сигурност — #primary е ID селектор с висока специфичност. Важи и за .single-product (WooCommerce-класа на продуктовата страница) — след като "Content Style" стана Boxed и там (2026-08-05), продуктовата страница вече също е .ast-separate-container и получава същия проблем. */ .ast-woo-shop-archive #primary, .single-product #primary { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Astra дава на .ast-woocommerce-container padding:3em на desktop (част от "separate container" дизайна). Нашият файл се зарежда СЛЕД inline блока на Astra, но правилото им е .ast-separate-container .ast-woocommerce-container (два класа) срещу нашия един — бият ни по специфичност, затова !important. Оставяме страничния/долния отстъп, стесняваме само горния. На таблет/мобилна Astra ползва много по-малък padding (0.54em ≈ 8.6px) — там фиксирани 24px ставаха по-голямото разстояние, затова стесняваме пропорционално по чупките на Astra (921/544px), а не фиксирано. Ограничено до .ast-woo-shop-archive / .single-product — иначе се прилагаше и на страници, при които не искаме тази корекция. */ .ast-woo-shop-archive .ast-woocommerce-container, .single-product .ast-woocommerce-container { padding-top: 24px !important; } @media (max-width: 921px) { .ast-woo-shop-archive .ast-woocommerce-container, .single-product .ast-woocommerce-container { padding-top: 16px !important; } } @media (max-width: 544px) { .ast-woo-shop-archive .ast-woocommerce-container, .single-product .ast-woocommerce-container { padding-top: 10px !important; } } /* --- По-широк каталог на телефон (2026-08-11) --- Astra оставя на мобилна 1em отстрани от .ast-woocommerce-container ПЛЮС 0.54em от общия .ast-container — общо ~1.54em (≈22px) от всяка страна. При 390px екран това изяжда ~44px, което при 2 колони прави картите осезаемо тесни и снимките дребни. Тук нулираме само страничния отстъп на .ast-woocommerce-container и оставяме 0.54em от .ast-container — достатъчно, за да не лепнат картите за ръба. Само за каталога (.ast-woo-shop-archive); продуктовата страница е текстова и там по-широките полета помагат на четимостта. Банерът отгоре трябва да следва същата стойност, иначе H1/описанието увисват навътре спрямо картите. Това е направено при самото правило за банера по-долу (мобилният му блок вече е сведен на 0.54em), а НЕ тук — иначе два еднакви селектора в два @media блока се борят и печели по-долният, което лесно се пропуска при бъдеща редакция. */ @media (max-width: 544px) { .ast-woo-shop-archive .ast-woocommerce-container { padding-left: 0 !important; padding-right: 0 !important; } } /* !important нужен — Astra извежда собствено, по-специфично правило (.ast-archive-entry-banner[data-post-type="product"][data-banner-background-type="custom"]) за фона на банера, което иначе бие обикновен class селектор. */ .ast-archive-entry-banner { background: linear-gradient(135deg, var(--evolet-teal-900) 0%, #06201f 100%) !important; padding: 22px 0; margin: 0 0 24px; } /* Фонът на банера остава 100% широк, но съдържанието (H1/описание/breadcrumb) трябва да е със същата широчина като продуктовата решетка отдолу. Astra вече рендира собствен вложен .ast-container вътре в банера (центриран, max-width идентичен с общия container). Реалната широчина на продуктите обаче се определя от ДВЕ вложени един в друг подложки: .ast-container-ът на цялата страница дава 0.54em (правило .ast-separate-container #content .ast-container, важи и за банера), а ВЪТРЕ в него .ast-woocommerce-container добавя още 3em (desktop/tablet) / 1em (мобилна) само около продуктите. Затова тук сумираме двете: 0.54em + 3em = 3.54em на десктоп. Умишлено в em, а НЕ в px — така стойността следва същата база като правилата на Astra и подравняването се запазва дори ако се смени основният размер на шрифта от Customizer. !important нужен: правилото на Astra съдържа ID (#content) и бие нашите два класа по специфичност, независимо че нашият файл се зарежда по-късно. МОБИЛНА (2026-08-11): беше 1.54em (= 0.54em + 1em от Astra). Сега нулираме страничния отстъп на .ast-woocommerce-container горе, за да са картите по-широки, затова тук остава само 0.54em — двете стойности ВИНАГИ вървят заедно, иначе заглавието увисва навътре спрямо картите. */ .ast-archive-entry-banner .ast-container { padding-left: 3.54em !important; padding-right: 3.54em !important; box-sizing: border-box; } @media (max-width: 544px) { .ast-archive-entry-banner .ast-container { padding-left: 0.54em !important; padding-right: 0.54em !important; } } .ast-archive-entry-banner h1 { color: #fff; margin: 0 0 8px; } .ast-archive-entry-banner p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 640px; } .ast-archive-entry-banner .ast-breadcrumbs-wrapper { margin-bottom: 10px; } .ast-archive-entry-banner .ast-breadcrumbs-wrapper .trail-items, .ast-archive-entry-banner .ast-breadcrumbs-wrapper .trail-items li, .ast-archive-entry-banner .ast-breadcrumbs-wrapper .trail-items span { color: rgba(255, 255, 255, 0.7); } /* Текущата страница — пълна непрозрачност вместо приглушените 70%, същия принцип "открояваща се текуща страница" като на светлите страници. */ .ast-archive-entry-banner .ast-breadcrumbs-wrapper .trail-items li.trail-end { color: #fff; font-weight: 500; } .ast-archive-entry-banner .ast-breadcrumbs-wrapper .trail-items a { color: var(--evolet-gold-500); } /* --- Хедър на единична продуктова страница --- Същият визуален стил като .ast-archive-entry-banner (категория/магазин), за консистентен вид на банерите в целия сайт. Astra рендира този банер през отделен клас (.ast-single-entry-banner, не .ast-archive-entry-banner) затова правилата се дублират тук — селекторите са различни, но стойностите са едни и същи с горния блок. Бел. (обновена 2026-08-05): продуктовата страница вече също е .ast-separate-container (Astra Customizer → Content Style → Boxed, зададено и за single product, за консистентност с категорията), затова СЕГА важи същият padding-matching хак като при .ast-archive-entry-banner по-долу. !important на padding-а тук е ЗАДЪЛЖИТЕЛЕН (за разлика от архивния банер) — Astra има собствено правило .ast-single-entry-banner[data-post-type="product"] {padding-top:20px;padding-bottom:20px}, което е по-специфично (клас + атрибут) от нашия гол клас селектор и печели въпреки реда на зареждане. Точно това създаваше 20px разлика в отстъпа над breadcrumb спрямо категорията (там аналогичното Astra правило няма padding изобщо). */ .ast-single-entry-banner { background: linear-gradient(135deg, var(--evolet-teal-900) 0%, #06201f 100%) !important; padding: 22px 0 !important; margin: 0 0 24px; } /* Виж коментара при .ast-archive-entry-banner .ast-container по-горе — същата логика: 0.54em (общ .ast-container) + 3em (.ast-woocommerce-container около продукта) = 3.54em, за да съвпаднат ръбовете на банера с галерията/ описанието на продукта отдолу. */ .ast-single-entry-banner .ast-container { padding-left: 3.54em !important; padding-right: 3.54em !important; box-sizing: border-box; } @media (max-width: 544px) { .ast-single-entry-banner .ast-container { padding-left: 1.54em !important; padding-right: 1.54em !important; } } .ast-single-entry-banner h1, .ast-single-entry-banner .entry-title { color: #fff; margin: 0; } .ast-single-entry-banner .ast-breadcrumbs-wrapper { margin-bottom: 10px; } .ast-single-entry-banner .ast-breadcrumbs-wrapper .trail-items, .ast-single-entry-banner .ast-breadcrumbs-wrapper .trail-items li, .ast-single-entry-banner .ast-breadcrumbs-wrapper .trail-items span { color: rgba(255, 255, 255, 0.7); } .ast-single-entry-banner .ast-breadcrumbs-wrapper .trail-items li.trail-end { color: #fff; font-weight: 500; } .ast-single-entry-banner .ast-breadcrumbs-wrapper .trail-items a { color: var(--evolet-gold-500); } /* Бел. (2026-08-11): тук стоеше стилизацията на .woocommerce-result-count и .woocommerce-ordering (float един до друг + по-дребен селект). Двата елемента вече изобщо не се рендират — виж inc/catalog-toolbar.php за причината. Ако някога се върнат, старите правила са в git историята (включително бележката защо float-ът беше с !important). */ /* --- Продуктова решетка --- БРОЯТ КОЛОНИ СЕ УПРАВЛЯВА ОТ ASTRA CUSTOMIZER, не оттук: Customize → WooCommerce → Product Catalog → Products Per Row (десктоп / таблет / мобилен). Astra слага класове на (columns-4 tablet-columns-3 mobile-columns-1) и сам задава grid-template-columns по своите чупки (921px / 544px). Тук НЕ дублираме grid-template-columns — предишната версия го правеше и таблет правилото просто не се прилагаше (селекторът на Astra е .woocommerce-page ul.products:not(.elementor-grid) — по-специфичен). Оставяме само разстоянието между картите, което Astra не задава. */ .woocommerce ul.products { gap: 24px; } /* margin:0 остава с !important — Astra задава margin-right на картите в някои режими на колони (напр. mobile-columns-1), което в grid прави неравни отстъпи. Ширината НЕ я пипаме: Astra вече дава на картите display:flex + width:100%, което в grid е коректно. */ .woocommerce ul.products li.product { margin: 0 !important; padding: 0; background: #fff; border: 1px solid #ece6d8; border-radius: var(--evolet-radius-lg); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; } /* --- Изравнени карти: бутонът долепен до долния ръб (2026-08-11) --- ПРОБЛЕМ: имената на продуктите са с различна дължина и се пренасят на различен брой редове ("Плодов чай Джинджифил и Лимон Evolet, Пирамиди, 25бр" на 4 реда срещу "Зелен чай Жасмин..." на 3). Бутонът вървеше веднага след текста, затова в съседни карти стоеше на различна височина — решетката изглеждаше нащърбена. РЕШЕНИЕ: НЕ фиксирана min-height (тя се чупи при по-дълго име или при смяна на размера на шрифта от Customizer), а флекс верига: самите карти вече са с еднаква височина, защото Astra ги реди в grid, а grid разтяга клетките в реда. Остава съдържанието вътре да заеме тази височина — .astra-shop-summary-wrap става колонен флекс с flex:1, а бутонът се долепя долу с margin-top:auto. Така бутоните са на един ред при всякаква дължина на името. Структура на картата (за ориентация): li.product └ .astra-shop-thumbnail-wrap (снимка) └ .astra-shop-summary-wrap (заглавие → цена/"Свържете се" → бутон) */ .woocommerce ul.products li.product { display: flex; flex-direction: column; } .woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; } .woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(11, 52, 54, 0.1); } .woocommerce ul.products li.product a:not(.button) { text-decoration: none; color: inherit; } .woocommerce ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; display: block; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.8824rem; font-weight: 600; color: var(--evolet-ink); padding: 14px 16px 0; margin: 0; line-height: 1.4; } .woocommerce ul.products li.product .price { color: var(--evolet-copper-600); font-weight: 600; padding: 6px 16px 0; display: block; } .woocommerce ul.products li.product .price del { color: var(--evolet-ink-soft); opacity: 0.6; font-weight: 400; margin-right: 6px; } /* --- B2B кредитна бележка под цената --- */ .b2b-credit-note { display: block; font-size: 0.6471rem; font-weight: 600; color: var(--evolet-teal-mid); margin-top: 2px; } /* --- B2B изглед баджче над каталога --- */ .b2b-view-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--evolet-teal-050); color: var(--evolet-teal-900); font-size: 0.7059rem; font-weight: 600; padding: 10px 14px; border-radius: var(--evolet-radius); margin-bottom: 20px; } /* Бутонът в картата. ЗАЩО селекторът минава през .astra-shop-summary-wrap: Astra има правило .woocommerce ul.products li.product.tablet-align-left .button { margin-left:0; margin-right:0 } — картите носят класа tablet-align-left, затова то е с един клас повече от голото ".. li.product .button" и печели, занулявайки страничните полета. Резултатът беше бутон, залепен вляво и по-тесен от картата. Добавянето на .astra-shop-summary-wrap изравнява специфичността, а нашият файл се зарежда след inline CSS-а на Astra, затова печели при равенство — без нужда от !important. align-self:stretch + width:auto (вместо width:calc(100% - 32px)): в колонен флекс контейнер елемент с ИЗРИЧНА ширина не се разтяга и ляга в началото на напречната ос, т.е. вляво. При stretch ширината се смята сама като "контейнер минус полетата" и бутонът е точно центриран. */ .woocommerce ul.products li.product .astra-shop-summary-wrap .button { margin: 14px 16px 16px; margin-top: auto; /* долепя бутона до долния ръб — виж блока за изравнените карти */ width: auto; align-self: stretch; text-align: center; } /* margin-top:auto изяжда горното разстояние в НАЙ-ВИСОКАТА карта на реда (там свободно място няма и auto става 0), затова минималният отстъп се гарантира отдолу на цената/надписа "Свържете се с нас", а не отгоре на бутона. */ .woocommerce ul.products li.product .astra-shop-summary-wrap .price { margin-bottom: 14px; } /* --- По-компактна решетка на мобилна ширина (2 колони) --- Не е за цвят — само отстъпи/размери, по подобие на плътната мрежа на ekspreso.bg. При 2 тесни колони предишните "десктоп" разстояния (24px gap, 16px padding отвсякъде, голям бутон) правеха всяка карта прекалено висока и раздалечена. Тук свиваме gap-а и вътрешните отстъпи, без да пипаме цветовете (те си остават от Astra Customizer/--evolet-* токените). */ @media (max-width: 549px) { .woocommerce ul.products { gap: 10px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.7647rem; padding: 8px 10px 0; line-height: 1.3; } .woocommerce ul.products li.product .price { font-size: 0.7647rem; padding: 4px 10px 0; } /* Селекторът минава през .astra-shop-summary-wrap по същата причина като при десктоп правилото по-горе (Astra бие голия селектор с .tablet-align-left и зануляваше страничните полета). */ .woocommerce ul.products li.product .astra-shop-summary-wrap .button { margin: 8px 10px 10px; margin-top: auto; width: auto; padding: 8px 10px; font-size: 0.7059rem; } .woocommerce ul.products li.product .astra-shop-summary-wrap .price { margin-bottom: 8px; } .b2b-credit-note { padding: 0 10px; } } /* --- Sale badge --- */ .woocommerce span.onsale { background: var(--evolet-copper-500); color: #fff; font-weight: 600; font-size: 0.7059rem; min-height: auto; min-width: auto; line-height: 1; padding: 6px 10px; border-radius: 999px; top: 12px; left: auto; right: 12px; position: absolute; margin: 0; } /* --- Странициране --- */ .woocommerce-pagination { margin-top: 32px; } .woocommerce-pagination ul.page-numbers { display: flex; gap: 8px; list-style: none; padding: 0; } .woocommerce-pagination .page-numbers li { list-style: none; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--evolet-radius); background: #fff; border: 1px solid #ece6d8; color: var(--evolet-ink); font-weight: 600; } .woocommerce-pagination .page-numbers a:hover, .woocommerce-pagination .page-numbers .current { background: var(--evolet-copper-500); border-color: var(--evolet-copper-500); color: #fff; } /* --- Допълнително описание на категория (в края на страницата) --- */ .evolet-category-footer-description { margin: 40px 0 0; padding: 40px 32px; background: linear-gradient(135deg, var(--evolet-teal-900) 0%, #06201f 100%); color: rgba(255, 255, 255, 0.85); } .evolet-category-footer-description p:last-child { margin-bottom: 0; } /* Двуколонен layout (продукти / дистрибутори) — на мобилно се стакват, втората колона (дистрибутори) пада под първата. */ .evolet-category-columns { display: flex; gap: 48px; max-width: 1100px; margin: 0 auto; } .evolet-category-col { flex: 1 1 0; min-width: 0; } .evolet-category-col h3 { color: #fff; font-size: 1.1176rem; margin: 0 0 16px; } @media (max-width: 700px) { .evolet-category-columns { flex-direction: column; gap: 32px; } } /* Списък с дистрибутори (име + телефон) */ .evolet-distributor-list { list-style: none; margin: 0; padding: 0; } .evolet-distributor-list li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .evolet-distributor-list li:last-child { border-bottom: none; } .evolet-distributor-name { font-weight: 600; color: #fff; } .evolet-distributor-city { display: block; font-size: 0.7647rem; color: rgba(255, 255, 255, 0.6); font-weight: 400; } .evolet-distributor-phone { color: var(--evolet-gold-500); font-weight: 600; white-space: nowrap; text-decoration: none; } .evolet-distributor-phone:hover { text-decoration: underline; } /* Ред за "Стани дистрибутор" CTA в края на списъка — визуално отделен от истинските дистрибутори (без телефон, акцентен цвят на линка). */ .evolet-distributor-list li.evolet-distributor-cta { justify-content: center; gap: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.25); margin-top: 4px; padding-top: 16px; } .evolet-distributor-cta span { color: rgba(255, 255, 255, 0.7); } .evolet-distributor-cta a { color: var(--evolet-copper-500); font-weight: 600; text-decoration: none; } .evolet-distributor-cta a:hover { color: var(--evolet-copper-600); text-decoration: underline; } /* --- Sidebar (widget area) на магазина --- #secondary .widget { margin-bottom: 32px; } #secondary .widget-title { font-size: 1.0rem; color: var(--evolet-teal-900); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--evolet-gold-500); } #secondary ul { list-style: none; margin: 0; padding: 0; } #secondary ul li { padding: 6px 0; border-bottom: 1px solid #f0ede4; } #secondary ul li a { color: var(--evolet-ink-soft); text-decoration: none; } #secondary ul li a:hover { color: var(--evolet-copper-600); } #secondary .price_slider_amount .button { background: var(--evolet-copper-500); color: #fff; border-radius: var(--evolet-radius); float: none; margin-top: 10px; } #secondary .ui-slider .ui-slider-range, #secondary .price_slider .ui-slider-handle { background: var(--evolet-copper-500); border-color: var(--evolet-copper-600); }*/ /* --- Количество (+/-) на продуктовата страница --- */ .single-product form.cart { display: flex; align-items: center; gap: 12px; } .custom-qty-container { display: inline-flex; align-items: center; border: 1px solid #d8d3c8; border-radius: var(--evolet-radius); overflow: hidden; background: #fff; height: 48px; margin: 0; } .custom-qty-container input.qty { width: 50px; height: 100%; border: none; text-align: center; font-weight: 600; font-size: 0.9412rem; box-shadow: none; -moz-appearance: textfield; padding: 0; margin: 0; } .custom-qty-container input.qty::-webkit-outer-spin-button, .custom-qty-container input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { background-color: var(--evolet-teal-050); color: var(--evolet-teal-900); border: none; width: 40px; height: 100%; font-size: 1.0588rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0; margin: 0; } .qty-btn:hover { background-color: #dcebea; } .single-product form.cart .single_add_to_cart_button { height: 48px; line-height: 48px; padding: 0 24px; margin: 0; } /* --- Съотношение снимка/съдържание на продуктовата страница (≈40/60, по мокъпа) — вместо стандартните 50%/46% на Astra. Same media query (min-width:922px) и същите 4 селектора като на Astra, за да пазим идентична специфичност; !important за сигурност, тъй като Astra-правилото съдържа #content (ID) и има доста висока специфичност само по себе си. */ @media (min-width: 922px) { .woocommerce #content .ast-woocommerce-container div.product div.images, .woocommerce .ast-woocommerce-container div.product div.images, .woocommerce-page #content .ast-woocommerce-container div.product div.images, .woocommerce-page .ast-woocommerce-container div.product div.images { width: 40% !important; } .woocommerce #content .ast-woocommerce-container div.product div.summary, .woocommerce .ast-woocommerce-container div.product div.summary, .woocommerce-page #content .ast-woocommerce-container div.product div.summary, .woocommerce-page .ast-woocommerce-container div.product div.summary { width: 56% !important; } } /* --- H1 на продуктовата страница — винаги с главни букви. Скоупнато с .single-product, за да не засегне h1.entry-title другаде (блог, обикновени страници). --- */ .single-product h1.entry-title { text-transform: uppercase; } /* --- Eyebrow с категорията, най-отгоре в дясната колона (виж inc/single-product-layout.php). Същият визуален език като другите eyebrow надписи в сайта (.evolet-hero-eyebrow, .evolet-spec-eyebrow). --- */ .evolet-product-eyebrow { font-size: 0.6471rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--evolet-copper-600); font-weight: 600; margin: 0 0 8px; } /* --- Кратко описание (състав) — приглушен цвят, за да не се боричка визуално с H1/цената за вниманието. --- */ .single-product div.summary .woocommerce-product-details__short-description, .single-product div.summary .woocommerce-product-details__short-description p { color: var(--evolet-ink-soft); } /* --- Баджове температура/обем/време за запарване --- Извеждат се само ако е попълнено поне едно от трите полета (виж inc/product-brew-info.php) — универсално за всички продукти. */ .evolet-brew-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .evolet-brew-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--evolet-teal-900); color: #fff; font-size: 0.7647rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } .evolet-brew-badge-icon { font-size: 0.8235rem; line-height: 1; } /* --- Разширено съдържание под снимката/дясната колона (табове "Описание" / "Допълнителна информация") — по дизайн мокъпа. Класовете evolet-spec-*, evolet-brew-note и evolet-faq се пишат РЪЧНО в описанието на всеки продукт (класически/HTML редактор), затова CSS тук стилизира класовете, а не се опитва да познае структура от обикновен /

/

. Продукт 172 (Билков чай Лайка) е попълнен с готовия шаблон — копирай структурата оттам за всеки следващ продукт. */ /* Табове "Описание" / "Допълнителна информация" */ .woocommerce-tabs ul.tabs { display: flex; gap: 28px; list-style: none; margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--evolet-border); } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 12px; font-size: 0.7647rem; color: var(--evolet-ink-soft); text-decoration: none; border-bottom: 2px solid transparent; } .woocommerce-tabs ul.tabs li.active a { color: var(--evolet-teal-900); font-weight: 600; border-bottom-color: var(--evolet-copper-500); } /* max-width: 68ch - без него параграфите се разтягат до пълната ширина на таба (900px+ на десктоп), което на този размер шрифт минава 100+ знака на ред - уморително за четене. 68 знака е в комфортната зона (обичайно препоръчвана 60-75), в ch единици, за да следва реалната ширина на текущия шрифт/размер, а не фиксиран px, обвързан с една конкретна комбинация от двете (същият подход като .evolet-b2b-lead - 62ch). */ .woocommerce-Tabs-panel--description p { color: var(--evolet-ink-soft); line-height: 1.75; max-width: 68ch; } /* Заглавията в описанието НЯМАТ font-size тук нарочно — така следват Customize → Typography → Headings → H2/H3 и се управляват глобално. */ .woocommerce-Tabs-panel--description h2 { color: var(--evolet-teal-900); margin: 0 0 12px; } /* Второто и следващите заглавия ("Ползи и вкус" и т.н.) се нуждаят от въздух отгоре, за да се четат като отделна секция, а не като продължение на предишния абзац. Първото остава долепено до горния ръб на таба. */ .woocommerce-Tabs-panel--description p + h2, .woocommerce-Tabs-panel--description div + h2 { margin-top: 30px; } .woocommerce-Tabs-panel--description h3 { color: var(--evolet-teal-900); margin: 24px 0 10px; } /* Линк в текста на описанието (напр. към категорията) — да личи, че е линк, без да крещи. */ .woocommerce-Tabs-panel--description p a { color: var(--evolet-copper-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .woocommerce-Tabs-panel--description p a:hover { color: var(--evolet-teal-900); } /* Малък eyebrow надпис над всяка подсекция (Характеристики / Начин на приготвяне / Често задавани въпроси) */ .evolet-spec-eyebrow { font-size: 0.6471rem; letter-spacing: 1px; text-transform: uppercase; color: var(--evolet-copper-600); font-weight: 600; margin: 28px 0 12px; } /* Картички "Характеристики" — цели се точно 3 на ред (виж коментара по-горе защо не е обикновена таблица). */ .evolet-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 549px) { .evolet-spec-grid { grid-template-columns: 1fr; } } .evolet-spec-card { background: #fff; border: 1px solid var(--evolet-border); border-radius: 10px; padding: 14px; text-align: center; } .evolet-spec-label { font-size: 0.5882rem; color: var(--evolet-ink-soft); text-transform: uppercase; letter-spacing: 0.5px; } .evolet-spec-value { font-size: 0.7059rem; color: var(--evolet-teal-900); font-weight: 600; margin-top: 4px; } /* "Начин на приготвяне" — иконка + текст в картичка. ВАЖНО ЗА СТРУКТУРАТА (2026-08-11): блокът беше display:flex с иконката и един

като двата флекс елемента. Това работеше САМО ако текстът е обвит в

. Щом в описанието се напише свободен текст с и
(както е сега при "Топла напитка:" / "Студен чай:"), всеки таг и всяко парче гол текст става ОТДЕЛЕН флекс елемент и блокът се разпада на колони — точно това изглеждаше счупено. Затова flex-ът отпада: контейнерът е нормален блок, а иконката е позиционирана абсолютно в запазено ляво поле (padding-left). Така съдържанието може да е какъвто и да е микс от текст, ,
,

или списък и винаги се подрежда правилно. */ .evolet-brew-note { position: relative; background: #fff; border: 1px solid var(--evolet-border); border-radius: 10px; padding: 16px 16px 16px 64px; line-height: 1.7; } .evolet-brew-note p { margin: 0; } .evolet-brew-note p + p { margin-top: 10px; } /* Подзаглавията в блока ("Топла напитка:", "Студен чай:") — открояват се и всяко започва на нов ред, дори когато са разделени само с
. */ .evolet-brew-note strong { color: var(--evolet-teal-900); } .evolet-brew-icon { position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; border-radius: 8px; background: var(--evolet-teal-900); color: #eafaf4; display: flex; align-items: center; justify-content: center; font-size: 0.9412rem; line-height: 1; } @media (max-width: 549px) { .evolet-brew-note { padding: 14px 14px 14px 54px; } .evolet-brew-icon { left: 12px; top: 14px; width: 32px; height: 32px; } } /* ЧЗВ — преоформени

/ вместо стандартните браузърни */ .evolet-faq { border: 1px solid var(--evolet-border); border-radius: 10px; overflow: hidden; background: #fff; } .evolet-faq-item { border-bottom: 1px solid var(--evolet-border); } .evolet-faq-item:last-child { border-bottom: none; } .evolet-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; font-size: 0.7647rem; color: var(--evolet-teal-900); font-weight: 600; cursor: pointer; list-style: none; } .evolet-faq-item summary::-webkit-details-marker { display: none; } .evolet-faq-item summary::after { content: '⌄'; color: var(--evolet-copper-500); font-size: 0.9412rem; flex-shrink: 0; transition: transform 0.15s ease; } .evolet-faq-item[open] summary::after { transform: rotate(180deg); } .evolet-faq-item p { margin: 0; padding: 0 16px 16px; font-size: 0.7647rem; line-height: 1.7; max-width: 68ch; /* виж бележката при .woocommerce-Tabs-panel--description p - същата логика, отговорите на ЧЗВ иначе се разтягат на пълната ширина на кутията */ color: var(--evolet-ink-soft-text); /* ink-soft срещу бяло = 3.82:1, под WCAG AA — споделен клас (продуктови ЧЗВ + B2B), поправката подобрява и двете */ } /* Отговор с повече от един абзац: без двойния долен отстъп между тях. */ .evolet-faq-item p + p { padding-top: 10px; } /* Ако отговорът е написан като гол текст (без

), wpautop понякога не го обвива — тогава padding-ът на

липсва и текстът лепва за ръба. Долният отстъп на самото

го подсигурява. */ .evolet-faq-item[open] { padding-bottom: 2px; } /* --- B2C бутон/банер (Ekspreso.bg) — картичка по дизайн мокъпа --- */ .ekspreso-b2c-box { margin: 20px 0; background: #fff; border: 1px solid var(--evolet-border); border-radius: var(--evolet-radius-lg); padding: 24px; } /* По-компактна кутия на desktop/tablet — иначе се разтяга на цялата широчина на дясната колона (56%) и изглежда прекалено едро. На мобилна ширина остава 100%, както си беше (там изглежда добре). */ @media (min-width: 550px) { .ekspreso-b2c-box { max-width: 380px; } } .ekspreso-b2c-box-text { color: var(--evolet-ink-soft); margin: 0 0 16px; } .woocommerce a.ekspreso-b2c-btn, .ekspreso-b2c-btn { background-color: var(--evolet-copper-500); color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; border-radius: var(--evolet-radius); font-weight: bold; font-size: 0.9412rem; padding: 16px 24px; } .ekspreso-b2c-btn-arrow { font-size: 0.8824rem; } .woocommerce a.ekspreso-b2c-btn:hover, .ekspreso-b2c-btn:hover { background-color: var(--evolet-copper-600); color: #fff; } .ekspreso-b2c-archive-banner { background: var(--evolet-teal-050); border: 1px solid var(--evolet-teal-900); color: var(--evolet-teal-900); padding: 8px 14px; border-radius: var(--evolet-radius); margin-bottom: 20px; text-align: center; font-size: 0.8235rem; line-height: 1.4; } @media (max-width: 549px) { .ekspreso-b2c-archive-banner { padding: 8px 12px; font-size: 0.7647rem; } } .ekspreso-b2c-archive-banner a { color: var(--evolet-teal-900); font-weight: bold; text-decoration: underline; } /* --- Известие за B2B цени --- */ .b2b-notice { color: var(--evolet-ink-soft); font-size: 0.8235rem; } .b2b-notice a { color: var(--evolet-copper-600); font-weight: 600; } /* --- Количка (WooCommerce Cart блок — сайтът ползва Cart блок, не класическия [woocommerce_cart] шорткод, затова стиловете таргетират истинските .wc-block-cart-* класове на блока, не custom markup) --- */ .wc-block-cart-items__row { border-bottom: 1px solid var(--evolet-border); padding: 14px 0; } .wc-block-cart-item__image img { border-radius: var(--evolet-radius); } .wc-block-cart-item__product .wc-block-components-product-name { color: var(--evolet-teal-900); font-weight: 600; text-transform: uppercase; font-size: 0.7647rem; } .wc-block-cart-item__total .wc-block-components-formatted-money-amount, .wc-block-cart-item__prices .wc-block-components-formatted-money-amount { color: var(--evolet-teal-900); font-weight: 600; } .wc-block-cart__totals-title { color: var(--evolet-teal-900); } .wp-block-woocommerce-cart-order-summary-block, .wc-block-components-totals-wrapper { background: #fff; border: 1px solid var(--evolet-border); border-radius: var(--evolet-radius-lg); padding: 22px; } .wc-block-components-totals-item__value { color: var(--evolet-teal-900); font-weight: 600; } .wc-block-cart__submit .wc-block-components-button { background-color: var(--evolet-copper-500) !important; color: #fff !important; border-radius: var(--evolet-radius) !important; font-weight: 600 !important; } .wc-block-cart__submit .wc-block-components-button:hover { background-color: var(--evolet-copper-600) !important; } /* --- B2B бонус банер (количка) --- */ .b2b-bonus-global-wrapper { max-width: 1200px; margin: 20px auto 25px auto; padding: 0 15px; box-sizing: border-box; clear: both; width: 100%; } .b2b-bonus-cart-box { background: var(--evolet-teal-050); border: 2px solid var(--evolet-teal-900); padding: 22px; border-radius: var(--evolet-radius-lg); width: 100%; box-sizing: border-box; font-family: inherit; } .b2b-bonus-cart-box h3 { margin-top: 0; color: var(--evolet-teal-900); font-size: 1.1765rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .b2b-bonus-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 15px; background: #ffffff; padding: 14px; border-radius: var(--evolet-radius); border: 1px solid #d7e6e5; } .b2b-bonus-metric-label { font-size: 0.7059rem; display: block; font-weight: 600; color: var(--evolet-ink-soft); } .b2b-bonus-metric-value { font-size: 0.9412rem; color: var(--evolet-ink); } .b2b-bonus-metric--new .b2b-bonus-metric-label, .b2b-bonus-metric--new .b2b-bonus-metric-value { color: var(--evolet-success); } .b2b-bonus-metric--total { border-left: 2px solid var(--evolet-teal-900); padding-left: 10px; } .b2b-bonus-metric--total .b2b-bonus-metric-label, .b2b-bonus-metric--total .b2b-bonus-metric-value { color: var(--evolet-teal-900); font-weight: 600; font-size: 1.0588rem; } .b2b-bonus-metric--discount .b2b-bonus-metric-label, .b2b-bonus-metric--discount .b2b-bonus-metric-value { color: var(--evolet-copper-600); } .b2b-bonus-cta-text { margin: 0 0 12px 0; font-size: 0.8235rem; color: var(--evolet-ink-soft); } .woocommerce a.b2b-bonus-cta-btn, .woocommerce button.b2b-bonus-apply-btn, .b2b-bonus-cta-btn, .b2b-bonus-apply-btn { background: var(--evolet-copper-500); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: var(--evolet-radius); font-weight: bold; display: inline-block; border: none; cursor: pointer; font-size: 0.8824rem; } .woocommerce a.b2b-bonus-cta-btn:hover, .woocommerce button.b2b-bonus-apply-btn:hover, .b2b-bonus-cta-btn:hover, .b2b-bonus-apply-btn:hover { background: var(--evolet-copper-600); color: #fff; } .woocommerce button.b2b-bonus-remove-btn, .b2b-bonus-remove-btn { background: transparent; color: var(--evolet-danger); border: 1px solid var(--evolet-danger); padding: 8px 16px; border-radius: var(--evolet-radius); cursor: pointer; font-weight: bold; } .woocommerce button.b2b-bonus-remove-btn:hover, .b2b-bonus-remove-btn:hover { background: var(--evolet-danger); color: #fff; } .b2b-bonus-form { margin-top: 10px; } .b2b-bonus-applied-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .b2b-bonus-applied-text { color: var(--evolet-success); font-weight: bold; font-size: 0.8235rem; } /* --- Акаунт навигация (WooCommerce MyAccount sidebar) --- */ .woocommerce-MyAccount-navigation { background: var(--evolet-cream-2); padding: 20px 0; border-radius: var(--evolet-radius-lg); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation-link a { display: block; padding: 12px 28px; font-size: 0.7647rem; color: var(--evolet-ink-soft); text-decoration: none; } .woocommerce-MyAccount-navigation-link.is-active a { color: var(--evolet-copper-500); font-weight: 600; border-right: 3px solid var(--evolet-copper-500); background: #fff; } /* --- Статистики в началото на акаунта --- */ .b2b-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; } .b2b-stat { background: #fff; border: 1px solid var(--evolet-border); border-radius: var(--evolet-radius); padding: 18px; } .b2b-stat-lbl { font-size: 0.6471rem; color: var(--evolet-ink-soft); text-transform: uppercase; letter-spacing: 0.5px; } .b2b-stat-val { font-size: 1.4118rem; font-weight: 600; color: var(--evolet-teal-900); margin-top: 6px; } .b2b-stat-val--small { font-size: 0.9412rem; } .b2b-stat--accent .b2b-stat-val { color: var(--evolet-copper-500); } /* --- B2B бонус блок в "Моят акаунт" --- */ .b2b-account-bonus-box { background: linear-gradient(135deg, var(--evolet-teal-900) 0%, #06201f 100%); color: #ffffff; padding: 25px; border-radius: var(--evolet-radius-lg); margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .b2b-account-bonus-label { text-transform: uppercase; letter-spacing: 1px; font-size: 0.7059rem; opacity: 0.85; font-weight: bold; color: var(--evolet-gold-500); } .b2b-account-bonus-amount { color: #ffffff; margin: 5px 0 0 0; font-size: 1.8824rem; font-weight: 600; } .b2b-account-bonus-desc { margin: 8px 0 0 0; font-size: 0.8235rem; opacity: 0.85; } .woocommerce a.b2b-account-bonus-btn, .b2b-account-bonus-btn { background: #ffffff; color: var(--evolet-teal-900); font-weight: bold; padding: 12px 22px; border-radius: var(--evolet-radius); text-decoration: none; display: inline-block; } .woocommerce a.b2b-account-bonus-btn:hover, .b2b-account-bonus-btn:hover { background: var(--evolet-gold-500); color: var(--evolet-teal-900); } /* --- История на кредита в "Моят акаунт" --- */ .b2b-ledger-history-title { color: var(--evolet-teal-900); font-size: 1.0588rem; margin: 0 0 12px 0; } .b2b-ledger-history-table { width: 100%; border-collapse: collapse; font-size: 0.7647rem; margin-bottom: 16px; } .b2b-ledger-history-table th { text-align: left; color: var(--evolet-ink-soft); font-weight: 600; padding: 10px; border-bottom: 1px solid #e8e2d2; text-transform: uppercase; font-size: 0.5882rem; letter-spacing: 0.5px; } .b2b-ledger-history-table td { padding: 10px; border-bottom: 1px solid #e8e2d2; color: var(--evolet-ink); } .b2b-ledger-history-table .tag-plus { color: var(--evolet-success); font-weight: 600; } .b2b-ledger-history-table .tag-minus { color: var(--evolet-danger); font-weight: 600; } .b2b-ledger-history-pagination a { display: inline-block; padding: 4px 10px; margin-right: 4px; border-radius: var(--evolet-radius); background: var(--evolet-teal-050); color: var(--evolet-teal-900); text-decoration: none; font-size: 0.7647rem; } .b2b-ledger-history-pagination a.current { background: var(--evolet-teal-900); color: #ffffff; } /* --- Заявка за партньорски акаунт (регистрация) --- */ .b2b-application-note { font-size: 0.7647rem; color: var(--evolet-ink-soft); } /* --- Известие за чакаща заявка --- */ .woocommerce-message.b2b-pending-notice { background: var(--evolet-copper-100); border-left: 4px solid var(--evolet-copper-500); padding: 15px; margin-bottom: 20px; color: var(--evolet-ink); } /* ========================================================================== Начална страница ========================================================================== */ .evolet-front-page { max-width: none; width: 100%; padding: 0; } /* Предпазва от хоризонтален скрол заради 100vw breakout секциите по-долу */ body { overflow-x: hidden; } .evolet-front-page .site-main { margin: 0; } /* Дотиран десен, вдъхновен от опаковките на Evolet Selection */ .evolet-dotted-bg { background-image: radial-gradient(var(--evolet-gold-500) 1.5px, transparent 1.5px); background-size: 18px 18px; } /* Разчупва wrapper контейнера на темата, за да е секцията full-width (техниката е theme-agnostic — работи еднакво под Astra) */ .evolet-hero, .evolet-why, .evolet-b2b-cta-wrap, .evolet-section { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } /* --- Обща "канава" — центрирана колона със същата ширина/отстъп навсякъде (hero, категории, "Защо EVOLET"), за да се подравняват елементите вертикално едно под друго, както в мокъпа. --- */ .evolet-canvas { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* --- Hero (мокъп: тийл фон, ляво подравнен текст) --- */ .evolet-hero { background: var(--evolet-teal-900); color: #fff; padding: 70px 0 90px; } .evolet-hero-inner { max-width: 560px; } .evolet-hero-eyebrow { font-size: 0.6471rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--evolet-copper-on-dark); /* copper-500 срещу teal-900 = 4.33:1, под прага за дребен текст; on-dark вариантът минава 4.52:1 */ font-weight: 600; margin: 0 0 14px; } .evolet-hero-inner h1 { margin: 0 0 16px; color: #fff; } .evolet-hero-lead { font-size: 0.8824rem; color: #cfe6e0; margin: 0 0 26px; } .evolet-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .evolet-btn-primary, .evolet-btn-secondary, .evolet-btn-inverse { display: inline-block; padding: 11px 22px; border-radius: var(--evolet-radius); font-weight: 600; font-size: 0.7647rem; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } /* !important нужен — Astra Customizer извежда глобалните цветове на бутоните през динамичен