/* Premium mobile carousels + image robustness (injected via code-path attributes) */

/* --- MOBILE: swipe carousels (wide cards, no thin look) --- */
@media (max-width: 768px) {

  /* Rental cards row */
  [code-path="src\\sections\\Rental.tsx:111:9"],
  /* Detailing packages row */
  [code-path="src\\sections\\Detailing.tsx:109:9"]{
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 10px 16px 16px !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;            /* Firefox */
    contain: layout paint;                       /* smoother */
  }
  [code-path="src\\sections\\Rental.tsx:111:9"]::-webkit-scrollbar,
  [code-path="src\\sections\\Detailing.tsx:109:9"]::-webkit-scrollbar{
    display: none;
  }

  /* Cards */
  [code-path="src\\sections\\Rental.tsx:111:9"] > *,
  [code-path="src\\sections\\Detailing.tsx:109:9"] > *{
    flex: 0 0 86vw !important;        /* wide, premium */
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    will-change: transform;
  }

  /* Subtle "peek" so you see there are more items (no mask-image = less lag) */
  [code-path="src\\sections\\Rental.tsx:111:9"],
  [code-path="src\\sections\\Detailing.tsx:109:9"]{
    padding-right: 26vw !important;
  }

  /* iOS: ensure rental image wrapper doesn't collapse */
  [code-path="src\\sections\\Rental.tsx:125:17"]{
    height: 190px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    transform: translateZ(0);
  }
  img[code-path="src\\sections\\Rental.tsx:126:19"]{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

}

/* --- DESKTOP: Detailing in one row (4 columns) --- */
@media (min-width: 1024px) {
  [code-path="src\\sections\\Detailing.tsx:109:9"]{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
