/* ============================================================
   Left ads sidebar — show on mobile/tablet as compact strips
   (Desktop keeps sticky vertical column elsewhere.)
   ============================================================ */

@media (max-width: 991.98px) {
  html body .below-main-row:not(.below-main-row--no-sidebar) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Show sidebar above product sections */
  html body .below-main-row:not(.below-main-row--no-sidebar) > .ads-left-sidebar,
  html body .below-main-row:not(.below-main-row--no-sidebar) > #left-ads-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    order: -1 !important;
  }

  /* Keep empty sidebar hidden */
  html body .below-main-row.below-main-row--no-sidebar > .ads-left-sidebar,
  html body .below-main-row.below-main-row--no-sidebar > #left-ads-sidebar,
  html body #left-ads-sidebar:empty {
    display: none !important;
  }

  html body #left-ads-sidebar .ads-body,
  html body #left-ads-sidebar .ads-stack {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #left-ads-sidebar .ads-group-header {
    display: block !important;
    margin: 4px 2px 2px !important;
    padding: 0 2px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    line-height: 1.3 !important;
  }

  /* Each ad group scrolls horizontally */
  html body #left-ads-sidebar .ads-group-stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 2px 2px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
  }

  html body #left-ads-sidebar .ads-group-stack::-webkit-scrollbar {
    height: 4px !important;
  }

  html body #left-ads-sidebar .ad-card,
  html body #left-ads-sidebar .ad-fallback {
    display: block !important;
    flex: 0 0 44vw !important;
    width: 44vw !important;
    max-width: 176px !important;
    min-width: 124px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  html body #left-ads-sidebar .ad-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 210px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  html body #left-ads-sidebar .ad-label {
    display: none !important;
  }

  html body .below-main-row:not(.below-main-row--no-sidebar) > #main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  html body #left-ads-sidebar .ad-card,
  html body #left-ads-sidebar .ad-fallback {
    flex: 0 0 46vw !important;
    width: 46vw !important;
    max-width: 160px !important;
    min-width: 112px !important;
  }

  html body #left-ads-sidebar .ad-card img {
    max-height: 190px !important;
  }
}