.page-wrapper{max-width:100%;}
.navigation, .breadcrumbs, .page-header .header.panel, .header.content, .footer.content, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container, .page-main{max-width:1440px;}
.page-header{border-color:#e8edf2;}
.page-header .panel.wrapper{background-color:#EEF3F8;}
.page-header .block-search .input-text{border-color:#ebebeb;background:#f3f3f3;}
.page-header .block-search.inline .action.close{color:#fff;}
.action.primary{background:#ea1819;border-color:#ea1819;}
.action.primary:hover, .action.primary:focus, .action.primary:active{background:#ea1819;border-color:#ea1819;}
.tocart.action, .block.soldtogether-block .soldtogether-cart-btn, .bundle-actions .action.primary.customize{background:#ea1819;border-color:#ea1819;}
.tocart.action:hover, .block.soldtogether-block .soldtogether-cart-btn:hover, .bundle-actions .action.primary.customize:hover, .tocart.action:active, .block.soldtogether-block .soldtogether-cart-btn:active, .bundle-actions .action.primary.customize:active, .tocart.action:focus, .block.soldtogether-block .soldtogether-cart-btn:focus, .bundle-actions .action.primary.customize:focus{background:#ea1819;border-color:#ea1819;}
.page-title-wrapper .page-title, .catalog-product-view .column.main > .block .block-title [role="heading"]{font-family:'Work Sans', sans-serif;color:#012a3b;}
div.block .block-title strong, .block.askit-question-form > .block-title strong, .contact.form .legend, .column.main .block-title [aria-level="3"], div.block .content-heading [role="heading"]{font-family:'Work Sans', sans-serif;color:#012a3b;}
.product-info-main .product-info-price .price-box .price-container [data-price-type=finalPrice] .price, .product-info-main .product-info-price .price-box .price-container [data-price-type=minPrice] .price, .product-info-main .product-info-price .price-box .price-container [data-price-type=maxPrice] .price, .bundle-options-container .block-bundle-summary .price-box [data-price-type=finalPrice] .price{color:#ea1819;}
.block.related .block-title {
    display: inline-block;
}

 .product.detailed #description {
        padding: 60px;
        background: linear-gradient(to left,#fff 35%,#f3f6f9 35%)
    }

.product.detailed #description .argento-float-photo {
        margin: 0;
        padding: 10px;
        background: #fff
    }

.product.detailed #description .argento-float-photo img {
        filter: contrast(94%)
    }

.product.detailed #description>*:not(.argento-float-photo) {
    max-width: 400px;
}
/* ============================================================
   SEARCH BAR REDESIGN — fluidics-equipment.com
   Версия: v9-final | Дата: 2026-04-11

   КАК ПРИМЕНИТЬ:
   Admin > Content > Design > Configuration > Edit >
   HTML Head > Miscellaneous Scripts — вставить как <style>...</style>
   ИЛИ добавить в файл темы: app/design/frontend/.../css/custom.css

   ИСПРАВЛЕНИЯ:
   ✅ overflow:visible на форме и field.search — autocomplete выпадает
   ✅ overflow:visible на wrapper — Select2 dropdown не клиппируется
   ✅ .origin показан — реальный tt-input работает
   ✅ Ввод текста работает
   ✅ Autocomplete с результатами выпадает
   ✅ Select2 категорий открывается
   ✅ Hover и focus эффекты
   ✅ Кнопка поиска в цвете бренда
   ✅ Строка растянута на всю ширину шапки
   ============================================================ */

/* 1. Блок поиска — полная ширина */
.block-search,
.block-search .block-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Форма — flex-строка 44px
   overflow:visible — обязательно, иначе tt-menu (autocomplete) обрезается */
.form.minisearch {
  display: flex !important;
  align-items: stretch !important;
  height: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #d4d9de !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: visible !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
}

/* Hover: рамка плавно темнеет */
.form.minisearch:hover {
  border-color: #8fa5b0 !important;
}

/* Focus: тёмно-синяя рамка + мягкая тень */
.form.minisearch:focus-within {
  border-color: #012a3b !important;
  box-shadow: 0 0 0 3px rgba(1, 42, 59, 0.10) !important;
}

/* 3. .field.search — overflow:visible, чтобы tt-menu выпадал */
.form.minisearch .field.search {
  flex: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  min-width: 0 !important;
}

/* 4. Дропдаун категорий "All ▼"
   overflow:visible — ОБЯЗАТЕЛЬНО, иначе Select2 dropdown обрезается */
.swissup-ajaxsearch-filter-category-wrapper {
  flex-shrink: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border-right: 1px solid #e5e8eb !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Select2 — только цвета, структуру не трогаем */
.swissup-ajaxsearch-filter-category-wrapper .select2-selection--single {
  border: none !important;
  background: transparent !important;
  outline: none !important;
}

.swissup-ajaxsearch-filter-category-wrapper .select2-selection__rendered {
  color: #012a3b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.swissup-ajaxsearch-filter-category-wrapper .select2-selection__arrow b {
  border-color: #012a3b transparent transparent transparent !important;
}

/* 5. .origin — показываем (там живёт реальный tt-input) */
.form.minisearch .origin {
  display: flex !important;
  flex: 1 !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Скрываем label */
.form.minisearch .origin > .label,
.form.minisearch label[for="search"] {
  display: none !important;
}

/* 6. Flex-цепочка: .control > .twitter-typeahead > .input-inner-wrapper
   overflow:visible на каждом — иначе tt-menu обрезается */
.form.minisearch .control {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.form.minisearch .twitter-typeahead {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

.form.minisearch .input-inner-wrapper {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* 7. tt-hint — ghosted автодополнение */
.form.minisearch .input-text.tt-hint {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  color: #c0c8ce !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  z-index: 0 !important;
}

/* 8. Главный INPUT — в потоке flex, вертикально по центру */
.form.minisearch .input-text.tt-input {
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  z-index: 1 !important;
  position: relative !important;
  display: block !important;
}

.form.minisearch .input-text.tt-input::placeholder {
  color: #a0aab0 !important;
}

/* 9. Autocomplete-меню — поверх всего */
.form.minisearch .tt-menu {
  z-index: 9999 !important;
  margin-top: 4px !important;
}

/* 10. .actions — статичный flex */
.form.minisearch .actions {
  position: static !important;
  display: flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  height: 100% !important;
}

/* 11. Кнопка поиска — цвет бренда #012a3b, скруглена справа */
.form.minisearch .action.search {
  height: 100% !important;
  width: 54px !important;
  background-color: #012a3b !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.18s ease !important;
  position: static !important;
  padding: 0 !important;
  outline: none !important;
}

.form.minisearch .action.search:hover {
  background-color: #023d56 !important;
}

.form.minisearch .action.search:active {
  background-color: #011e2a !important;
}

.form.minisearch .action.search:focus,
.form.minisearch .action.search:focus-visible {
  outline: none !important;
}

/* Скрываем оригинальный текст кнопки */
.form.minisearch .action.search > * {
  display: none !important;
}

/* Белая SVG-иконка лупы через ::after */
.form.minisearch .action.search::after {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (max-width: 767px)
   Проблема: Magento прячет .control через position:absolute + opacity:0
   и показывает его только по клику на label. Мы сбрасываем это поведение
   чтобы строка поиска всегда была доступна.
   ============================================================ */
@media (max-width: 767px) {

  /* .control — принудительно в flex-поток, всегда видим.
     SwissUp задаёт для .inactive: opacity:0; pointer-events:none; width:0; height:0;
     Переопределяем всё это. */
  .form.minisearch .control,
  .form.minisearch .control.inactive {
    position: relative !important;
    opacity: 1 !important;
    width: auto !important;
    height: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
    font-size: inherit !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Select2 wrapper — минимальная ширина на мобильном */
  .swissup-ajaxsearch-filter-category-wrapper {
    min-width: 60px !important;
    padding: 0 4px !important;
  }

  .swissup-ajaxsearch-filter-category-wrapper .select2-container {
    min-width: 55px !important;
    width: auto !important;
  }

  .swissup-ajaxsearch-filter-category-wrapper .select2-selection--single {
    min-width: 55px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Чуть меньший шрифт в инпуте на мобильном */
  .form.minisearch .input-text.tt-input,
  .form.minisearch .input-text.tt-hint {
    font-size: 16px !important; /* 16px предотвращает автозум на iOS */
    padding: 0 10px !important;
  }

  /* Кнопка чуть уже на мобильном */
  .form.minisearch .action.search {
    width: 46px !important;
  }
}
  /* ══════════════════════════════════════════════════════════
     Product Card — fluidics-equipment.com (v2 corrected)
     ══════════════════════════════════════════════════════════ */

  .products-grid .product-item-info {
      --card-accent:       #1e78c8;
      --card-bg:           #ffffff;
      --card-border:       #dde3ea;
      --card-border-hover: #b0c4d8;
      --card-radius:       12px;
      --card-t:            0.18s ease;
      --img-height:        210px;
  }

  /* ── Reset .product-item ── */
  .products-grid .product-item {
      border:     none !important;
      box-shadow: none !important;
      padding:    0    !important;
      margin:     0    !important;
      width:      100% !important;
      min-width:  0    !important;
      max-width:  100% !important;
      box-sizing: border-box !important;

      /* FIX: полоса на всю высоту */
      display:        flex !important;
      flex-direction: column !important;
  }

  /* ── Card container ── */
  .products-grid .product-item-info {
      /* FIX: растягивается до высоты li → border-left на всю высоту */
      flex: 1 !important;

      border:        1px solid var(--card-border) !important;
      border-left:   3px solid var(--card-accent) !important;
      border-radius: var(--card-radius) !important;
      background:    var(--card-bg) !important;
      overflow:      hidden !important;
      position:      relative !important;
      display:       flex !important;
      flex-direction: column !important;
      box-shadow:    0 1px 3px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.04) !important;
      transition:    box-shadow var(--card-t), border-color var(--card-t) !important;
      font-family:   'Barlow', sans-serif !important;
      -webkit-font-smoothing: antialiased !important;
  }
  .products-grid .product-item-info:hover {
      border-color: var(--card-border-hover) !important;
      box-shadow:   0 6px 24px rgba(0,0,0,.10), 0 1px 6px rgba(0,0,0,.06) !important;
  }
  .products-grid .product-item-info::before { display: none !important; }

  /* ── Image zone ── */
  .products-grid .product-item-info > a.product-item-link {
      display:         block !important;
      position:        relative !important;
      background:      #f4f6f8 !important;
      overflow:        hidden !important;
      flex-shrink:     0 !important;
      text-decoration: none !important;
      /* Фиксируем высоту на link-элементе — обходит JS-override padding-bottom */
      height:          var(--img-height) !important;
  }

  .products-grid .product-image-container,
  .products-grid [class*="product-image-container-"] {
      width:   100% !important;
      height:  100% !important;
      display: block !important;
  }

  .products-grid .product-image-wrapper {
      padding-bottom: 0 !important;
      height:         100% !important;
      display:        flex !important;
      align-items:    center !important;
      justify-content: center !important;
      overflow:       hidden !important;
  }

  .products-grid .product-image-photo,
  .products-grid .product-image {
      position:      static !important;
      width:         auto !important;
      height:        auto !important;
      max-height:    178px !important;
      max-width:     84% !important;
      object-fit:    contain !important;
      mix-blend-mode: multiply !important;
      transition:    transform 0.32s ease !important;
      display:       block !important;
      margin:        auto !important;
  }
  .products-grid .product-item-info:hover .product-image-photo,
  .products-grid .product-item-info:hover .product-image {
      transform: scale(1.06) !important;
  }

  /* FIX: затемнение — только на hover */
  .products-grid .product-item-info > a.product-item-link::after {
      content:    '' !important;
      position:   absolute !important;
      bottom: 0 !important; left: 0 !important; right: 0 !important;
      height:     90px !important;
      background: linear-gradient(0deg, rgba(12,22,35,.55) 0%, transparent 100%) !important;
      pointer-events: none !important;
      z-index:    2 !important;
      opacity:    0 !important;
      transition: opacity 0.28s ease !important;
  }
  .products-grid .product-item-info:hover > a.product-item-link::after {
      opacity: 1 !important;
  }

  /* ── Action buttons (floating, reveal on hover) ── */
  .products-grid .product-item-actions {
      position:  absolute !important;
      /* bottom of image: img-height − btn-height − offset */
      top:       calc(var(--img-height) - 40px - 14px) !important;
      left:      50% !important;
      right:     auto !important;
      bottom:    auto !important;
      transform: translateX(-50%) translateY(10px) !important;
      z-index:   10 !important;
      display:   flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap:       8px !important;
      padding:   0 !important;
      margin:    0 !important;
      background: none !important;
      opacity:   0 !important;
      transition: opacity 0.22s ease, transform 0.22s ease !important;
      width:     auto !important;
      height:    auto !important;
  }
  .products-grid .product-item-info:hover .product-item-actions {
      opacity:   1 !important;
      transform: translateX(-50%) translateY(0) !important;
  }

  .products-grid .product-item-actions .action {
      width:      40px !important;
      height:     40px !important;
      min-width:  40px !important;
      min-height: 40px !important;
      border-radius: 50% !important;
      display:    flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor:     pointer !important;
      text-decoration: none !important;
      padding:    0 !important;
      margin:     0 !important;
      overflow:   hidden !important;
      font-size:  0 !important;
      color:      transparent !important;
      box-sizing: border-box !important;
      box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
      transition: background .15s, border-color .15s, transform .15s !important;
      flex-shrink: 0 !important;
  }
  .products-grid .product-item-actions .action span { display: none !important; }

  .products-grid .product-item-actions .towishlist,
  .products-grid .product-item-actions .tocompare {
      background: rgba(255,255,255,.95) !important;
      border:     1px solid rgba(0,0,0,.08) !important;
  }
  .products-grid .product-item-actions .towishlist:hover,
  .products-grid .product-item-actions .tocompare:hover {
      background: #fff !important;
      transform:  scale(1.12) !important;
  }
  .products-grid .product-item-actions .tocart {
      background: var(--card-accent) !important;
      border:     none !important;
      order:      -1 !important;
  }
  .products-grid .product-item-actions .tocart:hover {
      background: #155fa8 !important;
      transform:  scale(1.12) !important;
  }

  /* Иконки FontAwesome */
  .products-grid .product-item-actions .action::before {
      font-family: FontAwesome !important;
      text-indent: 0 !important;
      display:     flex !important;
      align-items: center !important;
      justify-content: center !important;
      width:  100% !important;
      height: 100% !important;
      position: static !important;
  }
  .products-grid .product-item-actions .tocart::before {
      content:   '\f07a' !important;
      font-size: 15px !important;
      color:     #fff !important;
  }
  .products-grid .product-item-actions .towishlist::before {
      content:   '\f08a' !important;
      font-size: 14px !important;
      color:     #5a6470 !important;
  }
  .products-grid .product-item-actions .tocompare::before {
      content:   '\f0ec' !important;
      font-size: 13px !important;
      color:     #5a6470 !important;
  }
  .products-grid .product-item-actions .towishlist:hover::before { color: #c0392b !important; }
  .products-grid .product-item-actions .tocompare:hover::before  { color: #1e78c8 !important; }

  /* ── Divider ── */
  .products-grid .product-item-name {
      border-top: 1px solid #e8ecf0 !important;
  }

  /* ── Name: фиксированная высота 5 строк ── */
  .products-grid .product-item-name {
      padding:    14px 15px 0 16px !important;
      margin:     0 !important;
      flex-shrink: 0 !important;

      display:   -webkit-box !important;
      -webkit-line-clamp: 5 !important;
      -webkit-box-orient: vertical !important;
      overflow:  hidden !important;
      white-space: normal !important;

      font-size:   13.5px !important;
      font-weight: 600 !important;
      line-height: 1.45 !important;
      color:       #1a2530 !important;

      /* FIX: фиксированная высота → цена сразу под именем, без gap */
      height:     calc(13.5px * 1.45 * 5) !important;
      min-height: calc(13.5px * 1.45 * 5) !important;
      max-height: calc(13.5px * 1.45 * 5) !important;
  }
  .products-grid .product-item-name a {
      color:      #1a2530 !important;
      font-size:  13.5px !important;
      font-weight: 600 !important;
      line-height: 1.45 !important;
      text-decoration: none !important;
  }
  .products-grid .product-item-name a:hover { color: var(--card-accent) !important; }

  /* ── Price: сразу после имени, без auto-margin ── */
  .products-grid .price-box {
      /* FIX: NO margin-top: auto → цена сразу под именем */
      margin-top:  0 !important;
      padding:     12px 15px 16px 16px !important;
      flex-shrink: 0 !important;
  }

  .products-grid .price-container .price-label    { display: none !important; }
  .products-grid .price-wrapper.price-including-tax { display: none !important; }
  .products-grid .price-wrapper.price-excluding-tax { display: inline !important; }
  .products-grid .price-excluding-tax::before     { display: none !important; content: none !important; }

  .products-grid .price-wrapper .price {
      font-size:   18px !important;
      font-weight: 700 !important;
      color:       #c0392b !important;
      font-family: 'Barlow', sans-serif !important;
      font-variant-numeric: tabular-nums !important;
      letter-spacing: -.3px !important;
  }
  .products-grid .special-price .price-wrapper .price { color: #c0392b !important; }
  .products-grid .old-price .price {
      font-size:  12px !important;
      font-weight: 400 !important;
      color:      #9aa5b1 !important;
      text-decoration: line-through !important;
  }

  .products-grid .tax-details,
  .products-grid .tax-details a,
  .products-grid .price-details {
      font-size: 10.5px !important;
      color:     #a8b2bc !important;
      text-decoration: none !important;
      margin-top: 3px !important;
      display:   block !important;
  }

  .products-grid .product-item-inner { display: none !important; }

  /* ── Grid ── */
  .products-grid .products.list.items.product-items {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
      gap:        14px !important;
      list-style: none !important;
      padding:    0 !important;
      margin:     0 !important;
  }
  @media (min-width: 1200px) {
      .products-grid .products.list.items.product-items {
          grid-template-columns: repeat(4, 1fr) !important;
      }
  }

  /* ── Mobile ── */
  @media (max-width: 767px) {
      .products-grid .products.list.items.product-items {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
      }
      .products-grid .product-item-info {
          --img-height: 155px;
          overflow: visible !important;
      }
      .products-grid .product-item-actions {
          opacity:   1 !important;
          transform: translateX(-50%) translateY(0) !important;
      }
      .products-grid .product-item-actions .towishlist,
      .products-grid .product-item-actions .tocompare { display: none !important; }

      .products-grid .product-image-photo,
      .products-grid .product-image { max-height: 128px !important; }

      .products-grid .product-item-name {
          font-size:  12px !important;
          -webkit-line-clamp: 4 !important;
          height:     calc(12px * 1.45 * 4) !important;
          min-height: calc(12px * 1.45 * 4) !important;
          max-height: calc(12px * 1.45 * 4) !important;
          padding:    10px 12px 0 !important;
      }
      .products-grid .price-wrapper .price { font-size: 15px !important; }
      .products-grid .price-box { padding: 8px 12px 12px !important; }
      .products-grid .product-item-actions .action {
          width: 36px !important; height: 36px !important;
          min-width: 36px !important; min-height: 36px !important;
      }
  }