/* 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%; }
/* Local change (dealer project, engine request #6): a long word or address (a URL in a feed description) breaks inside its box instead of running past it. */
[data-site] :is(p, li, dd, td, th, blockquote, figcaption) { overflow-wrap: break-word; }
[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; }
  /* Local change (dealer project, engine request #6): rows that hold a round dot, icon or avatar (status dot, "↗" badge, WhatsApp icon, assistant photo)
     and accordion headers (<summary>) do not wrap: the text wraps beside the small item instead of leaving it alone on its own line. */
  [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(summary, :has(> [style*="border-radius: 50%"])):not([data-keep], [data-keep] *) { flex-wrap: wrap; }
  /* the open/closed status (a dot, then the text): the dot stays at the start of the first line when the text wraps */
  [data-site] [style*="display: flex"]:has(> span:empty[style*="border-radius: 50%"]:first-child):not([data-keep], [data-keep] *) { align-items: flex-start !important; }
  [data-site] [style*="display: flex"] > span:empty[style*="border-radius: 50%"]:first-child:not([style*="margin-top"]):not([data-keep] *) { flex: none; margin-top: .45em; }
  /* accordion headers: the "+" / "−" sign stays in the right-hand column, level with the first line of a question that wraps */
  [data-site] details > summary { align-items: flex-start !important; }
  [data-site] details > summary > span[aria-hidden="true"] { flex: none; }
  /* the "latest arrival" caption over the home hero is left out on phones (it covered the hero text) */
  [data-site] [data-hero-car] { display: none !important; }
  [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; }
  /* the site header stays sticky on phones too (engine 1.10): its wrapper holds the header itself */
  [data-site] [style*="position: sticky"]:not([data-keep], [data-keep] *):not(:has(> header)) { 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: var(--r-sm) !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: var(--r-md) !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: var(--r-md) !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; } }

/* Home hero above the fold on desktop and laptop (engine 1.12; window 1040 px wide or more, 125 % zoom included; below that the search bar breaks
   into two rows, the tablet layout, and the hero keeps its own height). The hero is as tall as the window minus the header and the part of the
   search bar that hangs below it (--hero-gap = header 103 + hero padding 20 + 38 px of the search bar), its text follows the window height, and
   the search bar ends before the chat button (--as-chat-room: the width the chat button needs, measured by the chat widget). The rating badge
   sits above the buttons (DOM order). src/page-shell.js draws the first paint with the same numbers. !important: the template sets these
   properties inline. */
@media (min-width: 1040px) {
  [data-hero-media] { --hero-gap: 161px; min-height: clamp(440px, calc(100vh - var(--hero-gap)), 1000px) !important; min-height: clamp(440px, calc(100svh - var(--hero-gap)), 1000px) !important; align-items: center !important; }
  [data-hero-content] { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 14px !important; row-gap: clamp(8px, 1.6vh, 20px) !important; padding-top: clamp(16px, 3.5vh, 56px) !important; padding-bottom: calc(52px + clamp(12px, 3vh, 48px)) !important; }
  [data-hero-content] > * { grid-column: 1 / -1; }
  [data-hero-content] > [data-google-rating] { justify-self: start; }
  [data-hero-h1] { font-size: clamp(32px, min(7vw, 8vh), 86px) !important; }
  [data-hero-sub] { font-size: clamp(16px, 2.4vh, 22px) !important; }
  [data-hero-text] { font-size: clamp(14.5px, 2.1vh, 19px) !important; line-height: 1.5 !important; }
  [data-hero-media] + div { padding-right: max(clamp(12px, 3vw, 40px), calc(var(--as-chat-room, 270px) - max(0px, (100vw - 1440px) / 2))) !important; }
}
/* short laptop windows (1366 x 768 at 125 % = 1093 x 615): the longer French hero still fits */
@media (min-width: 1040px) and (max-height: 660px) {
  [data-hero-content] { padding-top: clamp(12px, 3vh, 56px) !important; padding-bottom: calc(52px + clamp(10px, 2.6vh, 48px)) !important; }
  [data-hero-h1] { font-size: clamp(30px, min(7vw, 6.8vh), 86px) !important; }
}

/* Contact cards: with four cards (call, WhatsApp, email, visit) a 1024-1180 px window shows them two by two, not three plus one alone */
@container site (min-width: 1024px) and (max-width: 1180px) {
  [data-site] [data-ch-grid][style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Accordions (engine 1.12): the sign follows the state, "+" closed, "−" open, in every <details> accordion (FAQ, landing and extra pages);
   the Financing page's own accordion switches its sign in the template. */
details[open] > summary > span[aria-hidden="true"] { font-size: 0 !important; }
details[open] > summary > span[aria-hidden="true"]::after { content: "−"; font-size: 22px; line-height: 1; }