/*
  typography.css — Discovery Cafe-Bar-ის ერთიანი, გლობალური ტიპოგრაფიული
  სტანდარტი ყველა გვერდისთვის (index.html/menu.html/about.html/
  contact.html/...). ეს ფაილი თითოეული გვერდის საკუთარ style.css/
  about-style.css/contact-style.css/menu-style.css-მდე <link>-დება
  <head>-ში - ასე გვერდის საკუთარმა, უფრო სპეციფიკურმა წესებმა
  საჭიროებისამებრ თავისუფლად გადაფაროს ეს საბაზისო, საერთო ფენა
  (CSS კასკადში მოგვიანებით ჩატვირთული/მეტი სპეციფიკურობის მქონე
  სელექტორები აქაურ ბაზისურ წესებზე ავტომატურად სჯობნის).

  ------------------------------------------------------------------
  ფონტი - BPG Arial
  ------------------------------------------------------------------
  BPG Arial ქართული ტიპოგრაფიის ერთ-ერთი ყველაზე გავრცელებული და
  მაღალხარისხოვანი სან-სერიფული ოჯახია, მაგრამ კომერციული/ლოკალური
  ფონტია - არ არსებობს Google Fonts-ზე ან რომელიმე საჯარო CDN-ზე,
  ამიტომ ვებზე პირდაპირი ჩატვირთვა (@font-face) შეუძლებელია რეალური
  .woff2/.ttf ფაილების გარეშე (რომლებიც ამ პროექტში ჯერ არ არსებობს).

  სანაცვლოდ, აქ ის პირველ პრიორიტეტად ჩამოთვლილია font-family stack-ში:
  თუ ვიზიტორს სისტემაში უკვე დაინსტალირებული აქვს BPG Arial (ეს
  ძალიან გავრცელებულია ქართულ Windows-ის მომხმარებლებში, განსაკუთრებით
  ტრადიციული ქართული keyboard layout-ების მომხმარებლებში), ბრაუზერი
  ავტომატურად მას გამოიყენებს, დამატებითი კონფიგურაციის გარეშე. ვისაც
  სისტემაში არა აქვს ეს ფონტი - გარანტირებულად "ჩამოცვივდება"
  Noto Sans Georgian-ზე (Google Fonts, @import-ითაა ჩატვირთული აქვე,
  ქვემოთ) - ორივე სუფთა, თანამედროვე, კარგად წაკითხვადი ქართული
  სან-სერიფია, ვიზუალურად ძალიან ახლოს ერთმანეთთან.

  თუ მომავალში გვექნება რეალური BPG Arial .woff2 ფაილები, საკმარისია
  აქვე დაემატოს @font-face ბლოკი (მაგ. src: url('fonts/BPGArial.woff2')
  format('woff2')) - დანარჩენი მთელი საიტი ავტომატურად, არაფრის
  დამატებითი შეცვლის გარეშე გადავა მასზე, რადგან ყველა გვერდი უკვე
  იმავე --font-georgian ცვლადს იყენებს.
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800&display=swap');

/*
  Zaza - მომხმარებლის მიერ მოწოდებული, ნატიურად ქართული, ხელნაწერული/
  მრგვალი ხასიათის ფონტი (fonts/zaza.ttf, დესკტოპზე geofont/-ში
  ნაპოვნი zaza_[FONTS.GE].zip-იდან ამოღებული). დანარჩენი საიტისგან
  განსხვავებით (--font-georgian) ეს თვითმასპინძლობითი @font-face-ია,
  არა Google Fonts @import - პირდაპირ ამ პროექტის საკუთარი .ttf ფაილიდან
  იტვირთება. გამოყენებულია მხოლოდ index.html-ის ჰერო-სლოგანზე
  (.hero-cta-title) - საიტის დანარჩენი ტექსტი კვლავ --font-georgian-ზეა.
*/
@font-face {
  font-family: 'Zaza';
  src: url('fonts/zaza.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* გლობალური 90%-იანი ზუმის ეფექტი - მთელი საიტისთვის ერთხელ, აქ       */
/* ------------------------------------------------------------------ */
/* `zoom` (არა `transform: scale()`) იმეორებს ზუსტად იმას, რასაც
   ბრაუზერის საკუთარი Ctrl/Cmd+"-" 90%-ზე დაყენება აკეთებს: მთელი
   გვერდის განლაგება (layout) თავიდან გამოითვლება 90%-იან მასშტაბში -
   ზომები, აბზაცები, vw/vh-ზე დამოკიდებული clamp()-ები და
   position:fixed ელემენტები (Top.ge მთვლელი, Facebook/Messenger
   ღილაკები, მუსიკის toggle) ყველა ერთნაირად, სწორად შესკეილდება,
   დიზაინი არ იშლება.
   `transform: scale(0.9)` აქ განზრახ არ გამოიყენება - ის მხოლოდ
   ვიზუალურად "ხატავს" პატარას, სინამდვილეში layout-ი 100%-ზე რჩება
   (საჭირო იქნებოდა ხელით 111.11%-იანი კომპენსაციური width/margin,
   და position:fixed ელემენტები აღარ დარჩებოდა რეალურ viewport-ზე
   მიბმული) - `zoom` ამ ყველაფერს უფასოდ, ბრაუზერის დონეზე აგვარებს. */
html {
  zoom: 0.9;
  overflow-x: hidden;
}

/*
  მობილურზე (≤768px) ეს გლობალური 90%-იანი ზუმი ყველა გვერდზე
  თიშულია (ადრე მხოლოდ index.html-ზე, body.page-index კლასით
  მონიშნული, იყო თიშული - იხ. index.html).

  მიზეზი: index.html-ის hero-კანვასზე ეს zoom vh-ერთეულებთან
  (height:100dvh) კონფლიქტში შედიოდა (ეკრანის ვიზუალური სიმაღლე 90%-ზე
  იკლებდა), ამიტომ თავიდან მხოლოდ იქ იყო თიშული. თუმცა real device-ებზე
  (მობილური Safari/Chrome) აღმოჩნდა, რომ ეს non-standard `zoom`
  თვისება position:fixed ელემენტებთან (.lang-switcher/.mobile-nav-toggle)
  ერთადაც არასტაბილურად იქცევა სქროლვის დროს - ჰამბურგერი (და
  პოტენციურად სხვა fixed ელემენტებიც) მომენტალურად "ქრებოდა"/არასწორ
  ადგილს ხატავდა კადრებს შორის რეპოზიციონირებისას, ზუსტად იმ 5
  გვერდზე, სადაც zoom ჩართული რჩებოდა (index.html-ზე კი, სადაც zoom
  თიშულია, ეს არასდროს ხდებოდა). ამიტომ იგივე zoom:1 ყველა გვერდზეა
  გავრცელებული - ეს არის ის ზუსტი მექანიზმი, რაც index.html-ს
  სტაბილურს ხდიდა, უბრალოდ ადრე მხოლოდ ერთ გვერდზე იყო გამოყენებული.

  ვინაიდან html{zoom:0.9} მხოლოდ ერთგვაროვან 90%-იან შემცირებას
  აკეთებდა (ყველაფერი პროპორციულად), zoom:1-ზე დაბრუნება უბრალოდ
  ~11%-ით ზრდის ყველა ზომას (ტექსტი/padding/ღილაკები) - არაფერი
  იმახინჯება/იჭრება, უბრალოდ ოდნავ დიდდება (რაც touch-target-ebისთვის
  თუნდაც სასურველიცაა). vh/dvh-ზე დამოკიდებული "მკვდარი სივრცის"
  რისკი (რაც index.html-ს ჰქონდა) დანარჩენ 5 გვერდზე არ არსებობს,
  რადგან მათი .canvas მობილურზე ჩვეულებრივი height:auto-ითაა
  (არა 100vh/100dvh), ისე რომ ეს ცვლილება მათთვის უსაფრთხოა.
*/
@media (max-width: 768px) {
  html { zoom: 1; }
}

body {
  overflow-x: hidden;
}

:root {
  --font-georgian: 'BPG Arial', 'BPG Arial 2010', 'BPG Nino Mtavruli', 'Noto Sans Georgian', 'Segoe UI', Arial, sans-serif;

  /* მთავარი სათაურებისა და აქცენტების ერთიანი, ელეგანტური ოქროსფერი -
     ცვლის ძველ, უფრო კაშკაშა ნარინჯისფერ-ოქროს (#ffb35a) ტონს საიტის
     ყველა გვერდზე (დივაიდერები, hover/focus აქცენტები, სათაურები
     მუქ ფონებზე, ფასების/ჯამის ხაზგასმა, კიკერ-ლეიბლები და ა.შ.) */
  --color-gold: #d4af37;

  /* ძირითადი ტექსტის მკვეთრი თეთრი მუქ ფონებზე (hero-ების ტაგლაინები,
     header/footer ტექსტი, კალათის ზოლი, გამორჩეული ბარათის ტექსტი,
     საკონტაქტო მონაცემები მუქ პანელზე) */
  --color-white: #fff;
}

body {
  font-family: var(--font-georgian);
}

/* ------------------------------------------------------------------ */
/* ტიპოგრაფიული იერარქია - სათაურები                                   */
/* ------------------------------------------------------------------ */
/*
  საბაზისო, ყველა გვერდზე საერთო წესია: სქელი წონა (800) და მკაფიო
  letter-spacing, კაფე-ბარის პრემიუმ სტილისთვის. თითოეული გვერდის
  საკუთარი, უფრო სპეციფიკური სელექტორები (მაგ. .about-hero-inner h1,
  .menu-hero-inner h1) საჭიროებისამებრ თავისუფლად აზუსტებენ ზუსტ
  ზომას/ფერს/ასოთშორისს - ეს მხოლოდ წონისა და ასოთშორისის საერთო,
  გარანტირებული საძირკველია, რომ ერთი სათაურიც არასდროს დარჩეს
  შემთხვევით თხელი ან უსისტემო ასოთშორისით.
*/
h1, h2, h3 {
  font-family: var(--font-georgian);
  font-weight: 800;
  letter-spacing: .6px;
}

h1 { letter-spacing: 1.5px; }
h2 { letter-spacing: 1px; }

/* ------------------------------------------------------------------ */
/* მცურავი სოც-ქსელის ღილაკები (Facebook/Messenger) - ყველა გვერდზე     */
/* საერთო, ეკრანის მარჯვენა კიდეზე, ვერტიკალურ ცენტრში დაფიქსირებული   */
/* ------------------------------------------------------------------ */

.floating-social {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.floating-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  animation: floating-social-pulse 2.4s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-social-btn:hover,
.floating-social-btn:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  animation-play-state: paused;
}

.floating-social-btn:focus-visible {
  outline: 2px solid var(--color-gold, #d4af37);
  outline-offset: 3px;
}

.floating-social-btn svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.floating-social-btn--facebook {
  background: #1877f2;
}

.floating-social-btn--messenger {
  background: linear-gradient(135deg, #00c6ff 0%, #0078ff 50%, #a033ff 100%);
}

@keyframes floating-social-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-social-btn { animation: none; }
}

@media (max-width: 480px) {
  .floating-social { right: 12px; gap: 10px; }
  .floating-social-btn { width: 44px; height: 44px; }
  .floating-social-btn svg { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------------ */
/* ფონური მუსიკის ღილაკი - ყველა გვერდზე საერთო, ეკრანის ქვედა-მარცხენა */
/* კუთხეში (Top.ge მთვლელისგან საპირისპირო კუთხეში, რომ არ ეჯახებოდნენ) */
/* ------------------------------------------------------------------ */

.bg-music-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .4);
  background: rgba(13, 9, 6, .45);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: var(--color-gold, #d4af37);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.bg-music-toggle:hover,
.bg-music-toggle:focus-visible {
  transform: scale(1.1);
  background: rgba(13, 9, 6, .6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.bg-music-toggle:focus-visible {
  outline: 2px solid var(--color-gold, #d4af37);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* ჰედერის ცოცხალი ტექსტის ნავიგაცია - ყველა გვერდისთვის საერთო        */
/* (თავდაპირველად მხოლოდ index.html-ზე იყო, ui-menu.png-ში ჩაშენებული  */
/* არასდროს ითარგმნებადი ტექსტის ნაცვლად - იგივე .nav-menu-row/        */
/* .nav-btn-text HTML-ბლოკი ახლა about/contact/menu/checkout.html-ზეც  */
/* გამეორებულია, რომ i18n.js-ს ყველგან რეალურად შეეძლოს GEO/ENG        */
/* გადართვა, არა მხოლოდ index.html-ზე) */
/* ------------------------------------------------------------------ */
/*
  .nav-menu-row - განზრახ flex-ით, არა თითოეული ბმულის ცალკე
  position:absolute+ფიქსირებული width%-ით (როგორც .nav-btn-ს სხვა
  ჰოტსპოტები) - ქართული და ინგლისური თარგმანები სხვადასხვა
  სიგანისაა, ფიქსირებული % სიგანე ან ტექსტს "ჭრიდა" (overflow) ან
  პატარა ჰიტ-არეს ტოვებდა ერთ ენაზე. flex + gap ავტომატურად ითვლის
  სწორ სიგანეს რეალური ტექსტის მიხედვით, ენის მიუხედავად.
*/
.nav-menu-row {
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav-btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-georgian);
  font-weight: 500;
  font-size: clamp(11px, 1.05vw, 16px);
  letter-spacing: 0.4px;
  white-space: nowrap;
  text-decoration: none;
}

.nav-btn-text:hover,
.nav-btn-text:focus-visible {
  color: var(--color-gold, #d4af37);
}

.nav-btn-text[aria-current="page"] {
  color: var(--color-gold, #d4af37);
}

/* ------------------------------------------------------------------ */
/* ენების გადამრთველი (GEO/ENG) - საერთო ყველა გვერდისთვის,           */
/* ეკრანის ზედა-მარცხენა კუთხეში (position:fixed, ისევე როგორც         */
/* ბგ-მუსიკის/სოც-ქსელების ღილაკები სხვა კუთხეებში)                     */
/* ------------------------------------------------------------------ */
.lang-switcher {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 998;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(13, 9, 6, 0.55);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.lang-switcher button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-georgian);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switcher button .flag {
  display: flex;
  flex: none;
  align-items: center;
}

.lang-switcher button .flag svg {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
}

.lang-switcher button:hover:not(.is-active) {
  color: var(--color-gold, #d4af37);
}

.lang-switcher button.is-active {
  background: var(--color-gold, #d4af37);
  color: #0d0906;
}

@media (max-width: 768px) {
  .lang-switcher { padding: 2px; }
  .lang-switcher button { padding: 5px 9px; font-size: 11px; }
}

.bg-music-toggle.is-playing {
  background: rgba(212, 175, 55, .18);
  animation: bg-music-pulse-ring 2s ease-in-out infinite;
}

.bg-music-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

@keyframes bg-music-pulse-ring {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 0 rgba(212, 175, 55, .35); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 8px rgba(212, 175, 55, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-music-toggle.is-playing { animation: none; }
}

@media (max-width: 480px) {
  .bg-music-toggle { left: 12px; bottom: 12px; width: 44px; height: 44px; }
  .bg-music-icon { width: 18px; height: 18px; }
}

/*
  დესკტოპზე (>900px) ეს ღილაკი აღარ არის ეკრანზე "მიმაგრებული" მრგვალი
  ღილაკი ქვედა-მარცხენა კუთხეში - HTML-ში გადატანილია თავსართის შიგნით
  (.ui-hotspots, ლოგოსა და ნავიგაციას შორის) და თითოეული გვერდის
  საკუთარ style.css/about-style.css/contact-style.css/menu-style.css/
  checkout-style.css-ში აქვს position:absolute + კონკრეტული %
  კოორდინატები (თავსართის საკუთარი aspect-ratio-ს შესაბამისად - index.html
  სხვა კოორდინატთა სივრცეშია, ვიდრე დანარჩენი 4 გვერდი, იხ. კომენტარი
  იქ). აქ, საერთო ფაილში, მხოლოდ ის ეხება, რაც ყველა გვერდზე ერთნაირია:
  ტექსტური ლეიბლის ჩვენება/სტილი. ≤900px-ზე (მობილური/ტაბლეტი) ეს მთელი
  სექცია არ მოქმედებს - ღილაკი ზუსტად ისე რჩება, როგორც ზემოთაა
  აღწერილი (მრგვალი, position:fixed, ქვედა-მარცხენა კუთხე).
*/
.bg-music-label {
  display: none;
}

@media (min-width: 901px) {
  .bg-music-toggle {
    gap: 8px;
  }

  .bg-music-label {
    display: inline-block;
    font-family: var(--font-georgian);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--color-gold, #d4af37);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* მობილური hamburger-ნავიგაცია (index/menu/about/contact/checkout)    */
/* ------------------------------------------------------------------ */
/*
  ამ გვერდების თავსართის ნავიგაცია (.ui-hotspots .nav-btn) მთლიანად
  ui-menu.png სურათშია ჩაშენებული - ვიწრო, თხელი (1920:150) პროპორციის
  გამო ეს ტექსტი მობილურზე (≤900px) წაუკითხავად პატარავდება და
  CSS-ით ამის გასწორება შეუძლებელია დამახინჯების/ცარიელი ადგილის
  გარეშე (background-size:100% auto ინარჩუნებს სურათის ორიგინალ
  პროპორციას). ამიტომ ≤900px-ზე ეს უხილავი ჰოტსპოტები (ლოგოს გარდა)
  იმალება და მათ ნაცვლად ცოცხალი, ნამდვილი ტექსტით hamburger-მენიუ
  ჩნდება - იგივე ბმულები, უბრალოდ წაკითხვადი ზომით.
  HTML თითოეულ გვერდზეა დუბლირებული (ბმულების სია/aria-current
  გვერდისამებრ განსხვავდება), CSS/JS კი აქ და mobile-nav.js-შია
  საერთო, ერთხელ.
*/

.mobile-nav-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 20;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, .45);
  background: rgba(13, 9, 6, .55);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-gold, #d4af37);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 2, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 998;
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(78vw, 320px);
  background: linear-gradient(180deg, #1a130c 0%, #0d0906 100%);
  border-left: 1px solid rgba(212, 175, 55, .25);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .5);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, .9, .32, 1);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  gap: 4px;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  color: #f2e9da;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 12px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link {
  display: block;
  padding: 14px 10px;
  font-family: var(--font-georgian);
  font-size: 19px;
  color: #f2e9da;
  text-decoration: none;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: rgba(212, 175, 55, .1);
  color: #d4af37;
  outline: none;
}

.mobile-nav-link[aria-current="page"] {
  color: #d4af37;
  font-weight: 700;
}

body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .mobile-nav-toggle {
    display: flex;
    /* absolute→fixed: ჰამბურგერი აღარ არის თავსართის (.site-header)
       მჭიდრო, დაბალი ყუთის ბანდიტი - თავსართი 4 შიდა გვერდზე მხოლოდ
       ~29-60px მაღალია (1920:150 პროპორცია) და overflow:hidden აქვს,
       ამიტომ 34px-იანი ღილაკი მასში აღარ ეტევა/იჭრება. position:fixed-ით
       ღილაკი პირდაპირ ეკრანს ეჭიდება (ისევე, როგორც .lang-switcher/
       .bg-music-toggle), ამიტომ ზომაც და ადგილიც ყველა გვერდზე
       (index.html-ის ჩათვლით) ზუსტად ერთნაირია. */
    position: fixed;
    top: 10px;
    right: 10px;
    transform: none;
    width: 34px;
    height: 34px;
    z-index: 1000;
  }

  .ui-hotspots .nav-btn:not(.logo) { display: none; }
  /* ui-menu.png-ის ვიზუალი (თავად ჩაშენებული, აღარ დაწკაპებადი ტექსტი)
     ამოღებულია hamburger-ის სასარგებლოდ - წინააღმდეგ შემთხვევაში
     წაუკითხავი, "მკვდარი" ტექსტი კვლავ ჩანდა hamburger-ის გვერდით. */
  [style*="ui-menu.png"] { display: none; }
  /* index.html-ის ცოცხალი ტექსტის ნავიგაცია (.nav-menu-row, დესკტოპზეა
     განკუთვნილი) - მობილურზე მთლიანად იმალება, hamburger-ის სასარგებლოდ,
     რომ ორივე ერთდროულად არ ჩანდეს. */
  .nav-menu-row { display: none; }

  /* ენების გადამრთველი ინაცვლებს ზედა-მარჯვენა კუთხეში, ჰამბურგერის
     გვერდით - თავდაპირველი ზედა-მარცხენა პოზიცია (ყველა გვერდზე) ზუსტად
     ლოგოს ადგილს ფარავდა, რადგან მობილურზე თავსართი ისედაც დაბალია და
     ლოგოც იმავე კუთხეშია. მარჯვნივ გადატანით მთელი ზედა-მარცხენა კუთხე
     თავისუფლდება ლოგოსთვის. */
  .lang-switcher {
    left: auto;
    right: 52px;
    top: 10px;
  }

  /*
    შიდა გვერდებზე (about/contact/menu/checkout) თავსართი (.site-header/
    .about-header) ცალკე, თხელი ზოლია hero-ფოტოს ზემოთ ჩვეულებრივ
    დოკუმენტის ნაკადში - მობილურზე ეს ცარიელი, თითქმის უჩინარი ~29-60px
    ზოლი უსარგებლოდ სვამდა hero-ფოტოს ქვემოთ, ეკრანის ზედა ნაწილს
    ტოვებდა "მკვდარ" სივრცედ. position:absolute-ით თავსართი ამოღებულია
    ნაკადიდან და მიმაგრებულია .canvas-ის ზედა კიდეზე - hero-ფოტო
    ავტომატურად "აიწევა" y=0-მდე (ნაკადში აღარ არის თავსართის დაკავებული
    სივრცე), ხოლო თავსართი (მასში ლოგო/hamburger-ის ჰოტსპოტით, საკუთარი
    ვიზუალით) ზუსტად ამ ფოტოს თავზე "ჯდება" (z-index:5, ფოტოზე მეტი) -
    იგივე ვიზუალური ეფექტი, რაც index.html-ზეა (ლოგო პირდაპირ hero-ს
    თავზე). hamburger/მუსიკის ღილაკი უცვლელად მუშაობს (უკვე
    position:fixed არიან, ამ ცვლილებაზე დამოკიდებული არ არიან).
  */
  .site-header,
  .about-header {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/*
  ჰამბურგერის ზომა/პოზიცია ერთიანდაა განსაზღვრული ზემოთ, @media
  (max-width: 900px) ბლოკში (position:fixed, 34x34px, ყველა გვერდზე
  ერთნაირი) - აქ ცალკე ≤768px-ის override აღარ სჭირდება.
*/