/* ============================================================
   AVA Lighting — секции „Текстово поле“
   Стиловете за настройките, които вече се задават от панела:
   фон, цвят, снимка с наслагване, подравняване, бутон.
   ============================================================ */

.ava-sec { position: relative; width: 100%; }
/* по подразбиране обвивката не ограничава нищо — секцията изглежда както преди */
.ava-sec__inner { position: relative; z-index: 2; }

/* ограничена ширина — само ако е избрано от панела */
.ava-sec--boxed .ava-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* разстояния */
.ava-sec--sm { padding: 22px 0; }
.ava-sec--md { padding: 45px 0; }
.ava-sec--lg { padding: 80px 0; }

/* подравняване */
.ava-sec--left   { text-align: left; }
.ava-sec--center { text-align: center; }
.ava-sec--right  { text-align: right; }
.ava-sec--center.ava-sec--boxed .ava-sec__inner { max-width: 900px; }

/* когато има снимка на фона — съдържанието се центрира вертикално */
.ava-sec--image { display: flex; align-items: center; }
.ava-sec--image .ava-sec__inner { width: 100%; }

/* наслагвания върху снимката */
.ava-sec--ov-dark::before,
.ava-sec--ov-light::before,
.ava-sec--ov-gradient_left::before,
.ava-sec--ov-gradient_bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ava-sec--ov-dark::before  { background: rgba(0,0,0,.5); }
.ava-sec--ov-light::before { background: rgba(255,255,255,.62); }
.ava-sec--ov-gradient_left::before {
  background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%);
}
.ava-sec--ov-gradient_bottom::before {
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}

/* текст */
.ava-sec__title {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}
.ava-sec__text { line-height: 1.65; color: inherit; }
.ava-sec__text p:last-child { margin-bottom: 0; }

/* бутон */
.ava-sec__btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ava-sec__btn--gold    { background: #E6CE84; color: #111 !important; }
.ava-sec__btn--gold:hover { background: #C89633; }
.ava-sec__btn--dark    { background: #111; color: #fff !important; }
.ava-sec__btn--dark:hover { background: #333; }
.ava-sec__btn--light   { background: #fff; color: #111 !important; }
.ava-sec__btn--light:hover { background: #eee; }
.ava-sec__btn--outline {
  background: transparent;
  color: inherit !important;
  border: 2px solid currentColor;
}
.ava-sec__btn--outline:hover { background: rgba(255,255,255,.12); }

@media (max-width: 767px) {
  .ava-sec--lg { padding: 46px 0; }
  .ava-sec--md { padding: 30px 0; }
  .ava-sec--boxed .ava-sec__inner { padding: 0 14px; }
  .ava-sec--image { min-height: 300px !important; }
  .ava-sec__btn { padding: 10px 22px; }
}

/* ============================================================
   ПРОМО ПЛОЧКИ
   Няколко банера в един ред. Всеки си има подредба: текстът върху
   снимката или на плоскост до нея.
   ============================================================ */
.pt { display: grid; width: 100%; }
.pt--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pt--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pt--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pt--gap-sm { gap: 10px; }
.pt--gap-md { gap: 22px; }
.pt--gap-lg { gap: 36px; }

.pt__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none !important;
  background: #f1f1f1;
}
.pt--rounded .pt__item { border-radius: 10px; }

/* форма на плочката */
.pt--r16-9 .pt__item { aspect-ratio: 16 / 9; }
.pt--r3-2  .pt__item { aspect-ratio: 3 / 2; }
.pt--r4-3  .pt__item { aspect-ratio: 4 / 3; }
.pt--r1-1  .pt__item { aspect-ratio: 1 / 1; }

.pt__media { position: absolute; inset: 0; overflow: hidden; }
.pt__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.pt--zoom .pt__item:hover .pt__img { transform: scale(1.05); }

/* ---- подредба „текстът до снимката" ---- */
.pt__item--split_left,
.pt__item--split_right { display: grid; }
.pt__item--split_left  { grid-template-columns: 45% 55%; }
.pt__item--split_right { grid-template-columns: 55% 45%; }

.pt__item--split_left .pt__media,
.pt__item--split_right .pt__media { position: relative; inset: auto; }
.pt__item--split_left  .pt__media { order: 2; }
.pt__item--split_left  .pt__text  { order: 1; }
.pt__item--split_right .pt__media { order: 1; }
.pt__item--split_right .pt__text  { order: 2; }

.pt__item--split_left .pt__text,
.pt__item--split_right .pt__text {
  position: relative;
  inset: auto;
  transform: none;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 8% 9%;
  background: #eeeeee;
  color: #111;
}
.pt__item--split_left .pt__h1,
.pt__item--split_right .pt__h1 { color: inherit; text-shadow: none; }
.pt__item--split_left .pt__h2,
.pt__item--split_right .pt__h2 { color: inherit; opacity: .8; text-shadow: none; }

/* ---- наслагвания (само при текст върху снимката) ---- */
.pt__item--ov-dim::before,
.pt__item--ov-gradient::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pt__item--ov-dim::before { background: rgba(0,0,0,.42); }
.pt__item--ov-gradient::before {
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,0) 100%);
}

/* ---- текстът ---- */
.pt__text { position: absolute; z-index: 2; max-width: 62%; padding: 26px 30px; color: #fff; }

/* деветте позиции при текст върху снимката */
.pt__item--top-left    .pt__text { top: 7%;  left: 0;   transform: none; text-align: left; }
.pt__item--top-center  .pt__text { top: 7%;  left: 50%; transform: translateX(-50%); text-align: center; max-width: 84%; }
.pt__item--top-right   .pt__text { top: 7%;  right: 0;  transform: none; text-align: right; }
.pt__item--middle-left   .pt__text { top: 50%; left: 0;   transform: translateY(-50%); text-align: left; }
.pt__item--middle-center .pt__text { top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; max-width: 84%; }
.pt__item--middle-right  .pt__text { top: 50%; right: 0;  transform: translateY(-50%); text-align: right; }
.pt__item--bottom-left   .pt__text { bottom: 7%; left: 0;   text-align: left; }
.pt__item--bottom-center .pt__text { bottom: 7%; left: 50%; transform: translateX(-50%); text-align: center; max-width: 84%; }
.pt__item--bottom-right  .pt__text { bottom: 7%; right: 0;  text-align: right; }

/* „тъмна плочка зад текста" */
.pt__item--ov-blur .pt__text { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border-radius: 8px; }

.pt__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d5a1c;   /* контраст 5.4:1 върху светла плоскост (беше 2.3:1) */
}
.pt__h1 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.pt__h2 {
  margin: 0 0 18px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: #f0f0f0;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.pt__btn {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease;
}
/* бял текст върху злато дава контраст 2.7:1 — черен върху светло злато дава 12:1 */
.pt__btn--gold  { background: #E6CE84; color: #111 !important; }
.pt__btn--gold:hover { background: #d8bc63; }
.pt__btn--dark  { background: #111; color: #fff !important; }
.pt__btn--dark:hover { background: #333; }
.pt__btn--light { background: #fff; color: #111 !important; }
.pt__btn--light:hover { background: #eee; }
.pt__btn--outline { background: transparent; color: inherit !important; border: 2px solid currentColor; }

@media (max-width: 767px) {
  .pt--mcols-1 { grid-template-columns: 1fr !important; }
  .pt--mcols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .pt--gap-lg, .pt--gap-md { gap: 12px; }
  .pt__text { padding: 14px 16px; max-width: 88%; }
  .pt__item--split_left, .pt__item--split_right { grid-template-columns: 1fr 1fr; }
  .pt__item--split_left .pt__text,
  .pt__item--split_right .pt__text { padding: 12px; }
  .pt__kicker { font-size: 10px; margin-bottom: 4px; }
  .pt__h1 { font-size: 15px; margin-bottom: 6px; }
  .pt__h2 { display: none; }
  .pt__btn { padding: 7px 14px; font-size: 12px; }
}

/* ------------------------------------------------------------
   БЛОГ — връзки към категориите в текста и блокът в края
   ------------------------------------------------------------ */
.blog-article a[href^="/bg/categories/"],
.ava-blog-text a[href^="/bg/categories/"] {
  color: #C89633;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,150,51,.45);
}
.blog-article a[href^="/bg/categories/"]:hover { border-bottom-color: #C89633; }

.ava-blog-cats {
  max-width: 800px;
  margin: 34px auto 10px;
  padding: 22px 24px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}
.ava-blog-cats h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #111;
}
.ava-blog-cats-list { display: flex; flex-wrap: wrap; gap: 9px; }
.ava-blog-cat {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #111 !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease;
}
.ava-blog-cat:hover { background: #E6CE84; border-color: #E6CE84; }

@media (max-width: 767px) {
  .ava-blog-cats { margin: 24px 12px 6px; padding: 16px; }
  .ava-blog-cat { font-size: 13px; padding: 7px 13px; }
}


/* ------------------------------------------------------------
   Достъпност: по-едри зони за натискане на телефона
   Връзките към телефона и имейла бяха под 24px и трудно се улучват.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  a[href^="tel:"], a[href^="mailto:"] {
    display: inline-block;
    min-height: 30px;
    padding: 5px 2px;
    line-height: 20px;
  }
  .footer_design a[target="_blank"] {
    display: inline-block;
    min-width: 34px;
    min-height: 34px;
    padding: 4px;
  }
}

/* заглавието на секцията запазва вида си, но вече е истинско h2 */
h2.section-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ------------------------------------------------------------------ *
 *  Марки — лента на началната страница и страница /brands/
 *  Логата идват в различни размери и пропорции, затова всяко седи в
 *  кутия с еднаква височина и се вписва в нея, вместо да я разтяга.
 * ------------------------------------------------------------------ */

.ava-brandstrip {
    max-width: 1160px;
    margin: 0 auto;
    padding: 8px 16px 24px;
    text-align: center;
}

.ava-brandstrip__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 18px;
}

.ava-brandstrip__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 22px;
}

.ava-brandstrip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 88px;
    padding: 10px 14px;
    border-radius: 10px;
    /* бяло поле с тънка рамка: повечето лога са рисувани за бял фон */
    background: #fff;
    border: 1px solid #ececec;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ava-brandstrip__item:hover,
.ava-brandstrip__item:focus-visible {
    border-color: #c89633;
    box-shadow: 0 6px 18px rgba(22, 21, 15, .08);
    transform: translateY(-2px);
}

.ava-brandstrip__item img {
    max-width: 100%;
    max-height: 66px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* без обезцветяване: на бяло поле логата се четат такива, каквито
       са ги направили производителите */
    opacity: 1;
}


.ava-brandstrip__fallback {
    font-weight: 700;
    letter-spacing: .04em;
    color: #444;
    font-size: .95rem;
}

.ava-brandstrip__all {
    display: inline-block;
    margin-top: 18px;
    font-size: .92rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .ava-brandstrip__row { gap: 6px 14px; }
    .ava-brandstrip__item { width: 152px; height: 70px; padding: 8px 10px; }
    .ava-brandstrip__item img { max-height: 52px; }
    .ava-brandstrip__title { font-size: 1.25rem; }
}

/* --- страницата с всички марки --- */

.ava-brands { padding: 26px 0 56px; }

.ava-brands__heading {
    font-size: 1.9rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.ava-brands__lead {
    max-width: 62ch;
    margin: 0 0 30px;
    color: #5c5c5c;
    line-height: 1.6;
}

.ava-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.ava-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 16px 18px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ava-brand-card:hover,
.ava-brand-card:focus-visible {
    border-color: #cfcfcf;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.ava-brand-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 74px;
    margin-bottom: 14px;
}

.ava-brand-card__logo img {
    max-width: 88%;
    max-height: 66px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ava-brand-card__fallback {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: #333;
}

.ava-brand-card__name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}

.ava-brand-card__count {
    margin-top: 4px;
    font-size: .84rem;
    color: #8a8a8a;
}

@media (max-width: 575px) {
    .ava-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ava-brand-card { padding: 16px 10px 14px; }
    .ava-brand-card__logo { height: 58px; margin-bottom: 10px; }
    .ava-brand-card__logo img { max-height: 52px; }
    .ava-brand-card__name { font-size: .92rem; }
    .ava-brands__heading { font-size: 1.45rem; }
}

/* --- шапка на страницата на една марка --- */

.ava-brandhead {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 20px;
    margin-bottom: 22px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfbfc 0%, #f2f3f5 100%);
}

.ava-brandhead__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 68px;
}

.ava-brandhead__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ava-brandhead__text h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.ava-brandhead__text p {
    margin: 0;
    font-size: .92rem;
    color: #616161;
    line-height: 1.5;
}

@media (max-width: 575px) {
    .ava-brandhead {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 16px 14px;
    }
    .ava-brandhead__logo { width: 130px; height: 56px; }
    .ava-brandhead__text h1 { font-size: 1.3rem; }
}

/* ------------------------------------------------------------------ *
 *  Панелът с филтрите
 *  Групите вече идват само с приложимото за категорията (виж CFilter),
 *  но и подредбата им имаше нужда от стягане: заглавия, които се четат
 *  като заглавия, отметки, които се уцелват с пръст, и отчетливо
 *  разделяне между групите.
 * ------------------------------------------------------------------ */

#frmFilter > ul > li.liFilter {
    padding: 14px 0 12px;
    border-bottom: 1px solid #ececec;
}

#frmFilter > ul > li.liFilter:last-of-type { border-bottom: 0; }

#frmFilter > ul > li.liFilter > h2 {
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6a6a6a;
    margin: 0 0 10px !important;
}

#frmFilter li.liFilter ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.35;
}

#frmFilter li.liFilter ul li input[type="checkbox"] {
    /* по-голяма мишена — панелът се ползва и от телефон */
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: #1c1c1c;
    cursor: pointer;
}

#frmFilter li.liFilter ul li label {
    font-size: .92rem !important;
    cursor: pointer;
    margin: 0;
}

#frmFilter .btnShowAllOptions,
#frmFilter #btnShowAllFilters {
    margin-top: 8px;
    padding: 4px 0;
    background: none;
    border: 0;
    font-size: .84rem;
    color: #444;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* избраните филтри — да си личи какво е включено и да се маха с едно щракване */
.selected-filters {
    margin-bottom: 10px;
    font-size: .86rem;
}

.selected-filters > span:first-child {
    font-weight: 600;
    color: #6a6a6a;
}

.selected-filters .hidden-post {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 6px 0 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f0f1f3;
    cursor: pointer;
}

.selected-filters .hidden-post::after {
    content: "×";
    font-size: 1.05em;
    line-height: 1;
    color: #8a8a8a;
}

.selected-filters .hidden-post:hover { background: #e4e6e9; }
.selected-filters .hidden-post:hover::after { color: #1c1c1c; }

@media (max-width: 767px) {
    #frmFilter > ul > li.liFilter { padding: 12px 0 10px; }
    #frmFilter li.liFilter ul li { padding: 5px 0; }
    #frmFilter li.liFilter ul li input[type="checkbox"] { width: 19px; height: 19px; }
}

/* ------------------------------------------------------------------ *
 *  „По заявка" вместо „изчерпан"
 *  Артикулът не е спрян от производство — просто не е на склад и се
 *  поръчва. Затова цената остава видима, а надписът е дискретен.
 * ------------------------------------------------------------------ */

.ava-po-zayavka {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f2f3f5;
    color: #6a6a6a;
    font-size: .74rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ava-zayavka-box { line-height: 1.5; }
.ava-zayavka-note { font-size: .84rem; opacity: .8; }

/* ------------------------------------------------------------------ *
 *  Филтърът при ключовете и контактите
 *  Тук изборът е друг: вид изделие, серия и брой модули. Затова
 *  отметките стават етикети — виждат се наведнъж и се уцелват с пръст.
 * ------------------------------------------------------------------ */

.ava-switch-filters #frmFilter ul.izdelie,
.ava-switch-filters #frmFilter ul.standart,
.ava-switch-filters #frmFilter ul.moduli {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* тези три групи са къси — показват се изцяло, „Покажи всички" отпада */
.ava-switch-filters #frmFilter ul.izdelie > li,
.ava-switch-filters #frmFilter ul.standart > li,
.ava-switch-filters #frmFilter ul.moduli > li {
    display: block !important;
    padding: 0;
}

.ava-switch-filters #frmFilter ul.izdelie ~ .btnShowAllOptions,
.ava-switch-filters #frmFilter ul.standart ~ .btnShowAllOptions,
.ava-switch-filters #frmFilter ul.moduli ~ .btnShowAllOptions { display: none; }

/* самата отметка се скрива — етикетът поема ролята ѝ */
.ava-switch-filters #frmFilter ul.izdelie > li > input,
.ava-switch-filters #frmFilter ul.standart > li > input,
.ava-switch-filters #frmFilter ul.moduli > li > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ava-switch-filters #frmFilter ul.izdelie > li > label,
.ava-switch-filters #frmFilter ul.standart > li > label,
.ava-switch-filters #frmFilter ul.moduli > li > label {
    display: inline-block;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #dedede;
    border-radius: 999px;
    background: #fff;
    font-size: .86rem !important;
    line-height: 1.25;
    color: #2a2a2a;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ava-switch-filters #frmFilter ul.izdelie > li > label a,
.ava-switch-filters #frmFilter ul.standart > li > label a,
.ava-switch-filters #frmFilter ul.moduli > li > label a { color: inherit; text-decoration: none; }

.ava-switch-filters #frmFilter ul.izdelie > li > label:hover,
.ava-switch-filters #frmFilter ul.standart > li > label:hover,
.ava-switch-filters #frmFilter ul.moduli > li > label:hover { border-color: #9a9a9a; }

.ava-switch-filters #frmFilter ul.izdelie > li > input:checked + label,
.ava-switch-filters #frmFilter ul.standart > li > input:checked + label,
.ava-switch-filters #frmFilter ul.moduli > li > input:checked + label {
    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #fff;
}

.ava-switch-filters #frmFilter ul.izdelie > li > input:focus-visible + label,
.ava-switch-filters #frmFilter ul.standart > li > input:focus-visible + label,
.ava-switch-filters #frmFilter ul.moduli > li > input:focus-visible + label {
    outline: 2px solid #1c1c1c;
    outline-offset: 2px;
}

/* броят модули е кратък надпис — по-тесен етикет с равна ширина на цифрите */
.ava-switch-filters #frmFilter ul.moduli > li > label {
    min-width: 46px;
    padding: 6px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* сериите са много — списък с превъртане, за да не изтласкват артикулите */
.ava-switch-filters #frmFilter ul.seriya {
    max-height: 232px;
    overflow-y: auto;
    padding-right: 4px;
}

.ava-switch-filters #frmFilter ul.seriya > li { display: flex !important; }

.ava-switch-filters #frmFilter ul.seriya::-webkit-scrollbar { width: 6px; }
.ava-switch-filters #frmFilter ul.seriya::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 3px;
}

.ava-switch-filters #frmFilter ul.seriya ~ .btnShowAllOptions { display: none; }

@media (max-width: 767px) {
    .ava-switch-filters #frmFilter ul.izdelie > li > label,
    .ava-switch-filters #frmFilter ul.standart > li > label,
    .ava-switch-filters #frmFilter ul.moduli > li > label {
        padding: 8px 13px;
        font-size: .9rem !important;
    }
    .ava-switch-filters #frmFilter ul.seriya { max-height: 200px; }
}

/* ------------------------------------------------------------------ *
 *  Етикетът „ново" върху плочките
 *  Беше картинка 102x102, свита в кутия 51x23 — заради това се виждаше
 *  само горният ляв ъгъл от кръга и от думата оставаше „но".
 *  Тук е чист етикет от текст: не се реже, чете се и на дребно и не
 *  зависи от файл с картинка.
 * ------------------------------------------------------------------ */

.product-list .new,
.single-item .new,
.new {
    position: absolute;
    top: 8px;
    right: 42px;            /* вляво от сърцето, което е 29px + отстъп */
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    padding: 3px 9px 4px;
    /* съкратеният запис маха и старата картинка от background-image */
    background: #C89633;    /* златото на сайта, същото като .gold_18 */
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 300;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

/* Само когато кутията е празна. В списъците шаблонът подава <div class="new"></div>
   и думата идва оттук; на страницата на артикула тя вече е изписана вътре и
   без :empty се получаваше „НОВОНОВО". */
.product-list .new:empty::before,
.single-item .new:empty::before,
.new:empty::before { content: "Ново"; }

/* Промо етикетът стои на същата плочка — закръглям го, за да не се бият */
.product-list .promo,
.single-item .promo,
.promo {
    top: 8px;
    left: 8px;
    padding: 3px 9px 4px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

@media (max-width: 767px) {
    .product-list .new,
    .single-item .new,
    .new {
        top: 6px;
        right: 38px;
        padding: 2px 7px 3px;
        font-size: 10px;
    }
    .product-list .promo,
    .single-item .promo,
    .promo {
        top: 6px;
        left: 6px;
        padding: 2px 7px 3px;
        font-size: 10px !important;
    }
}

/* ---- Техническа листовка на продуктовата страница -------------------- */
/* Листовките са свалени от acalight.gr; файлът се казва на каталожния номер
   и връзката се показва само когато такъв файл наистина е качен. */
.ava-datasheet {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 4px;
    padding: 9px 15px 9px 11px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}

.ava-datasheet:hover {
    border-color: #b99a5b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.ava-datasheet__tag {
    flex: none;
    padding: 3px 7px;
    border-radius: 4px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.ava-datasheet__text {
    color: #4a4a4a;
    font-size: 15px;
}

.ava-datasheet:hover .ava-datasheet__text {
    color: #b99a5b;
}

/* ---- Отзиви от Google ------------------------------------------------ */
/* Написаните отзиви са три, а оценката е от 37 души. Затова числото води и
   заема лявата трета, а текстовете стоят отдясно — по-силното напред. */
.ava-rev {
    padding: 46px 0;
    background: #fafafa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.ava-rev__inner {
    display: flex;
    align-items: stretch;
    gap: 34px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- лявата колона: оценката --- */
.ava-rev__score {
    flex: 0 0 234px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 18px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
}

.ava-rev__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6f6f6f;
    font-size: 14px;
    font-weight: 600;
}

.ava-rev__num {
    margin-top: 6px;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    color: #111;
}

.ava-rev__stars { margin-top: 6px; letter-spacing: 2px; color: #f0a500; font-size: 20px; }
.ava-rev__stars.is-sm { font-size: 14px; letter-spacing: 1px; }
.ava-rev__star.is-off { color: #dcdcdc; }

.ava-rev__count { margin-top: 8px; color: #6f6f6f; font-size: 14px; }
.ava-rev__count strong { color: #333; }

/* Двата изхода към Google стоят един под друг и са еднакво широки —
   четенето е спокойното действие, писането е това, което искаме от човека,
   затова то носи златото. */
.ava-rev__acts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
    max-width: 260px;
}

.ava-rev__all {
    padding: 9px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    color: #333 !important;
    font-size: 14px;
    text-align: center;
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}

.ava-rev__all:hover { border-color: #c89633; color: #c89633 !important; }

.ava-rev__write {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid #c89633;
    border-radius: 8px;
    background: #c89633;
    color: #111 !important;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s;
}

.ava-rev__write:hover { background: #b5852a; border-color: #b5852a; }

/* Звездите в бутона казват какво се иска от човека, без да го обясняваме. */
.ava-rev__writestars { letter-spacing: 3px; font-size: 15px; line-height: 1; color: #fff; }

/* --- дясната колона: въртележката с отзивите ---
   Пет отзива на решетка се пренасяха на втори ред и правеха секцията двойно
   по-висока от числото отляво. Сега стоят на един ред и се сменят сами.

   Височината НЕ е записана в пиксели. Списъкът е с `position: absolute`
   отвътре, тоест не носи собствена височина — редът се мери по лявата
   колона и картончетата се разтягат до нея. Смени ли се нещо отляво,
   височината се нагажда сама. */
.ava-rev__list {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
}

.ava-rev__track {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 18px;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.ava-rev__card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 36px) / 3);
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
}

/* Под 1100 px три картончета стават нечетими, под 700 px — две. */
@media (max-width: 1100px) { .ava-rev__card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 700px)  { .ava-rev__card { flex-basis: 100%; } }

.ava-rev__cardtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ava-rev__when { color: #8a8a8a; font-size: 12px; white-space: nowrap; }

/* Дългите отзиви се режат с многоточие вместо да разпъват картончето.
   Броят редове е горна граница — късите отзиви не се разтягат до него. */
.ava-rev__text {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    color: #444;
    font-size: 14.5px;
    line-height: 1.6;
}

.ava-rev__more { color: #c89633 !important; text-decoration: none !important; white-space: nowrap; }
.ava-rev__more:hover { text-decoration: underline !important; }

.ava-rev__author {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

/* Кръгче с първата буква — Google не дава снимките на хората през API-то,
   а чужди аватари не се вземат наслуки. */
.ava-rev__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c89633, #e6ce84);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .ava-rev { padding: 32px 0; }
    .ava-rev__inner { flex-direction: column; gap: 20px; }
    .ava-rev__score { flex: none; }
    .ava-rev__num { font-size: 44px; }
    /* В колона списъкът вече не дели ред с числото и няма откъде да вземе
       височина — вътрешността му е изнесена от потока. Затова тук се задава
       изрично, иначе картончетата се сплескват до няколко пиксела. */
    .ava-rev__list { height: 300px; }
    .ava-rev__text { -webkit-line-clamp: 6; }
}

/* ---- Бялата лента над логото ----------------------------------------- */
/* Само две неща: въртящи се съобщения вляво и телефонът вдясно. Иконките
   слязоха при останалите в черната лента, за да не се дели вниманието. */
.ava-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 9px 0;
    font-size: 15px;
    color: #6f6f6f;
}

.ava-topbar__msgs {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
}

/* Съобщенията стоят едно върху друго и се сменят с избледняване. Заемат
   абсолютна позиция, за да не подскача лентата при по-дълъг текст. */
.ava-topbar__msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ava-topbar__msg.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ava-topbar__msg img { flex: none; }

.ava-topbar__phone {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ava-topbar__phone img { display: initial; flex: none; }
.ava-topbar__phone a { color: #333; text-decoration: none; font-weight: 600; }
.ava-topbar__phone a:hover { color: #c89633; }

@media (max-width: 1100px) { .ava-topbar__label { display: none; } }
@media (max-width: 700px)  { .ava-topbar__msgs  { display: none; } }

/* ---- Иконките в черната лента ---------------------------------------- */
/* Бяха в таблица с различни ширини на клетките и се разминаваха по
   височина. Сега са една линия с еднакви кутии. */
.ava-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ava-actions__ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 42px;
    height: 40px;
    padding: 0 8px;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color .18s ease;
}

.ava-actions__ico:hover { background: rgba(255, 255, 255, .12); }
.ava-actions__ico img { display: initial; max-height: 22px; width: auto; }
.ava-actions__num { color: #fff; font-size: 14px; line-height: 1; }

.ava-actions__search { display: inline-flex; align-items: center; margin: 0; }

.ava-actions__sep {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: rgba(255, 255, 255, .22);
}

/* Подсказката е като на лентата отгоре — тъмна, но тук фонът е черен,
   затова е обърната на светла. */
.ava-actions__ico::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(-3px);
    padding: 5px 9px;
    border-radius: 6px;
    background: #fff;
    color: #1c1c1c;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 1000;
}

.ava-actions__ico:hover::after,
.ava-actions__ico:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
    .ava-actions__sep { display: none; }
    .ava-actions__ico { min-width: 36px; padding: 0 5px; }
}

/* Иконката за поща е с тъмни линии — на бялата лента се виждаше, на черната
   се губи. Обръща се в бяло като останалите. Знамето не се пипа. */
.ava-actions__ico img[src*="mail"] {
    filter: brightness(0) invert(1);
}

/* =========================================================
   БУТОНЪТ „ВСИЧКИ" НА ТЕЛЕФОН

   Бутонът е SVG картинка (all.svg) с width="30%" от колоната.
   На широк екран това стига; на телефон col-4 е ~120px и
   30% правят надписа „всички" нечетим конец.

   Долната граница го държи четим независимо от колоната.
   Пипат се само картинките-бутони в заглавните редове на
   секциите — бутонът „Купи" (shop.svg) не е в col-4 на
   design_template и остава недокоснат.
   ========================================================= */
@media (max-width: 767.98px) {
    section.design_template .col-4 a img.grow {
        width: 88px;
        min-width: 88px;
    }
}
/* Mobile promo tiles: keep the category description visible without crowding the button. */
@media (max-width: 767px) {
  .promotiles .pt__h2 {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.35;
  }
}

/* =========================================================
   РАВНИ КАРТИ В „АКТУАЛНО"

   Картите на статиите са в slick въртележка. Всяка беше
   висока колкото собствения си текст (1108–1589px) и редът
   изглеждашеназъбен. Класическата поправка за slick:
   пистата става флекс, слайдовете се разпъват до най-
   високия и всички карти завършват на един ръб.
   ========================================================= */
.design_template.blog .slick-track {
    display: flex !important;
}

.design_template.blog .slick-slide {
    height: auto !important;
    display: flex !important;
    float: none;
}

.design_template.blog .slick-slide > div {
    display: flex;
    width: 100%;
}

.design_template.blog .slick-slide article {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Заглавия само за екранни четци и търсачки.
   Табовете на продуктовата страница са <button> заради достъпността, затова
   секциите нямаха нито едно заглавие. Тези h2 дават структурата, без да
   променят вида на страницата. */
.ava-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
