/* ============================================================
   VELLINORE — Navigation styling system
   ONE combined set of controls for BOTH the left text links
   (.nav-link) and the right utilities (.util). Defaults match
   the current header so nothing changes until a Tweak is set.
   body[data-nav-size|nav-font|nav-weight|nav-hover|nav-gap|nav-icons]
   ============================================================ */

.util{ position:relative; }

/* ---- SIZE — scales left links + right utils together ---- */
body[data-nav-size="s"]  .nav-link{ font-size:11px; }
body[data-nav-size="s"]  .util{ font-size:10.5px; }
body[data-nav-size="m"]  .nav-link{ font-size:13px; }
body[data-nav-size="m"]  .util{ font-size:12px; }
body[data-nav-size="l"]  .nav-link{ font-size:15px; }
body[data-nav-size="l"]  .util{ font-size:13.5px; }
body[data-nav-size="xl"] .nav-link{ font-size:17px; }
body[data-nav-size="xl"] .util{ font-size:15px; }

/* ---- FONT STYLE — both sections ---- */
body[data-nav-font="caps"]   .nav-link, body[data-nav-font="caps"]   .util{ font-family:var(--sans); text-transform:uppercase; }
body[data-nav-font="normal"] .nav-link, body[data-nav-font="normal"] .util{ font-family:var(--sans); text-transform:none; letter-spacing:.03em; }
body[data-nav-font="serif"]  .nav-link, body[data-nav-font="serif"]  .util{ font-family:var(--serif); text-transform:none; letter-spacing:.01em; }
body[data-nav-font="serif"]  .nav-link{ font-size:calc(1em + 3px); }
body[data-nav-font="serif"]  .util{ font-size:calc(1em + 2px); }
body[data-nav-font="wide"]   .nav-link, body[data-nav-font="wide"]   .util{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.3em; }

/* ---- WEIGHT — both ---- */
body[data-nav-weight="light"]  .nav-link, body[data-nav-weight="light"]  .util{ font-weight:300; }
body[data-nav-weight="normal"] .nav-link, body[data-nav-weight="normal"] .util{ font-weight:400; }
body[data-nav-weight="bold"]   .nav-link, body[data-nav-weight="bold"]   .util{ font-weight:600; }

/* ---- HOVER EFFECT — both ---- */
/* fade (opacity) */
body[data-nav-hover="fade"] .nav-link, body[data-nav-hover="fade"] .util{ opacity:.72; transition:opacity .22s var(--ease); }
body[data-nav-hover="fade"] .nav-link:hover, body[data-nav-hover="fade"] .util:hover,
body[data-nav-hover="fade"] .nav-link.active{ opacity:1; }
/* gold (colour) */
body[data-nav-hover="gold"] .nav-link, body[data-nav-hover="gold"] .util{ opacity:1; transition:color .22s var(--ease); }
body[data-nav-hover="gold"] .nav-link:hover, body[data-nav-hover="gold"] .util:hover{ color:var(--gold-deep); }
/* underline (animated, via background so it never clashes with the active bar) */
body[data-nav-hover="underline"] .nav-link, body[data-nav-hover="underline"] .util{
  opacity:1;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:left calc(100% - 20px);
  background-size:0% 1.4px;
  transition:background-size .28s var(--ease);
}
body[data-nav-hover="underline"] .util{ background-position:left 100%; }
body[data-nav-hover="underline"] .nav-link:hover, body[data-nav-hover="underline"] .util:hover{ background-size:100% 1.4px; }
/* lift (translate) */
body[data-nav-hover="lift"] .nav-link, body[data-nav-hover="lift"] .util{ opacity:1; transition:transform .2s var(--ease); }
body[data-nav-hover="lift"] .nav-link:hover, body[data-nav-hover="lift"] .util:hover{ transform:translateY(-2px); }

/* ---- GAP / SPACING — both ---- */
body[data-nav-gap="tight"]  .nav-left{ gap:18px; }
body[data-nav-gap="tight"]  .nav-right{ gap:14px; }
body[data-nav-gap="normal"] .nav-left{ gap:30px; }
body[data-nav-gap="normal"] .nav-right{ gap:24px; }
body[data-nav-gap="wide"]   .nav-left{ gap:46px; }
body[data-nav-gap="wide"]   .nav-right{ gap:36px; }

/* ---- ICONS on the right utilities (data-nav-icons="icon") ---- */
body[data-nav-icons="icon"] .util[data-route="suche"]::before,
body[data-nav-icons="icon"] .util[data-konto-toggle]::before,
body[data-nav-icons="icon"] .util[data-route="wunschliste"]::before,
body[data-nav-icons="icon"] .util[data-open-cart]::before{
  content:''; display:inline-block; width:16px; height:16px; margin-right:7px; vertical-align:-2px;
  background-color:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
body[data-nav-icons="icon"] .util[data-route="suche"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
}
body[data-nav-icons="icon"] .util[data-konto-toggle]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
body[data-nav-icons="icon"] .util[data-route="wunschliste"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20S3.5 15 3.5 9.2C3.5 6 6 4 8.4 4 10.4 4 12 6 12 6s1.6-2 3.6-2C18 4 20.5 6 20.5 9.2 20.5 15 12 20 12 20z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20S3.5 15 3.5 9.2C3.5 6 6 4 8.4 4 10.4 4 12 6 12 6s1.6-2 3.6-2C18 4 20.5 6 20.5 9.2 20.5 15 12 20 12 20z'/%3E%3C/svg%3E");
}
body[data-nav-icons="icon"] .util[data-open-cart]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
/* icons-only: hide the label text but keep counts visible */
body[data-nav-icons="only"] .util[data-route="suche"],
body[data-nav-icons="only"] .util[data-konto-toggle],
body[data-nav-icons="only"] .util[data-route="wunschliste"],
body[data-nav-icons="only"] .util[data-open-cart]{ font-size:0 !important; gap:0; }
body[data-nav-icons="only"] .util .util-count,
body[data-nav-icons="only"] .util .cart-count{ font-size:11px; }
body[data-nav-icons="only"] .util[data-route="suche"]::before,
body[data-nav-icons="only"] .util[data-konto-toggle]::before,
body[data-nav-icons="only"] .util[data-route="wunschliste"]::before,
body[data-nav-icons="only"] .util[data-open-cart]::before{
  content:''; display:inline-block; width:19px; height:19px; margin-right:0; vertical-align:middle;
  background-color:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
body[data-nav-icons="only"] .util[data-route="suche"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
}
body[data-nav-icons="only"] .util[data-konto-toggle]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
body[data-nav-icons="only"] .util[data-route="wunschliste"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20S3.5 15 3.5 9.2C3.5 6 6 4 8.4 4 10.4 4 12 6 12 6s1.6-2 3.6-2C18 4 20.5 6 20.5 9.2 20.5 15 12 20 12 20z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20S3.5 15 3.5 9.2C3.5 6 6 4 8.4 4 10.4 4 12 6 12 6s1.6-2 3.6-2C18 4 20.5 6 20.5 9.2 20.5 15 12 20 12 20z'/%3E%3C/svg%3E");
}
body[data-nav-icons="only"] .util[data-open-cart]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

/* Logo centering and navigation alignment enhancement */
@media (min-width: 1200px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
  }
  .header-inner a[data-route="home"] {
    grid-column: 2;
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-width: 200px;
    z-index: 10;
  }
  .nav-left {
    grid-column: 1;
    display: flex;
    align-items: center;
  }
  .nav-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .nav-left { gap: 16px !important; }
  .nav-right { gap: 14px !important; }
  .nav-link { font-size: 12px !important; }
  .util { font-size: 11px !important; }
}