/* ============================================================
   Сфера ОПТ - обновление дизайна шапки.
   Префикс osf-. Бренд-синий из логотипа sferapotolki.ru: #0b77cf.
   Размеры логотипа/плашки/поиска - только для десктопа (>=1200px),
   чтобы не ломать адаптив шаблона на планшете/телефоне.
   ============================================================ */
:root{
  --osf-blue:#0b77cf; --osf-blue-d:#0963ae; --osf-blue-l:#eaf3fc;
  --osf-ink:#1b2430; --osf-muted:#5b6472; --osf-line:#e3e7ee;
}

/* плашка ОПТ по умолчанию скрыта (показываем только на десктопе) */
.osf-opt{display:none}

/* ---------- Поиск: подсказки и контраст (безопасно на всех ширинах) ---------- */
#title-search-input::placeholder{color:#8a93a0!important;opacity:1}
.title-search-result{border:1px solid var(--osf-line)!important;border-radius:10px!important;
  box-shadow:0 10px 30px rgba(16,42,80,.14)!important;margin-top:6px!important;overflow:hidden}
.title-search-result a{color:var(--osf-ink)}
.title-search-result .title-search-item:hover,.title-search-result tr:hover{background:var(--osf-blue-l)!important}

/* ---------- Кнопка каталога + мегаменю (работает на всех ширинах) ---------- */
.osf-mega{position:relative;display:inline-block}
a.tagline.osf-catbtn{
  display:inline-flex!important;align-items:center;gap:9px;background:var(--osf-blue)!important;
  color:#fff!important;border-radius:10px!important;padding:11px 18px!important;font-weight:700!important;
  text-decoration:none!important;line-height:1!important}
a.tagline.osf-catbtn:hover{background:var(--osf-blue-d)!important}
a.tagline.osf-catbtn:before{content:"";width:18px;height:12px;flex:0 0 auto;
  background:linear-gradient(#fff 0 2px,transparent 2px 5px,#fff 5px 7px,transparent 7px 10px,#fff 10px 12px)}

.osf-megapanel{position:absolute;top:calc(100% + 10px);left:0;z-index:2000;display:none;
  width:860px;max-width:92vw;background:#fff;border:1px solid var(--osf-line);border-radius:14px;
  box-shadow:0 18px 50px rgba(16,42,80,.18);grid-template-columns:270px 1fr;overflow:hidden}
.osf-mega.osf-open .osf-megapanel{display:grid}
.osf-megacats{background:#fafbfd;border-right:1px solid var(--osf-line);padding:8px;max-height:72vh;overflow:auto}
.osf-megacats a{display:block;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:600;
  color:var(--osf-ink)!important;text-decoration:none!important}
.osf-megacats a:hover,.osf-megacats a.osf-on{background:var(--osf-blue)!important;color:#fff!important}
.osf-megasub{padding:18px 22px}
.osf-megasub h4{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--osf-ink)}
.osf-megasub .osf-cols{columns:2;column-gap:28px}
.osf-megasub .osf-cols a{display:block;padding:6px 0;font-size:14px;color:var(--osf-ink)!important;text-decoration:none!important}
.osf-megasub .osf-cols a:hover{color:var(--osf-blue)!important}
.osf-openall{display:inline-block;background:var(--osf-blue);color:#fff!important;padding:9px 16px;
  border-radius:9px;font-weight:700;text-decoration:none!important}
.osf-megasub .osf-promo{margin-top:16px;background:var(--osf-blue-l);border-radius:12px;padding:12px 15px;font-size:13px;color:var(--osf-ink)}
.osf-megasub .osf-promo a{color:var(--osf-blue)!important;font-weight:700}
.osf-megapanel{grid-template-columns:1fr;width:94vw}
@media(min-width:720px){.osf-megapanel{grid-template-columns:270px 1fr;width:860px}}
@media(max-width:719px){.osf-megacats{border-right:0;border-bottom:1px solid var(--osf-line);max-height:none}
  .osf-megasub .osf-cols{columns:1}}

/* ============================================================
   ДЕСКТОП (>=1200px): логотип, плашка ОПТ, крупный поиск
   ============================================================ */
@media(min-width:768px){
  .osf-logo-link{display:inline-flex!important;align-items:center;gap:10px;white-space:nowrap;padding-left:0!important}
  .osf-logo-img{height:46px!important;width:auto!important}
  .osf-opt{display:inline-block!important;flex:0 0 auto;background:var(--osf-blue)!important;color:#fff!important;
    font-size:13px!important;font-weight:800!important;letter-spacing:1.5px;line-height:1!important;
    padding:5px 10px!important;border-radius:6px!important;text-transform:uppercase!important}

  #headerSearchWrapper,.search-page{width:100%}
  #title-search-input{width:100%!important;height:46px!important;border:2px solid var(--osf-blue)!important;
    border-radius:10px!important;padding:0 14px!important;font-size:15px!important;color:var(--osf-ink)!important;
    outline:none!important;box-shadow:none!important}
  #headerSearchWrapper form{display:flex;align-items:center;gap:0;position:relative}
  #headerSearchWrapper button[type="submit"]{height:46px;min-width:54px;border:0;background:var(--osf-blue);
    color:#fff;border-radius:10px;margin-left:-10px;padding:0 16px;cursor:pointer;font-weight:700}
  #headerSearchWrapper button[type="submit"]:hover{background:var(--osf-blue-d)}
  #headerSearchWrapper button[type="submit"] img{filter:brightness(0) invert(1)}
}

/* ================================================================
   Сфера ОПТ - сквозной рестайл сайта (чистый современный, как Румопт)
   Применяется ко всем страницам. Только стили, без правки верстки.
   ================================================================ */

/* ----- База: фон, типографика ----- */
body{background:#f4f6fa!important;color:var(--osf-ink)}
.container{max-width:1280px}
a{color:var(--osf-blue)}
a:hover{color:var(--osf-blue-d)}
h1,h2,h3,h4{color:var(--osf-ink)}

/* ----- Единые кнопки ----- */
.btn,button.btn,a.btn,input[type="submit"],.button{border-radius:10px!important}
.btn-primary,.btn-success,.btn-info,.add2basketbtn,.product-item-button-container .btn{
  background:var(--osf-blue)!important;border-color:var(--osf-blue)!important;color:#fff!important}
.btn-primary:hover,.btn-success:hover,.product-item-button-container .btn:hover{
  background:var(--osf-blue-d)!important;border-color:var(--osf-blue-d)!important}
.btn-outline-primary,.btn-default{border-radius:10px!important}

/* ----- Заголовки секций ----- */
h2.text-center{font-weight:800;font-size:30px;text-transform:none;letter-spacing:-.3px;margin:34px 0 26px}
h2.text-center:after{content:"";display:block;width:66px;height:3px;background:var(--osf-blue);margin:14px auto 0;border-radius:2px}
h1.page-title{font-weight:800;font-size:30px;letter-spacing:-.3px;margin:18px 0 22px}

/* ----- Слайдер/баннеры на главной ----- */
.owl-carousel,.bannerCatalogWrapper{border-radius:16px;overflow:hidden}

/* ----- Плитки категорий на главной ----- */
.index-catalog-menu-row{margin-top:10px}
.index-catalog-menu-item{margin-bottom:22px}
.index-catalog-menu-item a.block{border-radius:16px!important;overflow:hidden;position:relative;
  box-shadow:0 6px 18px rgba(16,42,80,.08);transition:transform .2s,box-shadow .2s;display:block}
.index-catalog-menu-item a.block:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,42,80,.18)}
.index-catalog-menu-name{font-weight:800!important;letter-spacing:.3px}

/* ================= Карточки товаров (главная + каталог) ================= */
.item_block{padding:10px}
.product-item-container,.product-item{background:#fff;border:1px solid var(--osf-line);border-radius:14px;
  overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;height:100%;display:flex;flex-direction:column}
.product-item-container:hover,.product-item:hover{border-color:var(--osf-blue);
  box-shadow:0 14px 30px rgba(16,42,80,.15);transform:translateY(-3px)}
.product-item-image-wrapper{background:#fff;padding:12px;border-radius:14px 14px 0 0}
.product-item-image-original,.product-item-image-alternative,.product-item-image-wrapper img{object-fit:contain!important}
.product-item-title{font-size:14px;line-height:1.35;min-height:40px;margin:4px 10px 8px;font-weight:600}
.product-item-title a{color:var(--osf-ink)!important;text-decoration:none!important}
.product-item-title a:hover{color:var(--osf-blue)!important}
.product-item-price-container{padding:0 10px}
.price_value,.product-item-price-current{color:var(--osf-ink)!important;font-weight:800!important;font-size:19px!important}
.price_currency,.price_measure{color:var(--osf-muted)!important;font-weight:600}
.product-item-amount{padding:0 10px}
.product-item-amount-field-block,.product-item-amount-field{border-radius:8px!important}
.product-item-amount-field-btn-plus,.product-item-amount-field-btn-minus{border-radius:8px!important}
.product-item-button-container{padding:10px}
.product-item-button-container .btn,.product-item-button-container a,.product-item-button-container button{
  width:100%;border-radius:10px!important;font-weight:700}

/* ================= Каталог: крошки, разделы, фильтр, сортировка ================= */
.breadcrumb-list,.bx-breadcrumb{font-size:13px;color:var(--osf-muted);margin:14px 0}
.bx-breadcrumb-item a{color:var(--osf-muted)}
.bx-breadcrumb-item a:hover{color:var(--osf-blue)}

/* плитки разделов каталога */
.section_item{margin-bottom:20px}
.section_item_inner{background:#fff;border:1px solid var(--osf-line);border-radius:14px;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s;height:100%}
.section_item_inner:hover{border-color:var(--osf-blue);box-shadow:0 12px 28px rgba(16,42,80,.14);transform:translateY(-3px)}
.section_info{padding:12px 14px;font-weight:700}
.section_info a{color:var(--osf-ink)!important;text-decoration:none!important}
.section_info a:hover{color:var(--osf-blue)!important}

/* боковое меню каталога */
.catalog-left-menu-img-block{border-radius:10px;overflow:hidden}
.left-menu,.catalog-section-list{border-radius:14px}

/* умный фильтр */
.smart-filter-block,.smart-filter-container-modef{background:#fff;border:1px solid var(--osf-line);
  border-radius:14px;padding:6px 14px;margin-bottom:16px}
.smart-filter-parameters-box-title,.smart-filter-title{font-weight:700;color:var(--osf-ink)}
.smart-filter-parameters-box-title-text{font-weight:700}
.smart-filter-checkbox-text{color:var(--osf-ink)}
.smart-filter-slider-handle,.smart-filter-slider-price-bar{background:var(--osf-blue)!important}

/* сортировка */
.sort_btn{border:1px solid var(--osf-line);border-radius:9px;padding:6px 12px;color:var(--osf-ink)}
.sort_btn.active,.sort_btn:hover{background:var(--osf-blue);color:#fff;border-color:var(--osf-blue)}

/* блоки-карточки общего вида */
.card,.block-white{border-radius:14px;border:1px solid var(--osf-line)}

/* ----- Подвал ----- */
footer,.footer,#footer{background:#fff;border-top:1px solid var(--osf-line)}
footer a:hover,.footer a:hover{color:var(--osf-blue)}

/* ================================================================
   Сфера ОПТ - карточки в списках: цена/кнопка/количество всегда,
   плюс оформление страницы товара.
   ================================================================ */

/* ----- В списках показываем кнопку и количество всегда (без наведения) ----- */
.product-item-info-container.product-item-hidden{
  display:block!important;position:static!important;visibility:visible!important;opacity:1!important;
  height:auto!important;max-height:none!important;overflow:visible!important}
.item_block .product-item-amount{margin:8px 10px 0}
.item_block .product-item-button-container{padding:8px 10px 12px}
.item_block .product-item-button-container .btn,
.item_block .product-item-button-container a,
.item_block .product-item-button-container button{width:100%}

/* ----- Страница товара ----- */
.product-item-detail-pay-block{background:#fff;border:1px solid var(--osf-line);border-radius:16px;
  padding:20px 22px;box-shadow:0 6px 18px rgba(16,42,80,.06)}
.product-item-detail-slider-images-container{background:#fff;border:1px solid var(--osf-line);
  border-radius:16px;overflow:hidden;padding:12px}
.product-item-detail-slider-controls-image{border:1px solid var(--osf-line);border-radius:9px;overflow:hidden}

.product-item-detail-buy-button,a.product-item-detail-buy-button,.product-item-btn .btn{
  background:var(--osf-blue)!important;border-color:var(--osf-blue)!important;color:#fff!important;
  border-radius:11px!important;font-weight:700!important;padding:13px 28px!important}
.product-item-detail-buy-button:hover,.product-item-btn .btn:hover{background:var(--osf-blue-d)!important}

.product-item-detail-pay-block .price_value{font-weight:800!important;font-size:27px!important;color:var(--osf-ink)!important}
.product-item-detail-pay-block .price_name{color:var(--osf-muted);font-weight:600}

.product-item-detail-tabs-list{border-bottom:1px solid var(--osf-line)}
.product-item-detail-tab-link{color:var(--osf-muted);font-weight:600;border-radius:9px 9px 0 0}
.product-item-detail-tab.active .product-item-detail-tab-link,
.product-item-detail-tab-link.active{color:var(--osf-blue)!important}

.product-item-detail-properties-item{padding:8px 0;border-bottom:1px dashed var(--osf-line)}
.product-item-detail-properties-name{color:var(--osf-muted)}
.product-item-detail-properties-value{color:var(--osf-ink);font-weight:600}

/* ================================================================
   Сфера ОПТ - мобильные карточки товаров (телефон)
   2 карточки в ряд, горизонтальный счётчик, кнопка без переноса.
   ================================================================ */
@media(max-width:575.98px){
  .item_block{flex:0 0 50%!important;max-width:50%!important;padding:6px}
  .item_block .product-item-title{font-size:13px;min-height:34px;margin:4px 6px 6px}
  .item_block .product-item-price-container,
  .item_block .product-item-amount,
  .item_block .product-item-button-container{padding-left:8px;padding-right:8px}
  .item_block .price_value{font-size:17px!important}
  .item_block .product-item-amount-field-container,
  .item_block .product-item-amount-field-block{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:center;justify-content:center;gap:4px}
  .item_block .product-item-amount-field{max-width:46px;text-align:center}
  .item_block .product-item-button-container .btn,
  .item_block .product-item-button-container a,
  .item_block .product-item-button-container button{
    font-size:13px!important;padding:11px 6px!important;white-space:nowrap;width:100%}
}

/* ================================================================
   Сфера ОПТ - шапка на телефоне/планшете: поле поиска держим в своей
   колонке (не вылезает на иконки), лупа у правого края поля.
   Причина: шаблон на Bootstrap 4, класс hidden-xs (BS3) не прячет
   десктопный поиск, а input задан фикс.шириной и перекрывал кабинет/
   избранное/корзину.
   ================================================================ */
@media(max-width:767.98px){
  .mobile-header-user-block .search-page{width:100%}
  .mobile-header-user-block .search-page form{position:relative;width:100%;max-width:100%}
  .mobile-header-user-block .search-page input{
    width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;padding-right:40px!important}
}

/* Лупа поиска - к правому краю поля (телефон/планшет) */
@media(max-width:767.98px){
  .mobile-header-user-block .search-page{position:relative}
  .mobile-header-user-block .search-page form{position:static}
  .mobile-header-user-block .search-page form button,
  .mobile-header-user-block .search-page form [type="submit"],
  .mobile-header-user-block .search-page form .fa-search{
    position:absolute!important;right:10px!important;left:auto!important;
    top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:3}
}

/* Поле поиска: прибиваем к форме слева и справа, чтобы край поля и лупа совпали */
@media(max-width:767.98px){
  .mobile-header-user-block .search-page form input{
    position:absolute!important;left:10px!important;right:10px!important;width:auto!important;
    max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important;
    padding:0 42px 0 12px!important}
  .mobile-header-user-block .search-page form button,
  .mobile-header-user-block .search-page form [type="submit"],
  .mobile-header-user-block .search-page form .fa-search{right:14px!important}
}