/*
 * Location: /assets/css/our-dealers-page.css
 * Purpose:
 * - Canonical premium Our Dealers presentation for Theme 1.2.32.
 * - Consumes global Design DNA and the Theme-owned data-stm-layout responsive contract.
 * - Component geometry is supplied by stm_setup_pages_our_dealers; no image Hero,
 *   duplicate color system, shadow system or viewport controller is introduced.
 */

.stm-dealers-page,
.stm-dealers-page *{
  box-sizing:border-box;
}

.stm-dealers-page{
  --stm-dealers-content-width:1200px;
  --stm-dealers-breadcrumb-padding-y:13px;
  --stm-dealers-hero-gap-top:20px;
  --stm-dealers-hero-padding-top:52px;
  --stm-dealers-hero-padding-bottom:52px;
  --stm-dealers-section-space:68px;
  --stm-dealers-columns:4;
  --stm-dealers-card-min-height:342px;
  --stm-dealers-card-padding:24px;
  background:var(--stm-color-surface);
  color:var(--stm-color-ink);
  overflow:clip;
}

.stm-dealers-page :where(h1,h2,h3,p){
  overflow-wrap:anywhere;
}

.stm-dealers-page :where(a,button){
  -webkit-tap-highlight-color:transparent;
}

.stm-dealers-container{
  width:min(calc(100% - 32px),var(--stm-dealers-content-width));
  min-width:0;
  margin-inline:auto;
}

/* Breadcrumb: full-width owner with a page-width inner track. */
.stm-dealers-breadcrumb-bar{
  width:100%;
  border-top:1px solid var(--stm-color-divider);
  border-bottom:1px solid var(--stm-color-divider);
  background:var(--stm-color-surface);
}

.stm-dealers-breadcrumb{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:var(--stm-dealers-breadcrumb-padding-y) 0;
  gap:var(--stm-space-2);
  color:var(--stm-color-ink);
  font-size:var(--stm-font-size-small);
  line-height:1.45;
  list-style:none;
}

.stm-dealers-breadcrumb li{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.stm-dealers-breadcrumb a{
  color:var(--stm-color-heading);
  font-weight:var(--stm-weight-semibold);
  text-decoration:none;
}

.stm-dealers-breadcrumb a:hover,
.stm-dealers-breadcrumb a:focus-visible{
  color:var(--stm-color-link-hover);
}

.stm-dealers-breadcrumb [aria-current="page"]{
  color:var(--stm-color-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stm-dealers-breadcrumb__separator{
  color:var(--stm-color-muted);
}

.stm-dealers-breadcrumb__separator svg{
  display:block;
  width:14px;
  height:14px;
}

/* Image-free commercial Hero. */
.stm-dealers-hero{
  padding-top:var(--stm-dealers-hero-gap-top);
  background:var(--stm-color-surface);
}

.stm-dealers-hero-frame{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:0;
  padding:var(--stm-dealers-hero-padding-top) clamp(28px,5vw,72px) var(--stm-dealers-hero-padding-bottom);
  border-radius:var(--stm-radius-2xl);
  background:var(--stm-color-surface-soft);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--stm-color-divider) 44%,transparent) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,var(--stm-color-divider) 44%,transparent) 1px,transparent 1px),
    var(--stm-color-surface-soft);
  background-size:48px 48px;
  overflow:hidden;
}

.stm-dealers-hero-frame.has-border{
  border:1px solid var(--stm-color-border);
}

.stm-dealers-hero-frame::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto auto -96px -84px;
  width:260px;
  height:260px;
  border:38px solid color-mix(in srgb,var(--stm-color-accent) 15%,transparent);
  border-radius:50%;
}

.stm-dealers-hero-frame::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-74px;
  right:-54px;
  width:220px;
  height:220px;
  border:34px solid color-mix(in srgb,var(--stm-color-heading) 8%,transparent);
  border-radius:50%;
}

.stm-dealers-hero-decoration{
  position:absolute;
  z-index:-1;
  display:block;
  border:1px solid var(--stm-color-border);
  border-color:color-mix(in srgb,var(--stm-color-accent) 24%,var(--stm-color-divider));
  border-radius:50%;
  pointer-events:none;
}

.stm-dealers-hero-decoration--one{
  width:16px;
  height:16px;
  top:28px;
  left:11%;
  background:var(--stm-color-accent);
}

.stm-dealers-hero-decoration--two{
  width:28px;
  height:28px;
  right:14%;
  bottom:30px;
  background:var(--stm-color-surface);
}

.stm-dealers-hero-caption{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(100%,820px);
  margin-inline:auto;
  text-align:center;
}

.stm-dealers-hero--left .stm-dealers-hero-caption{
  align-items:flex-start;
  width:min(100%,760px);
  margin-inline:0 auto;
  text-align:left;
}

.stm-dealers-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--stm-space-3);
  color:var(--stm-color-heading);
  font-size:var(--stm-font-size-small);
  font-weight:var(--stm-weight-bold);
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}

.stm-dealers-hero-eyebrow__icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--stm-color-border);
  border-radius:var(--stm-radius-md);
  background:var(--stm-color-surface);
  color:var(--stm-color-accent-deep);
}

.stm-dealers-hero-eyebrow__icon svg{
  width:25px;
  height:25px;
}

.stm-dealers-title{
  margin:0;
  max-width:820px;
  color:var(--stm-color-heading);
  font-size:clamp(38px,5.1vw,64px);
  font-weight:var(--stm-weight-bold);
  letter-spacing:-.045em;
  line-height:1.02;
}

.stm-dealers-title-highlight{
  color:var(--stm-color-accent-deep);
}

.stm-dealers-hero-subtitle{
  max-width:690px;
  margin:var(--stm-space-4) 0 0;
  color:var(--stm-color-ink);
  font-size:clamp(var(--stm-font-size-body),1.5vw,19px);
  font-weight:var(--stm-weight-medium);
  line-height:1.7;
}

.stm-dealers-hero-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--stm-space-2);
  min-height:46px;
  margin-top:var(--stm-space-5);
  padding:12px 20px;
  border:1px solid var(--stm-color-accent);
  border-radius:var(--stm-radius-md);
  background:var(--stm-color-accent);
  color:var(--stm-color-on-dark);
  font-size:var(--stm-font-size-ui);
  font-weight:var(--stm-weight-bold);
  line-height:1.2;
  text-decoration:none;
}

.stm-dealers-hero-link:hover,
.stm-dealers-hero-link:focus-visible{
  border-color:var(--stm-color-accent-deep);
  background:var(--stm-color-accent-deep);
  color:var(--stm-color-on-dark);
}

.stm-dealers-hero-link span:last-child{
  display:inline-flex;
  width:17px;
  height:17px;
}

.stm-dealers-hero-link svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
}

/* Dealer network. */
.stm-dealers-section{
  padding:var(--stm-dealers-section-space) 0;
  scroll-margin-top:24px;
}

.stm-dealers-section.is-first-section{
  padding-top:var(--stm-dealers-section-space);
}

.stm-dealers-heading{
  max-width:780px;
  margin:0 auto 34px;
  text-align:center;
}

.stm-dealers-section-title{
  margin:0;
  color:var(--stm-color-heading);
  font-size:clamp(30px,3.5vw,44px);
  font-weight:var(--stm-weight-bold);
  letter-spacing:-.035em;
  line-height:1.08;
}

.stm-dealers-section-subtitle{
  max-width:680px;
  margin:var(--stm-space-3) auto 0;
  color:var(--stm-color-ink);
  font-size:var(--stm-font-size-body);
  line-height:1.7;
}

.stm-dealers-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--stm-space-3);
  margin:0 0 32px;
}

.stm-dealers-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--stm-space-2);
  min-height:46px;
  min-width:164px;
  padding:12px 20px;
  border:1px solid var(--stm-color-border);
  border-radius:var(--stm-radius-pill);
  background:var(--stm-color-surface);
  color:var(--stm-color-heading);
  font:inherit;
  font-size:var(--stm-font-size-ui);
  font-weight:var(--stm-weight-bold);
  line-height:1.2;
  cursor:pointer;
}

.stm-dealers-tab:hover,
.stm-dealers-tab:focus-visible{
  border-color:var(--stm-color-accent);
  color:var(--stm-color-accent-deep);
  outline:none;
}

.stm-dealers-tab.is-active{
  border-color:var(--stm-color-accent);
  background:var(--stm-color-accent);
  color:var(--stm-color-on-dark);
}

.stm-dealers-tab-icon{
  position:relative;
  display:inline-block;
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:currentColor;
}

.stm-dealers-tab-icon::before{
  content:"";
  position:absolute;
  left:3px;
  top:1px;
  width:8px;
  height:8px;
  border:2px solid currentColor;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}

.stm-dealers-tab-icon::after{
  content:"";
  position:absolute;
  left:6px;
  top:4px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:currentColor;
}

.stm-dealers-panel[hidden]{
  display:none;
}

.stm-dealers-panel:focus-visible{
  outline:2px solid var(--stm-color-accent);
  outline-offset:8px;
}

.stm-dealers-region-title{
  margin:0 0 var(--stm-space-5);
  color:var(--stm-color-heading);
  font-size:var(--stm-font-size-title);
  font-weight:var(--stm-weight-bold);
}

.stm-dealers-empty{
  max-width:660px;
  margin:0 auto;
  padding:20px 24px;
  border:1px solid var(--stm-color-border);
  border-radius:var(--stm-radius-lg);
  background:var(--stm-color-surface-soft);
  color:var(--stm-color-muted);
  font-weight:var(--stm-weight-semibold);
  line-height:1.55;
  text-align:center;
}

/* Dealer card contract: the existing logo-first style remains canonical. */
.stm-dealers-grid{
  display:grid;
  grid-template-columns:repeat(var(--stm-dealers-columns),minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

.stm-dealer-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:var(--stm-dealers-card-min-height);
  padding:calc(var(--stm-dealers-card-padding) + 12px) var(--stm-dealers-card-padding) var(--stm-dealers-card-padding);
  border:1px solid var(--stm-color-border);
  border-top:3px solid var(--stm-color-accent);
  border-radius:var(--stm-radius-lg);
  background:var(--stm-color-surface);
}

.stm-dealer-card:hover,
.stm-dealer-card:focus-within{
  border-color:var(--stm-color-accent);
}

.stm-dealer-verified-pill{
  position:absolute;
  top:-15px;
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid var(--stm-color-accent);
  border-radius:var(--stm-radius-pill);
  background:var(--stm-color-accent);
  color:var(--stm-color-on-dark);
  font-size:var(--stm-font-size-xs);
  font-weight:var(--stm-weight-bold);
  line-height:1;
  white-space:nowrap;
}

.stm-dealer-verified-pill::before{
  content:"✓";
  font-size:var(--stm-font-size-label);
}

.stm-dealer-logo-wrap{
  position:relative;
  display:grid;
  place-items:center;
  width:124px;
  height:116px;
  margin:0 auto var(--stm-space-4);
}

.stm-dealer-logo-ring{
  position:absolute;
  inset:0;
  margin:auto;
  width:110px;
  height:110px;
  border:1px solid var(--stm-color-border);
  border-radius:50%;
  background:var(--stm-color-surface);
}

.stm-dealer-logo-ring::before{
  content:"";
  position:absolute;
  left:-2px;
  top:-2px;
  width:56px;
  height:56px;
  border-top:3px solid var(--stm-color-accent);
  border-left:3px solid var(--stm-color-accent);
  border-radius:56px 0 0 0;
}

.stm-dealer-logo{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:auto;
  max-width:84px;
  max-height:64px;
  object-fit:contain;
}

.stm-dealer-logo-fallback{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border:1px solid var(--stm-color-border);
  border-radius:50%;
  background:var(--stm-color-surface-soft);
  color:var(--stm-color-accent-deep);
  font-size:26px;
  font-weight:var(--stm-weight-bold);
  letter-spacing:.01em;
}

.stm-dealer-logo-fallback::after{
  content:"";
  position:absolute;
  right:5px;
  bottom:5px;
  width:14px;
  height:14px;
  border:3px solid var(--stm-color-surface);
  border-radius:50%;
  background:var(--stm-color-accent);
}

.stm-dealer-head{
  margin:0 0 var(--stm-space-3);
  padding-bottom:var(--stm-space-3);
  border-bottom:1px solid var(--stm-color-divider);
  text-align:left;
}

.stm-dealer-shop{
  margin:0;
  color:var(--stm-color-heading);
  font-size:var(--stm-font-size-large);
  font-weight:var(--stm-weight-bold);
  letter-spacing:-.02em;
  line-height:1.25;
}

.stm-dealer-person{
  margin:5px 0 0;
  color:var(--stm-color-accent-deep);
  font-size:var(--stm-font-size-ui);
  font-weight:var(--stm-weight-semibold);
  line-height:1.35;
}

.stm-dealer-body{
  display:grid;
  gap:14px;
  margin:0 0 var(--stm-space-4);
}

.stm-dealer-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:10px;
  align-items:start;
  min-width:0;
}

.stm-dealer-row-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-top:2px;
  color:var(--stm-color-accent-deep);
}

.stm-dealer-row-icon svg,
.stm-dealer-loc__icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
}

.stm-dealer-meta{
  display:grid;
  gap:3px;
  min-width:0;
  color:var(--stm-color-ink);
  font-size:var(--stm-font-size-small);
  line-height:1.48;
}

.stm-dealer-meta strong{
  color:var(--stm-color-heading);
  font-size:var(--stm-font-size-xs);
  font-weight:var(--stm-weight-bold);
  letter-spacing:.045em;
  line-height:1.35;
  text-transform:uppercase;
}

.stm-dealer-meta a,
.stm-dealer-meta > span{
  color:var(--stm-color-ink);
  font-weight:var(--stm-weight-medium);
  text-decoration:none;
  overflow-wrap:anywhere;
}

.stm-dealer-meta a:hover,
.stm-dealer-meta a:focus-visible{
  color:var(--stm-color-link-hover);
  text-decoration:underline;
}

.stm-dealer-foot{
  margin-top:auto;
}

.stm-dealer-loc{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--stm-space-2);
  width:100%;
  min-height:44px;
  padding:11px 16px;
  border:1px solid var(--stm-color-heading);
  border-radius:var(--stm-radius-md);
  background:var(--stm-color-heading);
  color:var(--stm-color-on-dark);
  font-size:var(--stm-font-size-small);
  font-weight:var(--stm-weight-bold);
  line-height:1.2;
  text-decoration:none;
}

.stm-dealer-loc:hover,
.stm-dealer-loc:focus-visible{
  border-color:var(--stm-color-accent-deep);
  background:var(--stm-color-accent-deep);
  color:var(--stm-color-on-dark);
}

.stm-dealer-loc__icon{
  display:inline-flex;
  width:17px;
  height:17px;
  color:currentColor;
}

/* Dealer benefits strip. */
.stm-dealers-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:36px 0 0;
  border:1px solid var(--stm-color-border);
  border-radius:var(--stm-radius-lg);
  background:var(--stm-color-surface-soft);
  overflow:hidden;
}

.stm-dealers-feature{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-width:0;
  padding:22px;
}

.stm-dealers-feature:not(:last-child){
  border-right:1px solid var(--stm-color-divider);
}

.stm-dealers-feature-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--stm-color-border);
  border-color:color-mix(in srgb,var(--stm-color-accent) 35%,var(--stm-color-border));
  border-radius:50%;
  background:var(--stm-color-surface);
  color:var(--stm-color-accent-deep);
}

.stm-dealers-feature-icon svg{
  width:23px;
  height:23px;
  fill:currentColor;
}

.stm-dealers-feature-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.stm-dealers-feature-copy strong{
  color:var(--stm-color-heading);
  font-size:var(--stm-font-size-ui);
  font-weight:var(--stm-weight-bold);
  line-height:1.25;
}

.stm-dealers-feature-copy span{
  color:var(--stm-color-ink);
  font-size:var(--stm-font-size-small);
  line-height:1.45;
}

/* Tablet composition follows the global responsive DNA controller. */
html[data-stm-layout="tablet"] .stm-dealers-hero-frame{
  padding-inline:42px;
}

html[data-stm-layout="tablet"] .stm-dealers-title{
  font-size:clamp(38px,6vw,54px);
}

html[data-stm-layout="tablet"] .stm-dealers-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-stm-layout="tablet"] .stm-dealers-features{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-stm-layout="tablet"] .stm-dealers-feature:nth-child(2n){
  border-right:0;
}

html[data-stm-layout="tablet"] .stm-dealers-feature:nth-child(n+3){
  border-top:1px solid var(--stm-color-divider);
}

/* Mobile composition. */
html[data-stm-layout="mobile"] .stm-dealers-container{
  width:min(calc(100% - 24px),var(--stm-dealers-content-width));
}

html[data-stm-layout="mobile"] .stm-dealers-breadcrumb{
  padding-block:min(var(--stm-dealers-breadcrumb-padding-y),12px);
  font-size:var(--stm-font-size-xs);
}

html[data-stm-layout="mobile"] .stm-dealers-hero{
  padding-top:min(var(--stm-dealers-hero-gap-top),14px);
}

html[data-stm-layout="mobile"] .stm-dealers-hero-frame{
  padding:min(var(--stm-dealers-hero-padding-top),36px) 20px min(var(--stm-dealers-hero-padding-bottom),36px);
  border-radius:var(--stm-radius-xl);
  background-size:36px 36px;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-frame::before{
  width:180px;
  height:180px;
  border-width:28px;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-frame::after{
  width:150px;
  height:150px;
  border-width:24px;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-caption,
html[data-stm-layout="mobile"] .stm-dealers-hero--left .stm-dealers-hero-caption{
  align-items:center;
  width:100%;
  text-align:center;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-eyebrow{
  margin-bottom:12px;
  font-size:var(--stm-font-size-xs);
  letter-spacing:.075em;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-eyebrow__icon{
  width:36px;
  height:36px;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-eyebrow__icon svg{
  width:22px;
  height:22px;
}

html[data-stm-layout="mobile"] .stm-dealers-title{
  font-size:clamp(30px,10.5vw,42px);
  line-height:1.06;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-subtitle{
  font-size:var(--stm-font-size-body);
  line-height:1.62;
}

html[data-stm-layout="mobile"] .stm-dealers-hero-link{
  width:100%;
}

html[data-stm-layout="mobile"] .stm-dealers-section{
  padding-block:max(44px,calc(var(--stm-dealers-section-space) * .68));
}

html[data-stm-layout="mobile"] .stm-dealers-heading{
  margin-bottom:26px;
  text-align:left;
}

html[data-stm-layout="mobile"] .stm-dealers-section-title{
  font-size:clamp(28px,9vw,36px);
}

html[data-stm-layout="mobile"] .stm-dealers-section-subtitle{
  margin-inline:0;
}

html[data-stm-layout="mobile"] .stm-dealers-tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:26px;
}

html[data-stm-layout="mobile"] .stm-dealers-tab{
  width:100%;
  min-width:0;
}

html[data-stm-layout="mobile"] .stm-dealers-grid{
  grid-template-columns:1fr;
  gap:22px;
}

html[data-stm-layout="mobile"] .stm-dealer-card{
  min-height:0;
  padding:calc(min(var(--stm-dealers-card-padding),22px) + 12px) min(var(--stm-dealers-card-padding),22px) min(var(--stm-dealers-card-padding),22px);
}

html[data-stm-layout="mobile"] .stm-dealers-features{
  grid-template-columns:1fr;
  margin-top:30px;
}

html[data-stm-layout="mobile"] .stm-dealers-feature{
  border-right:0;
}

html[data-stm-layout="mobile"] .stm-dealers-feature:not(:first-child){
  border-top:1px solid var(--stm-color-divider);
}

@media (prefers-reduced-motion:reduce){
  .stm-dealers-page :where(a,button){
    scroll-behavior:auto;
  }
}