/* Homepage discovery and enamel pins landing page. */
.mcl-header > .site-header,
html.mgm-collection-layout body > .site-header.mgm-two-tier.mgm-mega-header {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  width: 100%;
  background-color: #fff;
}
.mcl-hero {
  background: #172a3b;
  color: #fff;
}
.mcl-hero-inner {
  width: min(100%, 1440px);
  min-height: 314px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.mcl-hero-inner > img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 2.45;
  object-fit: contain;
  object-position: center;
  background: #3e6d94;
}
.mcl-hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 30px clamp(24px, 5vw, 80px);
}
.mcl-label {
  margin: 0 0 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
}
.mcl-hero h1, .mcl-section h2, .mcl-section h3 {
  font-family: inherit;
  letter-spacing: -.035em;
  text-transform: none;
  line-height: 1.1;
}
.mcl-hero h1 { margin: 0 0 12px; font-size: clamp(2.15rem, 4.2vw, 3.8rem); }
.mcl-hero-copy > p:not(.mcl-label) { margin: 0 0 20px; max-width: 45ch; }
.mcl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mcl-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 15px;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 30px;
  background: #172a3b;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
}
.mcl-action:hover { background: #29465f; color: #fff; }
.mcl-action-secondary { border-color: #c4cbd0; background: transparent; color: #172a3b; }
.mcl-action-secondary:hover { background: #e9eef2; color: #172a3b; }
.mcl-hero .mcl-action { background: #fff; color: #172a3b; }
.mcl-hero .mcl-action:hover { background: #dce8f0; }
.mcl-hero .mcl-action-secondary { background: transparent; border-color: #8fa1b0; color: #fff; }
.mcl-hero .mcl-action-secondary:hover { background: #29465f; }
.mcl-text-link { font-weight: 700; color: #233d57; text-underline-offset: .2em; }
.mcl-assurances {
  list-style: none;
  background: #101d28;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px max(24px, calc((100% - 1200px) / 2));
  text-align: center;
  font-size: .875rem;
  line-height: 1.25;
}
.mcl-assurances span { color: #e4c78b; margin-inline-end: .25em; }
.mcl-section { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0; }
.mcl-section h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 3vw, 2.65rem); }
.mcl-section h3 { margin: 0 0 8px; font-size: 1.125rem; }
.mcl-section > p:not(.mcl-label) { margin: 0 0 18px; }
.mcl-section > .mcl-actions, .mcl-section > .mcl-action { margin-top: 18px; }
.mcl-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 23%);
  align-items: center;
  gap: 18px;
  margin-block: 24px 0;
  padding: 17px;
  background: #f2f4f5;
  border-radius: 16px;
}
.mcl-gallery > .mcl-actions { margin: 0; align-items: stretch; flex-direction: column; }
.mcl-gallery-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mcl-gallery-heading h2, .mcl-gallery-heading p { margin: 0; }
.mcl-gallery-heading h2 { font-size: 1.22rem; }
.mcl-gallery-heading p { font-size: .875rem; }
.mcl-gallery-grid, .mcl-collection-grid, .mcl-two-grid, .mcl-three-grid {
  display: grid;
  gap: 14px;
}
.mcl-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mcl-gallery-grid figure { margin: 0; min-width: 0; }
.mcl-gallery-grid figcaption { font-size: .8125rem; line-height: 1.25; margin-top: 5px; }
.mcl-gallery-grid img, .mcl-collection-grid img, .mcl-craft-card img, .mcl-feature img {
  width: 100%;
  display: block;
  background: #e9edf0;
  border-radius: 10px;
  object-fit: contain;
}
.mcl-gallery-grid img { aspect-ratio: 1.4; }
.mcl-gallery-grid img[src*="studio-emblems/"] { padding: 10%; }
.mcl-collection { scroll-margin-top: 70px; }
.mcl-collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mcl-collection-grid a {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
  border: 1px solid #dce1e5;
  border-radius: 14px;
  color: #172a3b;
  text-decoration: none;
  font-weight: 700;
}
.mcl-collection-grid a:hover { border-color: #172a3b; }
.mcl-collection-grid a > span { display: flex; justify-content: space-between; gap: 5px; line-height: 1.3; }
.mcl-collection-grid img { aspect-ratio: 5 / 4; }
.mcl-crafts { margin-top: 22px; background: #172a3b; color: #fff; }
.mcl-two-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcl-craft-card { border-radius: 14px; background: #fff; color: #172a3b; overflow: hidden; }
.mcl-craft-card img { height: 242px; border-radius: 0; padding: 10px; }
.mcl-craft-card > div { padding: 18px; }
.mcl-craft-card .mcl-text-link { display: inline-block; margin: 8px 0 0 8px; }
.mcl-craft-card p { margin: 0 0 10px; }
.mcl-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; margin-bottom: 18px; }
.mcl-feature img { height: 220px; padding: 26px; }
.mcl-three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcl-three-grid article { background: #f2f4f5; border-radius: 14px; padding: 16px; }
.mcl-three-grid p { margin: 0 0 10px; }
.mcl-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 12px; background: #e9edf0; margin: 18px 0; }
.mcl-tabs[hidden], .mcl-option-panel[hidden] { display: none; }
.mcl-tabs button {
  flex: 1 1 100px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #172a3b;
  cursor: pointer;
}
.mcl-tabs button[aria-selected="true"] { background: #fff; font-weight: 700; box-shadow: 0 1px 3px #0002; }
.mcl-option-panel { margin: 0 0 18px; }
.mcl-option-panel p { margin: 0 0 12px; }
.mcl-option-panel ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; }
.mcl-option-panel li { padding: 12px; background: #f2f4f5; border-radius: 10px; text-align: center; }
.mcl-option-panel li span { display: block; height: 38px; background: var(--mcl-swatch); border-radius: 6px; margin-bottom: 5px; }
.mcl-faq details { padding: 12px 0; border-bottom: 1px solid #dce1e5; }
.mcl-faq summary { font-weight: 700; cursor: pointer; }
.mcl-faq details p { margin-bottom: 0; }
@media (max-width: 767px) {
  .mcl-hero-inner { display: flex; flex-direction: column; min-height: auto; }
  .mcl-hero-inner > img { height: auto; aspect-ratio: 2.6; }
  .mcl-hero-copy { align-self: stretch; padding: 16px 16px 20px; }
  .mcl-hero h1 { font-size: clamp(1.8rem, 7.3vw, 2.65rem); }
  .mcl-hero-copy > p:not(.mcl-label) { margin-bottom: 12px; }
  .mcl-hero .mcl-actions > a { flex: 1 1 138px; font-size: .875rem; }
  .mcl-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: start; padding: 10px 16px; }
  .mcl-section { width: calc(100% - 32px); padding: 28px 0; }
  .mcl-gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; margin-top: 12px; }
  .mcl-gallery > .mcl-actions { flex-direction: row; flex-wrap: wrap; }
  .mcl-gallery-grid, .mcl-option-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcl-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mcl-two-grid, .mcl-three-grid, .mcl-feature { grid-template-columns: minmax(0, 1fr); }
  .mcl-feature { gap: 14px; }
  .mcl-craft-card img, .mcl-feature img { height: 190px; }
}
@media (max-width: 767px) {
  html.mgm-collection-layout body .pqc-launch {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  html.mgm-collection-layout body .pqc-launch .mgm-cta-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.mgm-collection-layout body .pqc-launch .mgm-cta-icon { margin: 0 !important; }
}
