/* ============================================================ Металлосфера — новая тема (редизайн /new), Bootstrap 5 + Manrope Подключается на главной и внутренних страницах нового шаблона. ============================================================ */ :root{ --yellow:#fcbf30;--yellow-d:#e6a800;--dark:#202020;--dark-2:#2a2a2a; --ink:#202020;--muted:#777;--line:#e9e9e9;--bg:#f6f6f7; --radius:14px;--shadow:0 8px 26px rgba(0,0,0,.09) } *{scroll-behavior:smooth} body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff} h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.01em} .container{max-width:1240px} a{text-decoration:none} img{max-width:100%} .text-y{color:var(--yellow)!important} .btn{border-radius:10px;font-weight:700} .btn-brand{background:var(--yellow);color:var(--dark);border:none} .btn-brand:hover{background:var(--yellow-d);color:var(--dark)} .btn-dark2{background:var(--dark);color:#fff;border:none}.btn-dark2:hover{background:#000;color:#fff} .btn-ghost{border:1.5px solid rgba(255,255,255,.3);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow-d)} .eyebrow::before{content:"";width:24px;height:3px;background:var(--yellow);border-radius:3px} /* topbar */ .topbar{background:var(--dark);color:#bdbdbd;font-size:.84rem} .topbar a{color:#dcdcdc}.topbar a:hover{color:var(--yellow)} /* header */ .hdr{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--line)} .hdr .logo img{height:54px;width:auto} .cat-btn{background:var(--dark);color:#fff;border:none;border-radius:10px;font-weight:700;padding:.65rem 1.1rem} .cat-btn:hover,.cat-btn[aria-expanded="true"]{background:#000;color:var(--yellow)} .search input{border-radius:10px;border-color:var(--line);padding:.65rem 1rem .65rem 2.6rem} .phone{font-weight:800;font-size:1.15rem;color:var(--ink);white-space:nowrap;line-height:1.2} .hdr .phone{font-size:1rem} .phone.phone--sec{margin-top:1px} .phone a{color:inherit;text-decoration:none} .phone a:hover{color:var(--yellow-d)} footer.site .phone,footer.site .phone a{color:#fff} footer.site .phone{font-size:1.32rem;font-weight:800} .ipill{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink)} .ipill:hover{border-color:var(--yellow);color:var(--yellow-d)} /* ----- каталог: мега-меню (dropdown) ----- */ .cat-wrap{position:relative} .megacat{position:absolute;left:0;top:calc(100% + 10px);z-index:1040;width:min(1040px,92vw);background:#fff;border:1px solid var(--line); border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:22px 24px;display:none} .megacat.show{display:block} .megacat .mc-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px;align-items:start} .mc-group{min-width:0} .mc-group>a.mc-top{display:flex;align-items:center;gap:9px;min-height:54px;font-weight:500;font-size:.9rem;color:#fff;background:var(--dark);padding:8px 12px;border-radius:9px;margin-bottom:10px;border-bottom:3px solid var(--yellow);transition:.15s} .mc-group>a.mc-top:hover{background:var(--yellow);color:var(--dark);border-bottom-color:var(--yellow-d)} .mc-group>a.mc-top span{white-space:normal;line-height:1.2} .mc-sub{list-style:none;margin:0;padding:0} .mc-sub li{margin:0} .mc-sub a{display:block;color:#555;font-size:.875rem;line-height:1.25;padding:5px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mc-sub a:hover{color:var(--yellow-d);background:var(--bg)} /* вторичное меню под шапкой (компонент menu — «Меню сайта»), тёмная плашка как топбар */ .subnav{background:var(--dark)} .subnav .nav{gap:.2rem;align-items:center;justify-content:space-between;flex-wrap:nowrap} .subnav .nav-item{position:relative} .subnav .nav-link{position:relative;color:#d6d6d6;font-weight:600;font-size:.9rem;padding:.6rem 1rem;border-radius:9px;transition:color .18s,background .18s} .subnav .nav-link::after{content:"";position:absolute;left:1rem;right:1rem;bottom:6px;height:2px;background:var(--yellow);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .2s} .subnav .nav-link:hover{color:var(--yellow);background:transparent} .subnav .nav-link.active{color:var(--yellow);background:transparent} .subnav .nav-link:hover::after,.subnav .nav-link.active::after{transform:scaleX(1)} /* ----- живой поиск (suggest_search) ----- */ .jg-hsearch__suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1060;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16);max-height:64vh;overflow:auto;padding:6px} .jg-hsearch__suggest[hidden]{display:none} .jg-sg__group{padding:0} .jg-sg__gtitle{padding:6px 12px 2px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800} .jg-sg__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.92rem;text-decoration:none} .jg-sg__item:hover,.jg-sg__item.is-active{background:var(--bg);color:var(--yellow-d)} .jg-sg__val mark{background:rgba(252,191,48,.4);color:inherit;padding:0 1px;border-radius:2px} .jg-sg__price{color:var(--yellow-d);font-weight:700;white-space:nowrap} .jg-sg__empty{padding:12px;color:var(--muted);font-size:.9rem;text-align:center} /* ----- мобильное off-canvas меню ----- */ .mnav .offcanvas-header{background:var(--dark);color:#fff} .mnav .accordion-button{font-weight:700} .mnav a{color:var(--ink)} .burger{width:44px;height:44px;border-radius:10px;border:1px solid var(--yellow);background:var(--yellow);display:grid;place-items:center;font-size:1.75rem;color:var(--dark);box-shadow:0 3px 10px rgba(230,168,0,.35)} .burger:active{background:var(--yellow-d);border-color:var(--yellow-d)} /* hero */ .hero{position:relative;background:linear-gradient(100deg,#1c1c1c 0%,#202020 50%,#262626 100%);color:#fff;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background:var(--hero-bg,url('/resources/catalog/images/bdae1fb2.jpg')) center/cover;opacity:.16;mix-blend-mode:luminosity} .hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(252,191,48,.22),transparent 62%)} .hero .inner{position:relative;z-index:2} .hero h1{font-size:clamp(1.8rem,3.3vw,2.9rem);line-height:1.08} .hero .pts li{display:flex;gap:9px;margin-bottom:.45rem;color:#d6d6d6} .hero .pts i{color:var(--yellow)} .badge16{display:inline-flex;align-items:center;gap:8px;background:rgba(252,191,48,.14);border:1px solid rgba(252,191,48,.3);color:var(--yellow);padding:.35rem .8rem;border-radius:999px;font-weight:700;font-size:.85rem} .calc{background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:24px} .calc .form-select,.calc .form-control{border-radius:10px;border-color:var(--line);padding:.6rem .8rem} .calc .tabs .btn{flex:1;border-radius:8px;font-size:.85rem;padding:.45rem} .calc .res{background:#fff8e8;border:1px dashed #f3d68a;border-radius:12px} .stat .n{font-size:1.7rem;font-weight:800;color:var(--yellow)} .stat small{color:#b9b9b9} /* category blocks */ .catblock{padding:48px 0} .catblock:nth-of-type(even){background:var(--bg)} .blk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;border-left:5px solid var(--yellow);padding-left:14px} .blk-head h2{margin:0;font-size:1.7rem} .seeall{color:var(--ink);font-weight:700;font-size:.92rem}.seeall:hover{color:var(--yellow-d)} .dp-grid{display:flex;flex-wrap:wrap} .pcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:.22s} .pcard:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent} .pcard-img{height:170px;flex:0 0 170px;min-height:0;overflow:hidden;background:#f0f0f0} .pcard .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .pcard:hover .pcard-img img{transform:scale(1.07)} .pcard-cap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--dark);color:#fff;padding:10px 8px;border-bottom:3px solid var(--yellow);min-height:52px} .pcard-cap span{font-weight:600;font-size:.86rem;line-height:1.2} .pcard:hover .pcard-cap{color:var(--yellow)} /* карточки подразделов/категорий без фото — фирменная тёмная заглушка (иконка no-image.svg без подложки) */ .pcard-img:has(img[src*="no-image.svg"]),.catcard__img:has(img[src*="no-image.svg"]){background:#3c3c3c;display:flex;align-items:center;justify-content:center} .pcard-img img[src*="no-image.svg"],.catcard__img img[src*="no-image.svg"]{width:128px!important;height:128px!important;object-fit:contain;transform:none!important} /* advantages */ .section{padding:60px 0} .adv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;height:100%;text-align:center;transition:.2s} .adv:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .adv-ic{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;background:#fff8e8;display:grid;place-items:center} .adv-ic img{max-width:42px;max-height:42px} .adv h6{font-weight:800;margin-bottom:6px} .adv p{color:var(--muted);font-size:.86rem;margin:0} /* partners */ .plogo{height:90px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;transition:.2s} .plogo img{max-height:62px;max-width:100%;object-fit:contain;filter:grayscale(.2)} .plogo:hover{box-shadow:var(--shadow)}.plogo:hover img{filter:none} /* cta */ .cta{background:var(--dark);color:#fff;border-radius:20px;position:relative;overflow:hidden} .cta::after{content:"";position:absolute;right:-60px;bottom:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(252,191,48,.25),transparent 62%)} /* footer */ footer.site{background:#1a1a1a;color:#9a9a9a} footer.site a{color:#cfcfcf}footer.site a:hover{color:var(--yellow)} footer.site h6{color:#fff;margin-bottom:14px} footer.site .logo img{height:76px;width:auto} /* ----- подкатегории каталога ----- */ .subcats{margin:0 0 22px} .subcat-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;color:var(--ink);transition:.18s} .subcat-chip:hover{border-color:var(--yellow);color:var(--yellow-d);box-shadow:var(--shadow)} /* ----- внутренние страницы ----- */ .page-head{background:var(--bg);border-bottom:1px solid var(--line);padding:18px 0} .crumbs{font-size:.85rem;color:var(--muted)} .crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--yellow-d)} .crumbs .sep{margin:0 6px;color:#bbb} .page-wrap{padding:32px 0 56px} .side-menu{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;z-index:900} .side-menu .sm-title{font-weight:800;padding:8px 10px} .side-menu ul{list-style:none;margin:0;padding:0} .side-menu li>a{display:block;padding:8px 10px;border-radius:9px;color:#444;font-size:.92rem} .side-menu li>a:hover,.side-menu li>a.active,.side-menu a.selected{background:var(--bg);color:var(--yellow-d)} .side-menu .root{padding-left:0} .side-menu .sub{list-style:none;padding-left:12px;margin:2px 0} .side-menu .sub2{list-style:none;padding-left:12px;margin:0} .side-menu .tosub2{display:none} .content-box{background:#fff} .content-box h1{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:18px} .content-box img{height:auto;border-radius:10px} .content-box table{width:100%;border-collapse:collapse;margin:14px 0} .content-box table th,.content-box table td{border:1px solid var(--line);padding:8px 10px;text-align:left} .content-box table th{background:var(--bg);font-weight:700} /* back to top */ #back-top{position:fixed;right:18px;bottom:18px;z-index:1050;display:none} #back-top a{width:46px;height:46px;border-radius:12px;background:var(--dark);color:var(--yellow);display:grid;place-items:center;font-size:1.2rem} #back-top a:hover{background:#000} /* ----- hero-калькулятор (рабочий, на данных CMS) ----- */ .calc h2,.calc h4{font-size:1rem;font-weight:800;margin:0 0 .5rem} .calc .form-group{margin-bottom:.6rem} .calc select.form-control,.calc input.form-control{width:100%;border-radius:10px;border:1px solid var(--line);padding:.55rem .7rem} .calc .items_list .item-wrapper{margin-top:.4rem} .calc .item-edizm{font-size:.8rem;color:var(--muted);margin-bottom:.25rem} .calc .input-group{display:flex;align-items:stretch;gap:6px} .calc .input-group-addon{display:flex;align-items:center;background:#fff8e8;border:1px dashed #f3d68a;border-radius:10px;padding:.4rem .6rem;font-size:.85rem;white-space:nowrap} .calc .input-group .count{flex:1;text-align:center} .calc .add-item{display:block;width:100%;margin-top:.5rem;background:var(--dark);color:#fff;border-radius:10px;padding:.5rem;font-weight:700;text-align:center} .calc .add-item:hover{background:#000;color:var(--yellow)} .calc table{width:100%;font-size:.82rem;margin-top:.6rem} .calc table th,.calc table td{padding:.35rem .4rem;border-bottom:1px solid var(--line);text-align:left} .calc tfoot th{font-size:.95rem} .calc #calculator_buttons{margin-top:.6rem;display:flex;gap:8px} .calc #calculator_buttons .btn{flex:1;border:1px solid var(--line)} .calc #calc_send_order{background:var(--yellow);border-color:var(--yellow)} .calc .del_item{color:#c0392b} /* ----- BS3-совместимость (для калькулятора и старого контента внутр. страниц) ----- */ .hidden{display:none!important} .pull-left{float:left}.pull-right{float:right} .center-block{margin-left:auto;margin-right:auto} .text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center} .glyphicon-remove::before{content:"\00d7";font-size:1.1rem;line-height:1} @media(min-width:768px){.visible-xs{display:none!important}} @media(max-width:767px){.hidden-xs{display:none!important}} /* ----- модальные формы (cform: callme/request/...) ----- */ .md-modal{position:fixed;inset:0;z-index:2000;display:none;overflow-y:auto} .md-modal.md-show{display:block} .md-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55)} .md-modal #modal_alex{position:relative;z-index:2} .md-box{position:relative;max-width:500px;margin:48px auto} /* кружок-крестик вне формы: справа сверху, 15px отступ от формы */ .md-close{position:absolute;top:0;left:calc(100% + 8px);z-index:5;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--dark);display:block;text-decoration:none;box-shadow:var(--shadow)} .md-close::before,.md-close::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:currentColor;border-radius:0} .md-close::before{transform:translate(-50%,-50%) rotate(45deg)} .md-close::after{transform:translate(-50%,-50%) rotate(-45deg)} .md-close:hover{background:var(--yellow);color:var(--dark)} .md-modal .modal-dialog{margin:0;max-width:none;padding:0} /* на узких экранах вернём крестик в угол формы, чтобы не уезжал за край */ @media(max-width:639px){ .md-box{margin:48px 15px} .md-close{left:auto;right:10px;top:10px;width:34px;height:34px;background:#f1f1f1;box-shadow:none} .md-modal .modal-header{padding-right:54px} } .md-modal .modal-content{background:#fff!important;border:none;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;color:var(--ink)} .md-modal .modal-header,.md-modal .modal-body,.md-modal .modal-footer{background:#fff} .md-modal .modal-header{border-bottom:1px solid var(--line);padding:18px 22px} .md-modal .modal-title{font-weight:800;font-size:1.25rem;color:#1a1a1a!important;opacity:1!important} .md-modal .form-control-static{color:#555!important} .md-modal .modal-footer a,.md-modal .modal-body a{color:var(--yellow-d)} .md-modal .modal-footer p{color:#8a8a8a} .md-modal .modal-body{padding:18px 22px} .md-modal .modal-footer{border-top:1px solid var(--line);padding:16px 22px;display:block;text-align:left} .md-modal .form-group{margin-bottom:.7rem} .md-modal .form-control{width:100%;border-radius:10px;border:1px solid var(--line);padding:.6rem .85rem} .md-modal .form-control:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(252,191,48,.18);outline:none} .md-modal textarea.form-control{min-height:92px} .md-modal .col-xs-12,.md-modal .col-xs-4{width:100%} .md-modal .control-label{display:block;font-weight:600;margin:.3rem 0} .md-modal .form-control-static{font-size:.85rem;color:var(--muted);margin-bottom:.4rem} .md-modal .media{display:flex;align-items:center;gap:12px;margin-top:6px} .md-modal .media img{border-radius:8px} .md-modal .btn-info,.md-modal .gy{background:var(--yellow)!important;border:none!important;color:var(--dark)!important;font-weight:700;border-radius:10px;padding:.6rem 1.4rem;display:inline-block} .md-modal .btn-info:hover,.md-modal .gy:hover{background:var(--yellow-d)!important;color:var(--dark)!important} .md-modal .modal-footer p{font-size:.78rem;color:var(--muted);margin:.7rem 0 0} .md-modal .mreq{border-color:#dc3545!important} /* валидация форм */ .md-modal .fc-alert{background:#fdecea;border:1px solid #f5c6cb;color:#b02a37;border-radius:10px;padding:.6rem .85rem;font-size:.85rem;margin-bottom:.9rem} .md-modal .fc-err{color:#c0392b;font-size:.78rem;margin-top:.25rem} .md-modal .has-error .form-control{border-color:#dc3545} .md-modal .has-error .form-control:focus{box-shadow:0 0 0 3px rgba(220,53,69,.15)} .md-modal .fc-check{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;cursor:pointer} .md-modal .fc-check input{margin-top:3px} /* ===== FC-формы (канон DPCMS) — модалка #formModal + .fc-* ===== */ #formModal .modal-content{position:relative;overflow:visible;border-radius:16px;border:none;box-shadow:0 24px 60px rgba(0,0,0,.25)} /* крестик-кружок вне формы справа сверху */ #formModal .md-x{position:absolute;top:0;left:calc(100% + 8px);z-index:5;width:40px;height:40px;border-radius:50%;background:#fff;border:none;box-shadow:var(--shadow);padding:0;cursor:pointer} #formModal .md-x::before,#formModal .md-x::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:var(--dark)} #formModal .md-x::before{transform:translate(-50%,-50%) rotate(45deg)} #formModal .md-x::after{transform:translate(-50%,-50%) rotate(-45deg)} #formModal .md-x:hover{background:var(--yellow)} @media(max-width:639px){#formModal .md-x{left:auto;right:8px;top:8px;background:#f1f1f1;box-shadow:none}} #formModal .modal-header{border-bottom:1px solid var(--line);padding:18px 24px;align-items:center} #formModal .modal-title{font-weight:800;color:var(--ink);font-size:1.3rem} #formModal .modal-body{padding:22px 24px 28px} .fc-field{margin-bottom:16px} .fc-field__label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--ink)} .fc-field__required{color:var(--yellow-d);margin-left:3px} .fc-form .form-control,.fc-form .form-select{border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font-size:15px;width:100%;background:#fff;color:var(--ink)} .fc-form .form-control:focus,.fc-form .form-select:focus{border-color:var(--yellow-d);outline:none;box-shadow:0 0 0 3px rgba(230,168,0,.15)} .fc-form textarea.form-control{min-height:90px;resize:vertical} .fc-divider{font-size:1.05rem;font-weight:800;margin:10px 0 6px} .fc-field--consent{margin-top:6px;margin-bottom:14px} .fc-consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:12px;color:var(--muted);line-height:1.5;margin:0} .fc-consent__input{flex:0 0 auto;width:16px;height:16px;margin-top:2px;accent-color:var(--yellow-d);cursor:pointer} .fc-consent__text a{color:var(--yellow-d)} .fc-field__error{font-size:12px;color:#d33;margin-top:5px;line-height:1.4} .fc-field--error .form-control{border-color:#d33} .fc-success{text-align:center;padding:30px 0} .fc-success__icon{font-size:48px;color:var(--yellow-d);margin-bottom:14px} .fc-success__title{font-size:22px;font-weight:800;margin:0 0 10px} .fc-success__text{color:var(--muted);font-size:15px;margin:0} .fc-captcha--math .form-control,.fc-captcha--image .form-control{max-width:200px} .fc-captcha--image{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fc-captcha--image .fc-captcha__img{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#f3f4f6;display:block} .fc-captcha--slider .fc-slider{position:relative;width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;background:#f3f4f6;overflow:hidden;user-select:none} .fc-captcha--slider .fc-slider__fill{position:absolute;inset:0 auto 0 0;width:46px;background:rgba(252,191,48,.25);transition:width .15s} .fc-captcha--slider.is-dragging .fc-slider__fill{transition:none} .fc-captcha--slider .fc-slider__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);pointer-events:none} .fc-captcha--slider .fc-slider__thumb{position:absolute;top:0;left:0;width:46px;height:46px;border:none;border-radius:10px;background:var(--dark);color:var(--yellow);cursor:grab;display:flex;align-items:center;justify-content:center;font-size:16px;touch-action:none} .fc-captcha--slider.is-dragging .fc-slider__thumb{cursor:grabbing} .fc-captcha--slider.is-verified .fc-slider{border-color:#1aa260;background:#e8f7ed} .fc-captcha--slider.is-verified .fc-slider__fill{background:rgba(26,162,96,.22)} .fc-captcha--slider.is-verified .fc-slider__thumb{background:#1aa260;color:#fff;cursor:default} /* ===== страница результатов поиска /search/ ===== */ .search-page{max-width:840px} .search-form{display:flex;gap:10px} .search-form .bi-search{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#999} .search-form .form-control{flex:1;border-radius:10px;border:1.5px solid var(--line);padding:.7rem 1rem .7rem 2.8rem} .search-form .form-control:focus{border-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(230,168,0,.15);outline:none} .search-count{color:var(--muted);margin-bottom:18px} .search-empty{text-align:center;color:var(--muted);padding:50px 0} .search-empty .bi{font-size:2.6rem;color:#d8d8d8;display:block;margin-bottom:10px} .search-results{display:flex;flex-direction:column;gap:10px} .search-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);transition:.18s} .search-item:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-2px)} .search-item__img{flex:0 0 64px;width:64px;height:64px;border-radius:8px;overflow:hidden;background:#f0f0f0} .search-item__img img{width:100%;height:100%;object-fit:cover} .search-item__body{flex:1;min-width:0} .search-item__title{font-weight:700;font-size:1.02rem;margin-bottom:3px} .search-item:hover .search-item__title{color:var(--yellow-d)} .search-item__snippet{font-size:.88rem;color:#666;line-height:1.45} .search-item__snippet mark{background:rgba(252,191,48,.4);color:inherit;padding:0 1px;border-radius:2px} .search-item__url{font-size:.78rem;color:#aaa;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search-item__price{flex:0 0 auto;font-weight:800;color:var(--yellow-d);white-space:nowrap} .search-item__go{flex:0 0 auto;color:#ccc;font-size:1.1rem} .search-item:hover .search-item__go{color:var(--yellow-d)} .jg-search__pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px;align-items:center} .jg-search__pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-weight:600;text-decoration:none} .jg-search__pg:hover{border-color:var(--yellow);color:var(--yellow-d)} .jg-search__pg.is-current{background:var(--yellow);border-color:var(--yellow);color:var(--dark)} .jg-search__dots{padding:0 4px;color:var(--muted)} /* ===== hero-калькулятор по каталогу (#hcalc) ===== */ .hcalc__tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px} .hcalc__tab{border:1px solid #6c757d;background:#fff;border-radius:9px;font-size:.86rem;font-weight:700;padding:.6rem .6rem;color:#6c757d;cursor:pointer;line-height:1.15;text-align:center;transition:.15s} .hcalc__tab:hover{background:#6c757d;border-color:#6c757d;color:#fff} .hcalc__tab.is-active{background:var(--yellow);border-color:var(--yellow);color:var(--dark)} .hcalc__tab.is-active:hover{background:var(--yellow-d);border-color:var(--yellow-d);color:var(--dark)} .hcalc__fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .6rem;margin-bottom:.3rem} .hcalc__levels{display:contents} .hcalc__lvl--full{grid-column:1 / -1} .hcalc__lvl,.hcalc__qty{margin-bottom:0;min-width:0} .hcalc__lvl select,.hcalc__qty input{max-width:100%} .hcalc__label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:3px;font-weight:600} .hcalc .form-select,.hcalc .form-control{width:100%;border-radius:10px;border:1px solid var(--line);padding:.75rem 1rem;font-size:1rem;background-color:#fff;color:var(--ink)} .hcalc select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.4rem!important;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:11px 11px} .hcalc .form-select:focus,.hcalc .form-control:focus{border-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(230,168,0,.15);outline:none} .hcalc__res{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff8e8;border:1px dashed #f3d68a;border-radius:12px;padding:.7rem 1rem;margin:.3rem 0 .7rem} .hcalc__sum{font-size:1.4rem;font-weight:600;color:var(--ink);line-height:1.1} .hcalc__per{background:var(--yellow);color:var(--dark);border-radius:999px;padding:.32rem .8rem;font-size:.8rem;font-weight:800;white-space:nowrap} .hcalc__per:empty{display:none} /* адаптив */ @media(max-width:991px){ .hdr .logo img{height:44px} .megacat{display:none!important} } /* ===== Калькулятор металла (страница /calculator/, #inner.calculator) ===== */ .calculator #center{max-width:none} .calculator h1{margin-bottom:.5rem} .calculator .section-description{color:var(--muted);font-size:.93rem;line-height:1.65;margin-bottom:26px} .calculator h4{font-size:1rem;font-weight:800;margin:0 0 .8rem;color:var(--ink)} .calculator .calc-layout{align-items:stretch} /* колонки-панели: левая и правая в одном стиле (серая плашка, равная высота). Фон/рамка — на внутреннем .calc-panel (height:100% → равная высота через stretch колонок), а гаттер g-4 самой BS-колонки остаётся прозрачным → виден отступ между плашками. */ .calculator .calc-panel{height:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px} @media(max-width:575px){.calculator .calc-panel{padding:16px}} /* селекты каталога — стрелка как в теме */ .calculator #calculator_items .form-group{margin-bottom:.7rem} .calculator #calculator_items>div+div,.calculator #calculator_items .items_list{margin-top:.2rem} .calculator select.form-control{ width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer; border:1.5px solid var(--line);border-radius:10px;background-color:#fff;color:var(--ink); font-size:.95rem;line-height:1.3;padding:.7rem 2.6rem .7rem 1rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23202020' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 12px; text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s} .calculator select.form-control:hover{border-color:#d2d2d2} .calculator select.form-control:focus{border-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(230,168,0,.15);outline:none} .calculator #calculator_items>div>p{color:var(--muted);font-size:.88rem;margin:.4rem 0} /* карточка изделия */ .calculator .items_list{display:flex;flex-direction:column;gap:12px;margin-top:12px} .calculator .calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 20px} .calculator .calc-card h4{font-size:1.02rem;line-height:1.3;margin-bottom:.7rem} .calculator .calc-card__desc{color:var(--muted);font-size:.88rem;margin:0 0 .7rem} .calculator .calc-card__specs{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.9rem} .calculator .calc-card__specs td{padding:.42rem .1rem;border-bottom:1px solid var(--line);vertical-align:top} .calculator .calc-card__specs tr:last-child td{border-bottom:none} .calculator .calc-card__specs td:first-child{color:var(--muted);white-space:nowrap;width:46%} .calculator .calc-card__specs td:first-child b{font-weight:600} .calculator .calc-card__specs td:last-child{text-align:right;font-weight:700;color:var(--ink)} .calculator .calc-card__add{display:inline-flex;align-items:center;justify-content:center} /* таблица сметы */ .calculator #calculator_form .table-responsive{border-radius:12px} .calculator #calculator_form table{width:100%;border-collapse:collapse;margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.9rem} .calculator #calculator_form thead th{background:var(--dark);color:#fff;font-weight:700;font-size:.82rem;padding:.7rem .7rem;text-align:left;border:none;white-space:nowrap} .calculator #calculator_form tbody td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle} .calculator #calculator_form tbody tr:last-child td{border-bottom:none} .calculator #calculator_form tr.empty td{color:var(--muted);text-align:center;padding:1.4rem .7rem;font-size:.9rem} .calculator #calculator_form input{width:72px;border:1.5px solid var(--line);border-radius:8px;padding:.35rem .4rem;text-align:center;font-weight:700;color:var(--ink)} .calculator #calculator_form input:focus{border-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(230,168,0,.15);outline:none} .calculator #calculator_form tfoot th{background:var(--yellow);color:var(--ink);padding:1rem .8rem;font-size:1.1rem;border-top:2px solid var(--yellow-d)} .calculator #calculator_form tfoot #total_sum{color:var(--ink);font-weight:800;font-size:1.2rem} .calculator a.del_item{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#c0392b;border:1px solid var(--line);transition:.15s} .calculator a.del_item:hover{background:#fdecec;border-color:#f3c4c4;color:#a52617} .calculator a.del_item .glyphicon-remove{line-height:1} /* кнопки действий */ .calculator .calc-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px} .calculator .calc-actions .btn{display:inline-flex;align-items:center} .calculator .calc-clear{color:var(--muted);border-color:var(--line)} .calculator .calc-clear:hover{background:#fff;border-color:#c9c9c9;color:var(--ink)} @media(max-width:575px){ .calculator .calc-actions{flex-direction:column-reverse} .calculator .calc-actions .btn{width:100%;justify-content:center} } /* ============================================================ ЭТАП 2 — внутренние страницы каталога: список товаров (таблица), фильтр, пагинация, карточка товара, похожие предложения ============================================================ */ /* ----- BS3 spacing/утилиты для старого контента карточки ----- */ .mt-0{margin-top:0!important}.mt-10{margin-top:10px!important}.mt-30{margin-top:30px!important} .mb-30{margin-bottom:30px!important}.mb-50{margin-bottom:50px!important} .ml-0{margin-left:0!important}.mr-0{margin-right:0!important} .text-nowrap{white-space:nowrap} .text-bold{font-weight:800} .img-responsive{max-width:100%;height:auto} /* ссылки внутри текстового контента страниц — брендовые */ .content-box :is(p,li,.full_description,.description) a{color:var(--yellow-d);text-decoration:underline;text-underline-offset:2px} .content-box :is(p,li,.full_description,.description) a:hover{color:var(--dark)} /* ----- кнопка «В КОРЗИНУ» / «Купить» (.ord_r) ----- */ .ord_r{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--yellow);color:var(--dark)!important;font-weight:700;font-size:.82rem;line-height:1.15;border-radius:9px;padding:.5rem .95rem;white-space:nowrap;border:none;cursor:pointer;transition:.15s} .ord_r:hover{background:var(--yellow-d);color:var(--dark)!important} /* ----- список товаров (таблица catlist_items2) ----- */ .content-box .table-responsive{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:14px 0} .content-box .table-responsive>table{margin:0;border:none;border-radius:0} .content-box table th{background:var(--dark);color:#fff;font-weight:700;font-size:.85rem;white-space:nowrap;vertical-align:middle;border-color:rgba(255,255,255,.10)} .content-box table td{vertical-align:middle;font-size:.92rem} .content-box table tr:not(.visible-xs):hover td{background:#fff9e9} .content-box table td a[href]{color:var(--ink);font-weight:600} .content-box table td a[href]:hover{color:var(--yellow-d)} .content-box table td.text-bold,.content-box table .text-bold{font-weight:800;white-space:nowrap;color:var(--ink)} .content-box table td .ord_r{padding:.45rem .85rem;font-size:.78rem} /* ----- фильтр (.full_filter) ----- */ .full_filter{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 8px} .full_filter:not(:has(.form-group)){display:none} /* скрыть пустой фильтр без полей и без Вид (2026-07-14) */ .full_filter .row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;margin:0} @media(max-width:767px){.full_filter .row{grid-template-columns:1fr 1fr}} @media(max-width:479px){.full_filter .row{grid-template-columns:1fr}} .full_filter .form-group{margin:0;min-width:0;padding:0} .full_filter label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:5px} .full_filter select.form-control{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1.5px solid var(--line);border-radius:10px;background-color:#fff;color:var(--ink);font-size:.92rem;line-height:1.3;padding:.62rem 2.4rem .62rem .9rem;cursor:pointer;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23202020' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 12px;transition:border-color .15s,box-shadow .15s} .full_filter select.form-control:hover{border-color:#d2d2d2} .full_filter select.form-control:focus{border-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(230,168,0,.15);outline:none} .full_filter .form-control-static{display:flex;align-items:flex-end;height:100%;padding:0} .full_filter .form-control-static br{display:none} .full_filter .ord_r{width:100%;background:#fff;color:var(--ink)!important;border:1.5px solid var(--line);padding:.62rem .9rem} .full_filter .ord_r:hover{background:#fff;border-color:var(--yellow);color:var(--yellow-d)!important} /* ----- пагинация списка (.pagination .pagi) ----- */ .content-box .pagination{display:block;margin:22px 0 4px;padding:0} .content-box .pagination .pagi{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .content-box .pagination .pagi .pages{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center} .content-box .pagination .pagi a,.content-box .pagination .pagi span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none} .content-box .pagination .pagi a:hover{border-color:var(--yellow);color:var(--yellow-d)} .content-box .pagination .pagi .pages span{background:var(--yellow);border-color:var(--yellow);color:var(--dark)} .content-box .pagination .pagi>span.prev,.content-box .pagination .pagi>span.next{color:#c2c2c2} /* ----- карточка товара ----- */ .content-box .baguette-box img{border-radius:var(--radius);border:1px solid var(--line)} .pr_q{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:var(--radius);padding:16px 20px;margin:18px 0;font-weight:700} .pr_q span{font-size:1.35rem;font-weight:800;color:var(--ink)} .pr_q .ord_r{margin-left:auto;padding:.62rem 1.6rem;font-size:.92rem} @media(max-width:575px){.pr_q .ord_r{margin-left:0;width:100%}} /* характеристики: две колонки, строка «метка — значение» */ .content-box h2{font-size:clamp(1.2rem,2vw,1.6rem);margin:28px 0 14px} .content-box .row:has(>.characteristics2){display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0} @media(max-width:575px){.content-box .row:has(>.characteristics2){grid-template-columns:1fr}} .characteristics2{min-width:0;width:100%;float:none} .content-box .row:has(>.characteristics2)>.characteristics2:first-child{border-right:1px solid var(--line)} @media(max-width:575px){.content-box .row:has(>.characteristics2)>.characteristics2:first-child{border-right:none;border-bottom:1px solid var(--line)}} .content-box .characteristics{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:16px;padding:.68rem 1rem;margin:0;border-bottom:1px solid var(--line);transition:background .12s} .content-box .characteristics2 .characteristics:nth-child(even){background:var(--bg)} .content-box .characteristics2 .characteristics:last-child{border-bottom:none} .content-box .characteristics:hover{background:#fffdf5} .content-box .characteristics>.col-xs-6{width:auto;padding:0;flex:0 1 auto} .content-box .characteristics>.col-xs-6:first-child{color:var(--muted);flex:1 1 auto;min-width:0} .content-box .characteristics>.col-xs-6:last-child{font-weight:700;text-align:right;flex:0 0 auto;white-space:nowrap;padding-left:24px} /* доставка / оплата (BS3 .media) */ .content-box .media{display:flex;align-items:center;gap:14px;margin:0 0 14px} .content-box .media-left,.content-box .media-right,.content-box .media-middle{flex:0 0 auto} .content-box .media-object{width:40px;height:40px;object-fit:contain;border:none;border-radius:0;flex:0 0 40px} .content-box .media-body{flex:1 1 auto;min-width:0;font-size:.92rem;color:#444} .item-preim{font-size:1.2rem!important;margin-top:0} /* табы описания (BS3 nav-pills; фикс .fade opacity под BS5) */ .item_tabs .nav-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 16px} .item_tabs .nav-pills>li>a{display:inline-block;border:1.5px solid var(--line);border-radius:10px;padding:.5rem 1.1rem;font-weight:700;color:var(--ink)} .item_tabs .nav-pills>li.active>a{background:var(--dark);color:#fff;border-color:var(--dark)} .content-box .item_tabs .tab-content>.tab-pane{display:none} .content-box .item_tabs .tab-content>.tab-pane.active{display:block;opacity:1} /* ----- похожие предложения (.l-similar / .sim) ----- */ .l-similar{margin-top:36px} .l-similar h2,.l-similar .h2{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:800;margin-bottom:18px} .l-similar .list{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:0} @media(max-width:991px){.l-similar .list{grid-template-columns:repeat(3,1fr)}} @media(max-width:575px){.l-similar .list{grid-template-columns:1fr}.l-similar .list>div>a{transition:none}.l-similar .list>div>a:hover{box-shadow:none;transform:none;border-color:var(--line)}} .l-similar .list>div{width:auto!important;max-width:none!important;float:none!important;padding:0!important;margin:0!important} .l-similar .list>div>a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:.22s} .l-similar .list>div>a:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent} .l-similar .pic{margin:0} .l-similar .item-icon,.l-similar .item-icon-2{height:150px;background:#f0f0f0;overflow:hidden} .l-similar .item-icon-2{display:none} .l-similar .item-icon img{width:100%;height:100%;object-fit:cover;border:none;border-radius:0} .l-similar .item-title{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--dark);color:#fff;padding:10px 10px;border-bottom:3px solid var(--yellow)} .l-similar .item-title .ct{font-size:.84rem;font-weight:600;line-height:1.22} .l-similar .list>div>a:hover .item-title{color:var(--yellow)} /* товары без фото — фирменная заглушка вместо старого «No Image» (noimage.jpg) */ .l-similar .item-icon:has(img[src*="noimage"]){background:#3c3c3c url("/resources/custom/image/no-image.svg") center/112px no-repeat} .l-similar .item-icon img[src*="noimage"]{display:none} /* ----- левое меню каталога: стилизация + аккордеон ----- */ .side-menu{padding:8px;max-height:calc(100vh - 110px);overflow-y:auto} .side-menu .root{display:flex;flex-direction:column;gap:2px;padding:0} .side-menu .cat-item{position:relative;border-radius:10px} .side-menu .cat-item>a{display:block;font-weight:700;font-size:.95rem;color:var(--ink);padding:10px 42px 10px 12px;border-radius:10px;line-height:1.25} .side-menu .cat-item>a:hover{background:var(--bg);color:var(--yellow-d)} .side-menu .cat-item.is-active-cat>a{color:var(--yellow-d)} /* шеврон-тумблер (добавляется JS) */ .side-menu .sm-toggle{position:absolute;top:8px;right:9px;width:22px;height:22px;padding:0;border:none;background:transparent;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:#b3b3b3} .side-menu .sm-toggle::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-2px;transition:transform .2s} .side-menu .sm-toggle:hover{background:var(--bg);color:var(--ink)} .side-menu .cat-item.is-open>.sm-toggle::before{transform:rotate(-135deg);margin-top:2px} /* подменю (из $item.menu: .row / .col-xs-* /

Метка:

/