/* Picture menu for the header (inc/mega-menu.php). Loaded only while the menu is on. */

/* The panels replace Bricks' dropdown lists. */
#brxe-hdr005 .bricks-nav-menu > li > .sub-menu { display: none !important; }
.tm-has .brx-submenu-toggle button svg { transition: transform .2s ease; }
.tm-has.tm-on .brx-submenu-toggle button svg { transform: rotate(180deg); }

:root {
  --tm-bg: #17181a; --tm-ink: #fafbfc; --tm-mute: rgba(250,251,252,.58); --tm-line: rgba(250,251,252,.1);
  --tm-link: rgba(250,251,252,.78); --tm-hover: rgba(250,251,252,.04); --tm-accent: #c8a96e;
  --tm-spot: radial-gradient(58% 62% at 50% 58%, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(255,255,255,0) 78%);
  --tm-box: radial-gradient(75% 85% at 50% 60%, #2d3034 0%, #212326 70%, #1d1f22 100%);
  --tm-van: brightness(1.12) contrast(1.04);
}

/* Desktop panels. The header is sticky, so a panel taller than the screen has to
   scroll inside itself or its bottom row can never be reached. */
.tm-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 99;
  max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tm-bg); border-top: 1px solid var(--tm-line);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.tm-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.tm-mega.is-instant { transition: none; }
.tm-mega__inner { width: min(1160px, calc(100% - 80px)); margin: 0 auto; padding: 32px 0 36px; }
.tm-mega__inner--range { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 40px; }
.tm-mega__models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; }

.tm-model, .tm-card {
  display: flex; flex-direction: column; padding: 10px 12px 14px; border-radius: 12px;
  color: var(--tm-ink); text-decoration: none; transition: background .2s ease;
}
.tm-model:hover, .tm-model:focus-visible, .tm-card:hover, .tm-card:focus-visible { background: var(--tm-hover); color: var(--tm-ink); }
.tm-model__img, .tm-card__img { display: block; width: 100%; border-radius: 10px; overflow: hidden; }
.tm-model__img { background: var(--tm-spot); }
.tm-model__img img, .tm-card__img img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.tm-model__img img { aspect-ratio: 2 / 1; object-fit: contain; padding: 7% 6%; box-sizing: border-box; filter: var(--tm-van); }
.tm-card__img img { aspect-ratio: 3 / 2; object-fit: cover; }
.tm-model:hover .tm-model__img img, .tm-card:hover .tm-card__img img { transform: scale(1.04); }
.tm-model__name { display: block; margin-top: 10px; font-size: 20px; line-height: 1.2; font-weight: 400; }
.tm-model__meta { display: flex; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--tm-mute); white-space: nowrap; overflow: hidden; }
.tm-model__meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: -2px 9px 0; opacity: .7; }
@media (max-width: 1279px) {
  .tm-model__meta { flex-direction: column; }
  .tm-model__meta span + span::before { display: none; }
}

.tm-mega__cards { display: grid; grid-template-columns: repeat(var(--tm-cols, 5), minmax(0, 1fr)); gap: 16px; }
/* Logos in place of a picture (All Partners). */
.tm-card__img--logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; aspect-ratio: 3 / 2; background: var(--tm-box); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tm-card__img--logos img { width: auto; max-width: 52%; height: 24px; object-fit: contain; aspect-ratio: auto; }
.tm-card:hover .tm-card__img--logos img { transform: none; }
/* Labels start on one line across the row; a long one wraps without leaving a word on its own. */
.tm-card__name { display: block; margin-top: 12px; font-size: 18px; line-height: 1.25; text-wrap: pretty; }

.tm-mega__rail { border-left: 1px solid var(--tm-line); padding: 6px 0 0 32px; display: flex; flex-direction: column; }
.tm-rail__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--tm-line); border-radius: 0; background: none;
  font: inherit; font-size: 18px; line-height: 1.3; color: var(--tm-ink); text-decoration: none; text-align: left; cursor: pointer;
}
.tm-rail__row:hover, .tm-rail__row:focus-visible { color: var(--tm-accent); background: none; }
.tm-rail__row svg { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.tm-rail__row[aria-expanded="true"] svg { transform: rotate(180deg); }
.tm-types { display: none; padding: 8px 0 0; }
.tm-types.is-open { display: block; }
.tm-types__group { display: flex; flex-direction: column; padding: 6px 0; }
.tm-types__group + .tm-types__group { border-top: 1px solid var(--tm-line); }
.tm-types a { padding: 4px 0; font-size: 15px; line-height: 1.45; color: var(--tm-link); text-decoration: none; }
.tm-types a:hover, .tm-types a:focus-visible { color: var(--tm-accent); }

/* Short laptop screens: flatter tiles, so the nine models fit without scrolling. */
@media (max-height: 800px) {
  .tm-mega__inner { padding: 16px 0 20px; }
  .tm-mega__models { gap: 0 16px; }
  .tm-model { padding: 4px 12px 8px; }
  .tm-model__img img { aspect-ratio: 3 / 1; padding: 4% 6%; }
  .tm-model__name { margin-top: 4px; font-size: 18px; }
  .tm-model__meta { margin-top: 2px; }
  .tm-rail__row { padding: 9px 0; }
  .tm-types { padding-top: 4px; }
  .tm-types__group { padding: 4px 0; }
  .tm-types a { padding: 3px 0; line-height: 1.4; }
}

.tm-dim { position: fixed; inset: 0; z-index: 98; background: rgba(10,10,10,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.tm-dim.is-on { opacity: 1; }
@media (max-width: 991px) { .tm-mega, .tm-dim { display: none; } }

/* Phone accordion */
.tm-mm { display: block !important; }
.tm-mm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; padding: 10px 0 14px; margin-left: -16px; }
.tm-mmodel { display: flex; flex-direction: column; color: #fafbfc; text-decoration: none; }
.tm-mmodel__img { display: block; width: 100%; border-radius: 8px; overflow: hidden; background: var(--tm-box); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tm-mmodel__img img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; padding: 10% 8%; box-sizing: border-box; filter: var(--tm-van); }
.tm-mmodel__name { display: block; margin-top: 7px; font-size: 15px; line-height: 1.2; text-align: center; }
.tm-mm .tm-mm__row { display: flex !important; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.tm-mm .tm-mm__row::-webkit-details-marker { display: none; }
.tm-mm__row svg { width: 12px; height: 12px; transition: transform .2s ease; }
.tm-mm__types[open] > .tm-mm__row svg { transform: rotate(180deg); }
.tm-mmtypes__group { display: flex; flex-direction: column; padding: 4px 0 4px 14px; border-left: 1px solid rgba(255,255,255,.12); }
.tm-mmtypes__group + .tm-mmtypes__group { margin-top: 10px; }
.tm-mmtypes a { padding: 7px 0; font-size: 16px; color: rgba(255,255,255,.75); text-decoration: none; }
.tm-mlist { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.tm-mm .tm-mrow { display: flex; align-items: center; gap: 14px; padding: 5px 0; }
.tm-mrow__img { flex: none; width: 72px; border-radius: 6px; overflow: hidden; }
.tm-mrow__img img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }