/* corp-merch-mx-compat
   Bridge layer: the page templates and includes emit a class vocabulary that the
   base design system (assets/style.css) never defined. Without this file the
   header, footer, breadcrumbs, hero furniture, FAQ blocks and alternating
   sections render as unstyled markup. Everything here reuses the existing
   design tokens — no new palette, no new type scale. */

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(247 244 237 / .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.nav-container {
  width: min(1240px, calc(100% - 28px));
  min-height: 72px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-container .logo {
  font-weight: 950;
  letter-spacing: -.045em;
  font-size: 21px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}
.nav-container .logo .logo-accent {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  margin-inline-start: auto;
}
[dir="rtl"] .nav-links {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.nav-links > li {
  position: relative;
  margin: 0;
}

.nav-links > li > a {
  display: block;
  padding: 10px 9px;
  font-weight: 750;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
.nav-links > li.nav-dropdown:hover > a,
.nav-links > li.nav-dropdown:focus-within > a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-links > li > a.nav-cta {
  background: var(--accent);
  color: #fff;
  border-bottom: 0;
  border-radius: 4px;
  font-weight: 850;
  padding: 11px 15px;
  margin-inline-start: 6px;
}
.nav-links > li > a.nav-cta:hover,
.nav-links > li > a.nav-cta:focus-visible {
  background: #4a2ee0;
  color: #fff;
}

/* dropdowns */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 50;
  min-width: 260px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgb(16 19 26 / .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu-wide {
  min-width: 320px;
}

.dropdown-menu li {
  margin: 0;
}
.dropdown-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-radius: 3px;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background: var(--paper);
  color: var(--accent);
  outline: none;
}
.dropdown-menu .dropdown-all {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.dropdown-menu .dropdown-all a {
  font-weight: 850;
  color: var(--accent);
}
.dropdown-menu .nav-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* language switcher */
.lang-switcher {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.lang-btn {
  border: 1px solid var(--line);
  background: transparent;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  color: var(--ink);
}
.lang-btn:hover,
.lang-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.mobile-menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.mobile-menu-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- footer */

.footer-container {
  width: min(1180px, calc(100% - 36px));
  margin: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  padding: 46px 0 30px;
}
.footer-brand .footer-logo {
  font-weight: 950;
  letter-spacing: -.045em;
  font-size: 21px;
  text-decoration: none;
  color: #f5f3ed;
}
.footer-brand .footer-logo .logo-accent {
  color: var(--accent2);
}
.footer-tagline {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cfd2da;
}
.footer-footnote {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8f94a1;
}
.footer-links h4,
.footer-contact h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8f94a1;
}
.footer-links ul,
.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.footer-links li,
.footer-contact li {
  margin: 0;
}
.footer-links a,
.footer-contact a {
  color: #d7dae1;
  text-decoration: none;
  font-size: 15px;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--accent2);
  outline: none;
  text-decoration: underline;
}
.footer-links .footer-all {
  color: var(--accent2);
  font-weight: 800;
}
.footer-contact .btn-contact {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 11px 18px;
  border-radius: 4px;
  font-weight: 850;
  text-decoration: none;
}
.footer-contact .btn-contact:hover,
.footer-contact .btn-contact:focus-visible {
  background: var(--accent2);
  color: var(--ink);
}
.footer-bottom {
  border-top: 1px solid #262a33;
  padding: 20px 0 34px;
  font-size: 13px;
  color: #8f94a1;
}

/* ------------------------------------------------------- page furniture */

.breadcrumbs {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumbs ol,
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li + li:before {
  content: '/';
  margin-inline-end: 8px;
  color: var(--line);
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.hero-subtitle {
  max-width: 760px;
  font-size: 19px;
  color: #dcdde4;
  margin: 0 0 28px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-cta a,
.hero-cta button {
  display: inline-block;
  border-radius: 4px;
  padding: 13px 20px;
  font-weight: 850;
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.hero-cta a:first-child,
.hero-cta .btn-primary {
  background: var(--accent);
  color: #fff;
}
.hero-cta a:first-child:hover,
.hero-cta .btn-primary:hover {
  background: #4a2ee0;
}
.hero-cta a:last-child,
.hero-cta .btn-secondary {
  background: #fff;
  color: var(--ink);
}
.hero-cta a:last-child:hover,
.hero-cta .btn-secondary:hover {
  background: var(--accent2);
}

.sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}

.section-alt {
  background: #ece8df;
}

/* FAQ blocks emitted by every page template */
.faq-list {
  max-width: 940px;
  margin: 0;
  padding: 0;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-item h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
}
.faq-item p {
  margin: 0;
  color: var(--muted);
}
.faq-item > p + p {
  margin-top: 10px;
}

/* independent-supplier disclaimer block */
.role-note {
  background: #10131a;
  color: #dcdde4;
}
.role-note .role-note-text {
  max-width: 900px;
  font-size: 15px;
  line-height: 1.7;
  color: #dcdde4;
  margin: 0;
}
.role-note h2,
.role-note h3 {
  color: #fff;
}

/* ---------------------------------------------------------------- focus */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  /* The base stylesheet hides every bare <nav> below 1180px for its own
     navigation model. Ours is the page header, so it must stay visible. */
  .nav-container {
    display: flex;
  }
}

/* Below this width the ten-item nav plus CTA plus language switcher no longer
   fit the 1240px container and start pushing the page into horizontal
   scroll, so collapse to the toggle earlier than the base breakpoint. */
@media (max-width: 1360px) {
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: inline-flex;
    margin-inline-start: auto;
  }
  .lang-switcher {
    margin-inline-start: auto;
  }
}

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* When JS is unavailable the nav must stay reachable rather than vanish. */
html:not(.js) .nav-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}
html:not(.js) .nav-links > li > a {
  padding: 8px 10px;
  font-size: 14px;
}
html:not(.js) .dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0 0 0 12px;
  min-width: 0;
  max-height: none;
}
html:not(.js) .nav-dropdown {
  flex: 1 0 100%;
}
html:not(.js) .mobile-menu-btn {
  display: none;
}

/* JS present, small screen: the panel is a toggle. */
@media (max-width: 1360px) {
  .js .nav-links[data-open] {
    display: flex;
    position: absolute;
    z-index: 45;
    top: 100%;
    inset-inline: 0;
    margin: 0;
    padding: 12px;
    background: var(--paper);
    border-block-start: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 34px rgb(16 19 26 / .16);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .nav-links[data-open] > li {
    border-bottom: 1px solid var(--line);
  }
  .js .nav-links[data-open] > li:last-child {
    border-bottom: 0;
  }
  .js .nav-links[data-open] > li > a {
    padding: 13px 10px;
  }
  .js .nav-links[data-open] .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 10px 14px;
    min-width: 0;
    max-height: none;
  }
  .js .nav-links[data-open] > li > a.nav-cta {
    margin-top: 8px;
    text-align: center;
  }
  /* Touch-toggled dropdown */
  .js .nav-dropdown.tap-open > .dropdown-menu {
    display: block;
  }
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .nav-container {
    min-height: 62px;
  }
  .hero-subtitle {
    font-size: 17px;
  }
  .breadcrumbs {
    padding-top: 14px;
  }
}