/* v21: storefront polish, scoped to automobile storefront only */
.sx20-root{font-size:15px;letter-spacing:0;--sx20-border:#e3e8f0;--sx20-bg:#f6f8fc}.sx20-root .sx20-header{min-height:84px;height:auto;padding-block:12px}.sx20-root .sx20-logo b{font-size:clamp(19px,1.7vw,26px)}.sx20-root .sx20-nav a{font-size:clamp(12px,.92vw,14px)}.sx20-root .sx20-hero{height:clamp(430px,36vw,560px)}.sx20-root .sx20-hero-copy{max-width:660px}.sx20-root .sx20-hero-copy h1{font-size:clamp(36px,4.6vw,72px);line-height:1.13;text-shadow:0 3px 18px #0008}.sx20-root .sx20-hero-copy p{font-size:clamp(14px,1.2vw,18px);line-height:1.8}.sx20-root .sx20-trust{margin-top:-30px;margin-bottom:50px}.sx20-root .sx20-trust>div{min-height:90px;box-shadow:0 10px 25px #13233c12}.sx20-root .sx20-section{padding-bottom:42px}.sx20-root .sx20-section-head h2{font-size:clamp(20px,1.9vw,28px)}.sx20-root .sx20-brand-row{gap:12px}.sx20-root .sx20-brand{min-height:104px;padding:12px 7px;border-radius:14px;box-shadow:0 4px 15px #13233c0a}.sx20-root .sx20-brand img{width:58px;height:45px;object-fit:contain}.sx20-root .sx20-brand b{font-size:12px}.sx20-root .sx20-category-grid{gap:14px}.sx20-root .sx20-category{height:165px;border-radius:16px}.sx20-root .sx20-category img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}.sx20-root .sx20-category span{font-size:16px;font-weight:900}.sx20-root .sx20-search{padding:17px;gap:10px;border-radius:16px;box-shadow:0 10px 25px #15213a0d}.sx20-root .sx20-cars{gap:20px}.sx20-root .sx20-car{border-radius:17px;overflow:hidden;box-shadow:0 12px 30px #18274312;transition:transform .2s,box-shadow .2s}.sx20-root .sx20-car:hover{transform:translateY(-5px);box-shadow:0 18px 36px #18274324}.sx20-root .sx20-car-media{height:clamp(185px,17vw,265px)}.sx20-root .sx20-car-media img{width:100%;height:100%;object-fit:cover}.sx20-root .sx20-car-info{padding:19px}.sx20-root .sx20-car-info h3{font-size:18px}.sx20-root .sx20-car-info strong{font-size:23px}.sx20-root .sx20-banners{gap:20px;padding-bottom:45px}.sx20-root .sx20-banner{height:230px;border-radius:17px}.sx20-root .sx20-banner img{object-fit:cover;opacity:.7}.sx20-root .sx20-banner h2{font-size:clamp(21px,2vw,30px)}.sx20-root .sx20-why-grid>div{padding:24px 12px}.sx20-root .sx20-no-reviews{padding:32px;border:1px dashed #cbd5e3;border-radius:16px;background:#fff;text-align:center}.sx20-root .sx20-contact{padding:35px clamp(20px,4vw,60px);border-radius:18px}.sx20-root .sx20-visitor-demo{font-size:12px;line-height:1.8}.sx20-root .sx20-owner-strip{font-size:12px}.sx20-root .sx20-car-tag{font-size:10px}.sx20-root .sx20-brand img[src$=".svg"]{min-height:40px}@media(max-width:850px){.sx20-root .sx20-hero{height:420px}.sx20-root .sx20-car-media{height:210px}.sx20-root .sx20-category{height:140px}.sx20-root .sx20-trust>div{min-height:70px}.sx20-root .sx20-banner{height:190px}}@media(max-width:560px){.sx20-root .sx20-hero{height:420px}.sx20-root .sx20-hero-copy h1{font-size:36px}.sx20-root .sx20-brand{min-height:86px}.sx20-root .sx20-brand img{width:45px;height:35px}.sx20-root .sx20-car-media{height:205px}.sx20-root .sx20-car-info{padding:14px}.sx20-root .sx20-banners{grid-template-columns:1fr}.sx20-root .sx20-banner{height:185px}.sx20-root .sx20-section{padding-bottom:27px}}@media(prefers-reduced-motion:reduce){.sx20-root .sx20-car{transition:none}.sx20-root .sx20-car:hover{transform:none}}
/* v21.1: spacing, sharper image presentation and separated category tiles */
.sx133-public-theme .sx22-brand-logo img,.sx133-public-theme .sx22-brands img{object-fit:contain;max-width:100%;max-height:100%}
.sx133-public-theme .sx22-category-grid,.sx133-public-theme .sx22-categories{gap:14px!important}
.sx133-public-theme .sx22-category-card,.sx133-public-theme .sx22-category{overflow:hidden;border-radius:14px}
.sx133-public-theme .sx22-category-card img,.sx133-public-theme .sx22-category img{width:100%;height:100%;object-fit:cover}

/* v21.2 — public storefront follows SouqX global dark mode (same body/html.dark contract as Studio). */
:is(html.dark,body.dark) .sx20-root{
 --sx20-bg:#101724;--sx20-ink:#edf3fc;--sx20-muted:#a7b6cc;--sx20-border:#303d51;--sx20-white:#192536;
 background:var(--sx20-bg)!important;color:var(--sx20-ink)!important;color-scheme:dark;
}
:is(html.dark,body.dark) .sx20-root .sx20-section-head h2,
:is(html.dark,body.dark) .sx20-root .sx20-brand b,
:is(html.dark,body.dark) .sx20-root .sx20-car h3,
:is(html.dark,body.dark) .sx20-root .sx20-why-grid b,
:is(html.dark,body.dark) .sx20-root .sx20-review b{color:#f0f5ff!important}
:is(html.dark,body.dark) .sx20-root .sx20-brand,
:is(html.dark,body.dark) .sx20-root .sx20-trust>div,
:is(html.dark,body.dark) .sx20-root .sx20-search,
:is(html.dark,body.dark) .sx20-root .sx20-car,
:is(html.dark,body.dark) .sx20-root .sx20-why-grid,
:is(html.dark,body.dark) .sx20-root .sx20-review,
:is(html.dark,body.dark) .sx20-root .sx20-no-reviews,
:is(html.dark,body.dark) .sx20-root .sx20-empty,
:is(html.dark,body.dark) .sx20-root .sx20-connected-card,
:is(html.dark,body.dark) .sx20-root .sx20-dialog{
 background:#1b2637!important;border-color:#34445a!important;color:#edf3fc!important;box-shadow:0 10px 24px #0002;
}
:is(html.dark,body.dark) .sx20-root .sx20-search label{
 background:#131e2e!important;border-color:#38475d!important;color:#e5edf9!important;
}
:is(html.dark,body.dark) .sx20-root .sx20-search input,
:is(html.dark,body.dark) .sx20-root .sx20-search select{
 color:#edf3fc!important;background:#131e2e!important;color-scheme:dark;
}
:is(html.dark,body.dark) .sx20-root .sx20-search input::placeholder{color:#a9b8cc!important;opacity:1}
:is(html.dark,body.dark) .sx20-root .sx20-search label>span,
:is(html.dark,body.dark) .sx20-root .sx20-trust small,
:is(html.dark,body.dark) .sx20-root .sx20-car p,
:is(html.dark,body.dark) .sx20-root .sx20-why-grid small,
:is(html.dark,body.dark) .sx20-root .sx20-review p,
:is(html.dark,body.dark) .sx20-root .sx20-no-reviews,
:is(html.dark,body.dark) .sx20-root .sx20-dialog p{color:#aab9cd!important}
:is(html.dark,body.dark) .sx20-root .sx20-demo-detail{
 background:#172235!important;color:#ff7488!important;border-color:#dc465d!important;
}
:is(html.dark,body.dark) .sx20-root .sx20-demo-detail:hover{background:#b91f37!important;color:white!important}
:is(html.dark,body.dark) .sx20-root .sx20-car-footer>span{color:#a7b6cc!important}
:is(html.dark,body.dark) .sx20-root .sx20-why-grid>div{border-color:#34445a!important}
:is(html.dark,body.dark) .sx20-root .sx20-review-avatar{background:#34445a!important;color:#fff!important}
:is(html.dark,body.dark) .sx20-root .sx20-owner-strip,
:is(html.dark,body.dark) .sx20-root .sx20-visitor-demo{background:#32202b!important;color:#ffc3cd!important;border-color:#663547!important}
:is(html.dark,body.dark) .sx20-root .sx20-connected-card b{color:#f0f5ff!important}
:is(html.dark,body.dark) .sx20-root .sx20-brand img{background:#f6f8fc;border-radius:7px;padding:3px}
/* Prevent white margins from older storefront wrappers around the showroom. */
:is(html.dark,body.dark) .sx20-root main{background:transparent!important}


/* v21.3 — storefront layout rhythm and category collision correction.
   Intentionally scoped to sx20-root; no Store Studio, payment or DB changes. */
.sx20-root{overflow-x:clip}
.sx20-root main{width:100%;min-width:0}
.sx20-root .sx20-section{padding-block:24px 36px;min-width:0}
.sx20-root .sx20-section-head{margin-bottom:22px;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:8px}
.sx20-root .sx20-brand-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;align-items:stretch}
.sx20-root .sx20-brand{min-width:0;width:100%;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}
.sx20-root .sx20-category-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;column-gap:18px!important;row-gap:18px!important;align-items:stretch;width:100%;min-width:0}
.sx20-root .sx20-category-grid>.sx20-category{display:block;position:relative;box-sizing:border-box;min-width:0;max-width:100%;width:100%!important;height:auto!important;min-height:0;aspect-ratio:1.85/1;margin:0!important;transform:none;overflow:hidden;border-radius:16px;isolation:isolate}
.sx20-root .sx20-category-grid>.sx20-category img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.sx20-root .sx20-category-grid>.sx20-category span{inset-inline:14px;bottom:12px;line-height:1.45;max-width:calc(100% - 28px)}
.sx20-root .sx20-category-grid>.sx20-category:hover{transform:none}
.sx20-root .sx20-search{margin-block:12px 26px;min-width:0}
.sx20-root .sx20-search>*{min-width:0}
.sx20-root .sx20-cars{gap:22px}
.sx20-root .sx20-car{min-width:0;width:100%;margin:0}
.sx20-root .sx20-car-media{overflow:hidden}
.sx20-root .sx20-car-info{min-width:0}
.sx20-root .sx20-banners{gap:20px}
@media(max-width:1100px){
 .sx20-root .sx20-brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sx20-root .sx20-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
 .sx20-root .sx20-section{padding:20px 16px 26px}
 .sx20-root .sx20-brand-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
 .sx20-root .sx20-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 .sx20-root .sx20-category-grid>.sx20-category{aspect-ratio:1.55/1;border-radius:12px}
 .sx20-root .sx20-category-grid>.sx20-category span{font-size:12px;inset-inline:9px;bottom:9px;max-width:calc(100% - 18px)}
 .sx20-root .sx20-search{margin-block:10px 20px}
}
@media(max-width:380px){.sx20-root .sx20-category-grid{grid-template-columns:1fr!important}.sx20-root .sx20-brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v21.4 — visual audit: eliminate hero overlap, normalize layout and show real vehicle brand artwork. */
.sx20-root .sx20-hero{overflow:hidden;isolation:isolate}
.sx20-root .sx20-hero-controls{bottom:18px;padding-inline:clamp(18px,3vw,42px)}
.sx20-root .sx20-trust{position:relative;z-index:1;margin:0!important;padding:22px clamp(20px,3vw,48px) 12px;gap:16px;align-items:stretch;transform:none!important}
.sx20-root .sx20-trust>div{min-width:0;min-height:84px;padding:14px 18px;box-shadow:0 8px 20px #10243a12}
.sx20-root .sx20-brand-section{padding-top:32px!important}
.sx20-root .sx20-section{padding-inline:clamp(20px,3vw,48px);padding-bottom:34px;scroll-margin-top:24px}
.sx20-root .sx20-section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-height:38px}
.sx20-root .sx20-section-head h2{flex:0 1 auto;line-height:1.4}
.sx20-root .sx20-accent-line{order:0;flex:0 0 4px}
.sx20-root .sx20-brand-row{gap:14px}
.sx20-root .sx20-brand{min-height:128px;padding:16px 10px;gap:12px}
.sx20-root .sx20-brand img,.sx20-root .sx20-brand img[src$=".svg"]{width:76px;height:68px;min-height:0;max-width:100%;object-fit:contain;object-position:center;background:transparent!important;border-radius:0!important;padding:0!important}
.sx20-root .sx20-brand b{font-size:12px;line-height:1.3;overflow-wrap:anywhere;text-align:center}
.sx20-root .sx20-category-grid{gap:16px!important}
.sx20-root .sx20-category-grid>.sx20-category{aspect-ratio:1.75/1;min-height:132px;border-radius:15px}
.sx20-root .sx20-category-grid>.sx20-category img{transition:transform .2s ease}
.sx20-root .sx20-category-grid>.sx20-category:hover img{transform:scale(1.035)}
.sx20-root .sx20-category-grid>.sx20-category span{inset-inline:14px;bottom:13px}
.sx20-root .sx20-search{margin-top:4px;margin-bottom:28px}
.sx20-root .sx20-inventory{padding-top:10px}
:is(html.dark,body.dark) .sx20-root .sx20-trust{background:transparent}
@media(max-width:1100px){.sx20-root .sx20-brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}.sx20-root .sx20-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.sx20-root .sx20-trust{grid-template-columns:1fr;gap:10px;padding:14px 16px 4px}.sx20-root .sx20-trust>div{min-height:64px}.sx20-root .sx20-brand{min-height:104px}.sx20-root .sx20-brand img,.sx20-root .sx20-brand img[src$=".svg"]{width:56px;height:52px}.sx20-root .sx20-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.sx20-root .sx20-category-grid>.sx20-category{min-height:115px;aspect-ratio:1.45/1}.sx20-root .sx20-section{padding-inline:16px}}
@media(max-width:380px){.sx20-root .sx20-brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}.sx20-root .sx20-category-grid{grid-template-columns:1fr!important}}

/* v21.4 — visual audit: eliminate hero overlap, normalize layout and show real vehicle brand artwork. */
.sx20-root .sx20-hero{overflow:hidden;isolation:isolate}
.sx20-root .sx20-hero-controls{bottom:18px;padding-inline:clamp(18px,3vw,42px)}
.sx20-root .sx20-trust{position:relative;z-index:1;margin:0!important;padding:22px clamp(20px,3vw,48px) 12px;gap:16px;align-items:stretch;transform:none!important}
.sx20-root .sx20-trust>div{min-width:0;min-height:84px;padding:14px 18px;box-shadow:0 8px 20px #10243a12}
.sx20-root .sx20-brand-section{padding-top:32px!important}
.sx20-root .sx20-section{padding-inline:clamp(20px,3vw,48px);padding-bottom:34px;scroll-margin-top:24px}
.sx20-root .sx20-section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-height:38px}
.sx20-root .sx20-section-head h2{flex:0 1 auto;line-height:1.4}
.sx20-root .sx20-accent-line{order:0;flex:0 0 4px}
.sx20-root .sx20-brand-row{gap:14px}
.sx20-root .sx20-brand{min-height:128px;padding:16px 10px;gap:12px}
.sx20-root .sx20-brand img,.sx20-root .sx20-brand img[src$=".svg"]{width:76px;height:68px;min-height:0;max-width:100%;object-fit:contain;object-position:center;background:transparent!important;border-radius:0!important;padding:0!important}
.sx20-root .sx20-brand b{font-size:12px;line-height:1.3;overflow-wrap:anywhere;text-align:center}
.sx20-root .sx20-category-grid{gap:16px!important}
.sx20-root .sx20-category-grid>.sx20-category{aspect-ratio:1.75/1;min-height:132px;border-radius:15px}
.sx20-root .sx20-category-grid>.sx20-category img{transition:transform .2s ease}
.sx20-root .sx20-category-grid>.sx20-category:hover img{transform:scale(1.035)}
.sx20-root .sx20-category-grid>.sx20-category span{inset-inline:14px;bottom:13px}
.sx20-root .sx20-search{margin-top:4px;margin-bottom:28px}
.sx20-root .sx20-inventory{padding-top:10px}
:is(html.dark,body.dark) .sx20-root .sx20-trust{background:transparent}
@media(max-width:1100px){.sx20-root .sx20-brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}.sx20-root .sx20-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.sx20-root .sx20-trust{grid-template-columns:1fr;gap:10px;padding:14px 16px 4px}.sx20-root .sx20-trust>div{min-height:64px}.sx20-root .sx20-brand{min-height:104px}.sx20-root .sx20-brand img,.sx20-root .sx20-brand img[src$=".svg"]{width:56px;height:52px}.sx20-root .sx20-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.sx20-root .sx20-category-grid>.sx20-category{min-height:115px;aspect-ratio:1.45/1}.sx20-root .sx20-section{padding-inline:16px}}
@media(max-width:380px){.sx20-root .sx20-brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}.sx20-root .sx20-category-grid{grid-template-columns:1fr!important}}

/* v21.5 — Brand identity contrast audit: consistent neutral logo plates in both themes. */
.sx20-root .sx20-brand{overflow:hidden;isolation:isolate}
.sx20-root .sx20-brand img,
.sx20-root .sx20-brand img[src$=".svg"]{
  display:block!important;
  width:min(100%,96px)!important;
  height:76px!important;
  min-height:0!important;
  padding:10px!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#f8fafc!important;
  border:1px solid #e2e8f0!important;
  border-radius:12px!important;
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}
:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"],html[data-bs-theme="dark"],body[data-bs-theme="dark"]) .sx20-root .sx20-brand img{
  background:#f8fafc!important;
  border-color:#dbe3ef!important;
  filter:none!important;
  opacity:1!important;
}
@media(max-width:700px){.sx20-root .sx20-brand img,.sx20-root .sx20-brand img[src$=".svg"]{width:70px!important;height:60px!important;padding:7px!important}}