/* Showroom promotion immediately after the opening MX3 hero. */
#wrap.pm-premium #pm-showroom-home {
  background: #f1f6f5;
  color: #1b374f;
  padding: clamp(36px, 6vw, 88px) clamp(20px, 5.5vw, 112px);
}
#pm-showroom-home .pm-showroom-promo {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(32px, 4.8vw, 84px);
  max-width: 1440px;
  margin-inline: auto;
}
#wrap.pm-premium #pm-showroom-home h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(35px, 3.3vw, 58px);
  line-height: 1.035;
  font-weight: 600;
  letter-spacing: -.055em;
  color: #1b374f;
  text-wrap: balance;
}
#pm-showroom-home h2 em { display: block; font-style: normal; color: #196e73; }
#wrap.pm-premium #pm-showroom-home p {
  max-width: 37ch;
  margin: 18px 0 22px;
  color: #3d535f;
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.5;
  letter-spacing: -.012em;
}
#wrap.pm-premium #pm-showroom-home .pm-showroom-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #1b374f;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
#pm-showroom-home .pm-showroom-enter span { font: 22px/1 Arial, sans-serif; color: #a5e5df; }
#wrap.pm-premium #pm-showroom-home .pm-showroom-enter:hover { background: #224b5c; }
#wrap.pm-premium #pm-showroom-home .pm-showroom-enter:focus-visible,
#top .top_menu a[href="/showroom"]:focus-visible {
  outline: 3px solid #12636a !important;
  outline-offset: 3px;
}
#pm-showroom-home .pm-showroom-panorama {
  margin: 0;
  overflow: hidden;
  --pm-frame-radius: 16px;
  --pm-frame-width: 4px;
  padding: var(--pm-frame-width);
  border-radius: var(--pm-frame-radius);
  background: #438a89;
  background: conic-gradient(from var(--pm-frame-angle, 298deg), #498b8b 0deg 200deg,
    #45abae 252deg, #39d6ca 283deg, #b9fff4 309deg, #1faeae 331deg, #498b8b 360deg);
  box-shadow: 0 12px 30px -19px rgb(23 93 94 / 44%);
}
#pm-showroom-home .pm-showroom-panorama img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1948 / 819;
  object-fit: contain;
  border-radius: calc(var(--pm-frame-radius) - var(--pm-frame-width));
}

/* A single lap follows the arrival of the panorama from the MX3 hero. */
@property --pm-frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 298deg;
}
@keyframes pm-showroom-frame-trace {
  from { --pm-frame-angle: -62deg; }
  to { --pm-frame-angle: 298deg; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #pm-showroom-home .pm-showroom-panorama {
      animation: pm-showroom-frame-trace auto linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 65%;
    }
  }
  @supports not (animation-timeline: view()) {
    #pm-showroom-home:focus-within .pm-showroom-panorama {
      animation: pm-showroom-frame-trace 2.8s ease-out both;
    }
    @media (hover: hover) {
      #pm-showroom-home:hover .pm-showroom-panorama {
        animation: pm-showroom-frame-trace 2.8s ease-out both;
      }
    }
  }
}
@media (forced-colors: active) {
  #pm-showroom-home .pm-showroom-panorama { outline: 2px solid CanvasText; }
}
@media (max-width: 767px) {
  #pm-showroom-home .pm-showroom-promo { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  #wrap.pm-premium #pm-showroom-home h2 { max-width: 19ch; font-size: clamp(34px, 7.6vw, 45px); }
  #wrap.pm-premium #pm-showroom-home p { max-width: 48ch; margin: 12px 0 18px; }
  #pm-showroom-home .pm-showroom-panorama { --pm-frame-radius: 12px; --pm-frame-width: 3px; }
}

/* The two existing Odoo menu links share the same URL in the desktop nav and offcanvas. */
@property --pm-led-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#top .top_menu a[href="/showroom"] {
  --pm-led-surface: #19384d;
  --pm-led-angle: 0deg;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  padding: 7px 15px !important;
  border: 2px solid #288b90 !important;
  border-radius: 999px !important;
  background: var(--pm-led-surface) !important;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
@supports (background: conic-gradient(from 0deg, red, blue)) {
  #top .top_menu a[href="/showroom"] {
    border-color: transparent !important;
    background:
      linear-gradient(var(--pm-led-surface), var(--pm-led-surface)) padding-box,
      conic-gradient(from var(--pm-led-angle), #437478 0deg 236deg, #55a5a6 283deg,
        #74e9dc 320deg, #ecfffd 338deg, #4dbab8 349deg, #437478 360deg) border-box !important;
    animation: pm-showroom-led-lap 3.4s linear infinite;
  }
}
#top .top_menu a[href="/showroom"]:is(:hover, :focus-visible) { --pm-led-surface: #254f60; }
#wrapwrap #top #top_menu.top_menu a.nav-link[href="/showroom"] > span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#top .top_menu a[href="/showroom"]::after { content: none !important; }
@keyframes pm-showroom-led-lap { to { --pm-led-angle: 360deg; } }
@media (max-width: 991.98px) {
  #top #top_menu_collapse_mobile .top_menu a[href="/showroom"] { min-height: 44px; margin-block: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #top .top_menu a[href="/showroom"] { animation: none !important; --pm-led-angle: 142deg; }
}
@media (forced-colors: active) {
  #top .top_menu a[href="/showroom"] { border-color: ButtonText !important; }
  #wrapwrap #top #top_menu.top_menu a.nav-link[href="/showroom"] > span { color: ButtonText !important; -webkit-text-fill-color: ButtonText !important; }
}