/** Shopify CDN: Minification failed

Line 1453:0 Unexpected "}"

**/
/* Body lock scroll when drawer/menu open */
body.menu-open {
  overflow: hidden !important;
}

.shopify-section:has(.header-menu__drawer.is-active) {
  z-index: 90909909 !important;
}

body.menu-open .shopify-section:has(.announcement-bar) {
  z-index: 90909910 !important;
}

/* Header - Desktop & Mobile */
.header-menu {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  position: relative;
  width: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* Overlay for mega menu */
.header-menu__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.header-menu__overlay.is-active {
  pointer-events: auto;
}

.header-menu__overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 234, 0, 0.5) 29.27%,
    rgba(255, 57, 147, 0.5) 100%
  );
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition: backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.header-menu__overlay.is-active::before {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
}

.header-menu__overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.header-menu__overlay.is-active::after {
  opacity: 1;
}

/* Header Container */
.header-menu__container {
  background: var(--Others-White, #ffffff);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 12px 42px;
  overflow: visible;
  position: relative;
  z-index: 4;
  --mega-menu-height: 30px;
  --mega-menu-content-height: 0px;
  --wrapper-height: 0px;
}

.header-menu__container::after {
  content: "";
  position: absolute;
  top: calc(100% - 44px);
  left: 0;
  right: 0;
  background: var(--Others-White, #ffffff);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  height: var(--mega-menu-height);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 9;
}

.header-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

/* Top Row */
.header-menu__top-row {
  display: flex;
  align-items: center;
  height: 48px;
}

.header-menu__left,
.header-menu__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1.5;
}

.header-menu__right {
  justify-content: flex-end;
}

.header-menu__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 55px;
}

.header-menu__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header-menu__logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.header-menu__promo-link {
  display: inline-flex;
  padding: 0 18px;
  text-align: center;
  min-height: 48px;
  align-items: center;
  border-radius: 16px;
  border: 2px solid var(--Primary-Vibrant-pink, #ff3993);
  text-decoration: none;
  transition: all 0.3s ease;
}

.header-menu__promo-link:hover {
  background: var(--Primary-Vibrant-pink, #ff3993);
}

.header-menu__promo-link:hover span {
  color: var(--Others-White, #ffffff);
}

.header-menu__promo-link span {
  color: var(--Primary-Vibrant-pink, #ff3993);
  transition: color 0.3s ease;
}

.header-menu__top-link {
  display: inline-flex;
  padding: 8px 12px;
  align-items: center;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.header-menu__top-link:hover {
  background: var(--Primary-Pop-yellow, #ffea00);
}

.header-menu__top-link span {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu__account,
.header-menu__cart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.3s ease;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.header-menu__account:hover,
.header-menu__cart:hover {
  background: var(--Primary-Pop-yellow, #ffea00);
}

.header-menu__cart-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.header-menu__cart-badge {
  position: absolute;
  left: 3px;
  top: 14.73px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-menu__cart-badge svg {
  transform: rotate(85.135deg);
}

.header-menu__cart-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--Others-White, #ffffff);
  font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

/* Bottom Row - Navigation */
.header-menu__bottom-row {
  background: var(--Others-Background-light, #fff2f8);
  border-radius: 18px;
  padding: 6px 80px;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
  z-index: 11;
}

.header-menu__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 12;
}

.header-menu__nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.3s ease;
  cursor: pointer;
}

.header-menu__nav-item:hover {
  background: var(--Primary-Pop-yellow, #ffea00);
}

.header-menu__nav-item span {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu__nav-item--has-dropdown {
  position: static;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.header-menu__nav-item--has-dropdown:hover {
  background: var(--Primary-Pop-yellow, #ffea00);
}

.header-menu__nav-item--has-dropdown.is-active {
  background: var(--Primary-Pop-yellow, #ffea00);
}

.header-menu__nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: unset;
  border: none;

  cursor: inherit;
}

.header-menu__nav-button span {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu__nav-item--has-dropdown.is-active .header-menu__dropdown-icon {
  transform: rotate(180deg);
}

.header-menu__dropdown-icon {
  transition: transform 0.3s ease;
}

.header-menu__tag {
  display: inline-flex;
  padding: 2px 6px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--Secondary-Soft-dark-100, #2b2b2b);
  color: var(--Others-White, #ffffff) !important;
  font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

/* Mega Menu Wrapper */
.header-menu__mega-menu-wrapper {
  position: absolute;
  top: calc(100% - 18px);
  left: 0;
  right: 0;
  background: var(--Others-Background-light, #fff2f8);
  border-radius: 0 0 18px 18px;
  padding: 0 80px;
  pointer-events: none;
  z-index: 10;
  max-height: var(--wrapper-height);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-menu__mega-menu-wrapper:has(.header-menu__mega-menu.is-active) {
  padding-bottom: 18px;
  pointer-events: auto;
}

/* Mega Menu */
.header-menu__mega-menu {
  position: relative;
  width: 100%;
  max-width: 1257px;
  margin: 0 auto;
  max-height: var(--mega-menu-content-height);
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.header-menu__mega-menu.is-active {
  opacity: 1;
  margin-top: 18px;
  pointer-events: auto;
}

.header-menu__mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  padding-bottom: 18px;
  padding-top: 14px;
}

.header-menu__mega-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 12px 6px 6px;
  background: var(--Others-Background, #ffffff);
  border-radius: 16px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: all 0.3s ease;
}

.header-menu__mega-item.is-active,
.header-menu__mega-item:hover {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06),
    inset 0 0 0 2px var(--Products-Pink-nuage-fluffy, #f04e98);
}

.header-menu__mega-item-image {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.header-menu__mega-item-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(14.082deg);
  width: 113.24px;
  height: 94.12px;
  pointer-events: none;
}

.header-menu__mega-item-image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

.header-menu__mega-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-height: 70px;
}

.header-menu__mega-item-title {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
  line-height: 28px;
}

.header-menu__mega-item-desc {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu__mega-item-tags {
  display: flex;
  gap: 4.466px;
  align-items: center;
}

.header-menu__mega-item-tags .header-menu__tag {
  font-size: 11.91px;
  line-height: 16.376px;
  padding: 1.489px 4.466px;
}

/* Mobile Menu - Hidden on Desktop */
.header-menu__mobile {
  display: none;
}

/* Desktop Only */
@media screen and (min-width: 990px) {
  .header-menu__mobile {
    display: none !important;
  }
}

/* Mobile Styles */
@media screen and (max-width: 989px) {
  .header-menu__container {
    display: none;
  }

  .header-menu__mobile {
    display: block;
  }

  .header-menu__announcement-bar {
    padding: 5px 18px;
  }

  .header-menu__mobile-header {
    background: var(--Others-White, #ffffff);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 6px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 100;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
  }

  .header-menu__mobile-toggle {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .header-menu__hamburger {
    display: block;
  }

  .header-menu__close {
    display: none;
  }

  .header-menu__mobile-toggle.is-active .header-menu__hamburger {
    display: none;
  }

  .header-menu__mobile-toggle.is-active .header-menu__close {
    display: block;
  }

  .header-menu__mobile-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 39.979px;
  }

  .header-menu__mobile-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
  }

  .header-menu__mobile-cart {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  .header-menu__mobile-cart-badge {
    position: absolute;
    right: 3.97px;
    bottom: -1.18px;
    top: unset;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-menu__mobile-cart-badge svg {
    transform: rotate(85.135deg);
  }

  .header-menu__mobile-cart-count {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--Others-White, #ffffff);
    font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
  }

  /* Mobile Drawer */
  .header-menu__drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 98;
    pointer-events: none;
  }

  .header-menu__drawer.is-active {
    pointer-events: auto;
  }

  .header-menu__drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .header-menu__drawer.is-active .header-menu__drawer-overlay {
    pointer-events: auto;
  }

  .header-menu__drawer-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 234, 0, 0.5) 29.27%,
      rgba(255, 57, 147, 0.5) 100%
    );
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    transition: backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      -webkit-backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }

  .header-menu__drawer.is-active .header-menu__drawer-overlay::before {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
  }

  .header-menu__drawer-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
  }

  .header-menu__drawer.is-active .header-menu__drawer-overlay::after {
    opacity: 1;
  }

  .header-menu__drawer-content {
    position: absolute;
    left: 0;
    width: 100%;
    max-width: 100%;
    background: var(--Others-White, #ffffff);
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  .header-menu__drawer.is-active .header-menu__drawer-content {
    transform: translateY(0);
  }

  .header-menu__drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 26px 0px 0 0px;
    flex: 1;
  }

  .header-menu__drawer-item--has-submenu {
    border-bottom: 1px solid var(--Secondary-Soft-dark-15, #2b2b2b26);
    margin-inline: 0px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
  }

  .header-menu__drawer-item--has-submenu.is-active {
    margin-top: 6px;
    margin-inline: 6px;
    border-bottom: 1px solid transparent;
    background: var(--Others-Background-light, #fff2f8);
  }

  .header-menu__drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid var(--Secondary-Soft-dark-15, #2b2b2b26);
    text-decoration: none;
  }

  .header-menu__drawer-item:last-child {
    border-bottom: none;
  }

  .header-menu__drawer-item span {
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
  }

  a.header-menu__drawer-item > span {
    font-size: 28px;
    line-height: 30px;
  }

  .header-menu__drawer-item--has-submenu {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--Secondary-Soft-dark-15, #2b2b2b26);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-menu__drawer-item--has-submenu.is-active {
    background: var(--Others-Background-light, #fff2f8);
  }

  .header-menu__drawer-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .header-menu__drawer-button span {
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
    font-size: 28px;
    line-height: 30px;
  }

  .header-menu__drawer-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-menu__drawer-item--has-submenu.is-active .header-menu__drawer-icon {
    transform: rotate(180deg);
  }

  .header-menu__drawer-submenu {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-menu__drawer-submenu-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .header-menu__drawer-item--has-submenu.is-active
    .header-menu__drawer-submenu {
    grid-template-rows: 1fr;
    padding: 0 0px 18px 0px;
  }

  .header-menu__drawer-submenu-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 12px 6px 6px;
    background: var(--Others-Background, #ffffff);
    border-radius: 16px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
  }

  .header-menu__drawer-submenu-item.is-active {
    border-color: var(--Products-Pink-nuage-fluffy, #f04e98);
  }

  .header-menu__drawer-item-image {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .header-menu__drawer-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-menu__drawer-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 70px;
    justify-content: center;
    min-width: 0;
  }

  .header-menu__drawer-item-title {
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
  }

  .header-menu__drawer-item-desc {
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .header-menu__drawer-item-tags {
    display: flex;
    gap: 4px;
  }

  .header-menu__drawer-tag {
    display: inline-flex;
    padding: 2px 6px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 8px;
    background: var(--Secondary-Soft-dark-100, #2b2b2b);
    color: var(--Others-White, #ffffff) !important;
    font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    align-self: flex-start;
  }

  /* Drawer promo card */
  .header-menu__drawer-promo {
    display: flex;
    align-items: stretch;
    min-height: 176px;
    margin: 18px var(--section-main-margin-side, 18px);
    border-radius: 16px;
    background: linear-gradient(161deg, var(--Primary-Pop-yellow, #FFEA00) 20.6%, #FFF58A 86.6%);
    overflow: clip;
    position: relative;
    text-decoration: none;
  }

  .header-menu__drawer-promo-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .header-menu__drawer-promo-text {
    font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
    margin-bottom: 0 !important;
  }

  .header-menu__drawer-promo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .header-menu__drawer-promo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-menu__drawer-promo .button {
    border-radius: var(--button-small-br, 12px);
  }

  .header-menu__drawer-footer {
    display: flex;
    align-items: stretch;
    gap: var(--section-spacing-gap-column, 6px);
    padding: 12px var(--section-main-margin-side, 18px);
    background: var(--Others-White, #ffffff);
    box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06);
  }

  .header-menu__drawer-footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    flex: 1;
    padding: 12px;
    background: var(--Others-Background-light, #fff2f8);
    border-radius: 12px;
  }

  .header-menu__drawer-footer-link svg {
    width: 28px;
    height: 28px;
  }

  .header-menu__drawer-footer-link span {
    color: var(--Secondary-Soft-dark-100, #2b2b2b);
    font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
    font-size: 28px;
    line-height: normal;
    font-weight: 400;
  }
}

.header-menu__mega-item-desc__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-menu__tag {
  white-space: nowrap;
}

.header-menu__mega-item-desc {
  /* max on line */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.header-menu__mega-item-image.card_custom img {
  object-fit: cover;
}

@media only screen and (min-width: 990px) and (max-width: 1100px) {
  .header-menu__bottom-row {
    padding: 6px 20px;
  }
}

/* ===========================
   Template 3 - Single Row (new)
   =========================== */

.header-menu[data-header-template="3"] .header-menu__container {
  --mega-menu-height: 0px;
  padding-inline: 0;
}

.header-menu[data-header-template="3"] .header-menu__container::after {
  top: calc(100% - 30px);
  height: var(--mega-menu-height);
  opacity: 0;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.header-menu[data-header-template="3"] .header-menu__container:has(.header-menu__mega-menu.is-active)::after {
  opacity: 1;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s;
}

.header-menu[data-header-template="3"] .header-menu__inner {
  overflow: visible;
}

/* Row layout */
.header-menu[data-header-template="3"] .header-menu__row--t2 {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: visible;
  z-index: 11;
}

.header-menu[data-header-template="3"] .header-menu__left--t2 {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-menu[data-header-template="3"] .header-menu__left--t2 .header-menu__nav {
  gap: 8px;
}

.header-menu[data-header-template="3"] .header-menu__right--t2 {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}

.header-menu[data-header-template="3"] .header-menu__right--t2 .header-menu__nav {
  gap: 8px;
}

.header-menu[data-header-template="3"] .header-menu__center {
  flex: 0 0 auto;
}

.header-menu[data-header-template="3"] .header-menu__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-menu[data-header-template="3"] .header-menu__actions .header-menu__account,
.header-menu[data-header-template="3"] .header-menu__actions .header-menu__cart {
  padding: 6px 8px;
}

/* Mega menu wrapper - Template 3 overrides */
.header-menu[data-header-template="3"] .header-menu__mega-menu-wrapper {
  background: none;
  border-radius: 0;
  padding: 0;
  top: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-menu[data-header-template="3"] .header-menu__mega-menu-wrapper:has(.header-menu__mega-menu.is-active) {
  max-height: var(--wrapper-height);
  padding-bottom: 0;
}

/* Inner mega menu - animation + page-width sizing */
.header-menu[data-header-template="3"] .header-menu__mega-menu {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 24px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: none;
  border-radius: 0;
}

.header-menu[data-header-template="3"] .header-menu__mega-menu.is-active {
  max-height: var(--mega-menu-content-height);
  opacity: 1;
  pointer-events: auto;
  margin-top: 0;
}

/* Products mega menu */
.header-menu[data-header-template="3"] .header-menu__mega-products {
  background: var(--Others-Background-light, #fff2f8);
  border-radius: 18px;
  padding: 24px;
}

.header-menu[data-header-template="3"] .header-menu__mega-products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.header-menu[data-header-template="3"] .header-menu__mega-products-header .h4 {
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu[data-header-template="3"] .header-menu__mega-products-header .button.button-secondary {
  padding: var(--button-small-v-padding, 8px) var(--button-small-h-padding, 16px) !important;
}

.header-menu__mega-products-header .button.button-small {
  border-radius: var(--button-small-br, 12px);
}

.header-menu[data-header-template="3"] .header-menu__mega-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Rangées nécessaires pour les produits sur 3 colonnes, calculé au rendu. */
  grid-template-rows: repeat(var(--mega-rows, 3), auto);
  gap: 12px;
}

.header-menu[data-header-template="3"] .header-menu__mega-promo {
  grid-column: 4;
  /* La promo doit occuper TOUTE la colonne de droite. Bornée à `1 / 4` elle
     libérait la colonne 4 dès la 4e rangée, et l'auto-placement y glissait un
     produit : sous « Je compose mon pack ». Le menu « Nos bonbons » a 14
     entrées, donc 5 rangées — le cas se produisait à toutes les largeurs.
     `-1` vise la dernière ligne de la grille EXPLICITE : d'où le nombre de
     rangées calculé en Liquid (--mega-rows). Un span arbitraire créerait des
     rangées implicites, dont les gaps allongeaient le panneau de 1300px. */
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(149deg, var(--Primary-Pop-yellow, #FFEA00) 20.6%, #FFF58A 86.6%);
  overflow: clip;
  position: relative;
  text-align: center;
}

.header-menu[data-header-template="3"] .header-menu__mega-promo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.header-menu[data-header-template="3"] .header-menu__mega-promo-text {
  position: relative;
  z-index: 2;
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
  font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}

.header-menu[data-header-template="3"] .header-menu__mega-promo .button {
  position: relative;
  z-index: 2;
  border-radius: var(--button-small-br, 12px);
}

/* Pages mega menu */
.header-menu[data-header-template="3"] .header-menu__mega-pages {
  display: flex;
  gap: 18px;
  background: var(--Others-Background-light, #fff2f8);
  border-radius: 30px;
  padding: 24px;
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--Others-White, #ffffff);
  border-radius: 18px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  overflow: visible;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 6px 6px 18px;
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card:hover {
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.12);
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card-image {
  height: 224px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  pointer-events: none;
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card-image img,
.header-menu[data-header-template="3"] .header-menu__mega-page-card-image .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-menu[data-header-template="3"] .header-menu__mega-page-card-title {
  font-family: var(--font-family-paragraph-alternate, "Mouse Memoirs");
  font-size: 28px;
  line-height: 1.1;
  font-weight: 400;
  text-align: center;
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
  padding: 0 6px;
}

/* Responsive 990-1200px */
@media only screen and (min-width: 990px) and (max-width: 1200px) {
  .header-menu[data-header-template="3"] .header-menu__row--t2 {
    gap: 8px;
  }

  .header-menu[data-header-template="3"] .header-menu__left--t2 .header-menu__nav,
  .header-menu[data-header-template="3"] .header-menu__right--t2 .header-menu__nav {
    gap: 4px;
  }

  .header-menu[data-header-template="3"] .header-menu__nav .header-menu__nav-item,
  .header-menu[data-header-template="3"] .header-menu__nav .header-menu__nav-button {
    padding: 6px 8px;
  }

  .header-menu[data-header-template="3"] .header-menu__mega-products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .header-menu[data-header-template="3"] .header-menu__mega-products,
  .header-menu[data-header-template="3"] .header-menu__mega-pages {
    padding: 18px;
  }

  .header-menu[data-header-template="3"] .header-menu__mega-pages {
    gap: 12px;
  }

  .header-menu[data-header-template="3"] .header-menu__mega-page-card-image {
    height: 180px;
  }
}
/* ========================================
   MEGA MENU — CARDS FORMAT
   ======================================== */

.header-menu__mega-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--Others-Background-light, #fff2f8);
  border-radius: 18px;
}

.header-menu__mega-cards-header {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.header-menu__mega-cards-title {
  flex: 1;
  color: var(--Secondary-Soft-dark-100, #2b2b2b);
}

.header-menu__mega-cards-header .button.button-small {
  padding: var(--button-small-v-padding, 8px) var(--button-small-h-padding, 16px) !important;
  border-radius: var(--button-small-br, 12px);
}

.header-menu__mega-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
}

/* Six cartes par rangée tant qu'elles restent lisibles. La base calculée
   donne exactement les 201px de la maquette (6493:79288) à 1440. */
.header-menu__mega-cards-item {
  flex: 0 0 calc((100% - 60px) / 6);
  min-width: 0;
}

/* Sous 1262 les six cartes descendraient en dessous de 171px : on passe à
   la ligne. La base devient FIXE à la largeur de maquette — avec une base
   extensible, la rangée incomplète affichait des cartes plus larges et plus
   hautes que celles du dessus (220x278 contre 176x222 à 1024). La grille est
   bornée pour que les rangées soient équilibrées, 4+2 puis 3+3, plutôt qu'un
   5+1 orphelin. */
@media screen and (max-width: 1261px) {
  .header-menu__mega-cards-grid {
    max-width: 840px; /* 4 x 201 + 3 x 12 */
  }

  .header-menu__mega-cards-item {
    flex: 0 0 201px;
  }
}

@media screen and (max-width: 1015px) {
  .header-menu__mega-cards-grid {
    max-width: 627px; /* 3 x 201 + 2 x 12 */
  }
}

/* The shared card component ships at a fixed size — make it fluid in the mega menu */
.header-menu__mega-cards-item .product-card,
.header-menu__mega-cards-item .product-card--custom {
  width: 100%;
  height: auto;
  aspect-ratio: 306 / 386;
}

@media screen and (max-width: 989px) {
  .header-menu__mega-cards--drawer {
    gap: 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  /* The drawer button already shows the menu title */
  .header-menu__mega-cards--drawer .header-menu__mega-cards-header {
    display: none;
  }

  .header-menu__mega-cards-grid {
    flex-wrap: wrap;
  }

  .header-menu__mega-cards-item {
    flex: 0 0 calc(50% - 6px);
  }

  .header-menu__mega-cards-item .product-card,
  .header-menu__mega-cards-item .product-card--custom {
    aspect-ratio: 171 / 256;
  }

  .header-menu__mega-cards-item .product-card {
    padding: 12px 12px 0 12px;
  }

  .header-menu__mega-cards-item .product-card__tag {
    top: 12px;
    left: 12px;
  }

  .header-menu__mega-cards-item .product-card__content {
    gap: 6px;
    padding-bottom: 12px;
  }

  .header-menu__mega-cards-item .product-card__info .jdgm-reviews,
  .header-menu__mega-cards-item .product-card__reviews {
    display: none;
  }
}

/* ========================================
   MEGA MENU CARTES — COULEURS HALLOWEEN
   La maquette passe les boutons des cartes custom en orange et le "Tout voir"
   sur le rose Pink nuage fluffy. Scopé au mega menu pour ne pas toucher aux
   cartes custom non-Halloween (coffret-decouverte-1 reste rose).
   ======================================== */

.header-menu__mega-cards-item .product-card__custom-button--variant {
  border-color: var(--Products-Orange, #ff6b00);
}

.header-menu__mega-cards-item
  .product-card__custom-button--variant
  .product-card__custom-button-label {
  color: var(--Products-Orange, #ff6b00);
}

/* Le label tenait sur une ligne en nowrap, mais plus large que son bouton :
   255px de texte (« 🎃 Pack découverte Halloween ») dans un bouton de 169px,
   le texte sortait donc de la pastille (Pastel #15). Il passe sur deux lignes,
   centré, et le bouton s'adapte en gardant les 48px de la maquette comme
   plancher. line-height figée parce que l'emoji gonfle la boîte de ligne. */
.header-menu__mega-cards-item .product-card__custom-button-label {
  white-space: normal;
  text-wrap: balance;
  /* 15/18 est la plus grande taille qui fasse tenir les DEUX labels sur deux
     lignes exactement — « 🎃 Pack découverte Halloween » passait à trois lignes
     à 20px, et les deux boutons n'avaient alors plus la même hauteur. */
  font-size: 15px;
  line-height: 18px;
  text-align: center;
}

@media screen and (max-width: 989px) {
  .header-menu__mega-cards-item .product-card__custom-button-label {
    line-height: 16px;
  }
}

/* Padding horizontal demandé : 10px (la maquette indique 24px). */
.header-menu__mega-cards-item .product-card__custom-button {
  padding: 6px 10px;
  height: auto;
  min-height: 48px;
}

@media screen and (max-width: 989px) {
  .header-menu__mega-cards-item .product-card__custom-button {
    min-height: 35px;
  }
}
}

.header-menu__mega-cards-header .button.button-secondary {
  border-color: var(--Products-Pink-nuage-fluffy, #f04e98);
  color: var(--Products-Pink-nuage-fluffy, #f04e98);
}

/* CTA des cartes normales : la maquette impose nowrap et 35px de haut
   (noeud "Primary Small" 6493:79705). Sans nowrap, « Ajouter au panier »
   passe sur 2 lignes. Padding inline ramené à 10px pour que le texte tienne. */
.header-menu__mega-cards-item .product-card__button {
  white-space: nowrap;
  padding-inline: 10px;
}

@media screen and (max-width: 989px) {
  .header-menu__mega-cards-item .product-card__cta {
    height: 35px;
  }

  .header-menu__mega-cards-item .product-card__button {
    height: 35px;
  }
}

/* Titre de carte : la maquette est en 22/28 (Paragraph-Alternate Extra Large),
   le thème rend 24/30 en mobile, ce qui faisait déborder « Bonbonnière Halloween ». */
.header-menu__mega-cards-item .product-card__title {
  font-size: 22px;
  line-height: 28px;
}

/* Carte custom : la maquette la donne en padding 16px (noeud 6493:79589,
   p-[16px]) alors que le composant est à 12px en desktop. */
.header-menu__mega-cards-item .product-card--custom {
  padding: 16px;
}

@media screen and (max-width: 989px) {
  .header-menu__mega-cards-item .product-card--custom {
    padding: 12px;
  }
}

/* Le label en nowrap rend la carte irrétrécissable (min-width: auto sur un
   flex item), ce qui faisait grossir la 1re colonne à 175px au lieu de 165.
   min-width: 0 force le respect du flex-basis ; le padding du bouton est
   réduit en mobile pour que « 🎃 Pack Halloween » tienne sur une ligne. */
.header-menu__mega-cards-item {
  min-width: 0;
}

/* Carte custom MOBILE — valeurs du noeud Figma 6493:82042 :
   carte padding 8px / radius 20px, bouton Primary Small bordure 1px #ff6b00,
   h 35px, padding 8px 16px, radius 12px, label 16px sans emoji. */
@media screen and (max-width: 989px) {
  .header-menu__mega-cards-item .product-card--custom {
    padding: 8px;
  }

  .header-menu__mega-cards-item .product-card__custom-button {
    padding: 8px 16px;
    border-width: 1px;
  }
}