/*
 * Kaiso public surfaces: home wall, car wall, listings search and listing
 * detail. Reads kaiso.css tokens only.
 */

/* Home hero: the painted wall beside a view of the coast road. Afternoon sun
   through an unseen breeze-block screen falls across the wall as soft light;
   the search bar overlaps the join. */
.home-hero { --hero-h: clamp(22rem, calc(100svh - 29rem), 27rem); --wall-w: 50%; position: relative; display: grid; grid-template-columns: var(--wall-w) 1fr; min-block-size: var(--hero-h); background: var(--wall); color: var(--on-wall); isolation: isolate; --focus: var(--ink); }
.home-hero-view { grid-column: 2; grid-row: 1; margin: 0; position: relative; z-index: 0; overflow: hidden; }
.home-hero-photo { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 92%; filter: saturate(0.94) contrast(1.03); animation: home-settle 1800ms var(--ease-out) both; }
.home-hero-wall { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; overflow: hidden; background: linear-gradient(100deg, var(--wall) 35%, oklch(0.69 0.115 190)); }
/* The light: the breeze-block module, huge, blurred and faint, tilted as if
   thrown from a screen off to the right, fading out before it reaches the copy.
   It drifts very slowly, like the sun moving; reduced motion holds it still. */
.home-hero-wall::after { content: ""; position: absolute; inset: -40% -10% -40% 38%; z-index: 0; background: oklch(0.97 0.05 95); opacity: 0.2; filter: blur(7px); pointer-events: none;
  -webkit-mask: url("/assets/kaiso/breeze-block-30312e10.svg") 0 0 / 9rem 9rem, linear-gradient(to right, transparent, rgb(0 0 0 / 0.35) 45%, #000); -webkit-mask-composite: source-in;
  mask: url("/assets/kaiso/breeze-block-30312e10.svg") 0 0 / 9rem 9rem, linear-gradient(to right, transparent, rgb(0 0 0 / 0.35) 45%, #000); mask-composite: intersect;
  transform: perspective(1100px) rotateY(-38deg) skewY(-12deg); transform-origin: right center; will-change: transform; animation: home-light 48s ease-in-out infinite alternate; }
@keyframes home-light { to { transform: perspective(1100px) rotateY(-34deg) skewY(-10deg) translate(-2.5rem, 1.5rem); } }
.home-hero-copy { position: relative; z-index: 1; inline-size: 100%; padding: var(--space-6) var(--space-6) calc(var(--space-8) + var(--space-5)) max(var(--page-inline), calc((100vw - var(--page-max)) / 2 + var(--page-inline))); }
.home-hero-copy > * { animation: home-rise 900ms var(--ease-out) both; }
.home-hero-copy > * + * { animation-delay: 120ms; }
.home-hero .display-title { margin: 0 0 var(--space-5); color: var(--on-wall); font-size: clamp(2.75rem, 1rem + 3.4vw, 4.25rem); font-weight: 800; line-height: 0.94; letter-spacing: -0.04em; max-width: none; white-space: pre; }
.home-hero-rate { margin: var(--space-5) 0 0; font-size: var(--step-1); font-weight: 500; }
.home-hero-rate strong { padding: 0.125rem var(--space-2); background: var(--sun); font-weight: 750; font-variant-numeric: tabular-nums; }
.home-hero-lede { margin: 0; max-width: 34ch; text-wrap: balance; font-size: var(--step-1); font-weight: 500; line-height: 1.45; }
@keyframes home-rise { from { opacity: 0; translate: 0 0.75rem; } }
@keyframes home-settle { from { scale: 1.06; } }

/* The search bar: one white slab, pickup and return side by side, set off
   by an ink edge and a flat deep-wall reveal beneath (no blur). */
.home-search { position: relative; z-index: 2; max-width: var(--page-max); margin: calc(-1 * var(--space-8)) auto 0; padding-inline: var(--page-inline); }
.home-opening { position: relative; padding: var(--space-2); border-radius: var(--radius); background: var(--field); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 0.5rem 0 1.5px var(--wall-deep); --focus: var(--wall-deep); }
.home-opening-title { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-opening-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; gap: 0; }
.home-opening .trip-date-time { display: block; padding: var(--space-3) var(--space-5) var(--space-2); border-right: 1px solid var(--rule); border-radius: var(--radius); transition: background-color 160ms var(--ease-out); }
.home-opening .trip-date-time:hover, .home-opening .trip-date-time:focus-within { background: var(--render); }
.home-opening .trip-date-time legend { float: left; inline-size: 100%; margin: 0; color: var(--ink-quiet); font-size: var(--step--1); font-weight: 650; }
.home-opening .trip-date-time-fields { clear: both; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; }
.home-opening .trip-date-time-fields .field { position: relative; }
.home-opening .trip-date-time-fields .field + .field { padding-left: var(--space-4); }
.home-opening .trip-date-time-fields .field + .field::before { content: ""; position: absolute; left: 0; inset-block: 0.5rem; border-left: 1px solid var(--rule); }
.home-opening .trip-date-time-fields label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* :not(#_) outranks the base input rule's stacked :not() selectors. */
.home-opening .trip-date-time-fields :is(input, select):not(#_) { block-size: 2.75rem; min-height: 0; padding: 0; border: 0; background-color: transparent; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; cursor: pointer; }
.home-opening .trip-date-time-fields select { padding-right: 1.5rem; background-position: right 0.125rem center; }
.home-opening .trip-date-time-fields select:not(#_):has(option[value=""]:checked) { color: var(--ink-quiet); font-weight: 500; }
.home-opening .trip-date-time-fields :is(input, select):focus-visible { outline-offset: 2px; }
.home-opening-submit { min-inline-size: 11rem; margin-left: var(--space-2); padding-inline: var(--space-6); font-size: var(--step-1); }
.home-opening-note { margin: 0; padding: var(--space-2) var(--space-5) var(--space-1); color: var(--ink-quiet); font-size: var(--step--1); }
/* The trip reads as a route: a pickup stop, a return stop, joined by a dashed
   centre line (vertical when the pairs stack on phones). */
.home-opening .trip-date-time legend::before { content: ""; display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; margin-right: var(--space-2); border: 1.5px solid var(--ink); border-radius: 50%; background: var(--ink); vertical-align: 0.05em; }
.home-opening .trip-date-time:nth-of-type(2) legend::before { background: var(--sun); }
.home-opening .trip-date-time:first-of-type { border-right: 2px dashed var(--rule); border-radius: var(--radius) 0 0 var(--radius); }

/* Phones only: car shapes straight after the search. */
.home-quick { display: none; }
/* Inner pages open with a plain painted stripe; the breeze block is kept for the footer crest. */
.block-band.page-trim { block-size: 0.375rem; background: var(--wall); -webkit-mask: none; mask: none; }

/* Home search bar: the date picker (kaiso.css) set bare, in the bar's larger type. */
.home-opening .date-range-display { padding-inline: 0; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }
.home-opening .date-range-display.is-empty { font-weight: 500; }
.home-opening .date-range-wrap > .input.date-range-input:not(#_) { background: transparent; }

.home-cars { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.home-cars-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.home-cars-heading .section-heading { margin: 0; }
.home-cars-heading .text-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Know where you stand: a rendered band with three numbered promises. */
.home-record { background: var(--render); box-shadow: 0 0 0 100vmax var(--render); clip-path: inset(0 -100vmax); }
.home-record .section-heading { max-width: 20ch; }
.louvre-list { list-style: none; margin: var(--space-6) 0 var(--space-5); padding: 0; border-top: 1.5px solid var(--ink); }
.louvre { display: grid; grid-template-columns: 4rem minmax(12rem, 22rem) minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding-block: var(--space-6); border-bottom: 1px solid var(--edge); }
.louvre-number { color: var(--wall-deep); font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.louvre-term { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-2); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.louvre-text { margin: 0; font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }
.louvre-fine { margin: var(--space-2) 0 0; color: var(--ink-quiet); font-size: var(--step--1); }
.home-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.home-record-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1080px) {
  .home-hero { --wall-w: 56%; }
  .home-opening-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-opening .trip-date-time:nth-of-type(2) { border-right: 0; }
  .home-opening-submit { grid-column: 1 / -1; margin: var(--space-2) 0 0; }
}
@media (max-width: 760px) {
  /* Phones: a wide, short view on top, the lit wall beneath; the search
     keeps its button on the first screen. */
  .home-hero { display: block; min-block-size: 0; }
  .home-hero-view { display: none; }
  .home-hero-wall::after { inset: -30% -20% -30% 30%; -webkit-mask-size: 6rem 6rem, auto; mask-size: 6rem 6rem, auto; }
  .home-hero-rate { margin-top: var(--space-2); font-size: var(--step-0); }
  .home-hero-copy { padding: var(--space-6) var(--page-inline) calc(var(--space-7) + var(--space-2)); }
  .home-hero .display-title { font-size: max(2.25rem, var(--step-4)); margin-bottom: var(--space-2); }
  .home-hero-lede { font-size: var(--step-0); line-height: 1.45; max-width: none; }
  .home-search { margin-top: calc(-1 * var(--space-7)); }
  .home-opening-form { grid-template-columns: minmax(0, 1fr); }
  .home-opening .trip-date-time { position: relative; padding: var(--space-1) var(--space-3) var(--space-2) calc(var(--space-3) + 1.25rem); border-right: 0; }
  .home-opening .trip-date-time:first-of-type { border-right: 0; }
  .home-opening .trip-date-time legend::before { position: absolute; left: var(--space-3); top: 0.55rem; margin: 0; }
  /* The centre line runs from the pickup stop down to the return stop. */
  .home-opening .trip-date-time:first-of-type::after { content: ""; position: absolute; left: calc(var(--space-3) + 0.1875rem); top: 1.2rem; bottom: -0.55rem; border-left: 2px dashed var(--edge); }
  .home-quick { display: block; max-width: var(--page-max); margin: var(--space-5) auto 0; }
  .home-quick-title { display: block; margin-bottom: var(--space-2); color: var(--ink-quiet); font-size: var(--step--1); font-weight: 650; }
  .home-quick-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .home-quick-shape { display: grid; justify-items: center; gap: var(--space-1); inline-size: 100%; min-height: 44px; padding: var(--space-2) var(--space-1); border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--limewash); color: var(--ink); font-size: var(--step--1); font-weight: 650; line-height: 1.2; cursor: pointer; }
  .home-quick-shape:hover, .home-quick-shape:active { border-color: var(--ink); background: var(--sun-tint); }
  .home-quick-image { inline-size: 100%; max-block-size: 1.75rem; object-fit: contain; }
  /* The shapes above replace the full "What do you need it for?" section here. */
  .home-shapes { display: none; }
  .home-opening .trip-date-time-fields :is(input, select):not(#_), .home-opening .date-range-display { font-size: var(--step-0); }
  .home-opening-submit { inline-size: 100%; }
  .home-opening-note { padding-inline: var(--space-3); }
  .home-cars { padding-top: var(--space-7); }
}
@media (max-width: 640px) {
  .home-cars { padding-bottom: var(--space-5); }
  .louvre-list { margin-top: var(--space-5); }
  .louvre { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-5); }
  .louvre-body { grid-column: 2; }
  .louvre-number { font-size: var(--step-0); }
  .louvre-term { font-size: var(--step-1); }
  .louvre-text { font-size: var(--step-0); }
}

/* Browse by body type: louvre tiles as links into Explore. */
.home-shapes .section-heading { margin-bottom: var(--space-5); }
.shape-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.shape-list > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.shape-link { position: relative; isolation: isolate; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); align-content: start; padding: var(--space-4) var(--space-4) var(--space-5); border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--limewash); color: var(--ink); text-decoration: none; transition: border-color 160ms var(--ease-out); }
.shape-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, var(--sun) 0 0.375rem, var(--sun-edge) 0.375rem 0.4375rem, var(--sun-tint) 0.4375rem 0.625rem); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out); }
.shape-link:hover, .shape-link:focus-visible { border-color: var(--ink); text-decoration: none; }
.shape-link:hover::before, .shape-link:focus-visible::before { transform: scaleY(1); }
.shape-image { display: block; inline-size: 100%; height: auto; max-height: 6rem; margin-bottom: var(--space-3); object-fit: contain; }
.shape-label { align-self: start; justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--limewash); font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.shape-detail { align-self: start; justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--limewash); color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.home-shapes-note { margin: var(--space-4) 0 0; font-size: var(--step--1); }
@media (max-width: 900px) { .shape-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Narrow phones: one tile per row, laid flat (pictogram beside its label) so
   the four needs stack as short rows instead of four tall tiles. */
@media (max-width: 420px) {
  .shape-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .shape-list > li { display: block; grid-row: auto; }
  .shape-link { grid-row: auto; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  .shape-image { grid-row: 1 / span 2; align-self: center; max-height: 3rem; margin-bottom: 0; }
  .shape-label { grid-column: 2; align-self: end; font-size: var(--step-0); }
  .shape-detail { grid-column: 2; }
}

/* The car wall. Every card spans the same five subgrid rows, so photos,
   titles, vehicle lines, prices and notes line up across each row. */
.car-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--space-7) var(--gutter); }
.car-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.car-grid-item, .car-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.car-card { position: relative; }
.car-card-media { position: relative; aspect-ratio: var(--photo-aspect); overflow: hidden; margin-bottom: var(--space-4); border-radius: var(--radius); background: var(--render); }
.car-card-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 600ms var(--ease-out); }
.car-card:hover .car-card-image, .car-card:focus-within .car-card-image { scale: 1.035; }
.car-card-empty { display: grid; place-items: center; block-size: 100%; padding: var(--space-3); }
.listing-media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.listing-media-placeholder-image { display: block; inline-size: min(72%, 15rem); block-size: auto; max-block-size: 5.5rem; object-fit: contain; }
.listing-media-placeholder p { margin: 0; padding: var(--space-1) var(--space-3); background: var(--limewash); border-radius: var(--radius); color: var(--ink-quiet); font-size: var(--step--1); font-weight: 650; line-height: 1.35; text-align: center; }
.car-card-title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.car-card-link { color: var(--ink); text-decoration: none; }
.car-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.car-card-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.car-card-link:focus-visible { outline: none; }
.car-card:has(.car-card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--radius); }
.car-card-vehicle { margin: 0 0 var(--space-3); color: var(--ink-quiet); }
.car-card-place::before { content: " · "; }
.car-card-price { align-self: start; }
.car-card-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; }
.car-card-figure { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; }
.car-card-unit { color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.car-card-breakdown { position: relative; z-index: 1; margin-top: var(--space-1); }
.car-card-breakdown > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--wall-deep); font-weight: 650; list-style: none; }
.car-card-breakdown > summary::-webkit-details-marker { display: none; }
.car-card-breakdown > summary::after { content: ""; inline-size: 0.625rem; block-size: 0.625rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.car-card-breakdown[open] > summary::after { rotate: 180deg; }
.car-card-breakdown .money-breakdown { margin-block: var(--space-2) var(--space-3); }
.car-card-breakdown .money-row { padding-block: var(--space-2); font-size: var(--step--1); }
.car-card-breakdown > p { font-size: var(--step--1); margin: 0 0 var(--space-3); }
.car-card-note { align-self: start; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); color: var(--ink-quiet); font-size: var(--step--1); line-height: 1.45; }

/* Listings search and results */
.listings-heading { margin-bottom: var(--space-6); }
.listings-heading .page-title { margin-bottom: var(--space-2); }
.listings-heading p { margin: 0; }
.listings-layout { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); align-items: start; gap: var(--space-7); }
.public-listing-search { padding: var(--space-5); background: var(--render); border-radius: var(--radius); }
.public-listing-search .trip-date-time-fields { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.listings-search-heading { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 750; letter-spacing: -0.015em; }
.listings-results { min-width: 0; }
.listings-empty { padding: var(--space-6); border: 1.5px dashed var(--edge); border-radius: var(--radius); }
.listings-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.listings-next p { margin: 0; font-size: var(--step--1); }

.search-form { gap: var(--space-4); margin-top: var(--space-4); }
.search-trip-fields, .search-preference-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.search-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-height: 44px; margin-top: var(--space-3); padding-right: var(--space-5); position: relative; cursor: pointer; list-style: none; }
.search-disclosure > summary::-webkit-details-marker { display: none; }
.search-disclosure > summary::after { content: ""; position: absolute; right: 0; inline-size: 0.75rem; block-size: 0.75rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.search-disclosure[open] > summary::after { rotate: 180deg; }
.search-disclosure-action { font-weight: 700; }
.search-disclosure-criteria { color: var(--ink-quiet); font-size: var(--step--1); }
.search-disclosure.is-pinned-open > summary { display: none; }
.search-preferences { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.search-preferences > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 700; list-style: none; }
.search-preferences > summary::-webkit-details-marker { display: none; }
.search-preferences > summary::after { content: ""; inline-size: 0.75rem; block-size: 0.75rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.search-preferences[open] > summary::after { rotate: 180deg; }
.search-preferences[open] .search-preference-fields { margin-top: var(--space-4); }
.search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.search-actions .button { flex: 1 1 100%; }
.search-footnote { margin: 0; font-size: var(--step--1); }

/* Jalousie louvres: the body-type choices. Selecting one closes a set of
   sun-yellow slats down over it. */
.body-type-picker { min-inline-size: 0; margin: 0; padding: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--rule); }
.body-type-picker legend { font-size: 0.9375rem; font-weight: 650; }
.body-type-picker-help { margin: var(--space-1) 0 var(--space-3); color: var(--ink-quiet); font-size: var(--step--1); }
.body-type-options { display: flex; gap: var(--space-2); max-width: 100%; padding: 0.125rem 0.125rem var(--space-3); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; }
.body-type-option { flex: 0 0 9.5rem; min-width: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: 3.5rem auto auto; gap: var(--space-1); padding: var(--space-3); border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--limewash); color: var(--ink); cursor: pointer; scroll-snap-align: start; transition: border-color 160ms var(--ease-out); }
.body-type-option::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, var(--sun) 0 0.375rem, var(--sun-edge) 0.375rem 0.4375rem, var(--sun-tint) 0.4375rem 0.625rem); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out); }
.body-type-option input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.body-type-option-visual { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; }
.body-type-option img { display: block; inline-size: 100%; height: auto; max-height: 3.25rem; object-fit: contain; mix-blend-mode: multiply; }
.body-type-option strong { font-family: var(--font-display); font-stretch: var(--wide); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; }
.body-type-option small { color: var(--ink-quiet); font-size: var(--step--1); line-height: 1.3; }
.body-type-option:hover { border-color: var(--ink); }
.body-type-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.body-type-option:has(input:checked)::before { transform: scaleY(1); }
.body-type-option:has(input:checked) small { color: var(--ink); }
.body-type-option:has(input:checked) strong { justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--sun); }
.body-type-option:has(input:checked) .body-type-option-visual { background: var(--sun); border-radius: var(--radius); }
.body-type-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* In the listings rail the louvres stack as a two-column screen. */
.public-listing-search .body-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0.125rem; }
.public-listing-search .body-type-option { grid-template-rows: 3rem auto; padding: var(--space-2); }
.public-listing-search .body-type-option small { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.public-listing-search .body-type-picker-help { display: none; }

@media (max-width: 1080px) {
  .listings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .search-trip-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-preference-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-actions .button { flex: 0 1 auto; }
  .public-listing-search .body-type-options { display: flex; overflow-x: auto; padding: 0.125rem 0.125rem var(--space-3); }
  .public-listing-search .body-type-option { flex: 0 0 8.5rem; }
}
@media (max-width: 760px) {
  .search-trip-fields, .search-preference-fields { grid-template-columns: minmax(0, 1fr); }
  .listings-heading { margin-bottom: var(--space-5); }
  .public-listing-search { margin-inline: calc(-1 * var(--page-inline)); padding: var(--space-4) var(--page-inline) var(--space-5); border-radius: 0; }
  .search-actions .button { flex: 1 1 100%; }
}

/* Listing detail */
.listing-crumbs { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-bottom: var(--space-4); font-size: var(--step--1); }
.listing-crumbs .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.listing-detail { display: flex; flex-direction: column; gap: var(--space-6); }
.listing-detail > * { min-width: 0; }
.listing-title { margin-bottom: var(--space-4); max-width: 22ch; }
.listing-specs { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.listing-specs li { margin: 0 -1.5px -1.5px 0; padding: var(--space-1) var(--space-3); border: 1.5px solid var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.listing-specs .listing-specs-place { background: var(--ink); color: var(--limewash); }
.listing-gallery-list, .listing-review-list { list-style: none; margin: 0; padding: 0; }
.listing-gallery-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.listing-gallery-item { min-width: 0; }
.listing-gallery-item--primary { grid-column: 1 / -1; }
.listing-gallery-item figure { margin: 0; }
.listing-gallery-media { aspect-ratio: var(--photo-aspect); overflow: hidden; border-radius: var(--radius); background: var(--render); }
.listing-gallery-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.listing-gallery-item figcaption { margin-top: var(--space-2); color: var(--ink-quiet); font-size: var(--step--1); overflow-wrap: anywhere; }
.listing-gallery-empty { background: var(--render); display: grid; place-items: center; padding: var(--space-4); aspect-ratio: 16 / 9; border-radius: var(--radius); }
.listing-gallery-empty .listing-media-placeholder { min-block-size: 100%; }
.listing-gallery-empty .listing-media-placeholder-image { inline-size: min(48%, 18rem); max-block-size: 8rem; }
.listing-gallery-empty .listing-media-placeholder p { padding: var(--space-2) var(--space-4); font-size: var(--step-0); }
.listing-description { margin: 0 0 var(--space-5); font-size: var(--step-1); line-height: 1.55; }
.listing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.listing-fact { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.listing-fact dt { color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.listing-fact dd { margin: var(--space-1) 0 0; font-weight: 600; }
.listing-detail-conditions .section-heading, .listing-reviews .section-heading { margin: 0 0 var(--space-3); padding-top: var(--space-5); border-top: 1.5px solid var(--ink); font-size: var(--step-2); }
.listing-detail-conditions p { margin: 0; }

.listing-detail-trip { padding: var(--space-5); background: var(--limewash); border: 1.5px solid var(--ink); border-radius: var(--radius); }
.trip-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.trip-rate-figure { font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.trip-rate-unit { color: var(--ink-quiet); font-weight: 600; }
.trip-heading { margin: 0 0 var(--space-1); font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; }
.trip-note { margin: var(--space-2) 0; font-size: var(--step--1); }
.trip-form { gap: var(--space-4); margin-top: var(--space-4); }
.trip-form > .button, .trip-form > button { align-self: stretch; }
.trip-hours { font-size: var(--step--1); }
.trip-hours > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--wall-deep); }
.trip-hours dl.data-list { margin-block: var(--space-2); }
.listing-detail-estimate { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1.5px solid var(--ink); }
.listing-detail-estimate .money-breakdown { margin-block: var(--space-3); }
.listing-detail-estimate .money-breakdown + p { margin: 0 0 var(--space-2); font-size: var(--step--1); }
.listing-detail-estimate form .button, .listing-detail-estimate > .button { inline-size: 100%; margin-block: var(--space-2); }


.listing-reviews { overflow-wrap: anywhere; }
.listing-reviews.section-divider { margin-top: var(--space-7); padding-top: 0; border-top: 0; }
.listing-review-item { padding-block: var(--space-5); border-bottom: 1px solid var(--rule); }
.listing-reviews-more { margin-block: var(--space-5); }
.listing-review a, .listing-reviews-more a { display: inline-flex; align-items: center; min-height: 44px; }
.public-listing-detail-page > a.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); font-size: var(--step--1); }

@media (min-width: 1050px) {
  .listing-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); grid-template-areas: "identity trip" "media trip" "details trip" "conditions trip"; grid-template-rows: auto auto auto 1fr; column-gap: var(--space-7); row-gap: var(--space-6); align-items: start; }
  .listing-detail-identity { grid-area: identity; }
  .listing-detail-media { grid-area: media; }
  .listing-detail-details { grid-area: details; }
  .listing-detail-conditions { grid-area: conditions; }
  .listing-detail-trip { grid-area: trip; position: sticky; top: var(--space-4); }
  .public-listing-detail-page > .listing-reviews, .public-listing-detail-page > a.text-link { max-width: calc(100% - 25rem - var(--space-7)); }
}
/* Phones only: the price sits right under the photos and jumps to the trip panel. */
.listing-price-strip { display: none; }
@media (max-width: 1049px) {
  .listing-price-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); padding: var(--space-4) 0 0; border-top: 1.5px solid var(--ink); }
  .listing-price-strip-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; }
  .listing-price-strip-figure { font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
  .listing-price-strip-unit { color: var(--ink-quiet); font-weight: 600; }
  .listing-detail-trip .trip-rate { display: none; }
}
@media (max-width: 420px) { .listing-price-strip-action { inline-size: 100%; } }
@media (max-width: 600px) {
  .listing-gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-detail-trip { margin-inline: calc(-1 * var(--page-inline)); border-inline: 0; border-radius: 0; }
}
/* Phones: the car wall and the listing description step down with the page. */
@media (max-width: 640px) {
  .car-grid { row-gap: var(--space-6); }
  .listing-description { font-size: var(--step-0); }
}