/* ==========================================================================
   Endless Garage — Membership Fleet (page 3287, /reservable-vehicles/)
   --------------------------------------------------------------------------
   Companion sheet to eg-account.css. The design tokens, card treatment,
   micro-label scale and hover behaviour are deliberately identical to the
   member account area so the two surfaces read as one system.

   All CSS for this page lives here, NOT in an Elementor HTML widget:
   WordPress strips <style> tags out of widget content when the saving user
   lacks unfiltered_html, which leaves raw CSS printing on the page as text.

   Loaded only on page 3287 (see wp-content/mu-plugins/eg-fleet-styles.php).
   Because WooCommerce / theme / Elementor stylesheets are enqueued far later
   in the document than the child theme, layout and colour declarations here
   need !important to win the cascade.

   The theme's defaults assume a LIGHT background: any text left uncoloured
   renders near-black and disappears on these panels. Every text node below is
   coloured explicitly for that reason.

   Every rule is scoped to .page-id-3287 so nothing leaks off this page.
   ========================================================================== */

:root {
  --eg-bg:      #0A0A0A;
  --eg-panel:   #111111;
  --eg-panel-2: #151515;
  --eg-line:    rgba(255,255,255,.12);
  --eg-line-2:  rgba(255,255,255,.20);
  --eg-lime:    #BDFF3E;
  --eg-ink:     #FFFFFF;
  --eg-body:    #C7C7C7;
  --eg-mute:    #8A8A8A;
}

/* --------------------------------------------------------------------------
   1. Page shell
   The page uses the elementor_header_footer template, so #main.site-main
   holds the Elementor document directly — there is no boxed .wgl-container
   to neutralise, only the theme's white surface and the 40px inline margin
   under the page-header banner.
   -------------------------------------------------------------------------- */
body.page-id-3287 {
  background: var(--eg-bg) !important;
}
body.page-id-3287 #main,
body.page-id-3287 .site-main,
body.page-id-3287 #wrapper,
body.page-id-3287 .page_content_wrap {
  background: var(--eg-bg) !important;
}
body.page-id-3287 #main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* The banner carries an inline margin-bottom:40px, which would open a gap
   between the photograph and the first band. Author !important beats a
   non-important inline declaration. */
body.page-id-3287 .page-header {
  margin-bottom: 0 !important;
}

/* Bands supply their own full-bleed backgrounds and their own gutter, so the
   Elementor boxed container and column padding are flattened out. */
body.page-id-3287 .elementor-3287 .elementor-section > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
}
body.page-id-3287 .elementor-3287 .elementor-widget-wrap {
  padding: 0 !important;
}
body.page-id-3287 .elementor-3287 .elementor-widget {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}
body.page-id-3287 .elementor-3287 .elementor-widget-shortcode .elementor-shortcode {
  display: block;
}

/* --------------------------------------------------------------------------
   2. Shared primitives — same values as eg-account.css
   -------------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-band {
  display: block;
  background: var(--eg-bg) !important;
}
body.page-id-3287 .eg-fl-wrap {
  display: block;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 26px;
}

body.page-id-3287 .eg-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eg-lime) !important;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.4;
}
body.page-id-3287 .eg-rule {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--eg-lime) !important;
  margin: 0 0 24px;
}

/* Buttons ---------------------------------------------------------------- */
body.page-id-3287 .eg-btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--eg-lime);
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
  transition: background .28s, color .28s, border-color .28s;
}
body.page-id-3287 .eg-btn:hover,
body.page-id-3287 .eg-btn:focus {
  background: transparent !important;
  color: var(--eg-lime) !important;
}
body.page-id-3287 .eg-btn--ghost {
  background: transparent !important;
  color: var(--eg-lime) !important;
  border-color: rgba(189,255,62,.45);
}
body.page-id-3287 .eg-btn--ghost:hover,
body.page-id-3287 .eg-btn--ghost:focus {
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
  border-color: var(--eg-lime);
}

/* --------------------------------------------------------------------------
   3. Intro band — the club statement plus the collection at a glance
   -------------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-intro {
  border-bottom: 1px solid var(--eg-line);
}
body.page-id-3287 .eg-fl-intro .eg-fl-wrap {
  padding-top: 76px;
  padding-bottom: 66px;
}
body.page-id-3287 .eg-fl-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: start;
}
body.page-id-3287 .eg-fl-intro__title {
  margin: 0 0 22px !important;
  font-size: clamp(34px, 3.7vw, 50px) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--eg-ink) !important;
  text-align: left !important;
}
body.page-id-3287 .eg-fl-intro__lead {
  margin: 0 0 18px !important;
  max-width: 48ch;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--eg-body) !important;
}
body.page-id-3287 .eg-fl-intro__lead strong {
  color: var(--eg-ink) !important;
  font-weight: 700;
}
body.page-id-3287 .eg-fl-intro__lead a {
  color: var(--eg-lime) !important;
  text-decoration: none !important;
}
body.page-id-3287 .eg-fl-intro__lead a:hover {
  text-decoration: underline !important;
}
body.page-id-3287 .eg-fl-intro__note {
  margin: 26px 0 0 !important;
  padding-top: 24px;
  border-top: 1px solid var(--eg-line);
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--eg-mute) !important;
}
body.page-id-3287 .eg-fl-intro__note strong {
  color: var(--eg-body) !important;
  font-weight: 700;
}

/* Stat tiles — the hairline grid idiom from the account dashboard. */
body.page-id-3287 .eg-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
  border-top: 3px solid var(--eg-lime);
  margin: 0;
  padding: 0;
  list-style: none !important;
}
body.page-id-3287 .eg-stat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px 24px 26px;
  background: var(--eg-panel) !important;
  list-style: none !important;
  margin: 0;
}
body.page-id-3287 .eg-stat::before,
body.page-id-3287 .eg-stat::marker { content: none !important; }
body.page-id-3287 .eg-stat__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-mute) !important;
}
body.page-id-3287 .eg-stat__value {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--eg-ink) !important;
  font-variant-numeric: tabular-nums;
}
body.page-id-3287 .eg-stat__value--lime { color: var(--eg-lime) !important; }
body.page-id-3287 .eg-stat__value--sm { font-size: 24px; letter-spacing: -.02em; }
body.page-id-3287 .eg-stat__of {
  font-size: 17px;
  color: var(--eg-mute) !important;
  font-weight: 700;
  letter-spacing: 0;
}
body.page-id-3287 .eg-stat__foot {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--eg-body) !important;
}

/* --------------------------------------------------------------------------
   4. The collection
   -------------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-coll .eg-fl-wrap {
  padding-top: 60px;
  padding-bottom: 84px;
}
body.page-id-3287 .eg-fl-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--eg-line);
}
body.page-id-3287 .eg-fl-sechead__title {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--eg-lime) !important;
}
body.page-id-3287 .eg-fl-sechead__meta {
  flex: none;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-mute) !important;
}

/* Grid ------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none !important;
  margin: 0;
  padding: 0;
}
body.page-id-3287 .eg-fl-grid > li {
  display: flex;
  list-style: none !important;
  margin: 0;
  padding: 0;
}
body.page-id-3287 .eg-fl-grid > li::before,
body.page-id-3287 .eg-fl-grid > li::marker { content: none !important; }

/* Card ------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line);
  border-radius: 0 !important;
  text-decoration: none !important;
  color: var(--eg-body) !important;
  transition: border-color .3s, transform .3s, background .3s;
}
body.page-id-3287 .eg-fl-card:hover,
body.page-id-3287 .eg-fl-card:focus {
  border-color: rgba(189,255,62,.5);
  transform: translateY(-3px);
  text-decoration: none !important;
}
body.page-id-3287 .eg-fl-card:focus-visible {
  outline: 2px solid var(--eg-lime);
  outline-offset: 2px;
}

body.page-id-3287 .eg-fl-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #060606 !important;
  border-bottom: 1px solid var(--eg-line);
}
body.page-id-3287 .eg-fl-card__media img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .55s ease;
}
body.page-id-3287 .eg-fl-card:hover .eg-fl-card__media img {
  transform: scale(1.045);
}
/* No scrim over the photograph. An earlier version faded the bottom of each
   frame to protect an overlaid label, but the class label lives in the card
   body, so the gradient only muddied the lower half of the car — which is
   where the car actually is in these studio shots. The card border supplies
   all the separation the image needs. */
body.page-id-3287 .eg-fl-card__flag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 6px 11px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0A0A0A !important;
  background: var(--eg-lime) !important;
}

body.page-id-3287 .eg-fl-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 20px 20px;
}
body.page-id-3287 .eg-fl-card__class {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-lime) !important;
}
/* Two lines are reserved so the rate blocks line up across a row regardless
   of how long the vehicle name runs. */
body.page-id-3287 .eg-fl-card__name {
  display: block;
  margin: 0 0 16px !important;
  min-height: 2.5em;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--eg-ink) !important;
}

/* Rate pair — the same hairline-separated tile idiom as the stat grid. */
body.page-id-3287 .eg-fl-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: auto;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
}
body.page-id-3287 .eg-fl-rate {
  display: block;
  padding: 13px 14px 14px;
  background: var(--eg-bg) !important;
}
body.page-id-3287 .eg-fl-rate__k {
  display: block;
  margin-bottom: 7px;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-mute) !important;
}
body.page-id-3287 .eg-fl-rate__v {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--eg-lime) !important;
  font-variant-numeric: tabular-nums;
}
body.page-id-3287 .eg-fl-rate__u {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-mute) !important;
}

body.page-id-3287 .eg-fl-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--eg-line);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-body) !important;
  transition: color .3s;
}
body.page-id-3287 .eg-fl-card__arrow {
  color: var(--eg-lime) !important;
  font-size: 14px;
  line-height: 1;
  transition: transform .3s;
}
body.page-id-3287 .eg-fl-card:hover .eg-fl-card__cta { color: var(--eg-lime) !important; }
body.page-id-3287 .eg-fl-card:hover .eg-fl-card__arrow { transform: translateX(4px); }

/* Nothing-found fallback (should never render, but must not be black-on-black
   if the query ever comes back empty). */
body.page-id-3287 .eg-fl-empty {
  padding: 30px 28px;
  background: var(--eg-bg) !important;
  border: 1px dashed var(--eg-line-2);
  font-size: 15px !important;
  color: var(--eg-body) !important;
}

/* --------------------------------------------------------------------------
   5. Closing band — how a reservation works
   -------------------------------------------------------------------------- */
body.page-id-3287 .eg-fl-how {
  border-top: 1px solid var(--eg-line);
  background: #0C0C0C !important;
}
body.page-id-3287 .eg-fl-how .eg-fl-wrap {
  padding-top: 66px;
  padding-bottom: 76px;
}
body.page-id-3287 .eg-fl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 40px;
  padding: 0;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
  list-style: none !important;
}
body.page-id-3287 .eg-fl-steps > li {
  display: block;
  padding: 28px 28px 30px;
  background: var(--eg-panel) !important;
  list-style: none !important;
  margin: 0;
}
body.page-id-3287 .eg-fl-steps > li::before,
body.page-id-3287 .eg-fl-steps > li::marker { content: none !important; }
body.page-id-3287 .eg-fl-step__n {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eg-lime) !important;
}
body.page-id-3287 .eg-fl-step__t {
  display: block;
  margin: 0 0 8px !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--eg-ink) !important;
}
body.page-id-3287 .eg-fl-step__b {
  display: block;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--eg-body) !important;
}

body.page-id-3287 .eg-fl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px 32px;
  padding: 30px 32px;
  background: var(--eg-bg) !important;
  border: 1px solid var(--eg-line);
  border-left: 3px solid var(--eg-lime);
}
body.page-id-3287 .eg-fl-cta__copy {
  display: block;
  margin: 0 !important;
  max-width: 62ch;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--eg-body) !important;
}
body.page-id-3287 .eg-fl-cta__copy strong {
  color: var(--eg-ink) !important;
  font-weight: 700;
}
body.page-id-3287 .eg-fl-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: none;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  body.page-id-3287 .eg-fl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  body.page-id-3287 .eg-fl-intro__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
  body.page-id-3287 .eg-fl-intro .eg-fl-wrap { padding-top: 58px; padding-bottom: 52px; }
  body.page-id-3287 .eg-fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-3287 .eg-fl-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 782px) {
  body.page-id-3287 .eg-fl-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
  }
  body.page-id-3287 .eg-fl-cta__actions { width: 100%; }
  body.page-id-3287 .eg-fl-cta__actions .eg-btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 640px) {
  body.page-id-3287 .eg-fl-wrap { padding-left: 20px; padding-right: 20px; }
  body.page-id-3287 .eg-fl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  body.page-id-3287 .eg-stats { grid-template-columns: minmax(0, 1fr); }
  body.page-id-3287 .eg-fl-card__name { min-height: 0; font-size: 21px !important; }
  body.page-id-3287 .eg-fl-card__media img { aspect-ratio: 16 / 10; }
  body.page-id-3287 .eg-fl-sechead {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body.page-id-3287 .eg-fl-intro .eg-fl-wrap { padding-top: 46px; padding-bottom: 44px; }
  body.page-id-3287 .eg-fl-coll .eg-fl-wrap { padding-top: 46px; padding-bottom: 60px; }
  body.page-id-3287 .eg-fl-how .eg-fl-wrap { padding-top: 50px; padding-bottom: 58px; }
  body.page-id-3287 .eg-fl-steps > li { padding: 24px 22px 26px; }
}