/* R211 — full-scale VOBOM home refresh.
   Homepage only; preserves all existing content/cards.
   White / #F6F6F6 / #D82626 / #999999 / #333333.
   No competitor images or copy. */
@media (min-width:701px) {
  body:has(main > .hero .hero-carousel) main > .hero.hero {
    display:grid!important;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
    align-items:stretch!important;width:min(1320px,calc(100% - 48px))!important;max-width:1320px!important;
    min-height:610px!important;height:auto!important;margin:28px auto 0!important;padding:0!important;
    overflow:hidden!important;border:1px solid #e7e7e7!important;border-radius:24px!important;
    background:#fff!important;box-shadow:0 16px 44px rgba(30,30,30,.08)!important;isolation:isolate!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero::before{display:none!important;content:none!important}
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy {
    order:0!important;align-self:center!important;width:100%!important;max-width:none!important;
    min-height:610px!important;margin:0!important;padding:clamp(32px,4vw,62px)!important;
    color:#333!important;background:#fff!important;box-shadow:none!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel.hero-carousel {
    position:relative!important;inset:auto!important;order:1!important;align-self:stretch!important;
    width:100%!important;height:auto!important;min-height:610px!important;max-width:none!important;
    margin:0!important;overflow:hidden!important;border-radius:0!important;background:#f6f6f6!important;box-shadow:none!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel .slides,
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel .slide {
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel .slide img {
    position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
    max-width:none!important;object-fit:cover!important;object-position:center center!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel .slide-caption {
    right:18px!important;bottom:18px!important;left:18px!important;width:auto!important;padding:12px 16px!important;
    border:1px solid rgba(255,255,255,.8)!important;border-radius:12px!important;color:#333!important;background:rgba(255,255,255,.94)!important;
  }
}
/* Keep the full page architecture; align section surfaces and cards to the current palette. */
body:has(main > .hero .hero-carousel) main > .vobom-conversion-router,
body:has(main > .hero .hero-carousel) main > .entrance-section,
body:has(main > .hero .hero-carousel) main > .vobom-model-reference,
body:has(main > .hero .hero-carousel) main > .featured-sku-section,
body:has(main > .hero .hero-carousel) main > .home-buyer-support,
body:has(main > .hero .hero-carousel) main > .vobom-fitment-desk,
body:has(main > .hero .hero-carousel) main > .workflow-section,
body:has(main > .hero .hero-carousel) main > .buyer-guides-section,
body:has(main > .hero .hero-carousel) main > .trust-section,
body:has(main > .hero .hero-carousel) main > .coverage-section,
body:has(main > .hero .hero-carousel) main > .assurance-section,
body:has(main > .hero .hero-carousel) main > #vobom-trust-contact {color:#333!important}
body:has(main > .hero .hero-carousel) main > .vobom-conversion-router,
body:has(main > .hero .hero-carousel) main > .vobom-model-reference,
body:has(main > .hero .hero-carousel) main > .workflow-section,
body:has(main > .hero .hero-carousel) main > .trust-section,
body:has(main > .hero .hero-carousel) main > .assurance-section {background:#fff!important}
body:has(main > .hero .hero-carousel) main > .entrance-section,
body:has(main > .hero .hero-carousel) main > .featured-sku-section,
body:has(main > .hero .hero-carousel) main > .buyer-guides-section,
body:has(main > .hero .hero-carousel) main > .coverage-section,
body:has(main > .hero .hero-carousel) main > .vobom-fitment-desk,
body:has(main > .hero .hero-carousel) main > #vobom-trust-contact {background:#f6f6f6!important}
body:has(main > .hero .hero-carousel) main > .home-buyer-support {background:#fff!important}
body:has(main > .hero .hero-carousel) main .home-category-card,
body:has(main > .hero .hero-carousel) main .featured-sku-card,
body:has(main > .hero .hero-carousel) main .vobom-model-reference__card,
body:has(main > .hero .hero-carousel) main .home-guide-article,
body:has(main > .hero .hero-carousel) main .home-buyer-support__item {
  color:#333!important;border-color:#e5e5e5!important;background:#fff!important;box-shadow:0 8px 24px rgba(35,35,35,.06)!important;
}
body:has(main > .hero .hero-carousel) main .home-category-card__body strong,
body:has(main > .hero .hero-carousel) main .featured-sku-copy h3,
body:has(main > .hero .hero-carousel) main .vobom-model-reference__copy strong,
body:has(main > .hero .hero-carousel) main .home-guide-article strong {color:#333!important}
body:has(main > .hero .hero-carousel) main .home-category-card a,
body:has(main > .hero .hero-carousel) main .featured-sku-card a,
body:has(main > .hero .hero-carousel) main .home-guide-article a {color:#333!important}
body:has(main > .hero .hero-carousel) main .home-category-card a:hover,
body:has(main > .hero .hero-carousel) main .featured-sku-card a:hover,
body:has(main > .hero .hero-carousel) main .home-guide-article a:hover {color:#D82626!important}
body:has(main > .hero .hero-carousel) main .home-category-card>img,
body:has(main > .hero .hero-carousel) main .featured-sku-card>.featured-product-image {background:#fff!important;object-fit:contain!important}
body:has(main > .hero .hero-carousel) main .hero .button,
body:has(main > .hero .hero-carousel) main .home-category-card .button,
body:has(main > .hero .hero-carousel) main .featured-sku-card .button {
  background:#D82626!important;border-color:#D82626!important;color:#fff!important;
}
body:has(main > .hero .hero-carousel) main .vobom-fitment-desk {color:#333!important;border-block:1px solid #e5e5e5!important}
/* Mobile: image-first hero; compact copy; preserve content and keep key actions near the top. */
@media (max-width:700px) {
  body:has(main > .hero .hero-carousel) main > .hero.hero {
    display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;
    min-height:0!important;height:auto!important;margin:0!important;padding:0!important;gap:0!important;
    border:0!important;border-radius:0!important;overflow:visible!important;background:#fff!important;box-shadow:none!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero::before {display:none!important;content:none!important}
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-carousel.hero-carousel {
    position:relative!important;inset:auto!important;order:0!important;width:100%!important;
    height:clamp(200px,28svh,245px)!important;min-height:200px!important;max-width:none!important;
    margin:0!important;overflow:hidden!important;border-radius:0!important;background:#f6f6f6!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy {
    position:relative!important;order:1!important;width:100%!important;max-width:none!important;min-height:0!important;
    margin:0!important;padding:18px 16px 22px!important;color:#333!important;background:#fff!important;
    transform:none!important;box-shadow:none!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy h1 {
    max-width:15ch!important;margin:6px 0 8px!important;color:#333!important;
    font-size:clamp(28px,7.8vw,34px)!important;line-height:1.04!important;letter-spacing:-.035em!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .hero-lede {
    max-width:48ch!important;margin:0 0 10px!important;color:#555!important;font-size:14px!important;line-height:1.45!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-search-label {
    margin:8px 0 6px!important;color:#333!important;font-size:14px!important;line-height:1.3!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-search {gap:6px!important}
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-search input,
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-search button {
    min-height:48px!important;font-size:15px!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-search button {
    background:#D82626!important;border-color:#D82626!important;color:#fff!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-quicklinks {
    display:flex!important;flex-wrap:nowrap!important;gap:12px!important;margin:5px 0 8px!important;
    overflow-x:auto!important;white-space:nowrap!important;color:#555!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .vobom-hero-quicklinks a {
    flex:0 0 auto!important;min-height:30px!important;padding:5px 0!important;color:#333!important;font-size:13px!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .hero-actions.hero-actions {
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:8px!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .hero-actions.hero-actions .button {
    display:flex!important;width:100%!important;min-width:0!important;min-height:46px!important;height:auto!important;
    justify-content:center!important;padding:9px 8px!important;color:#fff!important;background:#D82626!important;
    border-color:#D82626!important;font-size:12px!important;line-height:1.2!important;white-space:normal!important;text-align:center!important;
  }
  body:has(main > .hero .hero-carousel) main > .hero.hero > .hero-copy.hero-copy .hero-actions.hero-actions .button:nth-child(2) {
    color:#333!important;background:#fff!important;border:1px solid #999!important;
  }
  body:has(main > .hero .hero-carousel) main .home-category-grid,
  body:has(main > .hero .hero-carousel) main .featured-sku-grid,
  body:has(main > .hero .hero-carousel) main .vobom-model-reference__grid,
  body:has(main > .hero .hero-carousel) main>.home-buyer-support,
  body:has(main > .hero .hero-carousel) main .workflow-grid,
  body:has(main > .hero .hero-carousel) main .home-guide-articles-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
  }
  body:has(main > .hero .hero-carousel) main .home-category-card>img,
  body:has(main > .hero .hero-carousel) main .featured-sku-card>.featured-product-image {aspect-ratio:1/1!important}
  body:has(main > .hero .hero-carousel) main .home-guide-article {
    display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0!important;overflow:hidden!important;
  }
  body:has(main > .hero .hero-carousel) main .home-guide-article>img {
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important;object-fit:cover!important;
  }
  body:has(main > .hero .hero-carousel) main .home-guide-article>*:not(img) {margin:8px 10px 0!important}
  body:has(main > .hero .hero-carousel) main .home-guide-article>*:last-child {margin-bottom:10px!important}
}
@media (max-width:359px) {
  body:has(main > .hero .hero-carousel) main .home-category-grid,
  body:has(main > .hero .hero-carousel) main .featured-sku-grid,
  body:has(main > .hero .hero-carousel) main .vobom-model-reference__grid,
  body:has(main > .hero .hero-carousel) main>.home-buyer-support,
  body:has(main > .hero .hero-carousel) main .workflow-grid,
  body:has(main > .hero .hero-carousel) main .home-guide-articles-grid {grid-template-columns:minmax(0,1fr)!important}
}
@media (prefers-reduced-motion:reduce) {
  body:has(main > .hero .hero-carousel) main .home-category-card,
  body:has(main > .hero .hero-carousel) main .featured-sku-card {transition:none!important}
}