:root{
  --bg:#12261A;
  --bg-raised:#1B3524;
  --bg-raised-2:#0E1D14;
  --text:#F4F0E2;
  --text-soft:#B7C4B0;
  --accent:#9DB49D;
  --accent-deep:#7C9880;
  --forest:#6F9173;
  --gold:#C9A96B;
  --ink:#12261A;
  --line:rgba(244,240,226,.14);
  --shadow: 0 20px 45px -22px rgba(0,0,0,.55);
  --radius: 8px;
}
/* Sabit tək dizayn seçimidir (tünd meşə yaşılı + adaçayı) — açıq/qaranlıq sistem
   rejimindən asılı olmayaraq eynidir, brendin öz kimliyini qoruyur. */
:root[data-theme="light"]{
  --bg:#12261A; --bg-raised:#1B3524; --bg-raised-2:#0E1D14;
  --text:#F4F0E2; --text-soft:#B7C4B0; --accent:#9DB49D; --accent-deep:#7C9880;
  --forest:#6F9173; --gold:#C9A96B; --ink:#12261A; --line:rgba(244,240,226,.14);
}

/* ---------------------------------------------------------------------
 * Sayt rəng temaları (admin → Görünüş bölməsindən seçilir). Struktur/tərtibat
 * eyni qalır — <html data-color-theme="..."> atributu ilə yalnız bu dəyişənlər
 * dəyişir. "forest" defolt olduğu üçün bare :root-da artıq təyin olunub.
 * ------------------------------------------------------------------- */
:root[data-color-theme="amber"]{
  --bg:#241811; --bg-raised:#33231A; --bg-raised-2:#1A100B;
  --text:#F5ECE0; --text-soft:#CBB39C; --accent:#E0A458; --accent-deep:#C98A3E;
  --forest:#C98A3E; --gold:#E0A458; --ink:#241811; --line:rgba(245,236,224,.14);
}
:root[data-color-theme="ocean"]{
  --bg:#0E1D26; --bg-raised:#173442; --bg-raised-2:#0A141A;
  --text:#EAF3F6; --text-soft:#A9C4CE; --accent:#6FB3C0; --accent-deep:#559AA8;
  --forest:#559AA8; --gold:#8FD0C9; --ink:#0E1D26; --line:rgba(234,243,246,.14);
}
:root[data-color-theme="sumi"]{
  --bg:#1A1210; --bg-raised:#2A1C19; --bg-raised-2:#120C0A;
  --text:#F5EBE6; --text-soft:#C9A99E; --accent:#C1443B; --accent-deep:#A23930;
  --forest:#A23930; --gold:#D98B60; --ink:#F5EBE6; --line:rgba(245,235,230,.14);
}
/* Üç yeni "premium" açıq tema — Sakura xüsusi olaraq göndərilən Yaponiya
   mənzərəsi ilə (admin → Görünüş bölməsindən yüklənə bilər), Bej/Rose Gold isə
   şəkilsiz, sırf zərif rəng palitrası olaraq təqdim olunur. */
:root[data-color-theme="sakura"]{
  --bg:#FBF3EC; --bg-raised:#FFFFFF; --bg-raised-2:#F3E4DC;
  --text:#3B2A2E; --text-soft:#8B6F72; --accent:#C97B90; --accent-deep:#B15E75;
  --forest:#B15E75; --gold:#C9A15A; --ink:#FFFFFF; --line:rgba(59,42,46,.14);
}
:root[data-color-theme="beige"]{
  --bg:#F7F2EA; --bg-raised:#FFFFFF; --bg-raised-2:#EDE4D6;
  --text:#3A342B; --text-soft:#8A8070; --accent:#9C7A3E; --accent-deep:#7E6231;
  --forest:#7E6231; --gold:#B99457; --ink:#FFFFFF; --line:rgba(58,52,43,.14);
}
:root[data-color-theme="rosegold"]{
  --bg:#FBEEEA; --bg-raised:#FFFFFF; --bg-raised-2:#F3DCD3;
  --text:#4A2E2A; --text-soft:#9C7972; --accent:#B76E79; --accent-deep:#9C5A64;
  --forest:#9C5A64; --gold:#D4A373; --ink:#FFFFFF; --line:rgba(74,46,42,.14);
}
/* Açıq temalarda səhifə fonundakı su işarəsi naxışı da isti çəhrayı/qızılı
   tonlara keçir (tünd temalardakı yaşıl/qızılı yarpaq naxışı əvəzinə). */
:root[data-color-theme="beige"] body,
:root[data-color-theme="rosegold"] body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg%3E%3Cpath d='M28 130C25 92 42 68 58 58 50 80 56 102 68 114 51 119 34 126 28 130Z' fill='%23B76E79' fill-opacity='0.08'/%3E%3Cpath d='M132 148C122 114 130 84 149 68 142 91 149 114 165 128 147 131 137 141 132 148Z' fill='%23C9A15A' fill-opacity='0.08'/%3E%3Cpath d='M95 34C92 16 102 3 115 0 110 13 114 26 123 33 110 35 100 34 95 34Z' fill='%23B76E79' fill-opacity='0.07'/%3E%3Cpath d='M45 20C41 8 47 -1 57 -3 54 6 57 14 63 19 54 21 48 20 45 20Z' fill='%23C9A15A' fill-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
}
/* Sakura teması: kiçik təkrarlanan naxış YOXDUR — sadə, zərif hiss üçün
   birbaşa Yaponiya mənzərəsi (əsas fon, tünd elementlərin üstündə) sabit "hero"
   şəkli kimi göstərilir. Admin öz şəklini yükləsə (admin/appearance.php),
   --theme-bg-image həmin şəkli əvəz edir; yükləməyibsə, bu bundle olunmuş
   defolt şəkil istifadə olunur. */
:root[data-color-theme="sakura"] body{
  background-image:
    linear-gradient(rgba(251,243,236,.55), rgba(251,243,236,.72)),
    var(--theme-bg-image, url('../assets/theme-bg-sakura.jpg'));
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  /* QEYD: "background-attachment:fixed" qəsdən İSTİFADƏ OLUNMUR — mobil
     brauzerlərdə (xüsusən ünvan zolağı gizlənib-çıxdıqca) bu, görünüş
     ölçüsünün "oynamasına" və scroll zamanı donmaya səbəb olur. */
  background-attachment:scroll;
}

/* Səbət/məhsul pəncərəsi açıq olanda arxa fondakı səhifənin scroll olunmasının
   qarşısını alır (JS bu class-ı <html>-ə əlavə/silir). */
html.sg-scroll-lock, html.sg-scroll-lock body{
  overflow:hidden; height:100%;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; background:var(--bg);}
/* Klaviatura ilə fokuslananda brauzerin sərt, kvadrat default konturu əvəzinə
   brendə uyğun, yumşaq-kənarlı fokus halqası (siçan/toxunma ilə klik zamanı
   görünmür — yalnız Tab ilə keçiddə). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; transition:outline-color .15s ease;
}
/* Mobil brauzerlərin standart mavi "toxunma" flaşı əvəzinə hər yerdə eyni
   premium 3D-basma hissi: yüngül kiçilmə + kölgənin "batması". Bütün əsas
   toxunulan elementlər buna qoşulur (aşağıda selektor siyahısına baxın). */
.btn, .menu-tabs button, .nav-links button, .nav-links a, .time-choice-pill,
.add, .js-add-to-cart, button[data-act],
.lang-trigger, .lang-option, #cart-pill, .nav-phone{
  transition:transform .1s ease-out, box-shadow .1s ease-out, filter .1s ease-out,
    border-color .15s ease, color .15s ease, background .15s ease;
}
.btn:active, .menu-tabs button:active,
.time-choice-pill:active, .add:active, .js-add-to-cart:active,
button[data-act]:active, .lang-trigger:active, .lang-option:active, #cart-pill:active,
.nav-phone:active{
  transform:scale(.93) translateY(1px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.28), inset 0 1px 3px rgba(0,0,0,.18);
  filter:brightness(.95);
}
/* Sadə mətn-keçid düymələri (soldakı Menyu/Haqqımızda/Qalereya/Əlaqə) heç bir
   görünən səthi olmadığı üçün yuxarıdakı "batıq qutu" effekti kobud görünür —
   bunlara əvəzinə yalnız yumşaq opaklıq/rəng keçidi tətbiq olunur. */
.nav-links button:active, .nav-links a:active{
  opacity:.55; color:var(--gold);
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---- Scroll-reveal — only activates once a tiny inline head script confirms JS
     is running (adds .js to <html>), so content is never hidden if JS fails. ---- */
.reveal{transition:opacity .6s ease, transform .6s ease;}
.js .reveal{opacity:0; transform:translateY(18px);}
.js .reveal.in-view{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1; transform:none;} }

body{
  margin:0;
  background-color:var(--bg);
  background-repeat:repeat;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg%3E%3Cpath d='M28 130C25 92 42 68 58 58 50 80 56 102 68 114 51 119 34 126 28 130Z' fill='%237FB08D' fill-opacity='0.07'/%3E%3Cpath d='M132 148C122 114 130 84 149 68 142 91 149 114 165 128 147 131 137 141 132 148Z' fill='%23C9A96B' fill-opacity='0.06'/%3E%3Cpath d='M95 34C92 16 102 3 115 0 110 13 114 26 123 33 110 35 100 34 95 34Z' fill='%237FB08D' fill-opacity='0.06'/%3E%3Cpath d='M45 20C41 8 47 -1 57 -3 54 6 57 14 63 19 54 21 48 20 45 20Z' fill='%23C9A96B' fill-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
  color:var(--text);
  font-family:'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  text-wrap:balance;
  margin:0;
  letter-spacing:.01em;
}

a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
}

/* ---------------------------------------------------------------------
 * Başlıq / naviqasiya
 * ------------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:16px 28px;
  max-width:1280px; margin:0 auto;
  transition:padding .25s ease;
}
header.scrolled .nav{padding:11px 28px;}
/* Loqo/ad HƏMİŞƏ bu sabit ölçüdə qalır — ekran daralanda sıxılıb pozulmur,
   deformasiya olmur; yer azaldıqda ƏVƏZİNDƏ digər naviqasiya elementləri
   (aşağıda) hamburger menyusuna keçir. */
.wordmark{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Playfair Display', Georgia, serif; font-weight:700;
  font-size:1.5rem;
  letter-spacing:.02em; text-decoration:none; line-height:1;
  white-space:nowrap; flex-shrink:0;
}
.brand-icon{
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1px var(--line);
}
.wordmark span{color:var(--accent);}

.nav-links{display:flex; gap:1.5rem; align-items:center; list-style:none; margin:0; padding:0;}
.nav-links button, .nav-links a{
  background:none; border:none; cursor:pointer; padding:.3rem 0; font-family:inherit;
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text); opacity:.82; border-bottom:1px solid transparent;
  text-decoration:none; display:inline-block;
  transition:color .3s ease, opacity .3s ease, border-color .3s ease;
}
.nav-links button:hover, .nav-links a:hover{color:var(--gold); opacity:1;}
.nav-links button.active{color:var(--accent); opacity:1; border-bottom-color:var(--gold);}
/* "Sifarişim" bu siyahıda YALNIZ mobil hamburger menyusunda görünür —
   masaüstündə ayrıca .nav-orders-desktop pilli düymə ilə göstərilir. */
.nav-orders-item{display:none;}

.nav-actions{display:flex; align-items:center; gap:.6rem;}
/* Ekran daralanda "Sifarişim"/"Giriş"/müştəri adı YAZISI gizlənir, amma
   ikon (emoji) və düymənin özü öz yerində qalır — nav sıxılıb pozulmasın. */
@media (max-width:1360px){
  .nav-orders-desktop .nav-actions-label{display:none;}
  .nav-orders-desktop{padding-left:.7rem; padding-right:.7rem;}
}
.nav-phone{
  font-weight:600; font-variant-numeric:tabular-nums; font-size:.9rem;
  border:1px solid var(--line); padding:.5rem 1rem; border-radius:var(--radius);
  text-decoration:none; white-space:nowrap; color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.05), 0 2px 4px -2px rgba(0,0,0,.25);
}
.nav-phone:hover:not(:active){border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.05), 0 4px 10px -4px rgba(0,0,0,.35);}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.6rem; cursor:pointer; padding:4px 8px;}

.lang-switch{position:relative; margin-left:auto; margin-right:1rem;}
.lang-trigger{
  display:flex; align-items:center; gap:.4rem;
  background:transparent; border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:.35rem .6rem .35rem .5rem; cursor:pointer;
  transition:border-color .15s;
}
.lang-trigger:hover{border-color:var(--accent);}
.lang-trigger .lang-code{font-size:.76rem; font-weight:700; letter-spacing:.02em;}
.lang-caret{width:9px; height:6px; color:var(--text-soft); transition:transform .15s ease;}
.lang-switch.open .lang-caret{transform:rotate(180deg);}
.flag-wrap{display:inline-flex; width:19px; height:13px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.3); flex-shrink:0;}
.flag{width:100%; height:100%; display:block;}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:.35rem; min-width:110px;
  display:flex; flex-direction:column; gap:.15rem;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.lang-switch.open .lang-menu{opacity:1; transform:translateY(0); pointer-events:auto;}
.lang-option{
  display:flex; align-items:center; gap:.55rem; width:100%;
  background:none; border:none; padding:.45rem .6rem; border-radius:7px;
  font-size:.84rem; font-weight:600; color:var(--text); cursor:pointer; text-align:left;
  transition:background .15s;
}
.lang-option:hover{background:var(--bg);}
.lang-option.active{color:var(--accent);}
.lang-option::after{content:''; margin-left:auto; width:14px; height:14px;}
.lang-option.active::after{
  content:'✓'; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:900; color:var(--accent);
}

/* Loqo sabit ölçüdə qalıb sıxılmadığı üçün, yer azaldıqda ƏVƏZİNDƏ bütün
   mətn-əsaslı naviqasiya (Menyu/Haqqımızda/... + Sifarişim/Giriş/telefon)
   birlikdə hamburger menyusuna keçir — heç vaxt loqo ilə üst-üstə düşmür. */
@media (max-width:1180px){
  /* Hamburger görünüşündə loqo/ad SOLA yapışıq, dil seçici isə lap SAĞ küncdə
     qalıb aralarında böyük boş sahə yaranırdı — indi 3 sütunlu grid ilə loqo
     dəqiq mərkəzdə, hamburger və dil seçici isə iki tərəfdən bərabər
     "kənarda" qalır, nəticə səliqəli və simmetrik görünür. */
  .nav{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem;}
  .wordmark{justify-self:center;}
  .nav-actions{display:none;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--bg-raised); padding:1rem 0 1.4rem; gap:0;
    border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links button, .nav-links a{width:100%; padding:.85rem 28px; text-align:left; border-bottom:1px solid var(--line); border-left:2px solid transparent;}
  .nav-links button.active{border-left-color:var(--gold); border-bottom-color:var(--line);}
  .nav-orders-item{display:block;}
  .nav-toggle{display:block;}
  .nav-orders-desktop, .nav-phone{display:none;}
  .lang-switch{margin-left:.5rem; margin-right:.5rem;}
}
/* Dar telefon ekranlarında (≈480px-dən aşağı) loqo sabit ölçüdə qaldığı üçün
   hamburger + loqo + dil seçici üçün yer azalır — dil seçicini yığcamlaşdırıb
   (bayraq+ox qalır, "AZ" yazısı gizlənir) və boşluqları sıxaraq dil seçicinin
   ekrandan kənara çıxmasının qarşısını alırıq. */
@media (max-width:480px){
  .nav{padding-left:12px; padding-right:12px; gap:.4rem;}
  header.scrolled .nav{padding-left:12px; padding-right:12px;}
  .nav-toggle{padding:4px; font-size:1.4rem;}
  .lang-switch{margin-left:.2rem; margin-right:0;}
  .lang-trigger{padding:.3rem; gap:0; border:none;}
  .lang-trigger .lang-code{display:none;}
  .lang-caret{display:none;}
}

/* ---------------------------------------------------------------------
 * Panellər (Menu / About Us / Gallery / Contact) — tab sistemi
 * ------------------------------------------------------------------- */
.stage{min-height:40vh;}
.panel{display:none;}
.panel.active{display:block; animation:sgFade .45s ease both;}
@keyframes sgFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .panel.active{animation:none;} }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex-shrink:0;
  padding:.9rem 1.6rem; border-radius:var(--radius);
  font-weight:600; font-size:.94rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--accent); color:var(--ink);}
.btn-primary:hover{background:var(--accent-deep);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

.section-head{max-width:640px; margin:0 auto 3.2rem; text-align:center;}
.section-head h2{font-size:clamp(2rem, 3.4vw, 2.7rem); margin-top:.5rem;}

/* ---------------------------------------------------------------------
 * Menu paneli
 * ------------------------------------------------------------------- */
.menu-section{padding:24px 0 80px;}

.menu-tabs-wrap{
  background:var(--bg);
  padding:.8rem 0; margin-bottom:1.8rem;
  border-bottom:1px solid transparent;
}
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  padding:.2rem 28px;
}
.menu-tabs button{
  text-decoration:none; font-size:.85rem; font-weight:700; font-family:inherit;
  padding:.6rem 1.3rem; border-radius:999px; border:1.5px solid var(--line);
  background:var(--bg-raised); color:var(--text); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, transform .15s;
  white-space:nowrap; flex-shrink:0;
}
.menu-tabs button:hover{border-color:var(--accent); color:var(--accent);}
.menu-tabs button.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color:transparent; color:var(--ink);
}
@media (max-width:820px){
  .menu-tabs-wrap{position:relative; margin-left:-28px; margin-right:-28px;}
  .menu-tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding:.2rem 20px;
  }
  .menu-tabs::-webkit-scrollbar{display:none;}
  .menu-tabs button{padding:.55rem 1.1rem; font-size:.8rem;}
}

.menu-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 4.5rem;}
.menu-cols.single{grid-template-columns:1fr; max-width:760px; margin:0 auto;}
@media (max-width:820px){ .menu-cols{grid-template-columns:1fr; gap:0;} }

.menu-cat{margin-bottom:2.6rem; break-inside:avoid;}
.menu-cat h3{
  font-size:1.15rem; color:var(--accent);
  display:flex; align-items:center; gap:.8rem;
  margin-bottom:1.1rem;
  scroll-margin-top:90px;
}
.menu-cat h3::after{content:""; flex:1; height:1px; background:var(--line);}

.menu-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.75rem .6rem; margin:0 -.6rem; border-radius:6px;
  border-bottom:1px dotted var(--line);
  transition:background .15s ease;
}
.menu-item:hover{background:var(--bg-raised);}
.menu-item .thumb{
  width:52px; height:52px; border-radius:6px; object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1px var(--line); mix-blend-mode:multiply;
}
.menu-item .info{flex:1; min-width:0;}
.menu-item .name{font-weight:600; font-size:1rem;}
.menu-item .desc{color:var(--text-soft); font-size:.86rem; margin-top:.15rem;}
.menu-item .price{
  font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; color:var(--gold);
}
.add{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--accent);
  font-size:1.1rem; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.add:hover{background:var(--accent); border-color:var(--accent); color:var(--ink);}

/* Səbətə əlavə ediləndə düymənin özü qısa müddətə "✓ Əlavə edildi" yaşıl
   vəziyyətinə keçir (istifadəçinin göndərdiyi video nümunəsi kimi), sonra
   avtomatik əvvəlki halına qayıdır. */
.add.just-added, .js-add-to-cart.just-added{
  animation:sgAddedPop .38s cubic-bezier(.34,1.56,.64,1);
  background:linear-gradient(135deg, #3FBE7A, #2E9C63) !important;
  border-color:transparent !important; color:#fff !important;
  cursor:default;
}
.add.just-added{width:auto; padding:0 .55rem; border-radius:999px; gap:.3rem;}
.just-added-icon{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
}
.js-add-to-cart.just-added{display:inline-flex; align-items:center; justify-content:center; gap:.45rem;}
@keyframes sgAddedPop{
  0%{transform:scale(1);} 40%{transform:scale(1.14);} 100%{transform:scale(1);}
}
/* Səbət düyməsi (aşağı sağda) yeni məhsul əlavə olunanda yüngül "bump" edir */
#cart-pill.bump{animation:sgCartBump .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes sgCartBump{
  0%{transform:scale(1);} 45%{transform:scale(1.16) rotate(-4deg);} 100%{transform:scale(1) rotate(0);}
}
/* Məhsul şəkli (və ya yoxdursa kiçik nöqtə) düymədən səbət ikonuna doğru "uçur" —
   pop-up tərzli vizual "səbətə düşmə" effekti. */
.sg-fly-item{
  position:fixed; z-index:150; top:0; left:0; border-radius:50%;
  object-fit:cover; pointer-events:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.5);
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  will-change:transform, opacity;
}
.sg-fly-item.fly{
  animation:sgFlyToCart .75s cubic-bezier(.5,-.2,.7,1) forwards;
}
@keyframes sgFlyToCart{
  0%{transform:translate(0,0) scale(1) rotate(0); opacity:1;}
  65%{opacity:1;}
  100%{transform:translate(var(--fly-dx), var(--fly-dy)) scale(.15) rotate(18deg); opacity:.25;}
}
@media (prefers-reduced-motion: reduce){
  .sg-fly-item.fly{animation:none; display:none;}
}
/* Sifariş uğurla göndəriləndə görünən yaşıl "tik" nişanı — dairə pop-in olur,
   sonra SVG xətti "çəkilərək" tamamlanır. */
.success-check{
  width:64px; height:64px; margin:0 auto .9rem; border-radius:50%;
  background:linear-gradient(135deg, #3FBE7A, #2E9C63);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(46,156,99,.55);
  animation:sgCheckPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.success-check svg{width:34px; height:34px; overflow:visible;}
.success-check svg path{
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:28; stroke-dashoffset:28;
  animation:sgCheckDraw .45s ease-out .25s both;
}
@keyframes sgCheckPop{
  0%{transform:scale(0); opacity:0;} 60%{transform:scale(1.12); opacity:1;} 100%{transform:scale(1);}
}
@keyframes sgCheckDraw{ to{stroke-dashoffset:0;} }
/* Sifariş təsdiqləndikdə ekranı bəzəyən rəngli konfeti effekti üçün canvas */
#confetti-canvas{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:9999;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .success-check{animation:none;}
  .success-check svg path{animation:none; stroke-dashoffset:0;}
  #confetti-canvas{display:none;}
}

.menu-item, .carousel-slide{cursor:pointer;}

/* ---------------------------------------------------------------------
 * Tövsiyə olunanlar karuseli
 * ------------------------------------------------------------------- */
.promo-carousel{padding:34px 0 12px;}
.carousel-shell{
  position:relative; border-radius:26px; overflow:hidden;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(140deg, var(--bg-raised) 0%, var(--bg-raised) 50%, var(--bg) 100%);
  box-shadow:
    0 36px 70px -28px rgba(0,0,0,.55),
    0 14px 30px -14px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.carousel-shell::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6; z-index:0;
  background-repeat:repeat; background-size:130px 130px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.07'%3E%3Cpath d='M22 100C19 66 33 48 46 42 39 60 44 78 54 88 40 92 27 98 22 100Z'/%3E%3Cpath d='M100 112C91 84 98 61 112 49 107 68 112 87 124 99 110 101 103 108 100 112Z'/%3E%3Cpath d='M70 30C68 15 76 5 86 2 82 12 85 22 92 28 82 29 74 30 70 30Z'/%3E%3C/g%3E%3C/svg%3E");
}
.carousel-viewport{overflow:hidden; position:relative; z-index:1;}
.carousel-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.carousel-slide{position:relative; flex:0 0 100%; aspect-ratio:16/9;}
.slide-media{position:absolute; inset:0; z-index:1; background:var(--bg-raised);}
.slide-media img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.slide-media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:7rem; opacity:.5;}
.slide-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.2rem 2.6rem 1.9rem;}
.slide-info .badge{
  display:inline-block; background:var(--accent); color:var(--ink); font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:.35rem .8rem; border-radius:999px; margin-bottom:1.1rem;
}
/* Ağ/açıq fonlu fotolarda da, rəngli/tünd fotolarda da eyni dərəcədə oxunaqlı
   olsun deyə ad öz "şüşə" (glass) fonunu daşıyır — əvvəlki tam-şəkil qara
   fade effekti əvəzinə YALNIZ mətnin arxasında kiçik, yumşaq bir fon. */
.slide-info .name{
  display:inline-block;
  font-family:'Cormorant Garamond',serif; font-size:2rem; line-height:1.15; font-weight:700;
  margin:0 0 .9rem; color:#fff;
  padding:.28rem .85rem; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(12,9,8,.52);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.slide-foot{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;}
/* Qiymət daha "gözə çarpan" olsun deyə: böyüdülmüş ölçü, isti qızılı ton,
   parıltılı kölgə + öz şüşə fonu — istənilən foto arxa planında seçilir. */
.slide-foot .price{
  display:inline-flex; align-items:center;
  font-size:1.95rem; font-weight:900; font-family:'Cormorant Garamond',serif;
  color:#FFD877; letter-spacing:.01em;
  padding:.3rem 1.05rem; border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03)), rgba(20,14,10,.55);
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 26px -6px rgba(255,199,77,.65);
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 16px rgba(255,201,77,.45);
}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-raised); color:var(--text); font-size:1.6rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5); transition:border-color .15s, color .15s, transform .15s;
}
.carousel-arrow:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-50%) scale(1.06);}
.carousel-arrow:active{transform:translateY(-50%) scale(.92); box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
.carousel-arrow.prev{left:18px;}
.carousel-arrow.next{right:18px;}
/* İstək üzərinə tamamilə ləğv edilib — nə mobil, nə PC-də göstərilmir, altında
   ayrıca boşluq da qalmasın deyə "display:none" (reserved space yaratmır). */
.carousel-dots{display:none;}

@media (max-width:820px){
  .promo-carousel{padding:16px 0 8px;}
  .carousel-shell{border-radius:18px;}
  .carousel-slide{aspect-ratio:16/9;}
  .slide-info{padding:.8rem 1rem .7rem;}
  .slide-info .badge{font-size:.58rem; padding:.24rem .55rem; margin-bottom:.35rem;}
  .slide-info .name{font-size:.95rem; line-height:1.2; margin-bottom:.4rem; padding:.2rem .55rem; border-radius:8px;}
  .slide-foot{justify-content:space-between; gap:.6rem;}
  .slide-foot .price{font-size:1.05rem; padding:.2rem .65rem; border-radius:8px;}
  .slide-foot .btn{padding:.4rem .8rem; font-size:.72rem;}
  /* Oxlar əvəzinə barmaqla sürüşdürmə (swipe) — mobil ekranda daha təbii və
     kifayət qədər yer yoxdur ki, oxlar mətnlə üst-üstə düşmədən sığsın. */
  .carousel-arrow{display:none;}
}
/* ---------------------------------------------------------------------
 * About Us paneli
 * ------------------------------------------------------------------- */
.about-wrap{padding:64px 0 0;}
.about-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;
  padding-bottom:70px;
}
@media (max-width:820px){ .about-hero{grid-template-columns:1fr; text-align:center;} }
.about-hero h2{font-size:clamp(2.3rem,5vw,3.4rem); line-height:1.1;}
.about-hero h2 em{color:var(--accent); font-style:italic;}
.about-hero p{color:var(--text-soft); font-size:1.02rem; max-width:46ch; margin-top:1.4rem;}
@media (max-width:820px){ .about-hero p{margin-left:auto; margin-right:auto;} }
.about-logo{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  padding:1.5rem;
}
.about-logo img{width:100%; max-width:340px; border-radius:6px; box-shadow:var(--shadow);}
.concept-band{
  background:var(--bg-raised);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:70px 0; margin:0 -28px;
}
.concept-inner{max-width:760px; margin:0 auto; text-align:center; padding:0 28px;}
.concept-inner .eyebrow{color:var(--gold);}
.concept-inner h2{font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:1.2rem;}
.concept-inner p{font-size:1.05rem; line-height:1.75; color:var(--text-soft);}
.concept-inner p + p{margin-top:1rem;}
.copyright-note{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.6rem !important;
  font-size:.78rem; color:var(--text-soft);
}
.copyright-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; border:1px solid var(--text-soft);
  font-size:.7rem; line-height:1; flex-shrink:0;
}

/* ---------------------------------------------------------------------
 * Gallery paneli
 * ------------------------------------------------------------------- */
.gallery-wrap{padding:64px 0 90px;}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery-tile{
  position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); display:flex; align-items:flex-end;
}
.gallery-tile img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.gallery-tile::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse at 30% 25%, rgba(244,240,226,.12), transparent 55%),
    linear-gradient(160deg, var(--tile-a, #1F3B29), var(--tile-b, #12261A));
}
.gallery-tile .leaf{
  position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M20 100C17 68 33 46 52 38 44 58 50 78 62 90 46 94 30 98 20 100Z' fill='%23F4F0E2' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
.gallery-tile-photo::before{content:none;}
.gallery-tile-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent 55%);
  pointer-events:none;
}
.gallery-tile .cap{
  position:relative; z-index:1; padding:1.1rem 1.2rem;
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.gallery-tile .cap span{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.8; margin-top:.3rem; font-style:normal;
}

/* ---------------------------------------------------------------------
 * Contact paneli
 * ------------------------------------------------------------------- */
.contact-wrap{padding:64px 0 100px; display:flex; justify-content:center;}
.contact-card{
  width:100%; max-width:900px; background:var(--bg-raised); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:3.2rem 3.4rem;
}
@media (max-width:640px){ .contact-card{padding:2rem 1.5rem;} }
.contact-card > .section-head{margin-bottom:2.4rem;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:2.2rem;} }
.info-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.3rem;}
.info-list li{display:flex; gap:1rem; align-items:flex-start;}
.info-list .k{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold);
  width:88px; flex-shrink:0; padding-top:.2rem; font-weight:700;
}
.info-list .v{font-size:1.02rem;}
.hours-list{list-style:none; margin:1.4rem 0 0; padding:1rem 1.2rem; background:var(--bg); border-radius:var(--radius); display:flex; flex-direction:column; gap:.5rem;}
.hours-list li{display:flex; justify-content:space-between; font-size:.88rem; gap:1rem;}
.hours-list .day{color:var(--text-soft);}
.hours-list .time{font-variant-numeric:tabular-nums; font-weight:600;}
.social-label{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); margin:1.4rem 0 .6rem;
}
.social-row{display:flex; gap:.7rem;}
.social-row a{
  width:40px; height:40px; color:var(--text); background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:transform .15s, opacity .15s;
}
.social-row a img{width:100%; height:100%; object-fit:contain;}
.social-row a:hover{transform:translateY(-2px); opacity:.85;}

.map-embed{
  position:relative; min-height:260px; height:100%; border-radius:var(--radius);
  border:1px solid var(--line); overflow:hidden; background:var(--bg);
}
.map-embed iframe{width:100%; height:100%; min-height:260px; border:0; display:block; filter:saturate(.85);}
/* Google-un öz "embed" xəritəsində xüsusi marker qoymaq JS API + ödənişli
   açar tələb edir — bunun əvəzinə loqomuzu birbaşa nişanın (pin) yerinə,
   xəritənin mərkəzinin bir az yuxarısına (pinin ucu mərkəzdə olsun deyə)
   üst-üstə qoyuruq: klikə/sürüşdürməyə mane olmasın deyə pointer-events yoxdur. */
.map-embed-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -100%);
  z-index:1; pointer-events:none; display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.map-embed-pin img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2.5px solid #fff; display:block;
}
.map-embed-pin::after{
  content:''; width:0; height:0; margin-top:-4px;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:11px solid #fff;
}
.map-embed-link{
  position:absolute; left:.7rem; bottom:.7rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--bg-raised); color:var(--text); text-decoration:none;
  font-size:.8rem; font-weight:700; padding:.5rem .8rem; border-radius:8px;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:border-color .15s, color .15s;
}
.map-embed-link:hover{border-color:var(--accent); color:var(--accent);}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */
footer{
  background:var(--bg-raised-2); color:var(--text-soft);
  padding:36px 0; position:relative; border-top:1px solid var(--line);
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.82rem;
}
.footer-row a{text-decoration:none; transition:color .15s;}
.footer-row a:hover{color:var(--accent);}

/* ---------------------------------------------------------------------
 * Səbət / sifariş
 * ------------------------------------------------------------------- */
#cart-pill{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:none; align-items:center; gap:.6rem;
  background:var(--accent); color:var(--ink);
  border:none; border-radius:999px; padding:.85rem 1.3rem;
  font-weight:700; font-size:.92rem; cursor:pointer;
  box-shadow:var(--shadow);
}
#cart-pill .count{
  background:rgba(18,38,26,.25); border-radius:999px; padding:.1rem .55rem; font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
#cart-drawer{
  position:fixed; inset:auto 0 0 0; z-index:70;
  background:var(--bg-raised); border-top:1px solid var(--line);
  border-radius:14px 14px 0 0; box-shadow:var(--shadow);
  max-height:78vh; overflow:auto;
  transform:translateY(110%); transition:transform .22s ease;
}
#cart-drawer.open{transform:translateY(0);}
#cart-drawer .inner{max-width:640px; margin:0 auto; padding:1.6rem 1.6rem 2rem;}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.drawer-head h3{font-size:1.2rem;}
.drawer-close{background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--text-soft);}
#cart-list{list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.7rem;}
#cart-list li{display:flex; justify-content:space-between; gap:1rem; font-size:.94rem; border-bottom:1px dotted var(--line); padding-bottom:.6rem;}
#cart-list .qty-controls{display:flex; align-items:center; gap:.5rem;}
#cart-list .qty-controls button{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text);
  cursor:pointer; line-height:1;
}
.cart-total{display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; padding-top:.4rem; margin-bottom:1.3rem;}
.cart-empty{color:var(--text-soft); font-size:.94rem; padding:1rem 0;}

.tip-block{margin:1.2rem 0;}
.tip-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); font-weight:700; margin-bottom:.6rem;}
.tip-options{display:flex; flex-wrap:wrap; gap:.5rem;}
.tip-btn{
  border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:999px; padding:.45rem 1rem; font-size:.86rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.tip-btn:hover{border-color:var(--accent); color:var(--accent);}
.tip-btn.active{background:var(--accent); border-color:var(--accent); color:var(--ink);}
#tip-custom-input{margin-top:.7rem;}

.cart-totals{border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:.8rem 0; margin:1rem 0;}
.cart-totals .row{display:flex; justify-content:space-between; font-size:.92rem; padding:.25rem 0; color:var(--text-soft);}
.cart-totals .row.total{font-weight:700; font-size:1.1rem; color:var(--text); padding-top:.5rem;}

.service-block{margin-bottom:1.2rem;}
.service-options{display:flex; flex-direction:column; gap:.5rem;}
.service-options label{display:flex; align-items:center; gap:.6rem; font-size:.92rem; cursor:pointer;}
.service-options input{width:auto;}

.field-block{margin-bottom:.9rem;}
.field-block label{display:block; font-size:.78rem; font-weight:700; color:var(--text-soft); margin-bottom:.35rem;}
.field-block input, .field-block select, .field-block textarea{
  width:100%; padding:.65rem .8rem; border-radius:6px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font-size:.94rem; font-family:inherit;
}
.field-block textarea{resize:vertical; min-height:2.6em;}
.time-choice-row{display:flex; gap:.6rem; margin-bottom:.7rem; flex-wrap:wrap;}
.time-choice-pill{
  position:relative; cursor:pointer; display:inline-flex !important; align-items:center; gap:.4rem;
  padding:.55rem 1.1rem; border-radius:999px; border:1.5px solid var(--line);
  background:var(--bg-raised); font-size:.84rem; font-weight:700; color:var(--text);
  margin-bottom:0 !important; transition:border-color .2s, color .2s, background .2s;
}
.time-choice-pill input{position:absolute; opacity:0; width:0; height:0;}
.time-choice-pill.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color:transparent; color:var(--ink);
}
.time-manual-row{display:flex; gap:.5rem;}
.time-manual-row select{width:auto; flex:1;}
.order-error{
  background:rgba(220,90,80,.14); color:#F3A79E; border:1px solid rgba(220,90,80,.35);
  border-radius:6px; padding:.7rem 1rem; font-size:.86rem; margin-top:.8rem;
}
.btn-block{display:flex; width:100%; justify-content:center; margin-top:.6rem;}
#cart-success-view h3{font-family:'Cormorant Garamond',serif; font-size:1.4rem;}
#overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:65;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#overlay.open{opacity:1; pointer-events:auto;}

#add-toast{
  position:fixed; left:50%; bottom:22px; z-index:80;
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg-raised-2); color:var(--text); border:1px solid var(--line);
  padding:.75rem 1.2rem; border-radius:999px; box-shadow:var(--shadow);
  font-size:.9rem; font-weight:600; white-space:nowrap;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
#add-toast.show{transform:translate(-50%, 0); opacity:1;}
.add-toast-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--ink);
  font-size:.72rem; flex-shrink:0;
}

.product-modal{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .16s ease;
  perspective:1200px;
}
.product-modal.open{opacity:1; pointer-events:auto;}
/* Məhsul pəncərəsi açılanda arxa fondakı bütün sayt bulanıqlaşır ("motion
   blur" hissi). QEYD: bulanıqlığın ÖZÜNÜ (blur radiusunu) animasiya etmirik —
   bir çox brauzer/mobil GPU bunu hamar deyil, "kəskin" (bir anda) tətbiq edir;
   əvəzinə bulanıqlıq həmişə sabitdir, ATA elementin (.product-modal) opacity
   keçidi bütün bulanıq arxa fonu yumşaq şəkildə görünən/yox edir. */
.product-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
/* "Glow Up / Glow Down" — məhsul üzərinə toxunanda pəncərə premium 3D
   "böyüyərək açılma" effekti ilə gəlir (yüngül geriyə sıçrayış + qızılı
   parıltı), bağlananda eyni keçidlə tərsinə "kiçilib itir". */
.product-modal-card{
  position:relative; z-index:1; background:var(--bg-raised); border-radius:18px;
  /* Ekran ölçüsünə uyğun böyüyür — kiçik mobil ekranda demək olar tam en,
     böyük masaüstü ekranda daha geniş kart (əvvəlki sabit 460px-dən böyük). */
  max-width:min(640px, 94vw); width:100%; max-height:92vh; overflow:auto;
  transform:scale(.7) translateY(50px) rotateX(10deg); transform-origin:center bottom;
  box-shadow:0 0 0 1px transparent, 0 0 0 rgba(0,0,0,0);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease;
}
.product-modal.open .product-modal-card{
  transform:scale(1) translateY(0) rotateX(0deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
    0 30px 70px -20px rgba(0,0,0,.6),
    0 0 55px -8px color-mix(in srgb, var(--gold) 55%, transparent);
}
.product-modal-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.3rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.product-modal-close:active{transform:scale(.88);}
/* Sabit 4:3 qutu real şəkillərin nisbətinə (adətən 16:9-a yaxın, daha enli)
   uyğun gəlmirdi və üstdə/altda boş rəngli zolaqlar yaradırdı (hər ölçüdə,
   təkcə mobildə deyil) — indi qutu şəklin öz təbii ölçüsünə uyğunlaşır,
   heç bir boş sahə qalmır. */
.product-modal-media{
  width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-modal-media img{width:100%; height:auto; max-height:72vh; object-fit:contain; display:block; cursor:zoom-in;}
.product-modal-media .ph{font-size:5rem; opacity:.5; padding:2.5rem 0;}
.product-modal-body{padding:1.6rem 1.6rem 1.8rem;}
.product-modal-body h3{font-family:'Cormorant Garamond',serif; font-size:1.4rem; margin:0 0 .6rem;}
.product-modal-body p{color:var(--text-soft); font-size:.96rem; margin:0 0 1.3rem;}
.product-modal-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.product-modal-foot .price{font-size:1.4rem; font-weight:800; font-family:'Cormorant Garamond',serif; color:var(--gold);}

/* Şəklə toxunanda tam-ekran açılan lightbox (yalnız foto + bağlama düyməsi) */
.photo-lightbox{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(6,4,3,.94);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.photo-lightbox.open{opacity:1; pointer-events:auto;}
.photo-lightbox img{
  max-width:96vw; max-height:94vh; object-fit:contain; border-radius:6px;
  transform:scale(.92); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.photo-lightbox.open img{transform:scale(1);}
.photo-lightbox-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, background .15s ease;
}
.photo-lightbox-close:hover{background:rgba(255,255,255,.24);}
.photo-lightbox-close:active{transform:scale(.88);}

/* ---------------------------------------------------------------------
 * Rəy pəncərəsi (5 ulduz) — track.php-də server tərəfindən, digər
 * səhifələrdə (index.php) js/order-watcher.js tərəfindən proqramla
 * yaradılır; hər ikisi bu EYNİ stilləri istifadə edir.
 * ------------------------------------------------------------------- */
.review-popup-overlay{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.6);
}
.review-popup-overlay.show{display:flex;}
.review-popup-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px;
  padding:2rem; max-width:380px; width:100%; text-align:center; box-shadow:var(--shadow);
  animation:sg-review-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sg-review-pop{0%{transform:scale(.85); opacity:0;} 100%{transform:scale(1); opacity:1;}}
.review-popup-icon{font-size:2.6rem; margin-bottom:.4rem;}
.review-popup-card h3{font-family:'Playfair Display',serif; font-size:1.35rem; margin-bottom:.4rem;}
.review-popup-card p{color:var(--text-soft); font-size:.9rem; margin-bottom:1rem;}
.review-stars{font-size:2.2rem; letter-spacing:.15em; margin-bottom:1rem; cursor:pointer;}
.review-stars span{color:var(--line); transition:color .15s, transform .15s;}
.review-stars span.filled{color:var(--gold);}
.review-stars span:hover{transform:scale(1.15);}
.review-popup-card textarea{
  width:100%; padding:.65rem .8rem; border-radius:6px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font-size:.9rem; font-family:inherit;
  resize:vertical; min-height:3em; margin-bottom:1rem;
}
.review-popup-actions{display:flex; gap:.6rem;}
.review-popup-actions .btn{flex:1; justify-content:center;}
.review-thanks{color:var(--accent); font-weight:700; padding:1rem 0;}

/* Sifariş statusu dəyişəndə hər hansı səhifədə çıxan kiçik bildiriş (toast) —
 * js/order-watcher.js tərəfindən yaradılır. */
.sg-status-toast{
  position:fixed; left:50%; bottom:22px; z-index:410;
  display:flex; align-items:center; gap:.6rem;
  background:var(--bg-raised); color:var(--text); border:1px solid var(--accent);
  padding:.8rem 1.2rem; border-radius:999px; box-shadow:var(--shadow);
  font-size:.88rem; font-weight:600; white-space:nowrap; cursor:pointer;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
  max-width:90vw; overflow:hidden; text-overflow:ellipsis;
}
.sg-status-toast.show{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.sg-status-toast-icon{flex-shrink:0; font-size:1.1rem;}

::selection{background:var(--accent); color:var(--ink);}

/* ---------------------------------------------------------------------
 * Giriş / Qeydiyyat — vahid "blade" keçidli panel (login.php + register.php,
 * bax includes/auth-shell.php). İki "səhnə" (signin/register) üfüqi track-də
 * yan-yana durur, mode dəyişəndə track sürüşür, üstündən qızılı "blade"
 * zolağı bir dəfə keçir (dekorativ). Hər səhnə öz "brend" (tünd) və "forma"
 * (bir az açıq) yarısına bölünür.
 * ------------------------------------------------------------------- */
.auth-body{background:var(--bg); padding-bottom:0 !important;}
.auth-page{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.4rem 1.2rem;}
.auth-back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.6rem;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.1rem;
  color:var(--text); text-decoration:none; opacity:.88;
}
.auth-back:hover{color:var(--gold); opacity:1;}
.auth-band{
  position:relative; overflow:hidden; width:100%; max-width:880px;
  border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow);
  background:var(--bg-raised);
}
.auth-track{display:flex; width:200%; transition:transform .55s cubic-bezier(.65,0,.35,1);}
.auth-band[data-mode="signin"] .auth-track{transform:translateX(0);}
.auth-band[data-mode="register"] .auth-track{transform:translateX(-50%);}
.auth-scene{display:flex; width:50%; flex-wrap:wrap;}
/* "Qeydiyyatdan keç" səhnəsi güzgülənib: ağ (form) tərəf SOLDA, rəngli (brand)
   tərəf SAĞDA göstərilir — "Daxil ol" səhnəsi (rəngli sol, ağ sağ) toxunulmadan
   qalır, yalnız qeydiyyat fərqli tərəfdən başlasın deyə. */
.auth-scene-register{flex-direction:row-reverse;}
.auth-side{flex:1 1 320px; padding:3rem 2.6rem;}
.auth-side-brand{
  background:linear-gradient(160deg, var(--bg-raised-2), var(--ink) 120%);
  color:var(--text); display:flex; align-items:center;
}
.auth-brand-inner{max-width:320px;}
.auth-kicker{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--gold);}
.auth-side-brand h2{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.1rem; line-height:1.15;
  margin:.6rem 0 .8rem; color:var(--text);
}
.auth-side-brand h2 em{color:var(--gold); font-style:italic;}
.auth-side-brand p{color:var(--text-soft); font-size:.94rem; line-height:1.6; margin:0;}
.auth-side-form{background:var(--bg-raised);}
.auth-side-form h1{font-size:1.5rem; margin-bottom:1.3rem;}
.auth-submit{width:100%; justify-content:center; margin-top:.4rem;}
.auth-switch{text-align:center; margin-top:1.2rem; font-size:.86rem; color:var(--text-soft);}
.auth-switch-btn{background:none; border:none; padding:0; font:inherit; font-weight:700; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.auth-switch-btn:hover{color:var(--gold);}
.auth-blade{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:2;
  background:linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--gold) 55%, transparent) 48%, transparent 64%);
  filter:blur(14px);
}
/* "Daxil ol" tərəfə keçid — əvvəlki kəskin "lazer xətti" görünüşü əvəzinə
   geniş, tədricən açılıb-qapanan, şüşəvari (glassmorphism) yumşaq işıq
   dalğası: heç bir kəskin/parlaq nöqtə yoxdur, hər tonun arası geniş açılıb
   (bütün rəng-temalarında, açıq (sakura və s.) VƏ tünd temalarda eyni
   dərəcədə görünsün deyə), üstəlik özü də yüngül bulanıqlaşdırılıb (blur). */
.auth-blade.sweep-to-signin{
  animation:authSweepToSignin .95s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(100deg,
    transparent 8%,
    color-mix(in srgb, var(--gold) 20%, transparent) 32%,
    color-mix(in srgb, var(--gold) 34%, transparent) 45%,
    rgba(255,255,255,.4) 50%,
    color-mix(in srgb, var(--gold) 34%, transparent) 55%,
    color-mix(in srgb, var(--gold) 20%, transparent) 68%,
    transparent 92%);
}
/* "Qeydiyyatdan keç" tərəfə keçid — eyni yumşaq üslub, meşə-yaşıl ton. */
.auth-blade.sweep-to-register{
  animation:authSweepToRegister .95s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(100deg,
    transparent 8%,
    color-mix(in srgb, var(--forest) 20%, transparent) 32%,
    color-mix(in srgb, var(--forest) 34%, transparent) 45%,
    rgba(255,255,255,.4) 50%,
    color-mix(in srgb, var(--forest) 34%, transparent) 55%,
    color-mix(in srgb, var(--forest) 20%, transparent) 68%,
    transparent 92%);
}
@keyframes authSweepToSignin{
  0%{opacity:0; transform:translateX(42%);}
  18%{opacity:1;}
  75%{opacity:.5;}
  100%{opacity:0; transform:translateX(-42%);}
}
@keyframes authSweepToRegister{
  0%{opacity:0; transform:translateX(-42%);}
  18%{opacity:1;}
  75%{opacity:.5;}
  100%{opacity:0; transform:translateX(42%);}
}
@media (max-width:760px){
  .auth-scene, .auth-scene-register{flex-wrap:nowrap; flex-direction:column;}
  .auth-side{flex:none; width:100%; padding:2rem 1.6rem;}
  .auth-side-brand{padding-bottom:1.4rem;}
  .auth-brand-inner{max-width:none;}
  .auth-side-brand h2{font-size:1.7rem;}
}
@media (prefers-reduced-motion: reduce){
  .auth-track{transition:none;}
  .auth-blade.sweep-to-signin, .auth-blade.sweep-to-register{animation:none;}
}