html.route-product-product.footer-reveal body {
    padding-bottom: 0 !important;
  }
  .product-back-link {
    padding: 4px 0 0;
    margin: 0;
  }
  .has-back-link #product-product {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .has-back-link .page-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .has-back-link #content {
    padding-top: 0 !important;
  }
  .has-back-link .content-top,
  .has-back-link #product-product > .row {
    margin-top: 0 !important;
  }
  .product-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
  }
  .product-back-link a:hover {
    color: #e74c3c;
  }
  @media (max-width: 767px) {
    /* Anchor the back-link: full-bleed light strip attached to the header
       (margin calc bleeds over any container side padding) */
    .product-back-link {
      margin: 0 calc(50% - 50vw) !important;
      padding: 9px 15px !important;
      background: #f8f8f8;
      border-bottom: 1px solid #e8e8e8;
    }
    /* Hide the default sticky button bar on mobile */
    .button-group-page {
      display: none !important;
    }
    /* Show inline mobile cart row below price */
    .mobile-price-cart {
      display: flex !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* Center price and TBI button */
    .product-price-group {
      text-align: center !important;
    }
    .product-price-group .price-wrapper {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
    [id^="tbibank_button_container"] {
      display: flex !important;
      justify-content: center !important;
    }
    /* Mobile product gallery — match desktop: big main image on top, then ALL
       thumbnails in ONE horizontal row below it (scroll sideways if there are
       many), instead of the tall 4-per-row grid. */
    /* THE "3 DOTS" under the image are the MAIN image's swipe pagination —
       hide them so the thumbnail pictures are the navigation, like on desktop. */
    .product-image .main-image .swiper-pagination,
    .product-image .swiper.main-image .swiper-pagination {
      display: none !important;
    }
    /* Journal3's own thumbnail strip is suppressed on mobile and won't reliably
       come back via CSS, so we BUILD OUR OWN strip in JS (#mobile-thumb-strip,
       see the script lower in this file) and hide the original to avoid dupes. */
    .product-image .additional-images {
      display: none !important;
    }
    #mobile-thumb-strip {
      order: 5;                              /* same as main-image (set exactly in JS too) so it sits just below it */
      width: 100% !important;
      margin: 10px 0 0 !important;
      padding: 4px 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }
    #mobile-thumb-strip .mts-track {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      width: -webkit-max-content !important;
      width: max-content !important;
      margin: 0 auto !important;            /* centers when few, scrolls when many */
      padding: 0 10px !important;
    }
    #mobile-thumb-strip .mts-thumb {
      flex: 0 0 auto !important;
      width: 62px !important;
      height: 62px !important;
      border: 2px solid #e0e0e0 !important;
      border-radius: 6px !important;
      background: #fff !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
      padding: 0 !important;
    }
    #mobile-thumb-strip .mts-thumb.active {
      border-color: #e63946 !important;
    }
    #mobile-thumb-strip .mts-thumb img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      display: block !important;
    }
    /* "Свързани категории" — related-category cards shown under Спецификации */
    #related-cats {
      display: block;
      margin: 22px 0 8px;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    #related-cats .rc-title {
      font-size: 18px; font-weight: 600; color: #3f4a52;
      margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e3e6e9;
    }
    #related-cats .rc-grid {
      display: flex; flex-wrap: nowrap; gap: 12px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      padding-bottom: 6px; /* no scroll-snap: iOS Safari pan-hijack bug */
    }
    #related-cats .rc-card {
      flex: 0 0 43%; max-width: 43%;
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      border: 1px solid #e6e9ec; border-radius: 10px; background: #fff;
      padding: 10px;
    }
    #related-cats .rc-card:active { background: #fafbfc; }
    #related-cats .rc-img {
      height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
    }
    #related-cats .rc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
    #related-cats .rc-name {
      color: #2f3a42; font-weight: 600; font-size: 13.5px; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #related-cats .rc-count { color: #8a929a; font-size: 12.5px; margin-top: 5px; }
  }
  /* Desktop: related-cats becomes a 4-card grid under Описание/Спецификации */
  @media (min-width: 768px) {
    #related-cats {
      display: block;
      margin: 28px 0 8px;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    #related-cats .rc-title {
      font-size: 20px; font-weight: 600; color: #3f4a52;
      margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e3e6e9;
    }
    #related-cats .rc-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    }
    #related-cats .rc-card {
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      border: 1px solid #e6e9ec; border-radius: 10px; background: #fff;
      padding: 12px; transition: box-shadow .15s ease;
    }
    #related-cats .rc-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
    #related-cats .rc-img {
      height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
    }
    #related-cats .rc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
    #related-cats .rc-name { color: #2f3a42; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
    #related-cats .rc-count { color: #8a929a; font-size: 13px; margin-top: 5px; }
  }
  /* "Често купувани заедно" — replaces the old Journal3 "Клиентите също купиха"
     module (id 253, admin-curated relateds), fed by the precomputed co-purchase
     tables via product/oftenbought. Phone: swipe strip; PC: 4-col grid. */
  html.route-product-product .module-products-253 { display: none !important; }
  #often-bought {
    display: block;
    margin: 22px 0 8px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
  #often-bought .ob-title {
    font-size: 18px; font-weight: 600; color: #3f4a52;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e3e6e9;
  }
  #often-bought .ob-grid {
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; /* no scroll-snap: iOS Safari pan-hijack bug */
  }
  #often-bought .ob-card {
    flex: 0 0 43%; max-width: 43%;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    border: 1px solid #e6e9ec; border-radius: 10px; background: #fff;
    padding: 10px;
  }
  #often-bought .ob-card:active { background: #fafbfc; }
  #often-bought .ob-img {
    height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
  }
  #often-bought .ob-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  #often-bought .ob-name {
    color: #2f3a42; font-weight: 600; font-size: 13.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #often-bought .ob-price { margin-top: auto; padding-top: 7px; }
  #often-bought .ob-new { color: #1a1a1a; font-weight: 700; font-size: 15px; }
  #often-bought .ob-old {
    color: #90959c; font-size: 12.5px; text-decoration: line-through; margin-left: 6px;
  }
  @media (min-width: 768px) {
    #often-bought { margin: 28px 0 8px; }
    #often-bought .ob-title { font-size: 20px; margin: 0 0 14px; }
    #often-bought .ob-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      overflow: visible; padding-bottom: 0;
    }
    #often-bought .ob-card { flex: none; max-width: none; padding: 12px; transition: box-shadow .15s ease; }
    #often-bought .ob-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
    #often-bought .ob-img { height: 150px; margin-bottom: 10px; }
    #often-bought .ob-name { font-size: 14.5px; }
    #often-bought .ob-new { font-size: 16px; }
  }
  /* Mobile cart below price — hidden on desktop */
  .mobile-price-cart {
    display: none;
    align-items: stretch;
    margin-top: 12px;
    width: 100%;
    max-width: 360px;
  }
  .mobile-price-cart .mobile-pqty {
    width: 48px;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    border: 1px solid #bbb;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    background: #fff;
    color: #333;
  }
  .mobile-price-cart .mobile-pqty::-webkit-inner-spin-button,
  .mobile-price-cart .mobile-pqty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .mobile-price-cart .mobile-padd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 50px;          /* same as the TBI button */
    padding: 0 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    background: #1f9e4a !important;
    border: 1px solid #17813b;   /* same outline as the desktop button */
    border-radius: 0 4px 4px 0;
    text-transform: none;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-decoration: none !important;
    outline: none;
    line-height: 1;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }
  .mobile-price-cart .mobile-padd:active {
    background: #146b31 !important;
  }
  /* Mobile: bold product title */
  html.mobile-header-active .page-title,
  html.mobile-header-active .page-title > span {
    font-weight: 700 !important;
  }
  /* Mobile: the schema.org microdata spans before the title render an empty
     ~27px line (metadata only, hiding doesn't affect crawlers) — hide them and
     balance the title margins so it sits centered between back-link and image */
  html.mobile-header-active .site-wrapper > span[itemtype] {
    display: none;
  }
  html.mobile-header-active .page-title {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  /* Desktop: the stats list (Марка/Модел/Тегло…) sets the row height, so the
     prices were stuck at the top against the title line — center them in the
     empty space between the line and the buy buttons */
  @media (min-width: 768px) {
    .product-info .product-price-group .price-wrapper {
      align-self: center;
    }
  }
  /* Journal3's generated skin CSS hides the entire price block for zero-price
     products: `.has-zero-price .product-price-group{display:none!important}`.
     That's why this box (and the old "Цена при запитване" before it) never
     showed. Re-show it — higher specificity + !important + later source order
     beats the skin rule. Restore flex (the group's natural display) and
     pointer-events (the group is pointer-events:none, so the inquiry link
     wouldn't be clickable otherwise). */
  .product-info.has-zero-price .product-price-group {
    display: flex !important;
  }
  /* ...and the skin ALSO hides the wrapper inside the group
     (`.has-zero-price .product-price-group .price-wrapper{display:none}`) —
     that second rule is what kept the box invisible even after the re-show above */
  .product-info.has-zero-price .product-price-group .price-wrapper {
    display: block !important;
  }
  /* Price-on-request card (zero-price products) — "reveal price" style box.
     NB: intentionally NOT using the .product-price class so the journal3/price
     AJAX (which rewrites .product-price-group .product-price with "0.00 €"
     ~0.3s after load) can't clobber this box. */
  .price-request-box {
    display: inline-block;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    padding: 12px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    pointer-events: auto;
  }
  .price-request-text {
    font-size: 14px;
    color: #555;
    line-height: 1.35;
    margin-bottom: 4px;
  }
  .price-request-link {
    color: #de202a;
    font-weight: 700;
    text-decoration: underline;
  }
  .price-request-link:hover {
    color: #b71c24;
    text-decoration: underline;
  }
  .price-request-amount {
    font-size: 26px;
    font-weight: 700;
    color: #de202a;
    letter-spacing: 0.5px;
    line-height: 1.1;
    -webkit-user-select: none;
    user-select: none;
  }
  /* masked digits drawn as circles — the site font renders text bullets too small */
  .price-request-amount .pr-dot,
  .price-request-amount .pr-dec {
    display: inline-block;
    background: #de202a;
    border-radius: 50%;
    vertical-align: middle;
  }
  .price-request-amount .pr-dot {
    width: 10px;
    height: 10px;
    margin: 0 2.5px;
  }
  .price-request-amount .pr-dec {
    width: 5px;
    height: 5px;
    margin: 0 3px 0 4px;
    vertical-align: baseline;
  }
  /* Inline offer-request form revealed on click */
  .price-request-form {
    margin-top: 10px;
    text-align: left;
  }
  .price-request-form input {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
  }
  .price-request-form input:focus {
    border-color: #de202a;
    outline: none;
  }
  .price-request-send {
    display: block;
    width: 100%;
    border: none;
    border-radius: 4px;
    background: #de202a;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
  }
  .price-request-send:hover {
    background: #b71c24;
  }
  .price-request-send[disabled] {
    opacity: 0.6;
    cursor: default;
  }
  .price-request-msg {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
  }
  .price-request-msg .pr-error {
    color: #c0392b;
  }
  .price-request-msg .pr-success {
    color: #1e7e34;
    font-weight: 700;
  }
  .price-request-msg .pr-phone-fallback {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
  }
  .price-request-msg .pr-phone-fallback a {
    color: #de202a;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
  }
  .price-request-msg .pr-phone-fallback small {
    color: #777;
  }
  /* The box is the page's primary module now that the form is open by default —
     let it take the card width instead of shrink-wrapping */
  .price-request-box {
    display: block;
  }
  .price-request-form {
    max-width: 340px;
  }
  .price-request-send {
    padding: 13px 16px;
    font-size: 15px;
  }
  /* "Запитване за цена" on price-on-request pages: same green as the normal
     Купи so the page has exactly one primary action (it opens the offer popup) */
  html:not(.mobile-header-active) .product-info.has-zero-price .buttons-wrapper #button-cart,
  .product-info.has-zero-price #button-cart.pr-demoted-buy {
    background: #1f9e4a !important;
    border: 1px solid #17813b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  html:not(.mobile-header-active) .product-info.has-zero-price .buttons-wrapper #button-cart:hover,
  .product-info.has-zero-price #button-cart.pr-demoted-buy:hover {
    background: #17813b !important;
  }
  /* Desktop buy row: single flat "Добави в количката" button (qty stepper stays),
     КУПИ СЕГА and the ? button are hidden */
  html:not(.mobile-header-active) .product-info .buttons-wrapper .extra-group {
    display: none !important;
  }
  /* Green CTA: every other accent on the page is red/orange, so the ONE
     button that adds to cart gets the one green. Yellow-vs-green A/B test
     (Aug–Sep 2026, cart-sidebar.js + tracking dashboard) ended with green;
     the test code is gone, this is the permanent colour. */
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart {
    background: #1f9e4a !important;
    border: 1px solid #17813b !important;   /* darker green outline so the button has an edge */
    border-radius: 4px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    flex: 0 1 340px !important;   /* fits beside the stepper in the narrower card */
    max-width: 340px !important;
    white-space: nowrap !important;
    font-size: 15px !important;
  }
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart:hover {
    background: #17813b !important;
  }
  /* Desktop breadcrumb strip: keep the white of the header going through the
     back-link row, so the grey page starts BELOW the breadcrumb (box-shadow +
     clip-path paints full-bleed white without causing horizontal overflow) */
  html.route-product-product:not(.mobile-header-active) .product-back-link {
    padding: 0 0 12px;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
  }
  /* Desktop: same metadata-only schema.org spans as on mobile — they render an
     empty ~27px line between the back-link and the title, hide them */
  html.route-product-product:not(.mobile-header-active) .site-wrapper > span[itemtype] {
    display: none;
  }
  /* Desktop title: no theme underline (grey full-width border + orange accent
     bar), compact — small balanced margins under the white breadcrumb strip */
  html.route-product-product:not(.mobile-header-active) .page-title {
    border-bottom: none !important;
    margin: 14px 0 16px !important;
    padding-bottom: 0 !important;
  }
  html.route-product-product:not(.mobile-header-active) .page-title::after {
    display: none !important;
  }
  /* Desktop product page: grey page, two separate white cards — photo card on
     the left, info card on the right holding stats (Марка/Модел/…) on top with
     price + buy buttons below them. Soft grey — near-white, just enough to
     separate the white cards without harsh contrast */
  html.route-product-product:not(.mobile-header-active) body {
    background: #f6f7f8 !important;
  }
  html:not(.mobile-header-active) .product-left {
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 16px;
  }
  html:not(.mobile-header-active) .product-info {
    gap: 30px;   /* same gutter as the Описание/Спецификации cards below */
  }
  html:not(.mobile-header-active) .product-left {
    flex: 0 0 auto;
  }
  html:not(.mobile-header-active) .product-right {
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 20px 24px;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  html:not(.mobile-header-active) .product_extra-242,
  html:not(.mobile-header-active) .product_extra-243 {
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 20px;
  }
  @media (min-width: 1300px) {
    /* Gallery: thumbnails as a vertical column right of the main image
       (widens the photo card, slims the info card) */
    html:not(.mobile-header-active) .product-info .product-left {
      flex: 0 0 738px !important;   /* same width as the Описание card below */
      width: 738px !important;
      max-width: none !important;
    }
    html:not(.mobile-header-active) .product-left .product-image {
      display: flex !important;
      flex-direction: row !important;
      gap: 12px !important;
      align-items: center !important;
      position: relative !important;
      height: 470px !important;
      overflow: hidden !important;
      border-radius: 8px !important;
    }
    html:not(.mobile-header-active) .product-left .product-image .main-image {
      order: 1 !important;
      flex: 0 0 460px !important;
      width: 460px !important;
      min-width: 0 !important;
      margin: 0 auto !important;
      transition: transform .25s ease !important;
    }
    html:not(.mobile-header-active) .product-left .product-image .additional-images {
      order: 2 !important;
      flex: 0 0 92px !important;
      width: 92px !important;
      height: auto !important;
      max-height: 470px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      margin: 0 !important;
      position: relative !important;
      z-index: 4 !important;
      background: #fff !important;
      /* 3px, not 8px: the strip is 92px with a ~10px scrollbar, so 8px + the
         76px thumbs ran 2px under the scrollbar and clipped the active border */
      padding-left: 3px !important;
      align-self: flex-start !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-container {
      height: auto !important;
      overflow: visible !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-wrapper {
      display: flex !important;
      flex-direction: column !important;
      transform: none !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-slide {
      flex: 0 0 auto !important;
      width: 76px !important;
      height: auto !important;
      margin: 0 0 8px 0 !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-buttons,
    html:not(.mobile-header-active) .product-left .additional-images .swiper-pagination {
      display: none !important;
    }
    /* "Работи със:" — related products as mini cards below the photo, inside
       the photo card (built by JS from the bottom Свързани продукти module,
       which gets hidden on desktop) */
    html:not(.mobile-header-active) .product-info {
      align-items: flex-start !important;
    }
    #works-with {
      margin-top: 14px;
      border-top: 1px solid #eef0f2;
      padding-top: 12px;
    }
    #works-with .ww-title {
      font-weight: 700;
      font-size: 13px;
      color: #333;
      margin-bottom: 8px;
    }
    #works-with .ww-grid {
      display: flex;
      gap: 10px;
    }
    #works-with .ww-card {
      flex: 1 1 0;
      min-width: 0;
      max-width: 205px;
      display: flex;
      gap: 8px;
      align-items: center;
      border: 1px solid #e3e5e8;
      border-radius: 6px;
      padding: 6px 8px;
      text-decoration: none !important;
      background: #fff;
    }
    #works-with .ww-card:hover {
      border-color: #b6bac1;
    }
    #works-with .ww-img {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      object-fit: contain;
    }
    #works-with .ww-name {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 11.5px;
      line-height: 1.3;
      color: #333;
    }
    #works-with .ww-card:hover .ww-name {
      color: #de202a;
    }
    #works-with .ww-price {
      display: block;
      color: #de202a;
      font-weight: 700;
      font-size: 12px;
      margin-top: 3px;
    }
    /* No frame around the main photo; stickers (НАЛИЧНО, -7%…) live at the
       CARD's top-left corner as a row — availability first (JS sets order:-1) */
    html:not(.mobile-header-active) .product-left {
      position: relative !important;
    }
    html:not(.mobile-header-active) .product-left .main-image {
      border: none !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }
    /* Center each photo in the (fixed-height) main viewport so shorter images
       get equal space above and below instead of extra bottom padding */
    html:not(.mobile-header-active) .product-left .main-image .swiper-slide {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    /* Thumbs: ONE bold single-color outline per state (no inner rings — the
       theme's own 1px grey img border is removed) */
    html:not(.mobile-header-active) .product-left .additional-images .swiper-slide {
      border: 2px solid #e3e5e8 !important;
      border-radius: 8px !important;
      background: #fff !important;
      padding: 2px !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
      outline: none !important;
      box-shadow: none !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-slide img {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      border-radius: 5px !important;
      display: block !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-slide:hover {
      border-color: #b6bac1 !important;
    }
    html:not(.mobile-header-active) .product-left .additional-images .swiper-slide.swiper-slide-active {
      border-color: #de202a !important;
    }
    html:not(.mobile-header-active) .product-left .product-labels {
      position: absolute !important;
      top: 10px !important;
      left: 10px !important;
      overflow: visible !important;
      right: auto !important;
      bottom: auto !important;
      width: auto !important;
      height: auto !important;
      display: flex !important;
      flex-direction: row !important;
      gap: 6px !important;
      z-index: 5 !important;
      pointer-events: none !important;
    }
    html:not(.mobile-header-active) .product-left .product-labels .product-label {
      position: static !important;
      transform: none !important;
      margin: 0 !important;
    }
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
    }
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details .product-price-group {
      display: contents !important;
    }
    /* Buttons span the card content width (same right edge as the other
       components) instead of the old 340px cap */
    html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart {
      flex: 1 1 auto !important;
      max-width: none !important;
    }
    /* #product in the selector beats the TBI extension's own
       `#tbibank_button_bodyN { max-width: 340px !important }` on specificity */
    html:not(.mobile-header-active) #product [id^="tbibank_button_body"] {
      width: 100% !important;
      max-width: none !important;
    }
    /* Desktop card order: price (+ delivery promise inside the wrapper) first,
       then the buy buttons, specs box last */
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details .price-wrapper {
      order: 1;
      align-self: flex-start !important;
      margin-bottom: 16px;
    }
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details .button-group-page,
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details > .buttons-wrapper {
      order: 2;
    }
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details [id^="tbibank_button_container"] {
      order: 3;
    }
    html:not(.mobile-header-active) .product-info:not(.has-zero-price) .product-details .product-stats {
      order: 4;
      background: #fafbfc;
      border: 1px solid #e3e5e8;
      border-radius: 8px;
      padding: 14px 18px;
      margin: 18px 0 0 !important;
    }
    /* Zero-price (Поискай оферта) pages: same stacked layout — stats box on
       top, offer box below. Without this the stats stay side-by-side in the
       narrow card and the values overflow. */
    html:not(.mobile-header-active) .product-info.has-zero-price .product-details {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
    }
    html:not(.mobile-header-active) .product-info.has-zero-price .product-price-group {
      flex-direction: column !important;
      align-items: stretch !important;
    }
    html:not(.mobile-header-active) .product-info.has-zero-price .product-details .product-stats {
      order: -1 !important;
      margin: 0 0 18px !important;
      background: #fafbfc;
      border: 1px solid #e3e5e8;
      border-radius: 8px;
      padding: 14px 18px;
      width: 100%;
    }
    html:not(.mobile-header-active) .product-info.has-zero-price .product-details .product-stats li {
      white-space: normal !important;
    }
    /* Long stat values (Размери, Мощност…) wrap onto the next line instead of
       being pinned to the far right and overflowing the card */
    html:not(.mobile-header-active) .product-details .product-stats li {
      display: list-item !important;
      white-space: normal !important;
      text-align: left !important;
    }
    html:not(.mobile-header-active) .product-details .product-stats li b,
    html:not(.mobile-header-active) .product-details .product-stats li span {
      display: inline !important;
      white-space: normal !important;
      float: none !important;
      margin: 0 !important;
      text-align: left !important;
    }
    html:not(.mobile-header-active) .product-info.has-zero-price .product-details .price-wrapper {
      align-self: flex-start !important;
      margin-bottom: 8px;
    }
  }
  /* Product-page photo: no НАЛИЧНО/-X% stickers on the image (both live in the
     price block now) — PC and phone; listing cards keep their labels.
     html prefix: out-ranks the older `html:not(.mobile-header-active)
     .product-left .product-labels { display: flex !important }` repositioning rule */
  html .product-info .product-left .product-labels,
  html .product-info .product-image .product-labels,
  html .product-info .product-labels .product-label {
    display: none !important;
  }
  /* Buy-box fact rows under the price: Налично (dates), Безплатна доставка,
     the phone number and "На линия сме". One system for all four (owner,
     2026-10-23): 18px icon column in the row's own colour (check green,
     truck and phone black), 8px gap, same text size and
     weight, 6px between every row. Ubuntu is the site's body face. */
  .iv-delivery-promise,
  .iv-phone-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
  }
  .iv-delivery-promise {
    margin-top: 12px;
  }
  .iv-phone-cta {
    margin-top: 6px;
  }
  .iv-phone-cta[hidden] {
    display: none !important;
  }
  .iv-fact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0;
    color: #1a1a1a;
  }
  /* The icon box is one text line tall, so the icon centres on the first
     line even when a narrow phone wraps the text */
  .iv-fact-ico {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 1.35em;
    color: inherit;
  }
  .iv-fact-ico svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .iv-fact-ico svg.ivf-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .iv-fact--green {
    color: #2e7d32;
  }
  .iv-fact--amber,
  .iv-fact--amber .iv-fact-ico {
    color: #b26a00;
  }
  .iv-delivery-promise .ivdp-when-top,
  .iv-delivery-promise .ivdp-dates {
    white-space: nowrap;
  }
  .iv-phone-cta .ivpc-call {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }
  .iv-phone-cta .ivpc-call b {
    white-space: nowrap;
  }
  .iv-phone-cta .ivpc-call:hover b,
  .iv-phone-cta .ivpc-call:focus-visible b {
    color: #1f9e4a;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* "на линия": small green tag right after the number, pulsing dot inside;
     sized so the whole row stays on one line down to 360px phones */
  .iv-phone-cta .ivpc-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;   /* plus the real space before it in the markup */
    padding: 1px 6px 1px 5px;
    border-radius: 999px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: 1px;
  }
  .iv-phone-cta .ivpc-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b04b;
    animation: ivpcPulse 1.8s ease-out infinite;
  }
  @keyframes ivpcPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 176, 75, 0.6); opacity: 1; }
    50% { opacity: 0.55; }
    70% { box-shadow: 0 0 0 7px rgba(34, 176, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 176, 75, 0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .iv-phone-cta .ivpc-live::before {
      animation: none;
    }
  }
  /* Amazon-deal promo layout, PHONE ONLY: red "За лимитирано време" pill,
     crossed old price on its own row, then "-X% price". Desktop keeps the
     one-line old → new → -X% row (pill hidden there). */
  .iv-ltd {
    display: none;
  }
  html.mobile-header-active .product-price-group .price-group .iv-ltd {
    display: block;
    order: 0 !important;
    flex-basis: 100% !important;
    text-align: center;
    margin-bottom: 4px;
  }
  html.mobile-header-active .product-price-group .price-group .iv-ltd span {
    display: inline-block;
    background: #de202a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    border-radius: 4px;
  }
  html.mobile-header-active .product-price-group .price-group .product-price-old {
    order: 1 !important;
    flex-basis: 100% !important;
    text-align: center;
  }
  html.mobile-header-active .product-price-group .price-group .product-price-off {
    order: 2 !important;   /* percent BEFORE the price, like the deal card */
  }
  html.mobile-header-active .product-price-group .price-group .product-price-new {
    order: 3 !important;
  }
  /* Phone: one consistent vertical rhythm through the whole price stack —
     pill / old / price / без ДДС / Налично block / buttons */
  html.mobile-header-active .product-price-group .price-group {
    row-gap: 0 !important;
  }
  html.mobile-header-active .product-price-group .price-group .iv-ltd {
    margin: 0 0 8px !important;
  }
  html.mobile-header-active .product-price-group .price-group .product-price-old {
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
  }
  html.mobile-header-active .product-price-group .price-group .product-price-new,
  html.mobile-header-active .product-price-group .price-group .product-price-off {
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  html.mobile-header-active .product-price-group .product-tax {
    margin: 6px 0 0 !important;
  }
  html.mobile-header-active .iv-delivery-promise {
    margin-top: 12px !important;
  }
  /* Phone: the fact rows sit in one centred block, left-aligned inside it,
     so the icons still form a single column. 20.25em = 324px at 16px, wide
     enough for the longest row (the phone row with its "на линия" tag) on
     one line; on 360px phones max-width caps it at 320px, still one line. */
  html.mobile-header-active .iv-delivery-promise,
  html.mobile-header-active .iv-phone-cta {
    width: 20.25em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }
  html.mobile-header-active .iv-fact {
    font-size: 16px;
    text-align: left;
  }
  html.mobile-header-active .mobile-price-cart {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  /* #product in the selector beats the TBI vendor's #id margin rules */
  html.mobile-header-active #product [id^="tbibank_button_container"] {
    margin: 8px 0 0 !important;
  }
  /* Phone: TBI button exactly as wide as the add-to-cart row (360px cap) */
  html.mobile-header-active #product [id^="tbibank_button_body"] {
    width: 100% !important;
    max-width: 360px !important;
  }
  /* Phone: bigger promo pill */
  html.mobile-header-active .product-price-group .price-group .iv-ltd span {
    font-size: 16px;
    padding: 6px 14px;
  }
  /* Phone: halve the theme's 20px gap between the photo strip and the price block */
  html.mobile-header-active .product-price-group .price-group {
    padding-top: 10px !important;
  }
  /* Phone: specs list (Марка/Модел/Тегло...) sits BELOW the buttons. The node
     is physically MOVED there by JS (see mvSpecsBelowButtons script) — the
     earlier display:contents + flex-order approach is a known iOS Safari
     scroll-freeze risk, so no contents/order tricks on the phone layout. */
  html.mobile-header-active .product-info:not(.has-zero-price) .product-details .product-stats {
    margin: 16px 0 0 !important;
  }
  /* The wishlist/compare row renders as an 11px sliver between the buy button
     and the TBI button — reads as a stray divider line. Drop it and pull the
     two buttons into one tight group of equal (50px) height. */
  .product-info .buttons-wrapper .wishlist-compare {
    display: none !important;
  }
  html:not(.mobile-header-active) .product-info .product-details .button-group-page {
    margin-bottom: 0 !important;
  }
  html:not(.mobile-header-active) .product-info .product-details [id^="tbibank_button_container"] {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }
  html:not(.mobile-header-active) .product-info.no-qty .buttons-wrapper #button-cart {
    height: 50px !important;   /* match the TBI button so the stack reads as one unit */
  }
  /* Price-on-request products carry price 0 in the DB — never offer add-to-cart
     for them on phone (found in the 2026-08 Android audit) */
  .product-info.has-zero-price .mobile-price-cart {
    display: none !important;
  }
  /* Equipment pages (.no-qty, decided in the mod-cache product controller from
     order history: qty>1 is a consumables/cheap-item behaviour) drop the qty
     stepper entirely — the hidden input keeps qty=1 for cart.add */
  .product-info.no-qty .buttons-wrapper .stepper {
    display: none !important;
  }
  html:not(.mobile-header-active) .product-info.no-qty .buttons-wrapper #button-cart {
    border-radius: 4px !important;
  }
  .product-info.no-qty .mobile-price-cart .mobile-pqty {
    display: none !important;
  }
  .product-info.no-qty .mobile-price-cart .mobile-padd {
    border-radius: 4px !important;
  }
  /* Fuse the qty stepper and the buy button into one control (no gap) */
  html:not(.mobile-header-active) .product-info .buttons-wrapper .stepper {
    margin-right: 0 !important;
    border-radius: 4px 0 0 4px !important;
  }
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart {
    border-radius: 0 4px 4px 0 !important;
    height: 45px !important;
  }
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart i,
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart .icon,
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart::before,
  html:not(.mobile-header-active) .product-info .buttons-wrapper #button-cart span::before {
    display: none !important;
  }
  /* Price row (Amazon-style anchoring): old-crossed, then big new price, then
     -X% — ONE baseline row. BGN dual display removed 2026-08 (euro-transition
     dual-labelling period over); the AJAX in journal3/price.php is BGN-free too. */
  .product-price-group .price-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   /* old price sits Y-centered on the big new price/badge */
    flex-wrap: wrap !important;
    gap: 0 10px !important;
  }
  /* Explicit order on all three: the skin CSS puts order:2 on .product-price-new,
     which would shove the new price AFTER the -X% badge without these */
  .product-price-group .price-group .product-price-old {
    order: 1 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;   /* soft cross, not a slash through the number */
    text-decoration-color: #b7bcc3 !important;
    color: #90959c !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }
  .product-price-group .price-group .product-price-new,
  .product-price-group .price-group .product-price {
    order: 2 !important;
    color: #1a1a1a !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .product-price-group .price-group .product-price-off {
    order: 3 !important;
    color: #de202a !important;
    font-size: 30px !important;   /* same size as the new price */
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }
  /* Mobile keeps the price row centered like the rest of the price column */
  html.mobile-header-active .product-price-group .price-group {
    justify-content: center !important;
  }
  html.route-product-product.footer-reveal footer {
    position: static !important;
    width: auto !important;
    bottom: auto !important;
  }
  html.route-product-product.footer-reveal .site-wrapper::before {
    display: none !important;
  }