/* ─────────────────────────────────────────────────────────────────────────
   "Design Your Own" mega menu.

   Kept out of site.min.css so this block stays readable and revertible.
   Opening on hover is inherited from the existing rule
   `.menu-header .menu li:hover > .dropdwon-main { display: block }` — the
   markup only has to sit inside the <li>, exactly like the Jewellery menu.
   ───────────────────────────────────────────────────────────────────────── */

.dyo-menu {
   align-items: stretch;
   gap: 0;
}

.dyo-menu .dyo-col {
   display: block;
   flex: 1 1 0;
   min-width: 0;
   padding: 0 26px;
}

.dyo-menu .dyo-col:first-child {
   padding-left: 0;
}

.dyo-menu .dyo-col:last-child {
   padding-right: 0;
}

.dyo-menu .dyo-col + .dyo-col {
   border-left: 1px solid #e5e5e5;
}

/* The first column carries the longest labels; the image column should never
   stretch past its natural size. */
.dyo-menu .dyo-col-start {
   flex: 0 1 auto;
}

.dyo-menu .dyo-col-img {
   flex: 0 0 auto;
   max-width: 400px;
}

.dyo-menu .mega-box + .mega-box {
   margin-top: 26px;
}

/* Links read as sentences here, unlike the uppercase lists in the other
   mega menus. */
.dyo-menu .mega-box ul li {
   padding: 5px 0 !important;
   font-size: 14px;
   text-transform: none;
   list-style: none;
}

.dyo-menu .mega-box ul li a {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--main-color);
   line-height: 1.35;
   transition: opacity .2s ease;
}

.dyo-menu .mega-box ul li a:hover {
   opacity: .6;
}

.dyo-grid-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: 20px;
}

.dyo-ico {
   flex: 0 0 22px;
   width: 22px;
   height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #8d8d8d;
}

/* Ring marks are drawn side-on, so they need a wider box than the diamond
   and shape marks. */
.dyo-ico-wide {
   flex-basis: 28px;
   width: 28px;
}

.dyo-ico svg,
.dyo-ico img {
   display: block;
   width: 100%;
   height: 100%;
}

.dyo-ico img {
   object-fit: contain;
   border-radius: 2px;
}

/* Hollow ring in the metal's own colour, matching the mock. */
.dyo-dot {
   flex: 0 0 16px;
   width: 16px;
   height: 16px;
   border: 1.5px solid #e3b23c;
   border-radius: 50%;
   background: transparent;
}

.dyo-menu .dyo-col-img .mega-img {
   max-width: 100%;
   height: 100%;
}

.dyo-menu .dyo-col-img .mega-img a {
   display: block;
   width: 100%;
   height: 100%;
}

@media (max-width: 1499px) {
   .dyo-menu .dyo-col {
      padding: 0 20px;
   }

   .dyo-menu .dyo-col-img {
      max-width: 330px;
   }

   .dyo-menu .mega-box ul li {
      font-size: 13px;
   }

   .dyo-grid-2 {
      column-gap: 14px;
   }
}

@media (max-width: 1199px) {
   .dyo-menu .dyo-col-img {
      display: none;
   }
}

/* Mobile popup stacks the columns, so the desktop dividers and the promo
   image would only add noise. */
.mobile-menu-popup .dyo-menu .dyo-col {
   padding: 0;
   border-left: 0;
}

.mobile-menu-popup .dyo-menu .dyo-col + .dyo-col {
   margin-top: 4px;
}

.mobile-menu-popup .dyo-menu .dyo-col-img {
   display: none;
}

.mobile-menu-popup .dyo-menu .mega-box ul li {
   font-size: 15px;
}

/* `.popup-main-menu a { justify-content: space-between }` is meant for the
   top-level rows with their chevron — inside the mega boxes it would fling the
   label to the far edge, away from its icon. */
.mobile-menu-popup .dyo-menu .mega-box ul li a {
   justify-content: flex-start;
}

.mobile-menu-popup .dyo-grid-2 {
   column-gap: 14px;
}

@media (max-width: 400px) {
   .mobile-menu-popup .dyo-grid-2 {
      grid-template-columns: minmax(0, 1fr);
   }
}