/* Responsive layer for the live site. Inline styles carry the desktop design;
   container queries on [data-site-frame] reflow it for tablets and phones.
   Shared components (header, footer, cards, chat) are marked data-keep and handle their own layout. */
[data-site] img, [data-site] iframe, [data-site] video { max-width: 100%; }
[data-site-frame] { container: site / inline-size; }

@container site (max-width: 1180px) {
  [data-site] :is([style*="repeat(4"], [style*="repeat(5"], [style*="repeat(6"]):not([data-keep], [data-keep] *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@container site (max-width: 1023px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] :is([style*="fr) minmax"], [style*="grid-template-columns: 2"], [style*="grid-template-columns: 3"]):not([style*="repeat("]):not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(40px, 7vw, 72px) !important; }
}

@container site (max-width: 819px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] [data-m2]:not([data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(36px, 10.5vw, 52px) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; }
  [data-site] h2:not([data-keep] *) { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08 !important; }
  [data-site] h3:not([data-keep] *) { font-size: 20px !important; }
  [data-site] [data-big]:not([data-keep] *) { font-size: clamp(40px, 17vw, 64px) !important; line-height: .95 !important; }
  [data-site] :is([style*="font-size: 5"], [style*="font-size: 6"], [style*="font-size: 7"]):not([style*="font-size: 5px"], [style*="font-size: 6px"], [style*="font-size: 7px"], [style*="font-size: 5."], [style*="font-size: 6."], [style*="font-size: 7."]):not([data-big]):not([data-keep], [data-keep] *) { font-size: clamp(28px, 10.4vw, 40px) !important; line-height: 1 !important; overflow-wrap: break-word; }
  [data-site] [style*="font-size: 4"]:not([style*="font-size: 4px"], [style*="font-size: 4."]):not([data-keep], [data-keep] *) { font-size: clamp(26px, 8.6vw, 32px) !important; line-height: 1.05 !important; overflow-wrap: break-word; }
  /* Small tags above a heading ("Venta o intercambio · …"): wrap instead of running past the column. */
  [data-site] :is(span, div)[style*="align-self: flex-start"][style*="white-space: nowrap"]:not([data-keep], [data-keep] *) { white-space: normal !important; max-width: 100%; }
  [data-site] :is([style*="padding: 3"], [style*="padding: 4"], [style*="padding: 5"], [style*="padding: 6"], [style*="padding: 7"], [style*="padding: 8"]):not([style*="padding: 3px"], [style*="padding: 4px"], [style*="padding: 5px"], [style*="padding: 6px"], [style*="padding: 7px"], [style*="padding: 8px"]):not([data-keep], [data-keep] *) { padding: 22px 16px !important; }
  [data-site] [style*="padding: 20px"]:not([data-keep], [data-keep] *) { padding: 12px !important; }
  [data-site] [style*="margin: 0 20px"]:not([data-keep], [data-keep] *) { margin-left: 10px !important; margin-right: 10px !important; }
  [data-site] :is([style*="gap: 4"], [style*="gap: 5"], [style*="gap: 6"]):not([style*="gap: 4px"], [style*="gap: 5px"], [style*="gap: 6px"]):not([data-keep], [data-keep] *) { gap: 24px !important; }
  [data-site] [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"], [style*="999px"] *, [style*="var(--r-pill)"] *):not([data-nowrap], [data-carousel], [data-marquee-row]):not([data-keep], [data-keep] *) { flex-wrap: wrap; }
  [data-site] [data-tall]:not([data-keep] *) { height: auto !important; min-height: 0 !important; }
  [data-site] [data-tall][style*="position: relative"]:not([data-keep] *) { height: 340px !important; }
  [data-site] [style*="position: sticky"]:not([data-keep], [data-keep] *) { position: static !important; }
  [data-site] :is([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"]):not([data-keep], [data-keep] *) { white-space: nowrap; max-width: 100%; }
  [data-site] [data-desk-only], [data-site] [data-mfilters][data-open="0"] { display: none !important; }
  [data-site] [data-carousel] { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px !important; grid-template-columns: none !important; scroll-behavior: smooth; }
  [data-site] [data-carousel]::-webkit-scrollbar { display: none; }
  [data-site] [data-carousel] > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
}
@container site (max-width: 1023px) {
  [data-site] [data-vd-main] { display: flex !important; flex-direction: column; gap: 12px !important; }
  [data-site] [data-vd-left] { display: contents !important; }
  [data-site] [data-vd-left] > * { order: 3; width: 100%; }
  [data-site] [data-vd-left] > [data-vd-gal] { order: 1; }
  [data-site] [data-vd-left] > [data-vd-thumbs] { order: 1; }
  [data-site] [data-vd-aside] { order: 2; width: 100%; }
  /* stacked layout: the side panel must not stay sticky, or it floats over Equipment / Similar vehicles while scrolling (seen at 892px) */
  [data-site] [data-vd-aside], [data-site] [data-vd-aside] [style*="position: sticky"] { position: static !important; top: auto !important; }
}
@container site (max-width: 819px) {
  [data-site] [data-vd-thumbs] { display: flex !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
  [data-site] [data-vd-thumbs]::-webkit-scrollbar { display: none; }
  [data-site] [data-vd-thumbs] > button { flex: 0 0 calc((100% - 16px) / 3) !important; aspect-ratio: 4/3; border-radius: 14px !important; }
}
@container site (min-width: 820px) {
  [data-site] [data-mob-only] { display: none !important; }
}
@container site (max-width: 819px) {
  [data-site] [data-qs-go] { min-height: 56px; padding: 0 22px !important; font-size: 16px !important; justify-content: center; margin-top: 6px; border-radius: 18px !important; }
}
@keyframes asMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


@container site (max-width: 819px) {
  [data-site] [data-budget-pills] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
  [data-site] [data-budget-pills] > a { display: flex !important; justify-content: space-between !important; align-items: center !important; min-height: 44px !important; padding: 10px 16px !important; background: var(--color-surface) !important; border: 1px solid var(--color-divider) !important; border-radius: var(--r-pill) !important; }
  [data-site] [data-budget-pills] { margin-top: 4px; }
}

[data-marquee-row] { flex-wrap: nowrap !important; width: max-content !important; }
[data-marquee-row] > * { flex: none; white-space: nowrap; }

@container site (max-width: 819px) {
  [data-site] [data-seg][data-seg][data-seg][style] { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; gap: 4px !important; border-radius: 24px !important; }
  [data-site] [data-seg][data-seg][data-seg][style] > * { min-height: 44px; }
}

/* Cards: two per row from tablets up to 1183px (three were too narrow next to the filter column, one per row left big empty gaps) */
@container site (min-width: 600px) and (max-width: 1183px) {
  [data-site] [data-results][style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Home "Latest arrivals": 2 x 2 grid on tablets instead of a one-card slider */
@container site (min-width: 600px) and (max-width: 819px) {
  [data-site] [data-carousel][style*="grid-template-columns"]:not([data-keep], [data-keep] *) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; flex-wrap: initial !important; }
  [data-site] [data-carousel] > * { flex: none; }
  [data-site] [data-slider-ctl] { display: none !important; }
}
/* Side column that stays sticky only while the page is two-column; stacked (<= 1023px) it must scroll with the page or it floats over the form */
@container site (max-width: 1023px) {
  [data-site] [data-unstick] { position: static !important; top: auto !important; }
}
/* While the site header component loads, its placeholder takes the real header height (78px compact header < 892px, 103px desktop), so the page below does not jump when it appears */
.sc-placeholder[title="Site Header"] { height: 103px !important; }
@media (max-width: 891.98px) { .sc-placeholder[title="Site Header"] { height: 78px !important; } }