/**
 * Coeur Store Core — fullscreen navigation menu.
 * Greenshift popup + WordPress Navigation block.
 */

/* ==========================================================
   NAVIGATION — FULLSCREEN MENU
   ========================================================== */

.gspb_button_wrapper:has(> .sf-menu-toggle)
.gspb_slidingPanel {
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #202020 !important;
}

.gspb_button_wrapper:has(> .sf-menu-toggle)
.gspb_slidingPanel-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #202020 !important;
}

.gspb_button_wrapper:has(> .sf-menu-toggle)
.gspb_slidingPanel-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.gspb_button_wrapper:has(> .sf-menu-toggle)
.gspb_slidingPanel-close {
  top: 40px !important;
  right: auto !important;
  left: 40px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  transform: none !important;
}

.gspb_button_wrapper:has(> .sf-menu-toggle)
.gspb_slidingPanel-close svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  transform: none !important;
}

nav.studio-menu {
  width: max-content;
  color: #f5f2ee !important;
}

nav.studio-menu > ul.studio-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px !important;
  width: max-content;
  margin: 0;
  padding: 0;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: max-content;
  min-width: 130px;
  max-width: none;
  min-height: 36px;
  margin: 0;
  padding: 0;
}

/*
 * A submenu stays mounted for fade-out animation. Keep submenu parents in a
 * column even while closed so the hidden submenu can never sit beside the
 * toggle and push Services / Flower & Safety off the visual center line.
 */
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child {
  flex-direction: column;
  align-items: center;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  min-width: 130px;
  max-width: none;
  min-height: 36px;
  margin: 0 auto;
  padding: 0 10px;
  color: #f5f2ee !important;
  background: transparent;
  font-family: "Instrument Serif", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color .18s ease,
    color .18s ease;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content:hover,
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content:focus-visible {
  background: #CEC9C3;
  color: #202020 !important;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content,
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content:hover,
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> .wp-block-navigation-item__content:focus-visible {
  text-decoration: none !important;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> a.wp-block-navigation-item__content::before,
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> a.wp-block-navigation-item__content::after,
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item
> button.wp-block-navigation-submenu__toggle::before {
  content: none !important;
  display: none !important;
}

nav.studio-menu
.wp-block-navigation-item.has-child
> .wp-block-navigation__submenu-icon {
  display: none !important;
}

/*
 * Keep the submenu label itself optically centered.
 * The arrow is absolutely positioned inside equal left/right padding so it
 * no longer participates in flex width and no longer pushes the text left.
 */
nav.studio-menu
.wp-block-navigation-item.has-child
> .wp-block-navigation-submenu__toggle {
  position: relative;
  justify-content: center;
  gap: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

nav.studio-menu
.wp-block-navigation-item.has-child
> .wp-block-navigation-submenu__toggle::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  right: 9px;
  display: block !important;
  width: 7px;
  height: 7px;
  margin: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
  transition: transform .30s cubic-bezier(.22, 1, .36, 1);
}

nav.studio-menu
.wp-block-navigation-item.has-child
> .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg);
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child:has(
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
) {
  flex-direction: column;
  width: 274px;
  min-height: 0;
  padding: 0 16px 12px;
  gap: 10px;
  box-sizing: border-box;
  background: transparent;
  color: #f5f2ee;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child
> .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding-left: 28px !important;
  padding-right: 28px !important;
  background: transparent !important;
  color: #f5f2ee !important;
}

nav.studio-menu > ul.studio-menu:has(
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
)
> .wp-block-navigation-item:first-child {
  visibility: hidden;
}

/* Keep every top-level item visually centered, including submenu toggles. */
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item {
  align-self: center !important;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child:not(:has(
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
))
> .wp-block-navigation-submenu__toggle {
  width: max-content !important;
  min-width: 0 !important;
}

/* ==========================================================
   SUBMENU — TRANSPARENT + SMOOTH FADE
   ========================================================== */

/*
 * Keep every top-level submenu mounted so both opening and closing can
 * animate. The accordion state is controlled only by aria-expanded.
 */
nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child
> .wp-block-navigation__submenu-container {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  gap: 0;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  color: #f5f2ee !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transform-origin: top center;
  pointer-events: none;
  transition:
    max-height .34s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .34s !important;
}

nav.studio-menu > ul.studio-menu
> .wp-block-navigation-item.has-child:has(
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
)
> .wp-block-navigation__submenu-container {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 280px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto;
  transition-delay: 0s !important;
}

nav.studio-menu
.wp-block-navigation__submenu-container
> .wp-block-navigation-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

nav.studio-menu
.wp-block-navigation__submenu-container
> .wp-block-navigation-item
> .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  color: #f5f2ee !important;
  background: transparent !important;
  font-family: "Tilda Sans VF", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transform: none !important;
  opacity: .82;
  transition:
    opacity .18s ease,
    color .18s ease;
}

nav.studio-menu
.wp-block-navigation__submenu-container
> .wp-block-navigation-item
> .wp-block-navigation-item__content:hover,
nav.studio-menu
.wp-block-navigation__submenu-container
> .wp-block-navigation-item
> .wp-block-navigation-item__content:focus-visible {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 767.98px) {
  .gspb_button_wrapper:has(> .sf-menu-toggle)
  .gspb_slidingPanel-close {
    top: 28px !important;
    right: 28px !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
  }

  .gspb_button_wrapper:has(> .sf-menu-toggle)
  .gspb_slidingPanel-inner {
    padding: 92px 24px 40px !important;
  }

  nav.studio-menu,
  nav.studio-menu > ul.studio-menu {
    width: 100%;
    max-width: 100%;
  }

  nav.studio-menu > ul.studio-menu {
    align-items: center;
    gap: 12px !important;
  }

  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item {
    width: max-content;
    min-width: 0;
    min-height: 36px;
  }

  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
    width: max-content;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    font-size: 27px;
    line-height: 1.05;
    white-space: nowrap;
  }

  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  nav.studio-menu
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle::after {
    right: 7px;
  }

  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item.has-child:has(
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ) {
    width: min(274px, calc(100vw - 48px));
    min-height: 0;
    padding: 0 14px 10px;
    gap: 8px;
  }

  nav.studio-menu > ul.studio-menu
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    min-height: 34px;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  nav.studio-menu
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
    font-size: 20px;
    line-height: 1.2;
  }
}

/* ==========================================================
   MENU TRIGGER ICON
   ========================================================== */

.coeur-menu-icon {
  display: block;
  overflow: visible;
}

.coeur-menu-icon__middle {
  transform-box: fill-box;
  transition:
    transform 0.5s cubic-bezier(.65, 0, .35, 1),
    opacity 0.35s ease;
}

/* Левая линия видна изначально */
.coeur-menu-icon__middle--left {
  transform-origin: right center;
  transform: scaleX(1);
  opacity: 1;
}

/* Правая линия изначально схлопнута */
.coeur-menu-icon__middle--right {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

/* Hover */
.coeur-menu-icon:hover .coeur-menu-icon__middle--left {
  transform: scaleX(0);
  opacity: 0;
}

.coeur-menu-icon:hover .coeur-menu-icon__middle--right {
  transform: scaleX(1);
  opacity: 1;
}