/* Endless Garage — Luxury Dealership (page 3301).
 *
 * The page was still entirely on the theme's original light treatment: white
 * shell, near-black headings, grey body copy, white product cards. It scored
 * zero contrast failures precisely BECAUSE it was internally consistent — it
 * simply did not match the rest of the site.
 *
 * This is presentation only. No copy, no markup and no layout is changed.
 *
 * Note on selector order: `#main` CONTAINS `.elementor-3301`, never the other
 * way round, so `.elementor-3301 #main …` silently matches nothing. Everything
 * here hangs off the body class the mu-plugin adds.
 */

:root {
  --egd-bg:    #0A0A0A;
  --egd-panel: #111111;
  --egd-alt:   #151515;
  --egd-line:  rgba(255,255,255,.10);
  --egd-line2: rgba(255,255,255,.18);
  --egd-ink:   #FFFFFF;
  --egd-body:  #C9C9C9;
  --egd-mute:  #8E8E8E;
  --egd-lime:  #BDFF3E;
}

/* ---- 1. the shell ------------------------------------------------------ */
body.eg-dealership { background: var(--egd-bg) !important; }
body.eg-dealership #main,
body.eg-dealership .site-main,
body.eg-dealership .elementor-section { background-color: transparent; }

/* ---- 2. headings, eyebrows, body copy ----------------------------------
   The theme assumes a light background, so anything not explicitly coloured
   inherits near-black. Name every one of them. */
body.eg-dealership .dbl__title,
body.eg-dealership .dbl-title,
body.eg-dealership h1, body.eg-dealership h2,
body.eg-dealership h3, body.eg-dealership h4 { color: var(--egd-ink) !important; }

body.eg-dealership .dbl__subtitle {
  color: var(--egd-lime) !important;
  background: none !important;      /* the theme paints a highlight strip behind it */
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
}
body.eg-dealership .dbl__subtitle:before,
body.eg-dealership .dbl__subtitle:after { background: none !important; content: none !important; }

body.eg-dealership #main p,
body.eg-dealership .elementor-widget-text-editor,
body.eg-dealership .elementor-widget-text-editor p,
body.eg-dealership li { color: var(--egd-body) !important; }
body.eg-dealership a { color: inherit; }

/* ---- 3. the jump-nav row ----------------------------------------------- */
body.eg-dealership .elementor-element-14cfcea .elementor-widget-wrap.elementor-element-populated {
  background-color: var(--egd-panel) !important;
  border: 1px solid var(--egd-line);
  border-top: 3px solid var(--egd-lime);
}

/* ---- 4. product cards ---------------------------------------------------
   The card itself is transparent; the visible box is the template's inner
   section (…-d12d11d), which carried a 2px #00000026 border designed to read
   against white. */
body.eg-dealership .e-loop-item .elementor-element-d12d11d {
  background-color: var(--egd-panel) !important;
  border-width: 1px !important;
  border-color: var(--egd-line) !important;
  border-radius: 0 !important;
  transition: border-color .3s, transform .3s;
}
body.eg-dealership .e-loop-item .elementor-element-d12d11d:hover {
  border-color: rgba(189,255,62,.45) !important;
  transform: translateY(-3px);
}
body.eg-dealership .e-loop-item h1, body.eg-dealership .e-loop-item h2,
body.eg-dealership .e-loop-item h3, body.eg-dealership .e-loop-item h4,
body.eg-dealership .e-loop-item .woocommerce-loop-product__title,
body.eg-dealership .e-loop-item .product_title { color: var(--egd-ink) !important; }

/* Price: lime, and the currency symbol must match it — eg-dealer-price.php
   injects a real "$" inside the amount for dealership products. */
body.eg-dealership .e-loop-item .price,
body.eg-dealership .e-loop-item .price *,
body.eg-dealership .e-loop-item .woocommerce-Price-amount,
body.eg-dealership .e-loop-item .woocommerce-Price-currencySymbol {
  color: var(--egd-lime) !important;
  font-weight: 800;
}

/* "View Vehicle" */
body.eg-dealership .e-loop-item .elementor-button {
  background-color: var(--egd-lime) !important;
  color: #0A0A0A !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.eg-dealership .e-loop-item .elementor-button:hover {
  background-color: var(--egd-ink) !important;
  color: #0A0A0A !important;
}
body.eg-dealership .e-loop-item .elementor-button,
body.eg-dealership .e-loop-item .elementor-button * { color: #0A0A0A !important; }

/* ---- 5. theme buttons ---------------------------------------------------
   The theme paints its buttons through ::after, so both the element and the
   pseudo-element have to be coloured or only half the button changes. */
body.eg-dealership .wgl-button,
body.eg-dealership .wgl-button:after { border-radius: 0 !important; }
body.eg-dealership .wgl-button { background: unset !important; }
body.eg-dealership .wgl-button:after { background-color: var(--egd-lime) !important; }
body.eg-dealership .wgl-button .wgl-button-text,
body.eg-dealership .wgl-button span { color: #0A0A0A !important; position: relative; z-index: 2; }
body.eg-dealership .wgl-button:hover:after { background-color: var(--egd-ink) !important; }

/* ---- 6. info boxes and the contact block ------------------------------- */
body.eg-dealership .wgl-info-box,
body.eg-dealership .eael-infobox {
  background: var(--egd-panel) !important;
  border: 1px solid var(--egd-line) !important;
  border-radius: 0 !important;
}
body.eg-dealership .wgl-info-box .info-box_title,
body.eg-dealership .eael-infobox .title,
body.eg-dealership .info-box_title { color: var(--egd-ink) !important; }
body.eg-dealership .wgl-info-box p,
body.eg-dealership .wgl-info-box a,
body.eg-dealership .eael-infobox p { color: var(--egd-body) !important; }
body.eg-dealership .wgl-info-box i,
body.eg-dealership .eael-infobox i,
body.eg-dealership .wgl-info-box svg,
body.eg-dealership .eael-infobox svg { color: var(--egd-lime) !important; fill: var(--egd-lime) !important; }

/* ---- 7. business hours --------------------------------------------------
   Same widget as /contact-us/. Colour it explicitly — the theme's working-hours
   widget is one of the ones that inherits near-black. */
body.eg-dealership .wgl-working-hours,
body.eg-dealership .wgl-working-hours * { color: var(--egd-body) !important; }
body.eg-dealership .working-item_day { color: var(--egd-ink) !important; }
body.eg-dealership .working-item_hours { color: var(--egd-ink) !important; font-weight: 600; }
body.eg-dealership .working-item {
  border-bottom: 1px solid var(--egd-line) !important;
  padding: 8px 0;
}
body.eg-dealership .working-item:last-child { border-bottom: 0 !important; }

/* ---- 8. the enquiry form ----------------------------------------------- */
body.eg-dealership .wpforms-field-label,
body.eg-dealership .wpforms-field-sublabel { color: var(--egd-mute) !important; }
body.eg-dealership .wpforms-field input[type="text"],
body.eg-dealership .wpforms-field input[type="email"],
body.eg-dealership .wpforms-field input[type="tel"],
body.eg-dealership .wpforms-field select,
body.eg-dealership .wpforms-field textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--egd-line2) !important;
  border-radius: 0 !important;
  color: var(--egd-ink) !important;
}
body.eg-dealership .wpforms-field input::placeholder,
body.eg-dealership .wpforms-field textarea::placeholder { color: #6E6E6E !important; }
body.eg-dealership .wpforms-field-label-inline,
body.eg-dealership .wpforms-field-label-inline * { color: #EDEDED !important; }
body.eg-dealership .wpforms-submit {
  background: var(--egd-lime) !important;
  color: #0A0A0A !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.eg-dealership .wpforms-submit:hover { background: var(--egd-ink) !important; }

/* intl-tel-input: the blanket input padding above would otherwise put the flag
   on top of the placeholder. Same fix as eg-popup.css and the quote modal. */
body.eg-dealership .iti { display: block; width: 100%; }
body.eg-dealership .iti__country-container { width: auto !important; }
body.eg-dealership .iti__selected-country {
  padding: 0 10px !important; width: auto !important; min-width: 0 !important;
  background: transparent !important; border: 0 !important; height: 100% !important;
}
body.eg-dealership .iti input[type=tel] { padding-left: 68px !important; }
body.eg-dealership .iti__country-list { background: #141414 !important; color: #EDEDED !important; }
body.eg-dealership .iti__country-name,
body.eg-dealership .iti__dial-code { color: #EDEDED !important; }

/* ---- 9. "Sold" badge --------------------------------------------------- */
body.eg-dealership .e-loop-item .elementor-widget-heading .elementor-heading-title[class*="sold"],
body.eg-dealership .eg-sold-badge { color: var(--egd-lime) !important; }

/* ---- 10. product title over the image ----------------------------------
   The loop template pulls the title up over the bottom of the photo: its
   .elementor-widget-container carries margin-top:-50px (with 30px padding to
   compensate) and the heading itself another -8px, so ~26px of text lands on
   the image. That was survivable as dark text on a white card; as white text on
   a photograph it is unreadable over any pale car — the BMW M3 and the Ferrari
   512 TR were the worst.

   Drop the title onto the panel instead of over the picture. Same treatment as
   every other card on the site. */
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title > .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 16px !important;
}
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title h1,
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title h2,
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title h3,
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title h4,
body.eg-dealership .e-loop-item .product_title {
  margin-top: 0 !important;
  text-shadow: none !important;
}

/* The title container also carried a fade-to-white gradient
   -- linear-gradient(rgba(255,255,255,0), #FFFFFF) -- whose job was to blend
   the bottom of the photo into a white card so dark text stayed legible. On a
   dark card it fades to near-white under WHITE text: sampling the pixels behind
   "2023 BMW M3" gave rgb(221,221,221). With the title no longer overlapping the
   image the fade has nothing left to do, so drop it and let the panel show. */
body.eg-dealership .e-loop-item .elementor-widget-woocommerce-product-title > .elementor-widget-container {
  background-image: none !important;
  background-color: transparent !important;
}

/* ---- 11. Business Hours: one card, not two mismatched widgets -----------
   Same widget pair and the same three-level constraint as /contact-us/:
     .elementor-widget-wgl-working-hours   max-width: 50%
     > .elementor-widget-container         margin: -25px 0 0 65px
   The 50% squeezed the rows into the left half, the 65px pushed them right of
   the panel, and the -25px pulled them up under the heading. Fix all three and
   continue the panel down so the heading and the hours read as one card. */
body.eg-dealership .elementor-element-49108b5 { margin-bottom: 0 !important; }
body.eg-dealership .elementor-element-49108b5 .eael-infobox { border-bottom: 0 !important; }

body.eg-dealership .elementor-widget-wgl-working-hours {
  max-width: 100% !important;
  width: 100% !important;
}
body.eg-dealership .elementor-widget-wgl-working-hours > .elementor-widget-container {
  margin: 0 !important;
  background: var(--egd-panel);
  border: 1px solid var(--egd-line);
  border-top: 0;
  padding: 2px 26px 16px !important;
}
body.eg-dealership .wgl-working-hours { width: 100% !important; max-width: none !important; }
body.eg-dealership .working-item_hours { min-width: 90px; text-align: right; flex: 0 0 auto; }

/* ---- 12. dealer disclosure ---------------------------------------------
   Fine print, and styled as such: no accent colour, no panel, no border, no
   heading. Small, wide-set, and separated by whitespace rather than a rule, so
   it reads as a legal footnote and does not compete with the page.

   The colour is #787878 on #0A0A0A -- about 4.6:1. That is deliberately at the
   readable end of "muted": the notice exists to be legally effective, and one
   that cannot be read is not a disclosure. Do not darken it further. */
body.eg-dealership .eg-disclosure {
  max-width: 1200px;
  margin: 56px auto 8px;
  padding: 0 20px 28px;
}
/* Specificity: the page-wide `body.eg-dealership #main p` rule carries an ID,
   which beats two classes even with both !important — it was repainting this
   at #C9C9C9 (11.9:1), far louder than fine print should be. Match through
   #main so this wins. */
body.eg-dealership #main .eg-disclosure .eg-disclosure__t {
  margin: 0;
  color: #787878 !important;
  font-size: 11.5px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: .005em;
  text-align: left;
  max-width: 980px;
}
@media (max-width: 640px) {
  body.eg-dealership .eg-disclosure { margin-top: 40px; padding: 0 16px 22px; }
  body.eg-dealership #main .eg-disclosure .eg-disclosure__t { font-size: 11px !important; }
}