/* ==========================================================================
   Dezea.ru — redesign.css
   CSS-only reskin layer for test2.dezea.ru (Phase 1: Home page)
   Loaded after css/main.css / css/add.css — overrides only, no structural HTML changes.
   Design tokens: bg-dark #171310, accent #F9B404, bg-light #FCF9F3, bg-muted #ECE6DA
   Fonts: 'Manrope' (headings, 600/700/800), 'Public Sans' (body, 400/500/600/700)
   ========================================================================== */

:root{
  --dz-dark:#171310;
  --dz-accent:#F9B404;
  --dz-bg-light:#FCF9F3;
  --dz-bg-muted:#ECE6DA;
  --dz-text-muted:#8A8175;
  --dz-text-muted2:#B8B0A4;
  --dz-orange:#e88549;
  --dz-font-head:'Manrope', sans-serif;
  --dz-font-body:'Public Sans', sans-serif;
}

/* ---------- Base typography ---------- */
body{
  font-family: var(--dz-font-body);
  color: var(--dz-dark);
  background: var(--dz-bg-light);
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--dz-font-head);
  font-weight: 800;
  color: var(--dz-dark);
}
a{ transition: color .15s ease, background-color .15s ease, opacity .15s ease; }

/* Generic buttons across the site (product cards, forms, catalog filters, etc.) */
.btn,
button[type="submit"],
input[type="submit"],
.callback-form-top_form button,
.dark-input button{
  border-radius: 8px !important;
  font-family: var(--dz-font-body);
  font-weight: 700;
}
.btn-primary,
.btn.btn-yellow,
.btn-warning{
  background-color: var(--dz-accent) !important;
  border-color: var(--dz-accent) !important;
  color: var(--dz-dark) !important;
}
.btn-primary:hover,
.btn.btn-yellow:hover,
.btn-warning:hover{
  filter: brightness(0.95);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select{
  border-radius: 8px;
  font-family: var(--dz-font-body);
}

/* ==========================================================================
   HEADER v2 (rewritten chunk: .dz-header-top utility bar, .dz-header-row
   logo/search/actions row, .dz-catalog-strip category pill nav)
   ========================================================================== */

/* row 1 — utility bar */
.dz-header-top,
.dz-header-top.top{
  background: var(--dz-dark);
  color: #D9D2C7;
}
.dz-util-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1360px;
}
.dz-util-left{
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.dz-util-hours{ color: #D9D2C7; }
.dz-util-link{
  color: #D9D2C7;
  text-decoration: none;
}
.dz-util-link:hover{ color: var(--dz-accent); }
.dz-util-marketplaces{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 8px;
}
.dz-mp-label{ color: #6B6560; font-size: 12px; }
.dz-mp-icon{
  display: flex;
  opacity: .9;
}
.dz-mp-icon:hover{ opacity: 1; }
.dz-mp-icon img,
.dz-mp-icon svg{
  height: 20px;
  width: 20px;
  border-radius: 6px;
  display: block;
}
.dz-util-right{
  display: flex;
  gap: 18px;
  align-items: center;
}
.dz-util-social-icon{ width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; display: block; } .dz-util-social{ display: flex; align-items: center; gap: 6px;
  color: #D9D2C7;
  text-decoration: none;
}
.dz-util-social:hover{ color: var(--dz-accent); }
.dz-util-phone,
.dz-util-phone.phone-top{
  color: #FCF9F3 !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
.dz-util-phone:hover{ color: var(--dz-accent) !important; }

/* row 2 — logo / search / actions */
.dz-header-row{
  background: var(--dz-dark);
  border-bottom: 1px solid var(--dz-dark);
  padding-top: 10px;
  padding-bottom: 10px;
}
.dz-header-row-inner{
  gap: 24px;
}
.dz-logo img{
  height: 48px;
  width: auto;
}
.dz-header-search{
  flex: 1;
  min-width: 220px;
  max-width: 560px;
}
.dz-header-search form{
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--dz-bg-muted);
  border-radius: 999px;
  overflow: hidden;
}
.dz-header-search input[type="text"],
.dz-header-search input[type="search"]{
  border: none !important;
  outline: none;
  background: transparent;
  flex: 1;
  font-family: var(--dz-font-body);
  font-size: 15px;
  padding: 10px 8px 10px 20px;
  border-radius: 0 !important;
}
.dz-header-search button{
  background: var(--dz-dark);
  color: var(--dz-accent);
  border: none;
  border-radius: 50% !important;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.dz-header-search button img{
  width: 16px;
  height: 16px;
  filter: invert(1);
}
.dz-header-actions{
  gap: 20px;
  flex-wrap: wrap;
}

/* auth block */
.auth{ background-image: url("../img/icons/user-w.svg") !important;
  font-family: var(--dz-font-body);
  font-size: 14px;
  font-weight: 600;
}
.auth .login,
.auth .registration{
  border-radius: 8px;
  color: #FCF9F3 !important;
  text-decoration: none;
}
.auth .login:hover,
.auth .registration:hover{
  color: var(--dz-accent) !important;
}
.auth .dropdown-login{
  border-radius: 12px;
  border: 1px solid var(--dz-bg-muted);
  box-shadow: 0 12px 32px rgba(23,19,16,.12);
  background: #fff;
}

/* mini cart — restyled as a dark pill to match design's "Корзина · N" control */
.shop-cart{
  background: var(--dz-dark);
  border-radius: 999px;
  padding: 10px 18px;
  transition: background-color .15s ease;
}
.shop-cart a{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FCF9F3;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.shop-cart img{
  width: 18px;
  height: 18px;
}
.shop-cart:hover{ background: var(--dz-accent); }
.shop-cart:hover a{ color: var(--dz-dark); }
.shop-cart:hover img{ filter: brightness(0); }

/* row 3 — catalog / category pill strip (replaces old icon-grid "bugs" strip) */
.dz-catalog-strip{
  background: var(--dz-dark);
}
.dz-catalog-strip-inner{
  gap: 0;
  flex-wrap: wrap;
  max-width: 1360px;
}
.dz-catalog-btn{
  background: var(--dz-accent);
  color: var(--dz-dark);
  font-weight: 800;
  font-family: var(--dz-font-head);
  font-size: 14px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
}
.dz-catalog-btn:hover{ background:#FFFFFF; color:var(--dz-accent); text-decoration:none; }
.dz-catalog-btn-icon{
  width: 16px;
  height: 2px;
  background: var(--dz-dark);
  box-shadow: 0 5px 0 var(--dz-dark), 0 -5px 0 var(--dz-dark);
  display: inline-block;
}

/* Round 19: Каталог button relocated (chunk header) to sit right of the logo in .dz-header-row -- compact it into a proper pill instead of the full-height flush rectangle it was as a strip tab */
.dz-header-row-inner .dz-catalog-btn{
  padding: 12px 20px;
  border-radius: 8px;
}
@media (max-width:767px){
  .dz-header-row-inner .dz-catalog-btn{
    padding: 10px 14px;
    font-size: 13px;
  }
}
.dz-catalog-pills{
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 2px 10px;
}
.dz-catalog-pill{
  color: #D9D2C7;
  font-size: 15.5px;
  padding: 8px 14px;
  white-space: nowrap;
  border-radius: 6px;
  text-decoration: none;
}
.dz-catalog-pill:hover{
  background: #2A231D;
  color: var(--dz-accent);
}

/* ==========================================================================
   HOME PAGE BLOCKS
   ========================================================================== */

/* full-width page wrapper (sidebar removed from Главная template) */
.dz-full-width{
  max-width: 1360px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* main categories grid (main_cats / main_cats_wrapper / main_cats__element) */
.dz-cats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dz-cat-card{
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.dz-cat-card:hover{
  border-color: var(--dz-accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(23,19,16,.10);
}

/* callback form banner (legacy, kept for other pages that may still use it) */
.callback-form-top_form input:focus,
.callback-form-top_form input:focus-visible{
  outline: 2px solid var(--dz-accent);
  outline-offset: 1px;
}
.callback-form-top_form button:hover{
  filter: brightness(0.95);
}

/* hero + USP strip (main_callback-form chunk repurposed) */
.dz-hero{ grid-template-columns: minmax(260px,43fr) minmax(360px,57fr) !important; } .dz-hero-btn-primary:hover{
  background: var(--dz-bg-light) !important;
}
.dz-hero-btn-outline:hover{
  border-color: var(--dz-accent) !important;
  color: var(--dz-accent) !important;
}
.dz-usp-strip > div{
  transition: background-color .15s ease;
}

/* articles section (main_bottom-info / main_bottom-info-wrapper / main_bottom-info-element) */
.dz-articles{
  padding: 56px 40px 72px;
}
.dz-articles-title{
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 28px;
}
.dz-articles-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.dz-article-card{
  background: #FFFFFF;
  border: 1px solid var(--dz-bg-muted);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color .15s ease;
}
.dz-article-card:hover{
  border-color: var(--dz-accent);
}
.dz-article-card-photo{
  display: block;
  aspect-ratio: 16 / 10;
  background: #F5F1E8 no-repeat center center;
  background-size: cover;
}
.dz-article-card-body{
  display: block;
  padding: 18px;
}
.dz-article-card-title{
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--dz-dark);
}
.dz-article-card-link{
  display: block;
  font-size: 12.5px;
  color: #8A8378;
  font-weight: 600;
}

/* footer (chunk: footer — dz-footer grid matching design) */
.dz-footer{
  background: var(--dz-dark);
  color: #B9B1A5;
  font-family: var(--dz-font-body);
  padding: 56px 0 28px;
}
.dz-footer-grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
.dz-footer-logo{
  height: 44px;
  width: auto;
  margin-bottom: 16px;
}
.dz-footer-tagline{
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 280px;
  color: #8A8378;
  margin: 0;
}
.dz-footer-heading{
  font-family: var(--dz-font-head);
  font-weight: 700;
  color: var(--dz-bg-light);
  font-size: 14px;
  margin-bottom: 16px;
}
.dz-footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.dz-footer-links a{
  color: #B9B1A5;
  text-decoration: none;
}
.dz-footer-links a:hover{
  color: var(--dz-accent);
}
.dz-footer-newsletter-text{
  font-size: 13px;
  color: #8A8378;
  margin: 0 0 14px;
}
.dz-footer-newsletter-form{ align-items: center;
  display: flex;
  gap: 8px;
}
.dz-footer-newsletter-input{ height: 40px !important; box-sizing: border-box !important; line-height: 38px !important;
  flex: 1;
  min-width: 0;
  background: #241E18;
  border: 1px solid #3A322A;
  border-radius: 8px;
  padding: 0 12px !important;
  color: var(--dz-bg-light);
  font-size: 13px;
  outline: none;
}
.dz-footer-newsletter-btn{ height: 40px !important; box-sizing: border-box !important; flex-shrink: 0;
  background: var(--dz-accent);
  color: var(--dz-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 0 16px !important;
  border-radius: 8px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.dz-footer-newsletter-btn:hover{
  background: var(--dz-bg-light);
}
.dz-footer-bottom{
  border-top: 1px solid #2A231D;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: #6B6560;
}
.dz-footer-phone{
  color: #6B6560;
  text-decoration: none;
}
.dz-footer-phone:hover{
  color: var(--dz-accent);
}

/* ==========================================================================
   PRODUCT SECTIONS (home carousels -> static grid)
   ========================================================================== */
.dz-products-section{
  padding: 40px 40px 8px;
  max-width: 1360px;
  margin: 0 auto;
}
.dz-products-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dz-products-title{
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--dz-dark);
  margin: 0;
}
.dz-products-viewall{
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.dz-products-viewall:hover{
  color: var(--dz-accent);
}
.dz-products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.dz-pcard{
  position: relative;
  background: #fff;
  border: 1px solid var(--dz-bg-muted);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.dz-pcard:hover{
  border-color: var(--dz-accent);
  box-shadow: 0 8px 24px rgba(23,19,16,.08);
}
.dz-pcard-link{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dz-pcard-badges{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.dz-pcard-badge{
  font-family: var(--dz-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.dz-pcard-badge.action{
  background: var(--dz-orange);
  color: #fff;
}
.dz-pcard-badge.popular{
  background: var(--dz-dark);
  color: var(--dz-accent);
}
.dz-pcard-badge.new{
  background: var(--dz-accent);
  color: var(--dz-dark);
}
.dz-pcard-badge.favorite{
  background: var(--dz-bg-muted);
  color: var(--dz-dark);
}
.dz-pcard-badge.low_price{
  background: #2F7D4F;
  color: #fff;
}
.dz-pcard-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-bg-light);
  margin-bottom: 12px;
}
.dz-pcard-photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dz-pcard-title{
  font-family: var(--dz-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--dz-dark);
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-pcard-bottom{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.dz-pcard-price{
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--dz-dark);
}
.dz-pcard-cart-form{
  position: relative;
  z-index: 2;
}
.dz-pcard-cart-btn{
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dz-dark);
  border: none;
  cursor: pointer;
  flex: none;
}
.dz-pcard-cart-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: var(--dz-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / contain no-repeat;
}
.dz-pcard-cart-btn:hover{
  background: var(--dz-accent);
}
.dz-pcard-cart-btn:hover::before{
  background: var(--dz-dark);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px){
  .dz-cats-title{ font-size: 22px !important; }
  .dz-cats-grid{ grid-template-columns: repeat(2, 1fr); }
  .dz-hero{ grid-template-columns: 1fr !important; padding: 40px 24px !important; }
  .dz-hero h1{ font-size: 36px !important; }
  .dz-mp-label{ display: none; }
  .dz-header-search{ order: 3; max-width: 100% !important; flex-basis: 100%; }
  .dz-footer-grid{ grid-template-columns: repeat(2, 1fr); }
  .dz-products-section{ padding: 32px 24px 8px; }
  .dz-products-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .callback-form-top_form{ max-width: 100% !important; padding: 24px !important; }
  .footer-new .w-100.d-flex{ flex-direction: column; }
  .dz-footer-grid{ grid-template-columns: 1fr; }
  .dz-footer-bottom{ flex-direction: column; }
  .dz-cats-grid{ grid-template-columns: 1fr; }
  .dz-usp-strip{ grid-template-columns: 1fr !important; }
  .dz-util-right .dz-util-social{ display: flex; } .dz-util-social-text{ display: none; } .dz-util-social-icon{ width: 20px; height: 20px; }
  .dz-products-section{ padding: 24px 16px 4px; }
  .dz-products-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dz-products-title{ font-size: 20px !important; }
}

/* ==========================================================================
   AI CHAT WIDGET (pro-talk.ru) — lock animation to scale pulse only,
      add explanatory label
         ========================================================================== */
         .dialogai-consultant-widget{
               animation: 2s ease 0s infinite normal none running pulse !important;
         }
         .dz-ai-widget-label{
               position: fixed;
                 right: 104px;
                   bottom: 16px;
                     max-width: 190px;
                       background: var(--dz-dark);
                         color: var(--dz-bg-light);
                           font-family: var(--dz-font-body);
                             font-size: 13px;
                               font-weight: 600;
                                 line-height: 1.3;
                                   padding: 10px 14px;
                                     border-radius: 12px;
                                       box-shadow: 0 8px 20px rgba(23,19,16,.25);
                                         z-index: 998;
                                           pointer-events: none;
         }
         .dz-ai-widget-label::after{
               content: "";
                 position: absolute;
                   right: -6px;
                     top: 50%;
                       transform: translateY(-50%);
                         border-width: 6px 0 6px 6px;
                           border-style: solid;
                             border-color: transparent transparent transparent var(--dz-dark);
         }
         @media (max-width: 767px){
               .dz-ai-widget-label{ display: none; }
         }
        

/* =====================================================================
   CATALOG PAGE REDESIGN (Phase 2)
   Targets existing mFilter2 / MiniShop2 markup — CSS only, no structural
   template changes. Preserves all filter / cart / sort / pagination JS.
   ===================================================================== */

/* Breadcrumb */
.breadcrumbs{ list-style:none; display:flex; flex-wrap:nowrap; align-items:center; gap:0; padding:10px 0 0; margin:0 0 12px; font-size:13px; color:var(--dz-text-muted); overflow-x:auto; white-space:nowrap; }
.breadcrumbs li{ display:flex; align-items:center; }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin:0 8px; color:var(--dz-bg-muted); } .page-wrapper{ margin-top:14px !important; }
.breadcrumbs li a{ color:var(--dz-text-muted); text-decoration:none; }
.breadcrumbs li a:hover{ color:#D99500; }
.breadcrumbs li.sf_crumb.active a,
.breadcrumbs li:last-child a{ color:var(--dz-dark); pointer-events:none; }

/* H1 */
h1.sf_h1{ font-family:var(--dz-font-head); font-weight:800; font-size:32px; margin:0 0 10px; color:var(--dz-dark); line-height:1.2; }

/* Subcategory grid card */
.top_cat_row.w-100:not(.fixn-6) .top_categories{
  background:#FFFFFF; border:1px solid var(--dz-bg-muted); border-radius:16px; padding:16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  align-items:start;
  margin:0 0 16px !important; } .top_cat_row .fixn-1{ margin-left:0; margin-right:0;} .row.msearch2{ margin-left:0; margin-right:0;
}
.top_category_item_wrapper{ margin:0 !important; padding:0 !important; height:auto !important; align-self:start; width:100% !important; box-sizing:border-box !important; }
.top_categories .top_category_item{
  display:flex !important; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; background:var(--dz-bg-light);
  text-decoration:none; height:auto !important; min-height:0 !important;
 margin:0 !important;}
.top_categories .top_category_item:hover{ background:#F5F1E8; }
.top_categories .icon-wrapper{
  flex:0 0 40px !important; width:40px; height:40px; border-radius:10px; flex-shrink:0; overflow:hidden;
  aspect-ratio:1/1;
}
.top_categories .icon-wrapper img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.top_categories .top_category_item .text{ flex:1 1 auto; min-width:0; }
.top_categories .text{ font-size:13.5px; font-weight:600; color:var(--dz-dark); line-height:1.2; }

/* hide "recommended" carousel row on catalog pages — not part of new design */
.top_cat_row.fixn-6{ display:none !important; }

/* Sort + view-toggle row */
#mse2_sort.catalog-sort{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#mse2_sort .catalog-sort-item:first-child{ display:none; }
#mse2_sort a.catalog-sort-item{
  background:#FFFFFF; border:1px solid var(--dz-bg-muted); color:var(--dz-text-muted); font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:999px; text-decoration:none;
}
#mse2_sort a.catalog-sort-item.active{ background:var(--dz-dark); border-color:var(--dz-dark); color:var(--dz-bg-light); }
#mse2_sort a.catalog-sort-item:hover{ border-color:var(--dz-accent); color:var(--dz-dark); }
#mse2_tpl.catalog-view{ display:none; }
.catalog-top-line .w-100.d-flex.justify-content-between{ margin-bottom:10px; }

/* Sidebar filter card */
.col-md-3.navbar-expand-md{
  background:#FFFFFF; border:1px solid var(--dz-bg-muted); border-radius:16px; padding:16px;
  position:sticky; top:16px;
}
#mse2_filters .filter_title{ font-family:var(--dz-font-head); font-weight:800; font-size:13.5px; margin-bottom:10px; color:var(--dz-dark); }
#mse2_filters fieldset{ margin-bottom:24px; border:none; padding:0; }
#mse2_filters fieldset:last-of-type{ margin-bottom:0; }

/* price range */
.mse2_number_slider{ display:none !important; }
.mse2_number_inputs.row{ margin:0; gap:8px; display:flex; }
.mse2_number_inputs .col-md-6{ flex:1; padding:0; max-width:none; }
.mse2_number_inputs .form-control{
  width:100%; border:1px solid var(--dz-bg-muted); border-radius:8px; padding:9px 10px; font-size:13px;
  outline:none; height:auto; background:#fff; color:var(--dz-dark); box-shadow:none;
}
.mse2_number_inputs .form-control:focus{ border-color:var(--dz-accent); box-shadow:none; }

/* checkboxes (bootstrap custom-control -> native look) */
#mse2_filters .custom-control.custom-checkbox{
  position:relative; display:flex; align-items:center; gap:8px; padding-left:0; min-height:auto; margin-bottom:9px;
}
#mse2_filters .custom-control-input{
  position:static !important; opacity:1 !important; z-index:auto !important;
  width:15px; height:15px; margin:0; accent-color:var(--dz-accent); flex-shrink:0; cursor:pointer;
}
#mse2_filters .custom-control-label{
  padding-left:0; margin-bottom:0; display:flex; align-items:center; width:100%; font-size:13px; cursor:pointer; color:var(--dz-dark);
}
#mse2_filters .custom-control-label::before,
#mse2_filters .custom-control-label::after{ display:none !important; content:none !important; }
#mse2_filters .custom-control-label sup{
  margin-left:auto; top:0; font-size:12px; font-weight:400; color:var(--dz-text-muted);
}
#mse2_filters fieldset.checkboxes{ max-height:230px; overflow-y:auto; padding-right:4px; }
#mse2_filters fieldset.checkboxes::-webkit-scrollbar{ width:4px; }
#mse2_filters fieldset.checkboxes::-webkit-scrollbar-thumb{ background:var(--dz-bg-muted); border-radius:4px; }

/* apply button */
#mse2_filters .d-flex.justify-content-between{ display:block !important; margin-top:8px; }
#mse2_filters button[type="submit"]{
  display:block !important; width:100%; text-align:center; background:var(--dz-accent) !important; color:var(--dz-dark) !important;
  font-weight:700; font-size:14px; padding:13px; border-radius:999px; border:none; cursor:pointer;
  opacity:1 !important; visibility:visible !important; height:auto !important; line-height:normal;
}
#mse2_filters button[type="submit"]:hover{ background:var(--dz-dark) !important; color:var(--dz-bg-light) !important; }

/* Product grid */
#mse2_results.row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0; }
.product-row.ms2_product{
  background:#FFFFFF; border:1px solid var(--dz-bg-muted); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:10px; position:relative; width:auto; max-width:none; min-width:0;
}
.product-row.ms2_product:hover{ border-color:var(--dz-accent); }
.product-row_image{ position:relative; }
.product-row_image > a{ display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#F5F1E8; }
.product-row_image img{ width:100%; height:100%; object-fit:cover; }
.products-carousel-card-info-wrapper{ position:absolute; top:14px; left:14px; right:auto !important; width:auto !important; max-width:75%; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left !important; }
.products-carousel-card-info{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--dz-accent); color:var(--dz-dark);
  white-space:nowrap; display:inline-block !important; width:auto !important; align-self:flex-start;
}
.products-carousel-card-info.new,
.products-carousel-card-info.favorite{ background:var(--dz-dark); color:var(--dz-accent); }
.products-carousel-card-info.action{ background:var(--dz-dark); color:#fff; }
.products-carousel-card-info.bstock{ background:var(--dz-text-muted); color:#fff; }

.product-row_desc-header + div{ display:none !important; }
.product-row_desc-header{ font-size:14.5px; font-weight:700; color:var(--dz-dark); margin-bottom:0 !important; }
.product-row_desc-header a{ color:var(--dz-dark); text-decoration:none; }
.product-row_desc-line{ font-size:12px; color:var(--dz-text-muted); line-height:1.5; }
.product-row_desc-line span{ color:var(--dz-text-muted); }

.product-row_panel.ms2_form{ display:flex !important; flex-direction:column !important; gap:10px; margin-top:0 !important; flex:1 1 auto !important; justify-content:flex-start !important; }
.product-row.ms2_product .product-row_panel.ms2_form{ flex:1 1 auto !important; }
.product-row_panel .prices{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; }
.product-row_panel .prices .price{ font-family:var(--dz-font-head); font-weight:800; font-size:17px; color:var(--dz-dark); }
.product-row_panel .prices .msfavorites{ color:var(--dz-text-muted); }

.product-variants{ display:flex; gap:4px; flex-wrap:wrap; }

.product-input{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-row_bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.product-row_bottom .product-input{ justify-content:flex-end; }
.product-row_bottom .product-input_add-to-cart{ display:none !important; }
.product-row_bottom .prices{ padding-top:0 !important; }
.msfavorites-float{ position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.12); } .msfavorites-float .msfavorites-icon-heart{ width:20px !important; height:20px !important; background-size:100% 200% !important; }
.product-row_image{ position:relative; }
.product-input-wrapper{ display:flex; align-items:center; gap:8px; background:#F5F1E8; border-radius:999px; padding:4px; }
.product-input_button{
  position:static !important; inset:auto !important; transform:none !important;
  width:26px; height:26px; border-radius:50%; border:none; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:#FFFFFF; color:var(--dz-dark);
  line-height:1; flex-shrink:0;
}
.product-input_button-plus{ background:var(--dz-dark); color:var(--dz-accent); }

.product-row_panel .product-variants-card img{ display:none !important; }
.product-row_panel .product-variants-card{
  width:auto !important; height:auto !important; min-height:0 !important; padding:5px 10px !important; margin:0 !important;
  border:2px solid var(--dz-bg-muted) !important; border-radius:999px !important; background:#fff;
  font-size:11px; font-weight:600; color:var(--dz-dark);
  display:inline-flex !important; align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto;
}
.product-variants input[type="radio"]:checked + .product-variants-card{
  border:2px solid var(--dz-dark) !important; color:var(--dz-accent) !important; background:var(--dz-dark) !important; font-weight:700;
}
.product-variants-label{ font-size:11px; color:var(--dz-text-muted); margin-bottom:0; }
.product-variants-label .required-mark{ color:#E5484D; }
.product-row_panel .product-variants-card:hover{ border-color:var(--dz-accent) !important; }

/* Filter: hide wrapper for options revealed only via "Показать ещё" toggle —
   previously only the label text was hidden, leaving an empty visible checkbox box */
#mse2_mfilter fieldset.checkboxes:not(.show_more_options) .custom-control:has(.custom-control-label.hidden){ display:none !important; }

.product-input_input{
  width:24px !important; border:none; background:transparent; text-align:center; font-size:13px; font-weight:600; padding:0; color:var(--dz-dark);
}

/* Pagination — cover both the template's own class names and any bootstrap-style fallback */
.mse2_pagination{ margin-top:40px; }
.mse2_pagination ul.pagination{ list-style:none; display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:0; padding:0; }
.mse2_pagination li{ display:flex; }
.mse2_pagination a, .mse2_pagination span{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--dz-bg-muted); display:flex; align-items:center;
  justify-content:center; font-size:13px; color:var(--dz-dark); text-decoration:none; background:#fff;
}
.mse2_pagination a:hover{ border-color:var(--dz-accent); }
.mse2_pagination li.active a, .mse2_pagination li.active span{ background:var(--dz-dark); border-color:var(--dz-dark); color:var(--dz-bg-light) !important; font-weight:700; }
.mse2_pagination li.disabled a, .mse2_pagination li.disabled span{ color:var(--dz-text-muted); border-color:var(--dz-bg-muted); }
.mse2_pagination li.page-item.active a.page-link,
.mse2_pagination li.page-item.active a.page-no{ background:var(--dz-dark); border-color:var(--dz-dark); color:var(--dz-bg-light) !important; font-weight:700; }
.mse2_pagination li.page-item.disabled a.page-link{ color:var(--dz-text-muted); }

/* Responsive */
@media (max-width: 991px){
  .top_cat_row.w-100:not(.fixn-6) .top_categories{ grid-template-columns:repeat(2,1fr); }
  #mse2_results.row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px){
  .top_cat_row.w-100:not(.fixn-6) .top_categories{ grid-template-columns:1fr 1fr; padding:16px; gap:8px; }
  #mse2_results.row{ grid-template-columns:1fr; }
  .col-md-3.navbar-expand-md{ position:static; margin-bottom:20px; }
  h1.sf_h1{ font-size:24px; }
  #mse2_sort.catalog-sort{ overflow-x:auto; flex-wrap:nowrap; }
}


/* Product card meta lines: the live template can render up to 6 spec lines (Насекомые/Форма/Фасовка/Срок годности/Действующее вещество/Класс опасности) per product, but the mockup shows only a compact 2-3 line summary — cap to first 2 lines to keep card height compact and match the design */
.product-row_desc-line{ font-size:12px !important; color:var(--dz-text-muted) !important; line-height:1.5 !important; margin:0 !important; padding:0 !important; }
.product-row_desc-line:nth-of-type(n+3){ display:none !important; }

/* Fix legacy horizontal list-row flex/width rules on product card children (image/desc/panel) so the new vertical grid card layout works correctly — these three elements originally had flex:0 0 25%/45%/30% + explicit width:45% designed for a horizontal row layout, which combined with our flex-direction:column card breaks width (desc collapses to 45% width) and creates huge content-driven heights */
.product-row.ms2_product .product-row_image,
.product-row.ms2_product .product-row_desc,
.product-row.ms2_product .product-row_panel{
  width:100% !important; flex:0 0 auto !important;
}
.product-row.ms2_product .product-row_desc{
  border-right:none !important; padding:0 !important;
}
.product-row.ms2_product .product-row_panel{
  padding:0 !important; justify-content:flex-start !important;
}

/* "Show more" load-more button under the product grid (ajax pagination alternative) — style to match design system */
.btn.btn_more{
  display:block !important; width:100% !important; text-align:center; background:#FFFFFF !important;
  border:1px solid var(--dz-bg-muted) !important; color:var(--dz-dark) !important; font-weight:700 !important; font-size:14px !important;
  padding:13px !important; border-radius:999px !important; cursor:pointer; margin:24px 0 0 !important; box-shadow:none !important;
}
.btn.btn_more:hover{ border-color:var(--dz-accent) !important; background:var(--dz-bg-light) !important; }

/* mobile-only category menu leaks into desktop via Bootstrap's .navbar-expand-md .navbar-collapse{display:flex} default — hide it on desktop, keep it for the mobile toggle view */
@media (min-width: 768px){
  .col-md-3.navbar-expand-md > ul.sidebar-menu.navbar-collapse{ display:none !important; }
}


/* Persistent top-level catalog category pills (appears on every catalog page via template 4) */
.catalog-top-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; } .page-wrapper > .catalog-top-line{ padding-top:0;
}
.catalog-top-pill{
  display:inline-flex; align-items:center; padding:11px 20px; border-radius:999px;
  border:1px solid var(--dz-bg-muted); background:#FFFFFF; color:var(--dz-dark);
  font-size:14px; font-weight:600; text-decoration:none !important; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.catalog-top-pill:hover{ border-color:var(--dz-accent); color:var(--dz-accent); } .catalog > .catalog-top-line{ padding-top:8px !important; padding-bottom:6px !important; margin-bottom:8px !important; } .catalog-sort .catalog-sort-item{ padding:6px 11px !important; font-size:9px !important; margin:0 8px 0 0 !important; } div:has(> fieldset.catalog-tags){ margin-bottom:8px !important; } .product-row_image > a.msfavorites-float{ width:27px !important; height:27px !important; top:8px !important; right:8px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#fff !important; border-radius:50% !important; overflow:visible !important; } .product-row_image > a.msfavorites-float .msfavorites-icon-heart{ width:16px !important; height:16px !important; background-size:100% 300% !important; background-repeat:no-repeat !important; } .product-row_tags{ display:flex !important; flex-wrap:wrap !important; gap:4px !important; margin:4px 0 6px !important; } .product-row_tag{ display:inline-block !important; padding:2px 8px !important; font-size:10px !important; line-height:1.4 !important; border-radius:10px !important; background:var(--dz-bg-muted) !important; color:var(--dz-text-muted) !important; }
.catalog-top-pill.active{ background:var(--dz-dark); border-color:var(--dz-dark); color:#FFFFFF; }

/* Active-section header inside the subcategory card, shown above the icon grid */
.top_categories_header{
  grid-column:1 / -1; font-family:var(--dz-font-head); font-weight:800; font-size:16px;
  color:var(--dz-dark); margin:0 0 14px;
}

@media (max-width:767px){
  .catalog-top-pill{ padding:9px 16px; font-size:13px; }
}




.catalog-wrapper .product-row:first-of-type{ margin-top:10px !important; }


/* =========================================================
   PRODUCT PAGE (Товар) — redesign per Claude Design mockup
   ========================================================= */

/* --- Layout: remove sidebar, full-width product column --- */
.row:has(> .product-page) > .col-md-3.navbar-expand-md {
  display: none !important;
}
.row:has(> .product-page) > .product-page.col-md-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* --- Main product grid: image + info --- */
@media (min-width: 768px) {
  #msProduct.row.product {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
  }
  #msProduct .product-image {
    flex: 0 0 420px !important;
    max-width: 420px !important;
    padding: 0 !important;
  }
  #msProduct .product-info {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
}

/* --- Gallery card (single image) --- */
#msProduct .product-image {
  border: 1px solid var(--dz-bg-muted, #ECE6DA);
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  background: #fff;
  position: relative;
}
#msProduct .product-image img:not(.fotorama__img) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
/* Keep the Fotorama-rendered image matching the same inset/frame look as the pre-init state above, so the photo does not visibly "grow" and lose its white margin once Fotorama finishes initializing. */
#msProduct .product-image .fotorama__img {
  object-fit: contain !important;
  padding: 6% !important;
  box-sizing: border-box !important;
  background: #fff;
}

/* --- Gallery card (Fotorama, multi-image products) --- */
#msGallery,
.fotorama {
  border: 1px solid var(--dz-bg-muted, #ECE6DA);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}
.fotorama__nav-wrap {
  margin-top: 12px;
}
.fotorama__thumb {
  border-radius: 10px;
  overflow: hidden;
}
.fotorama__thumb-border {
  border: 2px solid var(--dz-accent, #F9B404) !important;
  border-radius: 10px !important;
}

/* --- Title / price typography --- */
#msProduct h1 {
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  color: var(--dz-dark, #171310);
  margin: 0 0 10px;
}
#msProduct .prices {
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: var(--dz-dark, #171310);
  margin: 4px 0 2px;
}
#msProduct .prices .price {
  font-size: 34px;
}
#msProduct .prices .price-total {
  font-size: 16px;
  font-weight: 500;
  color: var(--dz-text-muted, #8A8175);
}

/* --- Wholesale note (was hardcoded red inline style) --- */
.product-wholesale-note {
  color: var(--dz-text-muted, #8A8175);
  font-size: 13px;
  margin: 0 0 2px;
}

/* --- Pack / fasovka variant swatches --- */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 20px;
}
.product-variants input[type="radio"] {
  display: none;
}
.product-variants-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  border: 2px solid var(--dz-bg-muted, #ECE6DA);
  border-radius: 999px;
  padding: 5px 17px 5px 5px !important;
  margin: 0;
  cursor: pointer;
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-dark, #171310);
  background: #fff;
  transition: border-color .15s, background .15s;
}
.product-variants-card img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--dz-bg-light, #FCF9F3);
  transition: transform .15s;
}
/* Round 25: hover changes COLOUR ONLY. It used to force the product-page
   padding (5px 17px 5px 5px), which in a catalog card (base 5px 10px) resized
   the pill under the cursor and made the label jitter. */
.product-variants-card:hover {
  border-color: var(--dz-accent, #F9B404) !important;
  color: var(--dz-dark, #171310) !important;
}
.product-variants-card:hover img {
  transform: scale(1.15);
}
.product-variants input[type="radio"]:checked + .product-variants-card:hover {
  border-color: var(--dz-accent, #F9B404) !important;
}

/* --- Info column: stop stretching children to fill the gallery's height
   (main.css's .product-info uses justify-content:space-between, which was
   pushing the buy buttons far down the column) --- */
#msProduct .product-info {
  justify-content: flex-start !important;
}

/* --- Quantity stepper + buy buttons --- */
#msProduct .product-input {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}
#msProduct .product-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--dz-bg-muted, #ECE6DA);
  border-radius: 999px;
  overflow: hidden;
}
#msProduct .product-input_button {
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--dz-dark, #171310);
}
#msProduct .product-input_input {
  width: 42px;
  height: 36px;
  text-align: center;
  border: none;
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 600;
}
#msProduct .product-input_input::-webkit-outer-spin-button,
#msProduct .product-input_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#msProduct .product-input_add-to-cart {
  background: var(--dz-accent, #F9B404);
  color: var(--dz-dark, #171310);
  border: none;
  border-radius: 999px !important;
  padding: 12px 28px;
  margin: 0;
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
#msProduct .product-input_add-to-cart:hover {
  background: var(--dz-dark, #171310);
  color: #fff;
}
#msProduct .product-input_click-1 {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dz-dark, #171310);
  border-radius: 999px !important;
  padding: 12px 24px;
  margin: 0;
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--dz-dark, #171310);
  background: #fff;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
#msProduct .product-input_click-1:hover {
  border-color: var(--dz-accent, #F9B404);
  color: var(--dz-accent, #F9B404);
}
#msProduct .added_to_cart {
  margin-top: 10px;
  font-size: 13px;
  color: var(--dz-text-muted, #8A8175);
}
#msProduct .added_to_cart a {
  color: var(--dz-orange, #e88549);
}

/* --- Характеристики card --- */
.product-charakters {
  background: #fff;
  border: 1px solid var(--dz-bg-muted, #ECE6DA);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 1px 3px rgba(23,19,16,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-charakters-title {
  font-family: var(--dz-font-head, 'Manrope'), sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--dz-dark, #171310);
  margin: 0;
}
.product-charakters-line {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--dz-dark, #171310);
}
.product-charakters-name {
  display: inline;
  color: var(--dz-text-muted, #8A8175);
  font-size: 13.5px;
  font-weight: 400;
  margin-right: 5px;
}
.product-charakters-name span {
  display: none !important;
}
.product-charakters-desc {
  display: inline;
  color: var(--dz-dark, #171310);
  font-weight: 400;
  font-size: 13.5px;
  text-align: left;
}

/* the chunk erroneously nests .product-charakters inside itself for
   some fields (Действующее вещество / Срок годности) — neutralize
   the nested duplicates so only the outer card is visible */
.product-charakters .product-charakters {
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
   Блок "С этим покупают" (товарная страница, .products-carousel-card)
   Старая дефолтная разметка miniShop2 (НЕ .product-row) — приводим внешний
   вид карточек и сетку к виду уже переделанного каталога (.product-row).
   Плюс правим реальный баг верстки: у .products-carousel-card была
   фиксированная высота 327px, а форма (варианты фасовки + кнопка "в корзину")
   стояла position:absolute и вылезала ЗА пределы карточки — из-за этого
   карточки "прыгали"/наезжали друг на друга и не помещались в сетку.
   EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */

/* Сетка — как у каталога (CSS grid вместо "плавающих" bootstrap-колонок) */
.recom-products .row .row{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 !important;
}
.recom-products .row .row > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}
@media (max-width: 991px){
  .recom-products .row .row{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .recom-products .row .row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .recom-products .row .row{ grid-template-columns: 1fr; }
}

/* Карточка товара — тот же вид, что у .product-row в каталоге */
.products-carousel-card.ms2_product{
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF;
  border: 1px solid var(--dz-bg-muted);
  border-radius: 16px;
  padding: 18px;
  gap: 10px;
  overflow: visible;
}
.products-carousel-card.ms2_product:hover{ border-color: var(--dz-accent); }

/* Кликабельная область на всю карточку */
.products-carousel-card-link{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.products-carousel-card .products-carousel-card-info-wrapper{ z-index: 3; }

/* Иконка "избранное" — как .msfavorites-float в каталоге (белый кружок) */
.products-carousel-card > a.msfavorites{
  position: absolute !important;
  top: 8px !important; right: 8px !important; left: auto !important;
  width: 27px !important; height: 27px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff !important; border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  overflow: visible !important;
  z-index: 4;
}
.products-carousel-card > a.msfavorites .msfavorites-icon-heart{
  width: 16px !important; height: 16px !important;
  background-size: 100% 300% !important;
  background-repeat: no-repeat !important;
}

/* Фото товара — квадрат, как в каталоге */
.products-carousel-card .column-img{
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #F5F1E8;
}
.products-carousel-card .column-img img.products-carousel-card-image{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
}

/* Название товара */
.products-carousel-card-title{
  height: auto !important;
  width: auto !important;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Цена */
.products-carousel-card .mt-auto{ height: auto !important; width: auto !important; margin-top: auto !important; }
.products-carousel-card-price{ height: auto !important; width: auto !important; padding-top: 0 !important; }
.products-carousel-card-price br{ display: none; }
.products-carousel-card-price .price-val{ font-size: 16px; font-weight: 700; color: var(--dz-dark); }

/* Форма (варианты фасовки + кнопка "в корзину") — убираем absolute,
   возвращаем в обычный поток карточки */
.products-carousel-card form.product-row_panel{
  position: static !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
  padding: 0 !important;
}
.products-carousel-card.ms2_product{ height: 100%; }
.products-carousel-card .product-variants{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
}
.products-carousel-card .product-row_bottom{
  position: relative;
  z-index: 2;
}

/* Round 10: hero block (.dz-hero, "Профессиональные средства...") -> full-bleed black stripe on wide screens.
   .dz-hero sits inside a max-width:1360px centered container and only has inline background/padding/grid styles
   (no width/margin of its own), so its black background was capped at 1360px, leaving visible page-background
   gaps on the sides on wide viewports. Break it out to 100vw via the standard negative-margin technique, then
   compensate the inline padding-left/right so the inner content (text column + image) keeps the same effective
   width/position it had before -- only the background now extends edge-to-edge. */
@media (min-width: 992px) {
  /* Scoped to desktop widths only: below 992px an existing mobile/tablet rule
     (.dz-hero{grid-template-columns:1fr!important;padding:40px 24px!important;} inside
     @media (max-width:991px)) already handles the hero's layout/padding for small screens,
     and this full-bleed breakout must not fight that -- otherwise its !important padding
     would override the intended 24px mobile side-padding with this rule's 40px minimum. */
  .dz-hero {
    width: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
    padding-left: max(40px, calc((100vw - 1360px) / 2 + 40px)) !important;
    padding-right: max(40px, calc((100vw - 1360px) / 2 + 40px)) !important;
  }
}

/* Fix: the .dz-hero full-bleed breakout above uses vw units, and Chrome's vw is based on the viewport
   INCLUDING the vertical scrollbar's own width (~15-17px), while the page's actual visible/scrollable
   width (documentElement.clientWidth) excludes it -- so 100vw-based width/margins overshoot by that same
   amount and introduce a few pixels of unwanted horizontal page scroll. Clip that harmless overshoot. */
html, body {
  overflow-x: hidden;
}

/* Round 14: revert of the Round 9 header-color change is above (that block was removed) -- back to
   the original cream .dz-header-row / dark account icon+text / white cart icon look.
   Logo enlarged 20% (115.2x48 -> ~138x58), stays vertically centered in the header row via the
   existing flex align-items:center on .dz-header-row-inner. */
.dz-logo img {
  /* Round 20: +50% (138x58 -> 207x87). mix-blend-mode kills the near-black plate
     baked into logo.png (rgb(14,7,5)) against the dark header row (#171310):
     "lighten" keeps whichever is brighter per channel, so the plate resolves to the
     row background exactly while the cream/yellow lettering is untouched. */
  width: 207px !important;
  height: 87px !important;
  mix-blend-mode: lighten;
}

/* Remove the ~14px cream gap visible between the black category-nav strip (.dz-catalog-strip) and
   the black hero block (.dz-hero) below it -- caused by the page wrapper's own margin-top:14px
   (.container.page-wrapper.dz-full-width), which shows the page background through since .dz-hero
   is the wrapper's first child. Pulling .dz-hero up by the same amount closes the gap completely,
   at all screen widths (not scoped to the Round 10 desktop-only full-bleed media query). */
.dz-hero {
  margin-top: -14px !important;
}

/* Round 16: align .dz-header-row's left edge with the other two header rows (.dz-header-top / util
   bar and .dz-catalog-strip), so the logo's left edge lines up with the working-hours text and the
   Каталог button. Root cause: .dz-header-row has its own padding:18px 30px (main.css) while the
   other two rows have 0 left/right padding, AND its inner .container is a fixed-width (1170px)
   Bootstrap-style container with auto-centering 38px margins, unlike the other rows' inner
   containers which carry the .dz-full-width treatment (fluid width up to 1360px, 0 margin) -- so
   .dz-logo ended up at left:83px (30+38+15) instead of left:15px like the other two elements.
   Fix: zero the row's own side padding and make its .container fluid/full-width to match. */
.dz-header-row {
  padding-left: 0;
  padding-right: 0;
}
/* Round 18 fix: margin must stay auto-centering (not 0) so this container matches the OTHER two
   header rows on wide screens -- .dz-full-width (used by .dz-util-bar / .dz-catalog-strip-inner)
   only zeroes padding and caps max-width, it never touches margin, so those rows keep the base
   .container rule's margin:auto and stay centered past 1360px. Zeroing this margin (round 16's
   original bug) made this container hug the row's LEFT edge instead once the viewport exceeded
   ~1360px+padding, visibly dragging the logo/search/account/cart left away from center -- invisible
   in this environment's ~1364px test viewport (no leftover space for margin:auto to matter there)
   but confirmed by the user on an actual wide monitor. */
.dz-header-row .container {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Round 17: homepage "Инсектициды"/"Родентициды" product cards (.dz-pcard, chunk product_row-slider) —
   replaced the plain round cart-icon button with the same functional -/qty/+ stepper used on the
   Каталог grid (.product-input / .product-input-wrapper / .product-input_button, styled generically
   above so they already match the catalog's pill look here with zero extra CSS). The one thing that
   IS catalog-specific is hiding the underlying <button type=submit class="product-input_add-to-cart">
   -- clicking +/- already submits the form via existing site JS (custom_minishop / main.js), so that
   button must stay invisible here too, same as the ".product-row_bottom .product-input_add-to-cart"
   rule already does for the catalog grid. */
.dz-pcard-bottom .product-input_add-to-cart {
  display: none !important;
}

/* ==========================================================================
   Round 20
   ========================================================================== */

/* Header rows now share the site content gutter. The util bar and the logo row
   sat on the .container 15px padding (content edge at 181px on a 1692px viewport)
   while every page section (.dz-hero, .dz-cats, .dz-products-section) uses 40px
   (edge at 206px) -- a visible 25px step the user spotted. The category strip is
   deliberately left alone: .dz-catalog-pills (10px) + .dz-catalog-pill (14px)
   already land the first pill TEXT on 205px, i.e. on the same line. */
.dz-header-top .dz-util-bar,
.dz-header-row .container {
  padding-left: 40px;
  padding-right: 40px;
}

/* Каталог button -> click-to-open dropdown (was a plain link to the catalog page) */
.dz-catalog-menu {
  position: relative;
}
.dz-catalog-menu .dz-catalog-btn {
  cursor: pointer;
}
.dz-catalog-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 130;
  min-width: 330px;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.dz-catalog-menu.is-open .dz-catalog-dropdown {
  display: block;
}
.dz-catalog-dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--dz-dark);
  text-decoration: none;
}
.dz-catalog-dropdown-item:hover {
  background: var(--dz-bg-muted);
  color: var(--dz-dark);
  text-decoration: none;
}
.dz-cdi-name {
  display: block;
  font-family: var(--dz-font-head);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.dz-cdi-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--dz-text-muted);
}
.dz-catalog-dropdown-all {
  display: block;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--dz-accent);
  color: var(--dz-dark);
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}
.dz-catalog-dropdown-all:hover {
  background: var(--dz-dark);
  color: var(--dz-accent);
  text-decoration: none;
}

/* Новости — horizontally scrollable strip under the main-categories block.
   Sits on the light page background (body is #FCF9F3), same 40px gutter as
   .dz-cats / .dz-products-section above and below it. */
.dz-news {
  padding: 24px 40px 40px;
}
.dz-news-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.dz-news-title {
  margin: 0;
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--dz-dark);
}
.dz-news-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dz-news-arrow {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1.5px solid var(--dz-bg-muted);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--dz-dark);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dz-news-arrow:hover:not(:disabled) {
  background: var(--dz-accent);
  border-color: var(--dz-accent);
}
.dz-news-arrow:disabled {
  opacity: .35;
  cursor: default;
}
.dz-news-all {
  margin-left: 8px;
  color: var(--dz-text-muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.dz-news-all:hover {
  color: var(--dz-accent);
  text-decoration: none;
}
.dz-news-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* room for the -4px hover lift, otherwise overflow-x clips the card top */
  padding-top: 6px;
  /* no CSS scroll-behavior here on purpose: the arrows animate via
     scrollBy({behavior:"smooth"}) and fall back to an instant jump if that
     animation does not run -- a CSS smooth-scroll would swallow the fallback. */
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.dz-news-track::-webkit-scrollbar {
  height: 6px;
}
.dz-news-track::-webkit-scrollbar-thumb {
  background: var(--dz-bg-muted);
  border-radius: 999px;
}
/* Round 22: two news cards per page — picture on top, title and text under it,
   "Подробнее" pinned to the bottom right. One arrow click moves a whole pair. */
.dz-news-card {
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid var(--dz-bg-muted);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, transform .18s ease;
}
/* Round 24: same hover as the "Основные категории" cards (yellow border + lift).
   No box-shadow here: .dz-news-track is overflow-x:auto, which clips a shadow
   along the top and bottom edges and looked cut off. */
.dz-news-card:hover {
  border-color: var(--dz-accent);
  transform: translateY(-4px);
  text-decoration: none;
}
.dz-news-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--dz-bg-muted);
  overflow: hidden;
}
.dz-news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Round 23: the white text block under the picture was ~222px tall and looked
   roomy next to the photo — halved it (tighter padding/type, excerpt cut to 95
   chars, title and text clamped to 2 lines so a long one cannot grow it back). */
.dz-news-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 14px;
}
.dz-news-card-date {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--dz-text-muted);
}
.dz-news-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
  font-family: var(--dz-font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  color: var(--dz-dark);
}
.dz-news-card:hover .dz-news-card-name {
  color: var(--dz-accent);
}
.dz-news-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dz-text-muted);
}
.dz-news-card-more {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-end;
  color: var(--dz-dark);
  font-family: var(--dz-font-head);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.dz-news-card:hover .dz-news-card-more {
  color: var(--dz-accent);
}
.dz-news-no-scroll .dz-news-arrow {
  display: none;
}

@media (max-width: 991px) {
  .dz-header-top .dz-util-bar,
  .dz-header-row .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .dz-logo img {
    width: 160px !important;
    height: 67px !important;
  }
  .dz-news {
    padding: 16px 24px 32px;
  }
  .dz-news-title {
    font-size: 22px;
  }
  .dz-news-card-body {
    padding: 12px 16px 14px;
  }
  .dz-news-card-name {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .dz-header-top .dz-util-bar,
  .dz-header-row .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .dz-logo img {
    width: 132px !important;
    height: 55px !important;
  }
  .dz-catalog-dropdown {
    min-width: 280px;
  }
  .dz-news {
    padding: 12px 16px 24px;
  }
  .dz-news-card {
    flex-basis: 100%;
    max-width: 100%;
    border-radius: 16px;
  }
  .dz-news-card-body {
    padding: 14px 18px 16px;
  }
  .dz-news-card-name {
    font-size: 17px;
  }
}

/* Round 24: the dark band between the logo row and the hero had ~37px of empty
   space above the category pills and ~72px below them (strip padding + the
   hero’s own 64px top padding, which is set inline in the chunk, hence the
   !important). Tightened both ends. */
.dz-hero {
  padding-top: 40px !important;
}

/* ==========================================================================
   Round 25 — каталог
   ========================================================================== */

/* 1. The filter column is a flex child of .row, so align-items:stretch made its
      white panel run the full 8770px of the product column while its own
      content ended at ~1170px. Let it size to its content instead. */
#mse2_mfilter > .col-md-3 {
  align-self: flex-start;
}

/* 3. "Выберите фасовку" sat 10px above its own buttons. */
.product-row_panel .product-variants {
  margin-top: 2px;
}

/* 5. Catalog pages used a plain 1170px .container, so their content started at
      276px while the header (and the whole home page) sits on the 1360px grid
      at 206px. Same grid + same 40px gutter now. */
.page-wrapper.dz-page-wide {
  max-width: 1360px;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 991px) {
  .page-wrapper.dz-page-wide {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 767px) {
  .page-wrapper.dz-page-wide {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Round 27
   ========================================================================== */

/* Selected pack pill: dark GREY rather than near-black, matching the "+" button
   (that button is --dz-dark at opacity .6 over white, i.e. about #74716F). */
.product-variants input[type="radio"]:checked + .product-variants-card {
  background: #74716F !important;
  border-color: #74716F !important;
}

/* Category tiles: the picture fills the 60px tile with only a hairline frame,
   without changing the tile itself (its height is set inline in the chunk). */
.top_category_item {
  padding: 3px 14px 3px 3px !important;
}
.top_category_item .icon-wrapper {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  flex: 0 0 54px;
  margin: 0 12px 0 0 !important;
}
.top_category_item .icon-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 8px;
}

/* ==========================================================================
   Round 28 — карточка товара
   ========================================================================== */

/* 1. The tabs block (Описание / Документация / Доставка / Отзывы) becomes the
      same white rounded card as .product-charakters. Zeroing the .row negative
      margins and the .col-12 padding lands its edges on exactly the same
      291..1401 line as Характеристики, with the same 24px inner padding. */
.product-tabs {
  margin-left: 0;
  margin-right: 0;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--dz-bg-muted);
  border-radius: 16px;
}
.product-tabs > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

/* 4. Heart sat off-centre because of a stray 3px left padding. */
.msfavorites {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* Article next to the reviews line at the top of the product page */
.page-top-line-article {
  margin-left: auto;
  padding-right: 14px;
  font-size: 13px;
  color: var(--dz-text-muted);
  white-space: nowrap;
}
.page-top-line-article span {
  color: var(--dz-dark);
  font-weight: 600;
}

/* 5. Pack swatches on the product page go vertical: picture on top, size under
      it, and the picture is much larger (30px -> 64px). Scoped to #msProduct so
      the catalog cards (where the image is hidden) keep their compact pill. */
#msProduct .product-variants-card {
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px !important;
  border-radius: 14px !important;
  min-width: 92px;
  line-height: 1.2;
}
#msProduct .product-variants-card img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 10px !important;
}

/* 2. "С этим покупают": kill the shadowed rectangle that main.css pops up on
      hover (both on the card and on the panel it reveals). The yellow border
      highlight stays as the hover cue. */
.products-carousel-card:hover,
.products-carousel-card:hover .product-row_panel {
  box-shadow: none !important;
}

/* 3. Cards in that block are equal height and their buy row is pinned to the
      bottom, so a card that has pack swatches no longer pushes its price and
      stepper below the neighbours. */
/* the wrapping column is a GRID item (the row was turned into CSS Grid back in
   round 8), so height:100% on the card does not resolve — make the column a flex
   box and let the card stretch inside it instead. */
[class*="col-"]:has(> .products-carousel-card) {
  display: flex;
  flex-direction: column;
}
.products-carousel-card {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
.products-carousel-card .product-row_panel {
  margin-top: auto;
}

/* 7. Room for the catalog hover slide-through (the image is translated). */
.product-row_image {
  overflow: hidden;
}

/* ===== Round 29 ===== */

/* 1. Bigger, un-squashed cart icon in the header. */
.shop-cart{ padding: 8px 16px !important; }
.shop-cart img{ width: 28px !important; height: 28px !important; }
.shop-cart-counter{ width: 18px !important; height: 18px !important; font-size: 11px !important; line-height: 18px !important; }
@media (max-width: 767px){
  .shop-cart{ padding: 7px 12px !important; }
  .shop-cart img{ width: 24px !important; height: 24px !important; }
}

/* ===== Дополнения для боевого сайта ===== */

/* Логотип в подвале: файл логотипа стал крупнее, задаём размер явно. */
footer .brand img{ height: 44px !important; width: auto !important; }

/* Подсветка выбранного раздела каталога. */
.top_category_item_active{
  background: var(--dz-bg-muted) !important;
  box-shadow: inset 0 0 0 2px var(--dz-dark);
}
.top_category_item_active .text{ color: var(--dz-dark) !important; font-weight: 700 !important; }

/* ===== Дополнения для боевого сайта ===== */

/* Логотип в подвале: файл логотипа стал крупнее, задаём размер явно. */
footer .brand img{ height: 44px !important; width: auto !important; }

/* Подсветка выбранного раздела каталога. */
.top_category_item_active{
  background: var(--dz-bg-muted) !important;
  box-shadow: inset 0 0 0 2px var(--dz-dark);
}
.top_category_item_active .text{ color: var(--dz-dark) !important; font-weight: 700 !important; }

/* Мобильная версия: старые стили main.css раскладывали низ карточки в несколько колонок,
   из-за чего фасовки уезжали вправо и не помещались. Строим строго в один столбец. */
@media (max-width: 991px){
  .product-row.ms2_product .product-row_panel{ flex-wrap: nowrap !important; }
  .product-row.ms2_product .product-row_panel > *{ width: 100% !important; order: 0 !important; }
  .product-row.ms2_product .product-variants{ width: 100% !important; justify-content: flex-start !important; align-items: center !important; }
  .product-row.ms2_product .product-row_panel .prices{ flex: 0 0 auto !important; padding-right: 0 !important; }
}

/* Мобильная версия: картинка товара обрезалась по краям
   из-за ограничения max-width 200px из main.css и object-fit cover. */
@media (max-width: 991px){
  .product-row.ms2_product .product-row_image img{
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}