/*
 * Store home product cards and the "quick purchase path" category grid,
 * mobile and tablet only.
 * Loaded after product-card-no-overlap.css and only on the unfiltered shop home.
 * No desktop rule or product-detail/catalog rule is changed.
 */
@media screen and (max-width: 1024px) {
  .shop-page-wrap {
    --card-paper: oklch(99% 0.004 243);
    --card-media: oklch(97% 0.008 243);
    --card-ink: oklch(23% 0.024 243);
    --card-muted: oklch(49% 0.026 243);
    --card-line: oklch(89% 0.014 243);
    --card-accent: oklch(48% 0.14 241);
  }

  /* Product rails and the latest-products section share the same intrinsic grid. */
  .shop-page-wrap .product-rail {
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .shop-page-wrap .product-rail-head {
    margin-bottom: 8px !important;
    padding-inline: 2px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .shop-page-wrap .product-rail-track,
  .shop-page-wrap .shop-newest .products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .shop-page-wrap .product-rail-cell {
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    scroll-snap-align: none !important;
  }

  .shop-page-wrap .product-rail-tools .rail-nav {
    display: none !important;
  }

  /* One thin card edge; no outer padding or picture gutters. */
  .shop-page-wrap .product-card.za-product-card-v3,
  .shop-page-wrap .product-rail-cell .product-card.za-product-card-v3 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--card-line) !important;
    border-radius: 11px !important;
    background: var(--card-paper) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .shop-page-wrap .product-card.za-product-card-v3:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Status stays outside the image. Tools and technical code disappear only here. */
  .shop-page-wrap .za-card-side-tools,
  .shop-page-wrap .za-card-mpn-row {
    display: none !important;
  }

  .shop-page-wrap .za-card-top-bar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 6px 2px !important;
    gap: 0 !important;
    background: var(--card-paper) !important;
    position: static !important;
  }

  .shop-page-wrap .za-card-badge-container {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
    overflow: visible !important;
    position: static !important;
  }

  .shop-page-wrap .za-card-badge {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    backdrop-filter: none !important;
  }

  .shop-page-wrap .za-badge-dot {
    display: none !important;
  }

  .shop-page-wrap .za-card-media-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--card-media) !important;
    overflow: hidden !important;
  }

  .shop-page-wrap .za-card-media-inner,
  .shop-page-wrap .za-card-img-anchor,
  .shop-page-wrap .za-card-picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    inset: auto !important;
  }

  .shop-page-wrap .za-card-img-anchor {
    position: static !important;
  }

  .shop-page-wrap .za-card-picture img,
  .shop-page-wrap .za-card-media-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .shop-page-wrap .product-card.za-product-card-v3:hover .za-card-media-wrap img {
    transform: none !important;
  }

  /* Text grows with its content. No fixed height, one-line rule, or line clamp. */
  .shop-page-wrap .za-card-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 8px 8px !important;
    gap: 0 !important;
    background: var(--card-paper) !important;
  }

  .shop-page-wrap .za-card-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    min-width: 0 !important;
    margin: 0 0 2px !important;
    gap: 1px 6px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .shop-page-wrap .za-card-brand,
  .shop-page-wrap .za-card-cat {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .shop-page-wrap .za-card-brand {
    color: var(--card-accent) !important;
  }

  .shop-page-wrap .za-card-cat {
    color: var(--card-muted) !important;
  }

  .shop-page-wrap .za-card-title,
  .shop-page-wrap .za-card-title a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    color: var(--card-ink) !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: wrap !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .shop-page-wrap .za-card-title {
    margin-bottom: 4px !important;
    font-size: 0.88rem !important;
    line-height: 1.38 !important;
    font-weight: 750 !important;
    text-align: right !important;
  }

  .shop-page-wrap .za-card-price-section {
    display: flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: auto 0 6px !important;
    padding: 4px 0 0 !important;
    border-top: 1px solid var(--card-line) !important;
    overflow: visible !important;
  }

  .shop-page-wrap .za-price-active {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    direction: rtl !important;
    text-align: right !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 1px 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .shop-page-wrap .za-price-val {
    min-width: 0 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--card-accent) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-variant-numeric: tabular-nums !important;
  }

  .shop-page-wrap .za-price-unit {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    color: var(--card-muted) !important;
    white-space: nowrap !important;
  }

  .shop-page-wrap .za-price-active .price-old {
    order: 3 !important;
    flex: 0 0 100% !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    color: var(--card-muted) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .shop-page-wrap .za-price-quote,
  .shop-page-wrap .za-quote-text {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .shop-page-wrap .za-quote-icon {
    display: none !important;
  }

  /* The image and title already open details; one full-width, 44px action is clearer. */
  .shop-page-wrap .za-card-actions-row {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .shop-page-wrap .za-btn-detail {
    display: none !important;
  }

  .shop-page-wrap .za-btn-action {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow: visible !important;
    background: var(--card-accent) !important;
    color: var(--card-paper) !important;
  }

  .shop-page-wrap .za-btn-action span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .shop-page-wrap .za-btn-action .za-btn-icon {
    flex: 0 0 auto !important;
  }

  .shop-page-wrap .za-btn-rfq {
    border: 1px solid oklch(82% 0.065 54) !important;
    background: oklch(96% 0.025 54) !important;
    color: oklch(40% 0.11 54) !important;
  }

  .shop-page-wrap .product-card :is(a, button):focus-visible {
    outline: 2px solid var(--card-accent) !important;
    outline-offset: -3px !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 819px) {
  .shop-page-wrap .product-rail-track,
  .shop-page-wrap .shop-newest .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

@media screen and (max-width: 640px) {
  .shop-page-wrap .product-rail-track,
  .shop-page-wrap .shop-newest .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .shop-page-wrap .product-rail-head {
    margin-bottom: 6px !important;
  }

  .shop-page-wrap .product-card.za-product-card-v3,
  .shop-page-wrap .product-rail-cell .product-card.za-product-card-v3 {
    border-radius: 9px !important;
  }

  .shop-page-wrap .za-card-top-bar {
    padding: 2px 4px 2px !important;
  }

  .shop-page-wrap .za-card-badge {
    font-size: 0.7rem !important;
    padding: 2px 4px !important;
  }

  .shop-page-wrap .za-card-media-wrap {
    aspect-ratio: 1.04 / 1 !important;
  }

  .shop-page-wrap .za-card-body {
    padding: 4px 6px 4px !important;
  }

  .shop-page-wrap .za-card-meta-row {
    margin-bottom: 2px !important;
  }

  .shop-page-wrap .za-card-brand,
  .shop-page-wrap .za-card-cat {
    font-size: 0.72rem !important;
  }

  .shop-page-wrap .za-card-title {
    margin-bottom: 4px !important;
    font-size: 0.81rem !important;
    line-height: 1.34 !important;
  }

  .shop-page-wrap .za-card-price-section {
    margin-bottom: 2px !important;
    padding-top: 4px !important;
  }

  .shop-page-wrap .za-price-val {
    font-size: 0.88rem !important;
  }

  .shop-page-wrap .za-btn-action {
    font-size: 0.75rem !important;
  }
}

/*
 * Quick purchase path category tiles.
 * The section loses its outer chrome, each tile becomes an image-first square,
 * and labels get one readable line instead of a clamp or ellipsis.
 */
/* ═══════════════════════════════════════════════════════════════════════
   حذف باکس‌ها و حاشیه‌ها برای تصویر حداکثری و دکمه CTA (موبایل و تبلت)
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
  #shop-main.shop-home-view .shop-catgrid-wrap {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #shop-main.shop-home-view .shop-catgrid-wrap .shop-section-head {
    margin: 0 0 8px !important;
    padding: 0 2px 4px !important;
    border-bottom: 0 !important;
  }

  /* در تبلت: ۳ ستون فشرده */
  #shop-main.shop-home-view .shop-catgrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* حذف باکس کلی: پس‌زمینه شفاف، بدون بردر، بدون سایه سنگین */
  #shop-main.shop-home-view .shop-cattile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.16s cubic-bezier(0.2, 0, 0, 1) !important;
  }

  #shop-main.shop-home-view .shop-cattile:active {
    transform: scale(0.96) !important;
  }

  /* کانتینر تصویر: پس‌زمینه و کادر کاملاً برداشته شده تا تصویر آزاد باشد */
  #shop-main.shop-home-view .shop-cattile-icon,
  #shop-main.shop-home-view .shop-cattile-icon.has-category-image {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 135px !important;
    min-height: 135px !important;
    max-height: 135px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* قاب خطی آبی آسمانی مستقیماً چسبیده به خود تصویر تجهیز (بدون حاشیه خالی در چپ و راست) */
  #shop-main.shop-home-view .shop-cattile-icon.has-category-image img,
  #shop-main.shop-home-view .shop-cattile-icon img {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 135px !important;
    margin: 0 auto !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 1.5px solid #38bdf8 !important; /* خط آبی آسمانی دقیق دور خود تصویر تجهیز */
    border-radius: 12px !important;          /* گوشه‌های نرم و گرد */
    background: #f0f9ff !important;          /* پس‌زمینه ملایم هماهنگ با تصویر */
    transform: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
  }

  #shop-main.shop-home-view .shop-cattile:active .shop-cattile-icon.has-category-image img,
  #shop-main.shop-home-view .shop-cattile:active .shop-cattile-icon img {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon:not(.has-category-image) {
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon:not(.has-category-image) .za-icon {
    width: 50px !important;
    height: 50px !important;
  }

  /* نام تجهیز */
  #shop-main.shop-home-view .shop-cattile-name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* دکمه CTA جمع‌وجور و فشرده زیر نام */
  #shop-main.shop-home-view .shop-cattile-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: auto !important;
    max-width: 120px !important;
    margin: 2px auto 0 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    pointer-events: none !important;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2) !important;
    transition: background 0.16s ease !important;
  }

  #shop-main.shop-home-view .shop-cattile-action svg {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    stroke: currentColor !important;
  }

  #shop-main.shop-home-view .shop-cattile:active .shop-cattile-action {
    background: #0369a1 !important;
  }

  #shop-main.shop-home-view .shop-cattile-count,
  #shop-main.shop-home-view .shop-cattile-image::before,
  #shop-main.shop-home-view .shop-cattile-image::after {
    display: none !important;
  }
}

/* در موبایل: ۲ ستونه بدون باکس، کادر چسبیده به خود تصویر و بدون هیچ حاشیه کناری */
@media screen and (max-width: 640px) {
  #shop-main.shop-home-view .shop-catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }

  #shop-main.shop-home-view .shop-cattile {
    min-height: 0 !important;
    padding: 0 !important;
    gap: 3px !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon,
  #shop-main.shop-home-view .shop-cattile-icon.has-category-image {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon.has-category-image img,
  #shop-main.shop-home-view .shop-cattile-icon img {
    height: 100% !important;
    max-height: 120px !important;
    border: 1.5px solid #38bdf8 !important;
    border-radius: 11px !important;
    padding: 2px !important;
  }

  #shop-main.shop-home-view .shop-cattile-name {
    font-size: 0.74rem !important;
    margin-top: 1px !important;
  }

  #shop-main.shop-home-view .shop-cattile-action {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
    margin-top: 1px !important;
  }
}

@media screen and (max-width: 380px) {
  #shop-main.shop-home-view .shop-catgrid {
    gap: 6px 4px !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon,
  #shop-main.shop-home-view .shop-cattile-icon.has-category-image {
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #shop-main.shop-home-view .shop-cattile-icon.has-category-image img,
  #shop-main.shop-home-view .shop-cattile-icon img {
    height: 100% !important;
    max-height: 110px !important;
    border: 1.5px solid #38bdf8 !important;
    border-radius: 10px !important;
    padding: 1.5px !important;
  }

  #shop-main.shop-home-view .shop-cattile-name {
    font-size: 0.7rem !important;
  }

  #shop-main.shop-home-view .shop-cattile-action {
    font-size: 0.58rem !important;
    padding: 2.5px 6px !important;
  }
}


/* تنظیم بهینه ویژگی شاخص در نمای موبایل و تبلت برای جلوگیری از شلوغی کارت */
@media screen and (max-width: 1024px) {
  #shop-main.shop-home-view .za-card-highlight-spec,
  .shop-page-wrap .za-card-highlight-spec {
    font-size: 0.65rem !important;
    padding: 1px 4px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    max-width: 100% !important;
    border-radius: 3px !important;
  }
  #shop-main.shop-home-view .za-card-highlight-spec .za-spec-dot,
  .shop-page-wrap .za-card-highlight-spec .za-spec-dot {
    width: 3px !important;
    height: 3px !important;
  }
}


/* نمایش محصولات در صفحات داخلی فروشگاه: دو ستون یا یک ستون با کنترل کاربر */
@media screen and (max-width: 1024px) {
  .shop-page-wrap .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .shop-page-wrap .products-grid.view-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .shop-page-wrap .products-grid.view-list .product-card,
  .shop-page-wrap .products-grid:not(.view-list) .product-card {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ══════ فشرده‌سازی باکس نوار ابزار و چیدمان دوسطری در موبایل و تبلت فقط ══════ */
@media screen and (max-width: 1024px) {
  /* باکس اصلی فشرده با پدینگ کم و چیدمان عمودی دو ردیفه */
  .shop-page-wrap .shop-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  }

  /* ردیف بالایی: دکمه فیلترها و شمارنده در یک طرف، دکمه‌های نمایش در کنار هم */
  .shop-page-wrap .shop-toolbar-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    gap: 8px !important;
  }

  /* دکمه‌های سوئیچ نمایش در ردیف بالایی */
  .shop-page-wrap .shop-toolbar-info .za-view-toggle {
    margin-inline-start: auto !important;
    padding: 2px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    gap: 2px !important;
  }

  .shop-page-wrap .shop-toolbar-info .za-view-toggle button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    padding: 0 !important;
  }

  .shop-page-wrap .shop-toolbar-info .za-view-toggle button svg {
    width: 15px !important;
    height: 15px !important;
  }

  .shop-page-wrap .shop-toolbar-info .btn-open-filters {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
  }

  /* ردیف پایینی: مرتب‌سازی و منوی کشویی */
  .shop-page-wrap .shop-sort {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    gap: 8px !important;
  }

  .shop-page-wrap .shop-sort label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    white-space: nowrap !important;
  }

  .shop-page-wrap .shop-sort select {
    flex: 1 !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
  }
}


/* ========================================================================== 
   FINAL MOBILE/TABLET CARD NORMALIZATION
   Keep content readable: no clipping, no forced one-line labels, no overlap.
   Brand/category are redundant with the product title on compact cards.
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .shop-page-wrap .product-card.za-product-card-v3,
  .shop-page-wrap .product-rail-cell .product-card.za-product-card-v3 {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .shop-page-wrap .za-card-meta-row,
  .shop-page-wrap .za-card-brand,
  .shop-page-wrap .za-card-cat {
    display: none !important;
  }

  .shop-page-wrap .za-card-top-bar,
  .shop-page-wrap .za-card-badge-container,
  .shop-page-wrap .za-card-badge {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .shop-page-wrap .za-card-top-bar {
    padding: 6px 8px 4px !important;
    margin: 0 !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .shop-page-wrap .za-card-badge-container {
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 3px !important;
  }

  .shop-page-wrap .za-card-badge {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.35 !important;
    padding: 3px 6px !important;
  }

  .shop-page-wrap .za-card-media-wrap {
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .shop-page-wrap .za-card-media-inner,
  .shop-page-wrap .za-card-img-anchor,
  .shop-page-wrap .za-card-picture {
    min-height: 0 !important;
  }

  .shop-page-wrap .za-card-picture img,
  .shop-page-wrap .za-card-media-wrap img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .shop-page-wrap .za-card-stock-caption {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 4px 8px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  .shop-page-wrap .za-card-body {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .shop-page-wrap .za-card-title,
  .shop-page-wrap .za-card-title a,
  .shop-page-wrap .za-card-highlight-spec,
  .shop-page-wrap .za-price-active,
  .shop-page-wrap .za-price-quote,
  .shop-page-wrap .za-card-actions-row,
  .shop-page-wrap .za-card-actions-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  .shop-page-wrap .za-card-title {
    margin: 0 0 8px !important;
    font-size: clamp(.84rem, 2.1vw, .98rem) !important;
    line-height: 1.5 !important;
  }

  .shop-page-wrap .za-card-highlight-spec {
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
  }

  .shop-page-wrap .za-card-price-section {
    margin: 4px 0 10px !important;
    padding: 8px 0 0 !important;
    min-height: 0 !important;
  }

  .shop-page-wrap .za-card-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .shop-page-wrap .za-btn-action {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  .shop-page-wrap .za-card-body { padding: 14px !important; }
}

@media screen and (max-width: 640px) {
  .shop-page-wrap .za-card-body { padding: 10px !important; }
}

@media screen and (max-width: 380px) {
  .shop-page-wrap .za-card-body { padding: 8px !important; }
  .shop-page-wrap .za-card-title { font-size: .82rem !important; }
}