/** Shopify CDN: Minification failed

Line 952:16 Expected ":"

**/
/* Suppress all header transitions until JS has measured and settled the layout */
.header-not-ready .section-header,
.header-not-ready .section-header *,
.header-not-ready .header,
.header-not-ready .header * {
  transition: none !important;
  animation: none !important;
}

.section-header {
  position: relative;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  transition: 0.4s ease;
}
.section-header.section-spacing{
  padding-top: var(--header_top_spacing);
  padding-bottom: var(--header_bottom_spacing);
}
.section-header:has(.sticky-always),
.section-header:has(.sticky-scroll-up) {
  position: sticky;
}

.header {
  display: block;
  background: var(--header_background);
  color: var(--header_color);
  width: 100%;
  position: relative;
  transition: 0.4s ease;
  border-radius: var(--header_radius);
}
 
.header:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: var(--header_background);
  border-radius: var(--header_radius);
  transition: opacity 0.4s cubic-bezier(0.104, 0.204, 0.492, 1) 0.1s;
}

.section-header.is-hidden-header {
  pointer-events: none;
}

.is-hidden {
  transform: translateY(calc(-1 * var(--header_height) - 2px - var(--header_top_spacing) ));
}

.header.border-true {
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease, border-bottom-color 0s;
}
.no-container .header {
    border-width: 0 0 1px 0;
}
body.hamburger-menu-open .header.border-true,
body.mob-menu-open .header.border-true {
  border-bottom-color: rgb(var(--header_border_color));
}
.header.shadow-true {
  box-shadow: 0 3px 8px #0000000d;
}

/* Kill shadow & add bottom border matching divider when megamenu opens */
.header.shadow-true:has(.header-megamenu.active .megamenu4-outer),
.header:has(.header-megamenu.active .megamenu4-outer) {
  box-shadow: none !important;
}

.has-transparent-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header--wrapper {
  display: grid;
  grid-template-areas: 'hamburger logo icons';
  grid-template-columns: 1fr auto 1fr;
  column-gap: 10px;
  min-height: 65px;
}

.header.header-height-small .header--wrapper {
  min-height: 36px;
}

.header.header-height-medium .header--wrapper {
  min-height: 50px;
}

.header--logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--logo_width);
  margin: 10px 0px;
  grid-area: logo;
}

.header--logo-text {
  color: var(--header_color);
  transition: color 0.4s ease;
}

.header--logo-img {
  height: auto;
}

.transparent-logo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
  opacity: 0;
}

.header--right {
  grid-area: icons;
  margin-left: auto;
}

.header--icon-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header--icon-link {
  display: block;
}

.header--icon-link-text {
  display: inline-flex;
  position: relative;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--header_icon_color);
  transition: color 0.4s ease;
  transition: 0.5s ease;
  border-radius: 100%;
}


.header--icon-link-text:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  border-radius: 100%;
  transition: 0.3s ease;
}

.cart--count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--header_color);
  color: var(--header_background);
  border: 1px solid rgb(var(--header_border_color));
  position: absolute;
  top: 0px;
  right: -2px;
}

.cart--count.large-items {
  font-size: 0;
  width: 14px;
  height: 14px;
  top: 5px;
  right: 5px;
}

.header--icon-link-text svg {
  width: 18px;
  height: 18px;
}

.hamburger--toggler {
  grid-area: hamburger;
  background: transparent;
  display: none;
}

.hamburger--toggler-icon {
  width: 33px;
  height: 30px;
  border-radius: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

.hamburger--toggler-icon .line {
  width: 26px;
  height: 2px;
  display: inline-block;
  background: var(--header_icon_color);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header--logo+.header--navigation {
  grid-area: navigation;
}

.header--navigation-list {
  flex-wrap: wrap;
  align-items: center;
}

.header--wrapper:not(.half-width-menu) .header--navigation,
.header--wrapper:not(.half-width-menu) .header--navigation-inner,
.header--wrapper:not(.half-width-menu) .header--navigation-list {
  height: 100%;
}

.header--menu-item.has-children {
  position: relative;
}

.header--right .header--menu-item.has-children,
.header--menu-item.has-children.megamenu {
  position: static;
}

.header--menu-link {
  padding: 25px 10px;
  margin: 0 10px;
  color: var(--header_color);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.4s ease;
}

.header.header-height-small .header--menu-link {
  padding: 12px 10px;
}

.header.header-height-medium .header--menu-link {
  padding: 20px 10px;
}

.header--menu-link svg {
  transition: 0.3s ease;
}

.header--menu-item.has-children.active .header--menu-link svg {
  transform: rotate(180deg);
}

.header--right .menu-arrow {
  background: transparent;
  flex: 0 0 24px;
  height: 24px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--header_color);
}

.header--right .menu-arrow:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--header_color);
  opacity: 0.1;
}

/* submenu css start here */

.header--menu-submenu {
  padding-top: 7px;
  width: max-content;
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 201;
  /* 0.2s to match the transparent header's own background/text fade
     speed (see .desktop-transparent rules below, tuned to iamgia.com's
     reference timing) — was 0.3s, visibly outlasting the header's fade
     and reading as the panel "lingering" after the header had already
     finished closing. */
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition-delay: 0s;
  max-width: 500px;
  border-radius: 0 0 10px 10px;
}

.header-megamenu .header--menu-submenu .header--menu-megamenu {
  border-top: 1px solid rgba(var(--header_border_color), 0.15);
}

/* For megamenu4, suppress the default border — the inline border-top on
   .megamenu4-outer is fully controlled by the schema divider color/thickness */
.header-megamenu .header--menu-submenu .header--menu-megamenu:has(.megamenu4-outer) {
  border-top: none;
}

.dropdown .menu-position-left.header--menu-submenu {
  left: unset;
  right: 0;
}

.header--menu-item.active .header--menu-submenu,
html.no-js .header--menu-item:focus-within>.header-megamenu .header--menu-submenu,
html.no-js .header--menu-item:focus-within>.header-dropdown .header--menu-submenu {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}

.header--menu-submenu-list {
  background: var(--submenu_background);
  color: var(--submenu_color);
  padding: 15px;
  display: flex;
  flex-direction: column;
  row-gap: 0.4rem;
  min-width: 230px;
  max-width: 230px;
  min-height: 200px;
  max-height: calc(90vh - var(--header_height));
  overflow: auto;
  border-radius: 10px;
  box-shadow: 0px 0px 2px 0px #00000040;
}

.header--menu-submenu-list:has(.header--menu-submenu-item.active) {
  border-radius: 10px 0 0 10px;
}

.menu-position-left .header--menu-submenu-list:has(.header--menu-submenu-item.active) {
  border-radius: 0 10px 10px 0;
}

.header--menu-submenu-list-inner {
  position: absolute;
  top: 7px;
  left: calc(100% - 1px);
  background-color: var(--submenu_background);
  overflow: auto;
  padding: 15px;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  width: max-content;
  min-width: 200px;
  max-width: 250px;
  min-height: calc(100% - 7px);
  max-height: calc(90vh - var(--header_height));
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  border-radius: 0 20px 20px 0;
  box-shadow: 0px 0px 2px 0px #00000040;
  transition: clip-path 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.menu-position-left .header--menu-submenu-list-inner {
  left: unset;
  right: 100%;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  border-radius: 10px 0 0 10px;
}

.header--menu-submenu-item.active .header--menu-submenu-list-inner,
.header--menu-submenu-item:focus-within>.header--menu-submenu-list-inner {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  clip-path: polygon(101% 0, 0 0, 0 101%, 101% 101%);
}

.header--menu-submenu-list-inner:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 1px;
  margin-block: 20px;
  height: calc(100% - 20px * 2);
  background: var(--submenu_border);
}

.menu-position-left .header--menu-submenu-list-inner:before {
  left: unset;
  right: 0;
}

.header--menu-submenu-link {
  display: block;
  color: var(--submenu_color);
  padding: 10px 16px;
  border-radius: 8px;
  text-align: left;
  white-space: normal;
  transition: 0.3s ease;
}

.header--menu-submenu-link {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.33, 0, 0, 1), opacity 0.5s cubic-bezier(0.33, 0, 0, 1);
  transition-delay: 200ms;
}

.header--menu-item.active .header--menu-submenu-link,
.header--menu-item:focus-within>.header-megamenu .header--menu-submenu-link,
.header--menu-item:focus-within>.header-dropdown .header--menu-submenu-link {
  transform: unset;
  opacity: 1;
}

.header--menu-submenu-link:has(.menu--icon) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.header--menu-submenu-list-inner .header--menu-submenu-link {
  padding: 6px 10px;
}

.menu-position-left .menu--icon svg {
  transform: rotate(180deg);
}

.menu-position-left .header--menu-submenu-link>span:first-child {
  order: 2;
}

.header--menu-submenu.megamenu-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  /* Do NOT override visibility/opacity here.
     The base .header--menu-submenu hides the panel by default.
     The .header--menu-item.active .header--menu-submenu rule reveals it.
     Overriding to always-visible caused the panel to sit on top of the hero
     image at all times, triggering phantom mouseenter events and washing out
     the photo with the white panel background. */
}

/* Restore pointer-events only when the menu is actually active.
   The base class sets pointer-events:none; the .active rule sets pointer-events:all,
   but that rule has lower specificity — this ensures it wins. */
.header--menu-item.active .header--menu-submenu.megamenu-container {
  pointer-events: all;
}

.half-width-menu .header--menu-submenu.megamenu-container {
  z-index: -1;
  margin-top: -7px;
  z-index: 2;
  border-radius: var(--header_radius,8px);
}

.half-width-menu ul.header--menu-megamenu-inner {
  display: block;
  will-change: max-height;
  max-height: 0;
  overflow: hidden;
  transition: 0.7s ease-in-out all;
  transition-delay: 0.1s;
}

.half-width-menu .navmenu-option:hover ul.header--menu-megamenu-inner {
  max-height: 30rem;
  margin-bottom: 30px;
}

.half-width-menu .header--menu-megamenu-inner li:nth-child(1) {
  padding-top: 0;
}

.half-width-menu .header--menu-item .megamenu_style3 li a:before,
.half-width-menu .megamenu-main-heading:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0px;
  margin: auto;
  transition: 0.3s ease all;
  background: var(--submenu_hover_color);
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  transform-origin: left;
  transform: scale(1);
}

.half-width-menu .header--menu-item.active .megamenu_style3 {
  margin-top: 0;
}

.half-width-menu .header--menu-item .megamenu_style3 li a {
  color: var(--submenu_color);
}

.half-width-menu .header--menu-megamenu-collection li a {
  font-size: var(--h5);
}


.half-width-menu .header--menu-item .megamenu_style3 .header--menu-megamenu-collection li a:hover:before,
.half-width-menu .navmenu-option:hover .megamenu-main-heading:before {
  width: 80%;
}

.half-width-menu .header--menu-megamenu {
  height: 100dvh;
  border-radius: 0 0 var(--header_radius,8px) var(--header_radius,8px);
  max-height: calc(100vh - 117px);
}
.header .custom-container .header--menu-item.active .header--menu-submenu .header--menu-megamenu{
  border-radius: 0 0 var(--header_radius,8px) var(--header_radius,8px);
 }
/* FIX: Removed border-radius distortion on header when megamenu opens.
   This was causing the header to look "out of proportion" when a submenu opened. */
.half-width-menu .header--right:has(.megamenu.active) {
    border-radius: var(--header_radius,8px) var(--header_radius,8px) 0 0;
}
/* .desktop-transparent.header:not(.style-half-width-menu):has(.header-megamenu.active):before{
  opacity: 1;
}  */
/* ,
.half-width-menu .navmenu-option:hover .megamenu-main-heading:before  */
/* .half-width-menu .header--menu-megamenu-inner li a:before {
  width: 16px;
  top: 0;
  margin: auto;
  transform: scale(0);
  transform-origin: left;
} */
.half-width-menu .header--menu-item .header--menu-submenu .navmenu-option:nth-child(1) ul.header--menu-megamenu-inner {
  max-height: unset;
  margin-bottom: 30px;
}

.half-width-menu .header--menu-item .header--menu-submenu .navmenu-option {
  margin-bottom: 5px;
}

/* .half-width-menu .header--menu-item .megamenu_style3 li a:hover, */
.half-width-menu .header--menu-megamenu-inner li a:hover

/* ,
.half-width-menu .navmenu-option:hover .megamenu-main-heading */
  {
  transition: 0.3s ease all;
  /* padding-left: 20px; */
}

.half-width-menu .megamenu-main-heading {
  position: relative;
  z-index: -1;
}

.header--menu-megamenu {
  background: var(--submenu_background);
  color: var(--submenu_color);
  width: 100%;
  max-height: calc(90vh - var(--header_height));
  overflow: auto;
  border-radius: 0 0 20px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  transition: clip-path 0.2s cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 10px 6px -5px #00000026;
}

.header--menu-megamenu-list {
  padding: 30px 40px;
}

.header--menu-megamenu-columns {
  display: grid;
  gap: 20px;
  padding: 40px 0 50px;
  text-align: left;
  grid-template-columns: repeat(var(--menu_column_count, 5), minmax(0, 1fr));
}

.header--menu-megamenu-columns.megamenu_style2 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

.header--menu-megamenu-column-left {
  flex: 0 0 60%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.header--menu-megamenu-column-right {
  flex: 0 0 40%;
}

.header--menu-megamenu-column-left+.header--menu-megamenu-column-right {
  padding-left: 30px;
}

.header--menu-megamenu-columns.megamenu_style2.menu-size-large .header--menu-megamenu-column-left {
  flex: 0 0 70%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.header--menu-megamenu-columns.megamenu_style2.menu-size-large .header--menu-megamenu-column-right {
  flex: 0 0 30%;
}

.megamenu-main-heading {
  color: var(--submenu_color);
  display: inline-block;
  margin-bottom: 10px;
}

.half-width-menu .megamenu-main-heading {
  font-size: var(--h5);
}

.header--menu-megamenu-inner li {
  padding-top: 12px;
}

.half-width-menu .header--menu-megamenu-inner li+li {
  padding-top: 4px;
}

.header--menu-megamenu-inner li a,
.header--menu-megamenu-collection li a {
  display: inline-block;
  color: var(--submenu_color);
  text-align: left;
  transition: 0.2s ease;
  position: relative;
  white-space: normal;
}

.header--menu-megamenu-inner li a:before,
.header--menu-megamenu-collection li a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background: var(--submenu_hover_color);
  transform: scale(0);
  transition: 0.3s ease;
}

.half-width-menu .header--menu-megamenu-content,
.navmenu-option,
.images-option {
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.5s cubic-bezier(0.33, 0, 0, 1), opacity 0.5s cubic-bezier(0.33, 0, 0, 1);
  transition-delay: 300ms;
}

.half-width-menu .header--menu-item.active .header--menu-megamenu-content,
.header--menu-item.active .header--menu-submenu .navmenu-option,
.header--menu-item.active .header--menu-submenu .images-option {
  transform: unset;
  opacity: 1;
}

.header--menu-megamenu-column-right .images-option {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.header--menu-megamenu-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  gap: 15px;
  margin-top: 20px;
}

.header--menu-megamenu-content.megamenu_style3 {
  grid-template-columns: 1fr;
}

.header--menu-megamenu-image {
  border-radius: var(--card_radius);
  overflow: hidden;
  display: block;
}

.header--menu-megamenu-column-right .header--menu-megamenu-image {
  height: 150px;
}

.header--menu-megamenu-image-content {
  position: absolute;
  width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  padding: 10px;
  text-align: center;
  transform: translate(-50%, -50%);
  overflow: auto;
}

.header--menu-megamenu-collection li+li {
  padding-top: 18px;
}


/* ============================================================
   Megamenu Style 4  —  3-column megamenu (logo-left-menu-center only)
   ============================================================ */

/* ── Panel: flush to header bottom, spans full viewport width ── */
.logo-left-menu-center .header-megamenu .header--menu-submenu.megamenu-container:has(.megamenu4-outer) {
  top: 100%;
  padding-top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-top: none;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
  background: var(--header_background);
}

/* Suppress header shadow while mega menu is open (shadow creates colour mismatch with panel) */
.logo-left-menu-center:has(.header-megamenu.active .megamenu4-outer) {
  box-shadow: none !important;
}

/* ── Outer wrapper ── */
.megamenu4-outer {
  display: flex;
  flex-direction: column;
  background: var(--header_background, #fff);
  width: 100%;
  text-align: left;
}

/* ── Inner row: narrow centered container; text cols stretch, image col is self-contained ── */
.megamenu4-row {
  display: flex;
  align-items: flex-start;
  padding: 44px 80px;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Text columns (col1 Featured + col2 Shop by Category) ── */
.megamenu4-col--text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 0 0 var(--m4-txt-col-width, 200px);
  width: var(--m4-txt-col-width, 200px);
}

/* ── Image column: fixed width, height comes from --m4-banner-min-height on each banner ── */
.megamenu4-col--images {
  flex: 0 0 var(--m4-col3-width, 480px);
  max-width: var(--m4-col3-width, 480px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

/* ── Vertical divider ── */
.megamenu4-vline {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--m4-d-color, #c0c0c0);
  opacity: var(--m4-d-opacity, 0.9);
  margin: 0 52px;
}

/* Horizontal line at the top of the panel — identical vars to the vertical lines */
.megamenu4-hline {
  width: 100%;
  height: var(--m4-top-line-px, 1px);
  background: var(--m4-d-color, #c0c0c0);
  opacity: var(--m4-d-opacity, 0.9);
  flex-shrink: 0;
}

/* ── Column heading ── */
.megamenu4-heading {
  display: block;
  font-size: var(--m4-h-size, 14px);
  color: var(--m4-h-color, #111);
  font-weight: var(--m4-h-weight, 400);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 22px;
  padding: 0;
  white-space: nowrap;
  text-align: left;
}

/* ── Link list ── */
.megamenu4-list {
  list-style: none;
  margin: 0 0 0 -14px;
  padding: 0;
  text-align: left;
  width: calc(100% + 14px);
}

.megamenu4-list li {
  width: 100%;
}

.megamenu4-list li + li {
  margin-top: 2px;
}

.megamenu4-link {
  display: block;
  padding: 8px 12px 8px 14px;
  font-size: var(--m4-l-size, 14px);
  font-weight: var(--m4-l-weight, 400);
  color: var(--m4-l-color, var(--submenu_color));
  white-space: nowrap;
  position: relative;
  text-align: left;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, var(--m4-highlight-color, var(--highlight_color)) -50%, transparent);
  background-size: 0 100%;
  transition: background-size 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

.megamenu4-link:hover {
  background-size: 100% 100%;
}

/* ── Image / collection banner: FIXED height from schema, no stretching ── */
.megamenu4-banner {
  flex: 1;
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  height: var(--m4-banner-min-height, 220px);
}

.megamenu4-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

.megamenu4-banner:hover img {
  transform: none;
}

/* ── Banner label: white pill button over the image ── */
.megamenu4-banner-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-block;
  padding: 10px 22px;
  background: #fff;
  color: #111;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ── Staggered fade-in animation on open ── */
.megamenu4-col--text,
.megamenu4-col--images,
.megamenu4-vline {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.26s ease, transform 0.26s ease;
  transition-delay: 40ms;
}

.header--menu-item.active .megamenu4-col--text,
.header--menu-item.active .megamenu4-col--images,
.header--menu-item.active .megamenu4-vline {
  opacity: 1;
  transform: none;
}


body:after {
  position: fixed;
  content: '';
  width: 100%;\n  height: 100%;
  top: calc(var(--dynamic_announcement_height, 0px));
  left: 0;
  background: rgba(var(--page_overlay_background), var(--page_overlay_opacity));
  z-index: 1;
  transition: 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  transition-property: opacity, visibility, background-color;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.megamenu-open:after {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Real overlay div that JS can listen to */
#megamenu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: default;
  background: transparent;
}

body.megamenu-open #megamenu-overlay {
  display: block;
}

/* Completely suppress the dimming overlay when the megamenu is open.
   The body::after pseudo-element uses --page_overlay_background which may be
   a dark colour. We zero out both opacity and the transition so there is no
   flash, no tint, and no interaction with hero images below the header. */
body.megamenu-open:after {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

.no-js-menu ul li {
  display: inline-block;
}

.no-js-menu ul li .header--menu-link {
  padding: 5px 10px;
}

html.js .no-js-menu {
  display: none;
}

html.no-js .header--navigation-main,
html.no-js .half-width-menu .header--right .header--navigation-main {
  display: none;
}   



@media (min-width: 1025px) {
  .header:not(.style-half-width-menu) .custom-container {
      padding-inline-start: 30px;
      padding-inline-end: 20px;
  }

  .header.border-true .custom-container .header--wrapper:not(.half-width-menu) .header--icons .header--icon-item:last-child {
    border-right: 0;
}
  /* desktop header style css start */
  .logo-left-menu-left,
  .logo-left-menu-center,
  .logo-left-menu-right {
    grid-template-areas: 'logo navigation icons';
  } 
  .header--wrapper {
    grid-template-columns: auto 1fr auto; 
    column-gap: 30px;
  }

  /* FIX: True page-center alignment for logo-left-menu-center.
     Switch to a 3-equal-column grid so the center column is truly centered
     on the page. The logo and icons columns each take 1fr, and the nav takes
     1fr in the middle — making its center exactly the page center.
     All other header styles are unaffected as this selector is fully scoped. */
  .logo-left-menu-center {
    grid-template-columns: 1fr auto 1fr !important;
  }
  .logo-left-menu-center .header--navigation-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .logo-left-menu-center .header--right {
    margin-left: auto;
  }

  /* Hide the vertical separator lines between header icons in logo-left-menu-center layout */
  .logo-left-menu-center .header--icon-item {
    border-right: none !important;
    border-left: none !important;
  }
  .logo-left-menu-center .header--navigation-list {
    justify-content: center;
    text-align: center;
  }

  .logo-left-menu-right .header--navigation-list {
    justify-content: flex-end;
    text-align: right;
  }

  .logo-center-menu-left {
    grid-template-areas: 'navigation logo icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .logo-center-menu-left .header--right,
  .hamburger-menu-logo-center .header--right {
    margin-left: auto;
  }

  .hamburger-menu-logo-left,
  .hamburger-menu-logo-center {
    grid-template-areas: 'hamburger logo icons';
  }

  .hamburger-menu-logo-center {
    grid-template-columns: 1fr auto 1fr;
  }

  .half-width-menu {
    grid-template-areas: 'logo icons';
    grid-template-columns: auto 1fr;
  } 
   
  .header:has(.half-width-menu) {
    background: transparent;
    padding: 15px 0;
  }

  .half-width-menu .header--right {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: var(--header_alternate_background);
    border-radius: var(--header_radius,8px);
    transition: 0.7s ease; 
    padding: 0 15px;
    gap: 10px;
    width: 100%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 0 2px rgb(0 0 0 / 17%);
  }

  .header--wrapper:not(.half-width-menu) .header--icon-item {
    padding: 0 15px;
  }

  .header.header-height-small .header--wrapper:not(.half-width-menu) .header--icon-item {
    padding: 0 2px;
  }

  .header.header-height-medium .header--wrapper:not(.half-width-menu) .header--icon-item {
    padding: 0 5px;
  }

  .header.border-true .header--wrapper:not(.half-width-menu) .header--icon-item {
    border-right: 1px solid rgba(var(--header_border_color), .15);
  }

  .half-width-menu .header--right .header--navigation-main {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    overflow: visible;
    overflow: initial;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .half-width-menu .header--right .header--navigation {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .half-width-menu .header--right .header--navigation-inner {
    display: flex;
    align-self: stretch;
  }

  .half-width-menu .header--right .header--navigation-list {
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overflow: hidden;
  }

  /* desktop header style css end */
  /* desktop transparent css start */

  .desktop-transparent {
    background: rgb(var(--transparent_background), var(--transparent_opacity));
    position: absolute;
    z-index: 1;
    width: 100%; 
    top: var(--dynamic_announcement_height);
  }

  .sticky-scroll-up.desktop-transparent,
  .sticky-always.desktop-transparent {
    top: 0;
  }

  /* FIX: Force solid white background on logo-left-menu-center at ALL scroll positions.
     This overrides desktop-transparent completely — the header is always opaque. */
  .logo-left-menu-center.desktop-transparent,
  .logo-left-menu-center.desktop-transparent:not(:hover),
  .logo-left-menu-center.desktop-transparent.is-sticky,
  .logo-left-menu-center.desktop-transparent:not(.is-sticky) {
    background: var(--header_background) !important;
  }
  .logo-left-menu-center.desktop-transparent:before,
  .logo-left-menu-center.desktop-transparent:not(:hover):before,
  .logo-left-menu-center.desktop-transparent.is-sticky:before {
    opacity: 1 !important;
    transition-delay: 0s !important;
  }
  /* Also restore text/icon colors that transparent mode changes */
  .logo-left-menu-center.desktop-transparent:not(.is-sticky):not(:hover) .header--menu-link,
  .logo-left-menu-center.desktop-transparent:not(.is-sticky):not(:hover) .header--logo-text,
  .logo-left-menu-center.desktop-transparent:not(.is-sticky):not(:hover) .header--icon-link-text {
    color: var(--header_color) !important;
  }

  /* Reference-matched against iamgia.com's transparent header, which uses
     a flat `transition: background 0.2s ease-in-out, color 0.2s ease-in-out`
     with no delay in either direction — measured directly via computed
     style. Applying the same duration/delay here (instead of the previous
     0.4s fade with staggered delays) is what makes the header and its
     dropdown panels (see header--menu-submenu below) read as one
     synchronized motion rather than two elements fading on their own
     schedules. */
  .header.desktop-transparent:hover:not(.style-half-width-menu):before,
  .header.desktop-transparent.is-sticky:not(.style-half-width-menu):before {
    opacity: 1;
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover):before {
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header.desktop-transparent:hover .header--menu-link,
  .header.desktop-transparent:hover .header--logo-text,
  .header.desktop-transparent:hover .header--icon-link-text,
  .header.desktop-transparent:hover .header--right .menu-arrow,
  .header.desktop-transparent:hover .header-locale-btn,
  .header.desktop-transparent:hover .header-locale-text,
  .header.desktop-transparent.is-sticky .header--menu-link,
  .header.desktop-transparent.is-sticky .header--logo-text,
  .header.desktop-transparent.is-sticky .header--icon-link-text,
  .header.desktop-transparent.is-sticky .header--right .menu-arrow,
  .header.desktop-transparent.is-sticky .header-locale-btn,
  .header.desktop-transparent.is-sticky .header-locale-text {
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--menu-link,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--logo-text,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--icon-link-text,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--right .menu-arrow,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header-locale-btn,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header-locale-text {
    color: var(--transparent_color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--icon-item svg,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header-locale-chevron {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--right .menu-arrow:after,
  .header:not(.is-sticky).desktop-transparent:not(:hover) .hamburger--toggler-icon .line {
    background: var(--transparent_color);
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover),
  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--icon-item {
    border-color: rgba(var(--transparent_border_color), 0.15);
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .half-width-menu .header--right {
    background: rgb(var(--transparent_background), var(--transparent_opacity));
  }

  .header.desktop-transparent:hover .header--logo-img,
  .header.desktop-transparent.is-sticky .header--logo-img,
  .header.desktop-transparent:hover .transparent-logo-img,
  .header.desktop-transparent.is-sticky .transparent-logo-img {
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .header--logo-img {
    opacity: 0;
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  .header:not(.is-sticky).desktop-transparent:not(:hover) .transparent-logo-img {
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    transition-duration: 0.2s;
    transition-delay: 0s;
  }

  [class*="container"]:has(.desktop-transparent){
    position: relative;
    
  }

  [class*="container"]:not(.no-container) .desktop-transparent {
    width: calc(100% - 30px);
  }

  .container-narrow .desktop-transparent{
    width: calc(100% - 48px) !important;
  }
  
  .container-fullwidth .desktop-transparent {
    width: calc(100% - 4rem) !important;
  }
  /* desktop transparent css end */
  .mobile--side-drawer {
    display: none !important;
  }

  .header--menu-link:hover {
    color: var(--header_hover_color);
  }

  .header--icon-link-text:hover:after {
    opacity: 0.2;
  }

  .hamburger--toggler.hamburger-icon {
    display: block;
  }

  .hamburger--toggler-icon:hover .line-1 {
    width: 16px;
  }

  .hamburger--toggler-icon:hover .line-2 {
    width: 20px;
  }

  .hamburger--toggler-icon:hover .line-3 {
    width: 10px;
  }

  .header--menu-submenu-item.active>.header--menu-submenu-link,
  .header--menu-submenu-item:hover>.header--menu-submenu-link {
    background: var(--submenu_border);
  }

  .header--menu-submenu-item:hover>.header--menu-submenu-link,
  .header--menu-submenu-item.active>.header--menu-submenu-link {
    color: var(--submenu_hover_color);
  }

  .header--menu-megamenu-inner li a:hover,
  .header--menu-megamenu-collection li a:hover {
    color: var(--submenu_hover_color);
  }

  .header--menu-megamenu-inner li a:hover:before,
  .header--menu-megamenu-collection li a:hover:before {
    transform: scale(1);
  }

  .half-width-menu .header--menu-megamenu-inner li a {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 0 100%;
    transition: 0.35s background-size cubic-bezier(0.215, 0.61, 0.355, 1);
    background-position-x: 100%;
    background-repeat: no-repeat;
  }

  .half-width-menu .header--menu-megamenu-inner li a:hover {
    color: var(--submenu_color);
    background-size: 100% 100%;
    background-position-x: 0;
  }

  .half-width-menu .header--menu-megamenu-inner li a::before {
    content: none;
  }

  /* side drawer in header */
  .header--wrapper .side-drawer {
    position: absolute;
    top: 100%;
    bottom: unset;
    height: auto;
    max-width: 700px;
    left: unset;
    right: 0;
    z-index: -1;
    border-radius: 0;
    border-bottom-left-radius: var(--card_radius);
    border-bottom-right-radius: var(--card_radius);
    transition: 0.3s ease;
  }

  .header--wrapper.half-width-menu .side-drawer.account--side-drawer {
    max-width: 700px;
  }

  .header--wrapper .side-drawer.account--side-drawer {
    max-width: 450px;
  }

  .header--wrapper .side-drawer.shadow {
    box-shadow: 0px 14px 24px 0px #00000040;
  }

  .header--wrapper .header--right:has(.side-drawer.show) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .header--wrapper .side--drawer-inner {
    border-radius: 0;
    border-bottom-left-radius: var(--card_radius);
    border-bottom-right-radius: var(--card_radius);
    max-height: 80vh;
  }

  .header--wrapper .side--drawer-panel {
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
    max-height: 100%;
    max-width: unset;
    transform: translateY(-100%);
    height: 100%;
  }

  .header.header-height-small .header--wrapper:not(.half-width-menu) .header--icon-item .header--icon-link-text {
    width: 30px;
    height: 30px;
  }

  .header.header-height-small .header--wrapper:not(.half-width-menu) .header--icon-item .header--icon-link-text svg {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 1200px){
  .container-fullwidth .desktop-transparent {
    width: calc(100% - 8rem) !important;
  }
}
@media (min-width: 1441px) {
  .container-fullwidth .desktop-transparent {
    width: calc(100% - 14rem)!important;
  }
}
@media (max-width: 1024px) {

  /* mobile header style css start */
  .header--wrapper {
    align-items: center;
  }

  .hamburger--toggler.mobile-toggler {
    display: block;
  }

  .transparent-logo-img {
    object-position: center;
  }

  .header--logo {
    justify-content: center;
  }

  .header--navigation-main,
  .header--icon-item.account {
    display: none;
  }

  .header--icon-link-text svg {
    width: 24px;
    height: 24px;
  }

  /* mobile header style css end */
  /* mobile transparent css start */

  .mobile-transparent {
    background: rgb(var(--transparent_background), var(--transparent_opacity));
    position: absolute;
    z-index: 1;
    width: 100%;
    top: var(--dynamic_announcement_height);
  }

  .sticky-scroll-up.mobile-transparent,
  .sticky-always.mobile-transparent {
    top: 0;
  }

  .header.mobile-transparent:hover:before,
  .header.mobile-transparent.is-sticky:before {
    opacity: 1;
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--menu-link,
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--logo-text,
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--icon-link-text,
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header-locale-btn,
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header-locale-text {
    color: var(--transparent_color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--icon-item svg,
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header-locale-chevron {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover) .hamburger--toggler-icon .line {
    background: var(--transparent_color);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover),
  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--icon-item {
    border-color: rgba(var(--transparent_border_color), 0.15);
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover) .header--logo-img {
    opacity: 0;
  }

  .header:not(.is-sticky).mobile-transparent:not(:hover) .transparent-logo-img {
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  }
  [class*="container"]:not(.no-container) .mobile-transparent {
      width: calc(100% - 30px);
  }
  /* mobile transparent css end */
  /* mobile menus css start */
  .mobile--side-drawer .side--drawer-body {
    padding: 0;
  }

  .mobile--side-drawer .side--drawer-header {
    grid-template-columns: auto;
    justify-content: flex-end;
    padding-bottom: 0;
  }

  .mobile--side-drawer-content {
    display: grid;
    grid-template-rows: 1fr auto auto;
  }

  .mobile-menu--box {
    overflow: auto;
  }

  .mobile-menu--item {
    padding: 0px 40px;
  }

  .mobile-menu--link {
    padding: 10px 0;
    transition: transform 0.7s cubic-bezier(0.3, 1, 0.3, 1);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--heading_color);
  }

  .mobile-menu--link svg {
    width: 8px;
    height: auto;
  }

  .mobile-menu--submenu {
    background-color: var(--body_background);
    left: 100%;
    z-index: 2;
    display: grid;
    grid-template-rows: auto 1fr;
    transition: left 0.7s cubic-bezier(0.3, 1, 0.3, 1);
  }

  .mobile-menu--item.active>.mobile-menu--submenu {
    left: 0;
  }

  .mobile-menu--submenu-list {
    height: 100%;
    overflow: auto;
    padding-bottom: 20px;
  }

  .mobile-menu--back {
    display: flex;
    gap: 10px;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--border_color);
    padding: 15px;
    margin-bottom: 15px;
  }

  .mobile--menu-footer {
    display: grid;
    align-items: center;
    padding: 20px 30px;
    gap: 20px;
    grid-template-columns: auto 1fr;
  }

  .mobile--menu-footer-top {
    padding: 30px;
    padding-bottom: 0;
  }

  .mobile-menu--submenu .header--menu-megamenu-collection li {
    background: var(--body_alternate_background);
    padding: 15px 15px;
    border-radius: 10px;
  }

  .mobile-menu--submenu .header--menu-megamenu-collection li a {
    font-size: var(--large_text);
  }

  .mobile-menu--submenu .header--menu-megamenu-collection li+li {
    margin-top: 10px;
  }

  /* mobile menus css end */
   .header .custom-container {
      padding-inline-start: 15px;padding-inline-end: 10px; 
  }  
}

@media (max-width: 767px) {
  .mobile-menu--item {
    padding: 0px 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MENU REDESIGN — Kitty Kabana (v13)
   ─────────────────────────────────────────────────────────────────────────
   DELETE every previous custom mobile menu / targeted fixes / submenu height
   block, then paste this entire block at the very bottom of assets/header.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── COLOUR SCHEME OVERRIDE ───────────────────────────────────────────────*/
  #MobileDrawer {
    --body_background:           var(--mob-bg, #ffffff);
    --body_alternate_background: var(--mob-first-bg, #f4f4f4);
    --heading_color:             var(--mob-text, #1a1a1a);
    --text_color:                var(--mob-text, #1a1a1a);
    --link_color:                var(--mob-text, #1a1a1a);
    --border_color:              var(--mob-divider-color, #e8e8e8);
  }

  /* ── Row height token ─────────────────────────────────────────────────────*/
  .mobile--side-drawer {
    --row-h: calc(var(--mob-row-padding, 17px) * 2 + 1.5em);
  }

  /* ════════════════════════════════════════════════════════════════════════
     2-LINE HAMBURGER — always hide the middle line on mobile
     ════════════════════════════════════════════════════════════════════════ */

  [data-mobile-toggler] .hamburger--toggler-icon .line-2 {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     HAMBURGER → BACK ARROW  (line-morph + spring flicker)
     ────────────────────────────────────────────────────────────────────────
     The two real bars rotate in place to form a ‹ chevron. No pseudo-element.
     Spring easing (overshoot cubic-bezier) produces the flicker effect.

     Geometry (icon: 30px tall, 2 lines × 2px, flex space-evenly):
       gap = (30 - 4) / 3 = 8.67px
       line-1 centre-Y = 9.67px  → translateY(+5.5px) → ~15.2px (icon centre)
       line-3 centre-Y = 20.34px → translateY(-5.5px) → ~14.8px (icon centre)
       transform-origin: left center keeps the LEFT ENDS as the arrow tip.
       Both left ends converge to ~15px → they visually touch as one point.
     ════════════════════════════════════════════════════════════════════════ */

  /* Give lines a smooth base transition that the spring will override */
  [data-mobile-toggler] .hamburger--toggler-icon .line-1,
  [data-mobile-toggler] .hamburger--toggler-icon .line-3 {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                width    0.3s  cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity  0.2s  ease !important;
    transform-origin: left center !important;
  }

  /* OPEN STATE: rotate both lines to form the ‹ arrow */
  body.mob-menu-open [data-mobile-toggler] .hamburger--toggler-icon .line-1 {
    width: 15px !important;
    transform: translateY(5.5px) rotate(-40deg) !important;
  }

  body.mob-menu-open [data-mobile-toggler] .hamburger--toggler-icon .line-3 {
    width: 15px !important;
    transform: translateY(-5.5px) rotate(40deg) !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     HEADER: ALWAYS WHITE WHEN MENU IS OPEN
     ════════════════════════════════════════════════════════════════════════ */

  .mobile--side-drawer .close-fullwidth {
    top: var(--header_height, 70px) !important;
    height: calc(100% - var(--header_height, 70px)) !important;
  }

  body.mob-menu-open .header {
    background: var(--header_background) !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
  }

  /* The drawer positions itself below the header via top: var(--header_height)
     (see .mobile--side-drawer below), and the rule above forces the header's
     background solid while the menu is open — but neither undoes is-hidden's
     own transform, which slides the header fully off-screen. If the header
     had already auto-hidden from scrolling before the menu opened (or the
     background page scrolls further while the drawer sits on top of it —
     overflow:hidden on body doesn't fully stop touch-scroll on mobile), the
     header stayed invisible for the whole time the menu was open even though
     the rules above were already trying to keep it solid. Force it back on
     screen for as long as the menu is open, regardless of that state. */
  body.mob-menu-open .header.is-hidden {
    transform: none !important;
  }

  body.mob-menu-open .header::before { opacity: 1 !important; }
  body.mob-menu-open .header .hamburger--toggler-icon .line {
    background: var(--header_icon_color) !important;
  }
  body.mob-menu-open .header .header--logo-img:not(.transparent-logo-img) { opacity: 1 !important; }
  body.mob-menu-open .header .transparent-logo-img { opacity: 0 !important; }

  /* ════════════════════════════════════════════════════════════════════════
     DRAWER — slides from left, flush to header bottom
     ════════════════════════════════════════════════════════════════════════ */

  .mobile--side-drawer {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    top: var(--header_height, 70px) !important;
    height: calc(100% - var(--header_height, 70px)) !important;
    max-height: none !important;
  }

  .mobile--side-drawer .side--drawer-panel {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .mobile--side-drawer.show .side--drawer-panel {
    transform: translateX(0) !important;
  }

  /* ── side--drawer-inner: full-height, clips overflow, is the submenu
     containing block (position:relative from theme.css). The submenu is
     position:absolute so it sizes against THIS element, not side--drawer-body.
     overflow:hidden here ensures the sliding submenu is clipped at the panel
     edge — NOT at side--drawer-body. ──────────────────────────────────────── */
  .mobile--side-drawer .side--drawer-inner {
    border-radius: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    /* position:relative comes from theme.css — don't override it */
  }

  .mobile--side-drawer .side--drawer-header { display: none !important; }

  /* ── side--drawer-body: grid to pin footer, NO overflow:hidden.
     ─────────────────────────────────────────────────────────────────────────
     CRITICAL: Do NOT set overflow:hidden on side--drawer-body.
     The submenu (position:absolute) is visually painted on top of this element.
     overflow:hidden on an intermediate ancestor would clip the submenu even
     though it's positioned relative to a higher ancestor (side--drawer-inner).
     This was the root cause of Ravewear being cut off. ──────────────────────*/
  .mobile--side-drawer .side--drawer-body {
    padding: 0 !important;
    overflow: visible !important;          /* ← must NOT be hidden */
    display: grid !important;
    grid-template-rows: 1fr auto auto !important;
    height: 100% !important;
  }

  .mobile--side-drawer .mobile--side-drawer-content {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mobile--side-drawer .mobile-menu--box {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .mobile--side-drawer .mobile--menu-footer-top { min-height: 0 !important; }
  .mobile--side-drawer .mobile--menu-footer     { min-height: 0 !important; }

  /* ════════════════════════════════════════════════════════════════════════
     SUBMENU — absolute overlay, sized against side--drawer-inner
     ────────────────────────────────────────────────────────────────────────
     top/bottom/left anchoring (NOT height:100%) is reliable across all
     mobile browsers. The containing block is side--drawer-inner which
     has a definite pixel height = full panel. ──────────────────────────── */

  .mobile--side-drawer .mobile-menu--submenu {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 20 !important;
    background-color: var(--mob-bg, #ffffff) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .mobile--side-drawer .mobile-menu--item.active > .mobile-menu--submenu {
    transform: translateX(0) !important;
  }

  /* Submenu list: fills all space after back button, scrolls only if needed */
  .mobile--side-drawer .mobile-menu--submenu-list {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     ROW ALIGNMENT — every row in both panels identical height + spacing
     ────────────────────────────────────────────────────────────────────────
     The submenu back button must be PIXEL-IDENTICAL to main menu link rows
     so divider lines align horizontally during the slide transition. ───── */

  /* Main menu items: border only, no padding */
  .mobile--side-drawer .mobile-menu--item {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: var(--mob-divider-width, 1px) solid var(--mob-divider-color, #e8e8e8) !important;
  }

  /* Link rows — fixed height, centred text */
  .mobile--side-drawer .mobile-menu--link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--row-h) !important;
    height: var(--row-h) !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    margin: 0 !important;
    font-family: var(--body_font_family, sans-serif) !important;
    font-size: var(--mob-font-size, 15px) !important;
    font-weight: var(--mob-font-weight, 400) !important;
    line-height: 1 !important;
    color: var(--mob-text, #1a1a1a) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    gap: 10px !important;
  }

  /* Back button — IDENTICAL computed height to link rows.
     line-height:1 removes any browser default line-height that could
     make the button element taller than its specified height. ───────────── */
  .mobile--side-drawer .mobile-menu--back {
    display: flex !important;
    align-items: center !important;
    min-height: var(--row-h) !important;
    height: var(--row-h) !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    margin: 0 !important;
    line-height: 1 !important;
    background: var(--mob-back-bg, #f4f4f4) !important;
    border: none !important;
    border-bottom: var(--mob-divider-width, 1px) solid var(--mob-divider-color, #e8e8e8) !important;
    font-family: var(--body_font_family, sans-serif) !important;
    font-size: var(--mob-font-size, 15px) !important;
    font-weight: var(--mob-back-font-weight, 600) !important;
    color: var(--mob-back-text, #1a1a1a) !important;
    gap: 12px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .mobile--side-drawer .mobile-menu--link > span svg {
    width: 6px !important; height: auto !important;
    color: var(--mob-arrow-color, #1a1a1a) !important;
    opacity: 0.45 !important; flex-shrink: 0 !important;
  }

  .mobile--side-drawer .mobile-menu--back svg {
    width: 6px !important; height: auto !important;
    opacity: 0.45 !important; flex-shrink: 0 !important;
  }

  /* First top-level item: grey background */
  .mobile--side-drawer .mobile-menu--list > .mobile-menu--item:first-child {
    background-color: var(--mob-first-bg, #f4f4f4) !important;
  }

  /* Last <li> = invisible Liquid megamenu placeholder — hide it */
  .mobile--side-drawer .mobile-menu--submenu-list > .mobile-menu--item:last-child {
    display: none !important;
  }

  /* ── FOOTER ───────────────────────────────────────────────────────────────*/
  .mobile--side-drawer .mobile--menu-footer {
    border-top: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: var(--mob-bg, #ffffff);
    color: var(--mob-footer-color, #1a1a1a);
  }

  .mobile--side-drawer .mobile--menu-footer a,
  .mobile--side-drawer .mobile--menu-footer span,
  .mobile--side-drawer .mobile--menu-footer button {
    color: var(--mob-footer-color, #1a1a1a) !important;
  }

  .mobile--side-drawer .mobile--menu-footer svg {
    fill: var(--mob-footer-color, #1a1a1a) !important;
    color: var(--mob-footer-color, #1a1a1a) !important;
  }

  /* Submenu backgrounds */
  .mobile--side-drawer .mobile-menu--submenu,
  .mobile--side-drawer .mobile-menu--submenu-list .mobile-menu--item {
    background-color: var(--mob-bg, #ffffff) !important;
  }

  /* Footer locale trigger */
  .mobile--side-drawer .mobile--menu-footer localization-context,
  .mobile--side-drawer .mobile--menu-footer [is='localization-context'] {
    border: none !important; background: transparent !important;
    text-decoration: none !important;
  }
  .mobile--side-drawer .mobile--menu-footer .localization--current-locale {
    border: none !important; background: transparent !important;
    text-decoration: none !important; padding: 0 !important;
  }

}
/* ── End of mobile menu redesign v13 ─────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   LOCALIZATION POPUP — responsive typography controls
   ═══════════════════════════════════════════════════════════════════════════ */

.localization-form-popup { z-index: 9999 !important; }

.localization-form-popup .popup-content {
  border-radius: var(--locale-popup-radius, 0px) !important;
  padding: 0 !important;
}
.localization-form-popup .popup-dialog {
  border-radius: var(--locale-popup-radius, 0px) !important;
  overflow: visible !important;
}

.localization-form-popup .popup-close {
  position: absolute !important;
  top: 16px !important; right: 16px !important;
  width: 28px !important; height: 28px !important;
  border: none !important; border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important; margin: 0 !important; z-index: 3 !important;
}
.localization-form-popup .popup-close::before { display: none !important; }
.localization-form-popup .popup-close svg { width: 14px !important; height: 14px !important; }

.localization-form-wrapper { padding-top: 40px !important; }

.localization--heading {
  font-size: var(--locale-heading-size, 20px) !important;
  font-weight: var(--locale-heading-weight, 600) !important;
  line-height: 1.3 !important;
}

.localization-form-popup .localization-form-heading {
  font-size: var(--locale-label-size, 12px) !important;
  font-weight: var(--locale-label-weight, 400) !important;
}

.localization-form-popup .custom-select-text,
.localization-form-popup .custom-select-button strong,
.localization-form-popup .custom-select-button span {
  font-size: var(--locale-select-size, 14px) !important;
  font-weight: var(--locale-select-weight, 400) !important;
}

.localization-form-popup .form-control,
.localization-form-popup .custom-select-button.form-control {
  border-radius: var(--locale-selector-radius, 0px) !important;
}
.localization-form-popup .custom-select-content {
  border-radius: var(--locale-selector-radius, 0px) !important;
}

@media (max-width: 767px) {
  .localization--heading {
    font-size: var(--locale-heading-size-mobile, 16px) !important;
    font-weight: var(--locale-heading-weight-mobile, 600) !important;
  }
  .localization-form-popup .localization-form-heading {
    display: none !important;
    font-size: var(--locale-label-size-mobile, 12px) !important;
    font-weight: var(--locale-label-weight-mobile, 400) !important;
  }
  .localization-form-popup .custom-select-text,
  .localization-form-popup .custom-select-button strong,
  .localization-form-popup .custom-select-button span {
    font-size: var(--locale-select-size-mobile, 14px) !important;
    font-weight: var(--locale-select-weight-mobile, 400) !important;
  }

  /* Layout/spacing fixes */
  .localization-form-wrapper {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }
  .localization--heading-box {
    padding-bottom: 16px !important;
  }
  .localization-form-popup .localization-form-content {
    padding-bottom: 0 !important;
  }
  .localization-form-popup .popup-close {
    top: 20px !important;
  }
}

/* ── End of localization popup controls ─────────────────────────────────── */

/* Remove iOS tap highlight box on header icons */
.header--icon-link,
.header--icon-link-text,
.header--icon-item,
.header--icons-list li {
  -webkit-tap-highlight-color: transparent !important;
}