/* JOY Automart homepage brand/control hotfix — owner-approved 2026-08-11.
   Scope is intentionally limited to the public production hero. The existing
   hero, layout, diagnostics, carousel, routes and menu/theme behaviour remain
   unchanged. */

/* --------------------------------------------------------------------------
   OWNER-SUPPLIED JOY AUTOMART LOGO — LEFT PLATE
   -------------------------------------------------------------------------- */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 16 !important;
  left: 2.6% !important;
  top: 6% !important;
  width: 40% !important;
  aspect-ratio: 2.10 / 1 !important;
  height: auto !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(208,168,79,.84) !important;
  border-radius: clamp(16px, 1.7vw, 28px) !important;
  background-color: #050505 !important;
  background-image: url('/homepage-owner-logo-20260811.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 16px rgba(208,168,79,.18),
    0 24px 54px -32px rgba(0,0,0,.88) !important;
  filter: saturate(1.08) contrast(1.05) !important;
}

/* --------------------------------------------------------------------------
   RIGHT EXPERIENCE CENTER SIGNAGE
   Uses the same owner-supplied JOY logo, on the black/gold signage face, with
   EXPERIENCE CENTER retained as live high-resolution CSS text.
   -------------------------------------------------------------------------- */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::after {
  content: "EXPERIENCE CENTER" !important;
  position: absolute !important;
  z-index: 15 !important;
  inset: auto 2.1% 1.8% auto !important;
  width: 48% !important;
  aspect-ratio: 1.72 / 1 !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 5% 6.2% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(208,168,79,.80) !important;
  border-radius: 2px !important;
  background-color: #060606 !important;
  background-image:
    linear-gradient(90deg, transparent 0 5%, rgba(224,194,122,.96) 5% 95%, transparent 95% 100%),
    url('/homepage-owner-logo-20260811.jpg') !important;
  background-position: center 79%, center 30% !important;
  background-size: 88% 1px, 73% auto !important;
  background-repeat: no-repeat !important;
  color: #f7f2ee !important;
  -webkit-text-fill-color: #f7f2ee !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(11px, 1.35vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-align: center !important;
  text-shadow:
    0 0 4px rgba(255,255,255,.34),
    0 0 10px rgba(255,230,159,.28),
    0 0 18px rgba(208,168,79,.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 18px rgba(208,168,79,.16),
    0 24px 58px -34px rgba(0,0,0,.90) !important;
}

/* --------------------------------------------------------------------------
   EXACT OWNER-SUPPLIED BURGUNDY / GOLD MENU — BOTH THEMES
   The image supplies the visible J / hamburger / sun. Existing DOM buttons stay
   in place as transparent interaction areas, so no behaviour is changed.
   -------------------------------------------------------------------------- */
html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card,
html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card {
  position: absolute !important;
  z-index: 24 !important;
  top: 5.5% !important;
  right: 2% !important;
  bottom: auto !important;
  left: auto !important;
  width: 18.5% !important;
  height: auto !important;
  aspect-ratio: 2.65 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border: 1px solid rgba(241,211,135,.98) !important;
  border-radius: 999px !important;
  background-color: #5d0619 !important;
  background-image: url('/homepage-owner-menu-20260811.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 0 4px rgba(255,233,174,.98),
    0 0 13px rgba(224,194,122,.86),
    0 0 30px rgba(208,168,79,.44),
    0 16px 36px -18px rgba(0,0,0,.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter:
    brightness(1.11)
    contrast(1.05)
    saturate(1.06)
    drop-shadow(0 0 5px rgba(255,225,149,.62))
    drop-shadow(0 0 12px rgba(224,194,122,.42)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Additional luminous response on the gold lettering / icon artwork. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card:hover {
  filter:
    brightness(1.16)
    contrast(1.06)
    saturate(1.08)
    drop-shadow(0 0 7px rgba(255,235,183,.78))
    drop-shadow(0 0 16px rgba(224,194,122,.58)) !important;
}

/* Hide the previously CSS-drawn visible icon layers. The real buttons remain
   visible to the accessibility tree and remain fully clickable. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-mark,
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__hamburger,
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button > svg,
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button > span {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-button,
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Match the visual split in the supplied menu artwork. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-button {
  flex: 0 0 72% !important;
  width: 72% !important;
  padding: 0 !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button {
  flex: 0 0 28% !important;
  width: 28% !important;
  padding: 0 !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-button:focus-visible,
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__theme-button:focus-visible {
  outline: 3px solid #e0c27a !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 14px rgba(224,194,122,.26) !important;
}

/* --------------------------------------------------------------------------
   MOBILE / FOLD / PORTRAIT
   Same design, smaller scale only — no alternate styling.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 915px) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::before {
    left: 3.4% !important;
    top: 2.6% !important;
    width: 57% !important;
    aspect-ratio: 2.10 / 1 !important;
    border-radius: clamp(12px, 3.6vw, 22px) !important;
    background-size: cover !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::after {
    right: 3.2% !important;
    bottom: 29% !important;
    width: 54% !important;
    padding: 0 5% 6.4% !important;
    font-size: clamp(8px, 2.35vw, 13px) !important;
    letter-spacing: .14em !important;
    background-position: center 79%, center 29% !important;
    background-size: 88% 1px, 76% auto !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card,
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card {
    top: 1.6% !important;
    right: 3.6% !important;
    width: 35% !important;
    height: auto !important;
    aspect-ratio: 2.65 / 1 !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   JOY VELLOX CARD — OWNER-APPROVED LIGHT + DARK MODE, 2026-08-11
   Light mode follows reference 1; dark mode follows reference 2. The VELLOX
   card keeps a ruby/crimson face in both themes with a continuous neon border.
   -------------------------------------------------------------------------- */
html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox {
  --vellox-neon: #ff3f66;
  --vellox-neon-hot: #ff174f;
  --vellox-gold: #e0b957;
  --vellox-champagne: #f1d48a;
  border: 2px solid var(--vellox-neon) !important;
  color: var(--vellox-gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 28px rgba(255,23,79,.12),
    0 0 0 1px rgba(255,129,151,.34),
    0 0 14px rgba(255,36,82,.92),
    0 0 34px rgba(255,23,79,.60),
    0 18px 42px rgba(83,0,22,.28) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255,220,228,.58);
  border-radius: calc(22px - 3px);
  box-shadow: inset 0 0 18px rgba(255,43,88,.18);
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox > * {
  position: relative;
  z-index: 1;
}

html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-infra-card.joy-infra-card--vellox {
  background:
    radial-gradient(130% 170% at 20% -10%, rgba(255,58,101,.46) 0%, transparent 45%),
    radial-gradient(90% 140% at 96% 100%, rgba(255,37,82,.24) 0%, transparent 48%),
    linear-gradient(115deg, #c4003c 0%, #93002b 24%, #62001b 57%, #36000d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 0 30px rgba(255,23,79,.14),
    0 0 0 1px rgba(255,186,201,.52),
    0 0 16px rgba(255,47,88,.96),
    0 0 40px rgba(255,23,79,.56),
    0 20px 42px rgba(127,13,44,.24) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-infra-card.joy-infra-card--vellox {
  border-color: var(--vellox-neon) !important;
  background:
    radial-gradient(120% 160% at 18% 0%, rgba(255,28,77,.24) 0%, transparent 43%),
    radial-gradient(90% 130% at 94% 100%, rgba(255,23,79,.15) 0%, transparent 48%),
    linear-gradient(115deg, #820022 0%, #570015 28%, #33000c 60%, #190005 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 28px rgba(255,23,79,.12),
    0 0 0 1px rgba(255,100,128,.38),
    0 0 15px rgba(255,42,84,.86),
    0 0 38px rgba(255,23,79,.50),
    0 22px 46px rgba(0,0,0,.48) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox:hover,
html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox:focus-visible {
  border-color: #ff6f8e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 34px rgba(255,23,79,.16),
    0 0 0 1px rgba(255,193,205,.46),
    0 0 20px rgba(255,49,91,1),
    0 0 46px rgba(255,23,79,.72),
    0 22px 48px rgba(83,0,22,.34) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__icon--vellox {
  border: 1px solid rgba(255,82,113,.72) !important;
  border-radius: 28% !important;
  background: linear-gradient(145deg, #18090c, #070506) !important;
  box-shadow:
    inset 0 0 0 1px rgba(224,185,87,.22),
    0 0 16px rgba(255,39,82,.36) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__icon--vellox img {
  border-radius: 28% !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy strong {
  color: var(--vellox-champagne) !important;
  text-shadow: 0 0 12px rgba(224,185,87,.18);
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy small {
  color: #e9c56d !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__badge {
  border: 1px solid rgba(255,73,109,.88) !important;
  color: var(--vellox-champagne) !important;
  background: linear-gradient(180deg, rgba(76,0,17,.96), rgba(32,0,8,.96)) !important;
  box-shadow: 0 0 12px rgba(255,40,84,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__arrow {
  color: var(--vellox-champagne) !important;
  filter: drop-shadow(0 0 6px rgba(224,185,87,.30));
}

@media (max-width: 820px) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox::before {
    border-radius: calc(18px - 3px);
  }
}