/* LP Autos on top of the Star Car stylesheet (site.css, unchanged).
   Only the brand changes: the accent is the orange of the logo (#FD6407), text stays near-black like the "LP".
   Everything else (header, cards, filters, car page, footer) is the Star Car system as it is. */
:root{
  --gold:#F05A05; --gold-2:#D24C02; --gold-ink:#C2410C; --gold-soft:#FFF0E6;
  --hot:#F05A05; --hot-soft:#FFF0E6; --hanko:#F05A05; --focus:#F05A05;
  --ink:#141416;
}

/* logo: the real LP Autos file (black and orange), a white "LP" version in the dark footer */
.brand img{height:50px;width:auto}
.lp-ft-logo{height:76px;width:auto;margin-bottom:22px}

/* WhatsApp and phone in the header: label and number on wide screens, the icons only below */
.mh-call,.mh-wa{gap:8px;margin-left:6px;white-space:nowrap}
.mh-call .ico,.mh-wa .ico{width:16px;height:16px}
.mh-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.mh-wa:hover{background:#1DA851;border-color:#1DA851;color:#fff}
@media (max-width:1240px){.mh-call span,.mh-wa span{display:none}.mh-call,.mh-wa{width:40px;padding:0;justify-content:center}}
/* phones and tablets: menu and favourites on the left, logo in the middle, WhatsApp and phone on the right */
@media (max-width:980px){
  .masthead .mh-fav{grid-row:1;grid-column:2;justify-self:center}
  .masthead .mh-wa,.masthead .mh-call{grid-row:1;justify-self:end;width:36px;height:36px;margin:0}
  .masthead .mh-wa{grid-column:4}
  .masthead .mh-call{grid-column:5}
}

/* home: Star Car's welcome card (warm gradient), without the search: the promise and two ways to act.
   Where Star Car has Mount Fuji in the gradient, LP has the arcs and the car of its own logo (assets/emblem.png,
   cut out of the client's file, not redrawn), faint, bottom right, used as a mask so it takes the brand orange. */
.hero2{background:linear-gradient(180deg,#FFF3EA 0%,#FBF6F2 55%,#F7F5F3 100%);padding:64px 32px 60px;text-align:center}
.hero2::after{display:none}
.hero2>*{position:relative;z-index:1}
.lp-hero::before{content:"";position:absolute;z-index:0;right:3%;bottom:-5%;width:min(36%,460px);aspect-ratio:671/477;background:var(--gold);opacity:.09;-webkit-mask:url(emblem.png) center/contain no-repeat;mask:url(emblem.png) center/contain no-repeat;pointer-events:none}
.hero2 h1 strong{color:var(--gold)}
.lp-lead{margin:18px auto 0;max-width:680px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.lp-hero-a{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.lp-hero-a .btn-line{background:#fff}
.lp-hero-r{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin:22px auto 0;font-size:15px;color:var(--muted)}
.lp-hero-r b{color:var(--ink);font-weight:600}
.lp-hero-r:hover{color:var(--ink)}
@media (max-width:640px){
  .hero2.lp-hero{padding:28px 18px 26px}
  .lp-hero::before{width:68%;left:auto;top:auto;right:2%;bottom:-3%;font-size:0}
  .lp-hero h1{order:0}
  .lp-lead{font-size:16px;margin-top:12px}
  .lp-hero-a{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  .lp-hero-r{margin-top:16px;font-size:14px}
}

/* before the sale: three points in one sheet, each proved by a car in stock */
.lp-why{padding-block:72px}
.lp-why-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.lp-why-c{display:flex;flex-direction:column;gap:16px;padding:28px}
.lp-why-c>div{display:grid;gap:8px}
.lp-why-c+.lp-why-c{border-left:1px solid var(--line)}
.lp-why-i{width:44px;height:44px;flex:none;border-radius:12px;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center}
.lp-why-i .ico{width:22px;height:22px}
.lp-why-c h3{margin:0;font-size:19px}
.lp-why-c p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.lp-why-c .link{margin-top:auto;padding-top:6px;align-self:flex-start}
@media (max-width:900px){
  .lp-why{padding-block:48px}
  .lp-why-g{grid-template-columns:1fr}
  .lp-why-c{padding:22px 20px}
  .lp-why-c+.lp-why-c{border-left:0;border-top:1px solid var(--line)}
}

/* the rest of the garage: atelier, tyres, trade-in */
.lp-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-svc-c{display:flex;align-items:flex-start;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);transition:border-color .15s}
.lp-svc-c:hover{border-color:var(--ink)}
.lp-svc-c h3{margin:0 0 4px;font-size:18px}
.lp-svc-c p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:900px){.lp-svc{grid-template-columns:1fr}.lp-svc-c{padding:20px}}

/* phone menu: calling the garage in its orange, WhatsApp in green with a white logo */
.mnav .lp-mnav-call{background:var(--gold)}
.mnav .lp-mnav-call:hover{background:var(--gold-2)}

/* garage block */
.cta2-t .lp-open{margin-top:14px}
/* map blocks: address with its pin, open now, then the hours as a short table (not a sentence) */
.lp-visit-i{display:grid;gap:14px;justify-items:start;margin-top:14px}
.cta2 .lp-addr{display:flex;align-items:flex-start;gap:10px;margin:0;max-width:none;font-size:16px;line-height:1.5;color:var(--ink)}
.lp-addr .ico{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold)}
.lp-visit-i .lp-open{margin:0}
.lp-visit-i .lp-hours{width:100%;max-width:380px;font-size:14.5px}

/* car page gallery: the logo watermark sits above the photo counter instead of touching it */
.gal .main.wm::before{bottom:64px;right:16px;width:18%}

/* warranty badge on every card, beside the price (same green chip as on the car page) */
.car .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lp-war{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:var(--good-soft);color:var(--good);font:600 13px var(--f);white-space:nowrap}
.lp-war .ico{width:15px;height:15px;flex:none}
.lp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* reviews: the rating under the title, then the buyers moving on their own (pauses under the mouse or a finger) */
.lp-rate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:15px;color:var(--muted)}
.lp-rate b{color:var(--ink);font-weight:600}
.lp-st{display:flex;gap:2px;color:#F5A524}
.lp-st svg{width:17px;height:17px;fill:currentColor;stroke:none;display:block}
.lp-st .off{color:#D4D4D8}
/* reviews: a swipeable rail aligned on the page, one review at a time (the script moves it on by itself) */
.lp-rv-rail{display:grid;grid-auto-flow:column;grid-auto-columns:340px;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px max(24px,calc((100vw - var(--wrap))/2 + 24px)) 10px;scroll-padding-inline:max(24px,calc((100vw - var(--wrap))/2 + 24px))}
.lp-rv-rail::-webkit-scrollbar{display:none}
.lp-rv-rail:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.lp-rv{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.lp-rv-t{flex:1;margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.lp-rv:hover{border-color:var(--line-2)}
.lp-rv-t b{color:var(--ink);font-weight:600}
.lp-rv-h{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.lp-av{width:38px;height:38px;flex:none;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);font:700 15px/1 var(--f-d);display:flex;align-items:center;justify-content:center}
.lp-rv-h b{display:block;font-size:14.5px;line-height:1.3;color:var(--ink)}
.lp-rv-h small{display:block;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.lp-rv-rail{grid-auto-columns:84%;gap:12px;padding-inline:16px;scroll-padding-inline:16px}.lp-rv{padding:18px;gap:12px}.lp-rv-t{-webkit-line-clamp:4}}

/* open now / closed, in Paris time */
.lp-open{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2)}
.lp-open i{width:8px;height:8px;border-radius:99px;background:#A1A1AA;flex:none}
.lp-open.on i{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.lp-hours{margin:0;display:grid;gap:4px;font-size:14px}
.lp-hours div{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border-bottom:1px solid var(--line)}
.lp-hours div:last-child{border-bottom:0}
.lp-hours dt{color:var(--muted)}
.lp-hours dd{margin:0;font-variant-numeric:tabular-nums}
.lp-hours .today dt,.lp-hours .today dd{color:var(--ink);font-weight:600}

/* forms (atelier, reprise): Star Car fields */
textarea.inp{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.lp-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lp-form .full{grid-column:1/-1}
.lp-form .fl{margin-bottom:6px}
.lp-chk{display:flex;flex-wrap:wrap;gap:8px}
.lp-chk label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.lp-chk input{accent-color:var(--gold);margin:0}
.lp-chk label:has(input:checked){border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
@media (max-width:720px){.lp-form{grid-template-columns:1fr}}
.lp-card{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.lp-card h2{font-size:22px;margin-bottom:18px}
.lp-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.lp-send small{color:var(--muted);font-size:13.5px}
.lp-2col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.lp-side{display:grid;gap:16px}
@media (max-width:900px){.lp-2col{grid-template-columns:1fr}}
@media (max-width:720px){.lp-card{padding:20px}}

/* car page: the warranty next to the price */
.pr .lp-war-chip{display:inline-flex;align-items:center;gap:6px;background:var(--good-soft);color:var(--good);border-color:transparent;font-weight:600}
.pr .lp-war-chip .ico{width:15px;height:15px;flex:none}

/* ---------- phones: a tighter home, so each section follows the previous one without a long scroll ---------- */
@media (max-width:640px){
  main .sec{padding-block:40px}
  main .sec.tight{padding-block:32px}
  main .lp-why{padding-block:32px 36px}
  .sh{margin-bottom:16px}
  /* before the sale: three rows, icon on the left, no box */
  .lp-why-g{border:0;border-radius:0;background:none}
  .lp-why-c{flex-direction:row;align-items:flex-start;gap:14px;padding:14px 0}
  .lp-why-c+.lp-why-c{border-top:1px solid var(--line)}
  .lp-why-i{width:38px;height:38px;border-radius:10px}
  .lp-why-i .ico{width:19px;height:19px}
  .lp-why-c>div{gap:4px}
  .lp-why-c h3{font-size:16.5px}
  .lp-why-c p{font-size:14.5px;line-height:1.5}
  /* atelier, tyres, trade-in: tight rows */
  .lp-svc{gap:10px}
  .lp-svc-c{position:relative;padding:14px 46px 14px 16px;gap:12px;align-items:center}
  .lp-svc-c h3{margin:0;font-size:16.5px}
  .lp-svc-c p{margin:2px 0 0;font-size:14px}
  /* the whole row is the link: only its arrow stays, on the right */
  .lp-svc-c .link{position:absolute;right:16px;top:50%;translate:0 -50%;font-size:0;gap:0}
  .lp-svc-c .link .ico{width:18px;height:18px}
  /* the garage block: less padding, a shorter map */
  .cta2-t{padding:22px 18px 24px}
  .cta2-map{min-height:200px}
}