:root{
  --brand:#d97706;
  --brand-strong:#b45309;
  --coffee:#4b2e05;
  --ink:#1f1b16;
  --muted:#6b5a49;
  --ring: rgba(245, 158, 11, .35);
}

*{font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
html{scroll-behavior:smooth}
::selection{background:rgba(217,119,6,.15)}

.navlink{color:#5b4b3a; position:relative; transition:color .18s ease}
.navlink:hover{color:var(--brand-strong)}
.navlink.active{color:var(--brand)}
.navlink.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background:linear-gradient(90deg, rgba(217,119,6,.2), rgba(217,119,6,.95), rgba(217,119,6,.2));
  border-radius:999px;
  opacity:.9;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.65rem 1rem;border-radius:1rem;
  box-shadow:0 6px 18px -8px rgba(217,119,6,.25);
  transition:transform .15s ease,box-shadow .15s ease, filter .15s ease;
  will-change: transform;
}
.btn:active{transform:translateY(0); filter:brightness(.96)}
.btn-primary{background:var(--brand);color:white;border:1px solid #f6c47a}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(217,119,6,.55)}
.btn-outline{border:1px solid #f6c47a;color:var(--brand-strong);background:white}
.btn-outline:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(217,119,6,.35)}

header[data-header]{
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
header[data-header].is-scrolled{
  box-shadow: 0 14px 34px -28px rgba(0,0,0,.35);
  border-color: rgba(245,158,11,.35);
  background-color: rgba(255,255,255,.78);
}

.bg-glow{
  position:fixed; inset:-20vh -20vw auto -20vw;
  height:60vh;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(245,158,11,.18), transparent 65%),
    radial-gradient(closest-side, rgba(217,119,6,.12), transparent 62%);
  filter: blur(6px);
  z-index:0;
}

.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.in{opacity:1; transform: translateY(0)}
.reveal-pop{
  opacity:0;
  transform: translateY(10px) scale(.98);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-pop.in{opacity:1; transform: translateY(0) scale(1)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-pop{opacity:1;transform:none;transition:none}
  .animate-fadein,.animate-fadein-delayed,.animate-fadein-delayed2{animation:none;opacity:1}
}

.opacity-0{opacity:0}
.animate-fadein{animation:fadein .8s ease forwards}
.animate-fadein-delayed{animation:fadein .8s ease .15s forwards}
.animate-fadein-delayed2{animation:fadein .8s ease .3s forwards}
@keyframes fadein{to{opacity:1;transform:none}}

.premium-card{
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid rgba(245,158,11,.25);
  box-shadow: 0 12px 26px -18px rgba(0,0,0,.22);
}
.premium-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 18px 34px -24px rgba(0,0,0,.28);
}

/* Accordion */
.ac-header{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  cursor:pointer; user-select:none;
  padding-bottom: 0.65rem !important;
}
.ac-header span{transition: transform .18s ease, opacity .18s ease}
.ac-content{
  overflow: hidden;
  max-height: 0;
  opacity: 1;
  transition: max-height .26s ease;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.ac-content.open{max-height: 2000px}

.item-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px dashed #ead8b8}
.item-row:last-child{border-bottom:0}
.item-name{font-weight:700; letter-spacing:.1px}
.item-desc{font-size:.92rem;color:#6b5a49}
.item-price{white-space:nowrap;color:#1f1b16; font-weight:700}
.subcat{margin-top:.55rem;margin-bottom:.25rem;color:#6b5a49;font-weight:800}

#mobileMenu{transform-origin: top}
#mobileMenu.menu-enter{animation: drop .18s ease-out}
@keyframes drop{
  from{opacity:0; transform: translateY(-6px) scaleY(.98)}
  to{opacity:1; transform: translateY(0) scaleY(1)}
}

.lightbox-item{position:relative}
.lightbox-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18));
  opacity:0;
  transition: opacity .22s ease;
}
.lightbox-item:hover::after{opacity:1}

#lightbox{backdrop-filter: blur(3px)}
#lightbox.lb-open{animation: lbFade .18s ease-out}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
#lightboxInner{animation: lbPop .2s ease-out}
@keyframes lbPop{
  from{transform: translateY(10px) scale(.98); opacity:.7}
  to{transform: translateY(0) scale(1); opacity:1}
}

/* Hero polish */
.hero-title-glow{
  background: linear-gradient(180deg, rgba(0,0,0,1), rgba(62,45,28,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-media{position:relative}
.hero-media-overlay{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.10), transparent 55%),
              linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18));
}
/* HERO SLIDER */
.hero-slider{position:relative; width:100%; height:100%}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform: scale(1.03);
  transition: opacity 1s ease, transform 6s ease;
  will-change: opacity, transform;
}
.hero-slide.is-active{
  opacity:1;
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none; transform:none}
}
.btn-primary{
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{left:-60%}
  55%{left:130%}
  100%{left:130%}
}
@media (prefers-reduced-motion: reduce){
  .btn-primary::after{animation:none}
}
body{transition: opacity .18s ease}
body.is-leaving{opacity:0}
/* Intro Splash (CSS Fire) */
.intro{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
}

.intro.hidden{display:none}

.intro-card{
  position: relative;
  width: min(92vw, 520px);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(245,158,11,.35);
  box-shadow: 0 30px 90px -50px rgba(0,0,0,.85);
  background: rgba(255,255,255,.06);
}

.intro-overlay{
  position: relative;
  padding: 26px 22px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  text-align:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.68));
}
.intro-overlay{ perspective: 900px; }


.intro-logo{
  width: 96px; height: 96px;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  padding: 10px;
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.65);
}

.intro-title{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 20px;
}

.intro-sub{
  color: rgba(255,255,255,.75);
  font-size: 13px;
  margin-top: -4px;
}

.intro-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
  margin-top: 8px;
}

.intro-hint{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* Intro Splash (CSS Fire) - Animated */
.intro{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
}
.intro.hidden{display:none}

/* cinematic dark + glow */
.intro-fire{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255,120,0,.24), transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(255,45,0,.20), transparent 64%),
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.06), transparent 52%),
    linear-gradient(180deg, rgba(10,8,6,.92), rgba(6,5,4,.98));
  filter: saturate(1.2) contrast(1.05);
}

/* extra moving glow */
.intro-fire::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 35% 75%, rgba(255,160,40,.18), transparent 42%),
    radial-gradient(circle at 60% 85%, rgba(255,90,0,.15), transparent 48%);
  filter: blur(12px);
  animation: fireGlow 3.2s ease-in-out infinite;
}
@keyframes fireGlow{
  0%,100%{transform: translateY(0); opacity:.75}
  50%{transform: translateY(-10px); opacity:1}
}

/* Smoke */
.intro-smoke{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 90%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 62% 92%, rgba(255,255,255,.05), transparent 48%),
    radial-gradient(circle at 48% 88%, rgba(255,255,255,.04), transparent 52%);
  filter: blur(10px);
  opacity: .65;
  animation: smoke 5.5s ease-in-out infinite;
}
@keyframes smoke{
  0%,100%{transform: translateY(0) scale(1); opacity:.50}
  50%{transform: translateY(-18px) scale(1.03); opacity:.72}
}

/* Flames */
.flame{
  position:absolute;
  bottom: 9vh;
  left: 50%;
  width: 200px;
  height: 290px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(255,245,210,.95),
      rgba(255,170,60,.66) 48%,
      rgba(255,70,0,.20) 72%,
      transparent 78%);
  border-radius: 60% 60% 70% 70%;
  opacity: .85;
  mix-blend-mode: screen;
  filter: blur(1px);
  transform-origin: 50% 100%;
  animation: flameWobble 1.7s ease-in-out infinite;
}
.flame::before{
  content:"";
  position:absolute;
  inset: 18% 22% 14% 22%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,230,140,.55) 55%, transparent 75%);
  border-radius: 60% 60% 70% 70%;
  filter: blur(.8px);
  opacity: .92;
}

.f1{left:45%; transform:translateX(-50%) scale(1.12); animation-duration: 1.55s; opacity:.84}
.f2{left:55%; transform:translateX(-50%) scale(1.00); animation-duration: 1.95s; opacity:.72}
.f3{left:38%; transform:translateX(-50%) scale(.80);  animation-duration: 2.2s;  opacity:.55}
.f4{left:62%; transform:translateX(-50%) scale(.76);  animation-duration: 2.0s;  opacity:.52}
.f5{left:50%; transform:translateX(-50%) scale(.64);  animation-duration: 2.45s; opacity:.46}

@keyframes flameWobble{
  0%,100%{transform: translateX(-50%) rotate(-2deg) scaleY(1)}
  50%{transform: translateX(-50%) rotate(2deg)  scaleY(1.08)}
}

/* Embers */
.embers{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 78%, rgba(255,170,60,.35), transparent 30%),
    radial-gradient(circle at 66% 82%, rgba(255,110,20,.28), transparent 30%),
    radial-gradient(circle at 45% 70%, rgba(255,210,120,.22), transparent 28%),
    radial-gradient(circle at 56% 88%, rgba(255,90,0,.18), transparent 30%);
  opacity:.40;
  animation: embersMove 2.6s ease-in-out infinite;
}
@keyframes embersMove{
  0%,100%{transform: translateY(0); opacity:.30}
  50%{transform: translateY(-14px); opacity:.48}
}

/* The card (glass) */
.intro-card{
  position: relative;
  width: min(92vw, 520px);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(245,158,11,.38);
  box-shadow: 0 30px 90px -50px rgba(0,0,0,.85);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  transform: translateY(14px) scale(.96);
  opacity: 0;
  animation: introCardIn .7s cubic-bezier(.18,.92,.18,1) forwards;
}
@keyframes introCardIn{
  to{opacity:1; transform: translateY(0) scale(1)}
}

.intro-overlay{
  position: relative;
  padding: 26px 22px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  text-align:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.72));
}

/* Logo “breathing” + glow */
.intro-logo{
  width: 98px; height: 98px;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  padding: 10px;
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.65);
  transform-origin: 50% 50%;
  animation:
    logoIn .85s cubic-bezier(.16,.92,.18,1) both,
    logoFloat 2.2s ease-in-out .85s infinite;
  will-change: transform, filter, opacity;
}

/* “έρχεται από το βάθος” */
@keyframes logoIn{
  0%{
    opacity: 0;
    transform: translateY(36px) scale(.14) rotateX(45deg);
    filter: blur(22px);
  }
  55%{
    opacity: 1;
    transform: translateY(-6px) scale(1.16) rotateX(0deg);
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0px);
  }
}
.intro-title, .intro-sub, .intro-hint{opacity:0; transform: translateY(6px)}
.intro-title{animation: textIn .55s ease .55s forwards}
.intro-sub{animation: textIn .55s ease .68s forwards}
.intro-hint{animation: textIn .55s ease .82s forwards}

@keyframes textIn{
  to{opacity:1; transform: translateY(0)}
}


/* μετά κάνει “ανάσα” */
@keyframes logoFloat{
  0%,100%{transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,140,0,0))}
  50%{transform: translateY(-4px) scale(1.01); filter: drop-shadow(0 10px 22px rgba(255,120,0,.28))}
}


.intro-title{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 20px;
}
.intro-sub{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  margin-top: -4px;
}
.intro-actions{display:none;} /* τώρα κλείνει με tap anywhere */
.intro-hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* Fade out */
.intro.fade-out{animation: introOut .52s ease forwards;}
@keyframes introOut{
  to{opacity:0; transform: scale(1.01)}
}

@media (prefers-reduced-motion: reduce){
  .flame,.embers,.intro-smoke,.intro-fire::before,.intro-logo,.intro-card{animation:none}
  .intro.fade-out{animation:none}
}