/* Flex apparel: shared navigation, homepage feature, and collection page. */
:root {
  --merch-red: #e50914;
  --merch-paper: #f4f4f2;
  --merch-muted: #b6b6b6;
}
.nav-merch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid #565656;
  color: #fff;
  font: 700 .875rem/1.2 Montserrat, sans-serif;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.nav-merch-link:hover, .nav-merch-link[aria-current="page"] { background: #e50914; border-color: #e50914; color: #fff; }
.nav-merch-link svg { width: 18px; height: 18px; flex: none; }
.nav-link-area { flex-shrink: 0; }
.merch-surface { background: #090909; color: #fff; font-family: "Plus Jakarta Sans", Montserrat, sans-serif; }
.merch-page { padding-top: 110px; }
.merch-skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10001; padding: 1rem; background: #fff; color: #111; }
.merch-skip-link:focus { top: 1rem; }
.merch-surface *, .merch-surface *::before, .merch-surface *::after { box-sizing: border-box; }
.merch-shell { width: min(1280px, 90%); margin-inline: auto; }
.merch-surface a { text-decoration: none; }
.merch-surface a:focus-visible, .nav-merch-link:focus-visible { outline: 3px solid #ff5360; outline-offset: 5px; }
.merch-kicker { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem; color: #ccc; font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.merch-kicker::before { content: ""; width: 24px; height: 3px; background: var(--merch-red); flex: none; }
.merch-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: 4.5rem 4rem; }
.merch-title { margin: 0 0 1.6rem; color: #fff; font-family: Oswald, Impact, sans-serif; font-size: clamp(4.5rem, 8.6vw, 8rem); font-weight: 600; letter-spacing: -.04em; line-height: .98; text-transform: uppercase; }
.merch-title span { display: block; color: var(--merch-red); }
.merch-intro { max-width: 440px; margin: 0 0 2rem; color: var(--merch-muted); font-size: 1.0625rem; line-height: 1.8; }
.merch-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 54px; padding: 1rem 1.5rem; background: var(--merch-red); color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.4; transition: background .2s, transform .2s; }
.merch-button:hover { background: #bd0710; color: #fff; transform: translateY(-2px); }
.merch-arrow { display: inline-block; font-size: 1.4rem; font-weight: 400; line-height: 1; }
.merch-hero-note { margin: 1rem 0 0; color: #999; font-size: .875rem; line-height: 1.6; }
.merch-hero-visual { display: block; position: relative; background: var(--merch-paper); color: #111; }
.merch-hero-visual:hover { color: #111; }
.merch-hero-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.merch-visual-top { position: absolute; z-index: 1; top: 1.3rem; left: 1.4rem; right: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.merch-visual-top span:first-child { color: #ac0710; }
.merch-visual-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-top: 1px solid #d8d8d5; font-size: .9375rem; font-weight: 700; }
.merch-band { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; border-block: 1px solid #333; color: #b6b6b6; font-size: .875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.merch-band span:nth-child(2) { color: #fff; }
.merch-collection { padding-block: 4.5rem 5rem; scroll-margin-top: 110px; }
.merch-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.merch-heading { margin: 0; color: #fff; font-family: Oswald, Impact, sans-serif; font-size: clamp(2.5rem, 4vw, 3.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-transform: uppercase; }
.merch-section-head .merch-kicker { margin-bottom: .85rem; }
.merch-section-head p { margin: 0; max-width: 340px; color: var(--merch-muted); font-size: 1rem; line-height: 1.7; }
.merch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.merch-product { display: block; min-width: 0; color: #fff; }
.merch-product:hover { color: #fff; }
.merch-product-photo { position: relative; overflow: hidden; background: var(--merch-paper); }
.merch-product-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.merch-product:hover img { transform: scale(1.035); }
.merch-product-number { position: absolute; z-index: 1; top: 1rem; left: 1rem; color: #666; font-size: .75rem; letter-spacing: .08em; }
.merch-product-details { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding-top: 1.15rem; }
.merch-product-type { margin: 0 0 .35rem; color: #b6b6b6; font-size: .875rem; line-height: 1.5; }
.merch-product h3 { margin: 0; color: #fff; font-family: Oswald, Impact, sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.25; text-transform: uppercase; }
.merch-product-action { display: flex; align-items: center; gap: .55rem; margin-top: .8rem; color: #ddd; font-size: .875rem; line-height: 1.5; }
.merch-product:hover .merch-product-action { color: #ff5360; }
.merch-product-details > .merch-arrow { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid #444; border-radius: 50%; }
.merch-collection-end { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #333; }
.merch-collection-end p { max-width: 520px; margin: 0; color: var(--merch-muted); font-size: .9375rem; line-height: 1.7; }
.merch-home { padding-block: 4.5rem; border-block: 1px solid #2b2b2b; }
.merch-home .merch-heading em { color: var(--merch-red); font-style: normal; }
.merch-home .merch-section-head { margin-bottom: 2.3rem; }
.merch-home .merch-section-head p { margin-top: 1rem; max-width: 520px; }
.merch-home .merch-button { flex: none; }
@media (max-width: 1399px) {
  .nav-container .virtual-tour-shortcut { display: none; }
}
@media (max-width: 1199px) {
  /* Reserve a separate column for actions; the logo must be able to shrink. */
  .nav-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .nav-container > .link-block-3 { min-width: 0; max-width: 230px; }
  .nav-container > .link-block-3 .image { width: 100%; max-width: 230px; height: auto; }
  .nav-container .desktop-est { display: none; }
  .nav-container .nav-link-area { min-width: 0; white-space: nowrap; }
}
@media (max-width: 991px) {
  .nav-merch-link { padding: .65rem .75rem; }
  .merch-hero { gap: 2rem; padding-block: 3rem; }
  .merch-title { font-size: clamp(4rem, 9vw, 6rem); }
  .merch-grid { gap: 2rem 1rem; }
}
@media (max-width: 767px) {
  .nav-container { width: calc(100% - 32px); gap: 12px; }
  .nav-link-area .nav-button, .nav-link-area .jn-nav-pill { display: none; }
  .nav-container .nav-menu-button { flex: 0 0 44px; width: 44px; height: 44px; }
  .merch-hero { grid-template-columns: 1fr; gap: 2.3rem; }
  .merch-title { font-size: clamp(4rem, 16vw, 6.5rem); }
  .merch-intro { max-width: 540px; }
  .merch-hero-visual { max-width: 540px; width: 100%; margin-inline: auto; }
  .merch-band { flex-wrap: wrap; justify-content: center; text-align: center; font-size: .75rem; gap: .7rem 1.5rem; }
  .merch-section-head { align-items: start; flex-direction: column; gap: 1.2rem; }
  .merch-section-head p { max-width: 520px; }
  .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merch-product-details > .merch-arrow { display: none; }
  .merch-product h3 { font-size: 1.25rem; }
  .merch-collection, .merch-home { padding-block: 3rem; }
}
@media (max-width: 479px) {
  .nav-merch-link { gap: .3rem; padding: .6rem; font-size: .875rem; }
  .nav-merch-link svg { display: none; }
  .merch-shell { width: 90%; }
  .merch-grid { gap: 1.75rem .8rem; }
  .merch-product-number { top: .5rem; left: .5rem; }
  .merch-product-type, .merch-product-action { font-size: .875rem; }
  .merch-visual-top { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .merch-surface *, .nav-merch-link { transition: none !important; }
  .merch-product:hover img, .merch-button:hover { transform: none; }
}
