/** Shopify CDN: Minification failed

Line 1084:1 Expected "}" to go with "{"

**/
/* =======================================================
   1. DAWN CORE OVERRIDES & HYPER ANIMATIONS
   ======================================================= */
/* =======================================================
   1. PREMIUM SMOOTH TRANSITIONS & CORE FIXES
   ======================================================= */
.mega-menu {
  position: static;
  max-width: 100%;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 1px solid rgba(var(--color-border), var(--color-border-alpha, 1));
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  max-height: 75vh;
  z-index: -1;
  pointer-events: none;

  .mega-menu__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}


.mega-menu__list {
  display: grid;
  grid-template-columns: repeat(var(--menu-columns), 1fr);
  gap: 30px;
  flex: 1; /* 👈 VERY IMPORTANT */
  min-width: 0;
}


.mega-menu__column {
  min-width: 160px;
}

.mega-menu__link--top {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.mega-menu__item-child li {
  margin-bottom: 3px;
}

.mega-menu__link {
  font-size: 14px;
  color: #555;
}

.mega-menu__link:hover {
  color: #000;
}
.mega-menu__column:not(:last-child) {
  border-right: 1px solid #eee;
  padding-right: 20px;
}
.mega-menu__container {
  padding-bottom: 40px; /* adjust 25–40px as you like */
}

  
  /* Smooth Animation Settings */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px); 
  transition: 
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), 
    transform 400ms cubic-bezier(0.4, 0, 0.2, 1), 
    visibility 400ms;
}

/* State when Open */
.mega-menu[open] .mega-menu__content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 99;
  pointer-events: auto;
}

/* State when Closing (Controlled by JavaScript) */
.mega-menu__content.is-closing {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  visibility: hidden !important;
}

/* Header Sticky & Border Fixes */
.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.no-js details[open] > .mega-menu__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* =======================================================
   2. HYPER: MEGA MENU GRID & COLUMNS (DAWN LISTS)
   ======================================================= */
.mega-menu__list {
  display: grid;
  grid-template-columns: repeat(var(--menu-columns, 4), 1fr);
  gap: 3rem;
  padding-block-start: 2rem;
  padding-block-end: 4rem;
  padding-inline: 3rem;
  list-style: none;
  margin: 0;
  flex: 1;
}

.mega-menu__list > li {
  border-inline-end: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1));
  padding-inline-end: 3rem;
}

.mega-menu__list > li:last-child {
  border-inline-end: none;
  padding-inline-end: 0;
}

/* Top Level Links (Hyper's .mega-menu__link--top mapped to Dawn's .mega-menu__link--level-2) */
.mega-menu__link--level-2 {
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  text-transform: var(--font-heading-transform);
  font-size: var(--font-h6-size, 1.6rem);
  color: rgb(var(--color-foreground));
  text-decoration: none;
  line-height: 1.5;
}

/* Child Links Wrapper */
.mega-menu__list > li > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Child Links (Hyper's .mega-menu__item-child li > a mapped to Dawn's .mega-menu__link--level-3) */
.mega-menu__link--level-3 {
  display: block;
  padding-block: 0.4rem;
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.mega-menu__link--level-3:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
}

.mega-menu__list > li > ul > li:last-child > .mega-menu__link--level-3 {
  padding-bottom: 0;
}

/* =======================================================
   3. HYPER: PROMOTIONS BLOCK
   ======================================================= */
.mega-menu__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  width: 100%;
}

.mega-menu--reverse-column {
  flex-direction: row-reverse;
}

.mega-menu--reverse-column .mega-menu__promotions {
  padding-inline-end: 3rem;
  padding-inline-start: 0;
  border-inline-start: 0;
  border-inline-end: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1));
}

.mega-menu__promotions {
  --swiper-navigation-size: 3.8rem;
  flex: 0 0 var(--promotions-width, 38%);
  min-width: 0;
  padding-block-start: 2rem;
  padding-block-end: 4rem;
  padding-inline-start: 3rem;
  border-inline-start: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1));
}

.mega-menu__promotions.no-links {
  border-inline-start: none;
  padding-inline: 0;
  flex: 0 0 100%;
}

.mega-menu__promotions-grid {
  display: grid;
  grid-template-columns: repeat(var(--promotion-columns, 1), 1fr);
  gap: 3rem;
}

.promo-banner {
  position: relative;
  border-radius: var(--blocks-radius, 8px);
  overflow: hidden;
  display: block;
  aspect-ratio: 4/3; 
  width: 100%;
  height: 100%;
  min-height: 200px;
  text-decoration: none;
}

.promo-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.promotion-item:hover .promo-banner__img,
.promo-banner:hover .promo-banner__img {
  transform: scale(1.05);
}

.promo-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--bg-overlay, #000);
  opacity: var(--bg-opacity, 0);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.promo-banner__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 3.2rem 2.4rem;
  display: flex;
  pointer-events: none;
}

.promo-banner__inner {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.promo-banner__sub {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.subheading-style--border {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.2);
  border-radius: 99px;
  width: max-content;
}

.subheading-style--thick-border {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  box-shadow: inset 0 0 0 2px rgba(var(--color-foreground), 0.3);
  border-radius: 99px;
  width: max-content;
}

.promo-banner__heading {
  margin: 0;
  color: inherit;
  line-height: 1.2;
}

.promo-banner__desc {
  font-size: 1.4rem;
  opacity: 0.8;
  margin: 0;
}

/* =======================================================
   4. HYPER: CUSTOM CARDS (Image + Text Below)
   ======================================================= */
.card-media--content-below {
  --content-spacing: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-decoration: none;
}

.card-media--content-below .card-media__media-wrapper {
  width: 100%;
  height: auto;
  border-radius: var(--blocks-radius, 8px);
  overflow: hidden;
}

.card-media--content-below img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-media--content-below:hover img {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.card-media--content-below .card-media__content {
  padding: 0;
}

.card-media--content-below .card-media__text {
  --text-margin-top: 0.4rem;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.7);
  margin: 0;
}

/* =======================================================
   5. HYPER: SIDEBAR MENU FIXES
   ======================================================= */
.menu-sidebar {
  position: relative !important;
  min-height: 450px; 
  --toggle-width: 25rem; 
  width: 100%;
  overflow: hidden;
}

.menu-sidebar details {
  position: static !important;
}

.menu-sidebar__item {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.menu-sidebar__item:first-child {
  padding-block-start: 2rem;
}

.menu-sidebar__item:last-child {
  padding-block-end: 4rem;
  border-bottom: none;
}

.menu-sidebar__toggle {
  width: var(--toggle-width);
  padding: 1.2rem 1.6rem !important;
  border-radius: 8px !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--animation-fast, 0.2s);
  cursor: pointer;
}

.menu-sidebar__toggle::-webkit-details-marker { 
  display: none; 
}

.menu-sidebar__toggle.is-visible,
.menu-sidebar__toggle:hover {
  background-color: #f4f4f4 !important;
  color: #000000;
}

.menu-sidebar__content {
  position: absolute !important;
  top: 0 !important;
  inset-inline-start: var(--toggle-width) !important;
  inset-inline-end: 0 !important;
  padding-inline-start: 4rem !important;
  padding-block-start: 2rem;
  padding-block-end: 4rem;
  min-height: var(--menu-sidebar-height, 100%);
  opacity: 0;
  visibility: hidden;
  border-inline-start: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1));
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.menu-sidebar__toggle.is-visible + .menu-sidebar__content {
  opacity: 1;
  visibility: visible;
}

.menu-sidebar .f-grid {
  display: grid;
  grid-template-columns: repeat(var(--menu-columns, 4), 1fr);
  gap: 2rem 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-sidebar .hover-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
}

.menu-sidebar .media-wrapper {
  background-color: #f4f4f4 !important;
  border-radius: 8px !important;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}

.menu-sidebar .media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}

.menu-sidebar .hover-wrapper:hover .media-wrapper img {
  transform: scale(1.05);
}

/* =======================================================
   6. HYPER: HIGHLIGHT LINKS & BADGES
   ======================================================= */
.hightlight-link { 
  position: relative; 
  display: inline-flex;
}

.hightlight-link--button .btn {
  padding: 0.2rem 1.2rem;
  height: auto;
  line-height: unset;
  font-size: inherit;
  font-family: var(--font-navigation-family);
  font-weight: var(--font-navigation-weight);
  letter-spacing: 0;
  text-transform: var(--navigation-transform);
  text-decoration: none;
  border-radius: min(var(--buttons-radius, 4px), 4px);
}

.hightlight-link--text_color, 
.hightlight-link--star_twinkle, 
.hightlight-link--wave_underline {
  color: var(--hl-link-color, rgb(var(--color-primary)));
}

.wave-underline {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

.hightlight-link--star_twinkle .star {
  position: absolute;
  width: 0.8rem;
  color: inherit;
  opacity: 0;
  animation: twinkle 2s infinite ease-in-out;
}

.hightlight-link--star_twinkle .star-1 { 
  top: 0; 
  left: 0.4rem; 
  animation-delay: 0s; 
}
.hightlight-link--star_twinkle .star-2 { 
  top: 0; 
  right: 0.3rem; 
  animation-delay: 0.3s; 
}
.hightlight-link--star_twinkle .star-3 { 
  bottom: -0.1rem; 
  right: 0.6rem; 
  animation-delay: 0.6s; 
}

@keyframes twinkle {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.custom-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* =======================================================
   HYPER TO DAWN: ALIGNMENT & DIVIDER PATCH
   ======================================================= */

/* 1. Force remove Dawn's default bullets and padding */
.mega-menu__list ul,
.mega-menu__list li {
  list-style: none !important;
  padding-left: 0 !important;
}

/* 2. Map Hyper's border variable to Dawn's foreground variable so it shows up */
.mega-menu__list .mega-menu__column {
  border-inline-end: 1px solid rgba(var(--color-foreground), 0.08) !important;
  padding-inline-end: 3rem !important; /* Ensures space before the divider */
}

/* Remove the border from the very last column */
.mega-menu__list .mega-menu__column:last-child {
  border-inline-end: none !important;
}

/* 3. Ensure the child links have proper vertical spacing */
.mega-menu__link--level-3 {
  padding-bottom: 0.8rem !important;
  display: block;
}
/* =======================================================
   FULL-HEIGHT DIVIDER & ALIGNMENT PATCH
   ======================================================= */

/* 1. Remove all padding from the outer wrappers so columns touch the edges */
.mega-menu__content,
.mega-menu__list {
  padding-top: 0 !important;
  padding-bottom: 10 !important;
}

/* 2. Move the padding inside the columns and apply the full-height border */
.mega-menu__list > li {
  padding-top: 3.5rem !important;      /* Top spacing inside the line */
  padding-bottom: 4rem !important;     /* Bottom spacing inside the line */
  padding-left: 3rem !important;       /* Space inside left */
  padding-right: 3rem !important;      /* Space inside right */
  border-right: 1px solid rgba(var(--color-foreground), 0.08) !important;
}

/* 3. Strip padding from the extreme left side so it aligns with your header text */
.mega-menu__list > li:first-child {
  padding-left: 0 !important;
}

/* 4. Remove the right border on the last text column so it doesn't double-up */
.mega-menu__list > li:last-child {
  border-right: none !important;
}

/* 5. Stretch the image block (promotions) and give it a left border */
.mega-menu__promotions {
  padding-top: 3.5rem !important;
  padding-bottom: 4rem !important;
  padding-left: 3rem !important;
  border-left: 1px solid rgba(var(--color-foreground), 0.08) !important;
  margin-top: 0 !important;
}
/* =======================================================
   SIDEBAR GRID & IMAGE COLLAPSE FIX (UPDATED)
   ======================================================= */

/* 1. Force the main columns to show 4 items across */
.menu-sidebar .f-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  width: 100% !important;
}

.menu-sidebar .f-grid li {
  width: 100% !important;
  display: block !important;
}

/* 2. OVERRIDE DAWN'S .GRID CLASS: Force a vertical column so images don't crush */
.menu-sidebar .hover-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* 3. Force the wrapper to take up 100% width of the column */
.menu-sidebar .overflow-hidden {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

/* 4. The Indestructible Square Hack (Bypasses all theme aspect-ratio logic) */
.menu-sidebar .media-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding-bottom: 100% !important; /* Forces a perfect square */
  height: 0 !important;
  aspect-ratio: auto !important; 
  background-color: #f4f4f4 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* 5. Pin the image securely inside the square */
.menu-sidebar .media-wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* =======================================================
   FULL WIDTH MEGA MENU BACKGROUND PATCH
   ======================================================= */
.header__inline-menu .mega-menu__content {
  width: 100vw !important;
  left: calc(-50vw + 50%) !important;
  right: auto !important;
  max-width: 100vw !important;
}
/* =======================================================
   SIDEBAR HEADING SIZE SYNC
   ======================================================= */
.menu-sidebar__toggle h6 {
  font-family: var(--font-heading-family) !important;
  font-weight: var(--font-heading-weight) !important;
  font-size: var(--font-h6-size, 1.6rem) !important;
  color: rgb(var(--color-foreground)) !important;
  text-transform: var(--font-heading-transform) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
/* =======================================================
   SIDEBAR DIVIDERS FIX (VERTICAL & HORIZONTAL)
   ======================================================= */

/* 1. Remove the rogue horizontal line spanning across the images */
.menu-sidebar__item {
  border-bottom: none !important;
}

/* 2. Restore the vertical divider using Dawn's correct color variable */
.menu-sidebar__content {
  border-left: 1px solid rgba(var(--color-foreground), 0.08) !important;
  bottom: 0 !important; /* Forces the vertical line to stretch fully to the bottom */
}
/* =======================================================
   SIDEBAR DIVIDER SPACING FIX
   ======================================================= */
.menu-sidebar__content {
  margin-left: 3rem !important; /* Pushes the divider line away from the left buttons */
  padding-left: 4rem !important; /* Pushes the images away from the divider line */
}


/* =========================================
   RESPONSIVE BANNER FIX (TABLET + MOBILE)
   ========================================= */

/* Make banner responsive (instead of fixed width) */

/* Make image scale properly */
.mega-menu__promotions img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Tablet adjustment */
/* Mobile fallback (stack layout) */
@media (max-width: 900px) {
  .mega-menu__wrapper {
    flex-direction: column;
  }

  .mega-menu__promotions {
    width: 100%;
    margin-top: 20px;
  }
}

.mega-menu__promotions {
  flex: 0 0 260px;
  max-width: 260px;
}

/* =========================================
   FINAL TABLET OVERFLOW FIX
   ========================================= */

/* Allow layout to adjust properly */
.mega-menu__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: nowrap;
}

/* Let menu shrink instead of forcing overflow */
.mega-menu__list {
  flex: 1;
  min-width: 0;
}

/* Make banner flexible */


/* Ensure image scales */
.mega-menu__promotions img {
  width: 100%;
  height: auto;
  display: block;
}

/* 🔥 KEY FIX FOR TABLET */
@media (max-width: 1024px) {
  .mega-menu__wrapper {
    gap: 20px;
  }

  .mega-menu__promotions {
    width: 180px;
    max-width: 180px;
  }

  /* Reduce columns so it fits */
  .mega-menu__list {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================================
   FIX: Don't shrink product cards
   ========================================= */

/* Only apply width to IMAGE banners (not product lists) */
.mega-menu__promotions:not(:has(.card-product)) {
  width: clamp(200px, 25%, 280px);
  max-width: 280px;
}

/* Reset product list to full width */
.mega-menu__promotions:has(.card-product) {
  width: auto !important;
  max-width: none !important;
  flex: 1 !important;
}

/* Ensure product cards layout properly */
.mega-menu__promotions .card-product {
  width: 100%;
}

/* =========================================
   PRODUCT CAROUSEL (FINAL FIX)
   ========================================= */

/* Remove width restriction for product list */
.mega-menu__promotions.product-carousel {
  flex: 1 !important;
  max-width: none !important;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

/* Each product card */
.mega-menu__promotions.product-carousel .card-product {
  min-width: 200px; /* adjust 180–220 */
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Smooth scroll */
.mega-menu__promotions.product-carousel {
  scroll-behavior: smooth;
}

/* Optional: scrollbar styling */
.mega-menu__promotions.product-carousel::-webkit-scrollbar {
  height: 6px;
}

.mega-menu__promotions.product-carousel::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
/* PRODUCT LIST → FULL WIDTH */
.mega-menu__promotions.product-carousel {
  flex: 1 !important;
  max-width: none !important;
}
.mega-menu__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: nowrap;
}

.mega-menu__list {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1024px) {
  .mega-menu__promotions {
    flex: 0 0 200px;
    max-width: 200px;
  }

  .mega-menu__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =======================================================
   FIX: PREVENT BANNER OVERLAP ON DESKTOP & TABLET
   ======================================================= */

/* 1. Remove the rigid minimum width so columns can scale down natively */
.mega-menu__column {
  min-width: 0 !important;
}

/* 2. Allow the wrapper to wrap elements if they run out of space */
.mega-menu__wrapper {
  flex-wrap: wrap !important;
}

/* 3. Optimize spacing for tablet/smaller desktop screens (1199px and below) */
@media (max-width: 1199px) {
  .mega-menu__list {
    gap: 1.5rem !important; /* Reduce column gaps */
  }
  
  .mega-menu__list > li {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-inline-end: 1.5rem !important;
  }
  
  .mega-menu__promotions {
    padding-left: 1.5rem !important;
  }
}

/* 4. Ensure the banner doesn't break its container if it gets pushed down */
@media (max-width: 1024px) {
  .mega-menu__promotions {
    flex: 1 1 100% !important; /* Force banner to take full width if forced to wrap */
    max-width: 100% !important;
    padding-left: 0 !important;
    border-left: none !important;
    margin-top: 2rem !important;
  }
}

/* =======================================================
   FIX: STABLE DESKTOP MEGA MENU LAYOUT (DYNAMIC WIDTHS)
   ======================================================= */
@media (min-width: 1025px) {
  .mega-menu__wrapper {
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  
  .mega-menu__list > li {
    min-width: 140px !important; 
  }

  /* =========================================
     SCENARIO A: SINGLE IMAGE BANNER
     ========================================= */
  
  /* 1. Text columns take 65% when paired with an image */
  .mega-menu__wrapper:not(:has(.card-product)) .mega-menu__list {
    flex: 1 0 65% !important; 
  }

  /* 2. Image Banner takes remaining space and docks right */
  .mega-menu__promotions:not(:has(.card-product)):not(.product-carousel) {
    flex: 0 0 350px !important; 
    max-width: 350px !important; 
    margin-left: auto !important; 
    overflow: hidden !important; 
  }

  /* 3. Image scales cleanly without cropping */
  .mega-menu__promotions:not(:has(.card-product)) .promo-banner__img {
    object-fit: contain !important; 
    object-position: right center !important; 
    height: 100% !important;
    width: 100% !important;
  }

  /* =========================================
     SCENARIO B: PRODUCT CAROUSEL (BEDDING TAB)
     ========================================= */

  /* 1. Text columns shrink to 40% when paired with products */
  .mega-menu__wrapper:has(.card-product) .mega-menu__list {
    flex: 0 0 40% !important; 
  }

  /* 2. Product container becomes a scrollable carousel */
  .mega-menu__promotions:has(.card-product),
  .mega-menu__promotions.product-carousel {
    flex: 1 1 60% !important; 
    max-width: none !important; 
    width: auto !important;
    margin-left: 0 !important;
    display: flex !important;
    gap: 20px !important; 
    /* 🔥 Turn on horizontal scrolling */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 15px !important; /* Gives room for the scrollbar */
    scroll-behavior: smooth !important;
  }

  /* 3. Give individual product cards a strict size so they NEVER squish */
  .mega-menu__promotions:has(.card-product) .card-product {
    flex: 0 0 220px !important; /* Forces cards to stay a healthy size */
    min-width: 220px !important; 
    scroll-snap-align: start !important;
  }

  /* 4. Optional: Make the scrollbar look clean and modern */
  .mega-menu__promotions:has(.card-product)::-webkit-scrollbar {
    height: 6px;
  }
  .mega-menu__promotions:has(.card-product)::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
  }


 /* =======================================================
   PRODUCT CARD SQUISH & IMAGE FIX (V2)
   ======================================================= */

/* 1. Trigger the carousel layout */
.mega-menu__promotions:has(.card-product),
.mega-menu__promotions:has(.card-wrapper),
.mega-menu__promotions:has(.grid__item),
.mega-menu__promotions.product-carousel {
  flex: 1 1 55% !important; 
  max-width: none !important; 
  width: auto !important;
  margin-left: 0 !important;
  display: flex !important;
  gap: 15px !important; 
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  padding-bottom: 15px !important; 
  scroll-behavior: smooth !important;
}

/* 2. Scale down the individual cards to fit perfectly */
.mega-menu__promotions .card-product,
.mega-menu__promotions .card-wrapper,
.mega-menu__promotions .grid__item {
  flex: 0 0 160px !important; /* Shrunk down from 220px */
  min-width: 160px !important;
  max-width: 160px !important;
  scroll-snap-align: start !important;
}

/* 3. Text columns dynamically adjust */
.mega-menu__wrapper:has(.card-product) .mega-menu__list,
.mega-menu__wrapper:has(.card-wrapper) .mega-menu__list,
.mega-menu__wrapper:has(.grid__item) .mega-menu__list {
  flex: 0 0 45% !important; 
}

/* 4. DAWN FIX: Force the image wrappers to hold a shape so images don't vanish */
.mega-menu__promotions .card__inner,
.mega-menu__promotions .card__media,
.mega-menu__promotions .media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding-bottom: 100% !important; /* Creates a perfect square ratio */
  height: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  border-radius: min(var(--blocks-radius, 8px), 8px) !important;
}

/* 5. Pin the images inside the newly shaped wrappers */
.mega-menu__promotions .media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 6. Hide Dawn's fallback duplicate title inside the image box */
.mega-menu__promotions .card__inner .card__heading {
  display: none !important;
}


/* =======================================================
   SALE BADGE OVER IMAGE FIX
   ======================================================= */

/* 1. Ensure the card acts as the anchor point */
.mega-menu__promotions .card-product,
.mega-menu__promotions .card,
.mega-menu__promotions .card-wrapper {
  position: relative !important;
}

/* 2. Pull the badge out of the text and pin it to the top-left */
.mega-menu__promotions .card__badge {
  position: absolute !important;
  top: 10px !important;   /* Distance from top of the image */
  left: 10px !important;  /* Distance from left of the image */
  z-index: 10 !important; /* Forces it to sit on top of the image */
  margin: 0 !important;
}