/* Premium polish layer. Loaded last on every public page so it refines the
   shared styles without rewriting them. Keep rules here small and deliberate. */

/* Display serif: self-hosted Newsreader (OFL) replaces system Georgia, which
   Android does not ship. The optical-size axis keeps quotes crisp at text size. */
@font-face{font-family:Newsreader;src:url('assets/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('assets/newsreader-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
:root{--serif:Newsreader,Georgia,'Times New Roman',serif;--ease:cubic-bezier(.2,.7,.2,1)}
h1,h2{letter-spacing:-.035em;font-optical-sizing:auto;text-wrap:balance}
h3{text-wrap:balance}
p{text-wrap:pretty}

/* Micro type floor: labels were rendering at 7-10px. Small caps labels read as
   considered at 11px with open tracking; anything smaller reads as fine print. */
.eyebrow,.hero-content>p.eyebrow,.listing-summary .eyebrow{font-size:11px;letter-spacing:.2em;font-weight:500}
.hero-caption span{font-size:10px;letter-spacing:.2em}
.header nav{font-size:13px}
.header-cta,.button,.listing-inquiry{font-size:13px;letter-spacing:.01em}
.quiet-link,.text-link{font-size:13px}
.inventory-kicker,.inventory-kicker span,.price-label{font-size:11px;letter-spacing:.14em}
.stock-label{font-size:11px}
.review-meta,.review-card figcaption,cite{font-size:11px}
.truck-cap-photo>p,.photo-note,.inventory-notice,.home-worlds-footer p{font-size:12px}

/* Body copy: 14px felt timid at desktop widths. */
@media(min-width:801px){
  .premium-section-heading>p,.trailer-focus-heading>p,.hero-content .hero-description,.truck-cap-copy p,.story-copy p,.section-heading>p,.guide-banner-copy p,.department-info p,.showroom-hero-copy p,.showroom-value p,.inventory-assistance p,.listing-support p{font-size:16px;line-height:1.75}
  .premium-section-heading>p,.section-heading>p,.trailer-focus-heading>p{max-width:34ch}
}

/* Tactile feedback on every primary control. */
.button,.header-cta,.save-listing,.listing-intents button,.gallery-expand{transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.button:active,.header-cta:active,.save-listing:active,.listing-intents button:active{transform:translateY(0) scale(.98)}
.quiet-link{transition:opacity .25s var(--ease),border-color .25s var(--ease)}

/* Product photography: many listing photos are small white-background cutouts.
   A soft studio sweep plus multiply blending makes the white disappear into the
   stage instead of showing a white box inside a grey box. */
.inventory-photo,.listing-stage,.department-image{background:radial-gradient(120% 95% at 50% 38%,#fff 0%,#f3f3f3 55%,#e4e4e4 100%)}
.inventory-photo img,.listing-stage>img,.department-image img,.truck-cap-photo img{mix-blend-mode:multiply}
.truck-cap-photo img{background:none}
.listing-stage{aspect-ratio:4/3;overflow:hidden}
.listing-stage>img{width:100%;height:100%;object-fit:contain;background:none}
.inventory-photo img.is-low-res,.listing-stage>img.is-low-res{object-fit:contain;padding:9% 12%}
.department-image img{padding:6% 10%}

/* Listing detail: serif title to match the rest of the site, one clear primary
   action, then a calm secondary row. */
.listing-summary h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.6vw,56px);line-height:1.02;letter-spacing:-.035em}
.listing-price{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.inventory-card-copy>.save-listing,.listing-summary>.save-listing{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:1px solid currentColor;padding:6px 0;min-height:0;font-size:12px;letter-spacing:.02em;margin:4px 0 22px}
.inventory-card-copy>.save-listing::before,.listing-summary>.save-listing::before{content:'+';font-size:15px;line-height:1}
.inventory-card-copy>.save-listing[aria-pressed=true],.listing-summary>.save-listing[aria-pressed=true]{background:none;border-color:#962332;color:#962332}
.inventory-card-copy>.save-listing[aria-pressed=true]::before,.listing-summary>.save-listing[aria-pressed=true]::before{content:'✓'}
.listing-summary>.button{display:flex;justify-content:center;width:100%;min-height:56px}
.listing-summary>.button:not(.listing-inquiry){margin-top:10px;background:transparent;color:var(--ink);border:1px solid var(--ink)}
.listing-summary>.button:not(.listing-inquiry):hover{background:var(--ink);color:#fff}
.listing-intents{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.listing-intents button{border-radius:0;border-color:#c4c4c4;min-height:48px;font-size:13px}
.listing-intents button:hover{border-color:var(--ink);color:var(--ink)}
.listing-phone{display:block;text-align:center;margin-top:14px;font-size:13px}
.gallery-expand{background:none;border:0;border-bottom:1px solid #b9b9b9;padding:14px 0;font-size:12px;letter-spacing:.06em;text-align:left}
.gallery-expand:hover{background:none;border-color:var(--ink)}

/* Truck-cap actions were touching. */
.truck-cap-copy .button+.quiet-link,.truck-cap-copy .button+a{margin-left:22px}

/* Dealership tour: ambient loop with one quiet control instead of browser chrome. */
.ambient-video{position:relative}
.ambient-video video{display:block;width:100%;height:auto}
.ambient-toggle{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 14px;background:#161616b3;color:#fff;border:1px solid #ffffff40;font-size:11px;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .25s var(--ease)}
.ambient-toggle:hover{background:#161616e6}

/* Ask Mattas launcher: real icon, and a compact circle on phones so it stops
   covering headlines. The label stays in the DOM as the accessible name. */
.chat-launcher-icon{display:inline-flex}
.chat-launcher-icon svg{width:18px;height:18px}
@media(max-width:800px){
  #ask-mattas.chat-launcher{width:52px;height:52px;min-height:52px;padding:0;justify-content:center;border-radius:50%}
  #ask-mattas .chat-launcher-label,#ask-mattas #chat-unread{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .chat-launcher-icon svg{width:22px;height:22px}
  #ask-mattas:has(#chat-unread:not([hidden]))::after{content:'';position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #b51d2d}
}
@media(prefers-reduced-motion:reduce){.button,.header-cta,.quiet-link{transition:none}}

/* Small leftovers from the visual pass. */
.review-source .quiet-link{display:table;margin-top:16px}
@media(max-width:480px){.hero-content>p.eyebrow{display:none}}
/* Trailer intro lines dropped to 11px on phones; keep them readable. */
@media(max-width:800px){.trailer-focus-heading>p{font-size:15px;line-height:1.7}}

/* Phone tap targets: text links, breadcrumbs and the guide's contents list
   rendered 12 to 16px tall. 44px is the comfortable thumb minimum; breadcrumbs
   take padding with a matching negative margin so the line does not grow. */
@media(max-width:800px){
  .text-link,.back-inventory,.service-links a{display:inline-flex;align-items:center;min-height:44px}
  .guide-breadcrumb a,.listing-breadcrumb a{display:inline-block;padding:14px 6px;margin:-14px -6px}
  .guide-sidebar nav li a{display:inline-flex;align-items:center;min-height:44px}
}

/* Phones get the 900px hero instead of the 1920px one (about 350KB saved). */
@media(max-width:800px){.hero-image{background-image:url('assets/cfmoto-landscape-900.webp')}}

/* Type floor, second pass: premium.css sets some section labels at 8 and 9px
   with selectors specific enough to beat the 11px rule above, and the
   inventory filters run at 10px. 11px labels, 12px controls, everywhere. */
.premium-section-heading .eyebrow,.world-card .eyebrow,.home-value .eyebrow,.showroom-hero .eyebrow,.showroom-story .eyebrow,.showroom-value .eyebrow,.trailer-fit .eyebrow,.comparison-hero .eyebrow,.comparison-section .eyebrow,.listing-summary .eyebrow,.tour-caption,.hours-note{font-size:11px}
.facet-count,.facet-hint,.filter-note,.srp-sort,.inventory-search,.inventory-filters label,.inventory-filters summary{font-size:12px}
@media(max-width:800px){.header nav{font-size:13px}}