/* Desktop only: tuck the tabs up slightly. On phones this upward pull made the
     tab row ride up into the hero/slider above it, so it's scoped out below. */
  @media (min-width: 768px) {
    .route-common-home .module-products .nav-tabs {
      transform: translateY(-7px);
    }
  }

@media (max-width: 767px) {
  /* Tighter module spacing — small POSITIVE top gap so the tab row can never
     overlap the hero/slider above (was -10px, which pulled it up into the hero) */
  .route-common-home .module-products {
    margin-bottom: 10px !important;
    margin-top: 6px !important;
    padding-top: 0 !important;
  }
  .route-common-home .module-products .module-body {
    padding-top: 0 !important;
  }
  .route-common-home .tab-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Compact tabs */
  .route-common-home .nav-tabs {
    padding: 4px 6px 6px;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    border: none !important;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    display: flex !important;
    justify-content: center;
    gap: 5px;
    scrollbar-width: none;
  }
  .route-common-home .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .route-common-home .nav-tabs > li {
    margin: 0 !important;
    float: none !important;
    border: none !important;
  }
  .route-common-home .nav-tabs > li::before,
  .route-common-home .nav-tabs > li::after,
  .route-common-home .nav-tabs > li > a::before,
  .route-common-home .nav-tabs > li > a::after,
  .route-common-home .tab-container::before,
  .route-common-home .tab-container::after {
    display: none !important;
  }
  .route-common-home .nav-tabs > li > a {
    border-bottom: none !important;
  }
  .route-common-home .nav-tabs > li > a {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    white-space: nowrap;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    color: #555 !important;
    background: #fff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  .route-common-home .nav-tabs > li.active > a,
  .route-common-home .nav-tabs > li.active > a:focus,
  .route-common-home .nav-tabs > li > a:hover {
    background: #e63946 !important;
    color: #fff !important;
    border-color: #e63946 !important;
    text-decoration: none !important;
  }
  .route-common-home .nav-tabs > li > a::after,
  .route-common-home .nav-tabs > li > a::before {
    display: none !important;
  }

  /* Remove swiper overflow clipping */
  .route-common-home .swiper-container {
    overflow: visible !important;
  }
  .route-common-home .swiper {
    padding-bottom: 8px;
  }
  .route-common-home .swiper-pagination {
    display: none !important;
  }
  .route-common-home .swiper-buttons {
    display: flex !important;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    padding: 0 2px;
  }
  .route-common-home .swiper-button-prev,
  .route-common-home .swiper-button-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    pointer-events: auto;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .route-common-home .swiper-button-prev::before,
  .route-common-home .swiper-button-next::before {
    font-family: system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #333 !important;
    display: block !important;
    line-height: 1;
  }
  .route-common-home .swiper-button-prev::before {
    content: "\2039" !important;
  }
  .route-common-home .swiper-button-next::before {
    content: "\203A" !important;
  }
  .route-common-home .swiper-button-prev::after,
  .route-common-home .swiper-button-next::after {
    display: none !important;
  }

  /* Compact card for home carousel */
  .route-common-home .swiper-container,
  .route-common-home .swiper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .route-common-home .product-layout {
    padding-left: 4px !important;
    padding-right: 4px !important;
    /* The base card CSS sets content-visibility:auto + contain-intrinsic-size:250px
       as an off-screen perf optimization. In this compact carousel that 250px
       reservation is ~40px taller than the real card, leaving dead space under the
       price. Render these slides normally so each one hugs its own content. */
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
  .route-common-home .product-layout .product-thumb {
    border-radius: 12px !important;
    box-shadow: none !important;
    border: 1px solid #e5e5e5 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    background: #fff !important;
    height: auto !important;
  }
  /* Swiper makes every slide as tall as the TALLEST card (default stretch). With
     varied product photos that left a big empty gap under the price on shorter
     cards. Don't stretch — each card is only as tall as its own content. */
  .route-common-home .module-products .swiper-wrapper {
    align-items: flex-start !important;
  }
  .route-common-home .module-products .product-layout.swiper-slide {
    height: auto !important;
  }
  .route-common-home .module-products,
  .route-common-home .module-products .module-body,
  .route-common-home .module-products .tab-content,
  .route-common-home .module-products .tab-pane,
  .route-common-home .module-products .swiper,
  .route-common-home .module-products .swiper-container,
  .route-common-home .module-products .swiper-wrapper,
  .route-common-home .module-products .swiper-slide,
  .route-common-home .module-products .product-layout,
  .route-common-home .module-products .tab-container,
  .route-common-home .module-products .panel,
  .route-common-home [class*="module-"] {
    background: #fff !important;
    background-color: #fff !important;
  }
  /* Fixed, centered image box: every card's image area is identical in height, so
     cards stay equal-height while their content (image + name + price) is compact.
     Centering the image inside the box handles portrait vs. landscape photos. */
  .route-common-home .product-layout .product-thumb .image,
  .route-common-home .product-layout .product-thumb .image .product-img,
  .route-common-home .product-layout .product-thumb .image .product-img > div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .route-common-home .product-layout .product-thumb .image {
    height: 116px;
    padding-top: 6px;
    border-radius: 10px 10px 0 0;
  }
  .route-common-home .product-layout .product-thumb .image img {
    max-height: 104px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Tighter caption */
  .route-common-home .product-layout .product-thumb .caption {
    padding: 8px 8px 4px !important;
    gap: 4px !important;
  }

  /* Compact name - 2 lines */
  .route-common-home .product-layout .product-thumb .name a {
    font-size: 13px !important;
    font-weight: 600;
    -webkit-line-clamp: 2 !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }

  /* Compact price */
  .route-common-home .product-layout .product-thumb .price {
    margin: 5px 0 0 !important;
    min-height: auto !important;
    gap: 5px !important;
    padding-top: 4px;
  }
  .route-common-home .product-layout .product-thumb .price-new,
  .route-common-home .product-layout .product-thumb .price-normal {
    font-size: 16px !important;
  }
  .route-common-home .product-layout .product-thumb .price-old {
    font-size: 12px !important;
  }

  /* Hide cart button in home carousel - card ends at price */
  .route-common-home .product-layout .buttons-wrapper,
  .route-common-home .product-layout .cart-group-mobile,
  .route-common-home .product-layout .button-group {
    display: none !important;
  }
  .route-common-home .product-layout .product-thumb .caption {
    padding-bottom: 6px !important;
  }

  /* Hide labels and badges in home carousel. The photo-overlay stock badge
     ("1 - 2 седмици", added 2026-07-12) postdates this rule and escaped it —
     only the discount percent (.mobile-discount-badge) should show here. */
  .route-common-home .product-layout .mobile-stock-badges,
  .route-common-home .product-layout .product-labels,
  .route-common-home .product-layout .product-label,
  .route-common-home .product-layout .mobile-stock-badge-photo {
    display: none !important;
  }

  /* Touch-hold on a card triggers the desktop :hover zoom (img scale 1.2);
     while that layer animates it paints OVER the static percent badge, which
     "disappears until the card stays still". Hover effects are meaningless on
     touch — kill them here, and give the badge its own compositing layer. */
  .route-common-home .product-layout .product-thumb:hover,
  .route-common-home .product-layout .product-thumb:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .route-common-home .product-layout .product-thumb:hover .image img,
  .route-common-home .product-layout .product-thumb:active .image img {
    transform: none !important;
  }
  .route-common-home .product-layout .image .mobile-discount-badge {
    transform: translateZ(0);
    will-change: transform;
  }
}


@media (max-width: 767px) {
  /* These "blocks" modules stack under their image on phones. The skin left-
     indents the paragraph while the title and button sit flush left, so the
     section reads lopsided. Center the whole stack for a clean, symmetric look. */
  .module-blocks-291 .block-body, .module-blocks-294 .block-body, .module-blocks-296 .block-body, .module-blocks-295 .block-body,
  .module-blocks-291 .block-title, .module-blocks-294 .block-title, .module-blocks-296 .block-title, .module-blocks-295 .block-title,
  .module-blocks-291 .block-footer, .module-blocks-294 .block-footer, .module-blocks-296 .block-footer, .module-blocks-295 .block-footer {
    text-align: center !important;
  }
  .module-blocks-291 .block-wrapper, .module-blocks-294 .block-wrapper, .module-blocks-296 .block-wrapper, .module-blocks-295 .block-wrapper,
  .module-blocks-291 .block-content, .module-blocks-294 .block-content, .module-blocks-296 .block-content, .module-blocks-295 .block-content,
  .module-blocks-291 .block-content p, .module-blocks-294 .block-content p, .module-blocks-296 .block-content p, .module-blocks-295 .block-content p {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .module-blocks-291 .block-footer .btn, .module-blocks-294 .block-footer .btn, .module-blocks-296 .block-footer .btn, .module-blocks-295 .block-footer .btn {
    float: none !important;
    display: inline-block !important;
  }

  /* Портфолио / Презентации row (top-4): the desktop column paddings
     (45px right on the Портфолио text col, 40px left on Презентации) are not
     reset by the skin's phone width:100% override, so the text blocks render
     with a lopsided side gap. Kill them, and reorder each pair so the title +
     description come FIRST and the swipeable image gallery after — stacked
     galleries before their heading read as context-free images. */
  .grid-row-top-4 .grid-cols {
    display: flex !important;
    flex-direction: column !important;
  }
  .grid-row-top-4 .grid-col {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .grid-row-top-4 .grid-col-top-4-2 { order: 1 !important; } /* Портфолио text */
  .grid-row-top-4 .grid-col-top-4-1 { order: 2 !important; } /* portfolio gallery */
  .grid-row-top-4 .grid-col-top-4-3 { order: 3 !important; } /* Презентации text */
  .grid-row-top-4 .grid-col-top-4-4 { order: 4 !important; } /* presentations gallery */

  /* Проектиране / Сервиз row (top-5): a fixed cover photo sits behind the text.
     background-attachment:fixed is unreliable on mobile and the crop reads as a
     random dark smudge, so drop the image entirely on phones — plain, clean. */
  .grid-row-top-5 {
    background-image: none !important;
    background-attachment: scroll !important;
    background-color: transparent !important;
  }

  /* Новини / Промоции tiles (blocks-300): the desktop 150px padding carries over
     to phones and blows the tiles up so the photo never shows. Reset to a clean
     full-width banner with a sane height and re-assert the images so they load. */
  .module-blocks-300.blocks-grid .module-item {
    padding: 0 !important;
    min-height: 180px !important;
    width: 100% !important;
    margin: 10px 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .module-blocks-300.blocks-grid .module-item.module-item-1 {
    background-image: url('/image/catalog/2good-bg/novini.jpg') !important;
  }
  .module-blocks-300.blocks-grid .module-item.module-item-3 {
    background-image: url('/image/catalog/2good-bg/promotsii.jpg') !important;
  }
}


@media (min-width: 768px) {
  /* kill the old dark parallax strip; also fully reset the row off the old
     2390px scaled design stage (transform + huge stage margins) */
  .grid-row-top-5 {
    background: #fff !important;
    background-image: none !important;
    padding: 10px 0 34px !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 40px auto 10px !important;
    transform: none !important;
  }
  /* two equal columns, cards stretched to equal height.
     The skin positions the OLD overlay boxes with a margin-left:555px on
     .grid-cols — that shoved the new cards off-center; reset it. */
  html .grid-row-top-5 .grid-cols {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .grid-row-top-5 .grid-col { width: 50% !important; }
  .grid-row-top-5 .grid-items,
  .grid-row-top-5 .module-blocks-296,
  .grid-row-top-5 .module-blocks-295,
  .grid-row-top-5 .module-blocks-296 .module-body,
  .grid-row-top-5 .module-blocks-295 .module-body,
  .grid-row-top-5 .module-blocks-296 .module-item,
  .grid-row-top-5 .module-blocks-295 .module-item { height: 100% !important; }
  /* the card: text on white, photo fades in below, runs to the bottom edge.
     The photo lives on a bottom-anchored ::after layer (NOT a full-card
     background) — painting it under the white all the way up left gray
     antialiasing slivers at the rounded top corners. */
  .grid-row-top-5 .module-blocks-296 .module-item,
  .grid-row-top-5 .module-blocks-295 .module-item {
    position: relative;
    padding: 22px 28px 205px !important;   /* bottom 205px = photo area */
    min-height: 405px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff !important;
    box-sizing: border-box;
  }
  .grid-row-top-5 .module-blocks-296 .module-item::after,
  .grid-row-top-5 .module-blocks-295 .module-item::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 240px;                          /* 205px photo + 35px fade-in */
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }
  .grid-row-top-5 .module-blocks-296 .block-title, .grid-row-top-5 .module-blocks-295 .block-title,
  .grid-row-top-5 .module-blocks-296 .block-content, .grid-row-top-5 .module-blocks-295 .block-content {
    position: relative !important;
    z-index: 1;                             /* text above the photo layer; these
                                               are not the footer's containing
                                               block, so its bottom still
                                               resolves against the card */
  }
  .grid-col-top-5-1 .module-item { margin: 0 45px 0 0 !important; }
  .grid-col-top-5-2 .module-item { margin: 0 0 0 45px !important; }
  .grid-row-top-5 .module-blocks-296 .module-item::after {
    background-image: linear-gradient(to bottom, #fff 0, rgba(255,255,255,0) 70px), url('/image/catalog/2good-bg/proektirane-card.jpg');
    background-size: auto, cover;
    background-position: center top, center 65%;
  }
  .grid-row-top-5 .module-blocks-295 .module-item::after {
    background-image: linear-gradient(to bottom, #fff 0, rgba(255,255,255,0) 70px), url('/image/catalog/2good-bg/serviz.jpg');
    background-size: auto, cover;
    background-position: center top, center bottom;
  }
  /* strip the old white overlay boxes; wrappers must stay static so the CTA's
     `bottom` resolves against the CARD, not the text box */
  .grid-row-top-5 .module-blocks-296 .block-body, .grid-row-top-5 .module-blocks-295 .block-body,
  .grid-row-top-5 .module-blocks-296 .block-wrapper, .grid-row-top-5 .module-blocks-295 .block-wrapper,
  .grid-row-top-5 .module-blocks-296 .block-content, .grid-row-top-5 .module-blocks-295 .block-content {
    position: static !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
  }
  .grid-row-top-5 .module-blocks-296 .block-title,
  .grid-row-top-5 .module-blocks-295 .block-title {
    color: #222 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: none !important;
    border: 0 !important;
    background: none !important;
    margin: 0 0 10px !important;
  }
  .grid-row-top-5 .module-blocks-296 .block-title::before, .grid-row-top-5 .module-blocks-295 .block-title::before,
  .grid-row-top-5 .module-blocks-296 .block-title::after, .grid-row-top-5 .module-blocks-295 .block-title::after {
    display: none !important;
    content: none !important;
  }
  .grid-row-top-5 .module-blocks-296 .block-content, .grid-row-top-5 .module-blocks-295 .block-content,
  .grid-row-top-5 .module-blocks-296 .block-content p, .grid-row-top-5 .module-blocks-295 .block-content p {
    color: #3c3c3c !important;
    text-shadow: none !important;
    text-align: center !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 16.5px !important;
    line-height: 1.65 !important;
  }
  .grid-row-top-5 .module-blocks-296 .block-content, .grid-row-top-5 .module-blocks-295 .block-content {
    max-width: 520px !important;
    margin: 0 auto !important;
  }
  /* Портфолио / Презентации blocks (row top-4) render on the 2390px design
     stage scaled to 0.534 — sizes here are DESIGN px (real ≈ x0.534):
     30px ≈ 16px, 46px ≈ 24.5px on screen */
  .desktop-header-active .module-blocks-291 .block-content, .desktop-header-active .module-blocks-294 .block-content,
  .desktop-header-active .module-blocks-291 .block-content p, .desktop-header-active .module-blocks-294 .block-content p {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 27px !important;
    line-height: 1.5 !important;
    color: #333 !important;
  }
  .desktop-header-active .module-blocks-291 .block-title,
  .desktop-header-active .module-blocks-294 .block-title {
    font-size: 42px !important;
    color: #222 !important;
  }
  /* Портфолио desc: the skin bolds this one module's paragraph (600) — match
     the others */
  .desktop-header-active .module-blocks-291 .block-content,
  .desktop-header-active .module-blocks-291 .block-content p {
    font-weight: 400 !important;
  }
  /* …and it was RIGHT-aligned (mirror of Презентации), which read as a big
     left "padding" hole between the gallery and the text. Left-align the whole
     block so it starts right where its column does, like Презентации. */
  .desktop-header-active .module-blocks-291 .block-title,
  .desktop-header-active .module-blocks-291 .block-content,
  .desktop-header-active .module-blocks-291 .block-content p,
  .desktop-header-active .module-blocks-291 .block-footer {
    text-align: left !important;
  }
  .desktop-header-active .module-blocks-291 .block-footer .btn {
    float: none !important;
    display: inline-block !important;
  }
  /* the skin also FLOATS both paragraphs in fixed 350px boxes (the old
     mirrored design) — that was the "padding" hole beside the text.
     Same treatment for Презентации (294) as for Портфолио (291). */
  .desktop-header-active .module-blocks-291 .block-content p,
  .desktop-header-active .module-blocks-291 .block-title,
  .desktop-header-active .module-blocks-291 .block-footer,
  .desktop-header-active .module-blocks-294 .block-content p,
  .desktop-header-active .module-blocks-294 .block-title,
  .desktop-header-active .module-blocks-294 .block-footer,
  .desktop-header-active .module-blocks-291 .block-body,
  .desktop-header-active .module-blocks-294 .block-body {
    float: none !important;
    width: auto !important;
    max-width: none !important;   /* skin caps .block-body at 500px */
  }
  .desktop-header-active .module-blocks-294 .block-body {
    padding-left: 0 !important;
  }
  /* text columns: wider + less side padding so the descs don't sit in a
     narrow strip with dead space on their left */
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-1 { width: 68% !important; }
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-2 { width: 32% !important; padding-right: 20px !important; }
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-3 { width: 37% !important; padding-left: 0 !important; }
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-4 { width: 63% !important; }
  /* center the text blocks vertically beside their photo galleries so the
     empty top/bottom space in the text columns gets used */
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-2 .grid-items,
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-3 .grid-items,
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-2 .module,
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-3 .module,
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-2 .module-body,
  .desktop-header-active .grid-row-top-4 .grid-col-top-4-3 .module-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
  }
  /* CTA centered on the photo band */
  .grid-row-top-5 .module-blocks-296 .block-footer,
  .grid-row-top-5 .module-blocks-295 .block-footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 30px;
    z-index: 2;                             /* above the ::after photo layer */
    text-align: center !important;
    margin: 0 !important;
  }
  .grid-row-top-5 .module-blocks-296 .block-footer .btn,
  .grid-row-top-5 .module-blocks-295 .block-footer .btn {
    float: none !important;
    display: inline-block !important;
  }
}


@media (min-width: 768px) {
  html.iv-row4-v2 .grid-row-top-4 {
    background: transparent !important;
    background-image: none !important;
    /* the legacy -267px pull now lives on the heading instead (see below), so
       the row itself sits in normal flow directly under it */
    margin-top: 0 !important;
  }
  /* Section heading, matching "Популярни категории" above (.fastcats-title:
     Ubuntu 22px/700 #333, centred, 16px below).

     It is injected as a SIBLING before the row, not inside it, for two
     reasons: the row is scaled 0.534 (so type inside it needs design px), and
     the row's -267px pull takes it out of flow — anything laid out before it
     in normal flow would render BELOW the cards. Carrying -273px here
     (-267 legacy, -40 for the heading's own box, +34 for breathing room above)
     puts the heading in the gap above the cards. Because it sits in normal
     flow before the row, changing this number moves the heading AND
     everything below it by the same amount — the 16px heading-to-card gap and
     the 40px card-to-Проектиране gap are unaffected. */
  html.iv-row4-v2 #iv-row4-heading {
    display: block;
    margin: -273px 0 16px !important;
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    color: #333;
    text-align: center;
  }
  html.iv-row4-v2 .grid-row-top-4 .grid-cols {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* left card = Портфолио [photo | text], right card = Презентации [photo | text] */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 { order: 1 !important; }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 { order: 2 !important; }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 { order: 3 !important; }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 { order: 4 !important; }

  html.iv-row4-v2 .grid-row-top-4 .grid-col {
    box-sizing: border-box !important;
    background: #fff !important;
    height: 384px !important;          /* = 205px on screen */
    min-height: 384px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 2px solid #ebebeb !important;
    border-bottom: 2px solid #ebebeb !important;
  }

  /* photo halves */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 {
    width: 19% !important;
    border-left: 2px solid #ebebeb !important;
    border-radius: 26px 0 0 26px !important;   /* = 14px on screen */
    overflow: hidden !important;
  }
  /* text halves */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 {
    /* 19% photo + 29.4% text = 48.4% per card; the remaining 3.2% is the
       gutter, so both cards come out the same width (617px on screen) */
    width: 29.4% !important;
    border-right: 2px solid #ebebeb !important;
    border-radius: 0 26px 26px 0 !important;
    padding: 30px 45px !important;
    overflow: hidden !important;
  }
  /* gutter between the two cards (75 design px = 40px on screen) */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 {
    margin-right: 75px !important;
  }

  /* --- photo halves: fill and crop --------------------------------------- */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .grid-items,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .grid-items,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .grid-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .grid-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .module,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .module-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-wrapper,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide {
    height: 384px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* the skin insets the gallery's <a> by ~5px, which left the white card
     showing through around a square-cornered photo — that was the "rough
     edge" on Презентации. Make the link and its span fill the half exactly. */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .module-item > a,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item > a,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .gallery-image,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .gallery-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: hidden !important;
  }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 img,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 img {
    width: 100% !important;
    height: 384px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* Портфолио: ONE static photo. Swiper keeps writing an inline transform to
     slide the track, but an !important declaration in a stylesheet outranks a
     non-important inline style, so pinning it to none holds it still. Every
     slide but the first is then removed from flow. */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper { overflow: hidden !important; }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-wrapper {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide { display: none !important; }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }
  /* The chosen portfolio photo, painted on the slide's own link so the photo
     stays clickable through to the portfolio page. The .jpg path is used on
     purpose, not the .jpg.webp: the rewrite in .htaccess serves the webp
     (236KB) to browsers that accept it and the jpg (378KB) to those that
     don't. Hard-coding .webp would break the fallback. */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide:first-child > a {
    background-image: url('/image/cache/catalog/Obekti/Flora/473159345_122202334094235895_1801921369125397095_n-1600x800w.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  /* the slide's own <img> is a different project photo — hide it and let the
     background above show, keeping the link box intact */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 img { visibility: hidden !important; }
  /* arrows/pagination are clutter in a 130px-wide photo slot */
  html.iv-row4-v2 .grid-row-top-4 .swiper-button-prev,
  html.iv-row4-v2 .grid-row-top-4 .swiper-button-next,
  html.iv-row4-v2 .grid-row-top-4 .swiper-pages,
  html.iv-row4-v2 .grid-row-top-4 .gallery-title { display: none !important; }
  /* each caption must anchor to ITS OWN slide, otherwise every slide's
     caption resolves against the same ancestor and they stack on top of
     each other at the bottom of the card */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .swiper-slide > a,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item > a {
    position: relative !important;
    overflow: hidden !important;
  }
  /* Captions are one span per slide and the skin renders them outside the
     slide's own box, so absolutely positioning them stacks every project
     name on top of the visible photo. Not worth more markup surgery for a
     130px-wide thumb — hide them; the card's title and CTA carry the
     meaning, and the full list is one click away on the portfolio page. */
  html.iv-row4-v2 .grid-row-top-4 .gallery-image-caption { display: none !important; }
  /* the project name is ALSO painted as a ::before on span.gallery-image (fed
     from the image title), which is the one that actually showed on the photo.
     It named the slide the skin rendered first, not the photo we pin above. */
  html.iv-row4-v2 .grid-row-top-4 .gallery-image::before {
    content: none !important;
    display: none !important;
  }

  /* Презентации is a static 3-up grid, not a carousel — show one, crop it */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-body { display: block !important; }
  /* this one carries padding:10px from the skin (Портфолио's does not) — that
     inset was what left white card showing around a square photo corner */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-1 .module-item {
    width: 100% !important;
    height: 384px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item-2,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-4 .module-item-3 { display: none !important; }

  /* --- text halves ------------------------------------------------------- */
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .grid-items,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .grid-items,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .grid-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .grid-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .module,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .module,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .module-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .module-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .module-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .module-item,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .block-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .block-body,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-2 .block-wrapper,
  html.iv-row4-v2 .grid-row-top-4 .grid-col-top-4-3 .block-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
  }
  html.iv-row4-v2 .module-blocks-291 .block-title,
  html.iv-row4-v2 .module-blocks-294 .block-title {
    font-size: 39px !important;        /* = 21px on screen */
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #222 !important;
    text-align: left !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    width: auto !important;
    float: none !important;
  }
  html.iv-row4-v2 .module-blocks-291 .block-title::before,
  html.iv-row4-v2 .module-blocks-294 .block-title::before,
  html.iv-row4-v2 .module-blocks-291 .block-title::after,
  html.iv-row4-v2 .module-blocks-294 .block-title::after { display: none !important; content: none !important; }
  html.iv-row4-v2 .module-blocks-291 .block-content,
  html.iv-row4-v2 .module-blocks-294 .block-content,
  html.iv-row4-v2 .module-blocks-291 .block-content p,
  html.iv-row4-v2 .module-blocks-294 .block-content p {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 26px !important;        /* = 14px on screen */
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #4a4a4a !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;             /* keep both cards the same height */
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  html.iv-row4-v2 .module-blocks-291 .block-footer,
  html.iv-row4-v2 .module-blocks-294 .block-footer {
    text-align: left !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
    float: none !important;
  }
  html.iv-row4-v2 .module-blocks-291 .block-footer .btn,
  html.iv-row4-v2 .module-blocks-294 .block-footer .btn {
    float: none !important;
    display: inline-block !important;
    font-size: 23px !important;        /* = 12.5px on screen */
    line-height: 1.2 !important;
    padding: 13px 30px !important;
    border-radius: 11px !important;
  }
}



@media (min-width: 768px) {
  .desktop-header-active .grid-row-top-6 .grid-cols {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }
  .desktop-header-active .grid-row-top-6 .grid-col {
    padding: 40px 0 !important;   /* keep the vertical breathing, kill the side inset */
  }
  .desktop-header-active .module-blocks-300 .module-body {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
  }
  .desktop-header-active .module-blocks-300 .module-item {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* the Видео tile holds a real <video> (the others are background photos) —
     stretch it to cover the card exactly like a background-size:cover image */
  .desktop-header-active .module-blocks-300 .module-item video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    margin: 0 !important;
  }
  /* label = full-width header band flush with the tile's top, centered text;
     top corners follow the tile's 14px rounding */
  .desktop-header-active .module-blocks-300 .module-item span {
    position: absolute !important;
    z-index: 1;   /* above the video/photo */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    display: flex !important;           /* centers the text on BOTH axes */
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    border-radius: 14px 14px 0 0 !important;
    line-height: 1 !important;
    transition: height 0.3s ease !important;
  }
  /* restore the skin's hover effect (a:hover span {height:100%}) that the
     fixed 58px height above out-!important-ed — the tiles are a fixed 300px,
     so a px value keeps the growth animatable */
  .desktop-header-active .module-blocks-300 .module-item a:hover span {
    height: 300px !important;
    border-radius: 14px !important;
  }
  /* Промоции tile: the configured photo was ice cream — show the shop's
     actual world instead (professional range with fresh food) */
  .desktop-header-active .module-blocks-300 .module-item.module-item-3 {
    background-image: url('/image/catalog/2good-bg/kitchen-equipment.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}


@media (max-width: 767px) {
  /* The two sections under Портфолио: full-bleed photo that FADES INTO the
     white page (pixel-stop white gradient over the image), then a plain dark
     title + text + button on white below. No boxes, no overlay cards, no
     text-shadow — the photo and the page blend seamlessly. */
  .grid-row-top-5 .grid-col { width: 100% !important; padding: 0 !important; }
  /* Layout: text (title/desc/button) on white at the TOP, then the photo
     fades in FROM the white and runs clean to the card's bottom edge —
     a single fade, where text meets photo. */
  .module-blocks-296 .module-item,
  .module-blocks-295 .module-item {
    position: relative;
    margin: 0 0 18px !important;
    padding: 16px 18px 110px !important; /* bottom 110px = photo area */
    min-height: 0;
    border-radius: 0;
    background-repeat: no-repeat !important;
  }
  .module-blocks-296 .module-item {
    /* portfolio 1.jpg (designed kitchen interior) resized to 1200px; cover +
       center 65% shows the photo's lower band (the designed counter, not the
       ceiling) with no image edge at any phone width.
       Fade starts AT the text's last line (no white gap after the text). */
    background-image: linear-gradient(to bottom, #fff 0, rgba(255,255,255,.91) 30px, rgba(255,255,255,.91) calc(100% - 125px), rgba(255,255,255,0) calc(100% - 70px)), url('/image/catalog/2good-bg/proektirane-card.jpg') !important;
    background-size: auto, cover !important;
    background-position: center top, center 65% !important;
  }
  .module-blocks-295 .module-item {
    background-image: linear-gradient(to bottom, #fff 0, rgba(255,255,255,.91) 30px, rgba(255,255,255,.91) calc(100% - 125px), rgba(255,255,255,0) calc(100% - 70px)), url('/image/catalog/2good-bg/serviz.jpg') !important;
    background-size: auto, cover !important;
    background-position: center top, center bottom !important;
  }
  /* The CTA sits ON the photo, at the bottom center of the card — just above
     the picture's bottom edge. The inner block wrappers must not establish a
     containing block, or `bottom` resolves against the TEXT box instead of
     the card (that put the button right under the text). */
  .module-blocks-296 .block-body, .module-blocks-295 .block-body,
  .module-blocks-296 .block-wrapper, .module-blocks-295 .block-wrapper,
  .module-blocks-296 .block-content, .module-blocks-295 .block-content {
    position: static !important;
  }
  .module-blocks-296 .block-footer,
  .module-blocks-295 .block-footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 28px; /* centered in the clearly-visible photo band */
    text-align: center !important;
    margin: 0 !important;
  }
  /* no white boxes on top of the photo: strip every inner container */
  .module-blocks-296 .block-body, .module-blocks-295 .block-body,
  .module-blocks-296 .block-wrapper, .module-blocks-295 .block-wrapper,
  .module-blocks-296 .block-content, .module-blocks-295 .block-content {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* plain title: no shadow, no decorative bar/underline */
  .module-blocks-296 .block-title, .module-blocks-295 .block-title {
    color: #222 !important;
    font-size: 21px !important;
    text-shadow: none !important;
    border: 0 !important;
    background: none !important;
    margin: 0 0 8px !important;
  }
  .module-blocks-296 .block-title::before, .module-blocks-295 .block-title::before,
  .module-blocks-296 .block-title::after, .module-blocks-295 .block-title::after {
    display: none !important;
    content: none !important;
  }
  .module-blocks-296 .block-content, .module-blocks-295 .block-content,
  .module-blocks-296 .block-content p, .module-blocks-295 .block-content p {
    color: #444 !important;
    text-shadow: none !important;
  }
  .grid-row-top-5 { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 10px !important; }

  /* Quality stickers row (info_blocks under Новини/Промоции): off on phones */
  .grid-row-top-7 { display: none !important; }

  /* Новини/Промоции tiles replaced by the latest-post embed (#iv-news-embed) */
  .grid-row-top-6 { display: none !important; }
  #iv-news-embed {
    clear: both;           /* the grid cols above are floated — don't overlap them */
    margin-top: 30px;
    padding: 6px 12px 18px;
    position: relative;
  }
  #iv-news-embed .iv-news-title {
    text-align: center; font-size: 21px; font-weight: 600; color: #222;
    margin: 0 0 12px;
  }
  /* photo + text share ONE card so they read as a single component */
  #iv-news-embed .iv-news-card {
    background: #fff; border: 1px solid #e5e5e5; border-radius: 14px;
    overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  }
  #iv-news-embed .iv-news-photo { display: block; position: relative; }
  #iv-news-embed .iv-news-photo img {
    width: 100%; height: auto; display: block; border-radius: 0;
  }
  #iv-news-embed .iv-news-date {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,.93); color: #222;
    font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 6px 11px; border-radius: 14px;
  }
  /* text flows full-width; the arrow floats ON TOP of it, pinned to the
     body's bottom-right corner (overlap is fine by design) */
  #iv-news-embed .iv-news-body {
    padding: 12px 15px 15px;
    position: relative;
  }
  #iv-news-embed .iv-news-desc {
    font-size: 15px; line-height: 1.65; color: #444; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #iv-news-embed .iv-news-arrow {
    position: absolute; right: 12px; bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%; background: #de202a; color: #fff !important;
    font-size: 20px; line-height: 1; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }

  /* About block (module-blocks-362): same text, readable formatting —
     rounded photo, centered heading, airy paragraphs */
  .module-blocks-362 .module-item { padding: 6px 12px 16px !important; }
  .module-blocks-362 .block-header img.block-image {
    width: 100%; height: auto; border-radius: 12px; display: block;
  }
  .module-blocks-362 .block-content h1,
  .module-blocks-362 .block-content h2 {
    font-size: 21px !important; font-weight: 600 !important; color: #222 !important;
    line-height: 1.35 !important; text-align: center !important;
    margin: 16px 0 12px !important; border: 0 !important;
  }
  .module-blocks-362 .block-content p {
    font-size: 16px !important; line-height: 1.65 !important; color: #444 !important;
    margin: 0 0 13px !important; text-align: left !important;
  }

  /* Портфолио: one-line auto-scrolling strip of project photos under the
     Проектиране card (replaces the old gallery + text + button section).
     Edges fade into the white page; each photo still links to its project. */
  #iv-pf-wrap { width: 100%; clear: both; padding: 4px 0 16px; }
  #iv-pf-wrap .iv-pf-title {
    text-align: center; font-size: 21px; font-weight: 600; color: #222;
    margin: 6px 0 12px;
  }
  .iv-pf-strip { position: relative; display: block; overflow: hidden; }
  .iv-pf-strip::before, .iv-pf-strip::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 42px;
    z-index: 2; pointer-events: none;
  }
  .iv-pf-strip::before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
  .iv-pf-strip::after { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
  .iv-pf-track { display: flex; width: max-content; will-change: transform; animation: iv-pf-scroll 40s linear infinite; animation-play-state: paused; }
  .iv-pf-track.iv-pf-go { animation-play-state: running; }
  .iv-pf-track a { display: block; margin-right: 10px; flex: none; }
  .iv-pf-track img {
    height: 110px; width: auto; display: block; border-radius: 10px;
  }
  @keyframes iv-pf-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .iv-pf-track { animation: none; }
    .iv-pf-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }

}
/* inquiry modal — global: the PC card buttons open it too (2026-07-13) */
  /* inquiry modal */
  #iv-inq-overlay {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
  }
  #iv-inq-modal {
    background: #fff; border-radius: 12px;
    width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
    padding: 20px 18px; position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
  }
  #iv-inq-modal h4 { margin: 0 30px 4px 0; font-size: 19px; }
  #iv-inq-modal .iv-inq-sub { font-size: 12.5px; color: #777; margin: 0 0 12px; }
  #iv-inq-close {
    position: absolute; top: 8px; right: 8px; border: 0; background: none;
    font-size: 26px; line-height: 1; padding: 6px 10px; color: #999;
  }
  #iv-inq-modal label.iv-inq-l { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
  #iv-inq-modal input[type=text], #iv-inq-modal input[type=tel],
  #iv-inq-modal input[type=email], #iv-inq-modal textarea {
    width: 100%; border: 1px solid #ddd; border-radius: 8px;
    padding: 10px 12px; font-size: 16px; /* 16px stops iOS zoom-on-focus */
  }
  #iv-inq-modal textarea { min-height: 72px; resize: vertical; }
  .iv-inq-checks { display: flex; flex-wrap: wrap; gap: 8px; }
  .iv-inq-checks label {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #ddd; border-radius: 20px; padding: 7px 12px;
    font-size: 13.5px; font-weight: 400; margin: 0;
  }
  .iv-inq-checks input { margin: 0; }
  .iv-inq-checks label.iv-on { border-color: #d9534f; background: #fdf0ef; }
  #iv-inq-send {
    width: 100%; margin-top: 14px; border: 0; border-radius: 8px;
    padding: 13px; font-size: 16px; font-weight: 600;
    background: #d9534f; color: #fff;
  }
  #iv-inq-send[disabled] { opacity: .6; }
  #iv-inq-msg { margin-top: 10px; font-size: 14px; display: none; }
  #iv-inq-msg.err { color: #c0392b; display: block; }
  #iv-inq-msg.ok { color: #1e8449; display: block; font-weight: 600; }
  #iv-inq-hp { position: absolute; left: -5000px; top: -5000px; }


  .home-fastcats { display: none; margin: 10px 0 30px; position: relative; z-index: 1; }
  .home-fastcats.fastcats-ready { display: block; }
  .fastcats-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    text-align: center;
    transform: translateY(-5px);
    margin: 0 0 16px;
  }
  .fastcats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .fastcats-promo { display: none; } /* phone-only, see media block below */
  .fastcat {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    aspect-ratio: 1.5 / 1;
    background: #f8f8f8;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .fastcat:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); }
  .fastcat img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .fastcat:hover img { transform: scale(1.06); }
  .fastcat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,15,15,0.66) 0%, rgba(15,15,15,0.25) 38%, rgba(15,15,15,0) 62%);
  }
  .fastcat-name {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 11px;
    z-index: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .fastcat-name em { font-style: normal; font-size: 18px; line-height: 1; transition: transform 0.25s ease; }
  .fastcat:hover .fastcat-name em { transform: translateX(4px); }
  @media (max-width: 767px) {
    /* top: pull up over the carousel module's empty padding stack (50px measured) to ~20px;
       bottom: must swallow the next grid row's -40px pull AND leave ~35px of visible
       gap to the portfolio section (the removed icon grid used to absorb it) */
    .home-fastcats { margin: -30px 10px 16px; } /* was 75px — Сервиз now follows directly */

    /* Промоции banner under the category tiles (phone only) */
    .fastcats-promo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding: 14px 14px 14px 16px;
      border-radius: 14px;
      background: linear-gradient(115deg, #fdeaea 0%, #fbe3e3 100%);
      border: 1px solid #f3d3d3;
      text-decoration: none !important;
      position: relative;
      overflow: hidden;
    }
    /* white swoosh with an S-curved edge (as in the reference banner):
       an SVG wave stretched across the card, white on the right */
    .fastcats-promo::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M61 0 C 64 9, 59 17, 59 25 C 60 31, 55.5 36, 55 40 L 100 40 L 100 0 Z' fill='%23ffffff' fill-opacity='0.45'/%3E%3Cpath d='M66 0 C 69 9, 64 17, 64 25 C 65 31, 60.5 36, 60 40 L 100 40 L 100 0 Z' fill='%23ffffff' fill-opacity='0.95'/%3E%3C/svg%3E");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .fastcats-promo .fcp-left,
    .fastcats-promo .fcp-right {
      position: relative;
      z-index: 1;
    }
    .fastcats-promo .fcp-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center; /* no badge row above — keep the pair centered */
      min-width: 0;
    }
    .fastcats-promo .fcp-titlerow {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px; /* keep the pill clear of the subtext */
    }
    .fastcats-promo .fcp-badge {
      background: #de202a;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      padding: 3px 6px 4px; /* smaller red area, same text size */
      border-radius: 7px;
      transform: translateY(2px); /* optical alignment with the title */
    }
    .fastcats-promo .fcp-title {
      font-size: 18.5px;
      font-weight: 700;
      color: #2b2b2b;
      line-height: 1.2;
    }
    .fastcats-promo .fcp-sub {
      font-size: 12.5px;
      color: #6b6b6b;
      margin-top: 3px;
      line-height: 1.35;
    }
    .fastcats-promo .fcp-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: none;
      text-align: center;
    }
    .fastcats-promo .fcp-ctawrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .fastcats-promo .fcp-cta {
      font-size: 14px;
      color: #de202a;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
    }
    .fastcats-promo .fcp-right em {
      font-style: normal;
      font-size: 26px;
      line-height: 1;
      color: #de202a;
      margin-top: -2px;
    }
    .fastcats-title {
      font-size: 18px;
      /* equal air above (to the carousel) and below (to the tiles) */
      transform: none;
      margin: 12px 0;
    }
    .fastcats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fastcat { aspect-ratio: 1.4 / 1; }
    .fastcat-name { font-size: 13px; left: 10px; right: 10px; bottom: 8px; }
  }


/* 2026-08-02 perf (phone LCP): the hero Master Slider stays visibility:hidden
   until its JS initializes — on throttled phones the banner (the page's LCP)
   painted past 12s. Paint the FIRST banner as the module's own background so
   it shows the moment CSS applies; the slider renders on top once initialized
   (same image, same 3:2 box → pixel-identical takeover, no layout shift, no
   interference with Master Slider's height measurement). Journal3 natively
   supports a module background (the inline background-image:url('') on this
   div), we just fill it. .htaccess serves the ~85KB webp sibling.
   ⚠ MAINTENANCE: if the first hero banner changes, update this URL. */
html.phone .module-master_slider-26 {
  background-image: url('https://ideaverde.bg/image/cache/catalog/Fastupload-produkti/BannerRobotCoupe-1200x800.png') !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Additionally reveal the first slide's real <img> pre-init using VISIBILITY
   only — visibility never affects layout, so Master Slider's own height
   measurement at init time is untouched (a display:none/absolute variant of
   this broke it). Same node keeps painting after init → the early paint stays
   the LCP. :has() guard self-disables when the slider builds its DOM. */
html.phone .grid-row-top-1 .master-slider:not(:has(.ms-container)) { visibility: visible; }
html.phone .grid-row-top-1 .master-slider:not(:has(.ms-container)) > .ms-slide { visibility: hidden; }
html.phone .grid-row-top-1 .master-slider:not(:has(.ms-container)) > .ms-slide:first-child { visibility: visible; }