/* ==========================================================================
   AUTOASTRA v279 — the 8 mobile items. Loaded LAST so nothing overrides it.
   Desktop is untouched: every rule lives inside max-width: 640px.
   ========================================================================== */
@media (max-width: 640px) {
  /* 7 — no decorative "smoke" on phones */
  .ambient-bg { display: none !important; }
  .blur-\[120px\], .blur-\[100px\], .blur-\[110px\] { display: none !important; }

  /* 1 — hero band is exactly 220px */
  section[style*="height:220px"] { height: 220px !important; min-height: 220px !important; max-height: 220px !important; }

  /* 2 — budget picks: grid -> horizontal rail, 1 card + peek */
  #budgetGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 16px 10px !important;
    margin: 0 -16px !important;
    scrollbar-width: none;
  }
  #budgetGrid::-webkit-scrollbar { display: none; }
  #budgetGrid > * {
    flex: 0 0 auto !important;
    width: calc(100% - 68px) !important;
    max-width: 330px !important;
    scroll-snap-align: start !important;
  }

  /* 3 — top brands: 72px circles, 112px cards */
  .animate-scroll > *, .animate-scroll-rev > * { width: 112px !important; flex: 0 0 auto !important; }
  .animate-scroll > * > div:first-child, .animate-scroll-rev > * > div:first-child,
  .animate-scroll > * .rounded-full, .animate-scroll-rev > * .rounded-full {
    width: 72px !important; height: 72px !important;
  }
  .animate-scroll > * span, .animate-scroll-rev > * span { font-size: 13px !important; }

  /* 8 — home store cards read as product cards */
  .rail-product > * {
    border-radius: 16px !important;
    border: 1px solid var(--line, #e8e8ec) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
    background: var(--bg, #fff) !important;
    overflow: hidden !important;
  }
}

/* 6 — trending cards distinct in both themes */
.trend-mq-card, .trend-card {
  background: #fff !important;
  border: 1px solid #e8e8ec !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  overflow: hidden;
}
html.dark .trend-mq-card, html.dark .trend-card {
  background: #111114 !important; border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}