/* Content pages: Articles, Corporate and Terms.

   Written entirely against the token layer, like kssk.css: no literal colour,
   type or spacing value belongs here. Structural and breakpoint rules for
   .kssk-promo-pair, .kssk-fields, .kssk-quote and .kssk-hide-sm already ship in
   tokens/responsive.css; this file adds only the visual styling those class
   names carry, and nothing that duplicates them.

   Loaded only on the three content pages (inc/assets.php). PageBanner,
   PromoCard, ArticleCard and ContactItem are used nowhere else, so nothing on
   the booking journey depends on this file.

   The system has exactly one shadow, on the car card. There is none here. */

/* === PageBanner ===
   One photograph, reused across all three pages, with the brand arc over it
   (readme.md > Imagery). The band keeps its height with no image, so an
   unfilled media slot reads as a plain heading rather than a hole. */

.kssk-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--kssk-banner-height, 320px);
  padding-inline: var(--page-gutter);
  background-color: var(--kssk-navy);
  background-image: var(--kssk-banner-image, none);
  background-size: cover;
  background-position: center;
  color: var(--text-inverse);
  overflow: hidden;
}

/* The decorative arc, and the scrim that keeps the title legible over a
   photograph whatever its exposure. Decorative only, so it never becomes a
   child element competing for the accessibility tree. */
.kssk-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.28);
  background-image: var(--kssk-banner-arc, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* No photograph: the flat brand colour, and no scrim to darken it. */
.kssk-banner--flat::after {
  background-color: transparent;
}

.kssk-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.kssk-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-9xl);
  line-height: var(--leading-69);
  color: var(--text-inverse);
}

/* === PromoCard ===
   Two tones so the pair reads as a pair. The action area is pinned to the
   bottom of the card, which is what lands both CTAs on one baseline when the
   two bodies differ in length (readme.md > Revisions section 5). */

.kssk-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius-card);
  background: var(--kssk-orange);
  color: var(--text-inverse);
  /* The artwork bleeds to the card edge below; this keeps the corner radius. */
  overflow: hidden;
}

.kssk-promo--amber {
  background: var(--kssk-orange-accent);
}

.kssk-promo__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 100%;
}

.kssk-promo__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-37);
  color: var(--text-inverse);
}

.kssk-promo__subline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-30);
  color: var(--text-inverse);
}

.kssk-promo__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-inverse);
}

/* The fixed action area: whatever the body does above it, the button sits on
   the card's bottom edge. */
.kssk-promo__cta {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
}

.kssk-promo__art {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* The illustration sits ON the card's bottom-right edge rather than
     floating inside the padding: the negative margins swallow the card
     padding on those two sides, and the card's overflow keeps the radius. */
  margin: 0 calc(-1 * var(--space-32)) calc(-1 * var(--space-32)) 0;
}

.kssk-promo__illus {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 240px;
  height: auto;
}

/* The illustration is decorative: on a phone the card keeps its copy and its
   action, and drops the artwork rather than shrinking both. */
@media (max-width: 767px) {
  .kssk-promo {
    grid-template-columns: minmax(0, 1fr);
  }

  .kssk-promo__art {
    display: none;
  }
}

/* === ArticleCard ===
   SQUARE CORNERS. Article and testimonial cards are the only zero-radius
   surfaces in the system. The whole card is not a link; the heading is. */

.kssk-article {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-none);
  background: var(--surface-page);
  /* The band behind these is white, so the shadow is the only thing that makes
     a card a card. The design system's own ArticleCard carries this on hover
     only; every other card in this theme carries it at rest and lifts on hover,
     and a row of three that appear on contact reads as a glitch rather than as
     a feature. Resting, like the rest. */
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out);
}

.kssk-article:hover { transform: var(--hover-lift); }

.kssk-article__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-subtle);
  overflow: hidden;
}

.kssk-article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kssk-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* Inset on every side. With padding only on top the copy sat flush to the
     card edge, which stopped it reading as a card at all: it became a picture
     with a caption under it. */
  padding: var(--space-21);
}

/* Body face, not display. An article title is a sentence to be read, not a
   section heading to be announced, and the display face at 28px shouted over
   the excerpt beneath it. */
.kssk-article__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-26);
  color: var(--text-primary);
}

.kssk-article__title a {
  color: inherit;
  text-decoration: none;
}

.kssk-article__title a:hover,
.kssk-article__title a:focus-visible {
  color: var(--kssk-orange);
  text-decoration: underline;
}

.kssk-article__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

/* The link the colour token was named after. --text-link has carried the
   comment "READ MORE link, as-built" since the palette was measured off the
   design, and until now nothing on the site rendered it. */
.kssk-article__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: none;
}

.kssk-article:hover .kssk-article__more { text-decoration: underline; }

/* The placeholder badge. These three posts are real, published and visible so
   the client can brief real copy against them; the badge says plainly that the
   body is an outline and not the finished article. */
.kssk-article__badge {
  align-self: flex-start;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--red-100);
  font-family: var(--font-body);
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--red-700);
}

/* === QuotationCalculator ===
   Inputs and estimate side by side; tokens/responsive.css stacks them below
   1024. Nothing here charges anything or reserves a vehicle. */

.kssk-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-32);
  align-items: start;
}

/* A grid item's automatic minimum is its min-content width. On a 360px phone
   the result card's floor was 273px inside a 264px column, so the card pushed
   out of the panel and lost its right margin entirely. */
.kssk-quote > * { min-width: 0; }
.kssk-quote__result { overflow-wrap: break-word; }

.kssk-quote__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.kssk-quote__calc {
  align-self: flex-start;
  min-height: 44px;
}

.kssk-quote__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
}

.kssk-quote__caveat,
.kssk-quote__problem {
  margin: 0;
}

.kssk-quote__ask {
  display: flex;
}

.kssk-quote__ask button {
  min-height: 44px;
}

.kssk-quote__request {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.kssk-quote__request-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-37);
  color: var(--text-primary);
}

.kssk-quote__request-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

.kssk-quote__request-validity {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-secondary);
}

.kssk-quote__request-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.kssk-quote__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-12);
}

.kssk-quote__actions a,
.kssk-quote__actions button {
  min-height: 44px;
}

/* The quotation document, offered on the confirmation state. The same link is
   in the customer's email, so this block is a convenience and never the only
   copy of it. */
.kssk-quote__sent {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.kssk-quote__sent-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-body);
}

/* The request form sits its actions right, under the form they submit. This
   one is a statement rather than a form footer, so it starts at the text
   edge. */
.kssk-quote__actions--sent {
  justify-content: flex-start;
}

/* The honeypot. Off-screen rather than display:none, because some autofill
   agents skip hidden fields entirely and the trap stops working. */
.kssk-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === ContactItem ===
   A glyph and a line of text. The sentence carries the meaning; a missing
   glyph costs nothing. */

.kssk-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-contact-item--dark {
  color: var(--text-body);
}

.kssk-contact-item__icon {
  flex: 0 0 auto;
  margin-top: var(--space-4);
  color: var(--kssk-orange);
}

/* === Corporate === */

.kssk-corporate__lede {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.kssk-corporate__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-body);
}

/* The lede's call to action sits in a text column, not under a centred
   heading, so it starts at the text edge and takes the paragraph's rhythm
   rather than the band's. */
.kssk-band__action--lede {
  justify-content: flex-start;
  margin-top: var(--space-32);
}

/* One photograph filling the column, cropped rather than distorted. It was a
   pair at half width and 220px tall; alone it can take the whole column, and
   the extra height stops it reading as a thumbnail beside the heading. */
.kssk-corporate__photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

.kssk-corporate__photo {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* A ticked list. The marker is drawn in CSS, not fetched from the icon set:
   that set is solid silhouettes and holds nothing for insurance, road tax or
   roadside assistance, and a name it does not have returns an empty string, so
   the lines would carry no marker at all. The same reasoning as the 18px
   square in kssk-booking.css, which reads as ticked without an icon.

   A list and not cards - boxing each line would give six short sentences the
   visual weight of six features. */
.kssk-ticks {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two columns where the band is wide enough, one when it is not. */
.kssk-ticks--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--space-32);
}

@media (max-width: 767px) {
  .kssk-ticks--cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* StepCard on a white band.

   The box's own surface is the page white, so on a white band it disappears
   and the row reads as four loose paragraphs with an orange disc under each.
   The homepage never hits this because its steps sit on the cream band. Here
   the band stays white - three cream bands in a row would merge the
   calculator, the steps and the FAQ into one long warm stretch - so the box
   takes the cream instead. Inverted, not bordered: the system has no card
   outline and no second shadow to spend. */
.kssk-band--white .kssk-step-card__box { background: var(--surface-cream); }

.kssk-ticks__item {
  position: relative;
  padding-left: var(--space-32);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-body);
}

/* Two borders on a rotated box: the cheapest honest tick, and it inherits the
   brand orange rather than approximating a black glyph with a filter. */
.kssk-ticks__item::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--kssk-orange);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* What the rate does not cover, and the registered-entity line. Quieter than
   body copy because neither is the argument, but both have to be findable. */
.kssk-corporate__note {
  margin: var(--space-24) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-muted);
}

/* FAQ. Built on details/summary, so the open and closed states are the
   browser's and the answers are in the document either way. */
.kssk-faq {
  /* .kssk-band__heading already sets the space beneath the heading. */
  margin-top: 0;
}

.kssk-faq__item {
  border-bottom: 1px solid var(--divider);
}

.kssk-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-24);
  color: var(--text-primary);
  list-style: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker, and every
   other engine through ::marker. Both have to go or the custom one doubles. */
.kssk-faq__question::-webkit-details-marker {
  display: none;
}

.kssk-faq__question::marker {
  content: '';
}

.kssk-faq__question:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* A plus that becomes a minus, drawn in CSS so it needs no icon request and
   stays aligned with the first line of a question that wraps. */
.kssk-faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.kssk-faq__marker::before,
.kssk-faq__marker::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--kssk-orange);
  transform: translateY(-50%);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.kssk-faq__marker::after {
  transform: translateY(-50%) rotate(90deg);
}

.kssk-faq__item[open] .kssk-faq__marker::after {
  opacity: 0;
}

.kssk-faq__answer {
  margin: 0;
  padding: 0 0 var(--space-16);
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  .kssk-faq__marker::before,
  .kssk-faq__marker::after {
    transition: none;
  }
}

.kssk-corporate__panel {
  padding: var(--space-32);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
}

@media (max-width: 479px) {
  /* The column is narrow here, so the same height would crop the photograph
     to a letterbox strip. */
  .kssk-corporate__photo {
    height: 240px;
  }
}

/* === Terms ===
   A long-form document with a sticky section rail. The rail is decorative
   navigation over content that is all present on the page, so it is dropped
   below tablet via .kssk-hide-sm rather than being restyled. */

.kssk-terms__layout {
  --kssk-split-cols: 260px minmax(0, 1fr);
}

/* Thirty-two sections make a rail taller than any viewport - measured at 2308px
   against 1000px - so a sticky rail without its own scroll can never reach its
   last dozen links. It scrolls inside itself, and the padding keeps the
   scrollbar off the words. */
.kssk-terms__nav {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  /* Tighter than the 12px this used at fourteen sections: at thirty-two, the
     gap is what pushes the list past the fold. */
  gap: var(--space-8);
  max-height: calc(100vh - 104px - var(--space-32));
  overflow-y: auto;
  padding-right: var(--space-8);
  overscroll-behavior: contain;
}

.kssk-terms__nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
  text-decoration: none;
}

.kssk-terms__nav a:hover,
.kssk-terms__nav a:focus-visible {
  color: var(--kssk-orange);
  text-decoration: underline;
}

/* The rail is only navigation while it sits BESIDE the document. Once the
   split stacks it becomes a 328px sticky slab floating over the text it links
   to - measured covering five paragraphs at 768px. The template's own note says
   nothing is lost by dropping it, so it drops where the split collapses rather
   than one breakpoint later. */
@media (max-width: 1023px) {
  .kssk-terms__nav { display: none; }
}

.kssk-terms__doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.kssk-terms__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-8xl);
  line-height: var(--leading-54);
  color: var(--text-body);
}

.kssk-terms__updated {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-muted);
}

.kssk-terms__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  /* Clears the sticky header when a rail link jumps to the section. */
  scroll-margin-top: 104px;
}

.kssk-terms__section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-37);
  color: var(--text-body);
}

.kssk-terms__section p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

/* Clause numbers hang in their own column rather than running into the
   sentence, so the eye can find 12.3 down the left edge without reading. The
   column is wide enough for 12.10 and the numbers are tabular, so every clause
   in the document starts on the same vertical line. */
.kssk-terms__clause {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
}

.kssk-terms__ref {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The definitions under Clause 1.1, and anything else that hangs beneath a
   clause without being one. Indented to the clause text, unnumbered. */
.kssk-terms__define {
  margin-left: 3.5rem;
}

/* The privacy policy renders editor content inside this same document, so a
   section has to carry sub-headings and lists that the Terms array never
   produces. Margins are zeroed against the section's own flex gap rather than
   added to it, and the lists keep list-item display - a flex container would
   blockify the items and take their bullets away. */
.kssk-terms__section h3 {
  margin: var(--space-12) 0 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-terms__section ul,
.kssk-terms__section ol {
  margin: 0;
  padding-left: var(--space-24);
}

.kssk-terms__section li {
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-terms__section li:last-child {
  margin-bottom: 0;
}

.kssk-terms__section h2 .kssk-terms__num {
  margin-right: var(--space-8);
  color: var(--text-muted);
}

/* The number sits in a fixed box rather than a grid column. It was a grid, and
   when the numbers came off the website the heading became the only grid item
   and landed in the 28px number column - every section name in the rail wrapped
   one word per line. An inline box costs nothing when the number is absent. */
.kssk-terms__navnum {
  display: inline-block;
  width: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* On a phone the hanging column costs more than it earns: 3.5rem of a 320px
   line is a tenth of the measure. Narrowed rather than dropped, because the
   numbers are the point of the document. */
@media (max-width: 639px) {
  .kssk-terms__clause { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .kssk-terms__define { margin-left: 2.5rem; }
}

/* The website carries no clause numbers - they belong to the agreement a client
   signs, not to the page a customer reads. With the number column gone the
   clauses are ordinary paragraphs, and the definitions under the first one need
   a mark of their own to still read as a nested list rather than as more prose:
   a hairline rule down their left edge, which costs nothing and says "these
   belong to the sentence above". */
.kssk-terms__section--plain .kssk-terms__clause {
  display: block;
}

.kssk-terms__section--plain .kssk-terms__define {
  margin-left: 0;
  padding-left: var(--space-16);
  border-left: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

@media (max-width: 639px) {
  .kssk-terms__section--plain .kssk-terms__define { margin-left: 0; }
}

/* Rebuilt calculator: the two addresses run full width under the field grid,
   and the services sit as a labelled group rather than loose checkboxes. */

.kssk-quote__address {
  grid-column: 1 / -1;
}

.kssk-quote__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  border: 0;
}

.kssk-quote__services-title {
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-22);
  color: var(--text-body);
}

/* The system used to have exactly one checkbox, styled in kssk-booking.css.
   These are the second set, and they were rendering as unstyled 13px browser
   defaults beside controls that are all on the design system. accent-color
   brands the native control without replacing it, so the label stays the
   44px target it already was. */
.kssk-quote__service input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--kssk-orange);
  cursor: pointer;
}

.kssk-quote__service {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
  cursor: pointer;
}

.kssk-quote__service-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-quote__service-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-muted);
}

/* Tick on the left, how many on the right. The row wraps rather than squeezing:
   "Additional driver quoted separately" beside a number field does not fit the
   form column on a phone, and a count that has drifted away from its own label
   is worse than one on the line below it. */
.kssk-quote__service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.kssk-quote__service-row .kssk-quote__service { flex: 1 1 auto; min-width: 0; }

.kssk-quote__service-qty {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
}

.kssk-quote__service-qtylabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  color: var(--text-secondary);
}

/* The same recess as every other input on the form. 4.5ch holds three digits
   and the browser's own spinner without the field growing a scrollbar. */
.kssk-quote__service-count {
  width: 4.5ch;
  min-height: 44px;
  padding: 0 var(--space-8);
  box-sizing: content-box;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-input);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-primary);
  text-align: center;
}

.kssk-quote__service-count:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Said where the count would be, so the two kinds of row line up down the
   right-hand edge instead of one being visibly short of the other. */
.kssk-quote__service-each {
  flex: none;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  color: var(--text-muted);
}

.kssk-quote__result-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* 28px of display face is what set the card's min-content floor. */
  font-size: clamp(var(--text-xl), 5.6vw, var(--text-4xl));
  line-height: var(--leading-37);
  color: var(--text-body);
}

.kssk-quote__empty {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

.kssk-quote__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding-left: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-secondary);
}

/* The duration is derived, so it reads as a value rather than a control. */
#kssk-quote-duration {
  cursor: default;
}

/* === Quotation calculator: vehicle lines ===
   One row per vehicle, added and removed by their own controls. The row is a
   grid rather than a flex line so the car, the quantity and the remove control
   keep their columns however long a vehicle name runs. */

.kssk-quote__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  border: 0;
}

.kssk-quote__lines-title {
  margin: 0 0 var(--space-4);
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-note);
  line-height: var(--leading-18);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.kssk-quote__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 44px;
  align-items: end;
  gap: var(--space-12);
}

/* The remove control sits on the row's baseline with the inputs, and keeps the
   44px tap target the system requires everywhere. */
.kssk-quote__line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.kssk-quote__line-remove:hover {
  border-color: var(--kssk-red);
  color: var(--kssk-red);
}

.kssk-quote__line-remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Add is a quiet control, not a second CTA: the page already has Calculate and
   Request quotation, and a third orange button would compete with both. */
.kssk-quote__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--space-16);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.kssk-quote__add:hover {
  border-color: var(--kssk-orange);
  color: var(--kssk-orange);
}

.kssk-quote__add:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Below 768 the quantity and the remove control share a line under the car,
   because three columns in 390px leaves nothing legible. */
@media (max-width: 767px) {
  .kssk-quote__line {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .kssk-quote__line-car {
    grid-column: 1 / -1;
  }
}