/* T7_HERO_SKIN_v1: hero background/padding/text now live in HeroSection.module.css.
   The old !important block fought the new layout, so it is removed here. The filter
   pull-up is retuned from -160px to -62px for the new 128px bottom padding. */
/* SKIN_VARIZE_v1: brand greens -> var(--primary-color) so dac.dealers.brand_color drives the skin */

div[class*="_heroImage_"]{display:none !important;}


span[class*="_inventorySection_"]{color:#ffffff !important;text-decoration:underline;cursor:pointer;}
div[class*="_homeFilterContainer_"]{background:#fff !important;border-radius:14px !important;box-shadow:0 1px 4px rgba(0,0,0,0.08) !important;border:none !important;padding:14px !important;}
body:has(div[class*="_heroSection_"]) div[class*="_homeFilterContainer_"]{margin:-88px 12px 16px !important;position:relative;z-index:2;}
div[class*="_homeFilterContainer_"] input[type="text"]{border:1.5px solid #D3D1C7 !important;border-radius:10px !important;padding:11px 12px !important;font-size:14px !important;box-sizing:border-box !important;}
div[class*="_homeFilterContainer_"] input[type="text"]:focus{border-color:var(--primary-color) !important;outline:none !important;}
div[class*="_homeFilterContainer_"] select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none'/></svg>") no-repeat right 12px center !important;border:1.5px solid #D3D1C7 !important;border-radius:10px !important;padding:11px 34px 11px 12px !important;font-size:14px !important;color:#2C2C2A !important;box-sizing:border-box !important;}
div[class*="_homeFilterContainer_"] select:focus{border-color:var(--primary-color) !important;outline:none !important;}
div[class*="_homeFilterContainer_"] label{font-size:13px !important;color:#5F5E5A !important;font-weight:500 !important;}
div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"]{background-color:var(--primary-color) !important;color:#fff !important;border:none !important;border-radius:10px !important;padding:13px 24px !important;font-size:15px !important;font-weight:500 !important;box-shadow:none !important;cursor:pointer;}
div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"]:hover{background-color:var(--primary-color) !important;}
body:has(div[class*="_heroSection_"]) div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"]{width:100% !important;}


/* T7M_SKIN_MOBILE_v1 - phones only: filter flows BELOW the hero on the dark panel.
   Desktop >600px keeps the white card straddle exactly as before. */
@media (max-width: 600px){
  div[class*="_homeFilterContainer_"]{background:linear-gradient(180deg,#1a0808 0%,#2a0e0e 100%) !important;border-radius:0 !important;box-shadow:none !important;padding:1.2rem 1.3rem 3rem !important;}
  body:has(div[class*="_heroSection_"]) div[class*="_homeFilterContainer_"]{margin:0 !important;}
  div[class*="_homeFilterContainer_"] label{color:rgba(255,255,255,0.88) !important;}
  div[class*="_homeFilterContainer_"] select{border:none !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='2' fill='none'/></svg>") !important;}
  div[class*="_homeFilterContainer_"] span[class*="_findCarButton_"] button{background-color:#A32D2D !important;width:100% !important;letter-spacing:2px !important;text-transform:uppercase !important;border-radius:6px !important;padding:14px !important;}
}


/* T7D_SEARCH_BAND_v1 - desktop: search leaves the straddling white card and becomes
   a full-width dark band directly below the hero. Mobile <=600px unaffected
   (T7M_SKIN_MOBILE_v1 handles it). */
@media (min-width: 601px){
  div[class*="_homeFilterContainer_"]{background:#1a0808 !important;border-radius:0 !important;box-shadow:none !important;padding:1.4rem 2rem !important;}
  body:has(div[class*="_heroSection_"]) div[class*="_homeFilterContainer_"]{margin:0 !important;position:static !important;}
  div[class*="_homeFilterContainer_"] label{color:rgba(255,255,255,0.8) !important;letter-spacing:0.5px !important;}
  div[class*="_homeFilterContainer_"] select{border:none !important;border-radius:6px !important;}
  div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"]{background-color:#A32D2D !important;letter-spacing:1px !important;text-transform:uppercase !important;}
  div[class*="_centeredDiv_"]{background:transparent !important;box-shadow:none !important;max-width:900px !important;margin:0 auto !important;position:static !important;transform:none !important;width:100% !important;height:auto !important;}
}


/* T7D_TILES_BAND_v1 - desktop: tiles sit on a tinted band below the search band,
   solid maroon cards. Mobile <=600px untouched. */
@media (min-width: 601px){
  div[class*="_tilesWrap_"]{background:#f3ecec !important;padding:2rem !important;}
  div[class*="_tiles_"]{max-width:900px !important;margin:0 auto !important;}
  div[class*="_tile_"]{background:#4E1214 !important;background-image:none !important;border-radius:8px !important;border:none !important;}
  div[class*="_tile_"] *{color:#ffffff !important;}
  div[class*="_tile_"] [class*="_tileBody_"]{color:rgba(255,255,255,0.85) !important;}
}


/* T7D_HERO_WHITE_v1 - desktop hero text must be white on the maroon (WCAG), not Vite's default slate */
@media (min-width: 601px){
  div[class*="_heroInner_"], div[class*="_heroInner_"] h1, div[class*="_heroInner_"] h2,
  div[class*="_heroInner_"] p, div[class*="_heroInner_"] span{color:#ffffff !important;}
  div[class*="_heroInner_"] p{color:rgba(255,255,255,0.87) !important;}
}


/* T7D_SEARCH_BAND_v2 - the dark band is now the hero's border-bottom; the filter
   container itself paints NOTHING (its background was rendering as a full-page
   curtain over the hero - bisected to that exact rule). Overrides v1 below. */
@media (min-width: 601px){
  div[class*="_homeFilterContainer_"]{background:#1a0808 !important;background-color:#1a0808 !important;padding:1.6rem 2rem 1.9rem !important;margin-top:0 !important;box-shadow:none !important;border-radius:0 !important;}
  body:has(div[class*="_heroSection_"]) div[class*="_homeFilterContainer_"]{margin:0 !important; /* T7D_BAND_V3 - no straddle */position:relative !important;z-index:2 !important;}
  div[class*="_heroSection_"]{border-bottom:0 !important;padding-bottom:0 !important;} /* T7D_NOSTRIPE_v2 */
}


/* T7D_KILL_BEFORE_v1 - the maroon stripe over the desktop band is the container's
   ::before/::after decoration (pseudo-elements are invisible to elementsFromPoint,
   which is why every probe said the band was black). Mobile already hides it. */
@media (min-width: 601px){
  div[class*="_homeFilterContainer_"]::before,
  div[class*="_homeFilterContainer_"]::after,
  div[class*="_centeredDiv_"]::before,
  div[class*="_centeredDiv_"]::after{display:none !important;content:none !important;}
}
