/* ============================================================
   0. TOKENS
============================================================ */
:root{
  --ink:#0c0b0d;
  --ink-2:#161418;
  --ink-3:#211e24;
  --paper:#faf8f3;
  --paper-2:#f2ede3;
  --gold:#c6a15c;
  --gold-light:#e9d6a6;
  --gold-deep:#8b6f3d;
  --gold-glow: rgba(198,161,92,.35);
  --cream:#f5f1e8;
  --text-dark:#1b1a1d;
  --muted:#948e83;
  --muted-dark:#b9b2a4;
  --line: rgba(198,161,92,.25);
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
  --font-display: "Bodoni Moda", "Playfair Display", serif;
  --font-body: "Manrope", -apple-system, sans-serif;
  --header-h: 74px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  opacity:0;
  transition: opacity .9s ease;
}
body.loaded{ opacity:1; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input[type="checkbox"], input[type="radio"]{accent-color:var(--gold);}

section[id]{ scroll-margin-top: var(--header-h); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   1. UTILITIES
============================================================ */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }
.eyebrow{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:700; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}
.section-head{ margin-bottom:36px; }
.section-head h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem, 6vw, 3rem);
  line-height:1.08; margin-top:10px; letter-spacing:-.01em;
}
.section-head p.lede{ margin-top:14px; color:var(--muted); font-size:1rem; max-width:52ch; line-height:1.65; }
.on-dark .section-head p.lede{ color:var(--muted-dark); }
.on-dark .eyebrow{ color:var(--gold-light); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius: var(--radius); position:relative; overflow:hidden; white-space:nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .3s, background .3s;
}
.btn::before{
  content:""; position:absolute; inset:0; transform:translateX(-105%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .6s var(--ease);
}
.btn:hover::before{ transform:translateX(105%); }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep)); color:#1a1408; box-shadow:0 10px 30px -8px var(--gold-glow); }
.btn-gold:hover{ box-shadow:0 14px 38px -6px var(--gold-glow); transform:translateY(-2px); }
.btn-outline{ background:transparent; border:1px solid var(--line); color:inherit; }
.btn-outline:hover{ border-color:var(--gold); background:rgba(198,161,92,.08); }
.btn-line{ background:transparent; color:var(--gold); padding:10px 0; letter-spacing:.14em; }
.btn-line i{ transition:transform .3s var(--ease); }
.btn-line:hover i{ transform:translateX(5px); }
.btn-block{ width:100%; }
.btn-call{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:14px 18px; border-radius:var(--radius); font-weight:700; letter-spacing:.08em;
  font-size:.82rem; text-transform:uppercase; background:var(--ink); color:var(--gold-light);
  border:1px solid var(--gold-deep); transition:all .35s var(--ease);
}
.btn-call:hover{ background:var(--gold); color:#1a1408; box-shadow:0 12px 30px -8px var(--gold-glow); transform:translateY(-2px); }
.btn-call i{ font-size:1rem; }

/* Svejarka AI CTAs — meant to stand out from the other, plainer buttons:
   an idle pulsing glow (not just on hover) plus a small bobbing "AI" badge
   that overlaps the button's corner. Both the glow and the badge live on
   .btn-ai-wrap (a plain sibling wrapper), NOT on the <a class="btn"> itself
   — .btn has overflow:hidden for its own shimmer sweep, which was silently
   clipping the glow's box-shadow to nothing no matter how strong we made it. */
.btn-ai-wrap{
  position:relative; display:inline-flex; border-radius:var(--radius);
  animation: aiGlowPulse 1.3s ease-in-out infinite;
}
@keyframes aiGlowPulse{
  0%, 100%{ box-shadow:0 10px 30px -8px var(--gold-glow); }
  50%{ box-shadow:0 14px 50px -2px var(--gold-glow), 0 0 0 11px rgba(198,161,92,.34); }
}
.ai-badge{
  position:absolute; top:-9px; right:-9px; z-index:3; pointer-events:none;
  display:flex; align-items:center; justify-content:center; min-width:26px; height:20px; padding:0 6px;
  background:var(--ink); color:var(--gold-light); border:1px solid var(--gold);
  border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  animation: aiBadgeBob 1.3s ease-in-out infinite;
}
@keyframes aiBadgeBob{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-5px) scale(1.14); } }
.ai-arrow{
  position:absolute; top:50%; transform:translateY(-50%); font-size:1.15rem; color:var(--gold);
  pointer-events:none; z-index:2; text-shadow:0 0 10px var(--gold-glow);
}
.ai-arrow-left{ right:100%; margin-right:10px; animation: aiArrowNudgeLeft 1.3s ease-in-out infinite; }
.ai-arrow-right{ left:100%; margin-left:10px; animation: aiArrowNudgeRight 1.3s ease-in-out infinite; }
@keyframes aiArrowNudgeLeft{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(6px); } }
@keyframes aiArrowNudgeRight{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(-6px); } }
.hero-cta-ai{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:0 30px; }
.hero-cta-ai-tag{
  font-size:.7rem; letter-spacing:.03em; color:var(--gold-light); opacity:.85;
  max-width:210px; line-height:1.35; text-align:center;
}
.pill-toggle{ display:inline-flex; background:var(--ink-2); border-radius:40px; padding:4px; gap:4px; }
.pill-toggle button{
  padding:10px 22px; border-radius:40px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-dark); transition:all .3s var(--ease);
}
.pill-toggle button.active{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1408; }

.tag{
  display:inline-block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:5px 12px; border:1px solid var(--gold-deep); color:var(--gold); border-radius:20px;
}

.reveal{ opacity:0; transform:translateY(42px); transition:opacity 1.15s cubic-bezier(.16,.84,.44,1), transform 1.15s cubic-bezier(.16,.84,.44,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(42px); transition:opacity 1.15s cubic-bezier(.16,.84,.44,1), transform 1.15s cubic-bezier(.16,.84,.44,1); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){transition-delay:.08s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.24s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.4s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.56s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.72s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.88s;}

.section{ padding:64px 0; }
.section.dark, .on-dark{ background:var(--ink); color:var(--cream); }
.section.paper2{ background:var(--paper-2); }

/* ============================================================
   2. HEADER + NAV
============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:rgba(12,11,13,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(198,161,92,.16); transition:padding .35s var(--ease), background .35s var(--ease);
}
.site-header.shrink{ padding:10px 20px; background:rgba(12,11,13,.92); }
.brand{ display:flex; align-items:center; gap:10px; color:var(--cream); }
.brand .mark{
  width:34px; height:34px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.85rem;
  flex-shrink:0;
}
.brand .word{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.02em; line-height:1; }
.brand .word small{ display:block; font-family:var(--font-body); font-size:.55rem; letter-spacing:.32em; color:var(--gold-light); font-weight:700; margin-top:3px; }

.desktop-nav{ display:none; }
.desktop-nav ul{ display:flex; gap:28px; align-items:center; }
.desktop-nav a{
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-dark);
  position:relative; padding:6px 0; transition:color .3s;
}
.desktop-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.desktop-nav a:hover, .desktop-nav a.active{ color:var(--gold-light); }
.desktop-nav a:hover::after, .desktop-nav a.active::after{ width:100%; }

.burger{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-deep); border-radius:50%; color:var(--gold-light); font-size:1rem;
}

.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:1100;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.mobile-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(320px,84vw); z-index:1200;
  background:var(--ink); border-left:1px solid var(--line); padding:26px 26px 40px;
  transform:translateX(105%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer .drawer-top{ display:flex; justify-content:flex-end; margin-bottom:30px; }
.drawer-close{ width:38px; height:38px; border:1px solid var(--gold-deep); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-light); }
.mobile-drawer nav ul{ display:flex; flex-direction:column; gap:6px; }
.mobile-drawer nav a{
  display:flex; align-items:center; gap:12px; padding:14px 6px; color:var(--cream);
  font-family:var(--font-display); font-size:1.25rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-drawer nav a.active{ color:var(--gold-light); }
.mobile-drawer nav a i{ color:var(--gold); width:20px; }
.drawer-cta{ margin-top:28px; }
.drawer-foot{ margin-top:auto; padding-top:26px; color:var(--muted-dark); font-size:.78rem; line-height:1.8; }
.drawer-foot a{ color:var(--gold-light); }

/* ============================================================
   3. HERO
============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(198,161,92,.16), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(198,161,92,.12), transparent 50%),
    linear-gradient(180deg,#0c0b0d 0%, #141216 60%, #0c0b0d 100%);
  color:var(--cream); overflow:hidden; padding:120px 0 60px;
}
.hero-lines{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: repeating-linear-gradient(115deg, transparent 0 120px, rgba(198,161,92,.05) 120px 121px);
}
.hero-inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; padding:0 22px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--gold-deep);
  border-radius:30px; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light);
  opacity:0; animation: fadeUp .8s var(--ease) .15s forwards;
}
.hero h1{
  font-family:var(--font-display); font-weight:800; letter-spacing:.01em;
  font-size:clamp(3rem, 15vw, 7.2rem); line-height:.92; margin:22px 0 6px;
  background:linear-gradient(180deg,#fff, var(--gold-light) 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; animation: fadeUp .9s var(--ease) .3s forwards;
}
.hero .sub{
  font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--gold-light);
  font-size:clamp(1.05rem,3.4vw,1.5rem); margin-top:10px; opacity:0; animation: fadeUp .9s var(--ease) .48s forwards;
}
.hero p.desc{
  margin-top:20px; color:var(--muted-dark); line-height:1.75; font-size:1rem;
  opacity:0; animation: fadeUp .9s var(--ease) .62s forwards;
}
.hero-ctas{
  margin-top:34px; display:flex; gap:14px; justify-content:center; align-items:flex-start; flex-wrap:wrap;
  opacity:0; animation: fadeUp .9s var(--ease) .76s forwards;
}
.hero-loc{
  margin-top:30px; display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; animation: fadeUp .9s var(--ease) .9s forwards;
}
.hero-loc i{ color:var(--gold); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

/* ============================================================
   4. HOME EXTRAS
============================================================ */
.quick-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:10px; }
.quick-card{
  position:relative; padding:34px 26px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--ink-2), var(--ink)); overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s;
}
.quick-card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.quick-card .num{ font-family:var(--font-display); font-size:.8rem; color:var(--gold-deep); letter-spacing:.2em; }
.quick-card h3{ font-family:var(--font-display); font-size:1.7rem; margin:14px 0 10px; color:var(--cream); }
.quick-card p{ color:var(--muted-dark); line-height:1.65; font-size:.92rem; margin-bottom:20px; }
.quick-card i.bgicon{
  position:absolute; right:-10px; bottom:-18px; font-size:6rem; color:rgba(198,161,92,.08);
}

.why-grid{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:10px; }
.why-item{ text-align:left; }
.why-item .icn{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-deep); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px;
}
.why-item h4{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:8px; }
.why-item p{ color:var(--muted); line-height:1.65; font-size:.92rem; }

.motto-strip{
  padding:56px 0; text-align:center; background:var(--paper-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.motto-strip p{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,4.4vw,2rem); color:var(--gold-deep); line-height:1.4; max-width:16ch; margin:0 auto;
}

/* ============================================================
   5. SERVICES LIST + STYLE GRID (men/women)
============================================================ */
.service-list{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:10px; }
.service-row{
  display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--ink-2); transition:border-color .3s, transform .3s;
}
.service-row:hover{ border-color:var(--gold); transform:translateX(4px); }
.service-row .si{
  width:44px; height:44px; border-radius:50%; background:rgba(198,161,92,.1); color:var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem;
}
.service-row h4{ font-family:var(--font-display); font-size:1.1rem; color:var(--cream); }
.service-row p{ color:var(--muted-dark); font-size:.85rem; margin-top:3px; }

.style-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:44px; }
.style-tile{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg, var(--ink-3), var(--ink)); border:1px solid var(--line);
  display:flex; align-items:flex-end; padding:16px; transition:transform .4s var(--ease);
}
.style-tile:hover{ transform:translateY(-5px); }
.style-tile::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(198,161,92,.06) 14px 15px);
}
.style-tile .icon-c{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-56%); font-size:2.1rem; color:var(--gold-deep); opacity:.55;
}
.style-tile span{ position:relative; z-index:1; font-family:var(--font-display); color:var(--cream); font-size:.98rem; line-height:1.25; }
.style-tile .soon{ position:relative; z-index:1; display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px; }

.inline-cta{ margin-top:46px; display:flex; flex-direction:column; gap:12px; }

/* ============================================================
   6. GALLERY
============================================================ */
.filter-tabs{ display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.filter-tabs button{
  padding:9px 20px; border:1px solid var(--gold-deep); border-radius:30px; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold);
  transition:all .3s var(--ease);
}
.filter-tabs button.active{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1408; }
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.gallery-tile{
  aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(150deg,var(--ink-2),var(--ink));
  border:1px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--ease); cursor:pointer;
}
.gallery-tile:hover{ transform:scale(1.03); }
.gallery-tile i{ font-size:1.7rem; color:var(--gold-deep); }
.gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:grayscale(.1) contrast(1.05); }
.gallery-tile:hover img{ transform:scale(1.07); }
.gallery-tile:has(img)::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,13,.8), transparent 55%); }
.gallery-tile .g-label{
  position:absolute; bottom:0; left:0; right:0; padding:12px; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:var(--cream); font-size:.72rem; text-align:left;
}
.gallery-tile .g-label b{ display:block; font-family:var(--font-display); font-size:.9rem; color:var(--gold-light); }

/* ============================================================
   6b. GALLERY LIGHTBOX
============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(8,7,9,.92); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:60px 20px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:18px;
  animation:lightboxIn .35s var(--ease);
}
@keyframes lightboxIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.lightbox-media{
  width:100%; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg,var(--ink-2),var(--ink)); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-media img{ width:100%; height:100%; object-fit:contain; }
.lightbox-media .lightbox-placeholder{
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:30px;
}
.lightbox-media .lightbox-placeholder i{ font-size:2.6rem; color:var(--gold-deep); }
.lightbox-media .lightbox-placeholder span{ font-size:.82rem; color:var(--muted-dark); letter-spacing:.03em; max-width:280px; line-height:1.5; }
.lightbox-caption{ text-align:center; }
.lightbox-caption b{ display:block; font-family:var(--font-display); font-size:1.25rem; color:var(--gold-light); }
.lightbox-caption span{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-dark); }
.lightbox-close{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line); color:var(--paper); font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s, border-color .25s, color .25s;
}
.lightbox-close:hover{ background:var(--gold); border-color:var(--gold); color:#1a1408; }

/* ============================================================
   7. FACE SHAPE FINDER (upload + overlay)
============================================================ */
.fsf-gender{ display:flex; justify-content:center; margin:0 0 34px; }
.fsf-ai-cta{ margin-top:56px; text-align:center; }
.fsf-upload-wrap{ max-width:340px; margin:0 auto 14px; }
.fsf-photo-stage{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  border:1px dashed var(--gold-deep); background:var(--ink-2); display:flex; align-items:center; justify-content:center;
}
.fsf-placeholder{ text-align:center; padding:26px; color:var(--muted-dark); }
.fsf-placeholder i{ font-size:2.2rem; color:var(--gold-deep); margin-bottom:14px; display:block; }
.fsf-placeholder p{ font-size:.84rem; margin-bottom:20px; line-height:1.55; }
.fsf-upload-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#fsfPhoto{ width:100%; height:100%; object-fit:cover; display:none; }
.fsf-overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; }
.fsf-overlay-shape{ width:55%; touch-action:none; cursor:grab; filter:drop-shadow(0 0 10px rgba(198,161,92,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.6)); transform-origin:center; display:block; }
.fsf-overlay-shape:active{ cursor:grabbing; }
.fsf-stage-controls{ display:none; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.fsf-stage-controls.show{ display:flex; }
.range-row{ display:flex; align-items:center; gap:10px; flex:1; color:var(--gold); }
.range-row input[type=range]{ flex:1; accent-color:var(--gold); }
.fsf-drag-hint{ text-align:center; font-size:.78rem; color:var(--muted-dark); margin:14px 0 30px; display:none; }
.fsf-drag-hint.show{ display:block; }

.fsf-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.fsf-card{
  padding:22px 12px; border:1px solid var(--line); border-radius:var(--radius); text-align:center;
  background:var(--ink-2); transition:all .35s var(--ease); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fsf-card img.fsf-shape-thumb{ width:40px; height:52px; object-fit:contain; opacity:.5; filter:brightness(.8); transition:opacity .3s, filter .3s; }
.fsf-card span{ font-size:.78rem; letter-spacing:.05em; color:var(--muted-dark); font-weight:600; }
.fsf-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.fsf-card.active{ background:linear-gradient(160deg, rgba(198,161,92,.16), var(--ink-2)); border-color:var(--gold); }
.fsf-card.active img.fsf-shape-thumb{ opacity:1; filter:brightness(1) drop-shadow(0 0 5px rgba(198,161,92,.7)); }
.fsf-card.active span{ color:var(--gold-light); }

.fsf-result{
  margin-top:40px; padding:30px 24px; border:1px solid var(--gold-deep); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(198,161,92,.08), var(--ink-2));
  display:none;
}
.fsf-result.show{ display:block; animation: fadeUp .6s var(--ease); }
.fsf-result .tag{ margin-bottom:14px; }
.fsf-result h3{ font-family:var(--font-display); font-size:1.6rem; color:var(--cream); margin-bottom:10px; }
.fsf-result .rec-list{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.fsf-result .rec-list li{ display:flex; align-items:center; gap:10px; color:var(--cream); font-size:.94rem; }
.fsf-result .rec-list i{ color:var(--gold); }
.fsf-result .tip{ display:flex; gap:10px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); color:var(--muted-dark); font-size:.86rem; line-height:1.6; }
.fsf-result .tip i{ color:var(--gold); margin-top:3px; flex-shrink:0; }
.fsf-hint{ text-align:center; color:var(--muted-dark); font-size:.85rem; margin-top:20px; }

/* ============================================================
   8. CALCULATOR
============================================================ */
.calc-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.calc-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2);
  cursor:pointer; transition:border-color .3s, background .3s;
}
.calc-item:hover{ border-color:var(--gold-deep); }
.calc-item.checked{ border-color:var(--gold); background:linear-gradient(160deg, rgba(198,161,92,.1), var(--ink-2)); }
.calc-item .left{ display:flex; align-items:center; gap:14px; }
.calc-item .box{
  width:22px; height:22px; border:1px solid var(--gold-deep); border-radius:5px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .25s var(--ease); color:transparent;
}
.calc-item.checked .box{ background:var(--gold); color:#1a1408; border-color:var(--gold); }
.calc-item h5{ font-family:var(--font-display); font-size:1.02rem; color:var(--cream); font-weight:500; }
.calc-item .price{ font-family:var(--font-display); font-weight:700; color:var(--gold-light); font-size:1.05rem; white-space:nowrap;}
.calc-item input{ position:absolute; opacity:0; pointer-events:none; }

.calc-total-bar{
  position:sticky; bottom:calc(84px + env(safe-area-inset-bottom)); margin-top:26px; padding:20px 22px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color:#1a1408;
  display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  flex-wrap:wrap;
}
.calc-total-bar .lbl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.calc-total-bar .amount{ font-family:var(--font-display); font-size:2.1rem; font-weight:800; }
.calc-disclaimer{ margin-top:18px; font-size:.78rem; color:var(--muted-dark); line-height:1.6; display:flex; gap:8px; }
.calc-disclaimer i{ color:var(--gold); margin-top:2px; }

/* ============================================================
   9. BARBERS
============================================================ */
.barber-grid{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:10px; }
.barber-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--ink-2);
  transition:transform .4s var(--ease), border-color .4s;
}
.barber-card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.barber-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.barber-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:grayscale(.15) contrast(1.05); }
.barber-card:hover .barber-photo img{ transform:scale(1.06); }
.barber-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,13,.85), transparent 55%); }
.barber-photo .role{ position:absolute; top:14px; left:14px; }
.barber-info{ padding:20px; }
.barber-info h3{ font-family:var(--font-display); font-size:1.5rem; color:var(--cream); margin-bottom:4px; }
.barber-info .spec{ font-size:.78rem; color:var(--gold-light); letter-spacing:.06em; text-transform:uppercase; font-weight:700; margin-bottom:16px; }

/* ============================================================
   10. CONTACT
============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:10px; }
.map-wrap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.map-wrap iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05); }
.info-card{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--ink-2); }
.info-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.info-row:last-child{ border-bottom:none; }
.info-row i{ color:var(--gold); width:22px; margin-top:3px; }
.info-row h5{ font-family:var(--font-display); font-size:1rem; color:var(--cream); margin-bottom:3px; }
.info-row p{ color:var(--muted-dark); font-size:.87rem; line-height:1.6; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:42px; height:42px; border:1px solid var(--gold-deep); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); transition:all .3s; }
.social-row a:hover{ background:var(--gold); color:#1a1408; }

/* ============================================================
   11. FOOTER
============================================================ */
.site-footer{ background:#080708; color:var(--muted-dark); padding:50px 0 110px; border-top:1px solid var(--line); }
.footer-top{ display:flex; flex-direction:column; gap:26px; align-items:flex-start; }
.footer-brand .word{ font-family:var(--font-display); font-size:1.4rem; color:var(--cream); }
.footer-brand .word small{ display:block; font-size:.55rem; letter-spacing:.32em; color:var(--gold-light); margin-top:4px; }
.footer-motto{ font-family:var(--font-display); font-style:italic; color:var(--gold-deep); font-size:.95rem; max-width:30ch; }
.footer-links{ display:flex; flex-wrap:wrap; gap:16px 22px; }
.footer-links a{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-dark); }
.footer-links a:hover{ color:var(--gold-light); }
.footer-bottom{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.06); font-size:.75rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   12. MOBILE TAB BAR
============================================================ */
.mobile-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:900; background:rgba(12,11,13,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.mobile-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px;
  color:var(--muted-dark); font-size:.6rem; letter-spacing:.03em; text-transform:uppercase; font-weight:700;
  position:relative;
}
.mobile-tabbar a i{ font-size:1.05rem; transition:transform .3s var(--ease); }
.mobile-tabbar a.active{ color:var(--gold-light); }
.mobile-tabbar a.active i{ transform:translateY(-2px); }
.mobile-tabbar a.active::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--gold);
}
body{ padding-bottom:70px; }
/* Svejarka's composer already reserves its own space above the tab bar (see .svejarka-composer),
   so the generic body clearance would double up and leave an empty gap beneath it. */
body.svejarka-page{ padding-bottom:0; }

/* ============================================================
   13. RESPONSIVE
============================================================ */
@media (min-width:640px){
  .quick-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .style-grid{ grid-template-columns:repeat(3,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .fsf-grid{ grid-template-columns:repeat(auto-fit, minmax(100px,1fr)); }
  .barber-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1.1fr .9fr; }
  .footer-top{ flex-direction:row; justify-content:space-between; }
}
@media (min-width:900px){
  :root{ --header-h:86px; }
  .desktop-nav{ display:block; }
  .burger{ display:none; }
  .section{ padding:100px 0; }
  .mobile-tabbar{ display:none; }
  body{ padding-bottom:0; }
  .style-grid{ grid-template-columns:repeat(3,1fr); }
  .fsf-grid{ grid-template-columns:repeat(7,1fr); }
  .barber-grid{ grid-template-columns:repeat(4,1fr); }
  .site-footer{ padding-bottom:60px; }
  .calc-total-bar{ bottom:14px; }
}
@media (min-width:1100px){
  .hero h1{ font-size:8rem; }
}

/* ============================================================
   SVEJARKA AI (chat assistant page)
============================================================ */
.svejarka-hero{ text-align:center; padding-top:120px; }
.svejarka-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,7vw,4.2rem); letter-spacing:.01em; margin-top:18px;
}
.svejarka-title span{ color:var(--gold-light); }
.svejarka-hero .lede{ max-width:56ch; margin:16px auto 0; color:var(--muted-dark); line-height:1.65; }

.svejarka-wrap{ max-width:760px; margin:0 auto; }

/* Chat messages flow directly on the page — no boxed card, just a running conversation.
   Bottom padding matches the composer's REAL height (see svejarka.js, which measures
   .svejarka-composer live and writes it to --composer-h) plus a small buffer, instead of
   a hardcoded guess — a hardcoded value is always wrong the moment the composer's actual
   height differs (e.g. no photo attached vs. photo preview shown), leaving a dead gap. */
/* This must also reserve space for the fixed mobile tab bar (see --tabbar-h,
   measured live in svejarka.js) that sits BELOW the composer — the composer's
   own "bottom" offset is what pushes it up above the tab bar in the first
   place, so that same amount of extra clearance is needed down here too, or
   the last chunk of every message ends up hidden behind both fixed bars and
   the page can't be scrolled far enough to reveal it. */
.svejarka-chat-section{ padding-top:48px; padding-bottom: calc(var(--composer-h, 160px) + var(--tabbar-h, 70px) + 24px); }

.svejarka-chat-title{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  text-align:center; color:var(--text-dark); margin-bottom:30px; letter-spacing:.01em;
}
.svejarka-chat-title i{ color:var(--gold); font-size:1.2rem; }
.svejarka-chat-title span{ color:var(--gold-deep); }

.svejarka-chat{
  display:flex; flex-direction:column; gap:20px;
}
.svejarka-msg{ display:flex; }
.svejarka-msg.user{ justify-content:flex-end; }
.svejarka-bubble{
  max-width:80%; padding:13px 18px; border-radius:16px;
  line-height:1.6; font-size:.95rem; white-space:pre-wrap;
}
.svejarka-msg.bot .svejarka-bubble{ background:var(--ink); color:var(--cream); border-bottom-left-radius:4px; }
.svejarka-msg.user .svejarka-bubble{
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1408;
  border-bottom-right-radius:4px;
}
.svejarka-bubble.svejarka-typing{ display:flex; gap:5px; align-items:center; padding:15px 18px; }
.svejarka-bubble.svejarka-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--gold-light);
  animation:svejarkaBlink 1.2s infinite ease-in-out;
}
.svejarka-bubble.svejarka-typing span:nth-child(2){ animation-delay:.2s; }
.svejarka-bubble.svejarka-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes svejarkaBlink{
  0%,80%,100%{ opacity:.3; transform:scale(.85); }
  40%{ opacity:1; transform:scale(1); }
}

/* Fixed to the actual screen edge — always sits flush above the tab bar with no gap,
   regardless of scroll position or the mobile browser's address bar resizing the viewport. */
.svejarka-composer{
  position:fixed; left:0; right:0; bottom:var(--tabbar-h, 70px); z-index:500;
  padding:18px 0 calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--paper) 58%, rgba(250,248,243,.92) 80%, rgba(250,248,243,0));
}
.svejarka-inputbar{ display:flex; align-items:center; gap:8px; }
.svejarka-inputbar input{
  /* min-width:0 overrides the flex item's default min-width:auto — without it,
     the input refuses to shrink below its intrinsic content size on narrow
     phones, which pushes the whole row wider than the screen and clips the
     send button off the right edge instead of letting the input shrink. */
  flex:1; min-width:0; padding:15px 20px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); font-size:.95rem; background:var(--paper); color:var(--text-dark);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.svejarka-inputbar input:focus{ outline:none; border-color:var(--gold); }
.svejarka-inputbar button{
  width:48px; height:48px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svejarka-inputbar button:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* Single attach button that opens a small choice menu (upload file / use camera) */
.svejarka-attach-wrap{ position:relative; flex-shrink:0; }
.svejarka-attach{
  background:var(--paper); border:1px solid var(--line); color:var(--gold-deep);
  box-shadow:0 8px 24px rgba(0,0,0,.06); font-size:1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.svejarka-attach:hover{ border-color:var(--gold); background:var(--paper-2); }
.svejarka-attach:active{ transform:scale(.94); }
.svejarka-attach.has-image{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  color:#1a1408; border-color:var(--gold); box-shadow:0 10px 26px -8px var(--gold-glow);
}
.svejarka-attach-menu{
  position:absolute; bottom:calc(100% + 12px); right:0;
  flex-direction:column; gap:2px; min-width:190px; padding:6px;
  border:1px solid var(--line); border-radius:14px; background:var(--ink);
  box-shadow:var(--shadow); z-index:20;
}
/* NOTE: display is set only via :not([hidden]) below — a bare
   ".svejarka-attach-menu{ display:flex }" would have the same CSS
   specificity as the browser's own "[hidden]{ display:none }" rule and,
   being an author rule, would win and override "hidden", leaving the
   menu permanently visible regardless of the hidden attribute. Same
   reasoning applies to .svejarka-preview below. */
.svejarka-attach-menu:not([hidden]){ display:flex; }
.svejarka-attach-menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px;
  border-radius:9px; font-size:.85rem; font-weight:600; color:var(--cream);
  text-align:left; transition:background .2s var(--ease);
}
.svejarka-attach-menu button:hover{ background:rgba(198,161,92,.18); }
.svejarka-attach-menu button i{ color:var(--gold); width:16px; text-align:center; flex-shrink:0; }

/* Attached-photo preview row shown above the input while a photo is queued to send */
.svejarka-preview{
  align-items:center; gap:10px; margin-bottom:12px;
  padding:8px 12px; border:1px solid var(--line); border-radius:16px;
  background:var(--paper-2); box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.svejarka-preview:not([hidden]){ display:flex; }
.svejarka-preview img{ width:44px; height:44px; border-radius:11px; object-fit:cover; flex-shrink:0; }
.svejarka-preview span{ flex:1; font-size:.82rem; color:var(--muted); }
.svejarka-preview-remove{
  width:28px; height:28px; border-radius:50%; padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.svejarka-preview-remove:hover{ background:rgba(198,161,92,.15); color:var(--gold-deep); }

@media (max-width:700px){
  .svejarka-hero{ padding-top:96px; }
}

@media (min-width:900px){
  /* Belt-and-braces fallback for the instant before JS measures the (hidden,
     0px-tall) tab bar: without this, a page load on a wide viewport would
     briefly use the 70px mobile fallback and leave a dead gap above the
     composer / at the bottom of the chat feed. */
  .svejarka-composer{ bottom:0; }
  .svejarka-chat-section{ padding-bottom: calc(var(--composer-h, 160px) + 24px); }
}