/* ============================================================
   AUTOASTRA — SLIDEBAR (RAIL) SIZES
   Makes EVERY horizontal slider on the mobile site use the
   same sizes as the new approved design.

   Scope: @media (max-width: 767px) ONLY. Desktop untouched.
   Load AFTER styles.css.

   How it works:
     .rail  -> rail mechanics (gap, padding, snap)
     .rail-peek        -> big cards  : 1 card + 56px peek
     .rail-tile        -> icon tiles : 72px
     .rail-product     -> products   : 160px
     .rail-brand       -> brands     : 112px
     .rail-review      -> reviews    : 280px
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- 1. EVERY RAIL: same mechanics ---------- */
  .rail {
    display: flex;
    gap: 12px !important;                 /* card gap 12px */
    padding-left: 16px !important;        /* page margin */
    padding-right: 16px !important;
    scroll-padding-left: 16px;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rail::-webkit-scrollbar { display: none; }

  /* every child: no shrink, snaps to the start */
  .rail > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    min-width: 0;
  }

  /* ---------- 2. BIG CARDS: 1 card + 56px peek ---------- */
  /* news slider, reviews slider, compare slider, hero rails */
  .rail-peek > * {
    width: calc(100% - 68px) !important;
    max-width: 330px !important;
  }

  /* ---------- 3. FIXED-SIZE RAILS ---------- */
  .rail-tile > *    { width: 72px  !important; }   /* quick tools */
  .rail-product > * { width: 160px !important; }   /* store products */
  .rail-brand > *   { width: 112px !important; }   /* top brands */
  .rail-review > *  { width: 280px !important; }   /* expert reviews */

  /* ---------- 4. cards inside rails: no fixed height, no cut ---------- */
  .rail-peek > *, .rail-review > * {
    height: auto !important;
  }
  .rail-peek img, .rail-review img,
  .rail-product img, .rail-brand img {
    width: 100% !important;
    object-fit: cover !important;
  }

  /* ---------- 5. optional dots under a rail ---------- */
  .rail-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 2px 0 10px;
  }
  .rail-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #e6e6ea; transition: .2s;
  }
  .rail-dots i.on {
    background: #f97316; width: 18px; border-radius: 99px;
  }
}

/* Landscape phones: same sizes */
@media (max-width: 900px) and (orientation: landscape) {
  .rail-peek > * { width: calc(100% - 68px) !important; max-width: 330px !important; }
}

/* ============================================================
   APPLY LIST — jis rail pe kaunsi class
   ------------------------------------------------------------
   HOME
     Quick tools rail .......... rail-tile
     Trending now rail ......... rail-peek
     Budget picks rail ......... rail-peek
     Expert reviews rail ....... rail-review
     Top brands rail ........... rail-brand
     Auto store rail ........... rail-product

   NEWS
     News slider (top) ......... rail-peek      <-- item 10

   REVIEWS
     Reviews slider ............ rail-peek

   COMPARE
     Compare slider ............ rail-peek

   Baaki koi rail nahi chhedni.
   ============================================================ */

@media (max-width: 767px) {
  /* the trending rail's cards carry a fixed Tailwind width, so pin it by id */
  #trendTrack > * { width: calc(100% - 68px) !important; max-width: 330px !important; }
}