/*
  MyTGI inner pages. Loaded after base-new.css by MasterTGINew, and scoped to .mytgi-main-new so the public
  site is unaffected. New MyTGI styling belongs here rather than in <style> blocks in views.
*/

:root {
  --tgi-magenta: #98005d;
  --tgi-magenta-dark: #75004a;
  --tgi-magenta-tint: #fbeef5;
  --tgi-navy: #182866;
  --tgi-ink: #1f2430;
  --tgi-text: #3d4350;
  --tgi-muted: #6b7280;
  --tgi-line: #e6e6ea;
  --tgi-canvas: #f5f5f7;
  --tgi-surface: #ffffff;
  --tgi-radius: 14px;
  --tgi-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --tgi-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 32px rgba(16, 24, 40, 0.1);
  --tgi-measure: 70ch;
  --tgi-space: clamp(24px, 3vw, 40px);
}

/* ── Page title (was the banner) ─────────────────────────────────────────────
   MyTGI pages had a photo banner above the content. It's now a plain title and breadcrumb so the content starts
   straight away. The banner markup is shared (Partials/components/Banner and a few pages' own), so this is done in
   CSS: the photo, video and gradient are hidden and the text is dark. Pages outside MyTGI keep their banners. */

.mytgi-main-new {
  background: var(--tgi-canvas);
}

.mytgi-main-new .inner-banner {
  display: block;
  min-height: 0 !important;
  height: auto;
  margin: 0;
  padding: clamp(24px, 3vw, 36px) 0 0;
  background: transparent;
  overflow: visible;
  text-align: left !important;
}

.mytgi-main-new .inner-banner::after {
  display: none;
}

.mytgi-main-new .inner-banner img,
.mytgi-main-new .inner-banner .video {
  display: none !important;
}

.mytgi-main-new .inner-banner .container {
  position: static;
}

.mytgi-main-new .inner-banner__content {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.mytgi-main-new .inner-banner h1 {
  margin: 0;
  padding: 0;
  color: var(--tgi-ink);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.mytgi-main-new .inner-banner p {
  max-width: var(--tgi-measure);
  margin: 6px 0 0;
  padding: 0;
  color: var(--tgi-muted);
  font-size: 1.05rem;
}

/* Content sections no longer need room for the banner, so they start just under the title. */
.mytgi-main-new .inner-banner + .mytgi-detail,
.mytgi-main-new .inner-banner + section.mytgi-detail {
  padding-top: 20px;
}

.mytgi-main-new .inner-banner ~ .my-tgi-inner,
.mytgi-main-new .inner-banner ~ div .my-tgi-inner {
  margin-top: 20px;
}

.mytgi-main-new .inner-banner + .callout-navigation {
  margin-top: 0;
}

/* ── Breadcrumb (above the page title) ────────────────────────────────────── */

.mytgi-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.mytgi-crumbs li {
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--tgi-muted);
}

.mytgi-crumbs li + li::before {
  content: "\f105";
  font-family: "FontAwesome";
  margin: 0 10px;
  font-size: 0.75rem;
  opacity: 0.7;
}

.mytgi-crumbs a {
  color: var(--tgi-magenta);
  text-decoration: none;
  font-weight: 500;
}

.mytgi-main-new .mytgi-crumbs li,
.mytgi-main-new .mytgi-crumbs a {
  font-size: 0.9rem;
}

.mytgi-crumbs a:hover,
.mytgi-crumbs a:focus-visible {
  text-decoration: underline;
}

.mytgi-crumbs [aria-current="page"] {
  overflow: hidden;
  max-width: 40ch;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On phones the current page is already the heading underneath. */
@media (max-width: 575.98px) {
  .mytgi-crumbs [aria-current="page"] {
    display: none;
  }
}

/* ── Cards and buttons ───────────────────────────────────────────────────── */

.mytgi-card {
  background: var(--tgi-surface);
  border-radius: var(--tgi-radius);
  box-shadow: var(--tgi-shadow);
}

.mytgi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 2px solid var(--tgi-magenta);
  border-radius: 999px;
  background: var(--tgi-magenta);
  color: #fff;
  font: 600 0.95rem/1.2 "franklin-gothic-atf", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mytgi-btn:hover,
.mytgi-btn:focus-visible {
  background: var(--tgi-magenta-dark);
  border-color: var(--tgi-magenta-dark);
  color: #fff;
  text-decoration: none;
}

.mytgi-btn--outline {
  background: transparent;
  color: var(--tgi-magenta);
}

.mytgi-btn--outline:hover,
.mytgi-btn--outline:focus-visible {
  background: var(--tgi-magenta-tint);
  border-color: var(--tgi-magenta);
  color: var(--tgi-magenta);
}

.mytgi-main-new a:focus-visible,
.mytgi-main-new button:focus-visible {
  outline: 3px solid rgba(152, 0, 93, 0.35);
  outline-offset: 2px;
}

/* ── Detail pages: readable column + side card ──────────────────────────── */

.mytgi-detail {
  padding: var(--tgi-space) 0 calc(var(--tgi-space) * 1.5);
  background: var(--tgi-canvas);
}

.mytgi-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "main aside";
  gap: var(--tgi-space);
  align-items: start;
}

.mytgi-detail__main {
  grid-area: main;
  padding: clamp(24px, 4vw, 48px);
}

.mytgi-detail__aside {
  grid-area: aside;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.mytgi-detail__lead {
  max-width: var(--tgi-measure);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tgi-line);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--tgi-ink);
}

.mytgi-detail__lead p:last-child {
  margin-bottom: 0;
}

.mytgi-prose {
  max-width: var(--tgi-measure);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tgi-text);
}

.mytgi-prose p,
.mytgi-prose ul,
.mytgi-prose ol {
  margin: 0 0 1.1em;
  padding-bottom: 0;
}

.mytgi-prose ul,
.mytgi-prose ol {
  padding-left: 1.25em;
}

.mytgi-prose li {
  margin-bottom: 0.4em;
}

.mytgi-prose h2,
.mytgi-prose h3,
.mytgi-prose h4 {
  margin: 1.6em 0 0.5em;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.25 !important;
  color: var(--tgi-ink);
}

.mytgi-prose a {
  color: var(--tgi-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mytgi-prose a:hover {
  color: var(--tgi-magenta-dark);
}

.mytgi-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.mytgi-aside-card {
  overflow: hidden;
}

.mytgi-aside-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-bottom: 1px solid var(--tgi-line);
}

.mytgi-aside-card__logo img {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 120px;
  object-fit: contain;
}

.mytgi-aside-card__actions {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.mytgi-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: var(--tgi-muted);
  font-weight: 500;
  text-decoration: none;
}

.mytgi-back:hover,
.mytgi-back:focus-visible {
  color: var(--tgi-magenta);
}

/* ── Section tabs (profile) ─────────────────────────────────────────────── */

.mytgi-tabs {
  margin-bottom: var(--tgi-space);
  overflow-x: auto;
  scrollbar-width: none;
}

.mytgi-tabs::-webkit-scrollbar {
  display: none;
}

.mytgi-tabs ul {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow);
}

.mytgi-tabs li {
  padding: 0;
}

.mytgi-tabs a {
  display: block;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--tgi-text);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mytgi-tabs a:hover {
  background: var(--tgi-canvas);
  color: var(--tgi-ink);
}

.mytgi-tabs a.is-active {
  background: var(--tgi-magenta);
  color: #fff;
}

/* ── Read-only detail fields ─────────────────────────────────────────────── */

.mytgi-section-head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tgi-line);
}

.mytgi-section-head h2 {
  margin: 0 0 6px;
  padding: 0;
  font-size: 1.5rem;
  color: var(--tgi-ink);
}

.mytgi-section-head p {
  max-width: var(--tgi-measure);
  margin: 0;
  padding: 0;
  color: var(--tgi-muted);
}

.mytgi-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  margin: 0;
}

.mytgi-field--wide {
  grid-column: 1 / -1;
}

.mytgi-field dt {
  margin-bottom: 4px;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mytgi-field dd {
  margin: 0;
  color: var(--tgi-ink);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.mytgi-field a,
.mytgi-contact a,
.mytgi-empty a {
  color: var(--tgi-magenta);
}

.mytgi-muted {
  color: var(--tgi-muted);
  font-style: italic;
}

.mytgi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--tgi-line);
}

.mytgi-empty {
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
}

.mytgi-empty h2 {
  font-size: 1.4rem;
  color: var(--tgi-ink);
}

/* ── Side cards: identity, club, contact ─────────────────────────────────── */

.mytgi-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.mytgi-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tgi-magenta), var(--tgi-navy));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mytgi-identity p {
  margin: 0;
  padding: 0;
}

.mytgi-identity .mytgi-identity__name {
  color: var(--tgi-ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.mytgi-identity .mytgi-identity__meta {
  color: var(--tgi-muted);
  font-size: 0.9rem;
}

.mytgi-aside-block {
  padding: 22px;
}

.mytgi-aside-block h3 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mytgi-aside-block p {
  margin: 0 0 6px;
  padding: 0;
  color: var(--tgi-text);
  font-size: 0.95rem;
}

.mytgi-aside-block .mytgi-aside-block__title {
  color: var(--tgi-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.mytgi-aside-block__more {
  color: var(--tgi-muted) !important;
}

.mytgi-contact {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.mytgi-contact li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  overflow-wrap: anywhere;
}

.mytgi-contact a {
  font: inherit;
  text-decoration: none;
}

.mytgi-contact a:hover {
  text-decoration: underline;
}

.mytgi-contact .fa {
  width: 14px;
  color: var(--tgi-muted);
}

.mytgi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--tgi-magenta);
  font-weight: 600;
  text-decoration: none;
}

.mytgi-link:hover {
  color: var(--tgi-magenta-dark);
}

/* ── Panels, alerts, forms (assistants) ──────────────────────────────────── */

.mytgi-panel {
  padding: clamp(24px, 4vw, 48px);
}

.mytgi-section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.mytgi-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 500;
}

.mytgi-alert--success {
  background: #e8f6ee;
  color: #146c3a;
}

.mytgi-alert--error {
  background: #fdecee;
  color: #a1182c;
}

.mytgi-btn--sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.mytgi-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--tgi-muted);
  font-weight: 500;
}

.mytgi-btn--ghost:hover,
.mytgi-btn--ghost:focus-visible {
  border-color: transparent;
  background: #fdecee;
  color: #a1182c;
}

.mytgi-disclosure > summary {
  display: none;
}

.mytgi-disclosure[open] {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--tgi-line);
  border-radius: 12px;
  background: var(--tgi-canvas);
}

.mytgi-disclosure--inline > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tgi-magenta);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.mytgi-disclosure--inline > summary::-webkit-details-marker {
  display: none;
}

.mytgi-disclosure--inline > summary::after {
  content: "\f107";
  font-family: "FontAwesome";
  transition: transform 0.15s ease;
}

.mytgi-disclosure--inline[open] > summary::after {
  transform: rotate(180deg);
}

.mytgi-disclosure--inline[open] {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

.mytgi-disclosure--inline .mytgi-form {
  margin-top: 14px;
  padding: 20px;
  border-radius: 12px;
  background: var(--tgi-canvas);
}

.mytgi-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.mytgi-form__grid {
  align-items: start;
}

/* base-new.css styles bare labels (uppercase, full width) and `form input[type=…]`; these selectors outrank both. */
.mytgi-form .mytgi-input {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 100%;
  margin: 0;
  font: inherit;
  text-transform: none;
}

.mytgi-input--wide {
  grid-column: 1 / -1;
}

.mytgi-input > span,
.mytgi-checks legend {
  color: var(--tgi-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.mytgi-form .mytgi-input input {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  line-height: 1.4;
  text-indent: 0;
  border: 1px solid #d3d5db;
  border-radius: 10px;
  background: var(--tgi-surface);
  color: var(--tgi-ink);
  font-size: 1rem;
}

.mytgi-form .mytgi-input input:focus {
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
}

.mytgi-input small {
  color: var(--tgi-muted);
  font-size: 0.8rem;
}

.mytgi-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.mytgi-checks legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
}

.mytgi-form .mytgi-checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  font: inherit;
  text-transform: none;
  color: var(--tgi-text);
  font-weight: 500;
  cursor: pointer;
}

.mytgi-form .mytgi-checks input {
  float: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--tgi-magenta);
}

.mytgi-form__actions {
  margin-top: 20px;
}

.mytgi-none {
  margin: 0;
  padding: 8px 0;
}

/* ── People list ─────────────────────────────────────────────────────────── */

.mytgi-people {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mytgi-person {
  padding: 20px 0;
  border-top: 1px solid var(--tgi-line);
}

.mytgi-person:first-child {
  border-top: 0;
  padding-top: 0;
}

.mytgi-person__summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mytgi-person__who {
  flex: 1 1 auto;
  min-width: 0;
}

.mytgi-person__who p {
  margin: 0;
  padding: 0;
}

.mytgi-person .mytgi-person__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--tgi-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.mytgi-person .mytgi-person__email {
  color: var(--tgi-muted);
  font-size: 0.925rem;
  overflow-wrap: anywhere;
}

.mytgi-person .mytgi-person__access {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mytgi-person__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.mytgi-person__actions form {
  margin: 0;
  padding: 0;
}

.mytgi-person__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 10px 0 0 64px;
}

.mytgi-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #146c3a;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.mytgi-pill--muted {
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
}

.mytgi-pill--warn {
  background: #fff4e0;
  color: #8a5300;
}

.mytgi-avatar--sm {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  .mytgi-person__summary {
    flex-wrap: wrap;
  }

  .mytgi-person__actions {
    width: 100%;
    margin-left: 64px;
  }

  .mytgi-person__more {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .mytgi-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mytgi-person__actions {
    margin-left: 0;
  }

  .mytgi-section-head--split .mytgi-btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .mytgi-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .mytgi-actions .mytgi-btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 991.98px) {
  .mytgi-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside" "main";
  }

  .mytgi-detail__layout--main-first {
    grid-template-areas: "main" "aside";
  }

  .mytgi-detail__aside {
    position: static;
  }

  .mytgi-aside-card__logo {
    padding: 20px;
  }

  .mytgi-aside-card__actions {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* ── Price guide brand search ────────────────────────────────────────────── */

.mytgi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mytgi-main-new .brand-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 0 10px;
  text-align: left;
}

.mytgi-main-new .brand-search h2 {
  margin: 0;
}

.mytgi-main-new .brand-search__form {
  flex: 0 1 400px;
  margin: 0;
  padding: 0;
}

.brand-search__field {
  position: relative;
  display: block;
}

.brand-search__field .fa {
  position: absolute;
  top: 50%;
  left: 18px;
  color: var(--tgi-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Outranks base-new.css `form input`. */
.mytgi-main-new .brand-search__field input {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 13px 18px 13px 46px;
  border: 1px solid #d3d5db;
  border-radius: 999px;
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow);
  color: var(--tgi-ink);
  font-size: 1rem;
  line-height: 1.4;
  text-indent: 0;
}

.mytgi-main-new .brand-search__field input:focus {
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
}

.mytgi-main-new .brand-search__status {
  flex: 1 1 100%;
  min-height: 1.4em;
  margin: 0;
  padding: 0;
  color: var(--tgi-muted);
  font-size: 0.9rem;
  text-align: right;
}

/* base-new.css gives the tiles display:flex, which would override the hidden attribute. */
.mytgi-main-new .brand-grid ul li[hidden],
.mytgi-main-new .brand-search__empty[hidden] {
  display: none !important;
}

.mytgi-main-new .brand-search__empty {
  max-width: 520px;
  margin: 24px auto 8px;
  padding: 32px 24px;
  border-radius: var(--tgi-radius);
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow);
  text-align: center;
}

.mytgi-main-new .brand-search__empty p {
  margin: 0 0 16px;
  padding: 0;
  color: var(--tgi-text);
}

@media (max-width: 767.98px) {
  .mytgi-main-new .brand-search__form {
    flex-basis: 100%;
  }

  .mytgi-main-new .brand-search__status {
    text-align: left;
  }
}

/* ── Profile sub-pages: password, club, retainer survey ──────────────────── */

.mytgi-form--narrow {
  max-width: 460px;
}

.mytgi-form__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.mytgi-btn--block {
  width: 100%;
}

.mytgi-form__note {
  margin: 10px 0 0;
  padding: 0;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.mytgi-ticks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.mytgi-ticks li {
  position: relative;
  padding: 0 0 0 26px;
  color: var(--tgi-text);
}

.mytgi-ticks li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--tgi-magenta);
  font-family: "FontAwesome";
  font-size: 0.85rem;
}

.mytgi-link-inline {
  color: var(--tgi-magenta);
  overflow-wrap: anywhere;
}

.mytgi-clubs {
  display: grid;
  gap: 16px;
}

.mytgi-club {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--tgi-line);
  border-radius: 12px;
}

.mytgi-club__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
}

.mytgi-club p {
  margin: 0;
  padding: 0;
}

.mytgi-club .mytgi-club__label {
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mytgi-club .mytgi-club__name {
  margin: 2px 0 6px;
  color: var(--tgi-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.mytgi-club__address {
  margin: 0;
  color: var(--tgi-text);
  font-style: normal;
  line-height: 1.6;
}

/* Retainer survey table */
.mytgi-table-wrap {
  overflow-x: auto;
}

.mytgi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* base-new.css styles bare tables (border, padding, white text, navy headers, striped rows); reset them here. */
table.mytgi-table {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--tgi-text);
}

.mytgi-table tr,
.mytgi-table tr:nth-child(odd),
.mytgi-table th,
.mytgi-table td {
  background: transparent;
}

.mytgi-table th,
.mytgi-table td {
  font-family: "franklin-gothic-atf", sans-serif;
  font-size: 0.95rem;
}

.mytgi-table th,
.mytgi-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tgi-line);
  text-align: left;
  vertical-align: middle;
}

.mytgi-table thead th {
  color: var(--tgi-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mytgi-table td {
  color: var(--tgi-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mytgi-table tbody th {
  color: var(--tgi-text);
  font-weight: 500;
}

.mytgi-table .mytgi-table__group th {
  padding-top: 22px;
  border-bottom: 0;
  color: var(--tgi-ink);
  font-weight: 700;
}

.mytgi-table .mytgi-table__mine th,
.mytgi-table .mytgi-table__mine td {
  border-bottom: 0;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
  font-weight: 700;
}

.mytgi-table .mytgi-table__mine th {
  border-radius: 10px 0 0 10px;
}

.mytgi-table .mytgi-table__mine td:last-child {
  border-radius: 0 10px 10px 0;
}

/* £ prefix on money inputs */
.mytgi-money {
  position: relative;
  display: block;
}

.mytgi-money::before {
  content: "£";
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--tgi-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.mytgi-form .mytgi-money input {
  padding-left: 30px;
}

.mytgi-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--tgi-line);
  color: var(--tgi-muted);
  font-weight: 600;
}

.mytgi-total strong {
  color: var(--tgi-ink);
  font-size: 1.6rem;
}

/* ── Header: TGI Direct in the top bar (desktop; the mobile menu keeps its own link) ── */

.account-information .top-nav__direct a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 2px solid var(--tgi-magenta);
  border-radius: 999px;
  color: var(--tgi-magenta);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.account-information .top-nav__direct a:hover,
.account-information .top-nav__direct a:focus-visible {
  background: var(--tgi-magenta);
  color: #fff;
}

/* ── Academy and news detail pages ───────────────────────────────────────── */

.mytgi-video {
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

/* YouTube embeds arrive with fixed width/height; Vimeo embeds bring their own 16:9 wrapper. */
.mytgi-video > iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.mytgi-detail__hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 28px;
  border-radius: 12px;
}

.mytgi-callout {
  max-width: var(--tgi-measure);
  margin: 28px 0 0;
  padding: 22px 24px;
  border-left: 4px solid var(--tgi-magenta);
  border-radius: 0 12px 12px 0;
  background: var(--tgi-magenta-tint);
}

.mytgi-callout h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  color: var(--tgi-magenta);
  font-size: 1.1rem;
}

.mytgi-callout .mytgi-prose > :last-child {
  margin-bottom: 0;
}

.mytgi-prose--article img {
  margin: 8px 0 16px;
}

.mytgi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.mytgi-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.mytgi-aside-block .mytgi-author p {
  margin: 0;
}

.mytgi-aside-block .mytgi-author__label {
  color: var(--tgi-muted);
  font-size: 0.8rem;
}

.mytgi-aside-block .mytgi-author__name {
  color: var(--tgi-ink);
  font-weight: 700;
}

.mytgi-aside-block .mytgi-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tgi-muted);
}

.mytgi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.mytgi-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tgi-canvas);
  color: var(--tgi-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.mytgi-chip:hover {
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
}

.mytgi-related {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mytgi-related li {
  padding: 0;
}

.mytgi-related a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tgi-ink);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
}

.mytgi-related a:hover span {
  color: var(--tgi-magenta);
}

.mytgi-related img {
  flex: 0 0 80px;
  width: 80px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── Card grid (news) and pager ──────────────────────────────────────────── */

.mytgi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A Cards block's column setting (the Events page uses 3), from tablet width up. */
@media (min-width: 768px) {
  .mytgi-cards--cols-2,
  .mytgi-cards--cols-3,
  .mytgi-cards--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .mytgi-cards--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mytgi-cards--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tiles wrapped in list items (the Events page) fill the item, so a row's tiles are the same height. */
.mytgi-cards > li {
  display: flex;
  margin: 0;
  padding: 0;
}

.mytgi-cards > li > .mytgi-tile {
  flex: 1;
}

.mytgi-tile__meta .fa {
  margin-right: 4px;
}

.mytgi-tile {
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mytgi-tile:hover {
  box-shadow: var(--tgi-shadow-hover);
  transform: translateY(-2px);
}

.mytgi-tile > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.mytgi-tile__image {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tgi-canvas);
}

.mytgi-tile__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mytgi-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.mytgi-tile__meta {
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mytgi-tile__title {
  color: var(--tgi-ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.mytgi-tile__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--tgi-text);
  font-size: 0.925rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mytgi-tile__cta {
  margin-top: auto;
  color: var(--tgi-magenta);
  font-weight: 600;
  font-size: 0.9rem;
}

.mytgi-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  color: var(--tgi-muted);
}

/* ── Benefit tiles (the "Accordian" block on Partner Advantages pages) ─────
   News tiles with the item's logo shown whole on white. Items without a link are buttons that open a dialog. */

.mytgi-main-new .benefits {
  background: transparent;
}

.mytgi-tile > .benefit-tile__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.benefit-tile > a:focus-visible,
.benefit-tile__open:focus-visible {
  outline: 3px solid var(--tgi-magenta);
  outline-offset: -3px;
  border-radius: var(--tgi-radius);
}

.benefit-tile .mytgi-tile__image {
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 20px 28px;
  border-bottom: 1px solid var(--tgi-line);
  background: var(--tgi-surface);
}

.benefit-tile .mytgi-tile__image img {
  object-fit: contain;
}

/* Images already about the frame's shape (mostly photos) run edge to edge. */
.benefit-tile .benefit-tile__logo--fill {
  padding: 0;
}

.benefit-dialog__logo {
  display: block;
  max-width: 220px;
  max-height: 90px;
  margin: 0 0 16px;
  object-fit: contain;
}

.benefit-dialog__subtitle {
  margin: -8px 0 16px;
  color: var(--tgi-muted);
}

.benefit-dialog .user-content {
  color: var(--tgi-text);
  line-height: 1.6;
}

.benefit-dialog .user-content img {
  max-width: 100%;
  height: auto;
}

/* ── Header menu (ToolbarTGINew) ─────────────────────────────────────────────
   Drop-down pictures were cropped to 150px tall. The Advantages banners have their titles and partner logos in the
   image, so the picture keeps the banners' 16:9 shape and shows them whole. */

.navigation > ul > li > ul > li img {
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
}

/* An icon-font icon in the mobile menu, sized like the image icons beside it. */
.navigation .nav-icon {
  width: 23px;
  margin-right: 8px;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

/* ── Price guide: a brand's price files and links (MyTGIPriceGuide.cshtml) ── */

.pg-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.pg-docs > li {
  display: flex;
  margin: 0;
  padding: 0;
}

/* base-new.css indents lists on the brand page and puts a tick, padding and spacing on every item. */
.price-guide-single .pg-docs {
  margin: 0 0 32px;
  padding: 0;
}

.price-guide-single .pg-docs > li {
  margin: 0;
  padding: 0;
}

.price-guide-single .pg-docs > li::before {
  content: none;
}

/* A brand's terms are HTML from the partner system. Some were pasted from Excel as one-cell tables fixed at 710pt or
   more, which pushed the terms table across the address column (American Needle, Masters) and the page sideways on
   phones. Those tables become plain blocks, pasted images shrink to fit, long words wrap, and anything still too
   wide scrolls inside the column. */
.price-guide-single .pg-terms {
  max-width: 100%;
  overflow-x: auto;
}

/* Fixed columns, so pasted content can't widen the table: images shrink to the cell instead. */
.price-guide-single .pg-terms > table {
  width: 100%;
  table-layout: fixed;
}

.price-guide-single .pg-terms > table th:first-child {
  width: 9.5em;
}

/* Only the comments break inside a long word (a URL, say); the term names keep their words whole. */
.price-guide-single .pg-terms td {
  overflow-wrap: break-word;
}

.price-guide-single .pg-terms td:last-child {
  overflow-wrap: anywhere;
}

.price-guide-single .pg-terms td table,
.price-guide-single .pg-terms td tbody,
.price-guide-single .pg-terms td tr,
.price-guide-single .pg-terms td td {
  display: block;
  width: auto !important;
  height: auto !important;
  padding: 0;
  border: 0;
  background: none;
}

.price-guide-single .pg-terms td table {
  margin: 0.75em 0 0;
}

.price-guide-single .pg-terms td img {
  max-width: 100% !important;
  height: auto !important;
}

/* Four contact columns don't fit beside the address column below 992px, or on a phone at all, so each contact
   becomes a block with each detail under a small label (the cells' data-title). Empty details are left out. */
@media (max-width: 991.98px) {
  .price-guide-single table[description="Contacts"],
  .price-guide-single table[description="Contacts"] > tbody,
  .price-guide-single table[description="Contacts"] > tbody > tr,
  .price-guide-single table[description="Contacts"] > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .price-guide-single table[description="Contacts"] {
    padding: 0;
  }

  .price-guide-single table[description="Contacts"] > thead {
    display: none;
  }

  .price-guide-single table[description="Contacts"] > tbody > tr {
    padding: 12px 14px;
  }

  /* Some departments are long lists of counties joined by slashes, with no spaces to break at. */
  .price-guide-single table[description="Contacts"] > tbody > tr > td {
    padding: 3px 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .price-guide-single table[description="Contacts"] > tbody > tr > td:empty {
    display: none;
  }

  .price-guide-single table[description="Contacts"] > tbody > tr > td::before {
    content: attr(data-title);
    display: block;
    color: #6b6b6b;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* On a phone each term is a heading with its comments underneath. */
@media (max-width: 575.98px) {
  .price-guide-single .pg-terms > table,
  .price-guide-single .pg-terms > table > tbody,
  .price-guide-single .pg-terms > table > tbody > tr,
  .price-guide-single .pg-terms > table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .price-guide-single .pg-terms > table {
    padding: 0;
  }

  .price-guide-single .pg-terms > table > thead {
    display: none;
  }

  .price-guide-single .pg-terms > table > tbody > tr {
    padding: 12px 14px;
  }

  .price-guide-single .pg-terms > table > tbody > tr > td {
    padding: 0;
    border: 0;
  }

  .price-guide-single .pg-terms > table > tbody > tr > td:first-child {
    margin-bottom: 4px;
    font-weight: 700;
  }
}

.pg-doc {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  color: var(--tgi-ink);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pg-doc:hover,
.pg-doc:focus-visible {
  box-shadow: var(--tgi-shadow-hover);
  color: var(--tgi-ink);
  text-decoration: none;
  transform: translateY(-2px);
}

.pg-doc:focus-visible {
  outline: 3px solid var(--tgi-magenta);
  outline-offset: 2px;
}

.pg-doc__icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
  font-size: 1.3rem;
}

.pg-doc__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pg-doc__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pg-doc__meta {
  color: var(--tgi-muted);
  font-size: 0.85rem;
}

.pg-doc__action {
  flex: 0 0 auto;
  color: var(--tgi-magenta);
  font-size: 1.15rem;
}

/* A partner advantage's own page (PartnerAdvantage.cshtml). */
.advantage-logo {
  display: block;
  max-width: min(260px, 100%);
  max-height: 110px;
  margin: 0 0 24px;
  object-fit: contain;
}

.advantage-actions {
  display: grid;
  gap: 12px;
}

.mytgi-related--logos img {
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid var(--tgi-line);
  background: var(--tgi-surface);
  object-fit: contain;
}

/* ── Sign-in and password reset (public layout) ──────────────────────────── */

.mytgi-auth {
  position: relative;
  z-index: 5;
  padding: 0 0 64px;
}

.mytgi-auth__layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 360px);
  justify-content: center;
  align-items: start;
  gap: 48px;
}

.mytgi-auth__card {
  margin-top: -72px;
  padding: clamp(24px, 4vw, 40px);
}

.mytgi-auth__card--solo {
  max-width: 460px;
  margin-right: auto;
  margin-left: auto;
}

.mytgi-auth__card--centred {
  text-align: center;
}

.mytgi-auth__card h2 {
  margin: 0 0 6px;
  padding: 0;
  color: var(--tgi-ink);
  font-size: 1.6rem;
  text-transform: none;
}

.mytgi-auth .mytgi-auth__lead {
  margin: 0 0 22px;
  padding: 0;
  color: var(--tgi-muted);
}

.mytgi-auth .mytgi-alert {
  align-items: flex-start;
  font-size: 0.925rem;
  text-align: left;
}

.mytgi-auth .mytgi-alert a {
  color: inherit;
  text-decoration: underline;
}

.mytgi-auth .mytgi-auth__footer {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--tgi-line);
  color: var(--tgi-muted);
  font-size: 0.925rem;
  text-align: center;
}

.mytgi-auth__footer a,
.mytgi-input__row a {
  color: var(--tgi-magenta);
  font-weight: 600;
}

.mytgi-auth__aside {
  padding-top: 40px;
}

.mytgi-auth__aside h3 {
  margin: 0 0 16px;
  padding: 0;
  color: var(--tgi-ink);
  font-size: 1.25rem;
  text-transform: none;
}

.mytgi-auth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
  font-size: 1.6rem;
}

.mytgi-auth__icon--success {
  background: #e8f6ee;
  color: #146c3a;
}

.mytgi-form .mytgi-input__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--tgi-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.mytgi-form .mytgi-input__row a,
.mytgi-form .mytgi-input__row label {
  margin: 0;
  width: auto;
  font: inherit;
  font-weight: 600;
  text-transform: none;
}

.mytgi-form .mytgi-input > label {
  width: auto;
  margin: 0;
  color: var(--tgi-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
}

.mytgi-password {
  position: relative;
  display: block;
}

.mytgi-form .mytgi-password input {
  padding-right: 72px;
}

.mytgi-form .mytgi-password__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tgi-magenta);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  transform: translateY(-50%);
}

.mytgi-form .mytgi-password__toggle:hover {
  background: var(--tgi-magenta-tint);
}

@media (max-width: 991.98px) {
  .mytgi-auth__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .mytgi-auth__aside {
    padding-top: 0;
  }
}

/* ── Header: search box and notifications panel ──────────────────────────── */

.account-information .search-container form {
  margin: 0;
  padding: 0;
}

.account-information .search-container input {
  width: 200px;
  height: auto;
  margin: 0;
  padding: 9px 16px 9px 38px;
  border: 1px solid #d3d5db;
  border-radius: 999px;
  background: #f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
  color: var(--tgi-ink);
  font-size: 0.9rem;
  line-height: 1.3;
  text-indent: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.account-information .search-container input:focus {
  width: 260px;
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
  background-color: #fff;
}

.header-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: -10px;
  z-index: 50;
  width: 320px;
  padding: 16px;
  border-radius: var(--tgi-radius);
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow-hover);
  text-align: left;
}

.js-header-dropdown.is-open .header-panel {
  display: block;
}

.header-panel p.header-panel__title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--tgi-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-panel p.header-panel__empty {
  margin: 0;
  padding: 8px 0;
  color: var(--tgi-muted);
}

.header-panel__list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.header-panel__list li {
  padding: 12px;
  border-radius: 10px;
  background: var(--tgi-canvas);
}

.header-panel__list strong {
  display: block;
  color: var(--tgi-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.header-panel__text,
.header-panel__text p {
  margin: 4px 0 0;
  padding: 0;
  color: var(--tgi-text);
  font-size: 0.85rem;
  line-height: 1.45;
}

.header-panel__text a {
  color: var(--tgi-magenta);
}

/* ── MyTGI search ────────────────────────────────────────────────────────── */

.mytgi-search {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
}

.mytgi-search > .fa {
  position: absolute;
  top: 50%;
  left: 20px;
  color: var(--tgi-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.mytgi-main-new .mytgi-search input {
  flex: 1;
  height: auto;
  margin: 0;
  padding: 15px 18px 15px 50px;
  border: 1px solid #d3d5db;
  border-radius: 999px;
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow);
  color: var(--tgi-ink);
  font-size: 1.05rem;
  line-height: 1.4;
  text-indent: 0;
}

.mytgi-main-new .mytgi-search input:focus {
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
}

.mytgi-search__start h2,
.mytgi-empty h2 {
  margin: 0 0 8px;
  padding: 0;
  color: var(--tgi-ink);
  font-size: 1.3rem;
}

.mytgi-search__start a {
  color: var(--tgi-magenta);
  font-weight: 600;
}

.mytgi-search__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.mytgi-search__summary p {
  margin: 0;
  padding: 0;
  color: var(--tgi-text);
}

.mytgi-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

button.mytgi-chip {
  border: 1px solid var(--tgi-line);
  background: var(--tgi-surface);
  cursor: pointer;
  letter-spacing: normal;
  text-transform: none;
}

.mytgi-chip.is-active {
  border-color: var(--tgi-magenta);
  background: var(--tgi-magenta);
  color: #fff;
}

.mytgi-results {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mytgi-result[hidden] {
  display: none;
}

.mytgi-result > a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  color: inherit;
  text-decoration: none;
}

.mytgi-result:hover {
  box-shadow: var(--tgi-shadow-hover);
}

.mytgi-result__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
}

.mytgi-result__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mytgi-result__kind {
  color: var(--tgi-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mytgi-result__title {
  color: var(--tgi-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.mytgi-result__text {
  overflow: hidden;
  color: var(--tgi-text);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mytgi-result__go {
  color: var(--tgi-muted);
}

@media (max-width: 575.98px) {
  .mytgi-search {
    flex-direction: column;
  }

  .mytgi-search > .fa {
    top: 28px;
  }

  .mytgi-result__text {
    white-space: normal;
  }
}

/* ── Dashboard: Your month ───────────────────────────────────────────────── */

.your-month {
  padding: var(--tgi-space) 0;
  background: var(--tgi-canvas);
}

.your-month__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.your-month__head h2 {
  margin: 0;
  padding: 0;
  color: var(--tgi-ink);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  text-transform: none;
}

.your-month p {
  margin: 0;
  padding: 0;
}

.your-month .your-month__eyebrow {
  margin-bottom: 4px;
  color: var(--tgi-magenta);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.your-month .your-month__sub {
  margin-top: 4px;
  color: var(--tgi-muted);
}

.your-month__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.your-month__stat {
  padding: 20px 22px;
}

.your-month .your-month__label {
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.your-month .your-month__value {
  margin: 4px 0 2px;
  color: var(--tgi-ink);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.your-month .your-month__note {
  color: var(--tgi-muted);
  font-size: 0.875rem;
}

.your-month__note a {
  color: var(--tgi-magenta);
  font-weight: 600;
}

.your-month__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.your-month .mytgi-aside-block p {
  margin-bottom: 6px;
}

.your-month__events {
  display: grid;
  gap: 12px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.your-month__events li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.your-month__event {
  display: block;
  color: var(--tgi-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.your-month__event:hover {
  color: var(--tgi-magenta);
  text-decoration: underline;
}

.your-month .your-month__series {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.your-month__series li {
  padding: 0;
}

.your-month__date {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
  font-weight: 700;
  line-height: 1;
}

.your-month__date span:first-child {
  font-size: 1.1rem;
}

.your-month__date span:last-child {
  margin-top: 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .your-month__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Marketplace ─────────────────────────────────────────────────────────── */

.mp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.mp-bar .mytgi-tabs {
  margin-bottom: 0;
}

.mp-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
}

.mp-filters[hidden],
.mp-card [hidden],
.mytgi-form [data-sell-only][hidden] {
  display: none !important;
}

.mytgi-main-new .mp-filters input,
.mytgi-main-new .mp-filters select,
.mp-dialog .mytgi-form select,
.mp-dialog .mytgi-form textarea {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d3d5db;
  border-radius: 10px;
  background: var(--tgi-surface);
  color: var(--tgi-ink);
  font-size: 1rem;
  line-height: 1.4;
  text-indent: 0;
}

.mp-status {
  margin: 0 0 12px;
  padding: 0;
  color: var(--tgi-muted);
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.mp-card__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.mp-card__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tgi-canvas);
  color: #c4c7cf;
  font-size: 2rem;
}

.mp-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(31, 36, 48, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mp-badge--wanted {
  background: var(--tgi-navy);
}

.mp-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
}

.mp-card__price {
  color: var(--tgi-magenta);
  font-size: 1.15rem;
  font-weight: 700;
}

.mp-card__title {
  overflow: hidden;
  color: var(--tgi-ink);
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-card__meta,
.mp-card__seller {
  color: var(--tgi-muted);
  font-size: 0.85rem;
}

.mp-save {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tgi-muted);
  box-shadow: var(--tgi-shadow);
  cursor: pointer;
}

.mp-save.is-saved,
.mp-save:hover {
  color: var(--tgi-magenta);
}

.mp-more {
  margin-top: 24px;
  text-align: center;
}

.mp-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--tgi-radius);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.3);
}

.mp-dialog::backdrop {
  background: rgba(12, 16, 40, 0.55);
}

.mp-dialog__inner {
  position: relative;
  padding: clamp(20px, 4vw, 36px);
}

.mp-dialog h2 {
  margin: 0 0 16px;
  padding: 0 40px 0 0;
  color: var(--tgi-ink);
  font-size: 1.4rem;
  text-transform: none;
}

.mp-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tgi-canvas);
  color: var(--tgi-ink);
  cursor: pointer;
}

.mp-gallery {
  margin-bottom: 20px;
}

.mp-gallery__main {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: 12px;
  background: var(--tgi-canvas);
  object-fit: contain;
}

.mp-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.mp-gallery__thumb {
  width: 72px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.mp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-detail__info p {
  margin: 0 0 8px;
  padding: 0;
}

.mp-detail__description {
  color: var(--tgi-text);
  line-height: 1.65;
  white-space: pre-line;
}

.mp-seller {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--tgi-canvas);
  color: var(--tgi-muted);
  font-size: 0.9rem;
}

.mp-seller strong {
  color: var(--tgi-ink);
}

.mp-dialog .mytgi-form .mytgi-input input[type="file"] {
  padding: 10px;
}

.mp-type-choice label {
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .mp-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-bar .mytgi-btn {
    width: 100%;
  }
}

/* ── Ask MyTGI assistant ─────────────────────────────────────────────────── */

.ask {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  font-family: "franklin-gothic-atf", sans-serif;
}

.ask__launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--tgi-magenta);
  box-shadow: 0 10px 30px rgba(152, 0, 93, 0.35);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.ask__launch:hover {
  background: var(--tgi-magenta-dark);
}

.ask.is-open .ask__launch {
  display: none;
}

.ask__panel {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 40px));
  overflow: hidden;
  border-radius: 18px;
  background: var(--tgi-surface);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
}

.ask__panel[hidden] {
  display: none;
}

.ask__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--tgi-magenta), var(--tgi-navy));
  color: #fff;
}

.ask__head strong {
  display: block;
  font-size: 1.1rem;
}

.ask__head span {
  display: block;
  opacity: 0.85;
  font-size: 0.8rem;
}

.ask__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

.ask__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  background: var(--tgi-canvas);
}

.ask__intro p {
  margin: 0 0 12px;
  padding: 0;
  color: var(--tgi-text);
  font-size: 0.95rem;
}

.ask__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask__suggestions button {
  padding: 8px 12px;
  border: 1px solid var(--tgi-line);
  border-radius: 999px;
  background: var(--tgi-surface);
  color: var(--tgi-magenta);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.ask__suggestions button:hover {
  border-color: var(--tgi-magenta);
}

.ask__msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ask__msg p {
  margin: 0 0 8px;
  padding: 0;
  font-size: inherit;
  white-space: normal;
}

.ask__msg p:last-child {
  margin-bottom: 0;
}

.ask__msg--user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--tgi-magenta);
  color: #fff;
}

.ask__msg--assistant {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--tgi-surface);
  box-shadow: var(--tgi-shadow);
  color: var(--tgi-ink);
}

.ask__msg--assistant a {
  color: var(--tgi-magenta);
  font-weight: 600;
}

.ask__msg.is-loading {
  color: var(--tgi-muted);
  font-style: italic;
}

.ask__msg.is-error {
  background: #fdecee;
  color: #a1182c;
}

.ask__sources {
  margin: 10px 0 0;
  padding: 10px 0 0 20px;
  border-top: 1px solid var(--tgi-line);
  font-size: 0.8rem;
  white-space: normal;
}

.ask__sources li {
  padding: 0;
}

.ask__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--tgi-line);
}

.ask__form textarea {
  flex: 1;
  max-height: 120px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #d3d5db;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  resize: none;
}

.ask__form textarea:focus {
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
}

.ask__send {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tgi-magenta);
  color: #fff;
  cursor: pointer;
}

.ask .ask__note {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--tgi-muted);
  font-size: 0.7rem;
  text-align: center;
}

@media (max-width: 575.98px) {
  .ask {
    right: 12px;
    bottom: 12px;
  }

  .ask__launch {
    padding: 12px 16px;
  }
}

.your-month__second-link {
  margin-left: 16px;
}

/* base-new.css forces `.header input { padding: 10px 0 !important; text-indent: 25px !important }`. */
.header .account-information .search-container input {
  padding: 9px 16px 9px 38px !important;
  text-indent: 0 !important;
}

/* Components above set display (flex, inline-flex…), which would otherwise beat the hidden attribute. */
.mytgi-main-new [hidden],
.mytgi-auth [hidden],
.ask [hidden] {
  display: none !important;
}

/* base-new.css resets every element's margin to 0, which stops modal dialogs centring themselves. */
dialog.mp-dialog {
  margin: auto;
}

/* base-new.css gives every form textarea a 180px minimum height. */
.ask .ask__form textarea {
  min-height: 0;
  height: 46px;
  padding: 11px 14px;
}

/* Top bar on small desktops: search, Marketplace, TGI Direct, bookmarks, profile and account have to fit on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .account-information li {
    padding-right: 8px;
    padding-left: 8px;
  }

  .header .account-information .search-container input {
    width: 150px;
  }

  .header .account-information .search-container input:focus {
    width: 190px;
  }

  .account-information .top-nav__direct a {
    padding: 7px 12px;
    font-size: 0.85rem;
  }
}

/* ── Financials ──────────────────────────────────────────────────────────── */

.fin h2,
.fin h3,
.fin h4,
.fin h5 {
  padding: 0;
  color: var(--tgi-ink);
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.fin p {
  padding: 0;
}

.fin ol,
.fin ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fin li {
  padding: 0;
}

.fin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.fin-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.fin .fin-eyebrow {
  margin: 0 0 4px;
  color: var(--tgi-magenta);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fin-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.fin-kpi {
  padding: 20px 22px;
}

.fin .fin-kpi__label {
  margin: 0;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fin .fin-kpi__value {
  margin: 4px 0 2px;
  color: var(--tgi-ink);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.fin .fin-kpi__note {
  margin: 0;
  color: var(--tgi-muted);
  font-size: 0.875rem;
}

.fin-kpi__note a {
  color: var(--tgi-magenta);
  font-weight: 600;
}

.fin-up {
  color: #146c3a;
  font-weight: 600;
}

.fin-alert {
  align-items: flex-start;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-ink);
  font-weight: 400;
}

.fin-alert .fa {
  margin-top: 3px;
  color: var(--tgi-magenta);
}

.fin-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.fin-card {
  padding: clamp(20px, 3vw, 32px);
}

.fin-shares,
.fin-market {
  margin-bottom: 16px;
}

.fin-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.fin-card__head h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.fin .fin-card__head p {
  margin: 0;
  color: var(--tgi-muted);
  font-size: 0.925rem;
}

/* Segmented control */
.fin-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--tgi-canvas);
}

.fin .fin-toggle button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tgi-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

.fin .fin-toggle button:hover {
  color: var(--tgi-ink);
}

.fin .fin-toggle button.is-active {
  background: var(--tgi-surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  color: var(--tgi-magenta);
}

.fin-market__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fin [hidden] {
  display: none !important;
}

/* Column chart */
.fin-columns {
  display: grid;
  grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
  height: 240px;
  padding-top: 28px !important;
  border-bottom: 1px solid var(--tgi-line);
}

.fin-column {
  position: relative;
  min-width: 0;
}

.fin-column__track {
  position: absolute;
  inset: 0;
}

.fin-column__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--size);
  border-radius: 8px 8px 0 0;
  background: #e8c3d8;
}

.fin-column.is-current .fin-column__bar {
  background: var(--tgi-magenta);
}

.fin-column.is-partial .fin-column__bar {
  background: repeating-linear-gradient(135deg, var(--tgi-magenta) 0 8px, #ad2c7a 8px 16px);
}

.fin-column.is-future .fin-column__bar {
  height: 0;
}

.fin-column__value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 6px;
  color: var(--tgi-ink);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fin-column.is-future .fin-column__value {
  color: var(--tgi-muted);
  font-weight: 500;
}

.fin-column__label {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding-top: 10px;
  color: var(--tgi-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.fin-column.is-current .fin-column__label {
  color: var(--tgi-magenta);
}

.fin-column__label small {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
}

.fin-panel {
  margin-bottom: 64px;
}

/* Disclosures */
.fin-figures > summary,
.fin-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tgi-magenta);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.fin-figures > summary::-webkit-details-marker,
.fin-more > summary::-webkit-details-marker {
  display: none;
}

.fin-figures > summary::after,
.fin-more > summary::after {
  content: "\f107";
  font-family: "FontAwesome";
  transition: transform 0.15s ease;
}

.fin-figures[open] > summary::after,
.fin-more[open] > summary::after {
  transform: rotate(180deg);
}

.fin-figures[open] > summary {
  margin-bottom: 14px;
}

.fin-more {
  margin-top: 14px;
}

.fin-more[open] > summary {
  margin-bottom: 4px;
}

.fin-table td,
.fin-table th {
  font-variant-numeric: tabular-nums;
}

.fin-table td,
.fin-table thead th:not(:first-child) {
  text-align: right;
}

.fin-table .fin-table__total th,
.fin-table .fin-table__total td {
  font-weight: 700;
}

.fin .fin-footnote {
  margin: 10px 0 0;
  color: var(--tgi-muted);
  font-size: 0.85rem;
}

/* Brand spend */
.fin-brand {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0 !important;
  border-top: 1px solid var(--tgi-line);
}

.fin-brands > .fin-brand:first-child {
  padding-top: 0 !important;
  border-top: 0;
}

.fin-more .fin-brands > .fin-brand:first-child {
  padding-top: 10px !important;
  border-top: 1px solid var(--tgi-line);
}

.fin-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tgi-line);
  border-radius: 10px;
  background: #fff;
  color: var(--tgi-magenta);
  font-weight: 700;
  overflow: hidden;
}

.fin-brand__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.fin-brand__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fin-brand__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--tgi-ink);
  font-weight: 600;
  line-height: 1.3;
}

.fin-brand__name a,
.fin-rank__name a {
  color: inherit;
  text-decoration: none;
}

.fin-brand__name a:hover,
.fin-rank__name a:hover {
  color: var(--tgi-magenta);
  text-decoration: underline;
}

.fin-pill {
  padding: 1px 8px;
  font-size: 0.7rem;
}

.fin-brand__amount {
  color: var(--tgi-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fin-brand__amount small {
  display: block;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.fin-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--tgi-canvas);
  overflow: hidden;
}

.fin-bar > span {
  display: block;
  width: var(--size);
  height: 100%;
  border-radius: inherit;
  background: var(--tgi-magenta);
}

.fin .fin-none {
  margin: 0;
  color: var(--tgi-muted);
}

/* Shares */
.fin-shares__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fin-shares__grid > div {
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--tgi-canvas);
}

.fin-shares__grid > .fin-shares__total {
  background: var(--tgi-magenta);
}

.fin .fin-shares__total p {
  color: rgba(255, 255, 255, 0.85);
}

.fin .fin-shares__total .fin-shares__value {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.fin .fin-shares__figure {
  margin: 4px 0 8px;
  color: var(--tgi-ink);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.fin-shares__figure span {
  margin-left: 6px;
  color: var(--tgi-muted);
  font-size: 1rem;
  font-weight: 600;
}

.fin-meter {
  height: 8px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #dcdce2;
  overflow: hidden;
}

.fin-meter > span {
  display: block;
  width: var(--size);
  height: 100%;
  border-radius: inherit;
  background: var(--tgi-magenta);
}

.fin .fin-shares__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--tgi-text);
  font-size: 0.9rem;
}

.fin-shares__note .fa {
  margin-top: 3px;
  color: var(--tgi-magenta);
}

/* Brand performance */
.fin-ranking__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}

.fin-ranking h5 {
  margin: 0 0 6px;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fin-rank li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 9px 0 !important;
  border-top: 1px solid var(--tgi-line);
}

.fin-rank li:first-child {
  border-top: 0;
}

.fin-rank .fin-bar {
  grid-column: 1 / -1;
}

.fin-rank__name {
  color: var(--tgi-ink);
  font-weight: 600;
}

.fin-rank__value {
  color: var(--tgi-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fin-tip {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--tgi-magenta-tint);
}

.fin .fin-tip p {
  margin: 0;
  color: var(--tgi-text);
}

.fin .fin-tip .fin-tip__title {
  margin-bottom: 4px;
  color: var(--tgi-magenta);
  font-weight: 700;
}

.fin-tip .mytgi-chip {
  background: #fff;
  color: var(--tgi-ink);
}

.fin-tip a.mytgi-chip:hover {
  color: var(--tgi-magenta);
}

.fin-tip .mytgi-chip span {
  margin-left: 4px;
  color: var(--tgi-muted);
  font-weight: 500;
}

/* Help */
.fin-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: var(--tgi-space);
}

.fin-help__card {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
}

.fin-help__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tgi-magenta-tint);
  color: var(--tgi-magenta);
  font-size: 1.1rem;
}

.fin-help__card h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.fin .fin-help__card p {
  margin: 0;
  color: var(--tgi-text);
  font-size: 0.925rem;
}

.fin-print-title {
  display: none;
}

@media (max-width: 991.98px) {
  .fin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .fin-shares__grid,
  .fin-ranking__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .fin-columns {
    height: 200px;
  }

  .fin-column__value {
    font-size: 0.8rem;
  }
}

@media print {
  .header,
  .page-footer,
  .ask,
  .inner-banner,
  .fin-noprint,
  .fin-help,
  .fin-figures > summary,
  .fin-more > summary {
    display: none !important;
  }

  .mytgi-detail.fin {
    padding: 0;
    background: #fff;
  }

  .fin .mytgi-card {
    border: 1px solid var(--tgi-line);
    box-shadow: none;
    break-inside: avoid;
  }

  .fin .fin-panel[hidden],
  .fin .fin-ranking[hidden] {
    display: block !important;
    margin-top: 24px;
  }

  .fin-print-title {
    display: block;
    margin: 0 0 8px;
    font-size: 0.95rem;
  }

  .fin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fin-column__bar,
  .fin-bar > span,
  .fin-meter > span,
  .fin-shares__grid > .fin-shares__total {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Event and venue cards are white on black; the generic MyTGI card title colour made their titles unreadable. */
.mytgi-main-new .card-event .card__content h3,
.mytgi-main-new .card-venue .card__content h3 {
  color: #fff;
}

/* ── Dashboard: banner block ─────────────────────────────────────────────────
   A rounded card. The image is shown whole (supplier artwork often has text in it), with a blurred copy of itself
   filling the space either side. Slides with a title or buttons get a panel beside the image. */

/* Same surface as "Your month" above, rather than the page's darker grey. */
.mytgi-dashboard {
  background: var(--tgi-canvas);
}

.mytgi-dashboard .banner-block {
  margin: 0 0 24px;
  border-radius: var(--tgi-radius);
  background: #10131f;
  box-shadow: var(--tgi-shadow);
  overflow: hidden;
}

.mytgi-dashboard .background-white:has(> .banner-block) {
  background: transparent !important;
}

.mytgi-dashboard .banner-block .splide__track {
  max-width: 100% !important;
}

.mytgi-dashboard .banner-block .banner {
  position: relative;
  top: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0 !important;
  height: clamp(260px, 32vw, 440px);
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

.mytgi-dashboard .banner-block .banner::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: var(--banner-image, none) center / cover no-repeat;
  filter: blur(36px) brightness(0.5) saturate(1.2);
}

.mytgi-dashboard .banner-block .banner__image,
.mytgi-dashboard .banner-block .banner__video {
  position: relative !important;
  flex: 1 1 0;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-width: 0;
}

.mytgi-dashboard .banner-block .banner__image::after {
  display: none;
}

.mytgi-dashboard .banner-block .banner__image a,
.mytgi-dashboard .banner-block .banner__video a {
  display: block;
  width: 100%;
  height: 100%;
}

.mytgi-dashboard .banner-block .banner__image img,
.mytgi-dashboard .banner-block .banner__video video {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  object-fit: contain !important;
  transition: transform 0.4s ease;
}

.mytgi-dashboard .banner-block .banner__image a:hover img {
  transform: scale(1.015);
}

/* Slides with text: the video or image fills its whole column (no gap beside it) at its own shape, uncropped, since
   supplier artwork often runs to the edges. */
.mytgi-dashboard .banner-block .banner.has-content {
  height: auto;
}

.mytgi-dashboard .banner-block .has-content .banner__image,
.mytgi-dashboard .banner-block .has-content .banner__video {
  height: auto !important;
}

.mytgi-dashboard .banner-block .has-content .banner__image img,
.mytgi-dashboard .banner-block .has-content .banner__video video {
  height: 100% !important;
  object-fit: cover !important;
}

/* Text panel */
.mytgi-dashboard .banner-block .banner__content {
  position: relative;
  display: flex;
  flex: 0 0 clamp(260px, 28%, 360px);
  align-items: center;
  width: auto !important;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3vw, 44px);
  background: rgba(10, 12, 28, 0.55);
  color: #fff;
  text-align: left;
}

.mytgi-dashboard .banner-block .position-Left .banner__content {
  order: -1;
}

.mytgi-dashboard .banner-block .banner__content .container,
.mytgi-dashboard .banner-block .banner__content .row,
.mytgi-dashboard .banner-block .banner__content .col-md-12 {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.mytgi-dashboard .banner-block .banner__content .h4 {
  margin: 0 0 8px;
  padding: 0;
  color: rgba(255, 255, 255, 0.8) !important;
  font: 700 0.8rem/1.3 "franklin-gothic-atf", sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mytgi-main-new .mytgi-dashboard .banner-block .banner__content h1 {
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  font: 700 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.15 "franklin-gothic-atf", sans-serif !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

.mytgi-dashboard .banner-block .banner__content p {
  margin: 0 0 18px;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.5;
}

.mytgi-dashboard .banner-block .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mytgi-dashboard .banner-block .button-group .button {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 10px 20px;
  border: 2px solid var(--tgi-magenta);
  border-radius: 999px;
  background: var(--tgi-magenta);
  color: #fff;
  font: 600 0.9rem/1.2 "franklin-gothic-atf", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

.mytgi-dashboard .banner-block .button-group .button:hover {
  border-color: var(--tgi-magenta-dark);
  background: var(--tgi-magenta-dark);
}

.mytgi-dashboard .banner-block .button-group .button.transparent {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}

/* Text laid over a full-bleed image */
.mytgi-dashboard .banner-block .overlay-True .banner__image img {
  object-fit: cover !important;
}

.mytgi-dashboard .banner-block .overlay-True .banner__content {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  max-width: none;
  padding-top: 80px;
  background: linear-gradient(180deg, rgba(10, 12, 28, 0) 0%, rgba(10, 12, 28, 0.85) 100%);
}

/* Arrows and dots (only rendered with more than one slide) */
.mytgi-dashboard .banner-block .splide__arrow {
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.mytgi-dashboard .banner-block .splide__arrow svg {
  width: 14px;
  height: 14px;
  fill: var(--tgi-ink);
}

.mytgi-dashboard .banner-block .splide__arrow:hover svg {
  fill: var(--tgi-magenta);
}

.mytgi-dashboard .banner-block .splide__arrow--prev {
  left: 14px;
}

.mytgi-dashboard .banner-block .splide__arrow--next {
  right: 14px;
}

.mytgi-dashboard .banner-block .splide__pagination {
  bottom: 12px !important;
}

.mytgi-dashboard .banner-block .splide__pagination__page {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.mytgi-dashboard .banner-block .splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.3);
}

@media (max-width: 767.98px) {
  .mytgi-dashboard .banner-block .banner {
    flex-direction: column !important;
    height: auto;
  }

  .mytgi-dashboard .banner-block .banner__image,
  .mytgi-dashboard .banner-block .banner__video {
    flex: 0 0 auto;
    height: auto !important;
  }

  .mytgi-dashboard .banner-block .banner__image img,
  .mytgi-dashboard .banner-block .banner__video video {
    height: auto !important;
  }

  .mytgi-dashboard .banner-block .banner__content,
  .mytgi-dashboard .banner-block .overlay-True .banner__content {
    position: relative;
    flex: 0 0 auto;
    order: 1 !important;
    padding: 22px 20px;
    background: rgba(10, 12, 28, 0.7);
  }
}

/* Header logo: the image is 3x for sharp screens. */
.header .logo img.mytgi-logo {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
}

@media (max-width: 991.98px) {
  .header .logo img.mytgi-logo {
    height: 36px;
  }
}

/* Header: bookmarked brands, and the profile link beside them */
.account-information .header-bookmarks {
  position: relative;
}

.account-information .header-bookmarks > a,
.account-information .header-profile > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--tgi-ink);
  font-size: 1.35rem;
  text-decoration: none;
}

.account-information .header-profile > a {
  font-size: 1.5rem;
}

.account-information .header-bookmarks > a:hover,
.account-information .header-bookmarks.is-open > a,
.account-information .header-profile > a:hover,
.account-information .header-profile > a[aria-current] {
  color: var(--tgi-magenta);
}

.header-panel .header-panel__brands {
  gap: 2px;
}

.header-panel .header-panel__brands li {
  padding: 0;
  background: none;
}

.account-information .header-bookmarks .header-panel__brands a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--tgi-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.account-information .header-bookmarks .header-panel__brands a:hover {
  background: var(--tgi-canvas);
  color: var(--tgi-magenta);
}

.header-panel__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--tgi-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tgi-magenta);
  font-weight: 700;
  overflow: hidden;
}

.header-panel__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.account-information .header-panel .header-panel__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--tgi-magenta);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* Dashboard: Latest News (beside Top TGI Brands) */
.mytgi-main-new .card-news-dashboard .news-date {
  display: block;
  text-align: left;
  margin-bottom: 4px;
  color: var(--tgi-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.mytgi-main-new .card-news-dashboard .card__content p {
  margin: 4px 0 6px;
  padding: 0;
  color: var(--tgi-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* base-new.css hides the first two top bar items below 992px with li:first-child and li:nth-child(2), which also
   caught the first two rows of every header dropdown. */
@media (max-width: 991.98px) {
  .header .top-nav .header-panel li {
    display: block;
  }
}

/* Header dropdowns on phones: full width under the header, not anchored to their icon. */
@media (max-width: 575.98px) {
  .account-information .header-panel {
    position: fixed;
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* Dashboard feature cards: the whole image in a 16:10 frame (800x500 artwork fills it exactly). */
.mytgi-main-new .panel.column .panel-image--whole {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  aspect-ratio: 16 / 10;
  background: var(--tgi-canvas);
  overflow: hidden;
}

.mytgi-main-new .panel-image--whole img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Single event pages: the other events in a carousel at the bottom. */
.mytgi-more-events {
  padding: var(--tgi-space) 0 calc(var(--tgi-space) * 1.5);
  background: var(--tgi-canvas);
}

.mytgi-more-events__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 20px;
}

.mytgi-more-events__head h2 {
  margin: 0;
  padding: 0;
  color: var(--tgi-ink);
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem);
  text-transform: none;
}

.mytgi-more-events__head .mytgi-link {
  margin-top: 0;
}

/* Room for the cards' shadow and hover lift inside the carousel track. */
.mytgi-more-events .splide__track {
  max-width: none !important;
  padding: 6px 4px 12px !important;
}

.mytgi-more-events .splide__slide {
  height: auto;
}

.mytgi-more-events .mytgi-tile {
  height: 100%;
}

.mytgi-more-events .splide__arrow {
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  background: #fff;
  box-shadow: var(--tgi-shadow);
  opacity: 1;
}

.mytgi-more-events .splide__arrow svg {
  width: 14px;
  height: 14px;
  fill: var(--tgi-ink);
}

.mytgi-more-events .splide__arrow:disabled {
  opacity: 0;
}

.mytgi-more-events .splide__arrow--prev {
  left: -14px;
}

.mytgi-more-events .splide__arrow--next {
  right: -14px;
}

.mytgi-more-events .splide__pagination {
  position: static;
  margin-top: 16px;
}

.mytgi-more-events .splide__pagination__page {
  background: #cfcfd6;
  opacity: 1;
}

.mytgi-more-events .splide__pagination__page.is-active {
  background: var(--tgi-magenta);
}

/* The MyTGI menu scrolls sideways on small screens; swipe it without a scrollbar. */
.header .navigation > ul {
  scrollbar-width: none;
}

.header .navigation > ul::-webkit-scrollbar {
  display: none;
}

/*
 * MyTGI menu on desktop: each label on one line, with the padding and size cut to fit all eight items in the bar
 * (1320px wide from 1400px, 1140px from 1200px, 960px below). Drop-down arrows follow the label instead of sitting
 * over its end.
 */
@media (min-width: 992px) {
  .header .navigation > ul > li > a {
    padding: 15px 16px;
    white-space: nowrap;
  }

  .header .navigation > ul > li.has-children > a::after {
    position: static;
    margin-left: 5px;
    flex-shrink: 0;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .header .navigation > ul > li > a {
    padding: 15px 8px;
    font-size: 14px;
  }
}

/* No room for the icons below 1200px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header .navigation > ul > li > a {
    padding: 15px 10px;
  }

  .header .navigation > ul > li > a > img {
    display: none;
  }
}

/* Pick a winner (head office) */
.draw__choose {
  margin-bottom: 20px;
}

.draw__choose .mytgi-input {
  max-width: 560px;
}

.mytgi-form.draw__choose select {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d3d5db;
  border-radius: 10px;
  background-color: #fff;
  font: inherit;
}

.draw__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.draw__form fieldset {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.draw__form legend {
  float: none;
  width: auto;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  color: var(--tgi-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.draw .draw__hint {
  margin: 0 0 12px;
  padding: 0;
  color: var(--tgi-muted);
}

.draw__answers {
  display: grid;
  gap: 10px;
}

.draw .draw__answer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--tgi-line);
  border-radius: 12px;
  color: var(--tgi-ink);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.draw .draw__answer:hover {
  border-color: var(--tgi-magenta);
}

.draw .draw__answer input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tgi-magenta);
}

.draw .draw__answer:has(input:checked) {
  border-color: var(--tgi-magenta);
  background: var(--tgi-magenta-tint);
}

.draw__answer-label {
  flex: 1;
}

.draw__answer-count {
  color: var(--tgi-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.draw__result {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid #f0cfe2;
  border-radius: 14px;
  background: var(--tgi-magenta-tint);
}

.draw .draw__eyebrow {
  margin: 0 0 4px;
  padding: 0;
  color: var(--tgi-magenta);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.draw .draw__winner-name {
  margin: 0 0 18px;
  padding: 0;
  color: var(--tgi-ink);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.draw__winner {
  margin-bottom: 16px;
}

.draw .draw__note {
  margin: 0;
  padding: 0;
  color: var(--tgi-text);
  font-size: 0.9rem;
}

.draw__downloads {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.draw__steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  font-size: 0.95rem;
}

.draw__steps li {
  padding: 0;
}

.draw .mytgi-aside-block li {
  color: var(--tgi-text);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

.draw .mytgi-aside-block li strong {
  color: var(--tgi-ink);
  font-size: inherit !important;
  font-weight: 600;
}

/* Pick a winner: New competition tab */
.draw__contents {
  display: contents;
}

.draw__fields {
  display: grid;
  gap: 22px;
}

.mytgi-form.draw__new textarea,
.mytgi-form.draw__new input[type="date"],
.mytgi-form.draw__new input[type="file"] {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d3d5db;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  line-height: 1.5;
}

.mytgi-form.draw__new input[type="date"] {
  max-width: 240px;
}

.mytgi-form.draw__new textarea:focus,
.mytgi-form.draw__new input[type="date"]:focus {
  border-color: var(--tgi-magenta);
  outline: 3px solid rgba(152, 0, 93, 0.15);
}

.mytgi-form.draw__new [aria-invalid="true"] {
  border-color: #c0263d !important;
}

.draw .draw__error {
  color: #a1182c;
  font-size: 0.875rem;
  font-weight: 600;
}

.draw__answers-new {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.draw__answers-new legend {
  float: none;
  margin: 0 0 8px;
  padding: 0;
  color: var(--tgi-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
}

.draw__answer-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}

.draw__answer-inputs label {
  color: var(--tgi-muted);
  font-size: 0.85rem;
}

.draw .draw__small {
  display: block;
  color: var(--tgi-muted);
  font-size: 0.8rem;
}

.draw .draw__publish {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--tgi-canvas);
  color: var(--tgi-text);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
}

.draw .draw__publish input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--tgi-magenta);
}

.draw .draw__publish strong {
  color: var(--tgi-ink);
}

.draw__submit {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tgi-line);
}

@media (max-width: 767.98px) {
  .draw__answer-inputs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Your month: TGI Golf app card (in place of the marketplace card) */
.your-month__app {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 22px 22px 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #182866 0%, #3b0f55 60%, #98005d 100%);
  color: #fff;
}

.your-month__app-text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.your-month .your-month__app h3 {
  margin: 0 0 6px;
  padding: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.your-month .your-month__app .your-month__app-title {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.your-month .your-month__app p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.45;
}

.your-month__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.your-month .your-month__store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.your-month .your-month__store:hover,
.your-month .your-month__store:focus-visible {
  background: #fff;
  color: var(--tgi-navy);
}

.your-month .your-month__store .fa {
  font-size: 1rem;
}

.your-month .your-month__app-more {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.your-month .your-month__app-more:hover {
  text-decoration: underline;
}

.your-month__app-image {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  object-fit: cover;
  transform: rotate(4deg);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .your-month__app-image {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 400px) {
  .your-month__app-image {
    display: none;
  }
}