/* Mobile logo center
------------------------  */
@media (max-width: 767px) {
    .up-header .row {
        position: relative;
    }
    #logo.up-header__logo-top {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        pointer-events: none;
    }
    #logo.up-header__logo-top a,
    #logo.up-header__logo-top img {
        pointer-events: auto;
    }
    .up-header__logo-mobile {
        margin-right: 0 !important;
    }
}

/* Slider Home
------------------------  */
/*fff */

.megasliderpro__content-price .megasliderpro__from {
        font-size: 17px;
        color: #283240 !important;
        padding: 15px 20px;
        border-radius: 54px;
        background: #F5CB45 !important;
    }
    .megasliderpro__content-price {
        left: 50% !important; 
        transform: translateX(-50%) !important; 
    }


@media (min-width: 992px) {
    .megasliderpro[class*="col-"]:not(.pos-1) .ms-caption{
        width: 100% !important;
    }
    .megasliderpro .megasliderpro__title {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .megasliderpro .megasliderpro__sub-title {
        font-size: 16px;
        font-weight: normal;
    }
    .megasliderpro .megasliderpro__inner .megasliderpro__content-title {
        max-width: 373px !important; 
    }

    .megasliderpro__content-price .megasliderpro__from {
        font-size: 17px;
        color: #283240 !important;
        padding: 15px 20px;
        border-radius: 54px;
        background: #F5CB45 !important;
    }
    .megasliderpro__content-price {
        left: 50% !important; 
        transform: translateX(-50%) !important; 
    }
}

@media (max-width: 991px) {
    .megasliderpro .megasliderpro__inner .megasliderpro__content-title {
        background: rgb(255 255 255 / 62%);
        padding: 15px;
        border-radius: 6px;
        left: 0;
        height: 100%;
        width: 100% !important; 
        max-width: 991px !important; 
    }
}







.image .sticker-ns.special:first-child,
.image-block .sticker-ns.special:first-child {
    display: none;
}

footer .footer-top {
        display: flex;
        align-content: space-between;
        align-items: center;
        flex-direction: row;
}

#text-footer {
    text-align: right;
}

@media (max-width: 768px) {
    #text-footer {
        text-align: center;
    }
}



@media (min-width: 1200px) {
    .banner-blocks-container .col-lg-2 {
        width: 25%;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .banner-blocks-container .col-lg-2 {
        width: 25%;
    }
}


/* menu fix 300px */
.menu-box.m_type_header_1 {
    width: 300px;
}
.menu-box.m_type_header_1 #menu-vertical {
    width: 100%;
}

@media (min-width: 992px) {
    .box-menu-top {
        display: none !important;
    }
}

/* PRODUCT SET INFO */
.product_set_inner {
    all: unset;
    position: sticky;
    background: #FFFFFF;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
}

.product_set_title {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #f9a80b;
}

.set_list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

.set_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 20px;
}

.set_left {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2F2F2F;
}

.set_right {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #A1A5A8;
}

@media (min-width: 992px) {
    .sticky-product-info {
        margin-left: 20px;
        background: var(--up-bg-wd);
        border: 1px solid var(--up-border-color);
        border-radius: 20px;
        position: sticky;
        top: 225px;
        align-self: flex-start;
        width: 400px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        padding: 15px;
    }
}

.chm-radio, .chm-checkbox {
    font-size: 80%;
}

/* video page */


.info-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;               /* расстояние между карточками */
  align-items: stretch;
  margin: 0;               /* убрал отрицательные margin */
  padding: 0;
}

/* Каждая карточка: используем flex-basis и box-sizing */
.info-video {
  box-sizing: border-box;
  padding: 10px 0; /* внутренняя высота, картинка уже занимает пространство */
  flex: 0 0 calc((100% - 40px) / 3); /* 3 колонки: вычитаем суммарный gap (2*20px) */
  max-width: calc((100% - 40px) / 3);
}

/* Внутренний блок, который отвечает за картинку/соотношение */
.info-video .ajax-popup {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #eee;
  text-decoration: none;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
}

/* адаптив */
@media (max-width: 1023px) {
  .info-video {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    padding: 8px 0;
  }
}
@media (max-width: 599px) {
  .info-video {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 6px 0;
  }
}


/* Картинка занимает весь контейнер и обрезается при необходимости */
.info-video .ajax-popup img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Иконка Play по центру */
.info-video .ajax-popup svg,
.info-video .ajax-popup .play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Подписи/высота карточки — если нужно текст под картинкой */
.info-video .caption {
  margin-top: 8px;
  font-size: 14px;
  color: #222;
}

/* Адаптив */
@media (max-width: 1023px) {
  .info-video { width: calc((100% - 20px) / 2); } /* 2 колонки */
}
@media (max-width: 599px) {
  .info-video { width: 100%; } /* 1 колонка */
  .info-videos { gap: 12px; margin: 0; }
  .info-video { padding: 6px; }
  .info-video .ajax-popup svg { width: 48px; height: 48px; }
}

/* Небольшая анимация при наведении */
.info-video .ajax-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  transition: background .18s;
}
.info-video .ajax-popup:hover::after { background: rgba(0,0,0,0.08); }



/* O nas page
------------------------------- */


.about-page { line-height:1.7;  box-sizing:border-box; font-weight: 500;}
.about-page .about-hero { display:flex; gap:30px; align-items:center; margin-bottom:45px; }
.about-page .about-hero .hero-text { flex:1; min-width:260px; }
.about-page .about-hero p.b_text { margin:0 0 40px; font-weight: 600; font-size:18px; }
.about-page .about-hero h4.b_text { margin:0 0 20px; font-weight: 600; font-size:18px; }
.about-page .about-hero .lead-bot {margin:0px; font-weight: 500; font-size:15px;}
.about-page .about-hero .hero-image { flex:1; text-align:right; }
.about-page .about-hero .hero-image img { max-width:100%; height:auto; border-radius:6px; }


.b_text {font-weight: 600; font-size:18px !important; line-height: 1.7 !important; margin-bottom: 30px;}
.m_text {font-weight: 600; font-size:16px !important;}


.two h4 {}

.about-page .features { display:flex; gap:16px; margin:20px 0 120px; }
.about-page .feature { flex:1; background:#fafafa; padding:18px; border-radius:8px; }
.about-page .feature svg { width:36px; height:36px; display:block; margin-bottom:10px; }
.about-page .feature h3 { margin:0 0 8px; font-size:15px; }
.about-page .feature p { margin:0; font-size:14px; font-weight: 500; line-height: 1.4}
.about-page .feature img { width:48px;margin-bottom: 20px}

.about-page .product-block { display:flex; gap:24px; align-items:flex-start; margin-bottom:100px; }
.about-page .product-block .prod-img { flex:0 0 470px; margin-right: 50px;}
.about-page .product-block .prod-img img { width:100%; height:auto; border-radius:6px; }
.about-page .product-block .prod-content { flex:1; }
.about-page .prod-content h3 { margin-bottom: 30px; font-size:18px; }
.about-page .prod-content ul { padding-left:18px; margin:10px 0; }
.about-page .prod-content p { margin:10px 0;  }
.about-page .prod-content p.tcl { margin:35px 0; font-weight:500; }
.about-page .prod-content h3.zct { margin:35px 0 0 0; }

.about-page .advantages { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:100px; }

.about-page .advantages .adv-list { flex:1; min-width:260px; }
.about-page .advantages .adv-image { flex:1; text-align:right; }
.about-page .advantages .adv-image img { max-width:100%; height:auto; border-radius:6px; }


.about-page .adv-item { display:flex; gap:20px; align-items:flex-start;  min-width:220px; margin-bottom:20px; }
.about-page .adv-item img { width:35px; height:auto; object-fit:cover; border-radius:6px;margin-top: 5px; }
.about-page .adv-item .txt { font-size:14px; font-weight: 500;}

.about-page .final-note h3 { margin-bottom: 10px}
.about-page .final-note p { font-size:14px; line-height:2.2; font-weight: 500;}


/* Минимальные утилитарные стили */
.about-page ul { margin:0 0 0 18px; padding:0; }
.about-page h3 { color:#142532; }
.about-page a { color:inherit; text-decoration:none; }

/* Responsive */
@media (max-width:768px){
    .about-page .about-hero { flex-direction:column-reverse; text-align:left; }
    .about-page .product-block { flex-direction:column; }
    .about-page .product-block .prod-img { width:100%; flex:unset; }
    .about-page .features { flex-direction:column; }
    .about-page .adv-item { width:100%; }

    .b_text {font-weight: 600; font-size:17px !important; line-height: 1.6 !important; margin-bottom: 30px;}
    .m_text {font-weight: 600; font-size:16px !important;}

    .about-page .advantages {
        flex-direction: column;
    }

    .about-page .final-note p { margin:0px 5px; font-size:14px; line-height:1.8; font-weight: 500;}
}


/* Callback Bottom Bar (popup)
------------------------------- */
.fermx-callback-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #F5CB45;
    padding: 18px 0;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(245, 203, 69, 0.35);
}
.fermx-callback-bar.is-visible {
    transform: translateY(0);
}
.fermx-callback-bar.is-hidden {
    transform: translateY(100%);
}
.fermx-callback-bar__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fermx-callback-bar__text {
    color: #283240;
    text-align: center;
}
.fermx-callback-bar__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}
.fermx-callback-bar__subtitle {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
    margin: 0;
}
.fermx-callback-bar__form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.fermx-callback-bar__input {
    width: 220px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    background: #fff;
    padding: 12px 14px;
    font-size: 15px;
    color: #283240;
    outline: none;
    transition: border-color 0.2s;
}
.fermx-callback-bar__input:focus {
    border-color: #283240;
}
.fermx-callback-bar__input::placeholder {
    color: #A1A5A8;
}
.fermx-callback-bar__btn {
    height: 44px;
    padding: 12px 20px;
    border: none;
    border-radius: 28px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}
.fermx-callback-bar__btn:hover {
    background: #222;
    transform: translateY(-1px);
}
.fermx-callback-bar__btn:active {
    transform: translateY(0);
}
.fermx-callback-bar__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.fermx-callback-bar__close {
    position: absolute;
    top: 8px;
    right: 14px;
    background: none;
    border: none;
    color: #283240;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 4px;
}
.fermx-callback-bar__close:hover {
    opacity: 1;
}
.fermx-callback-bar__msg {
    color: #283240;
    font-size: 14px;
    font-weight: 500;
    margin-left: 6px;
    display: none;
}
.fermx-callback-bar__msg.is-error {
    color: #9B1C1C;
}
.fermx-callback-bar__msg.is-success {
    color: #1B6B2A;
}

@media (max-width: 600px) {
    .fermx-callback-bar {
        padding: 14px 0;
    }
    .fermx-callback-bar__inner {
        flex-direction: column;
        gap: 10px;
    }
    .fermx-callback-bar__input {
        width: 100%;
        max-width: 280px;
    }
    .fermx-callback-bar__form {
        width: 100%;
        flex-direction: column;
    }
    .fermx-callback-bar__btn {
        width: 100%;
        max-width: 280px;
    }
    .fermx-callback-bar__title {
        font-size: 15px;
    }
}


/* ============================================================
   Fix: product description / tabs overflow on mobile
   ------------------------------------------------------------
   .tab-content.show-all-tabs is a flex child (flex:1 in tabs.css)
   with the default min-width:auto, so it refuses to shrink below
   its content's intrinsic width and overflows .container, getting
   clipped by main{overflow-x:clip} -> description text cut off.
   min-width:0 lets the flex item shrink to the available width.
   Also break long German compound words and keep any media inside
   the column, so this holds for every product description.
   ------------------------------------------------------------ */
.tab-content.show-all-tabs {
    min-width: 0;
    max-width: 100%;
}
.tab-content.show-all-tabs .tab-pane {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.tab-content.show-all-tabs .tab-pane h1,
.tab-content.show-all-tabs .tab-pane h2,
.tab-content.show-all-tabs .tab-pane h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.tab-content.show-all-tabs .tab-pane img,
.tab-content.show-all-tabs .tab-pane table,
.tab-content.show-all-tabs .tab-pane iframe,
.tab-content.show-all-tabs .tab-pane video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Make additional ("dropdown") phones match the primary phone:
   same brand color + bold weight + size, and on desktop a phone
   icon like the primary one.
   The 16px !important overrides the theme's generic
   .dropdown-menu.ch-dropdown > li > a { font-size:14px !important }.
   ------------------------------------------------------------ */

/* Desktop: phones in the header dropdown */
.up-header-phones__dropdown.ch-dropdown > li > a,
.up-header-phones__dropdown.ch-dropdown > li > div {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--up-text-wd-color);
    display: flex;
    align-items: center;
}

/* Default phone icon via ::before, only when no custom icon is set.
   The theme repurposes ::before on hover/active as an absolutely
   positioned background "pill"; we force OUR icon ::before to stay
   in flow (static, no background) in every state so the text never
   shifts — then re-create the hover pill on the link below. */
.up-header-phones__dropdown.ch-dropdown > li > a:not(:has(.up-header-phones__icon-image, .icon-image))::before,
.up-header-phones__dropdown.ch-dropdown > li > a:not(:has(.up-header-phones__icon-image, .icon-image)):hover::before,
.up-header-phones__dropdown.ch-dropdown > li > div:not(:has(.up-header-phones__icon-image, .icon-image))::before,
.up-header-phones__dropdown.ch-dropdown > li > div:not(:has(.up-header-phones__icon-image, .icon-image)):hover::before {
    content: "\e90f" !important;
    font-family: 'upstore' !important;
    position: static !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    border-radius: 0 !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    margin-right: 10px !important;
    flex: 0 0 auto;
    -webkit-font-smoothing: antialiased;
}
/* Re-create the theme's hover/active grey pill on the link itself,
   since ::before is now used for the icon. */
.up-header-phones__dropdown.ch-dropdown > li > a:not(:has(.up-header-phones__icon-image, .icon-image)):hover,
.up-header-phones__dropdown.ch-dropdown > li > div:not(:has(.up-header-phones__icon-image, .icon-image)):hover {
    background: var(--up-dd-menu-bg-hover);
    border-radius: 4px;
}

/* Mobile "Kontakt" popup: additional phones (cloned dropdown).
   No icon here (primary has none in the popup), just match weight/color. */
.mobile-sidebar-phones__dropdown li,
.mobile-sidebar-phones__dropdown li > a,
.mobile-sidebar-phones__dropdown li > div {
    font-size: 16px;
    font-weight: 600;
    color: var(--up-text-wd-color);
}

/* tile product name as H3 (SEO) — keep visual identical to former div */
h3.product-name{margin-top:0;font-size:inherit;font-weight:inherit;line-height:normal;}

/* ---- moved from consultation.twig (W3C: <style> not allowed in body) ---- */
/* Consultation block styles */
.consult-block {
  background: #EAEAEA; 
  border-radius: 18px;
  padding: 34px;
  margin: 24px auto;
  box-sizing: border-box;
  color: #111827;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Layout */
.consult-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

/* Left column */
.consult-left {
  flex: 1 1 380px;
  min-width: 220px;
}

.consult-left .consult-title {
  display: block;
  margin: 0 0 25px 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  color: #0f1724;
}

.consult-left p {
  margin: 0;
  color: #374151;
  font-size: 16px;
}

/* Right column (form) */
.consult-right {
  flex: 0 0 520px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

/* Row with input + button */
.consult-form-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Phone input */
.consult-phone {
  flex: 1 1 auto;
  display: block;
  padding: 12px 14px;
  border-radius: 28px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.consult-phone:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.06);
}

/* Submit button */
.consult-btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  background: #0b1220;
  color: #fff;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.consult-btn:hover {
  opacity: 0.95;
}

/* Consent row (checkbox + text) */
.consult-consent {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #374151;
  font-size: 13px;
  line-height: 1.35;
}

/* checkbox custom */
.consent-checkbox {
  --size: 20px;
  width: var(--size);
  height: var(--size);
  min-width: var(--size);
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.consent-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  display: block;
  border-radius: 4px;
}

.consent-checkbox input:checked {
  background: #000;
  border: 1px solid #000;
  position: relative;
}

.consent-checkbox input:checked::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-left: 5px;
    margin-top: 1px;
}

/* Consent text link */
.consent-text a {
  color: #0b1220;
  text-decoration: underline;
}


/* Inline notification */
.consult-message {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  display: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  transform: translateY(-6px);
  box-sizing: border-box;
}

.consult-message.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.consult-message.success {
    color: #00a31d;
    font-weight: 600;
}

.consult-message.error {
    color: #ef0000;
    font-weight: 600;
}



/* Responsive */
@media (max-width: 900px) {
  .consult-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .consult-right {
    align-items: stretch;
    width: 100%;
  }
  .consult-consent {
    justify-content: flex-start;
    text-align: left;
  }
  .consult-left .consult-title {
    font-size: 22px;
  }
  .consult-phone {
    padding: 10px 12px;
  }
  .consult-btn {
    padding: 10px 14px;
  }
  .consult-form-row {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: normal;
    flex-direction: column;
  }
  .consult-left,
  .consult-right {
      flex: auto;
  }
}

/* ---- moved from footer.twig (W3C: <style> not allowed in body) ---- */
.fermx-callback-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#F5CB45;padding:18px 0;transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,.2,1);box-shadow:0 -4px 20px rgba(245,203,69,.35)}
.fermx-callback-bar.is-visible{transform:translateY(0)}
.fermx-callback-bar.is-hidden{transform:translateY(100%)}
.fermx-callback-bar__inner{max-width:900px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.fermx-callback-bar__text{color:#283240;text-align:center}
.fermx-callback-bar__title{font-size:17px;font-weight:700;margin:0 0 2px;line-height:1.3}
.fermx-callback-bar__subtitle{font-size:13px;font-weight:400;opacity:.7;margin:0}
.fermx-callback-bar__form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.fermx-callback-bar__input{width:220px;height:46px;border:1px solid #e5e7eb;border-radius:28px;background:#fff;padding:12px 14px;font-size:15px;color:#283240;outline:none;transition:border-color .2s}
.fermx-callback-bar__input:focus{border-color:#283240}
.fermx-callback-bar__input::placeholder{color:#A1A5A8}
.fermx-callback-bar__btn{height:44px;padding:12px 20px;border:none;border-radius:28px;background:#000;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;white-space:nowrap}
.fermx-callback-bar__btn:hover{background:#222;transform:translateY(-1px)}
.fermx-callback-bar__btn:active{transform:translateY(0)}
.fermx-callback-bar__btn:disabled{opacity:.7;cursor:not-allowed}
.fermx-callback-bar__close{position:absolute;top:8px;right:14px;background:none;border:none;color:#283240;font-size:22px;line-height:1;cursor:pointer;opacity:.7;transition:opacity .2s;padding:4px}
.fermx-callback-bar__close:hover{opacity:1}
.fermx-callback-bar__msg{color:#283240;font-size:14px;font-weight:500;margin-left:6px;display:none}
.fermx-callback-bar__msg.is-error{color:#9B1C1C}
.fermx-callback-bar__msg.is-success{color:#1B6B2A}
@media(max-width:600px){
.fermx-callback-bar{padding:14px 0}
.fermx-callback-bar__inner{flex-direction:column;gap:10px}
.fermx-callback-bar__input{width:100%;max-width:280px}
.fermx-callback-bar__form{width:100%;flex-direction:column}
.fermx-callback-bar__btn{width:100%;max-width:280px}
.fermx-callback-bar__title{font-size:15px}
}

/* ---- Product video: tiles show the play icon as an indicator only ----
   The popup must open on the product page, not from a listing. The click
   handler in product_video.js is delegated on .video-popup-icon, so blocking
   pointer events here stops it from ever firing. Kept in this file (not in the
   vendor "UpStore - Product Video" modification) so a theme update cannot
   silently drop it. The product page uses .video-link and is unaffected. */
.product-video-icons .video-popup-icon,
.product-thumb .video-popup-icon {
	pointer-events: none;
	cursor: default;
}

/* ---- Cookie banner title ----
   Was an <h2>, which put a call-to-action into the heading outline on every
   page. It is a plain span now, so this restores what the h2 gave it: the
   rule from cookies.css (.consent_banner-preview h2) plus the browser
   defaults an h2 carried - bold weight and the bottom margin. Kept here
   rather than in cookies.css, which is untouched third-party. */
.consent_banner-preview .consent_banner-title {
	display: block;
	font-size: 1.5em;
	font-weight: 700;
	color: #0074ad;
	margin-top: 0;
	margin-bottom: 0.83em;
}

/* ---- Category wall block title ----
   The .title-module wrapper is an h2 on the home category wall (see
   fermx_seo_markup.ocmod.xml). The theme already styles .title-module and the
   span inside it, so only the h2 browser defaults need neutralising: its own
   font metrics are irrelevant (the visible text is the span) and its default
   top margin would push the block down. */
h2.title-module {
	margin-top: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* ---- Category tile names ----
   The tile name is an h3 now (see fermx_seo_markup.ocmod.xml). The theme styles
   the link itself via .wall-cat-name a, so the wrapper must stay metrically
   invisible: no default heading margins, and inherit type so the link keeps the
   size and weight the theme gave it. */
.wall-cat-name .wall-cat-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}