/* "Shop" mega-menu: two-column dropdown for the header-menu navigation
   item — a category list on the left, a featured "Literally Everything
   We Have" card on the right. Scoped to .header__submenu--mega so the
   single-column Size Guide / More To See dropdowns are untouched.
   Reuses the header__submenu color-scheme tokens (--color-foreground,
   --color-background, --color-shadow — see header-layout.css) instead of
   hardcoding the cream/plum palette a second time. */

.list-menu--disclosure.header__submenu--mega {
  width: 50rem;
  max-width: calc(100vw - 4rem);
}

.header__submenu--mega .header__mega-columns {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  padding: 0.4rem 2rem 1.2rem;
}

.header__mega-list {
  flex: 1 1 56%;
  min-width: 0;
  padding: 0 !important;
  margin: 0;
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.12);
  padding-right: 2rem !important;
}

.header__mega-heading {
  padding: 0.8rem 0.6rem 0.6rem !important;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.55);
}

.header__mega-list .header__menu-item {
  padding: 0.85rem 0.6rem !important;
  border-radius: 0.6rem;
}

.header__mega-list .header__menu-item:hover {
  background-color: rgba(var(--color-foreground), 0.06);
}

.header__mega-feature-wrap {
  flex: 1 1 44%;
  min-width: 0;
  padding: 0 !important;
}

.header__mega-feature {
  --mega-feature-gold: #d8b271;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  height: 100%;
  min-height: 21rem;
  padding: 2rem 1.8rem;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  background: rgb(70, 8, 70);
  background: linear-gradient(155deg, rgb(var(--color-foreground)) 0%, color-mix(in srgb, rgb(var(--color-foreground)) 100%, black 32%) 100%);
  box-shadow: 0 0.6rem 1.6rem rgba(var(--color-shadow), 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.header__mega-feature::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.header__mega-feature:hover,
.header__mega-feature:focus-visible {
  transform: translateY(-0.3rem);
  box-shadow: 0 1.2rem 2.6rem rgba(var(--color-shadow), 0.32);
}

.header__mega-feature--active {
  box-shadow: 0 0 0 0.2rem var(--mega-feature-gold), 0 1.2rem 2.6rem rgba(var(--color-shadow), 0.32);
}

.header__mega-feature-eyebrow {
  position: relative;
  align-self: flex-start;
  padding: 0.35rem 0.9rem;
  border-radius: 10rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(244, 244, 243);
  background: rgba(255, 255, 255, 0.16);
}

.header__mega-feature-title {
  position: relative;
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 600;
  color: rgb(244, 244, 243);
}

.header__mega-feature-sub {
  position: relative;
  font-size: 1.3rem;
  color: rgba(244, 244, 243, 0.78);
}

.header__mega-feature-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mega-feature-gold);
}

.header__mega-feature-cta svg {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.25s ease;
}

.header__mega-feature:hover .header__mega-feature-cta svg {
  transform: translateX(0.4rem);
}

@media screen and (max-width: 1150px) {
  .list-menu--disclosure.header__submenu--mega {
    width: 42rem;
  }

  .header__mega-feature-title {
    font-size: 1.7rem;
  }
}

/* "Jewellery" mega-menu: four category columns (Gold / Diamond / Silver /
   Bridal) each with links, plus a full-width "Literally Everything We
   Have" banner underneath — reuses .header__mega-feature above with a
   horizontal --banner modifier instead of the vertical card layout.
   None of these categories have real collection pages yet, so every
   link here intentionally points at the placeholder /collections/all
   route until real URLs are supplied. */

.list-menu--disclosure.header__submenu--jewellery {
  width: 78rem;
  max-width: calc(100vw - 4rem);
}

.header__mega-jewel-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.4rem 2rem 0;
}

.header__mega-jewel-col {
  min-width: 0;
  padding: 0 1.4rem;
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

.header__mega-jewel-col:last-child,
.header__mega-jewel-col:nth-child(5n) {
  border-right: none;
}

.header__mega-jewel-col .header__menu-item {
  display: block;
  padding: 0.6rem 0.4rem !important;
  border-radius: 0.5rem;
  font-size: 1.3rem;
}

.header__mega-jewel-col .header__menu-item:hover {
  background-color: rgba(var(--color-foreground), 0.06);
}

.header__mega-jewel-col .header__mega-col-heading {
  padding: 0.6rem 0.4rem 0.8rem !important;
  margin-bottom: 0.4rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.14);
  border-radius: 0;
  font-weight: 700;
  font-size: 1.4rem;
}

.header__mega-jewel-col .header__mega-col-heading:hover {
  background-color: transparent;
  text-decoration: underline;
}

.header__mega-subheading {
  display: block;
  padding: 0.9rem 0.4rem 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
}

.header__mega-feature--banner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 0;
  margin: 1.6rem 2rem 0.4rem;
  padding: 1.6rem 2rem;
  gap: 1rem 1.6rem;
}

.header__mega-feature--banner .header__mega-feature-title {
  font-size: 1.6rem;
}

.header__mega-feature--banner::before {
  inset: -80% -10% auto auto;
}

@media screen and (max-width: 1300px) {
  .list-menu--disclosure.header__submenu--jewellery {
    width: 62rem;
  }

  .header__mega-jewel-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .header__mega-jewel-col {
    border-right: none;
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

/* Collections dropdown: dynamic links, styled as a compact luxury menu. */
.list-menu--disclosure.header__submenu--collections {
  width: 36rem;
  max-width: calc(100vw - 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  padding: 1rem;
  margin-top: .5rem;
  border: 1px solid rgba(107, 10, 107, .14);
  border-radius: 1.1rem;
  box-shadow: 0 1.4rem 3rem rgba(16, 57, 72, .16), 0 .3rem .8rem rgba(16, 57, 72, .08);
}

.header__collections-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: .4rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: .2rem .35rem .35rem;
}

.header__collections-heading {
  display: block;
  grid-column: 1 / -1;
  padding: .25rem .7rem .65rem;
  color: rgba(var(--color-foreground), .55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.header__submenu--collections .header__menu-item {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  padding: .7rem !important;
  border-radius: .55rem;
  color: rgba(var(--color-foreground), .86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.header__submenu--collections .header__menu-item:hover,
.header__submenu--collections .header__menu-item:focus-visible {
  color: rgb(187, 15, 15);
  background-color: rgba(107, 10, 107, .07);
  transform: translateX(.15rem);
}

.header__collections-more {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(107, 10, 107, .14);
  border-radius: .75rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #35141c, #6b0a6b);
  transition: transform .2s ease, box-shadow .2s ease;
}

.header__collections-more:hover,
.header__collections-more:focus-visible {
  color: #fff;
  transform: translateY(-.15rem);
  box-shadow: 0 .8rem 1.8rem rgba(53, 20, 28, .25);
}

.header__collections-more-eyebrow { color: #d8b271; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.header__collections-more-title { font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.header__collections-more-cta { color: rgba(255,255,255,.82); font-size: .88rem; }

@media screen and (max-width: 700px) {
  .list-menu--disclosure.header__submenu--collections {
    width: min(34rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    margin-top: .3rem;
    padding: .7rem;
  }

  .header__collections-list { grid-template-columns: 1fr; max-height: 18rem; }
  .header__submenu--collections .header__menu-item { min-height: 3.1rem; font-size: 1rem; }
  .header__collections-more { min-height: 6rem; padding: .9rem; }
  .header__collections-more-title { font-size: 1.1rem; }
}