@import url("./tokens.css");

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--dag-font);
  line-height:var(--dag-lh);
  color:var(--dag-text);
  background:
    radial-gradient(1100px 650px at 20% -10%, rgba(var(--color-link-rgb),.18), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(var(--color-success-rgb),.12), transparent 55%),
    var(--dag-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{max-width:100%;height:auto}
img{display:block}

button,input,select,textarea{font:inherit}
button{color:inherit}

::selection{background:rgba(var(--color-link-rgb),.28)}

p{margin:0 0 1em}
small{font-size:.875em;color:var(--dag-muted)}
strong{font-weight:800}

h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.15}
h1{font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.35rem)}
h2{font-size:clamp(1.55rem, 1.1rem + 1.9vw, 2.55rem)}
h3{font-size:clamp(1.15rem, 1.0rem + .9vw, 1.65rem)}

:where(h1,h2,h3,h4,h5,h6,.site-title,.section-title,.page-title){
  font-family:var(--dag-font-display);
  font-weight:800;
}

:where(.hero__eyebrow,.section-eyebrow,.dag-eyebrow){
  display:inline-block;
  font-family:var(--dag-font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--dag-muted);
}

a{color:var(--dag-link);text-underline-offset:.18em}
a:hover{color:var(--dag-link-hover)}

ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:.25em 0}

hr{
  border:0;
  border-top:1px solid var(--dag-border);
  margin:clamp(18px, 3vw, 30px) 0;
}

:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex='-1'])):focus-visible{
  outline:none;
  box-shadow:var(--dag-ring);
}

.dag-muted{color:var(--dag-muted)}
.car-sr,
.car-sr:not(:focus):not(:active){
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:where(
  .price,.amount,.woocommerce-Price-amount,
  .dag-price,.car-price,.vehicle-price,
  .vehicle-card__price,.inventory-card__price,.home-featured__price,.car-card__price,
  .inv-price,.inv-meta__value,
  [class*="mileage"],[class*="year"],[class*="stock"]
){
  font-family:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}

:where(.dag-container,.container,.site-container,.wrap){
  width:100%;
  max-width:var(--dag-container);
  margin-inline:auto;
  padding-inline:var(--dag-gutter);
}

.section{position:relative}
.section-padding{padding-block:var(--dag-section)}

:where(.car-gallery){
  display:grid;
  gap:var(--dag-gap);
}

:where(.car-gallery__main-btn){
  appearance:none;
  border:1px solid var(--dag-border);
  border-radius:var(--dag-radius-lg);
  background:rgba(var(--color-overlay-rgb),.03);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--dag-shadow-xs);
}

:where(.car-gallery__main-img){
  width:100%;
  height:auto;
  display:block;
}

:where(.car-gallery__thumbs){
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:10px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:4px;
}

:where(.car-thumb){
  appearance:none;
  border:1px solid var(--dag-border);
  border-radius:14px;
  background:rgba(var(--color-overlay-rgb),.02);
  padding:0;
  width:74px;
  height:74px;
  overflow:hidden;
  cursor:pointer;
  scroll-snap-align:start;
}

:where(.car-thumb img){
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

:where(.car-thumb.is-active,[aria-current="true"].car-thumb){
  border-color:rgba(var(--color-link-rgb),.45);
  box-shadow:var(--dag-ring);
}

:where(.pagination,.nav-links){
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:24px 0 0;
}



.text-outline-white{
  -webkit-text-stroke:var(--text-outline-width) var(--text-outline-color);
  paint-order:stroke fill;
  text-shadow:var(--text-outline-shadow);
}

.text-black-outline-white{
  color:var(--color-ink);
  -webkit-text-stroke:var(--text-outline-width) var(--text-outline-color);
  paint-order:stroke fill;
  text-shadow:var(--text-outline-shadow);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}