/** Shopify CDN: Minification failed

Line 241:0 Expected "}" to go with "{"

**/
/* Maxvyn Navigation & Header styling - paste into assets/navigation-header.css and include in theme.liquid */
:root {
  --color-accent:#38e4ae;
  --color-bg-primary:#1a2a3a;
  --color-bg-secondary:#111827;
  --color-text-base:#fafafa;
  --color-text-muted:#e5e7eb;
}
/* Header Wrapper */
.header,
.gradient--header {
  background:var(--color-bg-primary) !important;
  color:var(--color-text-base);
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(10px);
  transition:background .25s ease;
}
/* Bigger logo on every breakpoint — override theme limits */
header .logo img,
header .logo svg,
.header__heading-logo,
.header__heading-logo img,
.header__logo,
.header__logo img,
.header__logo svg{
  height:60px !important;        /* desktop */
  max-height:60px !important;
  width:auto !important;          /* keeps aspect ratio */
}

@media(max-width:768px){
  header .logo img,
  header .logo svg,
  .header__heading-logo,
  .header__heading-logo img,
  .header__logo,
  .header__logo img,
  .header__logo svg{
    height:60px !important;       /* mobile */
    max-height:60px !important;
  }
}
  /* — Mobile: logo left, icons center/right, drawer icon far right — */
@media (max-width: 768px) {
  /* 0 out the mobile side‑padding on the page wrapper and header */
  .page-width,
  .header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .header {
    display: grid !important;
    grid-template-areas: "logo icons drawer";
    /* make the logo column only as wide as it needs to be: */
    grid-template-columns: min-content 1fr auto !important;
    align-items: center;
  }

  /* 1) Logo in the "logo" slot */
  .header__heading-logo-wrapper,
  .header__logo {
    grid-area: logo !important;
    justify-self: start !important;
    /* remove that leftover gutter so it really hugs the left: */
    margin-left: 0 !important;
  }

  /* 2) Icons */
  .header__icons {
    grid-area: icons !important;
    justify-self: end !important;
  }

  /* 3) Drawer */
  summary.header__icon--menu {
    grid-area: drawer !important;
    justify-self: end !important;
  }
}
/* Inline menu */
.header__inline-menu {
  gap:2.5rem;
}
.header__menu-item {
  font-family:'Poppins',sans-serif;
  font-weight:600;
  letter-spacing:-0.3px;
  color:var(--color-text-base);
  padding:0 1.5rem;
  transition:color .2s ease;
}
.header__menu-item:hover,
.header__menu-item:focus-visible {
  color:var(--color-accent);
}
.header__menu-item--active{
  border-bottom:2px solid var(--color-accent);
}
/* Utility icons */
.header__icon svg {
  width:24px;height:24px;
  stroke:var(--color-text-base);
  transition:stroke .2s ease, filter .25s;
}
.header__icon:hover svg,
.header__icon:focus-visible svg {
  stroke:var(--color-accent);
  filter:drop-shadow(0 0 6px rgba(56,228,174,.75));
}
/* Mega menu */
.mega-menu__content {
  background:var(--color-bg-secondary);
  box-shadow:0 12px 24px rgba(0,0,0,.4);
  padding:2rem 3rem;
  border-top:1px solid rgba(229,231,235,.1);
}
.mega-menu__link {
  color:var(--color-text-base);
  font-weight:500;
  padding:.5rem 0;
  transition:color .2s ease;
}
.mega-menu__link:hover {color:var(--color-accent);}
.mega-menu__list + .mega-menu__list {margin-left:3rem;}
/* Announcement bar optional */
.announcement-bar{background:var(--color-bg-secondary);color:var(--color-text-base);font-size:14px;padding:6px 0;}
/* Sticky shadow on scroll */
.sticky-header--scrolled .header{box-shadow:0 2px 4px rgba(0,0,0,.45);background:rgba(26,42,58,.9);}
/* Button primary */
.button--primary{
  background:var(--color-accent);
  color:var(--color-bg-secondary);
  border:none;
  padding:.75rem 1.5rem;
  font-weight:600;
  border-radius:4px;
  transition:box-shadow .25s ease;
  /* if the theme also has individual btn classes, keep them */
  .header__icon--menu,
  .header__menu,
  button[name="menu"],
  .menu-drawer__toggle{
    order: 99 !important;
  }
}
/* ─── FINAL: move <header-drawer> (hamburger) to far right ── */
@media (max-width: 768px){
  header-drawer{                 /* the custom element itself */
    order: 99 !important;        /* last in the grid row      */
    margin-left: auto !important;/* takes remaining space      */
    @media (max-width: 768px){
  header-drawer{                  /* the custom element itself */
    order: 99 !important;         /* last in the grid row      */
    margin-left: auto !important; /* takes remaining space     */
    justify-self: end !important; /* ← add this line           */
  }

  /* just in case the summary inherits its own order */
  header-drawer > summary.header__icon--menu{
    order: 99 !important;
  }
}

  }
  /* just in case the summary inherits its own order */
  header-drawer > summary.header__icon--menu{
    order: 99 !important;
  }
}
/* ─── Mobile: rearrange header grid so menu is far right ─── */
@media (max-width: 768px){
  /* 1. change the mobile grid layout */
  header.header{
    display:grid !important;                     /* be sure it stays grid   */
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "heading icons menu" !important;
    align-items:center;
  }

  /* 2. assign each piece to its new grid‑area */
  header.header-drawer{                          /* hamburger wrapper      */
    grid-area: menu !important;
    justify-self:end;                            /* hug right edge         */
  }
  .header__icons{                                /* search / account / bag */
    grid-area: icons !important;
    justify-self:end;
  }
  .header__heading{                              /* your logo              */
    grid-area: heading !important;
    justify-self:start;
  }
}
/* ─── Mobile: tidy icon spacing ──────────────────────────── */
@media (max-width: 768px){

  /* Make the icon group a flex‑row with equal gaps */
  .header__icons{
    display:flex !important;      /* override any inline‑grid  */
    align-items:center;
    gap:0.01rem;                  /* ≈ 12 px; adjust if needed */
    margin-right:0.3rem;          /* keeps group off screen edge */
  }

  /* Add a little breathing room between cart & hamburger */
  header-drawer{
    margin-left:0.75rem !important; /* space after .header__icons */
  }
}
/* make the “active” underline green instead of white */
.header__inline-menu .header__link[aria-current="page"] {
  /* if you’re already setting the width and style, just override the color: */
  border-bottom-color: var(--color-accent) !important;
}

/* optional: also make the underline green on hover/focus */
.header__inline-menu .header__link:hover,
.header__inline-menu .header__link:focus {
  border-bottom: 2px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
}
/* hide search icon on desktop */
@media (min-width: 769px) {
  .header__icon--search {
    display: none !important;
  }
  @media (max-width: 768px) {
  .header__icon .svg-wrapper svg {
    width: 20px !important;
    height: 20px !important;
  }
}
.button--primary:hover{box-shadow:0 0 8px rgba(56,228,174,.55);}