/* ===================================================================
   КОФЕЙНИК — design tokens
   Palette pulled from the coffeehouse's own printed menus:
   espresso brown, rust, amber and cream, with a wine-red accent
   drawn from the cherry/berry ingredients running through the drinks.
=================================================================== */
:root{
  --espresso:      #2a1a11;
  --espresso-2:    #3c2416;
  --rust:          #a8672d;
  --rust-2:        #8f5323;
  --amber:         #d3a25b;
  --amber-light:   #e6c48c;
  --cream:         #f2e6d0;
  --cream-2:       #e9dabb;
  --wine:          #7d3427;
  --wine-light:    #b25a44;
  --ink:           #241209;

  --font-display: "Bitter", "Georgia", serif;
  --font-body:    "Manrope", "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  --ease: cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; width:100%; overflow-x:clip; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  width:100%;
  overflow-x: clip;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
p{ margin:0; }
button{ font: inherit; }
button:focus,a:focus{ outline:none; }
button:focus-visible,a:focus-visible{ outline: 2px solid var(--amber); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* shared petal-burst flourish, tinted per-use via currentColor / fill */
.petal{ fill: currentColor; opacity:.9; }

/* ===================== HEADER ===================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(42,26,17,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.header-inner{
  max-width: 1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  min-height:70px; padding: 10px 22px; gap:24px;
  position:relative;
}
.logo{ display:flex; align-items:center; }
.logo-text{
  font-family: var(--font-display); font-weight:700; font-size:1.4rem;
  color: var(--cream); letter-spacing:.01em;
  transition: opacity .25s ease, font-size .22s ease, transform .22s var(--ease);
}
.logo:hover .logo-text{ opacity:.85; }
.logo-text--footer{ font-family: var(--font-display); font-weight:700; font-size:1.4rem; color: var(--cream); }

.burger{
  width:42px; height:42px; border-radius:50%;
  background: transparent; border: 1px solid rgba(242,230,208,.25);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; transition: background .25s ease, border-color .25s ease;
}
.burger:hover{ background: rgba(242,230,208,.08); }
.burger span{
  width:18px; height:2px; background: var(--cream); border-radius:2px;
  transition: transform .35s var(--ease), opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-panel{
  margin-left:auto;
}
.nav-panel-inner{
  display:flex; align-items:center; gap:7px;
}
.nav-link{
  color: var(--cream-2); font-size:.84rem; font-weight:700;
  padding: 11px 17px; border-radius:999px;
  transition: color .2s ease, background .2s ease;
}
.nav-link:hover{ color: var(--amber-light); background:rgba(242,230,208,.08); }
.nav-link.is-current{ color:var(--espresso); background:var(--amber); }
.nav-link.is-current:hover{ background:var(--amber-light); }
.header-tabs{
  position:absolute; left:50%; top:50%; width:310px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
  padding:4px; border:1px solid rgba(242,230,208,.16); border-radius:13px;
  background:rgba(242,230,208,.07);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-38%);
  transition:opacity .22s ease, transform .22s var(--ease), visibility .22s;
}
.site-header.show-category-nav .header-tabs{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,-50%);
}
.header-tab-btn{
  min-width:0; padding:9px 8px; border:0; border-radius:9px;
  background:transparent; color:var(--cream-2); cursor:pointer;
  font-size:.76rem; font-weight:800;
  transition:background .2s ease, color .2s ease;
}
.header-tab-btn:hover{ background:rgba(242,230,208,.1); }
.header-tab-btn.is-active{ background:var(--amber); color:var(--espresso); }
.header-tab-btn.is-active:hover{ background:var(--amber-light); }

/* ===================== HERO ===================== */
.hero{
  position: relative;
  padding: 168px 22px 96px;
  text-align:center;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(168,103,45,.35), transparent 60%),
    radial-gradient(120% 90% at 90% 10%, rgba(125,52,39,.25), transparent 55%),
    var(--espresso);
  color: var(--cream);
  overflow:hidden;
}
.hero-flourish{ position:absolute; width:340px; height:340px; color: var(--rust); opacity:.22; }
.hero-flourish--1{ top:-70px; left:-90px; animation: drift 16s ease-in-out infinite; }
.hero-flourish--2{ bottom:-110px; right:-100px; color: var(--amber); opacity:.16; animation: drift 20s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform: rotate(0deg) translateY(0); } 50%{ transform: rotate(14deg) translateY(-14px); } }

.hero-eyebrow{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.25em;
  font-size:.78rem; color: var(--amber-light); opacity:0; animation: fadeUp .7s var(--ease) .1s forwards;
}
.hero-title{
  font-size: clamp(3rem, 10vw, 6rem); font-weight:900; margin:.3em 0 .2em;
  opacity:0; animation: fadeUp .8s var(--ease) .25s forwards;
}
.hero-sub{
  font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--cream-2); max-width:520px; margin:0 auto;
  opacity:0; animation: fadeUp .8s var(--ease) .4s forwards;
}
.hero-cta{
  display:inline-block; margin-top:2.2rem;
  font-family: var(--font-mono); font-size:.95rem; color: var(--espresso);
  background: var(--amber); padding: 14px 30px; border-radius: 999px;
  opacity:0; animation: fadeUp .8s var(--ease) .55s forwards;
  transition: transform .3s var(--ease), background .3s ease;
}
.hero-cta:hover{ transform: translateY(-3px); background: var(--amber-light); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform:none; } }

/* ===================== MENU / TABS ===================== */
.menu-section{ max-width:1180px; margin:0 auto; padding: 26px 18px 72px; }

.tabs-sentinel{ height:1px; }

/* Full-width background keeps the sticky navigation flush with the viewport. */
.tabs-bar{
  position: sticky; top: var(--header-h, 66px); z-index: 40;
  width:100vw; margin: 0 0 22px calc(50% - 50vw);
  padding:10px 0;
  background: var(--cream);
  transition: background .3s ease, box-shadow .3s ease;
}
.tabs-bar.is-stuck{
  background: rgba(42,26,17,.96);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.tabs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px;
  width:min(650px,calc(100% - 36px)); margin:0 auto; padding:6px;
  background:var(--cream-2); border:1px solid rgba(125,52,39,.12); border-radius:18px;
}
.tab-btn{
  min-width:0; display:flex; align-items:center; justify-content:center; gap:11px;
  font-size:.88rem; font-weight:800; padding:14px 12px; border-radius:12px; border:0;
  background: transparent; color: var(--espresso-2); cursor:pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.tab-btn:hover{ background:rgba(42,26,17,.07); }
.tab-btn.is-active{ background: var(--espresso); color: var(--cream); box-shadow:0 4px 12px rgba(42,26,17,.18); }
.tabs-bar.is-stuck .tabs{ background:rgba(242,230,208,.12); border-color:rgba(242,230,208,.1); }
.tabs-bar.is-stuck .tab-btn{ color:var(--cream-2); }
.tabs-bar.is-stuck .tab-btn:hover{ background:rgba(242,230,208,.1); }
.tabs-bar.is-stuck .tab-btn.is-active{ background: var(--amber); color: var(--espresso); }
.tabs-bar.is-stuck .tab-btn.is-active:hover{ background:var(--amber-light); }

.menu-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
  transition: opacity .22s ease;
  scroll-margin-top:calc(var(--header-h,70px) + 18px);
}
.menu-grid.is-switching{ opacity:0; }
.card{
  background: #fffcf7; border-radius: 18px; overflow:hidden;
  border: 1px solid rgba(125,52,39,.08);
  box-shadow: 0 8px 24px rgba(60,36,22,.055);
  opacity:0; transform: translateY(10px);
  animation: cardIn .4s var(--ease) forwards;
  transition: box-shadow .35s ease, transform .35s ease;
  display:flex; flex-direction:column;
}
.card:hover{ box-shadow: 0 16px 30px rgba(60,36,22,.12); transform: translateY(-3px); }
@keyframes cardIn{ to{ opacity:1; transform:none; } }

.card-media{
  aspect-ratio: 1/1; position:relative; overflow:hidden;
  background: linear-gradient(145deg, #d6ae79, #ad713c 64%, #7e4633);
  display:flex; align-items:center; justify-content:center;
}
.card-media svg{ width:46%; height:46%; color: rgba(255,255,255,.85); }
.card-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
}
.card-media .card-flourish{
  position:absolute; width:80%; height:80%; color:#fff; opacity:.14; top:10%; left:10%;
}

.card-media.has-photo{ background: var(--cream-2); }
.card-media.has-photo::after{ display:none; }
.card-photo{ width:100%; height:100%; object-fit: cover; display:block; }

.card-body{ padding: 17px 17px 19px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; color: var(--espresso-2); }
.card-sub{ font-family:var(--font-display); font-size:.94rem; line-height:1.3; color:var(--rust-2); margin-top:4px; }

.size-row{ display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; }
.size-btn{
  font-family: var(--font-mono); font-size:.72rem; padding:6px 11px; border-radius:999px;
  border:1.3px solid var(--cream-2); background: var(--cream); color: var(--rust-2);
  cursor:pointer; transition: all .25s var(--ease);
}
.size-btn.is-active{ background: var(--wine); border-color: var(--wine); color:#fff; }

.price-row{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.price{ font-family: var(--font-mono); font-weight:700; font-size:1.4rem; color: var(--espresso); transition: transform .18s ease; }
.price.is-swapping{ animation: priceSwap .2s var(--ease); }
@keyframes priceSwap{ 0%{ opacity:.5; transform: translateY(3px); } 100%{ opacity:1; transform:none; } }

/* ===================== VIEWS (Menu / Info) ===================== */
.section-title{ font-size: clamp(1.9rem,4vw,2.6rem); color: var(--espresso-2); margin-bottom: 18px; }
.view{ display:none; }
.view.is-active{ display:block; animation: viewIn .5s var(--ease); }
@keyframes viewIn{ from{ opacity:0; } to{ opacity:1; } }

/* ===================== INFO PAGE ===================== */
.info-hero{
  padding: calc(var(--header-h,70px) + 66px) 22px 84px;
  background:
    radial-gradient(75% 85% at 0% 100%, rgba(211,162,91,.2), transparent 70%),
    var(--cream-2);
}
.info-inner{ max-width:1144px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,90px); align-items:center; }
.contacts-eyebrow{
  font-family:var(--font-mono); font-size:.73rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--rust-2); margin-bottom:18px;
}
.info-title{ font-size:clamp(3.1rem,6.2vw,5.6rem); line-height:1.04; color:var(--espresso); letter-spacing:-.035em; }
.info-text{ font-size:1.02rem; line-height:1.75; color:var(--espresso-2); max-width:480px; margin:24px 0 25px; }
.info-menu-link{ display:inline-flex; align-items:center; gap:18px; color:var(--wine); font-weight:800; border-bottom:1px solid currentColor; padding-bottom:5px; }
.info-menu-link span,.visit-map-link span,.map-action span{ font-size:1.2rem; font-weight:400; }
.info-menu-link:hover{ color:var(--espresso); }
.visit-card{
  background:radial-gradient(circle at 100% 0%, rgba(211,162,91,.14), transparent 46%),var(--espresso);
  color:var(--cream); padding:32px 36px 36px; border-radius:26px;
  box-shadow:0 22px 45px rgba(60,36,22,.16);
}
.visit-card-top{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--amber-light); padding-bottom:24px; border-bottom:1px solid rgba(242,230,208,.16); }
.visit-card-top span{ font-size:.55rem; }
.visit-detail{ display:flex; flex-direction:column; gap:6px; padding:24px 0; border-bottom:1px solid rgba(242,230,208,.16); }
.visit-label{ color:var(--amber-light); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.11em; font-size:.68rem; }
.visit-detail strong{ font-family:var(--font-display); font-size:clamp(1.18rem,2vw,1.55rem); line-height:1.25; }
.visit-sub{ color:var(--cream-2); opacity:.72; font-size:.82rem; }
.visit-map-link{ display:inline-flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; color:var(--espresso); background:var(--amber); padding:12px 16px; border-radius:10px; font-size:.82rem; font-weight:800; }
.visit-map-link:hover{ background:var(--amber-light); }

/* ===================== CONTACTS ===================== */
.contacts-section{ padding: 84px 22px 96px; background: var(--espresso); color: var(--cream); }
.contacts-inner{ max-width:1144px; margin:0 auto; display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr); gap:clamp(30px,5vw,70px); align-items:center; }
.contacts-eyebrow{ color:var(--amber-light); }
.contacts-copy .section-title{ color: var(--cream); font-size:clamp(2rem,3.8vw,3.15rem); line-height:1.16; margin-bottom:24px; }
.contacts-text{ color:var(--cream-2); opacity:.8; line-height:1.7; margin-bottom:26px; }
.map-action{ display:inline-flex; align-items:center; gap:15px; color:var(--amber-light); font-weight:800; padding-bottom:5px; border-bottom:1px solid currentColor; }
.map-action:hover{ color:var(--cream); }
.map-shell{
  position:relative; border-radius:22px; height:440px; overflow:hidden;
  border:5px solid rgba(242,230,208,.13);
  box-shadow:0 24px 50px rgba(0,0,0,.22);
  background:var(--cream-2);
}
.map-fallback{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; color:var(--espresso-2); font-family:var(--font-display); font-size:1.2rem; background:repeating-linear-gradient(45deg,rgba(168,103,45,.08) 0 2px,transparent 2px 24px),var(--cream-2); }
.map-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ===================== FOOTER ===================== */
.site-footer{ background: var(--ink); color: var(--cream-2); padding: 40px 22px 30px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:flex-start; }
.footer-brand{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.footer-legal p{ font-family: var(--font-mono); font-size:.72rem; line-height:1.7; opacity:.55; }
.footer-hours{ font-family: var(--font-mono); font-size:.78rem; opacity:.6; }

/* ===================== RESPONSIVE ===================== */
@media (min-width: 640px){
  .menu-grid{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
}
@media (min-width: 960px){
  .tabs-bar{ position:relative; top:auto; z-index:1; }
  .tabs-bar.is-stuck{ background:var(--cream); box-shadow:none; }
  .tabs-bar.is-stuck .tabs{ background:var(--cream-2); border-color:rgba(125,52,39,.12); }
  .tabs-bar.is-stuck .tab-btn{ color:var(--espresso-2); }
  .tabs-bar.is-stuck .tab-btn.is-active{ background:var(--espresso); color:var(--cream); }
}
@media (max-width: 850px){
  .info-inner{ grid-template-columns:1fr; max-width:620px; }
  .contacts-inner{ grid-template-columns:1fr; max-width:700px; }
  .contacts-copy .section-title br{ display:none; }
}
@media (max-width: 720px){
  .burger{ display:flex; }
  .tabs-bar{ position:relative; top:auto; z-index:1; }
  .header-tabs{ left:calc(50% + 10px); width:clamp(146px, calc(100vw - 210px), 200px); padding:3px; gap:2px; }
  .header-tab-btn{ min-height:42px; padding:8px 2px; font-size:.7rem; white-space:nowrap; }
  .site-header.show-category-nav .logo-text{
    font-size:1rem; letter-spacing:-.03em; transform:translateX(-2px);
  }
  .nav-panel{
    position:absolute; top:100%; left:0; right:0; margin:0;
    display:grid; grid-template-rows:0fr; background:rgba(36,18,9,.98);
    transition:grid-template-rows .3s var(--ease);
    box-shadow:0 12px 22px rgba(0,0,0,.14);
  }
  .nav-panel.is-open{ grid-template-rows:1fr; }
  .nav-panel-inner{ min-height:0; overflow:hidden; flex-direction:column; align-items:stretch; gap:0; }
  .nav-link{ border-top:1px solid rgba(242,230,208,.1); border-radius:0; padding:17px 24px; }
  .nav-link.is-current{ background:rgba(211,162,91,.15); color:var(--amber-light); }
}
@media (max-width: 480px){
  .header-inner{ padding: 12px 16px; }
  .hero{ padding-top: 148px; }
  .menu-section{ padding-top:20px; }
  .tabs{ width:calc(100% - 24px); }
  .tab-btn{ font-size:.76rem; padding:13px 5px; }
  .info-hero{ padding:calc(var(--header-h,70px) + 44px) 18px 54px; }
  .info-title{ font-size:clamp(2.8rem,12vw,4rem); }
  .visit-card{ padding:26px 24px 28px; }
  .contacts-section{ padding:62px 18px 72px; }
  .map-shell{ height:350px; }
  .footer-inner{ flex-direction:column; }
}