/* Language picker for the Galactiv8 Store (12 Oct 2026), the same one as on the Galactiv8 love and events pages:
   same ring, corners and tint as the header pills, with a small dropdown. */
.g8-lang { position: relative; flex: none; }
.g8-lang .g8-nav-cta {
  position: relative;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 22px; border-radius: 14px;
  background: rgba(255,255,255,.02);
  color: #f0eeff; white-space: nowrap;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.g8-lang .g8-nav-cta:hover { transform: translateY(-2px); }
.g8-lang .g8-nav-cta::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background-image: linear-gradient(120deg,
    #b5b5b5 0%, #d3b8fb 16%, #ffffff 25%, #f7a8cd 32%, #9bddfb 39%,
    #b5b5b5 50%, #d3b8fb 66%, #ffffff 75%, #f7a8cd 82%, #9bddfb 89%,
    #b5b5b5 100%);
  background-size: 200% auto;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .48;
  animation: g8LangSweep 8s linear infinite;
  transition: opacity .3s ease;
}
.g8-lang .g8-nav-cta:hover::before { opacity: .82; }
@keyframes g8LangSweep { 0% { background-position: 150% center; } 100% { background-position: -50% center; } }
.g8-nav-cta.g8-lang-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; padding-left: 14px; padding-right: 12px; }
.g8-lang-btn svg { flex: none; display: block; }
.g8-lang-globe { width: 15px; height: 15px; }
.g8-lang-chev { width: 9px; height: 9px; opacity: .8; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.g8-lang.open .g8-lang-chev { transform: rotate(180deg); }
.g8-lang-btn:focus-visible { outline: 2px solid rgba(66,252,255,.7); outline-offset: 3px; }
.g8-lang-list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 230;
  min-width: 0; width: max-content; margin: 0; padding: 5px; list-style: none; border-radius: 16px;
  background: rgba(12,6,32,.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(211,184,251,.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear .22s;
}
.g8-lang.open .g8-lang-list { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.g8-lang-list button {
  display: flex; flex-direction: row-reverse; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; text-align: right;
  color: rgba(235,228,255,.88); font: 500 .86rem/1.2 "Sora", sans-serif; letter-spacing: .01em;
  transition: background .2s ease, color .2s ease;
}
.g8-lang-list button:hover, .g8-lang-list button:focus-visible { background: rgba(211,184,251,.14); color: #fff; outline: none; }
.g8-lang-list button[aria-selected="true"] { color: #fff; }
.g8-lang-list button[aria-selected="true"]::after { content: '\2726'; color: #d3b8fb; font-size: .8rem; }
@media (max-width: 480px) {
  .g8-nav-cta.g8-lang-btn { padding-left: 10px; padding-right: 9px; gap: 5px; }
  .g8-lang-globe { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { .g8-lang-list, .g8-lang-chev, .g8-lang .g8-nav-cta::before { transition: none; animation: none; } }
/* Phones: with the picker in the header, the title and the word "Cart" step aside (the basket icon and count stay),
   the same way the app and gift voucher pages already did, so the header fits in every language. */
@media (max-width: 620px) {
  .g8-nav .g8-nav-title { display: none; }
  .nav-right .cart-word { display: none; }
  .nav-right .cart-btn { padding: 0 12px !important; }
}
/* Longer words in some languages: the footer links wrap onto a second line rather than run off the edge. */
.site-footer .footer-links { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
/* Basket and checkout pages: the picker sits at the right of their slim header bar. */
.g8-lang--corner { position: absolute; right: clamp(20px,5vw,64px); top: 50%; transform: translateY(-50%); }
.g8-lang--corner .g8-lang-list { z-index: 60; }
/* Hebrew and Arabic read right to left; Arabic letters join, so no letter-spacing; Japanese gets lighter tracking and kinsoku line breaks. */
html[lang="ar"] * { letter-spacing: normal !important; }
html[lang="ja"] [data-i18n], html[lang="ja"] .g8-nav-cta, html[lang="ja"] .g8-menu-link { letter-spacing: .04em; line-break: strict; }
html[lang="he"] .g8-menu-link, html[lang="he"] .footer-copy, html[lang="ar"] .g8-menu-link, html[lang="ar"] .footer-copy { unicode-bidi: plaintext; }
html[lang="de"] [data-i18n] { -webkit-hyphens: auto; hyphens: auto; }

/* Phones (20 Oct 2026): picker docked bottom left, level with the help button on the right; its list opens upwards. */
.g8-lang--dock { position: fixed; left: 14px; bottom: 22px; z-index: 350; }
.g8-lang--dock .g8-nav-cta { background: rgba(10,4,26,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.g8-lang--dock .g8-lang-list { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; transform: translateY(6px); }
.g8-lang--dock.open .g8-lang-list { transform: none; }
.g8-lang--dock .g8-lang-chev { transform: rotate(180deg); }
.g8-lang--dock.open .g8-lang-chev { transform: none; }
[dir="rtl"] .g8-lang--dock, html[dir="rtl"] .g8-lang--dock { left: 14px; right: auto; }

/* While the full-screen menu is open, the docked language picker and the help button step back (20 Oct 2026). */
body:has(.g8-menu.open) .g8-lang--dock, body:has(.g8-menu.open) .g8-help-btn, body:has(.g8-menu.open) .g8-help-panel { opacity: 0; visibility: hidden; pointer-events: none; }

/* Phones (20 Oct 2026): in the footer, the picker sits beneath the social icons and its list opens upwards. */
.site-footer .g8-lang--foot { position: relative; order: 3; margin-top: 4px; }
.g8-lang--foot .g8-lang-list { top: auto; bottom: calc(100% + 10px); left: 50%; right: auto; transform: translate(-50%, 6px); }
.g8-lang--foot.open .g8-lang-list { transform: translate(-50%, 0); }
.g8-lang--foot .g8-lang-chev { transform: rotate(180deg); }
.g8-lang--foot.open .g8-lang-chev { transform: none; }

/* LANGUAGE PICKER HIDDEN (20 Oct 2026) until the site is settled; pairs with G8_LANG_PICKER_ON = false in g8-lang.js.
   Delete this rule (and set the switch to true) to bring the picker back. */
.g8-lang { display: none !important; }