/* AutoParts home Feng Shui V2.1 — fixes verified from 2026-10-18 screenshots.
   Only targets the homepage (.apv2). No backend or shared-page changes. */

/* The site's real header already contains navigation: don't draw a second header. */
.apv2 .apv2-intro-nav{display:none!important}

/* The previous landscape asset was a crop of the UI mockup, WITH baked-in
   Russian heading and search field; never display it behind real HTML text. */
.apv2 .apv2-hero-landscape{
  background-image:
    radial-gradient(ellipse at 8% 93%, rgba(42,138,220,.17) 0 12%, transparent 44%),
    radial-gradient(ellipse at 34% 22%, rgba(255,255,255,.96) 0 18%, transparent 56%),
    linear-gradient(105deg,#e5f3ff 0%,#eaf6ff 47%,#f1f9ff 100%)!important;
  background-size:cover!important;
  opacity:1;
}
/* A gentle water / mountain wave, not an image of already-rendered words. */
.apv2 .apv2-hero:before{
  content:"";position:absolute;left:0;bottom:0;width:54%;height:35%;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 95% 48% at 5% 115%, rgba(82,170,232,.17),transparent 88%),
    repeating-linear-gradient(172deg,transparent 0 27px,rgba(55,142,221,.05) 28px 30px,transparent 31px 54px);
}
.apv2 .apv2-hero-art{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 6%,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 6%,#000 22%);
}
.apv2 .apv2-hero-copy{position:relative;z-index:1}
.apv2 .apv2-hero h1,.apv2 .apv2-hero-copy>p,.apv2 .apv2-kicker{text-shadow:none}

/* Source category thumbnails are crops from an illustrated *full page*;
   the left portion contains baked-in text. Fade this part away so only the
   actual part image is visible, leaving live accessible labels unmodified. */
.apv2 .apv2-cat{isolation:isolate}
.apv2 .apv2-cat span{z-index:3;width:63%}
.apv2 .apv2-cat img{
  z-index:1;
  right:-2px;bottom:0;width:65%;max-width:none;height:100%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 33%,rgba(0,0,0,.25) 49%,#000 69%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 33%,rgba(0,0,0,.25) 49%,#000 69%);
  border-radius:0;
}
.apv2 .apv2-cat strong{max-width:180px;text-wrap:balance}
.apv2 .apv2-cat small{max-width:152px}

/* News is often much taller than its featured product: do not stretch product
   artwork up into a giant blurry rectangle. */
.apv2 .apv2-featured{align-self:start;min-height:216px}
.apv2 .apv2-product-photo{height:202px;min-height:0;align-self:start}
.apv2 .apv2-product-photo img{
  width:100%;height:100%;object-fit:cover;object-position:78% 58%;
}
.apv2 .apv2-feature-layout{align-items:start}
.apv2 .apv2-sidebar{align-self:start}

/* Language selection remains functional in the original base header. */
body:has(.apv2) .language-toolbar{background:#fff;border-bottom:1px solid #e2ebf5}

@media(max-width:1150px){
  .apv2 .apv2-cat img{width:61%}
  .apv2 .apv2-featured{align-self:stretch}
}
@media(max-width:850px){
  .apv2 .apv2-hero-art{opacity:.35}
  .apv2 .apv2-hero-landscape{inset:0!important}
  .apv2 .apv2-featured{align-self:start}
  .apv2 .apv2-product-photo{height:192px}
}
@media(max-width:580px){
  .apv2 .apv2-hero-art{height:240px;opacity:.27}
  .apv2 .apv2-hero-copy{position:relative}
  .apv2 .apv2-cat img{width:82%;height:73%;bottom:0;right:-3px}
  .apv2 .apv2-cat span{width:90%}
  .apv2 .apv2-cat strong{max-width:145px}
  .apv2 .apv2-cat small{max-width:112px}
  .apv2 .apv2-product-photo{height:165px}
}