/** Shopify CDN: Minification failed

Line 483:32 Unexpected "("

**/
/* Main Navigation Basic Three Level Dropdown */
ul.header__navigation li.dropdown ul.submenu {
  display: none;
  z-index: 25;
  min-width: 240px;
  border-top: 0;
  box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1);
}

ul.header__navigation li.dropdown ul.submenu .inactive-arrow {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
}

ul.header__navigation li.dropdown ul.submenu li {
  min-width: 180px;
  text-align: left;
  display: block;
  clear: left;
  white-space: nowrap;
  padding: 0;
  position: relative;
}

ul.header__navigation li.dropdown ul.submenu li a {
  width: 100%;
}

ul.header__navigation li.dropdown ul.submenu .nested {
  display: none;
  position: absolute;
  left: 100%;
  top: -6px;
  box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1);
}

ul.header__navigation li.dropdown ul.submenu li.nest:hover > ul.nested {
  display: block;
}

ul.header__navigation li.dropdown:hover ul.submenu {
  display: block;
}

/* Main Navigation Mega Drop Mega Menu */
.drop-mega-menu {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  background-color: var(--background);
  -webkit-box-shadow: -1px 9px 4px -4px rgba(0, 0, 0, .05);
  -moz-box-shadow: -1px 9px 4px -4px rgba(0, 0, 0, .05);
  box-shadow: -1px 9px 4px -4px rgba(0, 0, 0, .05);
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
  border-top: 1px solid var(--dotted-color);
}

.drop-mega-menu .left {
  /* tighter vertical padding like Cold Culture */
  padding: 18px 0;
  height: 100%;
}

.drop-mega-menu .left ul > li {
  display: block;
}

/* TOP LEVEL (Section headers) — keep bold */
.drop-mega-menu .left ul > li a {
  font-size: var(--nav-size);
  font-style: var(--nav-style);

  /* force bold section headers */
  font-weight: 650;

  letter-spacing: var(--nav-spacing);

  /* tighter line-height + remove extra vertical gaps */
  line-height: 1.2;
  margin: 0;
  padding: 0;

  text-transform: capitalize;
  text-align: left;
  display: inline-block;
  width: 100%;
}

/* If you use this class for headers, keep them bold too */
.drop-mega-menu .left ul > li a.sub-menu--header {
  font-weight: 650;
}

/* SUB LINKS (subsections) — make lighter + tighter spacing */
.drop-mega-menu .left ul.sub-menu > li a {
  font-size: var(--main-size);
  font-style: var(--main-style);

  /* force lighter weight for subsections */
  font-weight: 400;

  letter-spacing: var(--main-spacing);
  text-transform: capitalize;

  /* tighter like Cold Culture */
  line-height: 1.2;

  width: 100%;

  /* reduce gaps between items */
  padding: 1px 0;
  margin: 0;
}

.drop-mega-menu .left ul > li .megamenu__collection-image {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
}

.drop-mega-menu .left ul > li .megamenu__collection-image .box-ratio {
  padding-bottom: 65% !important;
}

.drop-mega-menu .left ul > li .megamenu__collection-image .box-ratio img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- Right side ---- */
.drop-mega-menu .right {
  background-color: var(--background);
  padding: var(--space-7) 0;
  align-self: start;
  display: flex;
  flex-wrap: nowrap;
  column-gap: 15px;
}

.drop-mega-menu .mega-dropdown__image-wrapper {
  flex: 1 1 33.333%;
  display: flex;
  flex-direction: column;
}

.drop-mega-menu .mega-dropdown__image-wrapper img {
  -webkit-transform: scale(1) translateY(-50%);
  transform: scale(1) translateY(-50%);
  -webkit-transition: -webkit-transform 7s cubic-bezier(0.25, 0.5, 0.8, 0.65);
  transition: -webkit-transform 7s cubic-bezier(0.25, 0.5, 0.8, 0.65);
  transition: transform 7s cubic-bezier(0.25, 0.5, 0.8, 0.65);
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
}

.drop-mega-menu.header__dropdown__collections .mega-dropdown__image-wrapper img {
  height: 100%;
}

.drop-mega-menu .mega-dropdown__image-wrapper img:hover {
  -webkit-transform: scale(1.2) translateY(-50%);
  transform: scale(1.2) translateY(-50%);
}

/* No scale on product images */
.drop-mega-menu .mega-dropdown__image-wrapper .product-loop__img-wrapper img:hover {
  transform: scale(1) translateY(-50%) !important;
}

.drop-mega-menu .mega-dropdown__image-title {
  font-size: var(--font-size);
  font-family: var(--main-family);
  font-weight: var(--main-weight);
  font-style: var(--main-style);
  letter-spacing: var(--main-spacing);
  text-transform: none;
  color: var(--text-color);
}

/* ---- sub-sub menus ---- */
.dropdown.has_sub_menu:hover .drop-mega-menu,
.dropdown.has_sub_menu:hover .submenu {
  display: block;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
}

.navigation__menuitem--active > .drop-mega-menu,
.navigation__menuitem--active > .submenu,
.navigation__menuitem--active > .nested {
  display: block !important;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
}

.js-menuitem-with-nested-dropdown:hover > .nested.dropdown--edge {
  left: initial !important;
  right: calc(100%) !important;
}

.js-menuitem-with-nested-dropdown:hover > .submenu.dropdown--edge {
  left: auto !important;
  right: 0 !important;
}

.dropdown__menuitem--active > .nested {
  display: block !important;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
}

.dropdown__menuitem--active.dropdown--edge {
  left: initial !important;
  right: calc(100%) !important;
}

/* ---- Animate columns ----- */
.animation-text--active li.dropdown.has_sub_menu .drop-mega-menu .left ul > li.animate--text,
.animation-text--active li.dropdown.has_sub_menu .drop-mega-menu .mega-dropdown__image-wrapper.animate--text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in, transform 1s ease;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text {
  transition-delay: 0.15s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--1 {
  transition-delay: 0.20s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--2 {
  transition-delay: 0.25s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--3 {
  transition-delay: 0.3s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--4,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--1 {
  transition-delay: 0.35s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--5,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--2 {
  transition-delay: 0.4s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--6,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--3 {
  transition-delay: 0.45s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--7,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--4 {
  transition-delay: 0.5s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--8,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--5 {
  transition-delay: 0.56s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li.animate--text.delay--9,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper.animate--text.delay--6 {
  transition-delay: 0.6s;
}

.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .left ul > li,
.animation-text--active li.dropdown.has_sub_menu[aria-expanded="true"] .drop-mega-menu .mega-dropdown__image-wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Megamenu additional content ---- */
.megamenu__bottom--content {
  font-size: var(--main-size);
  font-weight: var(--main-weight);
  font-style: var(--main-style);
  display: flex;
  gap: 0;
  justify-content: space-evenly;
  border-top: 1px solid var(--dotted-color);
}

.megamenu__bottom--content > div:nth-child(2) {
  border-left: 1px solid var(--dotted-color);
}

.megamenu__bottom--content .social--icons {
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
}

.megamenu__bottom--content .social--icons a {
  padding: 4px;
}

.megamenu__bottom--content .social--icons svg {
  height: 14px;
}

.megamenu__bottom--content .rich--text {
  flex: 0 0 50%;
  margin-bottom: var(--space-1);
}

.megamenu__bottom--content .rich--text p {
  text-align: center;
  padding: 4px;
  margin-bottom: 0;
}
/* ================================
   MEGA MENU TEXT FIX (FORCE IT)
   Paste this at the VERY BOTTOM of Navigation CSS
   ================================ */

/* 1) Keep SECTION HEADERS bold (JEWELRY / ACCESSORIES etc) */
.drop-mega-menu .left a.sub-menu--header,
.drop-mega-menu .left a.sub-menu--header.mb2 {
  font-weight: 650 !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

/* 2) Make SUB-LINKS lighter (RINGS / NECKLACES / BELTS etc) */
.drop-mega-menu .left ul.sub-menu > li > a,
.drop-mega-menu .left ul.sub-menu > li > a.dlink,
.drop-mega-menu .left ul.sub-menu > li > a.dlink.inline-block {
  font-weight: 400 !important;   /* <-- this is the main change */
  line-height: 1.2 !important;
  margin: 0 !important;

  /* tighter spacing like Cold */
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* 3) Remove extra gaps coming from li styles */
.drop-mega-menu .left ul.sub-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}
/* Make LEFT COLUMN (NEW ARRIVALS section list) bold too */
.drop-mega-menu .left a.sub-menu--header.mb2 {
  font-weight: 650 !important;
}

/* Optional: if you want them even bolder */
.drop-mega-menu .left a.sub-menu--header.mb2 {
  font-weight: 700 !important;
}
/* ✅ MEGA MENU: keep headers bold */
.drop-mega-menu .left a.sub-menu--header {
  font-weight: 650 !important;
}

/* ✅ MEGA MENU: make subsection links lighter (this overrides the theme's 650 !important) */
.drop-mega-menu .left ul.sub-menu > li > a {
  font-weight: 400 !important;
}

/* ✅ OPTIONAL: make ONLY the "NEW ARRIVALS" column's sublinks bold too
   (this works if NEW ARRIVALS is the FIRST header group in the left menu) */
.drop-mega-menu .left ul > li:first-child ul.sub-menu > li > a {
  font-weight: 650 !important;
}
/* ✅ SPECIAL PRICES = red (edit the href part to match your link) */

/* Option A (most likely): if the menu item links to /collections/special-prices */
.drop-mega-menu .left a[href*="special-prices"],
.drop-mega-menu .left a[href*="special_prices"] {
  color:rgb(165, 18, 18) !important;
}

/* Option B: if it links to a sale/discount collection instead */
.drop-mega-menu .left a[href*="/collections/sale"],
.drop-mega-menu .left a[href*="/collections/sales"],
.drop-mega-menu .left a[href*="/collections/discount"] {
  color:rgb(172, 19, 19) !important;
}
/* ================================
   Mega menu: tighter columns + full width
   Paste at VERY BOTTOM of Navigation CSS
================================ */

/* Full-width dropdown (edge to edge) */
@media (min-width: 990px) {
  /* Make the dropdown span the whole header width */
  .drop-mega-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;                 /* edge-to-edge */
    margin-left: calc(50% - 50vw) !important;/* break out of container */
    border-top: 1px solid var(--dotted-color) !important;
    box-sizing: border-box !important;
  }

  /* OPTIONAL: if you also want thin side borders like a framed dropdown */
  /* .drop-mega-menu { border-left: 1px solid var(--dotted-color) !important;
                      border-right: 1px solid var(--dotted-color) !important; } */

  /* Tighter spacing between the 3 text columns */
  .drop-mega-menu .left .grid,
  .drop-mega-menu .left .row,
  .drop-mega-menu .left {
    column-gap: 12px !important;   /* lower = closer (try 10px–18px) */
    gap: 12px !important;
  }

  /* If your text columns are separate UL blocks, remove extra padding */
  .drop-mega-menu .left ul {
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Dropdown image column (your inspected element) */
ul.header__navigation li.dropdown ul.submenu .span-5.auto.right.v-center{
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: stretch !important;

  /* remove the spacing you're seeing (37.9px 0px) */
  padding: 0 !important;
}

/* make sure the 3 image blocks don’t add their own spacing */
ul.header__navigation li.dropdown ul.submenu .span-5.auto.right.v-center > *{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* if the images are links, kill default spacing */
ul.header__navigation li.dropdown ul.submenu .span-5.auto.right.v-center a{
  margin: 0 !important;
}


   COLD CULTURE MEGA MENU CLONE (RYNOR)
   Goal: Make the entire mega menu scroll edge-to-edge (not just
   the image rail) and match Cold Culture spacing / sizing.

   Key behaviors:
   - Text columns have fixed widths like Cold (≈155px)
   - Promo images are fixed at 140px wide
   - All 5 promo images always render
   - When viewport shrinks, the WHOLE mega menu overflows and
     scrolls horizontally (scrollbar spans the full dropdown)
   - Right edge has no “white bumper” (no extra padding-right)
============================================================ */

/* 1) The mega menu itself is the scroll container */
.drop-mega-menu.header__dropdown__linklist {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;

  /* prevent the page itself from "stealing" horizontal scroll */
  overscroll-behavior-x: contain;

  /* Cold Culture: 1px black rule at the very bottom of the dropdown */
  border-bottom: 1px solid #000 !important;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #8a8a8a #d0d0d0;
}

/* WebKit scrollbar (Chrome/Safari/Edge) */
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar {
  height: 18px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-track {
  background: #d0d0d0;
  border: 1px solid #8e8e8e;
  border-radius: 999px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-thumb {
  background: #8a8a8a;
  border-radius: 999px;
  border: 3px solid #d0d0d0;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button {
  width: 32px;
  height: 18px;
  background-color: #d0d0d0;
  border: 1px solid #8e8e8e;
  border-radius: 999px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2) Turn the inner grid wrapper into a single, non-wrapping row
      that can become wider than the viewport */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper {
  /* override theme grid */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  /* Cold-like spacing between left columns + promo area */
  gap: 96px !important;

  /* Cold has generous top/bottom air */
  padding-top: 56px !important;
  padding-bottom: 56px !important;

  /* left padding similar to Cold, right padding removed so images
     can reach the edge when scrolled to the end */
  padding-left: clamp(42px, 6vw, 96px) !important;
  padding-right: 0 !important;

  /* prevent the theme's default centering (margin: 0 auto) */
  margin: 0 !important;

  /* critical: allow the wrapper to size to its content so the
     dropdown overflows horizontally */
  width: max-content !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3) Left block should size to its content (not span-5 = 100%) */
.drop-mega-menu.header__dropdown__linklist .left {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  align-self: flex-start !important;
}

/* 4) The left columns list becomes fixed-width columns like Cold */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;

  /* column gaps like Cold */
  gap: 62px !important;

  /* no extra grid padding */
  padding: 0 !important;
  margin: 0 !important;

  width: max-content !important;
}

/* Each column is ~155px wide (matches the 154.82px you saw on Cold) */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li {
  width: 155px !important;
  flex: 0 0 155px !important;
  max-width: 155px !important;
  min-width: 155px !important;

  /* neutralize theme grid column rules from span-* */
  grid-column: auto !important;
}

/* Section headers (CLOTHING / ACCESSORIES / SNEAKERS etc) */
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Add the header-to-links spacing on the <li> so we don't double-stack margins */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu > li:first-child {
  margin-bottom: 16px !important;
}

/* Sub-links (HOODIES / ZIPS / etc) */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu > li > a {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.55 !important;
  padding: 2px 0 !important;
}

/* First column (NEW ARRIVALS / BEST SELLERS / etc) is bold + larger */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li:first-child ul.sub-menu > li > a {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.55 !important;
  padding: 2px 0 !important;
}

/* Nudge the primary (left) column up a touch so it aligns with the other column headers */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li:first-child ul.sub-menu {
  margin-top: -4px !important;
}

/* 5) Promo (right) block: fixed 140px tiles, no internal scrolling */
.drop-mega-menu.header__dropdown__linklist .right {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 20px !important;

  /* IMPORTANT: remove the old image-rail scroll so the dropdown
     itself becomes the single scroll area */
  overflow: visible !important;
}

.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-wrapper {
  width: 140px !important;
  flex: 0 0 140px !important;
  max-width: 140px !important;
  min-width: 140px !important;
}

/* Force Cold-like promo image ratio (~172.6px tall @ 140px wide) */
.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-wrapper .box-ratio {
  padding-bottom: 123.3% !important;
}

/* Promo captions: bold + uppercase (already requested earlier) */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-title {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin-top: 14px !important;
}

/* 6) Remove “right bumper” when scrolled all the way right */
.drop-mega-menu.header__dropdown__linklist {
  padding-right: 0 !important;
}


/* 7) Drag-to-scroll affordance (desktop): grab anywhere like Cold Culture */
.drop-mega-menu.header__dropdown__linklist {
  cursor: grab;
}
.drop-mega-menu.header__dropdown__linklist.rynor-dragging {
  cursor: grabbing;
  user-select: none;
}

/* "NEW" superscript badge (match ColdCulture) */
.drop-mega-menu sup.menu-badge {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  color: #C10016;
  letter-spacing: 0.02em;
  margin-left: 4px;
  vertical-align: super;
  /* Nudge down slightly to match reference */
  position: relative;
  top: 3px;
}


/* =====================================================================
   FINAL OVERRIDES (match Cold Culture) – keep appended so it wins
   ===================================================================== */

/* [z-index] Keep the header/mega-menu above page content, but BELOW overlays
   (cart drawer, popup overlays, modals) so overlays correctly dim/cover the header. */
.shopify-section-group-header-group {
  position: relative;
  z-index: 100 !important;
}

.section-header,
.section-header__main-bar,
.section-header__dropdown,
.section-header__dropdown-bg {
  z-index: 100 !important;
}

.drop-mega-menu.header__dropdown__linklist {
  z-index: 100 !important;
}

/* [spacing] Don't treat the first item in each list as a "header".
   (Fixes NEW ARRIVALS looking like a header + too-large gap under ACCESSORIES/JEWELRY.) */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu > li:first-child {
  margin-bottom: 0 !important;
}

.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header {
  /* Header spacing should match Cold Culture.
     This only affects actual column headers (e.g., JEWELRY / ACCESSORIES)
     and avoids treating the first column (NEW ARRIVALS) as a header. */
  margin-bottom: 14px !important;
}

/* [scrollbar] Force a visible left-arrow + right-arrow like Cold Culture.
   Use explicit start/end selectors so both arrows render consistently. */
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar {
  height: 14px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-track {
  background: #d0d0d0;
  border-radius: 999px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-thumb {
  background-color: #8c8c8c;
  border-radius: 999px;
  border: 3px solid #d0d0d0;
  background-clip: padding-box;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button {
  width: 22px;
  background-color: #d0d0d0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  display: block;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M12 6 L8 10 L12 14' stroke='%234A4A4A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M8 6 L12 10 L8 14' stroke='%234A4A4A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/* Hide the extra/double buttons some browsers expose. */
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:start:increment,
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

/* =====================================================================
   EXTRA TUNING (requested)
   - Make the left scrollbar arrow fully visible (avoid edge clipping)
   - Slightly increase vertical spacing (≈ +5%)
   - Bring left menu columns closer together (≈ 2/3 gap)
   - Prevent text selection while click-drag scrolling
   - Remove odd click/focus rectangle while preserving keyboard focus
   ===================================================================== */

/* Slight inset so the custom scrollbar's left button isn't clipped by the
   preview/iframe edge (Shopify editor can clip exact-edge UI). */
.drop-mega-menu.header__dropdown__linklist {
  width: calc(100% - 16px) !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* Tighter spacing between the left text columns. */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  gap: 42px !important;
}

/* Slightly more breathing room on every link. */
.drop-mega-menu.header__dropdown__linklist .left a {
  font-size: 12px !important;
  line-height: 1.62 !important;
  padding: 3px 0 !important;
}

/* Prevent dragging from selecting text / showing the grey selection box. */
.drop-mega-menu.header__dropdown__linklist,
.drop-mega-menu.header__dropdown__linklist * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent the browser “drag link/image” ghost preview while users are
   click-drag scrolling horizontally. */
.drop-mega-menu.header__dropdown__linklist a,
.drop-mega-menu.header__dropdown__linklist img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Remove odd click rectangle; keep a subtle keyboard-only focus ring. */
.drop-mega-menu.header__dropdown__linklist a:focus {
  outline: none;
}

.drop-mega-menu.header__dropdown__linklist a:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
}

.drop-mega-menu.header__dropdown__linklist a:active {
  background: transparent !important;
}

/* =====================================================================
   FIXES (2026-03-03)
   - Remove the faint rounded hover/active highlight on menu links
   - Remove the left "gap" while keeping the left scrollbar arrow visible
     (avoid 100vw/scrollbar half-pixel offset)
   - Make header-to-links spacing uniform (no extra gap under JEWELRY / ACCESSORIES)
   ===================================================================== */

/* 1) No hover highlight / rounded rectangle on menu items */
.drop-mega-menu.header__dropdown__linklist .left li:hover,
.drop-mega-menu.header__dropdown__linklist .left li:hover > a,
.drop-mega-menu.header__dropdown__linklist .left a:hover,
.drop-mega-menu.header__dropdown__linklist .left a:active {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

/* 2) Edge-to-edge dropdown WITHOUT the 8px inset that created a left gap.
      Keeps the left scrollbar arrow fully visible even when the page has a
      vertical scrollbar (100vw includes scrollbar width).

      100vw - 100% = scrollbar width (if present). Shifting by half cancels
      the half-scrollbar negative offset from centering a 100vw dropdown.
*/
.drop-mega-menu.header__dropdown__linklist {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(calc(-50% + (100vw - 100%) / 2)) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Uniform header spacing (match Cold Culture) */
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header {
  margin-bottom: 0 !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu {
  margin-top: 0 !important;
}

/* =====================================================================
   RYNOR – Mega menu spacing tuning (FIXED18)
   - Bring the 3 text columns closer together (~33%)
   - Make JEWELRY / ACCESSORIES header spacing match other menu items
   ===================================================================== */

/* Reduce horizontal gap between the 3 text columns (was 42px) */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  gap: 20px !important;
}

/* Header (JEWELRY / ACCESSORIES) should have the SAME padding/line-height
   as normal links so the spacing under it matches every other item. */
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header,
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header.mb2 {
  padding: 3px 0 !important;
  line-height: 1.62 !important;
  margin-bottom: 0 !important;
}

/* Remove the old accidental extra spacing rule if it exists */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu > li:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =====================================================================
   RYNOR – Mega menu polish (FIXED19)
   - Bring promo tiles closer together (match Cold Culture)
   - Add a 1px black rule above the horizontal scrollbar
   - Make the scrollbar look closer to Cold Culture (clearer/darker arrows)
   ===================================================================== */

/* Slightly tighter promo tile spacing (was 20px). User requested ~3/4 the gap. */
.drop-mega-menu.header__dropdown__linklist .right {
  gap: 15px !important;
}

/* We use a shared variable so the 1px bottom rule can sit *above* the scrollbar. */
.drop-mega-menu.header__dropdown__linklist {
  --rynor-mm-scrollbar-h: 18px;
}

/* (Line note) The black 1px rule is handled by the dropdown border-bottom so it sits *under* the scrollbar. */

/* Horizontal scrollbar styling (Chrome / WebKit) */
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar {
  height: var(--rynor-mm-scrollbar-h);
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-track {
  background: #d0d0d0;
  border-radius: 999px;
  border: 1px solid #8e8e8e;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-thumb {
  background-color: #8a8a8a;
  border-radius: 999px;
  border: 3px solid #d0d0d0;
  background-clip: padding-box;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button {
  /* wider buttons = arrow icon isn't pressed against the page edge */
  width: 32px;
  height: var(--rynor-mm-scrollbar-h);
  background-color: #d0d0d0;
  border: 1px solid #8e8e8e;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  display: block;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M12 6 L8 10 L12 14' stroke='%23000' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M8 6 L12 10 L8 14' stroke='%23000' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/* Hide the extra/double buttons some browsers expose. */
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:start:increment,
.drop-mega-menu.header__dropdown__linklist::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

/* Collections dropdown bottom border to match Shop dropdown */
.drop-mega-menu.header__dropdown__collections {
  border-bottom: 1px solid #000 !important;
}

/* =====================================================================
   RYNOR — FINAL MEGA MENU TUNING (SHOP) — Mar 2026
   Goals:
   - Match Cold Culture spacing more closely
   - 40px padding on all sides
   - Columns + promo images closer together
   - Promo images scale with viewport (min 140px)
   - Restore the 1px bottom border (below the scrollbar)
   ===================================================================== */

/* 1) Ensure the SHOP dropdown has the 1px black line at the very bottom */
.drop-mega-menu.header__dropdown__linklist {
  border-bottom: 1px solid #1c1c1c !important;
}

/* 2) Main scroll container padding + overall spacing */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper {
  padding: 40px !important;

  /* Bring promos closer to the menu columns */
  gap: 48px !important;

  /* Allow the promo grid to expand as the viewport grows */
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
}

/* 3) Make the 3 menu columns sit closer together */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  column-gap: 14px !important; /* was 20px */
}

/* Keep each column at ColdCulture-ish width */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li {
  min-width: 155px !important;
  max-width: 155px !important;
}

/* 4) Promo strip: responsive columns that grow with the viewport */
.drop-mega-menu.header__dropdown__linklist .right {
  flex: 1 1 0% !important;
  padding: 0 !important;

  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(140px, 1fr) !important;
  gap: 12px !important;

  align-items: start !important;
  justify-content: start !important;
}

.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-wrapper {
  width: auto !important;
  min-width: 140px !important;
}

.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-title {
  font-weight: 500 !important;
}

/* 5) Scrollbar styling should apply to the ACTUAL scroller (the inner grid wrapper) */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper {
  scrollbar-color: #8a8a8a #d5d5d5;
  scrollbar-width: thin;
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar {
  height: 14px;
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-track {
  background: #d5d5d5;
  border-radius: 9999px;
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-thumb {
  background: #8a8a8a;
  border-radius: 9999px;
}

/* Bigger + darker arrows, with the icon centered so it won't look clipped */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button:horizontal {
  width: 26px;
  background: #d5d5d5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%233d3d3d' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%233d3d3d' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
}

/* Allow promo cards to expand (override older fixed 140px max-width rules) */
.drop-mega-menu.header__dropdown__linklist .right > * {
  max-width: none !important;
}

/* ============================================================
   RYNOR — ColdCulture Mega Menu Match (FINAL3)
   - tighter spacing (menus + promo images)
   - no hover zoom on promo images
   - consistent label typography
   - drag-to-scroll works on the actual scroll container
   ============================================================ */

/* Ensure bottom border exists on BOTH dropdown types */
.drop-mega-menu.header__dropdown__linklist,
.drop-mega-menu.header__dropdown__collections {
  border-bottom: 1px solid #1C1C1C !important;
}

/* ------------------------------------------------------------
   SHOP mega menu: main scroll container
   ------------------------------------------------------------ */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper {
  /* Full-width horizontal scroll when needed (and shows the bar consistently) */
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  /* Padding requested */
  padding: 40px !important;
  box-sizing: border-box !important;

  /* Layout */
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  /* Make menus + images closer together */
  gap: 32px !important;

  /* Drag UX */
  cursor: grab;
  user-select: none;
}

.drop-mega-menu.header__dropdown__linklist > .grid__wrapper.rynor-dragging {
  cursor: grabbing !important;
}

/* Disable text selection only while dragging (JS adds body class) */
body.rynor-mm-noselect,
body.rynor-mm-noselect * {
  user-select: none !important;
}

/* Scrollbar styling (WebKit / Chromium) */
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar {
  height: 16px;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-track {
  background: #e9e9e9;
  border-radius: 999px;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-thumb {
  background: #7b7b7b;
  border-radius: 999px;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-thumb:hover {
  background: #6a6a6a;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button {
  width: 20px;
  height: 16px;
  background: #e9e9e9;
  border-radius: 999px;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23555555' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.drop-mega-menu.header__dropdown__linklist > .grid__wrapper::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23555555' d='M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Firefox */
@supports (scrollbar-color: auto) {
  .drop-mega-menu.header__dropdown__linklist > .grid__wrapper {
    scrollbar-width: auto;
    scrollbar-color: #7b7b7b #e9e9e9;
  }
}

/* ------------------------------------------------------------
   SHOP mega menu: columns + promo area spacing
   ------------------------------------------------------------ */

/* Menu columns (left) */
.drop-mega-menu.header__dropdown__linklist .left {
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  display: flex !important;
  flex-wrap: nowrap !important;

  /* 20–25% tighter than the previous wide spacing */
  gap: 45px !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li {
  width: 155px !important;
  flex: 0 0 155px !important;
}

/* Remove any leftover extra top offsets so headings align */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu {
  margin-top: 0 !important;
}

/* Promo area (right) */
.drop-mega-menu.header__dropdown__linklist .right {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;

  /* Make images slightly larger + closer together */
  display: grid !important;
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  gap: 10px !important;

  /* Guarantees overflow on smaller viewports so scrollbar appears */
  min-width: 890px !important;
}

/* ------------------------------------------------------------
   Typography: match ColdCulture vibe (consistent weights)
   ------------------------------------------------------------ */

/* Remove "pill" hover backgrounds inside the mega menu */
.drop-mega-menu.header__dropdown__linklist a,
.drop-mega-menu.header__dropdown__collections a {
  -webkit-tap-highlight-color: transparent;
}

.drop-mega-menu.header__dropdown__linklist a:hover,
.drop-mega-menu.header__dropdown__collections a:hover,
.drop-mega-menu.header__dropdown__linklist a:active,
.drop-mega-menu.header__dropdown__collections a:active {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Menu headings + items */
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--link {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Promo image captions — match the heading weight */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ------------------------------------------------------------
   Stop promo images from zooming on hover + prevent link-drag ghost
   ------------------------------------------------------------ */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-wrapper img {
  transition: none !important;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Keep the original centering transform, but remove the hover scale */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-wrapper img:hover {
  transform: translateY(-50%) !important;
}


/* ============================================================
   RYNOR FINAL4 – ColdCulture parity fixes
   - Hover-only mega menus (no pinned open)
   - 40px padding all around
   - Tighter column + promo spacing
   - Promo tiles grow with viewport (min 220px)
   - Keep scrollbar only when overflow
   ============================================================ */

/* Always keep the 1px bottom border on the Shop (linklist) mega menu, BELOW the scrollbar */
nav.drop-mega-menu.header__dropdown__linklist {
  border-bottom: 1px solid #000 !important;
}

/* Core layout + scroll container */
.drop-mega-menu.header__dropdown__linklist .grid__wrapper {
  /* Match ColdCulture spacing */
  padding: 40px !important;

  /* Bring menus + promo closer */
  gap: 48px !important;

  /* Scroll only when needed */
  overflow-x: auto !important;
  overflow-y: hidden !important;

  /* Fill available width so the promo area can grow */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Left columns closer together */
.drop-mega-menu.header__dropdown__linklist .left {
  flex: 0 0 auto !important;
}
.drop-mega-menu.header__dropdown__linklist .left .mega-menu.wrapper-nest {
  gap: 48px !important;
}

/* Keep header -> first item spacing consistent */
.drop-mega-menu.header__dropdown__linklist .sub-menu--header {
  margin-bottom: 8px !important;
}

/* Promo area should grow; tiles should grow (not the gaps) */
.drop-mega-menu.header__dropdown__linklist .right {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  gap: 16px !important;
}

.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-wrapper {
  /* Responsive tiles: grow with viewport, but enforce a strong min so narrow screens overflow */
  flex: 1 1 220px !important;
  min-width: 220px !important;
  width: auto !important;
  max-width: none !important;
}

/* Match ColdCulture square promo tiles (and undo any older forced aspect) */
.drop-mega-menu.header__dropdown__linklist .right .mega-dropdown__image-wrapper .box-ratio {
  padding-bottom: 100% !important;
}

/* Typography parity: make promo captions match column headers */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-title,
.drop-mega-menu.header__dropdown__collection_list .mega-dropdown__image-title,
.drop-mega-menu.header__dropdown__collections .mega-dropdown__image-title {
  font-weight: 600 !important;
}

/* Slightly lighter scrollbar (track + thumb) while keeping arrows readable */
.drop-mega-menu.header__dropdown__linklist .grid__wrapper::-webkit-scrollbar-track {
  background: #ECECEC !important;
}
.drop-mega-menu.header__dropdown__linklist .grid__wrapper::-webkit-scrollbar-thumb {
  background: #C9C9C9 !important;
}
.drop-mega-menu.header__dropdown__linklist .grid__wrapper::-webkit-scrollbar-button {
  background-color: #ECECEC !important;
}

/* Desktop: do NOT auto-open dropdown/mega menu just because the menu item is "active".
   This matches ColdCulture and prevents the blank white dropdown after clicking Shop/Collections. */
@media (min-width: 750px) {
  .navigation__menuitem--active > .drop-mega-menu {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Remove hover zoom on mega menu images (Shop + Collections) */
.drop-mega-menu.header__dropdown__collection_list .mega-dropdown__image-wrapper img:hover,
.drop-mega-menu.header__dropdown__collections .mega-dropdown__image-wrapper img:hover {
  transform: translateY(-50%) !important;
}

/* =========================================================
   ColdCulture Mega Menu – Pixel Match (FINAL6)
   ========================================================= */

/* Ensure the dropdowns have the same bottom divider line */
.drop-mega-menu.header__dropdown__linklist,
.drop-mega-menu.header__dropdown__collections,
.drop-mega-menu.header__dropdown__collection_list {
  border-bottom: 1px solid #000 !important;
}

/* Desktop-only: animate mega menu open like ColdCulture (fast slide + fade). */
@media (hover: hover) and (pointer: fine) {
  .dropdown.has_sub_menu > .drop-mega-menu.header__dropdown__linklist,
  .dropdown.has_sub_menu > .drop-mega-menu.header__dropdown__collections,
  .dropdown.has_sub_menu > .drop-mega-menu.header__dropdown__collection_list {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }

  .dropdown.has_sub_menu:hover > .drop-mega-menu.header__dropdown__linklist,
  .dropdown.has_sub_menu:hover > .drop-mega-menu.header__dropdown__collections,
  .dropdown.has_sub_menu:hover > .drop-mega-menu.header__dropdown__collection_list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: opacity 160ms ease, transform 160ms ease;
  }
}

/* MAIN MEGA MENU WRAPPER (this element becomes the horizontal scroller) */
.drop-mega-menu.header__dropdown__linklist > .mega-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 48px !important; /* space between columns + promo */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 40px 48px !important; /* matches ColdCulture (40 top/bottom, 48 left/right) */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

.drop-mega-menu.header__dropdown__linklist > .mega-menu > * {
  flex: 0 0 auto !important;
}

/* The theme's grid span classes force width:100%. Override to content width for the mega menu. */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__links,
.drop-mega-menu.header__dropdown__linklist .mega-menu__promo {
  width: max-content !important;
  max-width: none !important;
}

/* Left columns */
.drop-mega-menu.header__dropdown__linklist .mega-menu__linklist {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important; /* column spacing */
  width: max-content !important;
}

.drop-mega-menu.header__dropdown__linklist .mega-menu__linklist > li {
  flex: 0 0 auto !important;
  width: max-content !important;
}

.drop-mega-menu.header__dropdown__linklist .sub-menu {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Header of each column (CLOTHING / ACCESSORIES / etc) */
.drop-mega-menu.header__dropdown__linklist .sub-menu--header {
  display: block !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1C1C1C !important;
  text-decoration: none !important;
}

/* Default submenu items (regular weight) */
.drop-mega-menu.header__dropdown__linklist .sub-menu li a,
.drop-mega-menu.header__dropdown__linklist .sub-menu li a:visited {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1C1C1C !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* First column (NEW ARRIVALS / BEST SELLERS / etc) is bold in ColdCulture */
.drop-mega-menu.header__dropdown__linklist .first-column-style__link,
.drop-mega-menu.header__dropdown__linklist .sub-menu--primary a {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1C1C1C !important;
  text-decoration: none !important;
}

/* Remove hover highlight blocks */
.drop-mega-menu.header__dropdown__linklist a:hover,
.drop-mega-menu.header__dropdown__linklist a:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Right promo (images) */
.drop-mega-menu.header__dropdown__linklist .mega-menu__promo.mega-dropdown__promo {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* Match ColdCulture spacing between promo tiles */
  gap: 10px !important;
  align-items: flex-start !important;
}

.drop-mega-menu.header__dropdown__linklist .mega-menu__promo.mega-dropdown__promo .mega-menu__promo-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  /* ColdCulture behavior:
     - fixed 140px wide until ~1450px viewport
     - then scales up with screen width
     Targets (from your screenshots):
       ~1600px viewport => ~170px tile
       ~2000px viewport => ~250px tile
     Formula: 140 + (vw - 1450) * 0.2
  */
  width: 140px !important;
  min-width: 140px !important;
  max-width: none !important;
  /* override older fixed-basis rules so the width logic here can control sizing */
  flex: 0 0 auto !important;
  text-decoration: none !important;
  color: #1C1C1C !important;
}

@media (min-width: 1450px) {
  .drop-mega-menu.header__dropdown__linklist .mega-menu__promo.mega-dropdown__promo .mega-menu__promo-item {
    width: clamp(140px, calc(140px + (100vw - 1450px) * 0.2), 380px) !important;
    min-width: clamp(140px, calc(140px + (100vw - 1450px) * 0.2), 380px) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

/* Force ColdCulture-style tall tiles (4:5) + proper crop */
.drop-mega-menu.header__dropdown__linklist .mega-menu__promo.mega-dropdown__promo .mega-menu__promo-item .box-ratio {
  padding-bottom: 125% !important; /* 4:5 */
  position: relative !important;
  overflow: hidden !important;
}

.drop-mega-menu.header__dropdown__linklist .mega-menu__promo.mega-dropdown__promo .mega-menu__promo-item .box-ratio img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

.drop-mega-menu.header__dropdown__linklist .mega-menu__promo-title {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left !important;
}

/* Absolutely no hover zoom */
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-wrapper:hover img,
.drop-mega-menu.header__dropdown__linklist .mega-dropdown__image-wrapper img:hover {
  transform: none !important;
}

/* Scrollbar styling (slightly lighter, like ColdCulture) */
.drop-mega-menu.header__dropdown__linklist > .mega-menu::-webkit-scrollbar {
  height: 10px;
}
.drop-mega-menu.header__dropdown__linklist > .mega-menu::-webkit-scrollbar-track {
  background: #ECECEC;
  border-radius: 999px;
}
.drop-mega-menu.header__dropdown__linklist > .mega-menu::-webkit-scrollbar-thumb {
  background: #C9C9C9;
  border-radius: 999px;
}

/* Firefox */
.drop-mega-menu.header__dropdown__linklist > .mega-menu {
  scrollbar-color: #C9C9C9 #ECECEC;
  scrollbar-width: thin;
}

/* =====================================================================
   RYNOR — Mega menu text parity (match ColdCulture)
   - Column width = longest item in that column
   - Uniform vertical spacing via flex gap (4px)
   - Special Prices red
   - Tighter letter spacing
   ===================================================================== */

/* Column container: shrink-to-fit columns (no fixed 155px widths) */
.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  /* ColdCulture feel: columns sit closer once widths are content-sized */
  gap: 48px !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.grid__wrapper.wrapper-nest > li {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each column list: inline-flex so the column width is defined by its longest row */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important; /* vertical purple gap */
  padding: 0 !important;
  margin: 0 !important;
  width: max-content !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu > li {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base link styling (match ColdCulture text sizing/spacing) */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a {
  font-size: 12px !important;
  line-height: 1.59 !important; /* ~23.1px row height w/ 12px font + 2px top/btm padding */
  letter-spacing: 0.015em !important;
  text-transform: uppercase !important;
  color: #1C1C1C !important;
  padding: 2px 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  text-decoration: none !important;
}

/* Weights: headers + first column bold, inner items regular */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a {
  font-weight: 400 !important;
}
/*
  Bold items (ColdCulture parity):
  - Primary (left) column links
  - Sub-menu column headers (CLOTHING / ACCESSORIES / ...)

  NOTE: We include `ul.sub-menu a...` for headers so this overrides the
  generic `ul.sub-menu a { font-weight: 400 !important; }` rule above.
*/
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu--primary a,
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a.sub-menu--header,
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a.sub-menu__header {
  /* Heavier by +100 to match the primary column visual weight */
  font-weight: 700 !important;
}

/* Ensure header rows don't add extra spacing (gap handles it) */
.drop-mega-menu.header__dropdown__linklist .left .menu-item--header {
  margin: 0 !important;
  padding: 0 !important;
}
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu--header,
.drop-mega-menu.header__dropdown__linklist .left a.sub-menu__header {
  margin: 0 !important;
}

/* Special Prices = red (by title-based class added in Liquid) */
.drop-mega-menu.header__dropdown__linklist .left li.special-prices > a {
  color: #9F2A25 !important;
  font-weight: 600 !important;
}

/* NEW badge alignment (match ColdCulture: top-right, floating, no margin) */
.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a {
  position: relative !important;
  overflow: visible !important;
}

.drop-mega-menu.header__dropdown__linklist .left ul.sub-menu a sup.menu-badge--new {
  position: absolute;
  /* Move the NEW badge down a touch (was sitting too high) */
  top: 0px;
  right: -18px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 7px !important;
  line-height: 1 !important;
  color: #C10016 !important;
}