/* Arden Motors — mobile optimisations. Applies ≤760px only; desktop is untouched. */

/* Global: strip the native <select> chrome (thin caret on iOS, inconsistent
   arrows across Chrome/Safari/Firefox) and paint a clean chevron via inline
   SVG. Also force the brand text colour — iOS Safari otherwise renders
   <select> values in its default system blue, which looks wrong against
   our light-cream / white form backgrounds. Applies on all viewports. */
select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  color:#16211B !important;
  -webkit-text-fill-color:#16211B !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2368756C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:13px 13px !important;
  padding-right:36px !important;
}


/* --- Universal fix: image-slot is a design-tool component that opens a
   file picker on click. Kill all pointer interaction so customers don't
   trigger the upload dialog. Real photos are still displayed by the
   component; we just block clicks / drops. */
image-slot {
  pointer-events: none !important;
  cursor: default !important;
}
image-slot * {
  pointer-events: none !important;
}

/* Mobile-only elements (hamburger + overlay menu) — injected on every
   page by mobile-header.js. Hidden on desktop; the mobile @media block
   below shows them with !important. */
#arden-mobile-menu-btn,
#arden-mobile-menu{display:none}


@media (max-width: 760px){
  html{-webkit-text-size-adjust:100%;overflow-x:hidden}
  body{overflow-x:hidden;max-width:100vw}

  /* --- Typography ------------------------------------------------ */
  h1{font-size:31px !important;line-height:1.15 !important}
  h2{font-size:24px !important;line-height:1.2 !important}
  h3{font-size:19px !important}

  /* Home hero — headline sized so "Meticulously prepared" fits on one line
     on 360-390px viewports; kicker + subline tightened to remove the big
     vertical gaps the desktop layout leaves behind. */
  #arden-hero-headline{
    font-size:30px !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    max-width:100% !important;
  }
  #arden-hero-subline{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:100% !important;
    margin:14px auto 24px !important;
  }
  /* Eyebrow "QUALITY · WARRANTED · TRUSTED" */
  .m-hero > div[style*="letter-spacing:.18em"]{
    font-size:10.5px !important;
    letter-spacing:.14em !important;
    margin-bottom:14px !important;
  }
  /* CTAs — stack full-width so they don't sit awkwardly side-by-side */
  .m-hero > div[style*="gap:14px"][style*="justify-content:center"]{
    display:flex !important;
    gap:10px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
  }
  .m-hero > div[style*="gap:14px"][style*="justify-content:center"] > a{
    width:100% !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:14px 22px !important;
    font-size:14.5px !important;
  }
  /* Trust pills row — tighter chips + smaller gap so they wrap on 2 rows
     cleanly and don't crash into the floating WhatsApp/Ardie buttons. */
  .m-hero > div[style*="margin-top:44px"]{
    margin-top:22px !important;
    gap:6px !important;
  }
  .trust-pill{
    font-size:10.5px !important;
    padding:4px 11px 4px 4px !important;
    gap:6px !important;
  }
  .trust-pill-icon{
    width:22px !important;
    height:22px !important;
  }
  .trust-pill-icon svg{
    width:11px !important;
    height:11px !important;
  }

  /* --- Layout utilities (class-based) --------------------------- */
  .m-wrap{padding-left:20px !important;padding-right:20px !important}
  .m-1{grid-template-columns:1fr !important}
  .m-2{grid-template-columns:1fr 1fr !important}
  .m-2 div{overflow-wrap:anywhere}
  .m-g32{gap:32px !important}
  /* Stats card (About page "120+ / 4.9★ / 100% / 6 mo") — desktop uses
     a 4-column row with vertical dividers. On mobile we want a compact
     2×2 grid: the awkward "one stat per row" stack is gone and the
     vertical border-lefts (which look terrible when items stack) are
     stripped. */
  .m-stats{
    grid-template-columns:1fr 1fr !important;
    gap:22px 12px !important;
    padding:26px 20px !important;
  }
  .m-stats>div{
    border-left:none !important;
    padding:6px 4px !important;
    position:relative !important;
  }
  /* Faint hairline dividers between the 2×2 cells so it still feels
     like a stats card rather than four floating numbers. */
  .m-stats>div:nth-child(even){
    border-left:1px solid rgba(255,255,255,.08) !important;
  }
  .m-stats>div:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.08) !important;
    padding-top:20px !important;
  }
  /* 40px numbers are too heavy for a 2-up mobile grid — bring them down
     to feel proportional against the small label underneath. */
  .m-stats>div>div:first-child{
    font-size:30px !important;
    line-height:1 !important;
  }
  .m-stats>div>div:nth-child(2){
    font-size:12px !important;
    margin-top:6px !important;
  }
  .m-static{position:static !important}
  .m-banner{padding:28px 20px !important}
  .m-banner>div{min-width:0 !important}
  .m-banner input{width:100% !important;flex:1 1 100%}
  .m-banner button{width:100%}
  /* Pill-shaped budget preset chips inside the "Find your car by monthly
     budget" banner: .m-banner button{width:100%} above is intended for the
     "Join Stock Alerts" submit, but it also hits these chips and stacks
     them into a tall column. Force them into a 2-up compact grid. */
  .m-banner button[style*="border-radius:999px"]{
    width:auto !important;
    flex:1 1 calc(50% - 4px) !important;
    min-width:0 !important;
    padding:10px 12px !important;
    font-size:11px !important;
    letter-spacing:.05em !important;
    white-space:nowrap !important;
  }
  /* Monthly-budget row (label left, "£300 / month" right) — keep it on
     one line and give the value a touch more breathing room. */
  .m-banner div[style*="justify-content:space-between"][style*="align-items:baseline"] > div:last-child{
    font-size:24px !important;
  }
  /* "3 cars in stock…" + Search Cars button row: neat stack with the
     button full-width so it matches the visual weight of the slider. */
  .m-banner div[style*="justify-content:space-between"][style*="margin-top:16px"]{
    gap:12px !important;
  }
  .m-banner div[style*="justify-content:space-between"][style*="margin-top:16px"] > a{
    width:100% !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .m-hero{padding:44px 20px 56px !important}
  /* Deep-hero pages (About, Available Cars, Finance, Contact, MOT Check,
     How It Works) — desktop pads to ~130px+ each side to feel like a
     landing frame; on mobile that leaves a big empty rectangle above and
     below the copy. Tighten to a punchier ratio, and let the elements
     below (filter card, feature strip, etc.) still overlap the ~44-48px
     of bottom padding cleanly. */
  .m-hero-deep{padding:40px 20px 68px !important}
  /* Bigger, tighter title so the eyebrow → title → subtext feels more
     magazine-y instead of "generic mobile CMS". Overrides the global
     h1{font-size:31px} above. */
  .m-hero-deep h1{
    font-size:34px !important;
    line-height:1.08 !important;
    letter-spacing:-0.025em !important;
  }
  /* Eyebrow row (gold hairline + kicker) — tighten spacing */
  .m-hero-deep > div[style*="align-items:center"][style*="gap:14px"]{
    margin-bottom:16px !important;
    gap:12px !important;
  }
  .m-hero-deep > div[style*="align-items:center"][style*="gap:14px"] > div:first-child{
    width:40px !important;
  }
  .m-hero-deep > div[style*="align-items:center"][style*="gap:14px"] > div:last-child{
    font-size:10.5px !important;
    letter-spacing:.20em !important;
  }
  /* Description paragraph directly under the h1 */
  .m-hero-deep > p{
    font-size:14px !important;
    line-height:1.6 !important;
    margin-top:18px !important;
  }
  /* Trust chips row underneath */
  .m-hero-deep > div[style*="margin-top:36px"]{
    margin-top:20px !important;
    gap:6px !important;
  }
  .m-crumbs{flex-wrap:wrap}
  .m-filter{grid-template-columns:1fr 1fr !important;padding:18px 16px !important;gap:12px !important;box-sizing:border-box !important;width:100% !important;max-width:100% !important}
  .m-filter>div:last-child{grid-column:1 / -1}
  .m-filter select{width:100% !important;min-width:0 !important;box-sizing:border-box !important}
  .m-filter-wrap{padding:0 16px !important;margin-top:-40px !important;box-sizing:border-box !important;width:100% !important;max-width:100% !important}
  .m-timeline{grid-template-columns:52px 1fr !important;gap:16px !important}
  .m-fab{right:16px !important;bottom:16px !important}
  .m-cd-side{grid-column:auto !important;grid-row:auto !important}

  /* Header: bigger logo, green phone square, outlined hamburger square.
     Inline nav is hidden — the full menu lives in the JS-injected overlay
     (see mobile-header.js). */
  .site-header>div{
    flex-wrap:nowrap !important;
    height:auto !important;
    padding:12px 16px !important;
    gap:10px !important;
    align-items:center !important;
  }
  .site-header>div>a:first-child{flex:0 0 auto}
  .site-header>div>a:first-child img{height:44px !important;width:auto !important;display:block !important}

  /* Inline desktop nav — replaced by the hamburger + overlay on mobile */
  .site-header nav{display:none !important}

  /* Phone: icon-only green rounded square */
  .site-header>div>a:last-of-type{
    margin-left:auto !important;
    width:46px !important;
    height:46px !important;
    padding:0 !important;
    border-radius:12px !important;
    background:#175235 !important;
    gap:0 !important;
    font-size:0 !important;
    line-height:1 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .site-header>div>a:last-of-type svg{
    width:20px !important;
    height:20px !important;
    display:block !important;
  }

  /* Hamburger: outlined rounded square, right of the phone button */
  #arden-mobile-menu-btn{
    display:flex !important;
    width:46px !important;
    height:46px !important;
    padding:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.22) !important;
    color:#fff !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    flex:0 0 auto !important;
    transition:background .15s ease,border-color .15s ease !important;
  }
  #arden-mobile-menu-btn:active{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.4) !important;
  }

  /* Full-screen menu overlay (structure injected by mobile-header.js) */
  #arden-mobile-menu{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    background:radial-gradient(ellipse at 100% 0%,rgba(213,160,33,.10),transparent 55%),#0A0F0C !important;
    color:#fff !important;
    flex-direction:column !important;
    padding:16px 22px 24px !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-8px) !important;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s !important;
    overflow-y:auto !important;
    font-family:'Instrument Sans',sans-serif !important;
  }
  #arden-mobile-menu.open{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:opacity .22s ease,transform .22s ease,visibility 0s !important;
  }
  #arden-mobile-menu-close{
    align-self:flex-end !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    padding:0 !important;
    margin-bottom:6px !important;
  }
  #arden-mobile-menu nav{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    margin-top:4px !important;
  }
  #arden-mobile-menu .arden-menu-link{
    display:flex !important;
    align-items:baseline !important;
    gap:18px !important;
    padding:10px 4px !important;
    color:#fff !important;
    font-family:'Archivo',sans-serif !important;
    font-weight:700 !important;
    font-size:26px !important;
    letter-spacing:-0.01em !important;
    text-decoration:none !important;
  }
  #arden-mobile-menu .arden-menu-n{
    color:rgba(255,255,255,.35) !important;
    font-family:'Archivo',sans-serif !important;
    font-weight:600 !important;
    font-size:12px !important;
    letter-spacing:.14em !important;
    min-width:22px !important;
    flex:0 0 auto !important;
  }
  #arden-mobile-menu .arden-menu-link.active,
  #arden-mobile-menu .arden-menu-link.active .arden-menu-label{
    color:#E8C258 !important;
  }
  #arden-mobile-menu .arden-menu-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-top:22px !important;
  }
  #arden-mobile-menu .arden-menu-cta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:15px 18px !important;
    border-radius:12px !important;
    font-family:'Instrument Sans',sans-serif !important;
    font-weight:700 !important;
    font-size:15px !important;
    text-decoration:none !important;
  }
  #arden-mobile-menu .arden-menu-cta-gold{
    background:linear-gradient(135deg,#E8C258,#C4901B) !important;
    color:#1A1508 !important;
  }
  #arden-mobile-menu .arden-menu-cta-green{
    background:#175235 !important;
    color:#fff !important;
  }
  #arden-mobile-menu .arden-menu-cta-outline{
    background:transparent !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.22) !important;
  }
  #arden-mobile-menu .arden-menu-footer{
    margin-top:auto !important;
    padding-top:22px !important;
    color:rgba(255,255,255,.55) !important;
    font-size:11.5px !important;
    line-height:1.6 !important;
  }
  #arden-mobile-menu .arden-menu-footer b{color:#fff !important;font-weight:600 !important}

  /* --- Attribute-based fallbacks --------------------------------
     Catch any div/grid that hasn't been given the m-* classes yet
     so the site never breaks even on pages we've not touched.     */
  div[style*="max-width:1280px"]{max-width:100% !important;width:100% !important}
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:12px !important}
  div[style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  /* Available Cars filter card: 5 selects + count/clear column — stack on mobile */
  div[style*="grid-template-columns:repeat(5,1fr) auto"],
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr) auto"]{grid-template-columns:1fr !important;gap:12px !important}
  div[style*="grid-template-columns:1fr 420px"],
  div[style*="grid-template-columns:1fr 360px"],
  div[style*="grid-template-columns:1fr 380px"],
  div[style*="grid-template-columns:minmax(0,1fr) 380px"],
  div[style*="grid-template-columns:320px 1fr"],
  div[style*="grid-template-columns:300px 1fr"],
  div[style*="grid-template-columns:340px 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr 1.2fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:44% 1fr"],
  div[style*="grid-template-columns:150px 1fr auto"],
  div[style*="grid-template-columns:160px 1fr auto"],
  div[style*="grid-template-columns:auto 1fr auto"],
  div[style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr !important;gap:20px !important}

  /* Section padding overrides that don't rely on classes */
  div[style*="padding:88px 32px 40px"],
  div[style*="padding:84px 32px"],
  div[style*="padding:70px 32px"],
  div[style*="padding:60px 32px 80px"],
  div[style*="padding:44px 32px 90px"],
  div[style*="padding:44px 32px 20px"],
  div[style*="padding:24px 32px 20px"],
  div[style*="padding:24px 32px 90px"],
  div[style*="padding:72px 32px 40px"],
  div[style*="padding:76px 32px 84px"],
  div[style*="padding:86px 32px 96px"],
  div[style*="padding:40px 32px 50px"]{padding:36px 16px !important}
  div[style*="padding:110px 32px 130px"]{padding:44px 20px 56px !important}
  div[style*="padding:40px 44px"],
  div[style*="padding:46px 52px"],
  div[style*="padding:44px 52px"],
  div[style*="padding:48px 52px"],
  div[style*="padding:34px 36px"]{padding:24px 20px !important}

  /* Form inputs sized to avoid iOS auto-zoom */
  input,select,textarea{max-width:100% !important;font-size:16px !important}
  input[type=range]{font-size:14px !important}

  /* Hero image center-position */
  img[style*="object-position:center right"]{object-position:center !important}

  /* Cinematic hero shells (About / Available Cars / Finance / Contact) —
     the desktop uses min-height:min(72vh,700px) / min(64vh,620px) to make
     the hero feel like a landing frame. On mobile that forces ~500px of
     empty space around the content, so we drop it back to intrinsic height
     and let m-hero-deep's padding do the sizing. */
  div[style*="min-height:min(72vh,700px)"],
  div[style*="min-height:min(64vh,620px)"]{min-height:auto !important}
  /* Hero-deep trust chips (About / Available Cars / Finance / Contact) —
     these are <span> pills, not the home's div .trust-pill; keep them
     compact so the row wraps nicely under the hero headline. */
  div[style*="margin-top:36px"] > span[style*="border-radius:999px"]{font-size:11.5px !important;padding:6px 11px !important}

  /* "Recently Sold" (and any future "title + strapline") section header.
     Desktop lays it out as an H2 on the left with a small description
     next to it. On mobile the H2 wraps to 2 lines and the description
     sits cramped beside it, reading as messy. Stack vertically. */
  .m-section-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
  }
  .m-section-head > h2{
    white-space:nowrap !important;
    font-size:22px !important;
    line-height:1.2 !important;
  }
  .m-section-head > div{
    color:#68756C !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }

  /* Kill sticky positioning on sidebars that stack into a single column
     on mobile (Finance result card, Car Detail price/finance panel).
     Header uses top:0 so it's unaffected. */
  div[style*="position:sticky"][style*="top:98px"]{
    position:static !important;
    top:auto !important;
  }

  /* Finance calculator + Car Detail number-input rows — the trailing
     "between £8,000 – £22,000" / "up to £6,000" / "max £6,000" hint
     squeezes next to the input on narrow screens. Let it wrap onto a
     second line under the £ + <input>. */
  div[style*="align-items:center"][style*="gap:8px"] > input[type="number"]{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  div[style*="align-items:center"][style*="gap:8px"] > span[style*="font-size:11px"]{
    flex:1 1 100% !important;
    order:99 !important;
    padding-left:22px !important;
  }
  div[style*="align-items:center"][style*="gap:8px"]:has(> input[type="number"]){
    flex-wrap:wrap !important;
  }

  /* Finance page — result panel (dark green gradient card): drop the
     46px "£233 / mo" to something proportional, tighten padding, and
     make the CTAs feel intentional rather than "just stacked". */
  div[style*="linear-gradient(135deg,#123524,#0F2A1D)"][style*="border-radius:16px"]{
    padding:24px 22px !important;
  }
  div[style*="linear-gradient(135deg,#123524,#0F2A1D)"] div[style*="font-size:46px"]{
    font-size:36px !important;
  }
  div[style*="linear-gradient(135deg,#123524,#0F2A1D)"] div[style*="font-size:46px"] span{
    font-size:14px !important;
  }
  div[style*="linear-gradient(135deg,#123524,#0F2A1D)"] a[style*="linear-gradient(135deg,#E8C258"],
  div[style*="linear-gradient(135deg,#123524,#0F2A1D)"] a[style*="border:1px solid rgba(255,255,255"]{
    padding:13px 18px !important;
    font-size:14px !important;
  }

  /* Payment calculator card — pull the h2 bottom margin in a touch and
     drop the gap between the 3 field groups, so the form doesn't feel
     like it stretches for two full screens before the result. */
  h2[style*="margin:0 0 28px"]{margin-bottom:18px !important}
  div[style*="flex-direction:column"][style*="gap:26px"]{gap:18px !important}

  /* Utility: any element tagged .desktop-only is hidden on mobile. Use
     this to strip out sections that are polished for wide screens but
     don't translate well to a phone (e.g. the Home page "Our process /
     Simple steps. Smooth experience." 4-column card row). */
  .desktop-only{display:none !important}

  /* Universal form-element box model on mobile — content-box + width:100%
     + padding + border was pushing inputs / textareas / buttons past the
     card's right edge, causing the whole Contact form (and any other
     card containing form controls) to overflow the viewport. Force
     border-box across the board so width:100% actually stays inside the
     parent. */
  input, select, textarea, button{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  /* --- Contact form remake -------------------------------------- */
  /* Full-card wrapper — clamp width and stop the outer padding pushing
     inputs past the edge. */
  [data-screen-label="Contact"] .m-wrap > div:first-child{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  /* Inputs / textarea — rounder corners, more padding, real focus state. */
  [data-screen-label="Contact"] input,
  [data-screen-label="Contact"] textarea{
    width:100% !important;
    border-radius:10px !important;
    padding:13px 14px !important;
    font-size:16px !important;
    background:#FBFAF7 !important;
    border:1px solid #E0DCD0 !important;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
  }
  [data-screen-label="Contact"] input:focus,
  [data-screen-label="Contact"] textarea:focus{
    border-color:#175235 !important;
    box-shadow:0 0 0 3px rgba(23,82,53,.12) !important;
    background:#fff !important;
    outline:none !important;
  }
  [data-screen-label="Contact"] label{
    font-size:11px !important;
    letter-spacing:.08em !important;
    color:#4C5A51 !important;
  }
  [data-screen-label="Contact"] textarea{
    min-height:120px !important;
    resize:vertical !important;
  }

  /* Send / WhatsApp button pair — class-based so the selector actually
     matches. Force the wrapper to stack, both buttons full-width, and
     restyle WhatsApp Instead as filled WhatsApp brand green. */
  .m-contact-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    margin-top:22px !important;
    width:100% !important;
  }
  .m-contact-actions > button{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    padding:15px 20px !important;
    font-size:15px !important;
    font-weight:700 !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    cursor:pointer !important;
  }
  .m-contact-actions > #arden-c-send{
    background:#175235 !important;
    color:#fff !important;
    border:none !important;
  }
  .m-contact-actions > #arden-c-send + button{
    background:#25D366 !important;
    color:#fff !important;
    border:none !important;
  }
  .m-contact-actions > #arden-c-send + button svg{
    fill:#fff !important;
  }

  /* Car Detail viewing form — same button-pair pattern, no class hook.
     Uses the div with margin-top:20px containing "Book a Viewing" +
     "WhatsApp Instead" buttons. */
  [data-screen-label="Car Detail"] div[style*="display:flex"][style*="gap:12px"][style*="margin-top:20px"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  [data-screen-label="Car Detail"] div[style*="display:flex"][style*="gap:12px"][style*="margin-top:20px"] > button{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:14px 22px !important;
    font-size:14.5px !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  /* --- Car Detail page — full mobile pass ------------------------- */
  [data-screen-label="Car Detail"]{
    overflow-x:hidden !important;
  }
  /* Mobile section reorder: gallery → Price + Finance → description →
     Prepared/Tech + MOT + provenance + viewing form → Address.
     Desktop keeps its 2-column grid (main-left, sticky-sidebar-right)
     untouched — this only kicks in on mobile.
     Uses display:contents on the two column wrappers to promote their
     children directly into the outer grid so CSS `order` can interleave
     items from both columns. */
  [data-screen-label="Car Detail"] .mdet-main,
  [data-screen-label="Car Detail"] .mdet-side{
    display:contents !important;
  }
  /* Main column DOM order (7 children): 1 gallery image, 2 strip, 3 desc,
     4 prepared/tech row, 5 MOT sc-if, 6 provenance sc-if, 7 viewing.
     Sidebar DOM order (3 children): 1 price, 2 finance, 3 address. */
  [data-screen-label="Car Detail"] .mdet-main > *:nth-child(-n+2){
    order:1 !important;
  }
  [data-screen-label="Car Detail"] .mdet-side > *:nth-child(-n+2){
    order:2 !important;
  }
  [data-screen-label="Car Detail"] .mdet-main > *:nth-child(n+3){
    order:3 !important;
  }
  [data-screen-label="Car Detail"] .mdet-side > *:nth-child(3){
    order:4 !important;
  }
  /* Breadcrumbs — let the current-page name wrap instead of clipping. */
  [data-screen-label="Car Detail"] > .m-wrap:first-of-type > div[style*="color:#8B968E"]{
    flex-wrap:wrap !important;
    font-size:12px !important;
    row-gap:2px !important;
  }
  [data-screen-label="Car Detail"] > .m-wrap:first-of-type > div[style*="color:#8B968E"] > span:last-child{
    white-space:normal !important;
  }
  /* Title — a bit smaller / tighter */
  [data-screen-label="Car Detail"] > .m-wrap:first-of-type > h1{
    font-size:26px !important;
    line-height:1.15 !important;
    margin-bottom:12px !important;
  }
  /* Quick-facts chip row (Low mileage / HPI clear / warranty / viewing) */
  [data-screen-label="Car Detail"] > .m-wrap:first-of-type > div[style*="gap:20px"]{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 14px !important;
    margin-bottom:16px !important;
  }
  [data-screen-label="Car Detail"] > .m-wrap:first-of-type > div[style*="gap:20px"] > div{
    font-size:12.5px !important;
  }

  /* Cards inside the main column — tighter padding + full width */
  [data-screen-label="Car Detail"] div[style*="border-radius:16px"][style*="padding:30px 32px"],
  [data-screen-label="Car Detail"] div[style*="border-radius:16px"][style*="padding:28px 30px"]{
    padding:22px 20px !important;
  }
  [data-screen-label="Car Detail"] h2[style*="font-size:22px"]{
    font-size:19px !important;
    line-height:1.25 !important;
  }
  [data-screen-label="Car Detail"] h3[style*="font-size:18px"]{
    font-size:16px !important;
  }

  /* Dark price / spec sidebar card — tighten padding, big price stays
     readable, buttons full-width so text can't overflow. */
  [data-screen-label="Car Detail"] div[style*="background:#0C120F"][style*="border-radius:16px"]{
    padding:22px 20px !important;
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  [data-screen-label="Car Detail"] div[style*="background:#0C120F"] div[style*="font-size:42px"]{
    font-size:34px !important;
  }
  [data-screen-label="Car Detail"] div[style*="background:#0C120F"] a{
    box-sizing:border-box !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    padding:13px 16px !important;
    font-size:14px !important;
  }
  /* Spec grid inside the dark card — keep it 2-up on mobile for density
     instead of collapsing to 6-tall single column. */
  [data-screen-label="Car Detail"] div[style*="background:#0C120F"] div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
    gap:10px 14px !important;
  }
  [data-screen-label="Car Detail"] div[style*="background:#0C120F"] div[style*="grid-template-columns:1fr 1fr"] > div{
    font-size:12.5px !important;
  }

  /* Photo strip below the main gallery image — make thumbs a bit smaller
     so more fit on-screen without needing to drag as much. */
  #arden-photo-strip > div{
    flex:0 0 96px !important;
  }

  /* Similar cars grid at the bottom — bump to 2 columns on mobile for
     density instead of the 1-col that the 4→1 grid override gives. */
  [data-screen-label="Car Detail"] div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:22px"]{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  [data-screen-label="Car Detail"] div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:22px"] > div{
    min-width:0 !important;
  }

  /* Bottom CTA banners (About "Come and see how we do things", How It
     Works "Ready to find your next car?", Available Cars / MOT Check
     stock-alert, Reviews "Join our happy customers", Home "Get first
     look at new stock"). Desktop lays them out as a horizontal flex row
     with two blocks (copy on left, CTAs / form on right). On mobile that
     leaves the CTAs hugging the top-left of the card with dead space to
     their right. Flatten the whole banner into a proper vertical stack
     so everything is full-width and the CTAs read as real mobile
     buttons. */
  .m-banner{
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:left !important;
    gap:16px !important;
  }
  .m-banner > div{
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }
  /* CTA / form row inside the banner — force it to also stack its
     children vertically. Catches both the "2× <a>" pattern (About /
     How It Works / etc.) and the "name + WhatsApp + button" newsletter
     row on Home. */
  .m-banner > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    margin-top:0 !important;
  }
  .m-banner > div:last-child > a,
  .m-banner > div:last-child > button,
  .m-banner > div:last-child > input{
    width:100% !important;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
  }
  .m-banner > div:last-child > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 22px !important;
    font-size:14.5px !important;
    gap:9px !important;
  }

  /* Title/subtitle sizing inside the banner text block */
  .m-banner > div:first-child > div[style*="font-size:28px"]{
    font-size:22px !important;
    line-height:1.25 !important;
    margin-bottom:8px !important;
  }
  .m-banner > div:first-child > div[style*="font-size:15px"]{
    font-size:13.5px !important;
    line-height:1.55 !important;
  }
  /* Home banner's icon + text sub-row — keep icon and copy sensibly
     sized when the parent goes column. */
  .m-banner > div:first-child[style*="align-items:center"][style*="gap:22px"]{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;
  }

  /* MOT Check — differentiate the static "Looking for a car with a clean
     bill of health" banner from the dynamically-injected "Thinking of
     selling? We'd like to buy your BMW" banner that renders directly
     above it. Both otherwise share the same dark green gradient and read
     as duplicates on mobile. Give this one a warm gold treatment so the
     pair reads as a proper "sell (dark) / buy (light)" set. Matched via
     :has() on the "View Current Stock" link so the injected banner (no
     such link) is left untouched. */
  [data-screen-label="MOT Check"] .m-banner:has(a[href="Available Cars.dc.html"]){
    background:linear-gradient(135deg,#F6EAC4 0%,#E8C258 100%) !important;
    border:1px solid rgba(196,144,27,.35) !important;
    box-shadow:0 10px 26px rgba(196,144,27,.22) !important;
  }
  [data-screen-label="MOT Check"] .m-banner:has(a[href="Available Cars.dc.html"]) > div:first-child > div:first-child{
    color:#1A1508 !important;
  }
  [data-screen-label="MOT Check"] .m-banner:has(a[href="Available Cars.dc.html"]) > div:first-child > div:nth-child(2){
    color:rgba(26,21,8,.72) !important;
  }
  /* Gold-on-gold reads flat — turn "View Current Stock" into a dark pill */
  [data-screen-label="MOT Check"] .m-banner:has(a[href="Available Cars.dc.html"]) a[href="Available Cars.dc.html"]{
    background:#0C120F !important;
    color:#E8C258 !important;
  }
  /* Outlined "Call" — dark border + dark text on the gold bg */
  [data-screen-label="MOT Check"] .m-banner:has(a[href="Available Cars.dc.html"]) a[href^="tel:"]{
    background:transparent !important;
    border-color:rgba(26,21,8,.35) !important;
    color:#1A1508 !important;
  }
}

/* Tiny phones (≤ 380px) — squeeze a bit more */
@media (max-width: 380px){
  #arden-hero-headline{font-size:28px !important}
  h1{font-size:26px !important}
  h2{font-size:22px !important}
  .site-header>div>a:first-child img{height:32px !important}
}