.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 ──────────────────────────────────────── */

  .product-item {
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-left: 3px solid #1e78c8;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
    font-family: 'Barlow', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .product-item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.11), 0 1px 4px rgba(0,0,0,.06);
    transform: translateY(-2px);
  }

  /* Flex column чтобы цена была внизу */
  .product-item-info {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ── Изображение ── */
  a.product-item-link {
    display: block;
    position: relative;
    background: #f7f8f9;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Ширина на всю карточку (override inline width:240px) */
  [class*="product-image-container"] {
    width: 100% !important;
  }

  /* Затемнение снизу картинки */
  a.product-item-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: linear-gradient(0deg, rgba(20,32,44,.32) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* ── Кнопки (появляются на hover) ── */
  .product-item-actions {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    background: #ffffff;
    border-top: 1px solid #e0e4e8;
    border-bottom: 1px solid #e0e4e8;
    flex-shrink: 0;
  }

  .product-item-actions .action {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e0e4e8;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 0;           /* скрыть текст */
    overflow: hidden;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .18s ease, transform .18s ease,
                background .18s ease, border-color .18s ease;
  }
  .product-item:hover .product-item-actions .action         { opacity: 1; transform: scale(1); }
  .product-item:hover .product-item-actions .action:nth-child(1) { transition-delay: 0s; }
  .product-item:hover .product-item-actions .action:nth-child(2) { transition-delay: .05s; }
  .product-item:hover .product-item-actions .action:nth-child(3) { transition-delay: .10s; }

  .product-item-actions .action:hover { background: #1e78c8; border-color: #1e78c8; }

  /* Корзина (primary) */
  .product-item-actions .tocart        { background: #1e78c8; border-color: #1e78c8; }
  .product-item-actions .tocart:hover  { background: #175fa0; border-color: #175fa0; }

  /* Иконки через data URI */
  .product-item-actions .tocart::before {
    content: '';
    display: block; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'
  stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0
  2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .product-item-actions .towishlist::before {
    content: '';
    display: block; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5561' stroke-width='1.8'
  stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12
  21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .product-item-actions .towishlist:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'
  stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12
  21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  }

  .product-item-actions .tocompare::before {
    content: '';
    display: block; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5561' stroke-width='1.8'
  stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1
  2-2h11'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .product-item-actions .tocompare:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'
  stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1
  2-2h11'/%3E%3C/svg%3E");
  }

  /* ── Название ── */
  .product-item-name {
    padding: 14px 14px 0 15px;
    flex: 1;               /* растягивается, прижимая цену вниз */
  }
  .product-item-name a {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #1a2530;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-item-name a:hover { color: #1e78c8; }

  /* ── Цена (всегда внизу) ── */
  .price-box {
    padding: 8px 14px 16px 15px;
    font-size: 17px;
    font-weight: 700;
    color: #c0392b;
  }
  /* Зачёркнутая старая цена */
  .price-box .old-price .price {
    font-size: 12px;
    font-weight: 400;
    color: #8a96a3;
    text-decoration: line-through;
  }
  /* Цена без скидки */
  .price-box .minimal-price .price,
  .price-box .regular-price .price {
    color: #c0392b;
  }