/* =========================  RESET & BASE  ========================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{--header-h:110px}
html,body{overflow-x:hidden}
body{
  padding-top:var(--header-h);
  font-family:Tahoma,sans-serif;
  background:#fff;
  line-height:1.4;
  color:#333
}
a{text-decoration:none;color:#2580C3}
ul{list-style:disc outside}

/* =========================  HEADER  ========================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:1000;background:#fff;transition:box-shadow .2s
}
.header.is-stuck{box-shadow:0 2px 8px rgba(0,0,0,.08)}

.header-top{background:#F5F5F5}
.header-top__inner{
  width:1200px;margin:0 auto;padding:8px 0;display:flex;justify-content:space-between;align-items:center;font-size:.9rem
}
.header-top__left{display:flex}
.header-top__left a{color:#1D1D1D;margin-right:20px;font-size:14px;font-weight:400}
.header-top__left a:hover{text-decoration:underline}
.company-link{display:flex;align-items:center}
.company-link .arrow{margin-left:3px;font-size:.8rem;color:#666}
.header-top__center{flex:1;text-align:center}
.new-version-link{color:#2580C3;font-weight:400}
.header-top__right{display:flex;align-items:center;gap:16px}
.header-top__right span{font-size:13px;font-weight:400;color:#1D1D1D80}
.header-top__right strong{font-weight:700}

.header-mid{background:#fff}
.header-mid__inner{display:flex;gap:16px;align-items:center;padding:10px 0;margin:0 auto}

/* search */
.header-search{display:flex;flex:1;justify-content:space-between;align-items:center;background:#F5F5F5;border-radius:24px;position:relative}
.header-search input{flex:1 1 auto;padding:6px 10px;min-width:0;border:none;background:transparent;border-radius:4px 0 0 4px}
.header-search input:focus{outline:none}
.header-search input::placeholder{color:#BEBEBE}
.search-btn{border:none;background:transparent;padding:6px 12px;cursor:pointer;border-radius:0 4px 4px 0}
.clear-btn{position:absolute;right:52px;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:0;cursor:pointer;display:none}
.header-search.has-text .clear-btn{display:block}
.search-dropdown{
  max-height:353px;overflow-y:auto;position:absolute;left:50%;top:calc(100% + 6px);
  padding:24px 24px 16px;display:none;gap:24px;background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.15);
  z-index:2000;transform:translateX(-50%);max-width:min(1200px,100vw - 32px)
}
.header-search.open .search-dropdown{display:flex}
.search-col{display:flex;flex-direction:column;flex:1;min-width:160px;max-height:353px;overflow-y:auto}
.search-col:not(:last-child){border-right:1px solid #eee}
.search-col h4{position:sticky;top:0;background:#fff;z-index:2;padding-bottom:8px;font:700 20px/1 Tahoma,sans-serif;margin-bottom:12px}
.search-col ul{list-style:none;margin:0;padding:0}
.search-col li+li{margin-top:8px}
.news-list li{line-height:1.2}
.news-list time{display:block;font-size:12px;color:#999}
.products li{display:flex;gap:8px;align-items:flex-start}
.products img{width:40px;height:40px;object-fit:contain}
.products .title{font-size:14px;line-height:1.25}
.products .sub{font-size:12px;color:#777}
.search-dropdown a{color:#1D1D1D;transition:color .15s}
.search-dropdown a:hover{color:#2580C3;text-decoration:underline}
.products li>a{display:flex;gap:8px}

/* cart / compare / buttons */
.header-cartinfo{display:flex;align-items:center}
.cart-icon{background:#F5A08B;color:#fff;padding:10px;border-radius:8px;font-size:1.2rem;margin-right:10px}
.cart-icon:hover{background:#e47f6b;transition:background .2s}
.cart-text{display:flex;flex-direction:column}
.cart-qty{color:#F5A08B}
.cart-sum{font-weight:700}
.header-compare{position:relative;width:40px;height:40px;border-radius:50%;background:#F5F5F5;display:flex;justify-content:center;align-items:center}
.compare-icon{background:#F5F5F5;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:1rem;color:#555}
.compare-count{position:absolute;top:-5px;right:-5px;background:#FF4A4A;color:#fff;border-radius:999px;min-width:20px;height:13px;padding:0 4px;font-size:9px;display:flex;justify-content:center;align-items:center;line-height:1}
.header-buttons{display:flex;gap:10px;margin-left:auto}

/* =========================  DROPDOWN (MEGA)  ========================= */
.dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:4px;cursor:pointer}
.dropdown-toggle .arrow{transition:transform .2s}
.dropdown:hover .arrow,.dropdown.open .arrow{transform:rotate(180deg)}
.dropdown-menu{
  position:absolute;top:100%;left:0;z-index:100;display:none;width:540px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);overflow:auto;padding:16px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15);border-radius:16px
}
.dropdown:hover>.dropdown-menu,.dropdown.open>.dropdown-menu{display:flex}
.dropdown-menu.dir-left{left:auto;right:0}
.dropdown-menu.dir-up{top:auto;bottom:100%;border-radius:16px}
.dropdown-col{flex:1}
.dropdown-col+.dropdown-col{border-left:1px solid #d6dee6;padding-left:32px}
.dropdown-menu h4{font:700 15px/1.3 Tahoma,sans-serif;margin:12px 0 4px;color:#0066b3}
.dropdown-menu ul{margin:0 0 12px;padding:0;list-style:none}
.dropdown-menu a{display:block;padding:2px 0;font:14px/1.4 Tahoma,sans-serif;color:#111}
.dropdown-menu a:hover{color:#0066b3;text-decoration:underline}

/* =========================  TOP SECTION & PROMO  ========================= */
.top-section{display:flex;gap:20px;margin-top:16px}
.top-section__left{flex:1;display:flex;flex-direction:column;gap:20px}
.top-section__right{width:360px}

.promo-big-block{
  background:#f5f5f5;border-radius:16px;display:flex;justify-content:space-between;padding:20px;position:relative;
  background-image:url('./images/tape.png');background-repeat:no-repeat;background-position:top right;background-size:60% 100%
}
.promo-big-block__content{max-width:60%}
.promo-big-block__content h1{font-size:28px;font-weight:700;margin-bottom:10px;color:#1D1D1D}
.subtitle{color:#1D1D1D;margin-bottom:15px}
.btn-big{padding:12px 24px;font-size:1rem}
.btn-blue{background:#2580C3;color:#fff;border:none}
.balloons-img{height:100%;margin-left:5px}

/* promo image container + frames */
.promo-big-block__image{position:relative;flex:0 0 40%;min-height:220px;overflow:hidden}
.pr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.promo-big-block__image>.pr-img:first-child{opacity:1}
@keyframes fromTop{0%{transform:translateY(-100%)}100%{transform:none;opacity:1}}
@keyframes fromBottom{0%{transform:translateY(100%)}100%{transform:none;opacity:1}}
@keyframes fromLeft{0%{transform:translateX(-100%)}100%{transform:none;opacity:1}}
@keyframes fromRight{0%{transform:translateX(100%)}100%{transform:none;opacity:1}}
.from-top{animation:fromTop .8s ease-out forwards}
.from-bottom{animation:fromBottom .8s ease-out forwards}
.from-left{animation:fromLeft .8s ease-out forwards}
.from-right{animation:fromRight .8s ease-out forwards}

/* =========================  MINI PROMO + LOGIN  ========================= */
.promo-mini-blocks{display:flex;gap:20px}
.promo-mini-block{flex:1;background:#f5f5f5;border-radius:16px;padding:15px;display:flex;gap:10px}
.mini-block__icon{width:24px;padding-top:6px;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center}
.mini-block__icon img{max-width:40px}
.mini-block__text{display:flex;flex:1;gap:8px;flex-direction:column;justify-content:space-between}
.mini-block__text .btn{margin-top:auto;width:fit-content;padding:6px 16px}
.mini-block__text h3{font-size:1.1rem}

.login-panel{background:#2580C3;color:#fff;padding:16px;border-radius:16px}
.login-panel h3{margin-bottom:15px;font-size:18px}
.login-panel form{display:flex;flex-direction:column;gap:10px}
.form-group{position:relative}
.form-group input{width:100%;padding:24px 16px 8px;border-radius:8px;border:none;font-size:1.1rem;color:#000;background:#fff}
.form-group input:focus{outline:none}
.form-group input::placeholder{color:transparent}
.form-group label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#1D1D1D;font-size:1rem;pointer-events:none;transition:.2s}
.form-group input:focus+label,.form-group input:not(:placeholder-shown)+label{top:8px;transform:none;font-size:.75rem;color:#1D1D1D4D}
.password-field{position:relative;display:flex;align-items:center}
.toggle-pass{position:absolute;right:8px;background:transparent;border:none;color:#555;cursor:pointer}
.form-group .toggle-pass{top:50%;transform:translateY(-50%);padding:0}
.login-links{display:flex;flex-direction:column;gap:5px;font-size:.85rem}
.login-links a{color:#fff;text-decoration:underline}

/* =========================  BANNERS + NEWS  ========================= */
.two-banners-and-news{display:flex;gap:16px}
.banners-block{display:flex;flex:2;gap:16px}
.banner-card{flex:1;width:220px;border-radius:16px;color:#1D1D1D;padding:15px;display:flex;gap:16px;flex-direction:column;align-items:flex-start}
.banner-card .btn{margin-top:auto}
.banner-green{background:#84EF804D}
.banner-yellow{background:#F2E99CCC}
.banner-card h3{font-size:18px;color:#333;line-height:1.3}

.news-panel{flex:1;background:#fff;border-radius:8px;padding:15px;border:none;display:flex;flex-direction:column;gap:10px}
.news-panel__header{display:flex;justify-content:space-between;align-items:center}
.news-panel__header h2{font-size:1.2rem;color:#333}
.news-item h4{color:#2580C3;margin-bottom:3px;font-size:1rem}
.news-item h4 a{color:#2580C3}
.news-item h4 a:hover{text-decoration:underline}
.news-item time{font-size:.85rem;color:#666}

/* =========================  FOUR COLS  ========================= */
.col-block{background:none;border:none}
.col-title{text-align:center;margin:0 0 12px;font:700 18px/1.25 Tahoma,sans-serif;color:#333}
.col-block img{width:100%;display:block}
.col-block ul{margin-top:5px;list-style:disc outside;padding-left:20px}
.col-block ul li{margin-bottom:5px}
.col-block ul li::marker{color:#2580C3}
.col-block ul li a{color:#2580C3;font:400 15px/1.5 Tahoma,sans-serif}
.col-block a:hover{text-decoration:underline}

@media(min-width:601px){
  .four-cols{display:flex;justify-content:space-between;gap:20px;margin-top:0;overflow:visible}
  .four-cols .swiper-wrapper{display:flex;gap:20px;width:100%!important}
  .four-cols .swiper-slide{flex:1 1 0;width:auto!important;height:auto!important}
  .four-cols .swiper-pagination{display:none!important}
}

/* =========================  PARTNERS  ========================= */
.partners{margin-bottom:30px}
.partners h2{font-size:1.5rem;margin-bottom:15px}
.partners-list{
  display:flex;justify-content:space-between;align-items:center;list-style:none;flex-wrap:wrap;padding:0;margin:0
}
.partners-list li{
  height:80px;display:flex;align-items:center;justify-content:center;flex:1 1 0;padding:0 10px;border-right:2px dotted #999
}
.partners-list li:last-child{border-right:none}
.partners-list a img{display:block}

/* =========================  FOOTER  ========================= */
.footer{margin-top:30px;font-size:.9rem;color:#333}
.footer .container{padding:0}

.footer-line1{background:#f9f9f9;padding:10px 0}
.footer-line1__inner{display:flex;justify-content:space-between;align-items:center}
.footer-menu-center{display:flex;align-items:center}
.footer-menu-center a{margin-left:20px;color:#333}
.footer-line1__right .btn-blue{background:#2580C3;color:#fff;border:none}

.footer-line2{background:#F8F8F8;padding:15px 0}
.footer-line2__inner{display:flex;justify-content:space-between;align-items:center;gap:20px}

.footer-news-block{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:16px}
.icon-bubble{width:32px;height:32px;background:#2580C3;padding:6px;border-radius:8px}
.icon-bubble img{width:100%;height:100%}
.news-text p{font-size:.9rem;line-height:1.3}

.footer-social-block{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:10px}
.footer-social-block p{margin-right:10px}
.footer-social-block .social-icons{display:flex;gap:12px}
.footer-social-block .social-icons .icon-bubble{background:#F3F3F3}
.footer-social-block .social-icons a img{width:100%;height:100%}

.footer-question-block{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:10px}
.footer-question-block p{margin-right:10px}
.footer-question-block .question-icons a img{width:32px;margin-left:5px}

.footer-line3{background:#F8F8F8;padding:10px 0}
.footer-line3__inner{display:flex;justify-content:space-between;align-items:center}
.footer-left-info{font-weight:700}
.footer-phones span{margin-left:20px}
.footer-right-credit p{display:flex;align-items:center;gap:5px}
.footer-right-credit img{height:14px}

/* =========================  USER PANEL  ========================= */
.user-panel{background:#F8F8F8;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:16px;color:#1D1D1D;font-size:14px}
.user-panel__head{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.user-panel__filling{gap:8px}
.logout-btn{padding:0;background:transparent;border:none;cursor:pointer}
.user-ask{background:#fff;border-radius:16px;padding:18px 12px;text-align:center;font-size:14px;display:flex;flex-direction:column;gap:16px}
.user-ask__icons{display:flex;justify-content:center;gap:16px}
.user-ask__icons a{width:auto;height:auto;background:none;border-radius:0;padding:0;line-height:0}
.user-ask__icons img{width:32px;height:32px}
.user-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:14px}
.user-links a{color:#2580C3;text-decoration:underline}
.user-links a:hover{text-decoration:none}
.logout-btn img{width:20px;height:20px}
.logout-btn:hover{opacity:.8}

/* =========================  CATALOG  ========================= */
.breadcrumbs{font-size:13px;color:#777;margin-bottom:8px}
.breadcrumbs a{color:inherit}
.breadcrumbs a:hover{text-decoration:underline}

.catalog-wrapper{display:flex;gap:24px;margin-top:16px}
.catalog-nav{width:220px;flex-shrink:0;font-size:15px}
.catalog-nav h3{font-size:16px;margin-bottom:8px;color:#2580C3}
.catalog-nav ul{list-style:none;padding-left:0}
.catalog-nav li+li{margin-top:4px}
.catalog-nav h3 a{color:#2580C3}
.catalog-nav a{color:#1D1D1D}
.catalog-nav a:hover{color:#2580C3;text-decoration:underline}

.catalog-side{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:20px}
.filter-panel{background:#F5F5F5;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:20px;font-size:16px}
.filter-panel h4{font-size:20px;margin:0}
.filter-selects select{
  display:block;width:100%;padding:9.5px 12px;border:none;border-radius:8px;background:#fff url("./images/chevron-down.svg") no-repeat right 20px center;background-size:18px;
  font:16px/1.3 Tahoma,sans-serif;color:#000;appearance:none
}
.filter-selects select:focus{outline:none;box-shadow:0 0 0 2px rgba(37,128,195,.3)}
.filter-selects select option[disabled]{color:#BEBEBE}
.filter-selects select+select{margin-top:12px}
.filter-group{display:flex;flex-direction:column;gap:12px}
.filter-group label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.filter-group input[type="checkbox"]{width:16px;height:16px;border:2px solid #1D1D1D80;border-radius:2px;cursor:pointer;appearance:none;position:relative}
.filter-group input[type="checkbox"]:checked{background:#2580C3;border-color:#2580C3}
.filter-group input[type="checkbox"]:checked::after{content:"";position:absolute;left:50%;top:45%;width:8px;height:3px;border:2px solid #fff;border-right:none;border-top:none;transform:translate(-50%,-50%) rotate(-45deg)}
.filter-warning{display:flex;align-items:center;gap:4px;background:#FF4A4A1A;color:#FF4A4A;padding:4px 8px;border-radius:16px;font-size:13px}
.filter-warning .icon{flex-shrink:0;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1}
.filter-actions{display:flex;flex-direction:column;gap:12px}
.filter-actions .btn{padding:9.5px 15.5px;font-size:14px;border-radius:24px}

.catalog-main{flex:1 1 100%;min-width:0}
.catalog-header{display:flex;align-items:center;gap:16px}
.catalog-header h1{font-size:28px;line-height:1.2;margin:0}
.catalog-header .total{font-size:16px;color:#1D1D1D}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:16px}
.cat-card{background:#F5F5F5;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .15s}
.cat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.cat-card img{width:100%;object-fit:contain;border-radius:8px;background:#f5f5f5}
.cat-card h3{font-size:18px;color:#1D1D1D;margin:0}
.cat-card ul{list-style:none;padding-left:0;font-size:14px}
.cat-card li+li{margin-top:4px}
.cat-card a{color:#1D1D1D}
.cat-card a:hover{text-decoration:underline}

@media(max-width:991px){
  .catalog-wrapper{flex-direction:column}
  .catalog-nav,.catalog-side{width:100%}
  .catalog-nav ul{columns:2}
}

.page-title{font-weight:700;font-size:28px;line-height:1.25;margin:0 0 12px;color:#1D1D1D}
.page-lead{font-weight:400;font-size:16px;line-height:1.35;margin:0 0 32px;color:#1D1D1D}
.section-title{font-weight:700;font-size:20px;margin:0 0 24px;color:#1D1D1D}

.order-switch{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.switch-card{flex:1 1 380px;border-radius:20px;background:#F5F5F5;padding:16px;display:flex;flex-direction:column;gap:8px;border:none;text-align:left;cursor:pointer;transition:box-shadow .15s}
.switch-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.05)}
.switch-card.is-active{cursor:default;box-shadow:none}
.switch-card .card-main{font-weight:400;font-size:16px;line-height:1.4;color:#1D1D1D}
.switch-card .card-note{font-size:14px;color:#7A7A7A}
.switch-card a{text-decoration:underline}
.switch-card .card-main a{color:#0B79D0}
.switch-card .card-note a{color:#7A7A7A}

.order-steps{list-style:none;margin:0 0 40px;display:flex;flex-direction:column;gap:16px;padding:0}
.order-steps li{background:#F5F5F5;border-radius:16px;padding:16px;display:grid;grid-template-columns:24px 1fr;column-gap:12px;row-gap:0;align-items:start}
.step-icon{width:20px;height:20px;border-radius:50%;background:#0B79D0;display:flex;align-items:center;justify-content:center;flex-shrink:0;grid-column:1;grid-row:1/span 2;margin:4px 0 0}
.step-icon svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.step-head{display:flex;align-items:center;gap:8px;margin:0 0 4px;grid-column:2}
.order-steps p{margin:0;font-size:16px;line-height:1.45;color:#1D1D1D;grid-column:2}
.step-title{font-weight:700;font-size:16px;color:#1D1D1D}
.order-note{font-size:14px;line-height:1.45;margin-bottom:48px;color:#1D1D1D}

.cashcarry-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cashcarry-head h2{font-weight:700;font-size:24px;margin:0;color:#1D1D1D}
.map-link{font-weight:400;font-size:14px;color:#0B79D0}
.cashcarry-desc{font-size:14px;line-height:1.4;margin:0 0 24px;color:#1D1D1D}
.stores-title{font-weight:700;font-size:16px;margin:0 0 16px;color:#1D1D1D}
.stores-flex{display:flex;gap:24px}
.stores-flex>*{flex:1 1 50%}
.store-buttons{display:flex;flex-direction:column;gap:12px}
.store-btn{font-size:16px;font-weight:600;padding:10px 18px;border-radius:8px;border:none;text-align:left;cursor:pointer;background:#EAF3FF;color:#0B79D0;transition:background .15s}
.store-btn.is-active{background:#0B79D0;color:#fff}
.store-btn:hover:not(.is-active){background:#D8E9FF}
.store-map{background:#F5F7FA;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:24px}
.store-map img{width:100%;height:auto;display:block;border-radius:12px}
.btn-contact{width:100%;padding:14px 24px;border:none;background:#0B79D0;color:#fff;font-weight:600;font-size:16px;border-radius:12px;cursor:pointer}
.btn-contact:hover{opacity:.9}
@media(max-width:991px){
  .order-switch .switch-card{flex:1 1 100%}
  .stores-flex{flex-direction:column}
  .stores-flex>*{flex:1}
}
@media(max-width:600px){
  .page-title{font-size:24px}
  .page-lead{font-size:16px}
  .switch-card .card-main{font-size:16px}
  .switch-card .card-note{font-size:12px}
  .step-title{font-size:12px}
  .order-steps p{font-size:12px}
  .stores-title{font-size:16px}
  .store-btn{font-size:14px}
  .btn-contact{font-size:14px}
  .discount-table{display:none}
  .discount-table-mob{display:block}
}

/* =========================  TABLES / PAGINATION  ========================= */
.product-table-wrapper{
  --c-bg-head:#e9f3ff;--c-border:#d6dee6;--c-accent:#0078ba;
  --badge-new:#FF2F2F;--badge-sale:#F09915;--badge-hit:#FF32EB;--badge-spec:#2152F2;--badge-season:#38C795;--badge-preorder:#41BC1F;--badge-clear:#FF632F;--badge-stock:#fff;
  margin-top:24px
}
.img-toggle-line{margin:12px 0}
.img-toggle{color:var(--c-accent);display:inline-flex;align-items:center;gap:6px;
  text-decoration:underline}
.catalog-topbar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;}
.catalog-topbar .total{margin-left:auto}
.perpage a{color:var(--c-accent);text-decoration:underline}
.perpage a.is-active{color:#1d1d1d;text-decoration:none;font-weight:400}
.view-mode{display:flex;gap:8px;align-items:center}
.view-mode a{color:var(--c-accent);font-weight:700;text-decoration:underline}
.view-mode a.is-active{color:#1d1d1d;text-decoration:none}

/* === ТАБЛИЦА ТОВАРОВ === */
/* рамка только снаружи + разделители между строками */
.product-table{width:100%;border-collapse:collapse;border:1px solid var(--c-border);
  table-layout:auto}
.product-table th,.product-table td{border:none}
.product-table thead th{background:var(--c-bg-head);padding:12px 14px;font-weight:700;
  vertical-align:middle;border-bottom:1px solid var(--c-border)}
.product-table tbody tr+tr{border-top:1px solid var(--c-border)}
.product-table tbody td{padding:12px 14px;vertical-align:top}

/* центр. группа «Название | Код | Производитель» */
.product-table thead .col-name{text-align:center}
.th-groups{display:inline-flex;align-items:center;justify-content:center;gap:18px}
.th-group{display:inline-flex;align-items:center;gap:6px;position:relative;white-space:nowrap}
.th-group + .th-group::before{
  content:""; width:1px; height:1.2em; background:#c9d5e2; display:inline-block;
  margin:0 8px 0 4px;
}

/* единый элемент стрелки сортировки */
.sort-ico{display:inline-block;width:9px;height:11px;background:url('./images/arrows.gif') 0 0 no-repeat;
  text-indent:-9999px;overflow:hidden;flex:0 0 9px}

/* «Стоимость» — по левому краю */
.product-table thead .col-price{text-align:left}
.product-table thead .th-price{display:inline-flex;align-items:center;gap:6px}
.product-table .col-price .sub{font-size:12px;font-weight:400;color:#666;margin-top:2px}

/* колонка выбора — фикс ширина, одинаковое выравнивание чекбоксов */
.product-table .col-select{width:170px;text-align:left;white-space:nowrap}
.product-table .col-select label,
.product-table thead .col-select .select-all{display:flex;align-items:center;gap:8px;margin:0}
.product-table input[type="checkbox"]{margin:0}

/* ячейка с названием */
.product-info{display:flex;gap:12px;min-width:0}
.thumbs{flex:0 0 64px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.desc .title{color:#1a73e8;text-decoration:underline;font-weight:700;display:inline-block;margin:4px 0 6px}
.desc .meta{color:#666;font-size:14px}
.badges{display:flex;gap:6px;margin-top:2px}
.badge{display:inline-block;padding:4px 10px;border-radius:16px;color:#fff;font-size:12px;line-height:1}
.badge-new{background:var(--badge-new)}
.badge-sale{background:var(--badge-sale)}

/* правая колонка (цены/наличие/управление) */
.col-price .price-per-unit{font-weight:700;font-size:20px}
.col-price .price-per-pack{font-weight:700;margin-top:2px}
.col-price .ruble{font-weight:400}
.availability{margin:6px 0 8px;color:#666}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.dot.gray{background:#bbb}.dot.yellow{background:#f3c930}.dot.green{background:#49b45a}
.order-controls{display:flex;gap:8px;align-items:center}
.order-controls input[type="number"]{width:64px}
.unit-select{padding:6px 28px 6px 8px;border:1px solid #ccd6e0;border-radius:6px;
  background:#fff url('./images/chevron-down.svg') no-repeat right 8px center / 14px}
.btn-cart{width:34px;height:34px;border-radius:8px;border:1px solid #ccd6e0;background:#fff url('./images/cart.svg') center/18px no-repeat;}

/* нижние кнопки */
.product-bottom-actions{display:flex;gap:16px;margin:16px 0}
.btn-outline,.btn-primary{padding:10px 16px;border-radius:8px;border:1px solid #c9d5e2;background:#fff}
.btn-primary{background:#eaf3ff}

/* чтобы таблица не «выпирала» в сайдбар при узких экранах */
.catalog-main{min-width:0}

/* === ТАБЛИЦА СКИДОК (ДЕСКТОП) === */
.discount-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #cfe0ec;margin:16px 0 8px}
.discount-table th,.discount-table td{padding:12px 14px;border:1px solid #e0ebf4;border-left:none;border-top:none}
.discount-table th{background:#eef7ff;white-space:nowrap;text-align:left}
.discount-table tr:last-child td{background:#f9fbfc}
.discount-note{font-size:14px;color:#444}
.discount-note .red{color:#ff6a6a}

/* === ТАБЛИЦА СКИДОК (МОБИЛЬНАЯ ВЕРСИЯ — 2 колонки) === */
.discount-table-mob{display:none;margin:16px 0;border:1px solid #cfe0ec;border-radius:6px;overflow:hidden}
.dtm-row{display:grid;grid-template-columns:1fr 1fr}
.dtm-row:nth-child(odd){background:#f3f7f6}
.dtm-l,.dtm-r{padding:12px 14px;border-top:1px solid #e0ebf4}
.dtm-l{font-weight:600}
.sort-icon{display:inline-flex;flex-direction:column;gap:2px;margin-right:4px}
.sort-icon .arrow{width:6px;height:6px}
.pipe{margin:0 4px;color:var(--c-accent);font-weight:700}
.product-info{display:flex;gap:12px}
.thumbs img{width:48px;height:64px;object-fit:cover;border:1px solid #ddd;border-radius:4px}
.desc{line-height:1.3}
.desc .badges{margin-bottom:4px}
.title{color:var(--c-accent);font-weight:700;text-decoration:underline}
.meta{font-size:12px;color:#666}
.badge{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:12px;padding:1px 8px 2px;margin-right:4px}
.badge-new{background:var(--badge-new)}
.badge-sale{background:var(--badge-sale)}
.badge-hit{background:var(--badge-hit)}
.badge-spec{background:var(--badge-spec)}
.badge-season{background:var(--badge-season)}
.badge-preorder{background:var(--badge-preorder)}
.badge-clear{background:var(--badge-clear)}
.badge-stock{background:var(--badge-stock);color:#000;border:1px solid #aaa}
.col-price{min-width:230px}
.price-per-unit{font-weight:700;font-size:16px}
.price-per-pack{font-weight:700;font-size:15px}
.ruble{font-weight:400}
.price-per-unit small,.price-per-pack small{font-weight:400;font-size:12px}
.availability{font-size:12px;margin:4px 0 6px;color:#666;display:flex;align-items:center;gap:2px 4px}
.dot{width:8px;height:8px;border-radius:50%}
.dot.gray{background:#bfbfbf}
.dot.yellow{background:#f6b93b}
.dot.green{background:#7dbd34}
.order-controls{display:flex;align-items:center;gap:6px}
.order-controls input{width:60px;padding:4px 6px;text-align:center;border:1px solid var(--c-border);border-radius:4px}
.unit-select{padding:5px 4px;font-size:12px;border:1px solid var(--c-border);border-radius:4px;background:#fff;cursor:pointer}
.btn-cart{width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;background:var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='11' r='1'/%3E%3Ccircle cx='11' cy='11' r='1'/%3E%3Cpath d='M1 1h2l1 7h8l2-5H4'/%3E%3C/svg%3E") no-repeat center/12px 12px}
.btn-cart:hover{opacity:.9}
.product-bottom-actions{display:flex;justify-content:flex-end;gap:16px;margin:24px 0 16px}
.btn-outline,.btn-primary{padding:10px 24px;font-size:15px;border-radius:4px;cursor:pointer;transition:opacity .15s,background .15s}
.btn-outline{background:#f3f3f3;border:1px solid var(--c-border);color:#888}
.btn-primary{background:var(--c-accent);border:1px solid var(--c-accent);color:#fff}
[disabled]{opacity:.45;cursor:not-allowed}
.btn-showmore{display:block;width:100%;padding:18px 0;margin:0 auto 32px;background:#fff;border:1px solid var(--c-border);border-radius:4px;font-size:16px;cursor:pointer;transition:background .15s}
.btn-showmore:hover{background:#fafafa}
.pagination{display:flex;justify-content:center;gap:6px;margin-bottom:40px;font-size:0}
.page,.ellipsis{display:inline-block;font-size:15px;padding:8px 16px;border:1px solid var(--c-border)}
.page{color:var(--c-accent);cursor:pointer;transition:background .15s}
.page.is-active{background:#fff5cc;font-weight:700;pointer-events:none}
.page:hover:not(.is-active){background:#e9f3ff}
.ellipsis{border:none;color:#777}

.discount-table{width:100%;box-sizing:border-box;border:2px solid var(--c-border);border-collapse:collapse;table-layout:fixed}
.discount-table th,.discount-table td{border:1px solid var(--c-border);padding:4px;white-space:nowrap;font-size:11px}
.discount-table tr:first-child td{background:#e6f1e6}
.discount-table tr:nth-child(2) td{background:#d0dcdc}
.discount-note{font-size:14px;margin-bottom:64px}
.discount-note .red{color:#ff4a4a;font-weight:700}
.discount-table th:first-child{width:105px;text-align:left}
.product-table tbody td.col-check{text-align:center;vertical-align:middle}
.product-table tbody td.col-check input{vertical-align:middle}
.sort-icon{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:12px;vertical-align:middle;margin-right:4px;position:relative;top:-1px}
.sort-icon .arrow{width:6px;height:6px}

/* =========================  BUTTONS (COMMON)  ========================= */
.btn{display:inline-block;justify-content:center;padding:8px 16px;border-radius:24px;text-align:center;transition:.2s;background:#fff;border:1px solid #2580C3;color:#2580C3}
.btn:hover{opacity:.9}
.btn-primary{background:#2580C3;border:none;color:#fff}
.btn-light{background:#F5F5F5;color:#333;border:none}
.btn-light:hover{background:#e4e4e4;color:#000;transition:background .2s,color .2s}
.btn-big{padding:12px 24px;font-size:1rem}
.btn-blue{background:#2580C3;color:#fff;border:none}
.btn-outline{background:transparent;border:1px solid #2580C3;color:#2580C3}
.btn-outline:hover{background:#2580C3;color:#fff;transition:background .2s,color .2s}
.btn-submit{background:#2580C3;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer}
.btn-border-black{background:transparent;border:1px solid #000;color:#000;padding:6px 16px;border-radius:24px}
.btn-border-black:hover{background:#000;color:#fff;transition:background .2s,color .2s}
.btn-blue-subscribe{background:#2580C3;color:#fff;padding:6px 14px;border-radius:24px;border:none}
.btn-auth{color:#2580C3;border:1px solid #fff;background:#fff;padding:11.5px 0;margin-top:8px}
.btn-auth:hover{color:#fff;border:1px solid #2580C3;background:#2580C3;transition:background .2s,color .2s}
.btn-all-news{display:inline-block;width:fit-content;margin-top:auto;border:1px solid #2580C3;color:#2580C3;border-radius:24px;padding:6px 14px}
.btn-all-news:hover{background:#2580C3;color:#fff;transition:background .2s,color .2s}

/* =========================  MOBILE TOOLBAR & MENU  ========================= */
.mobile-only{display:none}
.mobile-tabbar{
  position:fixed;bottom:0;left:0;right:0;height:56px;z-index:1000;background:#fff;box-shadow:0 -2px 6px rgba(0,0,0,.06);font:12px/1 Tahoma,sans-serif
}
.mobile-menu-title{font-size:20px;font-weight:700;padding:0 24px 12px;margin-top:12px;color:#1D1D1D}
.mb-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#1d1d1d;background:none;border:0;position:relative;cursor:pointer}
.mb-item img{width:24px;height:24px}
.mb-item.is-active{color:#2580c3;font-weight:600}
.mb-item .badge{position:absolute;top:4px;right:22px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#ff4a4a;color:#fff;font-size:10px;line-height:16px;display:inline-flex;align-items:center;justify-content:center}
#mobile-menu{position:fixed;inset:0;z-index:2000;background:#fff;overflow-y:auto;transform:translateY(100%);transition:.35s cubic-bezier(.4,0,.2,1);border-radius:16px 16px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.15)}
#mobile-menu.open{transform:none}
.menu-close{position:absolute;top:18px;right:18px;width:28px;height:28px;border:none;cursor:pointer;background:url('./images/ico-close.svg') center/20px no-repeat}

/* mobile menu content */
.catalog-tiles{list-style:none;margin:0;padding:72px 24px 24px;display:flex;flex-direction:column;gap:12px}
.catalog-tiles li a{display:block;padding:14px 18px;border-radius:12px;background:var(--c,#ccc);color:#fff;font:600 18px/1 Tahoma,sans-serif}
.menu-links{padding:16px 24px 32px;display:flex;flex-direction:column;gap:12px;font:16px/1.3 Tahoma,sans-serif}
.menu-links a{color:#1d1d1d;padding:6px 0;display:block}
.menu-links a:not(:last-child){border-bottom:1px solid #eee}
.menu-links details>summary{position:relative;list-style:none;cursor:pointer;padding:12px 0;font-weight:400;border-bottom:1px solid #eee}
.menu-links details[open]>summary{margin-bottom:4px}
.menu-links summary::-webkit-details-marker{display:none}
.menu-links details>summary::after{
  content:'';position:absolute;right:0;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(0deg);transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231D1D1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 7 9 11 5'/%3E%3C/svg%3E") center/14px 14px no-repeat
}
.menu-links details[open]>summary::after{transform:translateY(-50%) rotate(180deg)}

/* =========================  SCROLLBARS  ========================= */
.scroll-area{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#F3F3F3 transparent}
.scroll-area::-webkit-scrollbar{width:4px}
.scroll-area::-webkit-scrollbar-track{background:transparent}
.scroll-area::-webkit-scrollbar-thumb{background:#F3F3F3;border-radius:4px}
.scroll-area::-webkit-scrollbar-button,
.scroll-area::-webkit-scrollbar-button:start,
.scroll-area::-webkit-scrollbar-button:end,
.scroll-area::-webkit-scrollbar-button:vertical:increment,
.scroll-area::-webkit-scrollbar-button:vertical:decrement,
.scroll-area::-webkit-scrollbar-button:single-button{width:0;height:0;display:none;background:none}

/* =========================  RESPONSIVE ≤1248  ========================= */
@media(max-width:1248px){
  .mobile-only{display:block}
  .desktop-only{display:none}
  .mobile-tabbar{display:flex}

  .header-top__left,.header-top__right{display:none!important}
  .header-top__center{flex:1;text-align:center;padding:4px 0}
  .header-mid__inner{width:100%;flex-direction:column;align-items:stretch;gap:8px;padding:8px 16px}
  .header-logo{display:flex;justify-content:space-between;align-items:center}
  .header-cartinfo,.header-compare,.header-buttons{display:none!important}
  .header-search{width:100%}
  .header-search input{font-size:16px}

  .catalog-topbar{flex-direction:column;gap:6px}
  .product-bottom-actions{flex-direction:column;align-items:stretch}
  .btn-showmore{font-size:15px}
  .header-top__inner{width:100%}

  /* auth button (mobile) */
  .auth-btn-mobile{
    border-radius:50%;
    padding:10px;
    border:none;
    width:44px;
    height:44px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#F3F3F3;
  }
  .auth-btn-mobile img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:none;
  }
  .auth-btn-mobile.is-logged-in{
    background:#2580C3;
  }
  .auth-btn-mobile.is-logged-in img{
    filter:brightness(0) invert(1);
  }

  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* =========================  RESPONSIVE ≤1246  ========================= */
@media(max-width:1246px){
  .container{padding:20px 16px}
  body{padding-top:var(--header-h)}

  .top-section{flex-direction:column;gap:24px}
  .top-section__right{width:100%}
  .promo-big-block{flex-direction:column;gap:20px;padding:24px 16px 28px}
  .promo-big-block__image{order:-1;min-height:200px}
  .promo-big-block__content{max-width:none}
  .promo-big-block__content h1{font-size:22px;line-height:1.2;margin:0 0 8px}
  .promo-big-block__content .subtitle{font-size:15px;margin:0 0 16px}
  .promo-big-block .btn-big{width:100%;border-radius:40px;font-size:16px}
  .promo-mini-blocks{flex-direction:column;gap:12px}

  .two-banners-and-news{flex-direction:column;gap:24px}
  .news-panel{order:-1}
  .banners-block{flex-direction:column;gap:24px}

  .four-cols{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:16px;padding-bottom:8px;cursor:grab;touch-action:pan-x}
  .four-cols.dragging{cursor:grabbing}
  .four-cols::-webkit-scrollbar{display:none}
  .four-cols .col-block{flex:0 0 88vw;scroll-snap-align:start;background:#F5F5F5;border-radius:20px;padding:20px}
  .four-cols .col-title{text-align:left;margin-bottom:12px}
  .four-cols img{margin-bottom:12px;border-radius:12px}
  .four-cols ul{font:15px/1.4 Tahoma,sans-serif;padding-left:18px}
  .four-cols .swiper-scrollbar{height:4px;border-radius:2px;background:#E6E6E6;margin-top:8px}
  .four-cols .swiper-scrollbar-drag{background:#2580C3;border-radius:2px}
  .four-cols.swiper{height:auto;margin-left:16px}
  .four-cols .swiper-slide{height:auto!important}

  #partnersSwiper{margin-left:16px;padding:0 0 12px;--logo-w:136px}
  #partnersSwiper h2{margin:0 0 12px}
  #partnersSwiper .swiper-wrapper{padding-left:16px!important;margin-right:0!important}
  #partnersSwiper .partners-list{display:flex;flex-wrap:nowrap;gap:24px;padding:0;margin:0}
  #partnersSwiper .partners-list li{border-right:none!important;padding:0!important}
  #partnersSwiper .swiper-slide{flex:0 0 var(--logo-w);width:var(--logo-w)!important;display:flex;align-items:center;justify-content:center}
  #partnersSwiper img{display:block;width:100%;height:auto;object-fit:contain}
  #partnersSwiper .swiper-scrollbar{height:4px;margin:8px 0 0;background:#e6e6e6;border-radius:2px}
  #partnersSwiper .swiper-scrollbar-drag{background:#666;border-radius:2px}

  .footer-line1__inner,.footer-line2__inner,.footer-line3__inner{flex-direction:column;gap:16px;text-align:center}
  .footer-menu-center{flex-wrap:wrap;justify-content:center}
  .footer-menu-center a{margin:6px 12px 0}
  .footer-line2__inner{align-items:stretch}
  .footer-news-block,.footer-social-block,.footer-question-block{flex-direction:column;align-items:flex-start}
  .footer-phones span{display:block;margin-top:4px}
  .btn-border-black{width:100%}

  .footer-line1{border-radius:40px 40px 0 0;padding:10px 16px}
  .footer-line1__inner{
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo btn" "nav nav";align-items:center;gap:16px;text-align:initial
  }
  .footer-menu-left{grid-area:logo}
  .footer-line1__right{grid-area:btn;justify-self:end}
  .footer-menu-center{grid-area:nav;flex-direction:column;align-items:flex-start;gap:16px;flex-wrap:nowrap;justify-content:flex-start;width:100%}
  .footer-menu-center a{margin:0}
  .footer-menu-center .dropdown-toggle{width:100%;justify-content:space-between}

  .footer-line2{padding:15px 16px}
  .footer-line2__inner{flex-direction:column;gap:16px}
  .footer-social-block,.footer-question-block{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .footer-social-block p,.footer-question-block p{margin:0}
  .footer-social-block .social-icons,.footer-question-block .question-icons{display:flex;gap:12px;margin-left:auto}
  .footer-news-block{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon text" "btn btn";align-items:center;gap:12px}
  .footer-news-block .icon-bubble{grid-area:icon}
  .footer-news-block .news-text{grid-area:text}
  .footer-news-block .news-text p{text-align:left}
  .footer-news-block .btn{grid-area:btn;width:100%;text-align:center;padding:8px 0;border-radius:40px;font-size:16px}
  .footer-line3{padding:10px 16px}
  .footer-line3__inner{flex-direction:column;align-items:flex-start;text-align:left;gap:28px}
  .footer-phones{display:flex;flex-direction:column;gap:20px}
  .footer-phones span{margin:0;color:#1D1D1D80;font-size:14px;line-height:1.25}
  .footer-phones span strong{color:#1D1D1D;font-weight:700}
  .footer-left-info{font-weight:400;font-size:14px}
  .footer-right-credit{opacity:.7}
  .footer-right-credit img{height:16.4px}

  .promo-big-block{position:relative;overflow:hidden;background-image:none;border-radius:16px;--promo-img-h:300px;--tape-w:clamp(280px,44vw,270px)}
  .promo-big-block__image{order:-1}
  .promo-big-block .pr-img{object-fit:contain;object-position:center 42%}
  .promo-big-block::after{
    content:"";position:absolute;top:0;right:-2px;width:var(--tape-w);aspect-ratio:248/406;background:url("./images/mobile_tape.png") right top/contain no-repeat;z-index:0;pointer-events:none
  }
  .promo-big-block>*{position:relative;z-index:1}

  .footer-logo{max-height:45px}
  .header-logo{max-height:71px}
  .header-logo__image{max-width:182px}

  .promo-mini-block{
    --icon:52px;--gap:16px;display:grid;grid-template-columns:var(--icon) 1fr;column-gap:var(--gap);
    border-radius:24px;padding:20px 18px;background:#F5F5F5;align-items:start
  }
  .promo-mini-block .mini-block__icon{width:var(--icon);height:auto;padding:0;background:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center}
  .promo-mini-block .mini-block__icon img{width:28px;height:28px;object-fit:contain}
  .promo-mini-block .mini-block__text{display:flex;flex-direction:column;gap:10px}
  .promo-mini-block .mini-block__text h3{margin:0;font:700 22px/1.2 Tahoma,sans-serif;color:#1D1D1D}
  .promo-mini-block .mini-block__text p{margin:0;font:400 18px/1.35 Tahoma,sans-serif;color:#1D1D1D}
  .promo-mini-block .mini-block__text .btn{display:block;width:calc(100% + var(--icon) + var(--gap));margin-left:calc(-1 * (var(--icon) + var(--gap)));padding:8px 0;border-radius:999px;border-width:2px;font-size:20px;text-align:center}

  .banners-block{display:flex;flex-direction:column;gap:24px}
  .banner-card{display:grid;width:100%;grid-template-columns:128px 1fr;align-items:center;gap:16px 20px;padding:20px;border-radius:24px}
  .banner-card img{width:128px;height:128px;object-fit:contain;justify-self:start}
  .banner-card h3{grid-column:2;margin:0;color:#1D1D1D}
  .banner-card .btn{grid-column:1/-1;width:100%;padding:8px 0;border-radius:40px;text-align:center;border:2px solid #1D1D1D;color:#1D1D1D;background:transparent}

  .col-block ul li{color:#1D1D1D}

  .catalog-nav,
  .catalog-side{
    display:none;
  }

  .catalog-wrapper{ gap:0; }
  .catalog-main{ flex:1 1 100%; width:100%; }
}

/* =========================  MICRO ≤375  ========================= */
@media(max-width:375px){
  .mobile-tabbar span{font-size:10px}
  .menu-links{font-size:15px}
  .banner-card h3{font-size:15px}
  .col-title{font-size:16px}
}

/* =========================  DESKTOP ≥1246  ========================= */
@media(min-width:1246px){
  :root{--container-max:1200px;--page-gutter:16px}
  @media(min-width:1366px){:root{--container-max:1320px}}
  @media(min-width:1536px){:root{--container-max:1440px}}
  @media(min-width:1728px){:root{--container-max:1600px}}

  .container{
    width:min(calc(100% - var(--page-gutter) * 2),var(--container-max));
    margin-inline:auto;padding-block:32px;padding-inline:0
  }
  .header-top__inner{
    width:min(calc(100% - var(--page-gutter) * 2),var(--container-max));
    margin-inline:auto;padding:8px 0
  }
  .container.header-mid__inner{padding:15.5px 0}
}


.product-table .desc .title,
.product-table .desc .title:visited{
  color: var(--c-accent);
}

.product-table .col-price .price-per-unit,
.product-table .col-price .price-per-pack{
  font-size: 18px;
  line-height: 1.2;
}
.product-table-wrapper .price-per-unit,
.product-table-wrapper .price-per-pack{ font-size: 18px; }

.product-table .badges{ display:flex; gap:6px; margin:2px 0 6px; }
.product-table .badge{
  display:inline-block; padding:2px 10px; border-radius:999px;
  font:700 12px/1.3 Tahoma, sans-serif; color:#fff;
}

.product-table .badge-new      { background: var(--badge-new,      #FF2F2F); } /* Новинка */
.product-table .badge-sale     { background: var(--badge-sale,     #F09915); } /* Распродажа */
.product-table .badge-hit      { background: var(--badge-hit,      #FF32EB); } /* Хит-продаж */
.product-table .badge-spec     { background: var(--badge-spec,     #2152F2); } /* Спец.предложение */
.product-table .badge-season   { background: var(--badge-season,   #38C795); } /* Сезонный */
.product-table .badge-preorder { background: var(--badge-preorder, #41BC1F); } /* Под заказ */
.product-table .badge-clear    { background: var(--badge-clear,    #FF632F); } /* Ликвидация */
.product-table .badge-stock    {                                      /* Сток */
  background: var(--badge-stock, #fff);
  color:#000; border:1px solid #aaa;
}

.catalog-topbar{ margin-bottom:12px; }

@media (max-width:1246px){
  .discount-table{ display:none; }
  .discount-table-mob{ display:block; }
}

.discount-table-mob .dtm-head .dtm-l,
.discount-table-mob .dtm-head .dtm-r{
  font-weight:700;
  background:#eef7ff;
  border-top:none;
}

@media (min-width:1246px) and (max-width:1365px){

  .catalog-topbar{
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
  }
  .catalog-topbar .total{
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    white-space: normal;
  }

  .product-table{ table-layout: fixed; width:100%; }
  .catalog-main{ overflow: visible; }
  .product-table-wrapper{ max-width:100%; }

  .product-table thead .col-name .th-groups{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
  .product-table thead .col-select .select-all{
    white-space: normal;
  }

  .product-table thead .col-select,
  .product-table tbody .col-select{ width: 140px; }
  .product-table thead .col-price,
  .product-table tbody .col-price{ width: 270px; }

  .product-table th, .product-table td{
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }

  .product-table .order-controls{ flex-wrap: wrap; }
}

@media (max-width:1248px){

  .catalog-topbar{
    display:block;
    margin-bottom:12px;
    text-align:left;
  }
  .catalog-topbar .perpage,
  .catalog-topbar .view-mode,
  .catalog-topbar .total{
    display:block;
    margin:0 0 6px;
    white-space:normal;
  }
  .catalog-topbar .total{ margin-bottom:0; }

  .product-table thead{
    display:block !important;
    background:#daeaf1;
    border-top:1px solid var(--c-border);
    border-bottom:1px solid var(--c-border);
  }
  .product-table thead tr{ display:block; }
  .product-table thead th{
    display:block;
    background:transparent;
    border:0 !important;
    padding:8px 12px;
    text-align:left;
  }
  .product-table thead .col-name{ padding-bottom:6px; }
  .product-table thead .col-name .th-groups{
    justify-content:flex-start;
    gap:6px;
  }
  .product-table thead .col-name .th-group + .th-group::before{
    margin:0 6px;
    height:1em;
  }
  .product-table thead .col-select{
    padding:6px 12px;
    text-align:left;
  }
  .product-table thead .col-select .select-all{
    justify-content:flex-start;
  }
  .product-table thead .col-price{ padding:6px 12px; text-align:left; }

  .product-table tbody{ display:block; }
  .product-table tbody tr{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:12px; row-gap:8px;
    align-items:start;
    padding:12px 14px;
    background:#fff;
    margin:0;
    border-left:0; border-right:0;
    border-top:1px solid var(--c-border);
    min-width:0;
  }
  .product-table tbody tr:first-child{ border-top:0; }
  .product-table tbody td{ border:0; padding:0; }

  .product-table .col-name{ grid-column:1 / -1; grid-row:1; }
  .product-table .product-info{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    column-gap:12px;
    min-width:0;
  }
  .product-table .desc{ min-width:0; }
  .product-table .badges{ margin:0 0 6px; }
  .product-table .desc .title{ margin:2px 0 6px; }

  .product-table .col-price{ grid-column:2; grid-row:2; }
  .product-table .price-per-unit,
  .product-table .price-per-pack{ display:block; }
  .product-table .availability{ margin:6px 0 8px; display:flex; gap:6px; align-items:center; }
  .product-table .order-controls{ display:flex; gap:8px; flex-wrap:nowrap; }

  .product-table .col-select{
    grid-column:2; grid-row:3;
    display:flex; justify-content:flex-start; align-items:center;
    width:auto !important; text-align:left;
    margin-top:2px;
  }
  .product-table .col-select label{ white-space:nowrap; }

  .product-table th, .product-table td{
    white-space:normal; word-break:break-word; hyphens:auto;
  }
}


@media (min-width:1246px) and (max-width:1365px){
  .catalog-topbar{ flex-wrap: wrap; gap: 8px 16px; margin-bottom:12px; }
  .catalog-topbar .total{ order:3; flex:1 1 100%; margin-left:0; white-space:normal; }

  .product-table{ table-layout: fixed; width:100%; }
  .product-table thead .col-select,
  .product-table tbody .col-select{ width:150px; }
  .product-table thead .col-price,
  .product-table tbody .col-price{ width:280px; }
  .product-table .order-controls{ flex-wrap: wrap; }
}

@media (max-width:1246px){
  .discount-table{ display:none; }
  .discount-table-mob{ display:block; }
}

@media (max-width:383px){

  .catalog-wrapper,
  .catalog-main,
  .product-table-wrapper,
  .product-table{
    overflow: visible !important;
    max-width: 100%;
  }

  .product-table tbody tr{
    grid-template-columns: 52px minmax(0,1fr);
    padding: 10px 10px;
    column-gap: 10px;
    min-width: 0;
  }
  .product-table .product-info{
    grid-template-columns: 52px minmax(0,1fr);
    min-width: 0;
  }
  .product-table .thumbs img{ width:52px; height:52px; }

  .product-table .desc,
  .product-table .desc .title,
  .product-table .col-price{
    min-width:0; max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .product-table .order-controls{
    flex-wrap: wrap;
    gap: 6px 8px;
    max-width:100%;
  }
  .product-table .order-controls input[type="number"]{ width:48px; }
  .product-table .unit-select{
    flex: 1 1 110px;
    min-width:110px;
    max-width:100%;
  }
  .product-table .btn-cart{
    flex: 0 0 32px;
    width:32px; height:32px;
  }

  .product-table .col-select{
    grid-column: 2;
    justify-content: flex-start;
    align-items: center;
    width:auto !important;
  }

  .product-table thead th{ padding:8px 10px; }
  .product-table thead .col-name .th-groups{ gap:4px; }
}

.also-panel{
  background:#f5f5f5;
  border-radius:16px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:0px;
}
.also-panel h4{
  margin:0 0 12px;
  font:700 18px/1.2 Tahoma, sans-serif;
  color:#1D1D1D;
}
.also-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#1D1D1D;
  font:400 16px/1.35 Tahoma, sans-serif;
  text-decoration:none;
  padding:4px 0;
}
.also-panel a:hover{ text-decoration:underline; color:#2580C3; }

.also-panel a .badge{
  position:static;
  display:inline-block;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  background:#FF2F2F;
  color:#fff;
  font:400 12px/1 Tahoma, sans-serif;
  vertical-align:middle;
}

/* Кнопка-плитка */
#mobile-menu .catalog-tiles li.has-submenu > a.tile-toggle,
#mobile-menu .catalog-tiles li > a.tile-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--c,#888); color:#fff; font:600 18px/1.2 Tahoma,sans-serif;
}

#mobile-menu .catalog-tiles li > a.tile-toggle::after{
  content:""; width:16px; height:16px; flex:0 0 16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transition:transform .2s ease;
  opacity:.9;
}
#mobile-menu .catalog-tiles li.open > a.tile-toggle::after{ transform:rotate(180deg); }

/* -------- Подменю -------- */

/* Базовое (закрытое) состояние: НЕ занимаем места */
#mobile-menu .catalog-tiles .submenu{
  list-style:none;
  margin:0;                 /* убрать «хвосты» */
  padding:0;                /* убрать «хвосты» */
  background:#fff;
  border-radius:12px;
  box-shadow:none;          /* тень только в открытом */
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:
    max-height .25s ease,
    opacity .2s ease,
    padding .2s ease,
    margin .2s ease,
    box-shadow .2s ease;
}

/* Не выключаем через display:none — оставляем block,
   чтобы корректно считать scrollHeight и анимировать */
#mobile-menu .catalog-tiles .submenu[hidden]{ display:none ; }

/* открытое подменю: видно содержимое и небольшой нижний отступ */
#mobile-menu .catalog-tiles li.open > .submenu{
  margin-top:8px;
  /* добавили запас снизу */
  padding:10px 10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  opacity:1;
  overflow:visible;        /* чтобы низ не «резало» */
}

/* на всякий: небольшой зазор под последним пунктом */
#mobile-menu .catalog-tiles .submenu > li:last-child > a{
  margin-bottom:4px;
}

/* Пункты внутри подменю */
#mobile-menu .catalog-tiles .submenu a{
  display:block; padding:10px 8px; border-radius:8px;
  color:#1D1D1D; font:400 16px/1.35 Tahoma,sans-serif;
  background:#fff;
}
#mobile-menu .catalog-tiles .submenu a:hover{
  background:#f5f5f5; color:#0B79D0; text-decoration:underline;
}