/* The inventory car card (public/stockcard.js), shared by the homepage's In stock now and the vehicle page's Nearby in
       the lineup (Anne, 2026-10-20), so the two never drift. */
    /* In stock now (Anne, 2026-09-29): where the Additional Specials tiles were. Ad Package 2's paid spots come first, each a
       car in stock its store picked, marked "Sponsored · <its body type>", then the visitor's market's other cars in stock,
       most recently listed first. Porsche-tight (Anne, 2026-09-29: "make the inventory tighter like this and show the
       finance or lease payment"): the Porsche demo's New arrivals card in this site's tokens, keeping today's cropped
       photo: the title in a plain weight, MSRP in bold, the fee line, the finance payment large with its terms, "or", the
       lease payment large with its terms, the chips at the foot; one tight rhythm, 1 to 3px inside a group and 6px
       between groups. Each card's five parts (photo, label line, title, money, chips) sit on rows shared with the other
       cards in its row (subgrid), so titles, prices and chips line up whether or not a card has a "Sponsored" line or a
       second payment; the title link covers the card, and the savings gate and the asterisks sit above it; three across on
       a desktop, and below 900px the cards swipe in one row, as the offers above do. The row's edges are the section's
       side gutters (.inset-wrap), at every width. */
    /* Four across on a desktop, narrower like /shop's cards (Anne, 2026-10-22), two across from 1007px down, then the swipe row. */
    .stock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; margin-bottom: 6px; }
    @media (max-width: 1007px) and (min-width: 901px) { .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .stock-card { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-width: 0; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
    .stock-card > :not(.sc-photo) { min-width: 0; padding-left: 14px; padding-right: 14px; }
    @supports not (grid-template-rows: subgrid) { .stock-card { display: flex; flex-direction: column; } .stock-card > :last-child { margin-top: auto; } }
    .stock-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
    .sc-link { color: inherit; text-decoration: none; }
    .sc-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
    .sc-link:focus-visible { outline: none; }
    .sc-link:focus-visible::after { outline: 2px solid var(--fg); outline-offset: -3px; }
    .stock-card .srp-gated, .stock-card .fn-ast { position: relative; z-index: 2; }
    /* Feed photos are 4:3, with the store's black banner across the top 9.6% and the bottom 9.4% (scripts/clean-photos.py),
       which can name the store. The photo box is 2:1 at every width with the photo centered, so the crop takes 16.7% off the
       top and the bottom: past both banners, with room left for a tall SUV. */
    .sc-photo { position: relative; aspect-ratio: 2 / 1; background: var(--bg-2); overflow: hidden; }
    .sc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transition: transform .35s ease; }
    .stock-card:hover .sc-photo img { transform: scale(1.03); }
    .sc-photo .ph-tile { position: absolute; inset: 0; }
    .sc-cond { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-glass); color: var(--fg); font-size: 9.5px; font-weight: 500; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; }
    .sc-top { padding-top: 10px; }
    .sc-loaner { font-size: 12.5px; line-height: 1.4; padding-top: 3px; }
    .sc-tag { font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
    .sc-title { margin: 0; padding-top: 1px; font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 1.25; letter-spacing: .005em; }
    .sc-title .nw, .sc-terms .sc-seg { white-space: nowrap; }
    .sc-money { display: flex; flex-direction: column; padding-top: 3px; }
    .sc-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 13.5px; line-height: 1.4; }
    .sc-prices .sc-orig { color: var(--dim); text-decoration: line-through; font-size: 12.5px; }
    .sc-prices .sc-sale { font-weight: 600; }
    .sc-prices .sc-addm { flex-basis: 100%; color: var(--dim); font-size: 12px; }
    .sc-prices .srp-save.sheen-text { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
    /* The members' savings gate (member.js savingsLine), as a small pill beside MSRP instead of /shop's full-width bar. */
    .sc-prices .srp-save.srp-gated { display: inline-flex; width: auto; gap: 8px; margin: 0; padding: 1px 9px; font-size: 10px; letter-spacing: .08em; }
    .sc-prices .srp-gated .sheen-text, .sc-prices .srp-gated .mem-login { font-size: 10px; letter-spacing: .08em; }
    .sc-fee { margin-top: 1px; color: var(--dim); font-size: 10.5px; line-height: 1.35; }
    .sc-pay { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
    .sc-pay .pay { font-family: var(--display); font-weight: 300; font-size: 24px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .sc-pay .permo { color: var(--dim); font-size: 12px; }
    .sc-pay.pending .permo { color: var(--fg); font-size: 13px; }
    .sc-terms { margin-top: 1px; color: var(--dim); font-size: 11px; line-height: 1.4; }
    @media (max-width: 340px) { .sc-terms .sc-br { display: none; } }
    .sc-or { margin: 4px 0 3px; color: var(--dim); font-family: var(--display); font-style: italic; font-size: 13.5px; line-height: 1; }
    .sc-or + .sc-pay { margin-top: 0; }
    /* The second payment a little smaller than the first, as /shop's cards and the dealer sites' (Anne, 2026-10-03). */
    .sc-or + .sc-pay .pay { font-size: 20px; }
    .sc-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding-top: 7px; padding-bottom: 11px; }
    .sc-chips:empty { padding-top: 0; }
    .sc-chips span { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 9.5px; font-weight: 500; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
    .stock-card .soon-wrap { display: block; position: relative; margin-top: 4px; }
    .stock-card .soon-blur { display: block; filter: blur(7px); opacity: .5; }
    .stock-card .soon-over { justify-content: flex-start; font-size: 12px; letter-spacing: .18em; }
    /* A held paid spot's tile: a plain outline of its body type (review, 2026-09-29), never a car's photo or name. */
    .sc-photo .soon-shape { width: 58%; max-width: 240px; height: auto; fill: currentColor; color: var(--dim); opacity: .22; }
    @media (max-width: 1100px) {
      /* The signed-out savings gate keeps to the MSRP line on a narrower card, a six-figure MSRP included (review,
         2026-09-29): closer letters, a smaller gap. */
      .sc-prices { column-gap: 6px; }
      .sc-prices .srp-save.srp-gated { gap: 5px; padding: 1px 6px; letter-spacing: .03em; }
      .sc-prices .srp-gated .sheen-text, .sc-prices .srp-gated .mem-login { letter-spacing: .03em; }
    }
    @media (max-width: 1007px) {
      /* Three cards in the column's 24px gutters: the gate's letters set close, so a six-figure MSRP keeps it on its line
         down to about 950px (review, 2026-09-29). */
      .sc-prices { column-gap: 5px; }
      .sc-prices .srp-save.srp-gated { gap: 4px; padding: 1px 5px; letter-spacing: 0; }
      .sc-prices .srp-gated .sheen-text, .sc-prices .srp-gated .mem-login { letter-spacing: 0; }
    }
    @media (max-width: 900px) {
      /* The swipe row: every card as tall as the tallest, each laid out on its own (shared rows would give every card the
         tallest title and terms of all nine), its chips at the bottom. It starts on the column's edge and runs to the
         screen's (review, 2026-09-29), as This Month's Specials' row does, so the next card is cut by the screen, never by a
         box: the row takes the gutters back as padding, and a card snaps to the column's edge. */
      .stock-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 14px; }
      .inset-wrap > .stock-grid { margin-left: calc(-1 * var(--inset-pad)); margin-right: calc(-1 * var(--inset-pad)); padding-left: var(--inset-pad); padding-right: var(--inset-pad); scroll-padding-inline: var(--inset-pad); }
      .stock-grid::-webkit-scrollbar { display: none; }
      .stock-card { display: flex; flex-direction: column; grid-row: auto; margin-bottom: 0; scroll-snap-align: start; }
      .stock-card > :last-child { margin-top: auto; }
    }
    @media (max-width: 640px) {
      /* Inside the phone's 16px gutters a card takes 86% of the row, so at 390 it is as wide as before (the savings gate
         stays on a six-figure MSRP's line) and the next card shows at the screen's edge. */
      .stock-grid { grid-auto-columns: 86%; column-gap: 10px; margin-bottom: 12px; }
      .sc-title { font-size: 14.5px; }
      .sc-pay .pay { font-size: 22px; }
    }

/* Every card one set of rows, as /shop's (Anne, 2026-10-21: "clean and uniform"): the name on one line; View Pricing and
   an open car's "Save $X" one box, one size, in the Concierge button's illuminating edge, the reveals left under it; the
   chips on one line (one that does not fit is left off). */
.stock-card .sc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-card .srp-open { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; width: 100%; min-height: 54px; margin: 4px 0 6px; }
.stock-card .srp-open .mem-open, .stock-card .srp-savebox { box-sizing: border-box; height: 32px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 10px;
  font-size: 13px; border: 1px solid transparent; border-radius: 4px; }
/* View Savings wears the site's lit edge (styles.css; Anne, 2026-10-23: the outline, no glow behind). */
.stock-card .srp-open .mem-open { background: var(--panel); }
.stock-card .srp-savebox { background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--sheen-edge) border-box; background-size: 100% 100%, 320% 100%; animation: bbSheen 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .stock-card .srp-savebox { animation: none; } }
.stock-card .srp-open .mem-left { display: block; margin: 0 !important; height: 22px; line-height: 22px; text-align: center; font-size: 11.5px !important; }
.stock-card .srp-savebox { flex-basis: 100%; width: 100%; margin: 4px 0 28px; }   /* the room a locked card's reveals line takes */
.stock-card .srp-savebox .srp-save.sheen-text { font-size: 13px; font-weight: 600; letter-spacing: .08em; line-height: 1; }
.stock-card .sc-chips { padding-bottom: 0; margin-bottom: 11px; max-height: 28px; overflow: hidden; }   /* 7px above + one row */
.stock-card .sc-chips span { white-space: nowrap; }
.stock-card .srp-savebox.sc-spacer { visibility: hidden; }