/* CLAWOLF approved product header — CLAWOLF | ASOS | CNDA | Investor | menu */
.d1r2-header {
  min-height: 8.7rem !important;
  padding: 1rem clamp(.9rem, 1.7vw, 1.7rem) !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.d1r2-header__bar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content max-content max-content max-content max-content !important;
  justify-content: space-between !important;
  align-items: center !important;
  column-gap: clamp(1.35rem, 2.2vw, 2.8rem) !important;
  min-height: 7.25rem !important;
  padding: .8rem clamp(1.45rem, 2.8vw, 2.8rem) !important;
  border: 1px solid rgba(81, 101, 124, .58) !important;
  border-radius: 1.7rem !important;
  overflow: hidden !important;
  background:
    radial-gradient(75% 145% at 48% -24%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.38) 35%, transparent 64%),
    linear-gradient(180deg, #f5f7f9 0%, #d3d9df 18%, #aeb8c2 42%, #eef2f5 66%, #bcc5ce 100%) !important;
  box-shadow:
    0 28px 72px rgba(16,35,62,.18),
    0 3px 0 rgba(255,255,255,.96) inset,
    0 -2px 0 rgba(65,83,104,.25) inset,
    0 0 0 1px rgba(255,255,255,.42) !important;
}

.d1r2-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 17%, rgba(255,255,255,.7) 27%, transparent 38% 59%, rgba(255,255,255,.46) 70%, transparent 82%),
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 20% 80%, rgba(255,255,255,.12));
  mix-blend-mode: screen;
  opacity: .78;
}

.d1r2-header__bar > * { position: relative; z-index: 1; }
.d1r2-nav.clawolf-product-nav { display: contents !important; }

.d1r2-header .d1r2-brand,
.d1r2-header .d1r2-brand picture {
  grid-column: 1 !important;
  height: 4.75rem !important;
  max-height: 4.75rem !important;
  justify-self: start !important;
}

.d1r2-header .d1r2-brand img[data-d1r2-logo="header"] {
  width: auto !important;
  height: 4.75rem !important;
  max-width: min(24rem, 30vw) !important;
  max-height: 4.75rem !important;
  object-fit: contain !important;
  filter: contrast(1.08) saturate(1.08) drop-shadow(0 2px 2px rgba(7,30,66,.12)) !important;
}

.d1r2-nav.clawolf-product-nav .clawolf-product-mark {
  --clawolf-product-mark-width: clamp(12rem, 13.5vw, 14rem);
  --clawolf-product-mark-height: 4.6rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  width: var(--clawolf-product-mark-width) !important;
  height: var(--clawolf-product-mark-height) !important;
  min-height: var(--clawolf-product-mark-height) !important;
  padding: .4rem .2rem !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.d1r2-nav.clawolf-product-nav .clawolf-product-mark::after { display: none !important; }
.d1r2-nav.clawolf-product-nav .clawolf-product-mark--asos { grid-column: 2 !important; }
.d1r2-nav.clawolf-product-nav .clawolf-product-mark--cnda { grid-column: 3 !important; }

.d1r2-nav.clawolf-product-nav .clawolf-product-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: contrast(1.08) saturate(1.06) drop-shadow(0 3px 2px rgba(9,31,65,.15)) !important;
}

/* Render both visible wordmarks edge-to-edge inside the same measured box.
   Normal compositing and a filter-free ASOS path preserve the source colors. */
.d1r2-nav.clawolf-product-nav .clawolf-product-mark--asos img,
.d1r2-nav.clawolf-product-nav .clawolf-product-mark--cnda img {
  object-fit: fill !important;
  mix-blend-mode: normal !important;
}
.d1r2-nav.clawolf-product-nav .clawolf-product-mark--asos img {
  filter: none !important;
}

.d1r2-nav.clawolf-product-nav .clawolf-investor-cta {
  grid-column: 4 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 7.9rem !important;
  min-height: 4.05rem !important;
  padding: .85rem 1.35rem !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 1rem !important;
  background: linear-gradient(145deg,#0a338b 0%,#0d56cf 52%,#2188ff 100%) !important;
  box-shadow: 0 14px 30px rgba(12,67,164,.28), 0 2px 0 rgba(255,255,255,.34) inset, 0 0 0 1px rgba(25,119,255,.4) !important;
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 790 !important;
  letter-spacing: -.02em !important;
}

.d1r2-menu-btn {
  grid-column: 5 !important;
  justify-self: end !important;
  width: 4.1rem !important;
  height: 4.1rem !important;
  border: 1px solid rgba(74,96,123,.42) !important;
  border-radius: 1rem !important;
  background: linear-gradient(180deg,#ffffff,#dce2e8) !important;
  box-shadow: 0 10px 24px rgba(12,35,68,.15), 0 2px 0 rgba(255,255,255,.9) inset !important;
}
.d1r2-menu-btn__bars span { background: #0a2144 !important; }

.clawolf-product-mark[aria-current="page"] { position: relative !important; }
.clawolf-product-mark[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: .02rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,#155ee8 25% 75%,transparent);
}

@media (max-width: 1380px) {
  .d1r2-header__bar {
    grid-template-columns: max-content max-content max-content max-content max-content !important;
    justify-content: space-between !important;
    column-gap: clamp(.9rem,1.5vw,1.7rem) !important;
  }
  .d1r2-header .d1r2-brand,
  .d1r2-header .d1r2-brand picture,
  .d1r2-header .d1r2-brand img[data-d1r2-logo="header"] { height: 4rem !important; max-height: 4rem !important; }
  .d1r2-nav.clawolf-product-nav .clawolf-product-mark {
    --clawolf-product-mark-width: clamp(10.25rem, 13vw, 11.75rem);
    --clawolf-product-mark-height: 4rem;
  }
  .d1r2-nav.clawolf-product-nav .clawolf-investor-cta { min-height: 3.65rem !important; min-width: 7.1rem !important; padding-inline: 1rem !important; }
}

@media (max-width: 1040px) {
  .d1r2-header { min-height: 6.5rem !important; padding: .7rem !important; }
  .d1r2-header__bar { grid-template-columns: minmax(10rem,1fr) auto auto auto !important; justify-content:normal !important; min-height: 5.4rem !important; padding: .6rem .9rem !important; column-gap: .75rem !important; }
  .d1r2-header .d1r2-brand,
  .d1r2-header .d1r2-brand picture,
  .d1r2-header .d1r2-brand img[data-d1r2-logo="header"] { height: 3.4rem !important; max-height: 3.4rem !important; }
  .d1r2-nav.clawolf-product-nav .clawolf-product-mark--asos { grid-column: 2 !important; }
  .d1r2-nav.clawolf-product-nav .clawolf-product-mark--cnda { grid-column: 3 !important; }
  .d1r2-nav.clawolf-product-nav .clawolf-product-mark {
    --clawolf-product-mark-width: clamp(8rem, 14vw, 9.25rem);
    --clawolf-product-mark-height: 3.35rem;
    padding: .32rem .16rem !important;
  }
  .d1r2-nav.clawolf-product-nav .clawolf-investor-cta { display: none !important; }
  .d1r2-menu-btn { grid-column: 4 !important; width: 3.35rem !important; height: 3.35rem !important; }
}

@media (max-width: 680px) {
  .d1r2-nav.clawolf-product-nav .clawolf-product-mark { display: none !important; }
  .d1r2-header__bar { display: flex !important; justify-content: space-between !important; }
  .d1r2-menu-btn { margin-left: auto !important; }
}