/* ==========================================
   MOBIN KHODRO - CUSTOM CSS
   ========================================== */

:root {
  --mk-red: #d00928;
  --mk-red-soft: #fff1f3;
}

/* Desktop container */
@media (min-width: 1300px) {
  .BoxSizeAsli,
  .container { width: 1270px; }
}

.OverlayHeader { max-width: 1200px !important; }

/* No blue flash when tapping links/buttons on phones (the browser's default tap highlight) */
html { -webkit-tap-highlight-color: transparent; }

/* Hero slider: FlexSlider makes the slide strip 600% wide for its first 100ms
   (before it sizes the slides), which flashed a huge image on every load.
   Keep each slide at the slider's width from the start. */
.slide-wrapper .flex-viewport { container-type: inline-size; }

.slide-wrapper .flexslider .slides > li {
  float: left;
  width: 100%;
  max-width: 100vw;  /* fallback for old browsers */
  max-width: 100cqw;
}

/* Red top line (created by JS, mobile only) */
.mk-topline { display: none; }


/* ==========================================
   MOBILE & TABLET (<= 1240px)
   ========================================== */

@media (max-width: 1240px) {

  html,
  body { padding-bottom: 0 !important; }

  /* Inner pages: comments with long unbroken text (no spaces, only ZWNJ/commas) made the page wider
     than the phone, so it scrolled sideways and the off-screen search panel peeked in on the right */
  .CommentFaceBook .Text1,
  .CommentFaceBook .Text1 * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .CommentFaceBook img,
  .CommentFaceBook iframe,
  .CommentFaceBook video,
  .CommentFaceBook table {
    max-width: 100% !important;
    height: auto;
  }

  /* Safety net: the page never scrolls sideways (clip doesn't create a scroll container) */
  html,
  body { overflow-x: clip; }

  /* Keep copyright visible above the floating nav */
  .CopyRight {
    margin: 16px 0 0 !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  /* Footer: remove the big empty gaps above and below */
  #LinkShow { margin-top: 28px !important; }

  /* Empty social box (the real social links are in the footer text box) */
  .Sharing:not(:has(.Social *)) { display: none !important; }

  /* ---------- Top header (user's template: menu button | logo | phone button) ---------- */

  body .HeaderTopMobileTop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    /* iPhone Safari (iOS 26+) ignores theme-color and uses this color
       for the area above the address bar; the white is painted below */
    background: #D00022 content-box !important;
    border: 0 !important;
    border-bottom: 2px solid #d5092b !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 20px rgba(20,33,61,.04) !important;

    transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
  }

  /* The white header you see. Each half is narrower than 90% of the screen,
     so Safari skips it and keeps the red above */
  body .HeaderTopMobileTop::before,
  body .HeaderTopMobileTop::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    width: 55% !important;
    background: #fff !important;
  }

  body .HeaderTopMobileTop::before { left: 0 !important; }
  body .HeaderTopMobileTop::after { right: 0 !important; }

  /* Auto-hide on scroll down (JS adds html.mk-header-hidden) */
  html.mk-header-hidden body .HeaderTopMobileTop {
    transform: translateY(calc(-100% - 20px)) !important;
  }

  /* Thin red line revealed behind the hidden header
     (12px box so iPhone Safari keeps using red; only 4px is painted) */
  .mk-topline {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: content-box;
    height: 4px;
    padding-bottom: 8px;
    background: #D00022 content-box;
    pointer-events: none;
  }

  body .HeaderTopMobileTop > a.LogoMobileNew {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 170px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;

    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body .HeaderTopMobileTop > a.LogoMobileNew > img {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }

  /* Menu button (added by JS, opens the drawer) and phone button: 43px rounded squares */
  body .HeaderTopMobileTop > .mk-hdr-menu,
  body .HeaderTopMobileTop > a.TellMobileNew {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    flex: 0 0 43px !important;
    width: 43px !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: #fff no-repeat center / 23px 23px !important;
    border: 1px solid #eee !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    cursor: pointer;
    box-sizing: border-box !important;
    transition: transform .2s ease !important;
  }

  body .HeaderTopMobileTop > .mk-hdr-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324242a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h12'/%3E%3C/svg%3E") !important;
  }

  body .HeaderTopMobileTop > a.TellMobileNew {
    background-color: #fff5f7 !important;
    border-color: #ffe2e7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c90027' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v3a2 2 0 0 1-2.2 2A18 18 0 0 1 2.6 5.2 2 2 0 0 1 4.6 3h3a2 2 0 0 1 2 1.7l.5 2.7a2 2 0 0 1-.6 1.8l-1.6 1.6a14 14 0 0 0 5.3 5.3l1.6-1.6a2 2 0 0 1 1.8-.6l2.7.5a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") !important;
  }

  /* Other pages: the same button becomes "back" (arrow points left) */
  body .HeaderTopMobileTop > a.TellMobileNew.mk-hdr-back {
    background-color: #fff !important;
    border-color: #eee !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324242a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
  }

  body .HeaderTopMobileTop > .mk-hdr-menu:active,
  body .HeaderTopMobileTop > a.TellMobileNew:active { transform: scale(.94) !important; }

  body .HeaderTopMobileTop > .mk-hdr-menu:focus-visible,
  body .HeaderTopMobileTop > a.TellMobileNew:focus-visible {
    outline: 2px solid #d5092b !important;
    outline-offset: 2px;
  }

  /* ---------- Floating bottom nav ---------- */

  /* Neutralize old full-width bar */
  .HeaderTopMobile:has(> .mobile-menu) {
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .HeaderTopMobile:has(> .mobile-menu)::before,
  .HeaderTopMobile:has(> .mobile-menu)::after {
    content: none !important;
    display: none !important;
  }

  .HeaderTopMobile .mobile-menu::before,
  .HeaderTopMobile .mobile-menu::after,
  .HeaderTopMobile .mobile-menu > a::after {
    content: none !important;
    display: none !important;
  }

  .HeaderTopMobile .mobile-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 22px !important;
    right: 22px !important;
    z-index: 99999 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;

    width: auto !important;
    max-width: 420px !important;
    height: 65px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 5px !important;
    box-sizing: border-box !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 22px !important;
    outline: 0 !important;
    box-shadow:
      0 8px 28px rgba(15,23,42,.14),
      0 2px 7px rgba(15,23,42,.04) !important;
    direction: rtl !important;
  }

  .HeaderTopMobile .mobile-menu > a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;

    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 55px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 3px !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 17px !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #4b5563 !important;
    font-family: IRANSans, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition: transform .22s ease, background .22s ease !important;
  }

  .HeaderTopMobile .mobile-menu > a:active { transform: scale(.95) !important; }

  .HeaderTopMobile .mobile-menu > a:focus-visible {
    outline: 2px solid var(--mk-red) !important;
    outline-offset: 2px;
  }

  /* Center products button */
  .HeaderTopMobile .mobile-menu > #btnCategoryMenu {
    background: linear-gradient(135deg, #f01e34 0%, #d90925 55%, #bc001b 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(210,0,30,.16) !important;
  }

  /* Hide nav while drawer is open */
  body:has(#categorySidebar.open) .HeaderTopMobile .mobile-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ---------- Nav icons ---------- */

  .HeaderTopMobile .mobile-menu > a > i,
  .HeaderTopMobile .mobile-menu > a > svg,
  .HeaderTopMobile .mobile-menu > a > img { display: none !important; }

  .HeaderTopMobile .mobile-menu > a::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 21px !important;
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }

  .HeaderTopMobile .mobile-menu > a[href="/"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 21v-8h6v8'/%3E%3C/svg%3E") !important;
  }

  .HeaderTopMobile #btnCategoryMenu::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") !important;
  }

  .HeaderTopMobile .mobile-menu > a[href*="contact-us" i]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 18 0v3'/%3E%3Crect x='2' y='13' width='4' height='7' rx='2'/%3E%3Crect x='18' y='13' width='4' height='7' rx='2'/%3E%3Cpath d='M20 20c0 2-3 3-6 3h-2'/%3E%3C/svg%3E") !important;
  }

  /* ---------- Category drawer (user's template design, site's own menu items) ---------- */

  #categorySidebar {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 100002 !important;

    width: min(330px, 88vw) !important;
    height: auto !important;
    max-height: none !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;

    direction: rtl !important;
    font-family: IRANSans, sans-serif !important;

    /* hidden when closed: no focusable links */
    visibility: hidden !important;
    transform: translateX(105%) !important;
    transition:
      transform .32s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .32s !important;
  }

  #categorySidebar.open {
    visibility: visible !important;
    transform: translateX(0) !important;
    transition-delay: 0s !important;
  }

  /* Invisible scrollbars */
  #categorySidebar,
  #categorySidebar .category-sidebar-body,
  #categorySidebar .HeaderTopMobilesubmenu { scrollbar-width: none !important; }

  #categorySidebar::-webkit-scrollbar,
  #categorySidebar .category-sidebar-body::-webkit-scrollbar,
  #categorySidebar .HeaderTopMobilesubmenu::-webkit-scrollbar { display: none !important; }

  /* Overlay */
  #sidebarOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100001 !important;
    display: block !important;
    background: rgba(17,17,17,.53) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: opacity .25s ease, visibility .25s ease !important;
  }

  #sidebarOverlay:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #sidebarOverlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Drawer header: title + close button */
  #categorySidebar .category-sidebar-header {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 0 20px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #categorySidebar .category-sidebar-header::after { content: none !important; }

  #categorySidebar .category-sidebar-header > span {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #categorySidebar .category-sidebar-header > span::before {
    content: "منوی مبین خودرو";
    color: #24242a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.6;
  }

  #categorySidebar .category-sidebar-header button {
    width: 37px !important;
    height: 37px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f4f4f5 !important;
    box-shadow: none !important;
    color: #24242a !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
  }

  #categorySidebar .category-sidebar-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #categorySidebar ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Rows */
  #categorySidebar .HeaderTopMobilemenu-item {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item { border-bottom: 1px solid #f1f1f1 !important; }

  #categorySidebar .HeaderTopMobilemenu-link {
    display: flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 17px 5px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #24242a !important;
    font-family: IRANSans, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: right !important;
    text-decoration: none !important;
  }

  /* Icons before the main items */
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > .HeaderTopMobilemenu-link::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: 11px;
    background: no-repeat center / 20px 20px;
  }

  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href="https://mobinkhodro.com/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="catproduct"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16 7 9a2 2 0 0 1 2-1h6a2 2 0 0 1 2 1l2 7M5 16h14v4H5zM4 12h16M8 20v1M16 20v1'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item.open > a[href*="catproduct"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5092b' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16 7 9a2 2 0 0 1 2-1h6a2 2 0 0 1 2 1l2 7M5 16h14v4H5zM4 12h16M8 20v1M16 20v1'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="catnews"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect height='18' rx='2' width='16' x='4' y='3'/%3E%3Cpath d='M8 7h4v4H8zM15 7h2M15 10h2M8 15h9M8 18h9'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item.open > a[href*="catnews"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5092b' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect height='18' rx='2' width='16' x='4' y='3'/%3E%3Cpath d='M8 7h4v4H8zM15 7h2M15 10h2M8 15h9M8 18h9'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="catarticle"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C7 4 10 4.5 12 6v14c-2-1.5-5-2-8-.5zM20 5.5c-3-1.5-6-1-8 .5v14c2-1.5 5-2 8-.5z'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item.open > a[href*="catarticle"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5092b' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C7 4 10 4.5 12 6v14c-2-1.5-5-2-8-.5zM20 5.5c-3-1.5-6-1-8 .5v14c2-1.5 5-2 8-.5z'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="AboutUs"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="Contact-Us"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v3a2 2 0 0 1-2.2 2A18 18 0 0 1 2.6 5.2 2 2 0 0 1 4.6 3h3a2 2 0 0 1 2 1.7l.5 2.7a2 2 0 0 1-.6 1.8l-1.6 1.6a14 14 0 0 0 5.3 5.3l1.6-1.6a2 2 0 0 1 1.8-.6l2.7.5a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

  /* "محصولات" stands out in red */
  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="catproduct"] {
    color: #d5092b !important;
    font-weight: 700 !important;
  }

  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item > a[href*="catproduct"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5092b' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16 7 9a2 2 0 0 1 2-1h6a2 2 0 0 1 2 1l2 7M5 16h14v4H5zM4 12h16M8 20v1M16 20v1'/%3E%3C/svg%3E") !important; }

  #categorySidebar .HeaderTopMobileCategoryUl > .HeaderTopMobilemenu-item:has(> a[href*="catproduct"]) > .toggle-submenu { color: #d5092b !important; }

  /* Site search (moved here from the desktop header by JS) */
  #categorySidebar .mk-drawer-search { margin: 4px 0 10px; }

  /* the theme pins this box (position: fixed) under its old mobile header */
  #categorySidebar .mk-drawer-search .SearchBoxBox {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  #categorySidebar .mk-drawer-search .SearchBoxBox,
  #categorySidebar .mk-drawer-search .SearchBox {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #categorySidebar .mk-drawer-search .TextBoxBox {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f4f4f5 !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #categorySidebar .mk-drawer-search .TextBoxAutoCapmlet {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 14px 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #24242a !important;
    font: 500 16px/46px IRANSans, sans-serif !important; /* 16px: no iPhone zoom on focus */
    text-align: right !important;
    direction: rtl !important;
  }

  #categorySidebar .mk-drawer-search .TextAutoButton {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat center / 20px 20px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    cursor: pointer;
  }

  #categorySidebar .mk-drawer-search .Result {
    flex: 0 0 100% !important;
    width: 100% !important;
    background: #fff !important;
  }

  #categorySidebar .mk-drawer-search .Result a {
    display: block !important;
    padding: 10px 14px !important;
    border-top: 1px solid #eee !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    text-align: right !important;
    text-decoration: none !important;
  }

  /* "←" on items that open a page */
  #categorySidebar .HeaderTopMobilemenu-item:not(.HeaderTopMobilehas-dropdown) > .HeaderTopMobilemenu-link::after {
    content: "←";
    margin-right: auto;
    padding-right: 10px;
    color: #aaa;
    font-size: 14px;
    line-height: 1;
  }

  /* +/− toggle (turns red and becomes − when open) */
  #categorySidebar .toggle-submenu {
    position: relative !important;
    display: block !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #9b9ba3 !important;
    font-size: 0 !important;
    cursor: pointer;
  }

  #categorySidebar .toggle-submenu::before,
  #categorySidebar .toggle-submenu::after {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 13px !important;
    display: block !important;
    width: 11px !important;
    height: 1.5px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transform: none !important;
    transition: opacity .16s ease !important;
  }

  #categorySidebar .toggle-submenu::after { transform: rotate(90deg) !important; }

  #categorySidebar .HeaderTopMobilehas-dropdown.open > .toggle-submenu { color: #d5092b !important; }
  #categorySidebar .HeaderTopMobilehas-dropdown.open > .toggle-submenu::after { opacity: 0 !important; }

  /* Submenus */
  #categorySidebar .HeaderTopMobilesubmenu {
    display: none;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fafafa !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #categorySidebar .HeaderTopMobilesubmenu.open {
    display: block !important;
    animation: mk-sub-in .22s ease;
  }

  @keyframes mk-sub-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  #categorySidebar .HeaderTopMobilesubmenu > .HeaderTopMobilemenu-item { border-top: 1px solid #f1f1f1 !important; }

  #categorySidebar .HeaderTopMobilesubmenu .HeaderTopMobilemenu-link {
    padding: 13px 17px 13px 5px !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  #categorySidebar .HeaderTopMobilesubmenu .HeaderTopMobilehas-dropdown.open > .HeaderTopMobilemenu-link { color: #d5092b !important; }

  /* Third level (brands) a little deeper */
  #categorySidebar .HeaderTopMobilesubmenu .HeaderTopMobilesubmenu { background: #f5f5f6 !important; }
  #categorySidebar .HeaderTopMobilesubmenu .HeaderTopMobilesubmenu .HeaderTopMobilemenu-link { padding-right: 29px !important; }

  /* Consultation button at the bottom (added by JS) */
  #categorySidebar .mk-drawer-cta {
    display: block !important;
    margin: 28px 0 6px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: #d5092b !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  /* Touch & keyboard feedback */
  #categorySidebar .HeaderTopMobilemenu-link:active,
  #categorySidebar .toggle-submenu:active { background: #f6f6f7 !important; }

  #categorySidebar a:focus-visible,
  #categorySidebar button:focus-visible {
    outline: 2px solid #d5092b !important;
    outline-offset: -2px;
  }
}


/* ==========================================
   SMALL PHONES (<= 360px)
   ========================================== */

@media (max-width: 360px) {

  .HeaderTopMobile .mobile-menu {
    left: 14px !important;
    right: 14px !important;
    height: 61px !important;
  }

  .HeaderTopMobile .mobile-menu > a {
    height: 51px !important;
    font-size: 10px !important;
  }

}


/* ==========================================
   ARTICLES & NEWS - swipeable cards (<= 992px)
   ========================================== */

@media (max-width: 992px) {

  /* Section wrapper + header */
  .Box:has(.ArticleIndexBody) {
    position: relative !important;
    margin-top: 28px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .Box:has(.ArticleIndexBody) > .BoxTop {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    height: 40px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .Box:has(.ArticleIndexBody) > .BoxTop h2 {
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    color: #1f2937 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
  }

  .Box:has(.ArticleIndexBody) > .BoxTop h2::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: var(--mk-red);
    transform: translateY(-50%);
  }

  /* "آرشیو" moved to the left side of the header */
  .Box:has(.ArticleIndexBody) .BoxCenter > .Row:has(.ArchiveBtnMinimal) {
    position: absolute !important;
    top: 0 !important;
    left: 16px !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .Box:has(.ArticleIndexBody) .ArchiveBtnMinimal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    background: var(--mk-red-soft) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--mk-red) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
  }

  .Box:has(.ArticleIndexBody) .ArchiveBtnMinimal::before { content: none !important; }

  .Box:has(.ArticleIndexBody) .ArchiveBtnMinimal::after {
    content: "" !important;
    width: 6px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* Card row */
  .Box:has(.ArticleIndexBody) > .BoxCenter {
    float: none !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }

  .ArticleIndexBody {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .ArticleIndexBox {
    display: flex !important;
    gap: 12px !important;
    padding: 6px 16px 18px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }

  .ArticleIndexBox::-webkit-scrollbar { display: none; }

  .ArticleIndexBox .Item {
    display: flex !important;
    flex: 0 0 min(70%, 260px) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.07) !important;
    transform: none !important;
    scroll-snap-align: start;
  }

  .ArticleIndexBox .ItemImage {
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 19 / 10;
    object-fit: cover !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .ArticleIndexBox .ItemTitle {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    flex: none !important;
    order: 0 !important;
    box-sizing: content-box !important;
    width: auto !important;
    min-height: 3.5em !important;
    margin: 0 !important;
    padding: 12px 14px 0 !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.75 !important;
    text-align: right !important;
  }

  .ArticleIndexBox .ItemText {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    flex: none !important;
    order: 0 !important;
    width: auto !important;
    margin: 6px 0 14px !important;
    padding: 0 14px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.9 !important;
    text-align: right !important;
    opacity: 1 !important;
  }
}


/* ==========================================
   TESTIMONIALS - red panel + card slider
   (style of "مزایای مبین خودرو"; JS adds .mk-tslider)
   ========================================== */

[class*="customDiv"]:has(> .mk-tslider) {
  position: relative !important;
  width: calc(100% - 64px) !important;
  max-width: 1176px !important;
  margin: 28px auto !important;
  padding: 26px 0 20px !important;
  background: linear-gradient(145deg, #e01b2c 0%, #c80f21 55%, #9e0817 100%) !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 40px rgba(158,8,23,.22) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  isolation: isolate;
}

[class*="customDiv"]:has(> .mk-tslider) > p:empty { display: none !important; }

.mk-teyebrow {
  margin: 0 0 3px;
  padding: 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

p.mk-ttitle {
  margin: 0 !important;
  padding: 0 18px !important;
  line-height: 1.8 !important;
  text-align: center !important;
}

p.mk-ttitle,
p.mk-ttitle * {
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}

.mk-tsub {
  margin-top: 2px;
  padding: 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
}

.mk-tslider { margin: 0 !important; }

/* Slider stage (edges fade like the benefits slider) */
.mk-tslider .testimonials-grid {
  display: block !important;
  position: relative !important;
  height: calc(var(--mk-tch, 280px) + 52px) !important;
  margin: 10px 0 0 !important;
  overflow: hidden !important;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 2%, rgba(0,0,0,.22) 4%, rgba(0,0,0,.48) 7%, rgba(0,0,0,.75) 10%, #000 15%, #000 85%, rgba(0,0,0,.75) 90%, rgba(0,0,0,.48) 93%, rgba(0,0,0,.22) 96%, rgba(0,0,0,.08) 98%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 2%, rgba(0,0,0,.22) 4%, rgba(0,0,0,.48) 7%, rgba(0,0,0,.75) 10%, #000 15%, #000 85%, rgba(0,0,0,.75) 90%, rgba(0,0,0,.48) 93%, rgba(0,0,0,.22) 96%, rgba(0,0,0,.08) 98%, transparent 100%);
}

.mk-tslider .testimonials-grid.is-dragging { cursor: grabbing; }

/* Cards (default = hidden on the right; JS sets the state class) */
.mk-tslider .testimonial-card {
  position: absolute !important;
  top: 22px;
  left: 50%;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 80% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  height: var(--mk-tch, auto);
  margin: 0 !important;
  padding: 34px 22px 26px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 25px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  opacity: 0;
  transform: translateX(26%) scale(.73);
  box-shadow: none;
  transition: transform .62s cubic-bezier(.22,.8,.2,1), opacity .45s ease, box-shadow .45s ease;
}

.mk-tslider .testimonial-card.is-center {
  z-index: 10;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  box-shadow: 0 18px 42px rgba(60,0,8,.28);
}

.mk-tslider .testimonial-card.is-left,
.mk-tslider .testimonial-card.is-right {
  z-index: 3;
  opacity: .55;
  box-shadow: 0 8px 25px rgba(60,0,8,.16);
}

.mk-tslider .testimonial-card.is-left { transform: translateX(-108%) scale(.8); }
.mk-tslider .testimonial-card.is-right { transform: translateX(8%) scale(.8); }
.mk-tslider .testimonial-card.is-hidden-left { transform: translateX(-126%) scale(.73); }

.mk-tslider.mk-tinit .testimonial-card { transition: none !important; }

/* Red quote mark (like the red number) and red tab, as in the benefits cards */
.mk-tslider .testimonial-card::before {
  content: "\201D";
  position: absolute;
  top: 12px;
  right: 22px;
  color: #d71920;
  font: 900 46px/1 Georgia, "Times New Roman", serif;
}

.mk-tslider .testimonial-card::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 50px;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background: #d71920;
}

.mk-tslider .testimonial-header {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
}

.mk-tslider .testimonial-avatar {
  width: 58px !important;
  height: 58px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px #d71920, 0 6px 14px rgba(0,0,0,.12) !important;
  pointer-events: none;
  -webkit-user-drag: none;
}

.mk-tslider .testimonial-info h4 {
  margin: 2px 0 0 !important;
  color: #151515 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
}

.mk-tslider .testimonial-rating {
  margin: 0 !important;
  color: #ffb400 !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  line-height: 1 !important;
}

.mk-tslider .testimonial-text {
  margin: 0 !important;
  color: #666 !important;
  font-size: 13.5px !important;
  line-height: 2 !important;
  text-align: center !important;
}

.mk-tslider .testimonial-date {
  margin-top: 10px !important;
  padding-top: 8px !important;
  text-align: center !important;
}

/* Dots (bigger tap area, 4px visible bar) */
.mk-tdots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: rtl;
}

.mk-tdots button {
  box-sizing: border-box;
  width: 6px;
  height: 20px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  background-clip: content-box;
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.mk-tdots button.is-active {
  width: 20px;
  background-color: #fff;
}


/* ==========================================
   "مزایای مبین خودرو" block: no red frame from the CMS block
   ========================================== */

[class*="customDiv"]:has(> #mobinBenefitsSection) {
  margin: 0 auto !important;
  padding: 16px 32px !important;
  background: transparent !important;
}

@media (min-width: 1241px) {
  [class*="customDiv"]:has(> #mobinBenefitsSection) { padding: 16px 12px !important; }
}

/* Brand tabs (خودروهای داخلی / خارجی): no red frame from the CMS block */
[class*="customDiv"]:has(.custom-tab-wrapper) {
  margin: 0 auto !important;
  padding: 14px 20px 16px !important;
  background: transparent !important;
}

/* The tab widget adds 30px above and below itself */
[class*="customDiv"] .custom-tab-wrapper { margin: 0 !important; }


/* ==========================================
   Benefit cards above the brand tabs - the user's own design, unchanged
   (JS in meta-tags.html inserts section.mk-benefits)
   ========================================== */

.mk-benefits,
.mk-benefits * { box-sizing: border-box; }

.mk-benefits {
  width: 100%;
  max-width: 1320px;
  margin: auto;
  padding: 18px 12px;
  font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif;
}

.mk-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  direction: rtl;
}

.mk-benefit {
  min-width: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.085);
  padding: 19px 12px 22px;
  text-align: center;
}

.mk-art {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #dc0928;
}

.mk-num { width: 49px; height: 63px; flex-shrink: 0; }
.mk-line { height: 48px; width: 1px; background: #bdbdbd; flex-shrink: 0; }
.mk-icon { width: 59px; height: 59px; flex-shrink: 0; }

.mk-benefit h3 {
  margin: 12px 0 10px;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.7;
  color: #171717;
  font-weight: 700;
  text-align: center;
}

.mk-benefit p {
  margin: 0;
  color: #777;
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 700px) {
  .mk-benefits { padding: 12px 5px; }
  .mk-benefits-grid { gap: 4px; }
  .mk-benefit { padding: 10px 3px 12px; box-shadow: 0 4px 10px rgba(0,0,0,.075); }
  .mk-art { height: 37px; gap: 3px; }
  .mk-num { width: 15px; height: 30px; }
  .mk-line { height: 25px; }
  .mk-icon { width: 24px; height: 24px; }
  .mk-benefit h3 { font-size: clamp(9px, 2.45vw, 12px); line-height: 1.6; margin: 7px 0 5px; overflow-wrap: anywhere; }
  .mk-benefit p { font-size: clamp(8px, 2vw, 10px); line-height: 1.65; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .mk-benefits { padding-inline: 3px; }
  .mk-benefits-grid { gap: 3px; }
  .mk-benefit { padding-inline: 2px; }
  .mk-art { gap: 2px; }
  .mk-num { width: 13px; }
  .mk-icon { width: 21px; height: 21px; }
}

/* Grey band behind the cards */
.mk-benefits {
  margin: 0 auto 16px;
  padding: 18px;
  background: #f1f1f1;
  border-radius: 24px;
}

/* Phones: band runs edge to edge right under the slider, cards 6px from the screen edges
   (-14px / -20px cancel the brand block's padding) */
@media (max-width: 767px) {
  .mk-benefits {
    width: auto;
    margin: -14px -20px 14px;
    padding: 14px 6px;
    border-radius: 0;
  }
}


/* ==========================================
   "مبین خودرو در رسانه ها" - white panel with outlet cards
   Hook: gallery id imagegal_1792489589691_yq9nvl
   ========================================== */

/* Keep the grey band continuous with the content block above */
.Row:has(> [class*="customDiv"] > [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) {
  padding: 0 0 40px !important;
  background: #f1f1f1 !important;
}

[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) {
  width: calc(100% - 64px) !important;
  max-width: 1176px !important;
  margin: 0 auto !important;
  padding: 30px 16px 26px !important;
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 38px rgba(30,12,16,.06) !important;
  box-sizing: border-box !important;
}

/* Title + red bar */
[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:first-child {
  margin: 0 !important;
  text-align: center !important;
}

[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:first-child > span {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  color: #171717 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.8 !important;
}

[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:first-child > span::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #a00716, #f02c3c);
}

/* The empty paragraph becomes a subtitle */
[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:nth-child(2) {
  margin: 10px 0 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}

[class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:nth-child(2)::before {
  content: "گزارش رسانه‌ها از مبین خودرو";
  display: block;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.9;
}

/* Outlet cards */
[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: 780px;
  margin: 22px auto 0 !important;
}

[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 6px 14px !important;
  background: #fafafa !important;
  border: 1px solid #efefef !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

/* Red tab at the bottom, like the benefits cards */
[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 18px);
  width: 36px;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: #d71920;
}

/* Whole card opens the news link */
[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item img {
  width: 58px !important;
  height: 58px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #e6e6e6, 0 8px 18px rgba(0,0,0,.08);
  transition: transform .3s ease;
}

[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .video-title-overlay {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

[data-imagegal-id="imagegal_1792489589691_yq9nvl"] .video-title-overlay::after {
  content: "مشاهده خبر";
  display: block;
  margin-top: 2px;
  color: #d71920;
  font-size: 11px;
  font-weight: 700;
}

/* Mobile: one clean list instead of three cramped cards */
@media (max-width: 767px) {
  [class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) { padding: 26px 14px 16px !important; }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 18px !important;
    background: #fafafa;
    border: 1px solid #efefef;
    border-radius: 20px;
    overflow: hidden;
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 13px;
    padding: 12px 16px 12px 44px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #efefef !important;
    border-radius: 0 !important;
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper:last-child { border-bottom: 0 !important; }

  /* Red tab becomes a small "open" chevron on the left */
  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper::after {
    top: 50%;
    bottom: auto;
    left: 20px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #d71920;
    border-bottom: 2px solid #d71920;
    border-radius: 0;
    background: none;
    transform: translateY(-50%) rotate(45deg);
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item {
    flex: 0 0 auto;
    width: auto !important;
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item img {
    width: 48px !important;
    height: 48px !important;
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .video-title-overlay {
    flex: 1 1 auto;
    width: auto !important;
    font-size: 14.5px !important;
    text-align: right !important;
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .video-title-overlay::after {
    margin-top: 0;
    color: #9a9a9a;
    font-size: 11.5px;
    font-weight: 600;
  }
}

@media (min-width: 768px) {
  [class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) { padding: 36px 28px 32px !important; }
  [class*="customDiv"]:has(> [data-imagegal-id="imagegal_1792489589691_yq9nvl"]) > p:first-child > span { font-size: 26px !important; }
  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery { gap: 16px !important; }
  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper { padding: 24px 12px 20px !important; }
  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item img { width: 72px !important; height: 72px !important; }
  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .video-title-overlay { font-size: 15px !important; }
}


/* ==========================================
   HOVER (mouse only - no sticky hover on touch)
   ========================================== */

@media (max-width: 1240px) and (hover: hover) {

  .HeaderTopMobile .mobile-menu > a:not(#btnCategoryMenu):hover { background: #f5f6f8 !important; }

  .ArticleIndexBox .Item:hover .ItemTitle { color: var(--mk-red) !important; }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper:hover {
    transform: translateY(-3px);
    background-color: #fff !important;
    border-color: #f2d3d7 !important;
    box-shadow: 0 14px 28px rgba(120,10,24,.09);
  }

  [data-imagegal-id="imagegal_1792489589691_yq9nvl"] .image-gallery-item-wrapper:hover img { transform: scale(1.05); }

  #categorySidebar .HeaderTopMobilemenu-link:hover { background: #fafafa !important; }

  body .HeaderTopMobileTop > .mk-hdr-menu:hover { border-color: #ddd !important; }
}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  body .HeaderTopMobileTop,
  .HeaderTopMobile .mobile-menu > a,
  #categorySidebar,
  #categorySidebar .toggle-submenu::before,
  #categorySidebar .toggle-submenu::after,
  #sidebarOverlay,
  .mk-tslider .testimonial-card { transition: none !important; }

  #categorySidebar .HeaderTopMobilesubmenu.open { animation: none !important; }

}


/* ==========================================
   TABS (mobile)
   ========================================== */

@media (max-width: 767px) {

  [data-tab-id="tab_1792609834289"] .custom-tab-headers {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-tab-id="tab_1792609834289"] .custom-tab-headers > .custom-tab-btn {
    position: static !important;
    display: flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* ===== meta part (comes after, overrides the part above) ===== */
/* ==========================================
   ALL INNER PAGES - breadcrumb + title + rating card (user's template)
   Lives here (not in custom.css) so CSS and JS always go live together.
   JS adds .mkp-card / .mkp-crumb / .mkp-line / .mkp-rate; desktop and mobile
   ========================================== */

/* read by the JS: without this CSS on the site, the product page is left untouched */
:root { --mkp: 1; }

.HeaderDownBox.mkp-hidden { display: none !important; }

/* Table of contents moved above the comments card (JS) */
.mobin-toc.mkp-toc-end { margin: 24px 0 18px !important; }

/* Less empty space between the title card and the article */
.mkp-nopic { display: none !important; }
/* The CMS requires a main picture, so many products use a 1500x3 transparent strip (all its uploads are named
   ...hi6yFDnda.jpg.png): hide that row from the start, without waiting for JS or the image */
#SafehatDakheli .BoxCenter > .Row:has(img.HeightPic[src*="hi6yFDnda"]) { display: none !important; }
#SafehatDakheli .Box:has(> .mkp-card) > .BoxCenter { padding-top: 0 !important; }
#SafehatDakheli .Box:has(> .mkp-card) .BoxCenter > .RowMarginTen { margin-top: 0 !important; }
#SafehatDakheli .Box:has(> .mkp-card) .RowMarginTen > article > div:first-of-type { margin-top: 0 !important; }

#SafehatDakheli .BoxTop.mkp-card {
  position: relative !important;
  z-index: 5;
  height: auto !important;
  min-height: 0 !important;
  margin: 18px 0 !important;
  padding: 24px 30px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 40px rgba(21,35,58,.045) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: #252830 !important;
  text-align: right !important;
}

.mkp-card > .Row:empty,
.mkp-card .RatingStarBox { display: none !important; }

/* Breadcrumb */
.mkp-card .mkp-crumb {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #9298a2 !important;
  font-size: 11px !important;
  line-height: 1.8 !important;
}

.mkp-card .mkp-crumb .NewsIcon { display: none !important; }

.mkp-card .mkp-crumb a {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #9298a2 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  text-decoration: none !important;
}

.mkp-card .mkp-crumb a:last-of-type { color: #b71d35 !important; }

/* article / news crumbs put a stray separator inside their first link */
.mkp-card .mkp-crumb a .pathHeaderDown { display: none !important; }

.mkp-card .mkp-crumb .pathHeaderDown {
  display: inline !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 0 !important;
}

.mkp-card .mkp-crumb .pathHeaderDown::before {
  content: "\203A";  /* › */
  color: #9298a2;
  font-size: 11px;
}

/* Title line */
.mkp-card .mkp-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.mkp-card .mkp-line h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #252830 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  text-align: right !important;
}

.mkp-card .mkp-line h1 a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/* articles and news (user): no "بازگشت به لیست …" / date / "نظرات کاربران ( n )" row under the card - the date sits
   in the card under the title (JS adds .mkp-date) */
#SafehatDakheli .BoxCenter > .Row:has(> .DateRegister) { display: none !important; }
.mkp-card .mkp-date { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #8a929c; font-size: 12px; line-height: 1.8; }
.mkp-card .mkp-date svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* articles and news (user): the post's main picture (the panel's img.ImagePost) has rounded corners, like the title
   card (18px; 12px on phones) */
#SafehatDakheli .RowMarginTen > img.ImagePost { border-radius: 18px !important; }
@media (max-width: 600px) { #SafehatDakheli .RowMarginTen > img.ImagePost { border-radius: 12px !important; } }

/* Rating pill + panel */
.mkp-rate {
  position: relative;
  flex-shrink: 0;
}

.mkp-rate-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 11px;
  background: #fafafa;
  border: 1px solid #eceef1;
  border-radius: 100px;
  color: #3c4149;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}

.mkp-rate-btn b { font-weight: 700; }
.mkp-gold { color: #efa81b; font-size: 17px; line-height: 1; }
.mkp-caret { color: #aaa; }

.mkp-rate-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: 258px;
  padding: 18px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  box-shadow: 0 14px 45px rgba(24,32,49,.14);
  box-sizing: border-box;
  text-align: center;
}

.mkp-rate-panel.open { display: block; }

.mkp-rate-panel strong {
  display: block;
  color: #252830;
  font-size: 13px;
}

.mkp-rate-panel p {
  margin: 8px 0;
  color: #838995;
  font-size: 11px;
  line-height: 1.8;
}

.mkp-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 5px;
  margin: 13px 0;
}

.mkp-stars button {
  margin: 0;
  padding: 2px;
  background: none;
  border: 0;
  color: #d9dce1;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s;
}

.mkp-stars button.active { color: #efa81b; }

@media (hover: hover) {
  .mkp-stars button:hover { transform: scale(1.15); }
}

.mkp-hint {
  color: #a0a4ad;
  font-size: 10px;
}

@media (max-width: 600px) {
  #SafehatDakheli .BoxTop.mkp-card {
    margin: 16px 0 !important;
    padding: 14px 13px !important;
    border-radius: 12px !important;
  }

  .mkp-card .mkp-crumb { gap: 5px !important; font-size: 10px !important; }
  .mkp-card .mkp-crumb a,
  .mkp-card .mkp-crumb .pathHeaderDown::before { font-size: 10px !important; }
  .mkp-card .mkp-line { margin-top: 9px; }
  .mkp-card .mkp-line h1 { font-size: 16px !important; }
  .mkp-rate-btn { gap: 4px; padding: 6px 8px; font-size: 11px; }
  .mkp-rate-panel { width: 240px; }
}
/* Hero slider: a soft oval shadow under it (desktop replaces it below; phones hide it, as in the rail template).
   The wrapper gets no z-index (no new stacking context); only the shadow is lifted above the cards. */
.slide-wrapper { position: relative; }
.slide-wrapper::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 30px;
  background:
    radial-gradient(ellipse 48% 100% at 50% 0%, rgba(20,22,30,.40) 0%, rgba(20,22,30,.18) 38%, rgba(20,22,30,0) 74%),
    linear-gradient(to bottom, rgba(20,22,30,.12) 0, rgba(20,22,30,0) 12px);
  pointer-events: none;
}

/* While the page is still loading (html.mk-loading, set by the script): keep the old breadcrumb bar, title box,
   table of contents and comments out of sight until their new design is applied (no flash of the old look) */
html.mk-loading .HeaderDownBox,
html.mk-loading #SafehatDakheli .mobin-toc:not(.mkp-toc-end) { display: none !important; }
html.mk-loading #SafehatDakheli > .BoxSizeAsli > .Box:first-of-type > .BoxTop:not(.mkp-card),
html.mk-loading .CommentFaceBookHead:not(.mkc-head),
html.mk-loading .CommentFaceBook:not(.mkc) { visibility: hidden !important; }

/* Drawer title (was "منوی مبین خودرو" in the CSS field): the slider's slogan */
#categorySidebar .category-sidebar-header > span::before { content: "خیابان‌های شهر منتظرتن!"; white-space: nowrap; }

/* ==========================================
   PHONE HEADER - 20% lower (72 -> 58px), with a bigger logo in the middle that starts above the buttons
   and hangs a quarter below the header (overrides the header rules of the CSS field; this style comes later)
   ========================================== */
@media (max-width: 1240px) {
  body .HeaderTopMobileTop {
    height: 58px !important;
    min-height: 58px !important;
    overflow: visible !important;
  }
  /* The theme's spacer under the fixed header (StyleNew.css: min-height 61px) pushes every page down.
     57px puts the slider / page right under the new header (1px under its red line, so no hairline gap) */
  body .HeaderTopMobileTopBox { min-height: 57px !important; }
  /* hide far enough that the hanging logo and its shadow go too */
  html.mk-header-hidden body .HeaderTopMobileTop {
    transform: translateY(calc(-100% - 36px)) !important;
  }
  /* 77px logo glued to the very top of the page (top 0, above the buttons at top 8px),
     with 77 - 58 = 19px (a quarter) below the header */
  body .HeaderTopMobileTop > a.LogoMobileNew {
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: 77px !important;
  }
  body .HeaderTopMobileTop > a.LogoMobileNew > img {
    width: auto !important;
    height: 77px !important;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  }
  body .HeaderTopMobileTop > .mk-hdr-menu,
  body .HeaderTopMobileTop > a.TellMobileNew {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-size: 22px 22px !important;
  }
}

/* ==========================================
   COMMENTS on inner pages - the user's "نظرات کاربران" design. The theme's own markup is restyled in place
   (JS adds .mkc), so voting, the Question/Answer microdata and the comment form keep working.
   Theme CSS is linked later in the page, hence the .CommentFaceBook.mkc prefix on every rule.
   ========================================== */
.CommentFaceBookHead.mkc-head { display: flex !important; align-items: flex-start; justify-content: center; float: none; box-sizing: border-box; width: 100% !important; max-width: 920px; height: 59px; margin: 0 auto !important; padding: 17px 0 0 !important; background: none !important; box-shadow: none !important; color: #161616; font-size: 18px; font-weight: 400; }
.CommentFaceBook.mkc { display: flex !important; flex-direction: column; gap: 14px; float: none; box-sizing: border-box; width: 100% !important; max-width: 920px; margin: 0 auto 20px !important; padding: 0 !important; border: 0; box-shadow: none !important; color: #111; font-size: 12px; text-align: right; }
.CommentFaceBook.mkc .mkc-empty, .CommentFaceBook.mkc .mkc-hide, .CommentFaceBook.mkc .ItemSeprator, .CommentFaceBook.mkc .AvatarDiv { display: none !important; }
.CommentFaceBook.mkc > .CommentFaceBookItem { float: none; width: auto; box-sizing: border-box; background: #fff; border: 1px solid #e5e8eb; border-radius: 7px; padding: 16px 20px 12px; }
.CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv { display: grid; grid-template-columns: 155px minmax(0, 1fr); grid-template-areas: "votes name" "votes text" "reply reply"; column-gap: 20px; align-items: start; direction: ltr; float: none; width: auto; margin: 0; }
.CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv > .Name { grid-area: name; display: flex; align-items: center; gap: 7px; direction: rtl; float: none; margin: 0 0 8px; color: #454545; font-size: 11px; }
.CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv > .Name::after { content: "☼"; padding-right: 27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f0f2f4'/%3E%3Ccircle cx='12' cy='8.2' r='3.5' fill='%239aa1a9'/%3E%3Cpath d='M5.5 19c.5-3.4 2.8-5.3 6.5-5.3s6 1.9 6.5 5.3' fill='%239aa1a9'/%3E%3C/svg%3E") no-repeat right center / 20px 20px; color: #777; line-height: 20px; }
.CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv > .Text1 { grid-area: text; direction: rtl; float: none; width: auto; margin: 0; color: #252525; font-size: 11px; line-height: 1.95; text-align: right; }
.CommentFaceBook.mkc .Text1 p { margin: 0; }
.CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv > .Voting { grid-area: votes; display: flex; align-items: center; direction: ltr; float: none; margin: 0; padding-top: 2px; }
.CommentFaceBook.mkc .Voting input[id^="PositiveButton"], .CommentFaceBook.mkc .Voting input[id^="NegativeButton"] { order: 1; float: none; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23050505'%3E%3Cpath d='M2 10h4v11H2zM8 21h10.1c1.1 0 2-.7 2.2-1.8l1.2-7.1c.2-1.2-.7-2.3-2-2.3h-6l.9-4.1c.2-1.1-.3-2.2-1.3-2.7L12 2 7 9.2c-.6.8-1 1.7-1 2.7V19c0 1.1.9 2 2 2z'/%3E%3C/svg%3E") center / 20px 20px no-repeat; color: transparent; font-size: 0; text-indent: -9999px; overflow: hidden; cursor: pointer; }
.CommentFaceBook.mkc .Voting input[id^="NegativeButton"] { order: 3; transform: rotate(180deg); }
.CommentFaceBook.mkc .Voting input[disabled] { opacity: .65; cursor: default; }
.CommentFaceBook.mkc .Voting .ResultPositiveSpan, .CommentFaceBook.mkc .Voting .ResultNegativeSpan { order: 2; float: none; width: auto; height: auto; margin: 0 28px 0 5px; padding: 0; color: #111; font-family: inherit; font-size: 10px; font-weight: 400; line-height: 20px; }
.CommentFaceBook.mkc .Voting .ResultNegativeSpan { order: 4; margin-right: 0; }
.CommentFaceBook.mkc .LeftDiv .CommentFaceBookItem2 { grid-area: reply; float: none; width: auto !important; box-sizing: border-box; margin: 18px 0 0; padding: 14px 16px 10px; background: #f5f6f7; border-radius: 8px; direction: rtl; text-align: right; }
.CommentFaceBook.mkc .CommentFaceBookItem2 > .LeftDiv { float: none; width: auto; margin: 0; }
.CommentFaceBook.mkc .LeftDiv .NameModir { display: flex; align-items: center; gap: 8px; float: none; margin: 0 0 8px; font-size: 0; }
.CommentFaceBook.mkc .LeftDiv .NameModir::before { content: "ادمین"; padding: 4px 13px; border-radius: 4px; background: #ed1c24; color: #fff; font-size: 10px; line-height: 1.3; }
.CommentFaceBook.mkc .LeftDiv .NameModir::after { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ed1c24' stroke-width='1'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M8 0v2M8 14v2M0 8h2M14 8h2M2.3 2.3l1.4 1.4m8.6 8.6 1.4 1.4m0-11.4-1.4 1.4m-8.6 8.6-1.4 1.4'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.CommentFaceBook.mkc .LeftDiv .Text1Modir { display: block; float: none; width: auto; margin: 0; color: #252525; font-size: 10px; line-height: 1.95; text-align: right; }
.CommentFaceBook.mkc .mkc-more-wrap { display: flex; justify-content: center; margin: 8px 0 0; }
.CommentFaceBook.mkc .mkc-more-wrap[hidden] { display: none; }
.CommentFaceBook.mkc .mkc-more { min-width: 170px; padding: 12px 24px; border: 1px solid #dfe3e7; border-radius: 7px; background: #f6f7f8; color: #30363c; font-family: inherit; font-size: 12px; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.CommentFaceBook.mkc .mkc-more:hover { background: #eef0f2; border-color: #cfd5db; }
.CommentFaceBook.mkc .DivForm { display: block; box-sizing: border-box; width: auto; margin: 20px 0 0; padding: 24px 24px 20px; background: #fff; border: 1px solid #e5e8eb; border-radius: 9px; text-align: right; }
.CommentFaceBook.mkc .DivForm .Row { float: none; width: auto; margin: 0 0 12px; }
.CommentFaceBook.mkc .DivForm .SpanTitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.CommentFaceBook.mkc .DivForm .TextBoxTitle { display: block !important; float: none; box-sizing: border-box; width: 100%; max-width: none; height: 42px; margin: 0; padding: 0 14px; background: #fafbfc; border: 1px solid #e2e6ea; border-radius: 7px; outline: 0; box-shadow: none; color: #252a30; font-family: inherit; font-size: 12px; text-align: right; direction: rtl; transition: border-color .18s ease, background .18s ease; }
.CommentFaceBook.mkc .DivForm textarea.TextBoxTitle { height: 124px; min-height: 0; padding: 13px 14px; line-height: 1.9; resize: vertical; }
.CommentFaceBook.mkc .DivForm .TextBoxTitle::placeholder { color: #858d96; opacity: 1; }
.CommentFaceBook.mkc .DivForm .TextBoxTitle:hover { border-color: #cfd5db; }
.CommentFaceBook.mkc .DivForm .TextBoxTitle:focus { border-color: #b8c0c9; background: #fff; }
.CommentFaceBook.mkc .DivForm .ButtonRegister { display: block; min-width: 112px; height: 38px; margin: 4px 0 0 auto; padding: 0 22px; background: #ed1c24; color: #fff; border: 0; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.CommentFaceBook.mkc .DivForm .ButtonRegister:hover { background: #d91620; }
.CommentFaceBook.mkc .DivForm .ButtonRegister:active { transform: translateY(1px); }
.CommentFaceBook.mkc .RegisterMessage { display: block; margin-top: 8px; font-size: 12px; }
@media (max-width: 960px) {
  .CommentFaceBookHead.mkc-head { padding: 17px 12px 0 !important; }
  .CommentFaceBook.mkc { padding: 0 12px !important; }
}
@media (max-width: 600px) {
  .CommentFaceBookHead.mkc-head { height: 55px; font-size: 17px; }
  .CommentFaceBook.mkc > .CommentFaceBookItem { padding: 14px 12px 11px; }
  .CommentFaceBook.mkc > .CommentFaceBookItem > .LeftDiv { grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; }
  .CommentFaceBook.mkc .Voting .ResultPositiveSpan { margin-right: 12px; }
  .CommentFaceBook.mkc .Voting input[id^="PositiveButton"], .CommentFaceBook.mkc .Voting input[id^="NegativeButton"] { width: 17px; height: 17px; background-size: 17px 17px; }
  .CommentFaceBook.mkc .LeftDiv .CommentFaceBookItem2 { margin-top: 14px; padding: 12px 10px 9px; }
  .CommentFaceBook.mkc .DivForm { margin-top: 12px; padding: 18px 12px 16px; border-radius: 8px; }
}

/* ==========================================
   FAQ in articles - restyles the programmer's fixed markup (h2 + .faq > .faq-item > h3.faq-question +
   .faq-answer > p, opened by its own inline script with .faq-item.active); the HTML stays as generated
   ========================================== */
#SafehatDakheli h2:has(+ .faq) { position: relative; margin: 30px 0 16px; padding: 0 0 12px; color: #151515; font-size: 20px; font-weight: 900; line-height: 1.7; text-align: center; }
#SafehatDakheli h2:has(+ .faq)::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 54px; height: 5px; margin-left: -27px; border-radius: 20px; background: linear-gradient(90deg, #a00716, #f02c3c); }
#SafehatDakheli .faq { display: grid; gap: 10px; margin: 0 0 26px; }
#SafehatDakheli .faq .faq-item { margin: 0; padding: 0; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.04); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
#SafehatDakheli .faq .faq-item.active { border-color: #f3cdd2; box-shadow: 0 10px 26px rgba(208,9,40,.08); }
#SafehatDakheli .faq .faq-question { position: relative; margin: 0; padding: 15px 18px 15px 58px; color: #1d1d1f; font-size: 15px; font-weight: 800; line-height: 1.9; text-align: right; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
#SafehatDakheli .faq .faq-question:hover,
#SafehatDakheli .faq .faq-item.active .faq-question { color: #d00928; }
#SafehatDakheli .faq .faq-question:focus-visible { outline: 2px solid #d00928; outline-offset: -2px; border-radius: 16px; }
#SafehatDakheli .faq .faq-question::after { content: ""; position: absolute; left: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff1f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d00928' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; transition: transform .25s ease, background-color .25s ease; }
#SafehatDakheli .faq .faq-item.active .faq-question::after { transform: rotate(180deg); background-color: #d00928; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#SafehatDakheli .faq .faq-answer { margin: 0; padding: 0 18px 16px; }
#SafehatDakheli .faq .faq-item.active .faq-answer { animation: mkFaqIn .25s ease; }
#SafehatDakheli .faq .faq-answer p { margin: 0; padding-top: 12px; border-top: 1px solid #f2f2f2; color: #555; font-size: 14px; line-height: 2.1; text-align: justify; }
@keyframes mkFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  #SafehatDakheli h2:has(+ .faq) { font-size: 24px; }
  #SafehatDakheli .faq .faq-question { padding: 17px 22px 17px 64px; font-size: 16px; }
  #SafehatDakheli .faq .faq-question::after { left: 20px; }
  #SafehatDakheli .faq .faq-answer { padding: 0 22px 18px; }
  #SafehatDakheli .faq .faq-answer p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #SafehatDakheli .faq .faq-item.active .faq-answer { animation: none; }
}

/* ==========================================
   TABLES in articles (.ai-table-wrap from the content tool): replaces the theme's green .Box table look.
   On phones, tables with 3+ columns become one card per row (JS adds .mk-cards and data-label from the header)
   ========================================== */
#SafehatDakheli .ai-table-wrap { margin: 18px 0 20px; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.04); overflow-x: auto; }
#SafehatDakheli .ai-table-wrap table { display: table; width: 100%; margin: 0; border-collapse: collapse; background: #fff; box-shadow: none; font-size: 14px; text-align: center; white-space: normal; }
#SafehatDakheli .ai-table-wrap table::after { content: none; display: none; }
#SafehatDakheli .ai-table-wrap tr { border: 0; background: transparent; }
#SafehatDakheli .ai-table-wrap th,
#SafehatDakheli .ai-table-wrap td { padding: 13px 16px; border: 0; border-bottom: 1px solid #f1f1f1; text-align: center; vertical-align: middle; line-height: 1.9; }
#SafehatDakheli .ai-table-wrap th { background: #c80f21; color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; border-bottom: 0; }
#SafehatDakheli .ai-table-wrap td { color: #444; }
#SafehatDakheli .ai-table-wrap td:first-child { color: #151515; font-weight: 800; }
#SafehatDakheli .ai-table-wrap tbody tr:nth-child(even) td { background: #fbfbfb; }
#SafehatDakheli .ai-table-wrap tbody tr:hover td { background: #fff5f6; }
#SafehatDakheli .ai-table-wrap tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  #SafehatDakheli .ai-table-wrap table { min-width: 0; font-size: 13px; }
  #SafehatDakheli .ai-table-wrap th, #SafehatDakheli .ai-table-wrap td { padding: 11px 12px; }
  #SafehatDakheli .ai-table-wrap:has(> table.mk-cards) { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  #SafehatDakheli .ai-table-wrap table.mk-cards,
  #SafehatDakheli .ai-table-wrap table.mk-cards tbody,
  #SafehatDakheli .ai-table-wrap table.mk-cards tr,
  #SafehatDakheli .ai-table-wrap table.mk-cards td { display: block; width: auto; background: none; }
  #SafehatDakheli .ai-table-wrap table.mk-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #SafehatDakheli .ai-table-wrap table.mk-cards tr { margin: 0 0 10px; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.04); overflow: hidden; }
  #SafehatDakheli .ai-table-wrap table.mk-cards td { padding: 10px 14px; border-bottom: 1px solid #f3f3f3; background: none; text-align: right; }
  #SafehatDakheli .ai-table-wrap table.mk-cards td:first-child { padding: 11px 14px; background: #fff5f6; color: #b3001b; font-size: 14px; }
  #SafehatDakheli .ai-table-wrap table.mk-cards td:not(:first-child) { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 10px; }
  #SafehatDakheli .ai-table-wrap table.mk-cards td:not(:first-child)::before { content: attr(data-label); color: #8a8f98; font-size: 12px; font-weight: 700; }
  #SafehatDakheli .ai-table-wrap table.mk-cards td:last-child { border-bottom: 0; }
}

/* ==========================================
   POST LISTS on every inner page: article / news / product category pages and "سایر مقالات" / "سایر اخبار" under
   articles and news (title span #..._sayer2). Theme list .ProductShow > .ItemAds, subcategory tiles
   .RepeaterIndexItem > a.ItemAds, pager .Paging. Same clean cards everywhere: 16:9 picture, centered 2-line title
   and summary. Blank pictures (CMS "No Image Yet", the products' 1500x3 transparent strip) show the site placeholder.
   ========================================== */
/* related box: centered title with the red bar like the FAQ; its empty article / repeater rows go */
#SafehatDakheli .Box:has(> .BoxTop > [id$="_sayer2"]) > .BoxTop { position: relative; float: none; width: auto; min-height: 0; margin: 28px 0 16px; padding: 0 0 12px; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; text-align: center; }
#SafehatDakheli .Box:has(> .BoxTop > [id$="_sayer2"]) > .BoxTop::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 54px; height: 5px; margin-left: -27px; border-radius: 20px; background: linear-gradient(90deg, #a00716, #f02c3c); }
#SafehatDakheli .Box > .BoxTop > [id$="_sayer2"] { display: block; float: none; margin: 0; padding: 0; color: #151515 !important; font-size: 20px; font-weight: 900; line-height: 1.7; text-align: center !important; }
#SafehatDakheli .Box:has(> .BoxTop > [id$="_sayer2"]) > .BoxCenter { padding-top: 0 !important; }
#SafehatDakheli .Box:has(> .BoxTop > [id$="_sayer2"]) > .BoxCenter > .RowMarginTen,
#SafehatDakheli .Box:has(> .BoxTop > [id$="_sayer2"]) > .BoxCenter > .RepeaterIndexItem { display: none !important; }

/* post cards */
#SafehatDakheli .ProductShow { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; width: auto; margin: 0; padding: 0 !important; }
#SafehatDakheli .ProductShow > .ItemAds { display: flex !important; flex-direction: column !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #ececec !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(0,0,0,.04) !important; overflow: hidden !important; visibility: visible !important; animation: none !important; transition: transform .2s ease, box-shadow .2s ease; }
#SafehatDakheli .ProductShow > .ItemAds > a { text-decoration: none; }
#SafehatDakheli .ProductShow > .ItemAds > a:first-child { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f6f8; }
#SafehatDakheli .ProductShow .ItemImage { display: block; float: none !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; }
#SafehatDakheli .ProductShow .ItemTitle { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; width: auto !important; min-height: 3.6em; margin: 12px 12px 6px !important; padding: 0 !important; color: #151515 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.8 !important; text-align: center !important; }
#SafehatDakheli .ProductShow .ItemTitle2 { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; float: none !important; width: auto !important; margin: 0 12px 14px !important; padding: 0 !important; color: #808080 !important; font-size: 11.5px !important; line-height: 1.9 !important; text-align: center !important; }

/* subcategory tiles (category pages): the same card, picture and title only */
#SafehatDakheli .RepeaterIndexItem { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; width: auto !important; max-width: none !important; margin: 0 0 6px !important; padding: 0 !important; overflow: visible !important; }
#SafehatDakheli .RepeaterIndexItem > .ItemAds { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #ececec !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(0,0,0,.04) !important; overflow: hidden !important; visibility: visible !important; animation: none !important; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
#SafehatDakheli .RepeaterIndexItem .ItemImage { display: block; float: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #f5f6f8 !important; object-fit: cover !important; }
#SafehatDakheli .RepeaterIndexItem .ItemTitle { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden !important; width: auto !important; min-height: 3.6em; margin: 12px 12px 14px !important; padding: 0 !important; color: #151515 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.8 !important; white-space: normal !important; text-align: center !important; }

/* blank pictures show the site's placeholder right away: the CMS "No Image Yet" picture and the products' 1500x3
   transparent strip (…hi6yFDnda…); JS also swaps their src, and any other list picture under 10px high */
#SafehatDakheli .ProductShow > .ItemAds > a:first-child:has(> img[src*="Design/images.jpg"]),
#SafehatDakheli .ProductShow > .ItemAds > a:first-child:has(> img[src*="hi6yFDnda"]) { background: #d00928 url("/Administrator/files/UploadFile/No-image.webp") center / cover no-repeat; }
#SafehatDakheli .ProductShow .ItemImage[src*="Design/images.jpg"],
#SafehatDakheli .ProductShow .ItemImage[src*="hi6yFDnda"] { opacity: 0; }
#SafehatDakheli .RepeaterIndexItem .ItemImage[src*="Design/images.jpg"],
#SafehatDakheli .RepeaterIndexItem .ItemImage[src*="hi6yFDnda"] { background: #d00928 url("/Administrator/files/UploadFile/No-image.webp") center / cover no-repeat !important; object-position: -9999px 0 !important; }

@media (hover: hover) {
  #SafehatDakheli .ProductShow > .ItemAds:hover,
  #SafehatDakheli .RepeaterIndexItem > .ItemAds:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08) !important; }
  #SafehatDakheli .ProductShow > .ItemAds:hover .ItemTitle,
  #SafehatDakheli .RepeaterIndexItem > .ItemAds:hover .ItemTitle { color: #d00928 !important; }
}
@media (min-width: 768px) {
  #SafehatDakheli .Box > .BoxTop > [id$="_sayer2"] { font-size: 24px; }
  #SafehatDakheli .ProductShow,
  #SafehatDakheli .RepeaterIndexItem { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; }
  #SafehatDakheli .ProductShow .ItemTitle { margin: 14px 14px 6px !important; font-size: 14px !important; }
  #SafehatDakheli .ProductShow .ItemTitle2 { -webkit-line-clamp: 3; line-clamp: 3; margin: 0 14px 16px !important; font-size: 12.5px !important; }
  #SafehatDakheli .RepeaterIndexItem .ItemTitle { margin: 14px 14px 16px !important; font-size: 14px !important; }
}
@media (min-width: 1100px) {
  #SafehatDakheli .ProductShow,
  #SafehatDakheli .RepeaterIndexItem { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px !important; }
}

/* PAGER (all list pages): rounded buttons, the current page in red, the total ("مجموع ... مقاله") at the far left */
#SafehatDakheli .Paging { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: auto !important; margin: 18px 0 !important; padding: 0 !important; text-align: right !important; direction: rtl !important; }
#SafehatDakheli .Paging a.Item,
#SafehatDakheli .Paging a.ItemNow { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; float: none !important; width: auto !important; min-width: 40px; height: 40px; margin: 0 !important; padding: 0 12px !important; background: #fff !important; border: 1px solid #e6e6e6 !important; border-radius: 12px !important; box-shadow: 0 3px 10px rgba(0,0,0,.04); color: #333 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; transition: border-color .2s ease, color .2s ease; }
#SafehatDakheli .Paging a.Item:hover { border-color: #d00928 !important; color: #d00928 !important; }
#SafehatDakheli .Paging a.ItemNow { background: #d00928 !important; border-color: #d00928 !important; color: #fff !important; box-shadow: 0 6px 14px rgba(208,9,40,.25); cursor: default; }
#SafehatDakheli .Paging .SpanLeft { float: none !important; margin: 0 auto 0 0 !important; color: #888 !important; font-size: 12px !important; }
/* ==========================================
   PHONE BOTTOM NAV + "محصولات" BRAND SHEET - the user's template exactly (same markup and values; classes
   prefixed mkb-, built by JS). It replaces the theme's bar, which stays in the page hidden: the header's menu
   button still opens the drawer through its #btnCategoryMenu.
   ========================================== */
.mkb-bottom, .mkb-sheet, .mkb-veil { display: none; }
@media (max-width: 1240px) {
  html.mkb-on .HeaderTopMobile .mobile-menu { display: none !important; }
  .mkb-bottom, .mkb-sheet { --red: #ec1c24; --red2: #c5171e; --ink: #1e2935; --muted: #7f8895; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; color: var(--ink); direction: rtl; text-align: right; line-height: normal; }
  .mkb-bottom *, .mkb-sheet *, .mkb-bottom, .mkb-sheet, .mkb-veil { box-sizing: border-box; }
  /* :where() keeps these resets as weak as the template's plain "button, a, input" rule, so the component sizes win */
  :where(.mkb-bottom, .mkb-sheet) :where(button, a, input) { font: inherit; }
  .mkb-bottom button, .mkb-sheet button { cursor: pointer; }
  .mkb-bottom svg, .mkb-sheet svg { display: block; }

  /* bar sized by the user: 62px high, exactly as wide as the brand sheet; a slightly stronger shadow */
  .mkb-bottom { position: fixed; z-index: 100001; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 38px); max-width: 390px; display: flex; align-items: center; gap: 4px; padding: 5px; height: 62px; border-radius: 19px; background: #fff; box-shadow: 0 16px 46px #17253c47, 0 4px 12px #17253c1f; }
  .mkb-navbtn { height: 52px; min-width: 0; flex: 1; margin: 0; padding: 0; border: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none !important; color: #5d6877 !important; background: transparent; font-size: 10px; font-weight: 700; }
  .mkb-navbtn svg { width: 18px; height: 18px; }
  .mkb-navbtn.mkb-primary { background: linear-gradient(180deg, var(--red), var(--red2)); color: #fff !important; box-shadow: 0 4px 10px #d7192733; transition: transform .2s; gap: 1px !important; }
  .mkb-navbtn.mkb-primary:active { transform: scale(.96); }
  .mkb-navbtn.mkb-primary[aria-expanded=true] { background: #c5171e; }
  .mkb-orb { width: 22px; height: 22px; flex: 0 0 22px; border: 0; border-radius: 0; display: grid; place-items: center; background: transparent; box-shadow: none; transition: transform .25s ease; }
  .mkb-orb svg { width: 22px; height: 22px; display: block; }
  .mkb-navbtn.mkb-primary[aria-expanded=true] .mkb-orb { background: transparent; transform: scale(1.05); }

  .mkb-veil { display: block; position: fixed; inset: 0; z-index: 100000; background: #1019288c; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .mkb-veil.open { opacity: 1; visibility: visible; }
  .mkb-sheet { position: fixed; z-index: 100001; bottom: calc(89px + env(safe-area-inset-bottom)); left: 50%; width: calc(100% - 38px); max-width: 390px; max-height: 75vh; max-height: min(75dvh, 680px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 25px; box-shadow: 0 25px 75px #101b3040; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 32px) scale(.94); transform-origin: 50% 100%; transition: transform .43s cubic-bezier(.19,.92,.24,1.06), opacity .23s, visibility .23s; }
  .mkb-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
  .mkb-sheethead { padding: 21px 19px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mkb-title { font-size: 18px; font-weight: 900; letter-spacing: -.4px; color: var(--ink); }
  .mkb-subtitle { font-size: 11px; color: #939ca8; margin-top: 6px; }
  .mkb-close { flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: #f4f5f7; color: #596575; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
  .mkb-close svg { width: 19px; }
  .mkb-tools { padding: 0 17px 13px; }
  .mkb-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f0f2f5; border-radius: 15px; padding: 4px; gap: 4px; }
  .mkb-tab { white-space: nowrap; margin: 0; border: 0; border-radius: 11px; background: transparent; color: #687485; padding: 12px 4px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .2s, color .2s, box-shadow .2s; }
  .mkb-tab svg { width: 17px; height: 17px; }
  .mkb-tab.active { background: #fff; color: var(--red); box-shadow: 0 2px 9px #15243b14; }
  .mkb-search { margin: 12px 0 0; display: flex; align-items: center; gap: 9px; border: 1px solid #edf0f3; background: #fafbfc; border-radius: 13px; padding: 0 13px; height: 43px; overflow: hidden; }
  .mkb-search svg { width: 18px; height: 18px; color: #a1aab6; flex-shrink: 0; }
  /* 16px input shown at 12px: iPhone zooms in on inputs under 16px */
  .mkb-search input { -webkit-appearance: none; appearance: none; border: 0; outline: 0; background: transparent; box-shadow: none; width: 133.34%; min-width: 0; height: auto; margin: 0 0 0 -33.34%; padding: 0; color: #303b48; font-size: 16px; transform: scale(.75); transform-origin: right center; }
  .mkb-search input::placeholder { color: #a0a8b3; opacity: 1; }
  .mkb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .mkb-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 2px 17px 20px; scrollbar-width: thin; scrollbar-color: #e5e8ed transparent; }
  /* user: no "تمام برندهای …" line and brand count between the search box and the brand buttons (JS still fills them) */
  .mkb-sectionhead { display: none; }
  .mkb-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mkb-brand[hidden], .mkb-brands[hidden] { display: none !important; }
  /* search results from both tabs: the second list follows the first with the same gap */
  .mkb-brands:not([hidden]) ~ .mkb-brands:not([hidden]) { margin-top: 9px; }
  .mkb-brand { min-height: 63px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-radius: 14px; background: #f7f8fa; border: 1px solid transparent; text-decoration: none !important; color: #283443 !important; transition: background .2s, border-color .2s, transform .2s; }
  .mkb-brand:hover, .mkb-brand:focus-visible { background: #fff5f5; border-color: #f4d5d7; outline: 0; }
  .mkb-brand:active { transform: scale(.97); }
  .mkb-brandname { font-size: 12px; font-weight: 750; line-height: 1.7; }
  .mkb-arrow { width: 23px; height: 23px; flex-shrink: 0; display: grid; place-items: center; background: #fff; border-radius: 8px; color: #b0b8c3; }
  .mkb-arrow svg { width: 13px; height: 13px; }
  .mkb-brand:hover .mkb-arrow { color: var(--red); }
  .mkb-empty { display: none; text-align: center; padding: 32px 8px; color: #8793a2; font-size: 12px; }
  .mkb-sheet.open .mkb-brand { animation: mkbRise .33s both; }
  .mkb-sheet.open .mkb-brand:nth-child(2n) { animation-delay: .035s; }
}
@keyframes mkbRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 355px) {
  .mkb-sheet, .mkb-bottom { width: calc(100% - 22px); }
  .mkb-brand { padding: 9px; }
  .mkb-brandname { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .mkd-call, .mkd-call::after { transition: none; }
  .mkb-bottom, .mkb-bottom *, .mkb-sheet, .mkb-sheet *, .mkb-veil { transition: none !important; animation: none !important; }
}
/* ==========================================
   FOOTER - the user's template exactly (same markup and values; classes prefixed mkft-). JS builds it in front
   of the theme's #Footer, which html.mkft-on hides. The two link lists are the CMS ones (#LinkShow > .Item),
   moved in, so they stay editable in the panel; 7 links show, the rest stay in the HTML behind "مشاهده بیشتر".
   ========================================== */
html.mkft-on #Footer { display: none !important; }
.mkft { --red: #ec1c24; --bg: #202123; --panel: #292b2e; --muted: #a4a8af; clear: both; background: var(--bg); padding: 0 28px 20px; color: #fff; font-family: IRANSans, IRANSansWeb, Tahoma, Arial, sans-serif; direction: rtl; text-align: right; line-height: normal; }
.mkft, .mkft * { box-sizing: border-box; }
:where(.mkft) a { text-decoration: none; color: inherit; }
:where(.mkft) button { font: inherit; cursor: pointer; }
.mkft-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 34px; padding: 0 16px; }
.mkft-brand-logo { display: block; width: min(85px, 42vw); height: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.mkft-brand-tagline { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.9; margin-top: 13px; text-align: center; }
.mkft-inner { max-width: 1200px; margin: auto; }
.mkft-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.4fr; gap: 36px; align-items: start; }
.mkft-intro { font-size: 12px; color: #aeb1b8; line-height: 2.4; margin: 21px 0; }
.mkft-features { display: flex; flex-wrap: wrap; gap: 7px; }
.mkft-features span { font-size: 10px; padding: 7px 10px; border-radius: 8px; background: #303235; color: #d3d5d9; }
.mkft-title { display: flex; align-items: center; gap: 10px; margin: 7px 0 19px; padding: 0; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; line-height: normal; }
.mkft-title::before { content: ''; width: 16px; height: 3px; border-radius: 9px; background: var(--red); }
.mkft-links { display: grid; gap: 14px; }
.mkft-links a { font-size: 12px; color: #b9bdc5; line-height: 1.8; transition: color .2s; }
.mkft-links a:hover { color: #fff; }
/* every link is in the HTML; only the extra ones are hidden */
.mkft-links .mkft-extra { display: none; }
.mkft-links.expanded .mkft-extra { display: block; }
.mkft-more { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin: 0; padding: 8px 0; border: 0 !important; border-radius: 0; background: transparent !important; color: #f1f2f4; box-shadow: none; font-size: 11px; font-weight: 700; text-align: right; cursor: pointer; transition: background .2s, border-color .2s; }
.mkft-more::after { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin: 0; border: 1px solid #666b70; border-radius: 6px; color: #ff5159; font: 500 17px Arial, sans-serif; line-height: 1; vertical-align: middle; }
.mkft-links.expanded .mkft-more::after { content: '−'; }
.mkft-more:hover { color: #fff !important; opacity: .78; }
.mkft-branches { display: grid; gap: 9px; }
.mkft-branch { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 13px 14px; background: var(--panel); border: 1px solid #34363a; border-radius: 13px; }
.mkft-branch strong { font-size: 12px; font-weight: 700; }
.mkft-branch small { display: block; max-width: 100%; margin-top: 4px; color: #a4a8b1; font-size: 10px; line-height: 2; white-space: normal; }
.mkft-branch svg { flex-shrink: 0; width: 17px; height: 17px; color: #f05b62; }
/* the cards link to the branch pages: a slight lift of the border on hover */
a.mkft-branch { transition: border-color .2s ease, background-color .2s ease; }
a.mkft-branch:hover { border-color: #4a4d52; background: #2e3034; }
.mkft-phones { display: flex; gap: 8px; margin-top: 12px; }
.mkft-phones a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 68px; padding: 10px 6px; background: linear-gradient(180deg, #ec1c24 0%, #c5171e 100%); border-radius: 10px; box-shadow: 0 5px 13px rgba(197,23,30,.2); color: #fff; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; direction: ltr; transition: transform .2s ease, box-shadow .2s ease; }
.mkft-phones a:hover { transform: translateY(-2px); box-shadow: 0 7px 17px rgba(197,23,30,.32); }
.mkft-phone-branch { color: #fff; font-size: 11px; font-weight: 650; opacity: .91; }
.mkft-phone-number { color: #fff; font: 700 15px Arial, sans-serif; direction: ltr; unicode-bidi: isolate; }
.mkft-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 35px 0 0; padding: 19px 23px; background: #2c2e31; border: 1px solid #3b3d41; border-radius: 16px; }
.mkft-cta strong { font-size: 15px; font-weight: 700; }
.mkft-cta p { margin: 6px 0 0; color: #aeb3bc; font-size: 11px; line-height: 2; }
.mkft-cta a { padding: 13px 20px; background: var(--red); border-radius: 11px; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mkft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #36383b; }
/* user: the copyright sentence, and under it "طراحی و توسعه: طراحی وب مبنا" at its right end and "MOBIN KHODRO" at its
   left end - a two-column grid as wide as the sentence (it spans both columns on the first row) */
.mkft-bottom p { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 18px; margin: 11px 0; color: #9297a0; font-size: 11px; }
.mkft-copy { grid-column: 1 / -1; text-align: center; }
.mkft-credit { grid-row: 2; grid-column: 1; justify-self: start; }
.mkft-bottom .mkft-owner { grid-row: 2; grid-column: 2; justify-self: end; }
/* user: "MOBIN KHODRO" with a thin red line under it, 5% wider than the text on each side */
.mkft-owner { position: relative; display: inline-block; direction: ltr; unicode-bidi: isolate; }
.mkft-owner::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -3px; height: 2px; border-radius: 2px; background: var(--red); }
.mkft-social { display: flex; gap: 9px; }
.mkft-social a { display: grid; place-items: center; width: 36px; height: 36px; background: #303236; border-radius: 10px; color: #e6e7ea; }
.mkft-social svg { width: 18px; height: 18px; }
.mkft-acc { display: none; }
.mkft a:focus-visible, .mkft button:focus-visible { outline: 2px solid #ff8c91; outline-offset: 3px; }
@media (max-width: 1000px) {
  .mkft { padding: 0 22px 20px; }
  .mkft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .mkft-phone-number { font-size: 13px; }
  .mkft-phone-branch { font-size: 10px; }
}
@media (max-width: 620px) {
  .mkft { padding: 0 17px 100px; }
  /* user: on phones half the space between the tagline and the intro (visually ~52px -> ~26px), intro centered */
  .mkft-brand { margin-bottom: 6px; }
  .mkft-brand-logo { width: min(75px, 36vw); }
  .mkft-brand-tagline { font-size: 13px; margin-top: 10px; }
  .mkft-top { grid-template-columns: 1fr; gap: 22px; }
  .mkft-intro { margin: 6px 0 13px; text-align: center; }
  .mkft-features { justify-content: center; }
  .mkft-col { border-top: 1px solid #37393d; padding-top: 4px; }
  .mkft-title { margin: 12px 0; }
  /* user: on phones the list titles and links are right-aligned (they were centered at first); the +/− stays at the
     left edge */
  .mkft-acc { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 0; padding: 10px 0; border: 0; background: transparent; color: #fff; font-size: 13px; font-weight: 800; text-align: right; }
  .mkft-acc span { display: flex; align-items: center; gap: 9px; }
  .mkft-acc span::before { content: ''; width: 13px; height: 3px; background: var(--red); border-radius: 4px; }
  .mkft-acc::after { content: '+'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 20px Arial; color: #aab0b8; }
  .mkft-col.open .mkft-acc::after { content: '−'; }
  .mkft-col .mkft-title { display: none; }
  .mkft-col .mkft-links { display: none; justify-items: start; padding: 4px 0 16px; gap: 13px; text-align: right; }
  .mkft-col.open .mkft-links { display: grid; }
  .mkft-branch { padding: 12px; }
  .mkft-cta { display: block; margin: 23px 0 0; padding: 18px; text-align: center; }
  .mkft-cta a { display: block; margin-top: 16px; text-align: center; }
  .mkft-bottom { flex-direction: column-reverse; gap: 8px; text-align: center; }
  .mkft-bottom p { line-height: 2; }
}
/* the phone bottom nav shows up to 1240px: keep the footer's last row clear of it */
@media (max-width: 1240px) {
  .mkft { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
/* ==========================================
   DESKTOP HEADER AND SLIDER PLACEMENT (>=1241px) - the user's template exactly (same values; classes prefixed
   mkd-). JS builds the header from the theme header's own menu (#nav) in front of it and hides the theme header
   (html.mkd-on); the site's search box is moved in. Phones and tablets keep their own header. (The benefits rail
   from the same template follows below, for all sizes.)
   ========================================== */
.mkd-topbar { display: none; }
@media (min-width: 1241px) {
  html.mkd-on .mkd-theme-header { display: none !important; }
  /* the header stays on screen (user): in-page links (#...) land below it */
  html.mkd-on { scroll-padding-top: 96px; }
  .mkd-topbar { --red: #ec1c24; --red2: #c5171e; --ink: #1f2530; --muted: #77808d; --line: #eef0f3; position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 20px; min-height: 76px; margin: auto; padding: 0 max(32px, calc((100vw - 1280px) / 2)) 9px; border: 0; border-bottom: 1px solid #e9eaed; border-radius: 0; background: #fff; box-shadow: 0 7px 15px rgba(23,35,49,.12), 0 17px 35px rgba(23,35,49,.085); color: var(--ink); font-family: IRANSans, Tahoma, sans-serif; direction: rtl; text-align: right; line-height: normal; }
  .mkd-topbar, .mkd-topbar * { box-sizing: border-box; }
  :where(.mkd-topbar) a { text-decoration: none; color: inherit; }
  :where(.mkd-topbar) :where(button, input) { font: inherit; }
  .mkd-logo-link { align-self: flex-start; display: block; flex-shrink: 0; line-height: 0; }
  .mkd-logo { display: block; flex-shrink: 0; width: 72px; height: 72px; object-fit: contain; }
  .mkd-nav { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 4px; }
  .mkd-item { position: relative; }
  .mkd-link { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 11px; border: 0; border-radius: 8px; background: none; -webkit-appearance: none; appearance: none; color: #343a45; font-family: inherit !important; font-size: 13px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer; transition: .2s; }
  .mkd-link:hover, .mkd-item.open > .mkd-link { background: #fff1f1; color: var(--red); }
  .mkd-has-dropdown.open > .mkd-link { background: #fff0f0; color: #ec1c24; }
  .mkd-chevron { width: 13px; height: 13px; transition: transform .2s; }
  .mkd-item.open .mkd-chevron { transform: rotate(180deg); }
  .mkd-tools { display: flex; align-items: center; gap: 12px; }
  .mkd-search { position: relative; display: flex; align-items: center; gap: 8px; width: 175px; height: 39px; padding: 0 14px; background: #f7f8fa; border: 1px solid #e9ebef; border-radius: 9px; }
  .mkd-search > svg { flex: 0 0 13px; width: 13px; height: 13px; color: #7f8792; cursor: pointer; }
  /* contact button: the user's design, scaled to the search field's height (39px instead of 54px, x0.72): an outer
     ring that widens on hover; links to the Contact page */
  .mkd-call { position: relative; isolation: isolate; display: grid; place-items: center; flex-shrink: 0; width: 39px; height: 39px; border-radius: 12px; background: linear-gradient(145deg, #f22b37, #cc071a); color: #fff !important; text-decoration: none; box-shadow: 0 6px 16px rgba(204,7,26,.24), inset 0 1px 1px rgba(255,255,255,.25); transition: transform .22s ease, box-shadow .22s ease; }
  .mkd-call::after { content: ""; position: absolute; inset: -4px; z-index: -1; border: 1px solid rgba(218,16,36,.18); border-radius: 16px; transition: inset .22s ease, opacity .22s ease; }
  .mkd-call:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(204,7,26,.32); }
  .mkd-call:hover::after { inset: -6px; opacity: .65; }
  .mkd-call:active { transform: scale(.96); }
  .mkd-call:focus-visible { outline: 3px solid #ff9ca5; outline-offset: 4px; }
  .mkd-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* the site's own search box (ASP.NET postback + autocomplete) dressed as the template's search field */
  .mkd-search .SearchBoxBox, .mkd-search .SearchBox, .mkd-search .TextBoxBox { display: block !important; position: static !important; float: none !important; flex: 1; min-width: 0; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  .mkd-search .TextBoxAutoCapmlet { display: block; float: none !important; width: 100% !important; min-width: 0; height: 37px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--ink) !important; font-size: 12px !important; }
  .mkd-search .TextBoxAutoCapmlet::placeholder { color: #757575 !important; opacity: 1 !important; }
  .mkd-search .TextAutoButton { display: none !important; }
  .mkd-search .Result { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 300px; }
  .mkd-search .AutoCamplet { position: static !important; float: none !important; width: auto !important; margin: 0 !important; padding: 7px !important; overflow: hidden; background: #fff !important; border: 1px solid #eceef1 !important; border-radius: 13px !important; box-shadow: 0 18px 45px #18212b24 !important; }
  .mkd-search .AutoCamplet .Item { display: flex; align-items: center; gap: 10px; float: none; width: auto; padding: 8px; border-radius: 8px; }
  .mkd-search .AutoCamplet .Item:hover { background: #fff0f0; }
  .mkd-search .AutoCamplet .Item img { float: none; width: 40px; height: 40px; margin: 0; border: 1px solid #eee; border-radius: 8px; object-fit: cover; }
  .mkd-search .AutoCamplet .Item .Title { float: none; width: auto; margin: 0; color: #434b56; font-size: 12px; font-weight: 600; }
  .mkd-search .AutoCamplet .Seprator { display: none; }

  /* products mega panel: centered on the page under the header, sized for the largest category */
  .mkd-mega { position: fixed; top: var(--mega-top, 145px); left: 50%; right: auto; display: grid; grid-template-columns: 230px 1fr; gap: 17px; align-content: start; width: min(1060px, calc(100vw - 40px)); max-height: calc(100dvh - 105px); overflow-y: auto; padding: 18px; border: 1px solid #eff0f3; border-radius: 20px; background: #fff; box-shadow: 0 26px 70px rgba(30,40,55,.19); text-align: right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .mkd-has-mega.open .mkd-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .mkd-has-mega .mkd-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 26px; background: transparent; pointer-events: auto; }
  .mkd-has-mega:not(.open) .mkd-mega { transition: none; }
  .mkd-mega-side { padding: 12px; background: #f8f9fb; border-radius: 14px; }
  .mkd-side-heading { padding: 8px 12px 13px; color: #8a929c; font-size: 11px; }
  .mkd-category { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 5px; padding: 13px 12px; border: 0; border-radius: 11px; background: transparent; color: #4c5562; font-size: 13px; font-weight: 700; text-align: right; cursor: pointer; }
  .mkd-category:hover, .mkd-category.active { background: #fff; color: var(--red); box-shadow: 0 3px 12px #2222220a; }
  .mkd-category.active::before { content: ""; width: 3px; height: 22px; margin-left: 10px; background: var(--red); border-radius: 4px; }
  .mkd-category span { flex: 1; }
  .mkd-category svg { width: 15px; height: 15px; }
  .mkd-mega-main { min-width: 0; padding: 8px 5px 3px; }
  .mkd-mega-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 7px 17px; border-bottom: 1px solid var(--line); }
  .mkd-mega-head strong { font-size: 15px; }
  .mkd-links { display: grid; grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)); gap: 6px 14px; align-content: start; padding-top: 15px; }
  .mkd-links a { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 12px 9px; border-radius: 9px; color: #515b68; font-size: 12px; transition: .2s; }
  .mkd-links a::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; background: #d9dde3; border-radius: 50%; }
  .mkd-links a:hover { background: #fff3f3; color: var(--red); }
  .mkd-links a:hover::before { background: var(--red); }
  .mkd-mega-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 0; border-top: 1px solid var(--line); color: #858d98; font-size: 11px; }
  .mkd-mega-bottom a { color: var(--red); font-weight: 700; }

  /* اخبار / مقالات dropdowns */
  .mkd-dropdown { position: absolute; top: calc(100% + 13px); right: 0; z-index: 25; min-width: 235px; padding: 7px; background: #fff; border: 1px solid #eceef1; border-radius: 13px; box-shadow: 0 18px 45px #18212b24; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px); transition: opacity .18s, transform .18s, visibility .18s; }
  .mkd-has-dropdown.open .mkd-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .mkd-dropdown::before { content: ""; position: absolute; top: -25px; right: 0; left: 0; height: 26px; }
  .mkd-has-dropdown:not(.open) .mkd-dropdown { transition: none; }
  .mkd-dropdown a { display: block; padding: 11px 13px; border-radius: 8px; color: #434b56; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .18s, color .18s; }
  .mkd-dropdown a:hover { background: #fff0f0; color: #ec1c24; }

  /* hero slider right under the header: the header's soft shadow onto it, and its own soft shadow onto the page */
  .slide-wrapper { isolation: isolate; }
  .slide-wrapper::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 4; height: 46px; background: linear-gradient(to bottom, rgba(19,31,45,.16), rgba(19,31,45,.055) 42%, transparent); pointer-events: none; }
  .slide-wrapper::after { bottom: -28px; height: 85px; background: linear-gradient(to bottom, rgba(9,17,29,0) 0%, rgba(9,17,29,.18) 48%, rgba(9,17,29,.28) 65%, rgba(9,17,29,.08) 80%, transparent 100%); filter: blur(13px); }

}
/* ==========================================
   BENEFITS RAIL (homepage, all sizes) - the user's template: dark rail overlapping the bottom of the slider on the
   template's light hero colour (down to 78px under it); tablets narrower; phones edge to edge right under the slider
   ========================================== */
/* white behind the rail (user; the template's light grey-blue #e9eef2 was not wanted) */
.mkd-rail-band { display: flow-root; background: #fff; }
.mkd-benefits { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: calc(100% - 90px); max-width: 1250px; margin: -85px auto 78px; background: #161c27; border-top: 3px solid #ed1b2f; box-shadow: 0 26px 55px rgba(8,18,32,.29), 0 4px 12px rgba(8,18,32,.13); direction: rtl; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; isolation: isolate; }
.mkd-benefits, .mkd-benefits * { box-sizing: border-box; }
.mkd-benefits::before, .mkd-benefits::after { content: ""; position: absolute; top: 18px; z-index: -1; width: 78px; height: calc(100% - 36px); background: radial-gradient(ellipse at center, rgba(237,27,47,.34) 0%, rgba(237,27,47,.13) 38%, transparent 76%); filter: blur(18px); pointer-events: none; }
.mkd-benefits::before { right: calc(100% - 15px); }
.mkd-benefits::after { left: calc(100% - 15px); }
/* the glowing side wings reach past the page edge on narrower desktops: no sideways scrolling */
html.mkd-on body { overflow-x: clip; }
/* not text to edit or select: the normal arrow cursor instead of the text (I-beam) cursor (user) */
.mkd-benefit { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; min-width: 0; min-height: 158px; padding: 24px 21px 22px; overflow: hidden; background: transparent; border-left: 1px solid rgba(255,255,255,.13); text-align: right; cursor: default; -webkit-user-select: none; user-select: none; transition: background .3s ease; }
.mkd-benefit:last-child { border-left: 0; }
.mkd-benefit::before { content: attr(data-no); position: absolute; left: 13px; top: 3px; color: rgba(255,255,255,.055); font-family: Arial, sans-serif; font-size: 66px; font-weight: 900; line-height: 1; letter-spacing: -5px; pointer-events: none; transition: color .3s; }
.mkd-benefit::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 4px; background: #ff243c; transition: width .35s ease; }
.mkd-benefit:hover { background: linear-gradient(140deg, #30313a, #a81426); }
.mkd-benefit:hover::before { color: rgba(255,255,255,.11); }
.mkd-benefit:hover::after { width: 100%; }
.mkd-benefit-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background .3s, border-color .3s, transform .3s; }
.mkd-benefit-icon::after { content: ''; position: absolute; right: -1px; top: -1px; width: 12px; height: 2px; background: #ff3146; }
.mkd-benefit:hover .mkd-benefit-icon { transform: translateY(-3px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); }
.mkd-benefit-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mkd-benefit-title { position: relative; z-index: 1; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.9; white-space: normal; }
.mkd-benefit-sub { position: relative; z-index: 1; color: #b1b8c5; font-size: 10px; line-height: 1.7; transition: color .3s; }
.mkd-benefit:hover .mkd-benefit-sub { color: #fff; }
/* the template's responsive rules (its cascade folded into the values that end up applying) */
@media (max-width: 1050px) {
  .mkd-benefits { width: calc(100% - 32px); }
  .mkd-benefit { min-height: 148px; padding: 18px 13px; }
  .mkd-benefit-title { font-size: 11px; }
  .mkd-benefit-sub { font-size: 9px; }
}
/* phones: five in a row right under the slider, edge to edge, icons and titles only */
@media (max-width: 760px) {
  .slide-wrapper::after { display: none; }
  /* user: a curved "lifted in the middle" shadow under the rail. A dark ellipse sits half behind the rail (the band
     draws it, the rail covers its top half): its lower half shows as an arc, deepest under the middle and thinning
     to nothing at the sides; only a light blur, so the curve stays visible. The rail keeps a hairline shadow. */
  .mkd-benefits { width: 100%; max-width: none; margin: 0; box-shadow: 0 2px 6px rgba(8,18,32,.14); }
  .mkd-benefits::before, .mkd-benefits::after, .mkd-benefit::before, .mkd-benefit-sub { display: none; }
  /* the arc's size, blur and darkness (lowered and lightened from 30px / 5px / .45; the user wants it kept as it is) */
  :root { --mk-arc-h: 22px; --mk-arc-blur: 4px; --mk-arc: rgba(8,18,32,.32); }
  .mkd-rail-band { position: relative; }
  .mkd-rail-band::after { content: ""; position: absolute; top: calc(100% - var(--mk-arc-h) / 2); left: 3%; right: 3%; z-index: 1; height: var(--mk-arc-h); border-radius: 50%; background: var(--mk-arc); filter: blur(var(--mk-arc-blur)); pointer-events: none; }
  /* user: icons on one line and in the middle of the card - every title keeps room for two lines, so each
     icon + title block has the same height and is centered */
  .mkd-benefit { align-items: center; justify-content: center; gap: 9px; min-height: 105px; padding: 13px 2px; text-align: center; }
  .mkd-benefit-icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .mkd-benefit-icon svg { width: 21px; height: 21px; }
  .mkd-benefit-title { min-height: 3.3em; font-size: clamp(7px, 1.9vw, 10px); line-height: 1.65; overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .mkd-benefit-icon svg { stroke-width: 1.9; }
  .mkd-benefit-icon::after { width: 7px; }
}
@media (max-width: 380px) {
  .mkd-benefit { gap: 7px; min-height: 99px; padding: 11px 1px; }
  .mkd-benefit-icon { flex-basis: 29px; width: 29px; height: 29px; }
  .mkd-benefit-title { font-size: 7px; }
}
/* user's template, phones only: seven tiles (two added) in an endless swipe carousel, five in view (JS). Desktop is
   unchanged: the track is display: contents, the two extra tiles and the loop copies are hidden, and tile 05 keeps
   the last tile's missing left border. The rail's shadow is untouched. */
@media (min-width: 761px) {
  .mkd-benefits-track { display: contents; }
  .mkd-benefits .mkd-extra, .mkd-benefits .mkd-clone { display: none; }
  .mkd-benefits .mkd-benefit[data-no="05"] { border-left: 0; }
}
@media (max-width: 760px) {
  .mkd-benefits { display: block; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
  .mkd-benefits:active { cursor: grabbing; }
  .mkd-benefits-track { position: relative; display: flex; flex-wrap: nowrap; width: max-content; direction: rtl; transform: translate3d(0, 0, 0); will-change: transform; }
  .mkd-benefits-track > .mkd-benefit { flex: 0 0 var(--mkd-item-width, 20vw); width: var(--mkd-item-width, 20vw); border-left: 1px solid rgba(255,255,255,.13); cursor: inherit; }
  /* a tapped tile lights up like the desktop hover for 2 s (with all its loop copies) */
  .mkd-benefit.is-selected { background: linear-gradient(140deg, #30313a, #a81426); }
  .mkd-benefit.is-selected::after { width: 100%; }
  .mkd-benefit.is-selected .mkd-benefit-icon { transform: translateY(-3px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); }
}
@media (max-width: 760px) and (hover: none) {
  .mkd-benefit:not(.is-selected):hover { background: transparent; }
  .mkd-benefit:not(.is-selected):hover::after { width: 0; }
  .mkd-benefit:not(.is-selected):hover .mkd-benefit-icon { transform: none; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.2); }
}
/* ==========================================
   BRAND SECTION (homepage) - the user's brand-cards template. Its many layered versions (v26..v56) are folded into
   the values that end up applying. JS builds the markup from the CMS brand tab widget (below); this neutralises the
   block's own wrapper (max-width 1200 + padding) so the section spans the page like in the template.
   ========================================== */
[class*="customDiv"]:has(> #mk-brand-section) { max-width: none !important; margin: 0 !important; padding: 0 !important; }
/* the CMS widget the section is built from: hidden once replaced, and while the page loads (no flash of it) */
.mk-brand-old { display: none !important; }
html.mk-loading .custom-tab-wrapper[data-tab-id] { visibility: hidden; }
/* /catproduct/all (user): the same section first, above the groups and product cards - none of the homepage offsets */
#mk-brand-section.mk-brand-cat { margin: 0 0 26px; padding: 4px 0 0; background: none; }
@media (max-width: 760px) { #mk-brand-section.mk-brand-cat { margin: 0 0 18px; padding: 0; background: none; } }
/* desktop/tablet: starts right at the benefits rail's bottom edge, over the rail band's 78px bottom space, so the
   heading is 60px under the rail instead of 138px (user: closer to the benefits; the rail itself is untouched - its
   shadow, z-index 5, still shows on top) */
#mk-brand-section { position: relative; margin-top: -78px; padding: 42px 24px 80px; background: #fff; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; direction: rtl; }
#mk-brand-section, #mk-brand-section * { box-sizing: border-box; }
#mk-brand-section .mk-brand-container { max-width: 1200px; margin: auto; padding: 18px 14px 28px; background: transparent; }
#mk-brand-section .mk-brand-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; margin: 0 0 30px; padding: 0 0 24px; border: 0; border-bottom: 1px solid #edf0f2; text-align: center; }
#mk-brand-section .mk-brand-heading-text { display: flex; flex-direction: column; align-items: center; flex: none; width: 100%; min-width: 0; text-align: center; }
#mk-brand-section .mk-brand-eyebrow { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 13px; width: max-content; margin: 0 auto 7px; color: #e31b2d; font-size: 11px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
#mk-brand-section .mk-brand-eyebrow::before, #mk-brand-section .mk-brand-eyebrow::after { content: ""; display: block; flex: 0 0 27px; width: 27px; height: 2px; border-radius: 3px; background: #e51c2b; }
#mk-brand-section .mk-brand-heading h2 { margin: 0; color: #171d28; font-size: 23px; font-weight: 800; line-height: 1.6; letter-spacing: -.5px; text-align: center; }
#mk-brand-section .mk-brand-heading p { margin: 4px 0 0; color: #7c8798; font-size: 12px; line-height: 1.9; text-align: center; }
/* the switch: a white pill with a red light trail slides under the active tab */
#mk-brand-section .mk-brand-tabs { position: relative; isolation: isolate; display: flex; flex: 0 0 auto; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 5px; overflow: visible; background: #fff; border: 0; border-radius: 12px; box-shadow: 0 9px 30px rgba(27,37,54,.09), 0 1px 4px rgba(27,37,54,.035); }
#mk-brand-section .mk-brand-tabs::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; right: 4px; width: calc((100% - 12px) / 2); background: linear-gradient(145deg, #fff 5%, #fff 63%, #fff4f5 100%); border: 1px solid rgba(230,28,45,.12); border-radius: 9px; box-shadow: 0 6px 20px rgba(33,37,52,.11), 0 0 0 1px rgba(255,255,255,.9) inset; transform: translateX(0); transition: transform .68s cubic-bezier(.22,1.45,.32,1), box-shadow .35s ease; pointer-events: none; }
#mk-brand-section .mk-brand-tabs.mk-foreign-selected::before { transform: translateX(calc(-100% - 4px)); }
#mk-brand-section .mk-brand-tabs.mk-switching::before { box-shadow: 0 9px 24px rgba(33,37,52,.14), 0 0 18px rgba(226,26,45,.11); }
#mk-brand-section .mk-brand-tabs::after { content: ""; position: absolute; z-index: 2; right: 4px; bottom: 4px; width: calc((100% - 12px) / 2); height: 2px; background: linear-gradient(90deg, transparent, #ed1b31 28%, #ff5668 50%, #ed1b31 72%, transparent); border-radius: 4px; box-shadow: 0 0 12px rgba(237,27,49,.36); opacity: .82; transform: translateX(0) scaleX(.76); transition: transform .68s cubic-bezier(.22,1.45,.32,1), opacity .3s ease; pointer-events: none; }
#mk-brand-section .mk-brand-tabs.mk-foreign-selected::after { transform: translateX(calc(-100% - 4px)) scaleX(.76); }
#mk-brand-section .mk-brand-tab { position: relative; z-index: 1; overflow: hidden; min-width: 280px; margin: 0; padding: 13px 25px; -webkit-appearance: none; appearance: none; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #4c5566; font: 700 13px IRANSans, IRANSansWeb, Tahoma, sans-serif; text-align: center; cursor: pointer; transition: color .36s ease, letter-spacing .4s ease, transform .25s ease; }
#mk-brand-section .mk-brand-tab.is-active { color: #d7192c; letter-spacing: .08px; }
#mk-brand-section .mk-brand-tab:not(.is-active):hover { color: #d7192c; }
#mk-brand-section .mk-brand-tab:active { transform: scale(.985); }
#mk-brand-section .mk-brand-tab:focus-visible { outline: 2px solid #e41c2b; outline-offset: 3px; }
#mk-brand-section .mk-brand-panel { padding: 25px 22px; background: #fff; border-radius: 12px; box-shadow: 0 10px 38px rgba(25,34,50,.10), 0 2px 8px rgba(25,34,50,.035); }
#mk-brand-section .mk-brand-panel:not(.is-active), #mk-brand-section .mk-brand-panel[hidden] { display: none !important; }
#mk-brand-section .mk-brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; }
/* cards: the brand image and its title; on hover the card lifts with a soft red/charcoal shadow, the image warms
   up under a red-charcoal veil and a diagonal sheen, and the title turns red with a growing underline */
#mk-brand-section .mk-brand-card { position: relative; z-index: 0; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: #222a35; text-decoration: none; cursor: pointer; transition: transform .36s cubic-bezier(.2,.75,.2,1), filter .36s ease; }
#mk-brand-section .mk-brand-card:hover { transform: translateY(-5px); box-shadow: 0 17px 28px -19px rgba(25,29,38,.34), 0 12px 28px -23px rgba(211,19,40,.28); }
#mk-brand-section .mk-brand-media { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; flex: none; width: 100%; max-width: 225px; aspect-ratio: 1 / 1; margin: 0 auto; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; outline: 1px solid transparent; perspective: 700px; transition: outline-color .4s ease; }
#mk-brand-section .mk-brand-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transform: scale(1); filter: none; transition: transform .65s cubic-bezier(.18,.78,.2,1), filter .55s ease; }
#mk-brand-section .mk-brand-card:hover .mk-brand-media img { transform: scale(1.045); filter: brightness(.97) saturate(1.15) contrast(1.035); }
#mk-brand-section .mk-brand-media::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(135deg, rgba(232,18,40,.025) 0%, rgba(205,14,35,.07) 42%, rgba(31,24,30,.14) 82%, rgba(19,19,24,.18) 100%); box-shadow: inset 0 0 0 1px rgba(220,22,42,.15), inset -12px -14px 24px rgba(22,15,20,.09); opacity: 0; transition: opacity .28s ease; pointer-events: none; }
#mk-brand-section .mk-brand-media::after { content: ""; position: absolute; inset: -65% -130%; z-index: 2; background: linear-gradient(105deg, transparent 27%, rgba(28,17,23,.035) 39%, rgba(27,18,23,.17) 48%, rgba(193,19,39,.11) 56%, transparent 70%); mix-blend-mode: multiply; opacity: 0; transform: translateX(55%) rotate(-22deg); pointer-events: none; }
#mk-brand-section .mk-brand-card:hover .mk-brand-media::before, #mk-brand-section .mk-brand-card:hover .mk-brand-media::after { opacity: 1; }
#mk-brand-section .mk-brand-meta { position: relative; display: flex; flex: 1; justify-content: center; align-items: center; gap: 0; min-width: 0; min-height: 60px; padding: 12px 8px 16px; overflow: hidden; border: 0; background: transparent; text-align: center; }
#mk-brand-section .mk-brand-meta::before, #mk-brand-section .mk-brand-meta::after { content: ""; position: absolute; top: 50%; width: 13px; height: 1px; background: #e72436; opacity: 0; transition: opacity .3s ease, transform .35s ease; }
#mk-brand-section .mk-brand-meta::before { right: 4px; transform: translateX(9px); }
#mk-brand-section .mk-brand-meta::after { left: 4px; transform: translateX(-9px); }
#mk-brand-section .mk-brand-card:hover .mk-brand-meta::before, #mk-brand-section .mk-brand-card:hover .mk-brand-meta::after { opacity: .7; transform: translateX(0); }
#mk-brand-section .mk-brand-meta strong { position: relative; display: inline-block; color: #172032; font-size: 13px; font-weight: 800; line-height: 1.8; letter-spacing: 0; transition: color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
#mk-brand-section .mk-brand-meta strong::after { content: ""; position: absolute; bottom: -5px; right: 50%; left: 50%; height: 2px; background: linear-gradient(90deg, #a90917, #fa3445, #a90917); border-radius: 8px; box-shadow: 0 0 9px rgba(232,24,44,.35); transition: left .4s cubic-bezier(.2,.8,.2,1), right .4s cubic-bezier(.2,.8,.2,1); }
#mk-brand-section .mk-brand-card:hover .mk-brand-meta strong { color: #d7192c; transform: translateY(-3px); }
#mk-brand-section .mk-brand-card:hover .mk-brand-meta strong::after { right: 8%; left: 8%; }
/* switching tabs: all cards of the newly shown panel rise 10% and fade in together */
#mk-brand-section .mk-brand-panel.mk-v56-enter .mk-brand-card { animation: mkBrandEnter .48s cubic-bezier(.16,1,.3,1) both; will-change: opacity, transform, filter; }
@keyframes mkBrandEnter { 0% { opacity: 0; transform: translate3d(0,10%,0); filter: blur(3px); } 55% { opacity: .92; filter: blur(.5px); } 100% { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@media (hover: none) { #mk-brand-section .mk-brand-media::before, #mk-brand-section .mk-brand-media::after { display: none; } }
@media (max-width: 760px) {
  /* user: right under the benefits rail, no shadow of its own (a band with top/bottom shadows was tried and dropped);
     the grey "فروش اقساطی خودرو" block below also closer (user): 28px under the logo panel instead of 66px.
     User: that block's grey rises behind the logo panel up to the middle of its last row of logos, as if the panel had
     dropped onto that card. From the section's bottom: 10 (section) + 18 (container) + 16 (panel) padding + 52 (title)
     + half a logo (logo = min(225px, column = (90vw - 32px) / 2)). */
  #mk-brand-section { margin-top: 0; padding: 22px 0 10px; background: linear-gradient(to top, #f1f1f1 calc(96px + min(112.5px, (90vw - 32px) / 4)), #fff 0); }
  /* user: that block's text moves up too - its 20px top padding and #mobinSeoBenefits' inline 35px top margin go, so
     the H1 starts 28px under the logo panel instead of 83px */
  [class*="customDiv"]:has(> #mobinSeoBenefits) { padding-top: 0 !important; }
  #mobinSeoBenefits { margin-top: 0 !important; }
  #mk-brand-section .mk-brand-container { padding: 12px 0 18px; }
  /* user: no divider line between the tabs and the logos on phones */
  #mk-brand-section .mk-brand-heading { gap: 15px; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
  #mk-brand-section .mk-brand-eyebrow { color: #e51c2b; font-weight: 800; }
  #mk-brand-section .mk-brand-heading h2 { color: #19202b; font-size: 19px; font-weight: 900; }
  #mk-brand-section .mk-brand-heading p { margin-top: 3px; color: #737d8a; font-size: 11px; line-height: 1.8; }
  /* user: 5% of the screen free on each side of the tab bar */
  #mk-brand-section .mk-brand-tabs { width: min(90%, 560px); }
  #mk-brand-section .mk-brand-tab { flex: 1 1 50%; min-width: 0; padding: 11px 16px; }
  /* user: the logo panel also keeps 5% of the screen free on each side */
  #mk-brand-section .mk-brand-panel { width: 90%; margin: 0 auto; padding: 16px 10px; }
  #mk-brand-section .mk-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  #mk-brand-section .mk-brand-meta { min-height: 52px; padding: 9px 2px 13px; }
  #mk-brand-section .mk-brand-meta::before, #mk-brand-section .mk-brand-meta::after { display: none; }
  #mk-brand-section .mk-brand-meta strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #mk-brand-section .mk-brand-card, #mk-brand-section .mk-brand-tabs::before, #mk-brand-section .mk-brand-tabs::after, #mk-brand-section .mk-brand-tab, #mk-brand-section .mk-brand-media img, #mk-brand-section .mk-brand-meta strong, #mk-brand-section .mk-brand-meta strong::after, #mk-brand-section .mk-brand-meta::before, #mk-brand-section .mk-brand-meta::after { transition: none; }
  #mk-brand-section .mk-brand-panel.mk-v56-enter .mk-brand-card { animation: none; }
}
/* user: no back-to-top button - the theme's empty div.backtotop, which its jQuery fades in (inline display) on scroll */
.backtotop { display: none !important; }
/* user: product pages don't show the "محصولات مرتبط" box (JS marks it) */
.mk-related-off { display: none !important; }
/* menus closed on Back (JS): no slide animation for that moment */
html.mk-instant #categorySidebar, html.mk-instant #sidebarOverlay, html.mk-instant .mkb-sheet, html.mk-instant .mkb-sheet *, html.mk-instant .mkb-veil { transition: none !important; animation: none !important; }
/* ==========================================
   TESTIMONIALS (the red panel; its base styles are in the CSS field) - user: square corners, and on phones the
   panel runs edge to edge and starts right under the grey block above (no 28px white strip). The customer names
   are h3 (JS; the widget writes h4), styled as the h4 were.
   ========================================== */
[class*="customDiv"]:has(> .mk-tslider) { border-radius: 0 !important; }
.mk-tslider .testimonial-info h3 { margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; color: #151515 !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.6 !important; }
@media (max-width: 760px) {
  [class*="customDiv"]:has(> .mk-tslider) { width: 100% !important; max-width: none !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* ==========================================
   HOMEPAGE ARTICLES & NEWS - the user's template, desktop and phones. JS rebuilds each CMS box (.Box with
   .ArticleIndexBody: BoxTop h2, a.Item cards, a.ArchiveBtnMinimal) into section.mkn-sec, moving the box's own h2,
   links and pictures (nothing duplicated); the emptied box gets .mkn-old. The template's later layers (v3, v4, v6)
   are folded into the values that end up applying.
   ========================================== */
.mkn-old { display: none !important; }
.mkn-sec { max-width: 1200px; margin: 0 auto; padding: 32px 22px; color: #222631; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; direction: rtl; box-sizing: border-box; }
.mkn-sec *, .mkn-sec *::before, .mkn-sec *::after { box-sizing: border-box; }
.mkn-sec .mkn-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 0 0 15px; border-bottom: 1px solid #e9e9ec; }
.mkn-sec .mkn-h2 { margin: 0; padding: 0; color: #222631; font-size: 22px; font-weight: 800; line-height: 1.6; }
.mkn-sec .mkn-h2::before { content: ""; display: inline-block; width: 4px; height: 21px; margin-left: 11px; border-radius: 4px; background: #d41f36; vertical-align: -5px; }
.mkn-sec .mkn-all { display: inline-flex; align-items: center; gap: 7px; color: #a72030; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .2s; }
.mkn-sec .mkn-all:hover { color: #6d0b17; }
.mkn-sec .mkn-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.mkn-sec .mkn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
/* card: a red line grows along the top on hover, the card lifts, the picture zooms a little */
.mkn-sec .mkn-card { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e9eaee; border-radius: 15px; box-shadow: 0 3px 13px rgba(24,31,43,.045); color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mkn-sec .mkn-card:hover { transform: translateY(-4px); border-color: #e8d7da; box-shadow: 0 14px 30px rgba(29,33,43,.105); }
.mkn-sec .mkn-card::before { content: ""; position: absolute; z-index: 2; top: 0; right: 18px; left: 18px; height: 2px; border-radius: 0 0 5px 5px; background: #df1d35; transform: scaleX(0); transform-origin: center; transition: transform .28s ease; }
.mkn-sec .mkn-card:hover::before { transform: scaleX(1); }
.mkn-sec .mkn-card:focus-visible, .mkn-sec .mkn-all:focus-visible { outline: 2px solid #df1d35; outline-offset: 3px; }
.mkn-sec .mkn-img { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 1.78; overflow: hidden; background: #fff; }
.mkn-sec .mkn-img img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; filter: saturate(1.015); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mkn-sec .mkn-card:hover .mkn-img img { transform: scale(1.045); }
.mkn-sec .mkn-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 17px 17px 20px; }
/* title: always two lines tall, centered (a third line is cut with an ellipsis), with a short red line under it */
.mkn-sec .mkn-title { position: relative; display: flex; align-items: center; justify-content: center; height: calc(1.85em * 2); margin: 0 0 18px; padding: 0; color: #1f2531; font-size: 14px; font-weight: 800; line-height: 1.85; letter-spacing: -.15px; text-align: center; }
.mkn-sec .mkn-title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mkn-sec .mkn-title::after { content: ""; position: absolute; bottom: -6px; right: calc(50% - 13px); width: 26px; height: 2px; border-radius: 4px; background: #e12840; opacity: .75; }
/* excerpt: exactly three justified lines */
.mkn-sec .mkn-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; flex: none; height: calc(1.95em * 3); margin: 0; padding: 0; overflow: hidden; color: #858d9c; font-size: 12px; line-height: 1.95; text-align: justify; text-overflow: ellipsis; direction: rtl; }
@media (max-width: 950px) { .mkn-sec .mkn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) {
  .mkn-sec { padding: 22px 14px 23px; }
  .mkn-sec .mkn-h2 { font-size: 19px; }
  .mkn-sec .mkn-grid { gap: 11px; }
  .mkn-sec .mkn-card { border-radius: 12px; }
  .mkn-sec .mkn-body { padding: 12px 11px 15px; }
  .mkn-sec .mkn-title { margin-bottom: 15px; font-size: 12px; }
  .mkn-sec .mkn-title::after { bottom: -5px; right: calc(50% - 10px); width: 20px; }
  .mkn-sec .mkn-text { font-size: 11px; }
}
@media (max-width: 350px) { .mkn-sec .mkn-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mkn-sec .mkn-card, .mkn-sec .mkn-card::before, .mkn-sec .mkn-img img { transition: none; } }