.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:'IBM Plex 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:'IBM Plex 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;
  }
}