/* ========================================================================== Мартеа — фиксове Д1–Д19 от проверката на макетите (18.08.2026). Зарежда се последен, за да бие макетните правила. Всеки блок носи номера си. ========================================================================== */ /* Д1 — падащото меню „Празници" не се отваряше: hover правилото сменяше само transform */ .has-dd:hover > .drop, .has-dd:focus-within > .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .has-mega:focus-within > .drop { opacity: 1; visibility: visible; transform: translateY(0); } /* Д2 — базовите бутони липсваха в legal/faq. Тук са дефинирани веднъж за целия сайт. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, color .2s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--brown); color: #fff; } .btn-primary:hover { background: #3f2e29; color: #fff; } .btn-ghost { background: transparent; color: var(--brown); border-color: var(--rose); } .btn-ghost:hover { background: var(--beige); color: var(--brown); } /* Д3 — етикетът на бутона се режеше в 2-колонния грид на категорията (390px) */ @media (max-width: 900px) { .prods .card .btn, ul.products li.product .button { width: 100%; font-size: 13px; padding: 11px 10px; white-space: normal; text-align: center; line-height: 1.25; } } /* Д4 — 15px хоризонтален скрол на чекаута: flex дете с min-width:auto */ .co-grid > *, .cart-grid > * { min-width: 0; } .summary { min-width: 0; } .summary .sum-row span, .summary .so-item .n { min-width: 0; overflow-wrap: anywhere; } /* Д5 — 22px хоризонтален скрол на правната страница от таблицата */ .legal-grid > *, .legal-body { min-width: 0; } .legal-body table { width: 100%; } .legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Д6 — 16px хоризонтален скрол на началната от декоративния blob */ .hero { overflow-x: clip; } @supports not (overflow: clip) { .hero { overflow-x: hidden; } } /* Д7а — котвите отиваха под лепкавия хедър */ .legal-body h2, .prose h2, .faq-group, [id] { scroll-margin-top: 140px; } /* Д7б — трохата на продукта стои ИЗВЪН .wrap, затова сама си слага отстъпа и центрирането. Правилото е стеснено до точно този случай: вътре в .wrap (категория, количка, страници) отстъпът се удвояваше. */ .site-content > .crumb, .site-content > nav.crumb { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* Д8 — „Доставка" и стойността ѝ бяха залепени на мобилно */ .sum-row { gap: 16px; } .sum-row > *:last-child { text-align: right; } /* Д12 — телефонът се чупеше на два реда в горната лента */ .tb-r a, .tb-phone, .fcontact a[href^="tel"] { white-space: nowrap; } /* Д15 — ценовият филтър да чете правилно */ .fgroup .price-out { font-variant-numeric: tabular-nums; } /* Д16 — лепкавата лента на продукта получава избор на количество */ @media (max-width: 900px) { .pdp-bar .pb-qty { display: flex; align-items: center; gap: 6px; } .pdp-bar .pb-qty button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; } } /* Е4.10 — на 390px лентата преливаше: цена 49 + количество 114 + бутон 212 > 390 → бутонът се режеше, страницата скролваше хоризонтално, а иконата на CookieYes (долу вляво) покриваше цената. Цената отпада под 480px — вижда се в панела над лентата; лявата подложка пази мястото на CookieYes иконата. */ @media (max-width: 480px) { .pdp-bar { gap: 8px; padding: 10px 12px 10px 76px; } .pdp-bar .pb-price { display: none; } .pdp-bar .pb-qty { flex: 0 0 auto; } .pdp-bar .pb-qty button { width: 36px; height: 36px; } .pdp-bar .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-inline: 14px; } } /* Д17 — точката висеше отделно след линка в съгласието */ .terms label, .terms { display: block; } .terms a { white-space: nowrap; } /* Д19 — НОВО: зона за съдържание ПОД продуктовия грид (6 категории я ползват) */ .cat-bottom { padding: 46px 0 8px; } .cat-bottom h2 { font-family: 'Philosopher', serif; font-size: 26px; color: var(--brown); margin: 0 0 14px; } .cat-bottom p { margin: 0 0 14px; line-height: 1.75; } .cat-faq { margin-top: 28px; } .cat-faq .qa { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; } .cat-faq .qa > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left; font-family: 'Philosopher', serif; font-size: 17px; color: var(--brown); } .cat-faq .qa .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--beige); display: grid; place-items: center; transition: transform .25s, background .25s, color .25s; } .cat-faq .qa.open { border-color: var(--rose); box-shadow: var(--shadow-sm); } .cat-faq .qa.open .pm { transform: rotate(45deg); background: var(--accent); color: #fff; } .cat-faq .ans { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .cat-faq .ans p { padding: 0 18px 18px; margin: 0; line-height: 1.7; color: var(--grey); } /* Промо лента (има я на живо, нямаше я в макета) */ .promo-bar { background: var(--accent); color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; } .promo-bar .wrap { padding: 8px 24px; } .promo-bar a { color: #fff; text-decoration: none; } .promo-bar b { background: rgba(255,255,255,.22); padding: 2px 8px; border-radius: 999px; } /* Мега меню — трето ниво (живото меню го има, макетът нямаше) */ .mega .mcol > ul.mega-links { list-style: none; margin: 0; padding: 0; } .mega .mega-sub { list-style: none; margin: 4px 0 10px 12px; padding: 0 0 0 10px; border-left: 1px solid var(--line); } .mega .mega-sub a { font-size: 13px; color: var(--grey); } .mega .mega-sub a:hover { color: var(--accent); } .mnav .acc-all { display: block; font-weight: 700; color: var(--accent); padding: 6px 0 10px; } .mnav-link.sub { padding-left: 16px; font-size: 14.5px; } /* Достъпност и дреболии */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: 8px; } .mt-lock { overflow: hidden; } .sidecart.is-busy { opacity: .6; pointer-events: none; } .badge[hidden] { display: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* Снимките вече не са 300×300 — пазим пропорциите */ .card .thumb img, .prods img { width: 100%; height: 100%; object-fit: cover; } /* ==== Довършване след сглобката ==== */ /* SEO секциите на началната (5-те дълги текста от стария сайт) */ .seo-sec { padding: 56px 0; } .seo-sec.alt { background: var(--beige); } .seo-sec h2 { font-family: 'Philosopher', serif; font-size: 30px; color: var(--brown); margin: 0 0 16px; } .seo-sec .seo-body { max-width: 900px; line-height: 1.8; } .seo-sec .seo-body p { margin: 0 0 14px; } .seo-sec .seo-body ul, .seo-sec .seo-body ol { margin: 0 0 14px 20px; line-height: 1.8; } @media (max-width: 560px) { .seo-sec { padding: 38px 0; } .seo-sec h2 { font-size: 24px; } } /* Лентата с 3 гаранции (на началната и под категориите) */ .usp-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: center; } .trust-item .tx small, .usp-item .tx small { display: block; color: var(--grey); font-weight: 400; font-size: 13px; margin-top: 2px; } @media (max-width: 900px) { .usp-in { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 560px) { .usp-in { grid-template-columns: 1fr; gap: 14px; } .usp-in .trust-item, .usp-in .usp-item { justify-content: flex-start; } } /* .trust лентата се ползва и извън началната — правилата ѝ трябва да са глобални */ .trust { background: var(--beige); padding: 34px 0; } .trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: center; } .trust-item { display: flex; align-items: center; gap: 14px; } .trust-item .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--accent); } .trust-item .tx { font-size: 14px; font-weight: 700; color: var(--brown); line-height: 1.35; } @media (max-width: 900px) { .trust-in { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .trust-in { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* Етикет „Ново/промо" по картите извън началната */ .card .thumb .tag, .card .tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .card .thumb { position: relative; } /* WooCommerce обвивки — woocommerce-general.css е изключен, това е минимумът */ .woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; background: var(--beige); border: 1px solid var(--line); color: var(--brown); font-size: 14.5px; } .woocommerce-error { background: #FBEFEA; border-color: #E4C3B8; } .woocommerce form .form-row { margin: 0; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, span.woocommerce-input-wrapper { width: 100%; display: block; } .woocommerce .quantity input[type=number] { -moz-appearance: textfield; } .woocommerce .quantity input::-webkit-outer-spin-button, .woocommerce .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; } .woocommerce .blockUI.blockOverlay { position: relative; } .screen-reader-text { position: absolute !important; } /* Полето за персонализация */ .note { margin: 18px 0 0; } .note label { display: block; font-weight: 700; font-size: 14px; color: var(--brown); margin-bottom: 6px; } .note textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: 'Mulish', sans-serif; font-size: 14.5px; resize: vertical; background: #fff; } .note textarea:focus { outline: none; border-color: var(--rose); } /* Съобщения от формата за контакт */ .mt-note { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14.5px; } .mt-note.ok { background: #F1F4EA; border: 1px solid #C3D0A8; color: #4C5A33; } .mt-note.err { background: #FBEFEA; border: 1px solid #E4C3B8; color: #8C4A38; } .mt-hp { position: absolute !important; left: -9999px; } /* ==== Woo обвивки (изнесено от inc/woo-single.php) ==== */ .field .woocommerce-input-wrapper{display:block;width:100%} .field input,.field select,.field textarea{width:100%} .field abbr[title]{color:var(--accent);border:0;text-decoration:none;cursor:help} .field .description,.field small{font-size:12.5px;color:var(--grey)} .woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3{font-size:16px;margin:0 0 14px} .wc_payment_methods,.wc_payment_methods li,.filters ul,.summary ul{list-style:none;margin:0;padding:0} .payment_box{background:var(--beige);border-radius:12px;padding:12px 14px;margin-top:10px;font-size:13.5px;color:var(--grey)} .payment_box p:last-child{margin-bottom:0} .woocommerce-error,.woocommerce-message,.woocommerce-info,.cart-empty{list-style:none;background:var(--beige);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:0 0 18px;font-size:14px;color:var(--brown)} .woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none} .mt-coupon{display:flex;gap:10px;flex-wrap:wrap} .mt-coupon input[type=text]{flex:1;min-width:170px;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 16px;font-family:inherit;font-size:14px;color:var(--brown);background:#fff;outline:none} .cart-actions .ca-r{display:flex;gap:12px;flex-wrap:wrap} .summary .opts{grid-template-columns:1fr;margin:0 0 16px} .summary .opt{padding:14px} .mt-ship-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin:0 0 10px} .woocommerce-shipping-calculator{margin-top:10px;font-size:13px} .p-info .stock{font-size:14px;font-weight:600;margin-bottom:10px} .pdp-bar .pb-qty input{width:38px;height:32px;border:none;text-align:center;font-family:inherit;font-weight:700;color:var(--brown);background:none;outline:none;-moz-appearance:textfield} .pdp-bar .pb-qty input::-webkit-outer-spin-button,.pdp-bar .pb-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .cat-bottom .cat-faq h2{margin-top:26px} /* ==== Класове, които шаблоните ползват, а макетът нямаше ==== */ /* Бутоните ± за количество (продукт, количка, лепкава лента) */ .qty .mt-step, .pb-qty .mt-step { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 50%; font-size: 17px; line-height: 1; color: var(--brown); cursor: pointer; transition: background .2s, border-color .2s; } .qty .mt-step:hover, .pb-qty .mt-step:hover { background: var(--beige); border-color: var(--rose); } @media (max-width: 900px) { .qty .mt-step { width: 44px; height: 44px; } } .qty input.hidden, .hidden { display: none !important; } /* Категория */ /* Е4.4: банерът е ВИНАГИ само 1 абзац (виж archive-product.php) — блокът трябва да е центриран (margin:auto), не само текстът вътре в него, иначе изглежда "крив" при text-align:center на родителя. */ .term-description { max-width: 730px; margin: 0 auto; line-height: 1.8; text-align: center; } .term-description p { margin: 0 0 12px; } .term-description p:last-child { margin-bottom: 0; } .cat-h2 { font-family: 'Philosopher', serif; font-size: 22px; color: var(--brown); margin: 14px 0 0; font-weight: 400; } .shop-main { min-width: 0; } /* Количка / чекаут — носещи колони */ .cart-main, .co-main { min-width: 0; } .mt-payment { margin-top: 6px; } .shipping-head { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin: 0 0 8px; } /* Woo класове, останали без стил след изключването на woocommerce.css */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 10px 0; text-align: left; vertical-align: top; } .woocommerce table.shop_table tr.order-total td, .woocommerce table.shop_table tr.order-total th { border-top: 1px solid var(--line); padding-top: 16px; font-size: 17px; } .woocommerce .required, .required { color: var(--accent); text-decoration: none; border: 0; } .woocommerce form .form-row.validate-required label .required { margin-left: 2px; } .woocommerce a.remove, .cart-row .remove { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--grey); text-decoration: none; font-size: 18px; line-height: 1; transition: background .2s, color .2s; } .woocommerce a.remove:hover, .cart-row .remove:hover { background: #FBEFEA; color: #C08476; } .wc-proceed-to-checkout { margin-top: 16px; } .wc-proceed-to-checkout .checkout-button { width: 100%; } .woocommerce-shipping-totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .woocommerce-shipping-totals label { font-size: 14px; } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; } .woocommerce-checkout #payment div.form-row { padding: 0; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--grey); } .woocommerce-terms-and-conditions-wrapper { margin: 14px 0; } .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .woocommerce-form__input-checkbox { margin-top: 3px; } /* Дребни допълнения към споделените блокове */ .sc-item .sc-pers { font-size: 12.5px; color: var(--grey); margin: 4px 0 0; font-style: italic; } .sc-item h4 a { color: inherit; text-decoration: none; } .flogo img { max-width: 150px; height: auto; } .fslogan { color: var(--grey); font-size: 13.5px; margin: 10px 0 14px; line-height: 1.6; } .fcontact { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13.5px; line-height: 1.9; color: var(--grey); } .fcontact b { color: var(--brown); font-weight: 700; } .fcontact a { color: inherit; text-decoration: none; } .fcontact a:hover { color: var(--accent); } .mnav-body { display: flex; flex-direction: column; } .mnav-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .mnav-foot .btn { width: 100%; } .logo-txt { font-family: 'Philosopher', serif; font-weight: 700; font-size: 24px; color: var(--brown); } /* Ф20 (staging 19.08): JetMenu мега контейнерите от стария билдър се рендират разгънати в новата тема — скриваме ги, менюто на темата ги замества */ .jet-mega-menu-mega-container{display:none!important;} /* Ф21 (staging 19.08): .socials се стилизираше само в contacts.css, който се зарежда единствено на страница Контакти — във футъра иконите излизаха голи. Тук е глобално. */ .socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .socials a{width:42px;height:42px;border-radius:12px;background:var(--beige,#f3ece7);display:grid;place-items:center;color:var(--brown,#4a332b);transition:.2s} .socials a:hover{background:var(--brown,#4a332b);color:#fff;transform:translateY(-2px)} .socials svg{display:block} /* ========================================================================== Кръг 2 — дефекти Д1–Д20 от сверката по макетите (20.08.2026). Всеки блок носи номера си и обяснява КОЕ се е чупело, не какво прави кодът. ========================================================================== */ /* --------------------------------------------------------------------- Д3 Мега менюто „Поводи" (116 линка) се разгъваше на цялата си височина и стърчеше ~430px под екрана — долните категории бяха недостижими. Таванът е реалното свободно място под лентата с менюто; смята се в main.js (--mt-drop-max) при скрол и при промяна на размера, а тук е и разумен резервен вариант, ако JS-ът не се зареди. */ .drop { max-height: var(--mt-drop-max, calc(100vh - 200px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* скролът не „пробива" към страницата */ -webkit-overflow-scrolling: touch; } .drop::-webkit-scrollbar { width: 10px; } .drop::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .drop::-webkit-scrollbar-track { background: transparent; } /* Колоните вече не се разтягат до безкрай — гридът се пренарежда, вместо да изтласква съдържанието надолу. */ .mega { align-items: start; } /* --------------------------------------------------------------------- Д6 Хиро банерът се режеше: .frame имаше твърдо съотношение 4/3.4 и object-fit:cover, тоест снимката се подрязваше отгоре и отдолу. Свободно качената снимка на клиента се показва ЦЯЛА (contain), а баджът получава собствено място, за да не увисва извън секцията. */ .hero-media { padding-bottom: 30px; } .hero-media .frame { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; } .hero-media .frame img { width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: center; border-radius: 32px; background: var(--beige); box-shadow: var(--shadow); } .hero-media .float { bottom: 0; left: 0; z-index: 3; /* баджът стои НАД снимката, не под нея */ max-width: calc(100% - 8px); /* Е3.6б: текстът е от опция, произволна дължина; без таван box-ът се разширява по съдържание и body{overflow-x:hidden} го реже вместо да пренесе на нов ред */ white-space: normal; } @media (max-width: 900px) { .hero-media .frame img { max-height: 420px; } } @media (max-width: 560px) { .hero-media .float { padding: 12px 16px; gap: 10px; font-size: 13px; } .hero-media .float .dot { flex-shrink: 0; width: 32px; height: 32px; } } /* --------------------------------------------------------------------- Д5 Избраната вариация вече се изписва като четим ред („Цвят: Червен"), вместо да излиза суров HTML. Редът е под името и е нарочно по-блед от цената. */ .sc-item .sc-var { font-size: 12.5px; line-height: 1.4; color: var(--grey); margin: 3px 0 2px; } .sc-item .sc-thumb img { border-radius: 12px; } /* Броят артикули в заглавието на страничната количка (беше го нямало). */ .sc-head .sc-count { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 600; color: var(--grey); white-space: nowrap; } .sc-head .sc-count:empty { display: none; } /* „Върви добре с…" — блокът имаше маркъп, но нямаше стил. */ .sc-cross { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .sc-cross h4 { font-size: 15px; margin: 0 0 10px; } .sc-cross .sc-mini { display: grid; grid-template-columns: 48px 1fr 32px; gap: 10px; align-items: center; padding: 8px 0; } .sc-cross .sc-mini img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; } .sc-cross .sc-mini b { display: block; font-size: 13.5px; font-weight: 600; color: var(--brown); line-height: 1.3; } .sc-cross .sc-mini span { font-size: 13px; color: var(--grey); } .sc-cross .sc-mini .plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--brown); font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; } .sc-cross .sc-mini .plus:hover { background: var(--beige); border-color: var(--rose); } /* --------------------------------------------------------------------- Д4 Бутонът показва, че работи, докато AJAX-ът тича. Без това клиентът натиска по два-три пъти, защото нищо не се случва видимо. */ form.cart .single_add_to_cart_button.loading { opacity: .65; pointer-events: none; } form.cart .single_add_to_cart_button.loading::after { content: ""; width: 14px; height: 14px; margin-left: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mt-spin .7s linear infinite; } @keyframes mt-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------- гола variations form woocommerce-general.css е изключен, а формата за избор на вариация е ЕДИНСТВЕНАТА част на продукта, която не е пренаписана по макета — оставаше без никакъв стил: гол