:root{
  --cobalt:#1b3fa0;      /* در و پنجره‌ها، تابلو */
  --cobalt-deep:#12296b;
  --olive:#2c4326;       /* دیوار سبز نقش‌دار */
  --olive-deep:#1f301b;
  --mustard:#e0b043;     /* سایبان و نور فانوس */
  --lantern:#ffd978;
  --brick:#9a4b30;       /* آجر و کاشی لوزی */
  --grout:#e7dcc4;       /* بندکشی سفید */
  --plum:#7b2f8e;
  --ruby:#c8302f;        /* لوزی‌های قرمز در */
  --ink:#f3ecd9;
  --head:"Aref Ruqaa","Vazirmatn",serif;
  --body:"Vazirmatn",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--body);background:var(--olive);color:var(--ink);line-height:1.9;font-weight:300;
  background-image:radial-gradient(ellipse at 50% 0,rgba(255,217,120,.10),transparent 60%)}
:focus-visible{outline:3px solid var(--lantern);outline-offset:3px}

/* ---------- لوزی‌های کاشی آجری ---------- */
.lattice{height:34px;background-color:var(--brick);
  background-image:linear-gradient(45deg,transparent 46%,var(--grout) 46% 54%,transparent 54%),
                   linear-gradient(-45deg,transparent 46%,var(--grout) 46% 54%,transparent 54%);
  background-size:34px 34px;border-block:4px solid var(--grout)}

/* ---------- هدر ---------- */
.hero{position:relative;background:var(--olive-deep);padding:56px 16px 64px;overflow:hidden;text-align:center}
.hero__strings{position:absolute;inset:0 0 auto 0;height:140px;pointer-events:none}
.lamp{position:absolute;top:0;width:34px;height:68px;color:#3a2a14;transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
.lamp--a{right:8%;height:90px;width:45px}
.lamp--b{right:24%;animation-delay:-2s}
.lamp--c{left:10%;height:80px;width:40px;animation-delay:-4s}
.lamp{filter:drop-shadow(0 0 14px rgba(255,217,120,.55))}
@keyframes sway{50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.lamp{animation:none}html{scroll-behavior:auto}}

.arch{position:relative;max-width:460px;margin:34px auto 0;padding:64px 28px 40px;
  background:linear-gradient(180deg,#2a52c4,var(--cobalt) 55%,var(--cobalt-deep));
  border-radius:230px 230px 10px 10px;
  border:6px solid var(--brick);
  box-shadow:0 0 0 4px var(--grout),0 0 38px 6px rgba(70,120,255,.55),inset 0 0 40px rgba(0,0,0,.35)}
.arch__lantern{width:46px;height:92px;color:#101e4d;margin:-30px auto 6px;display:block;
  filter:drop-shadow(0 0 16px rgba(255,217,120,.8))}
.arch__kind{font-size:1rem;letter-spacing:.02em;color:#cfdcff}
.arch__name{font-family:var(--head);font-weight:700;font-size:clamp(4rem,16vw,6.2rem);line-height:1.15;
  color:var(--lantern);text-shadow:0 0 22px rgba(255,217,120,.45)}
.arch__poem{margin-top:10px;font-family:var(--head);font-size:1.15rem;color:#e6eeff;line-height:2.1}

/* ---------- تب‌های دسته ---------- */
.tabs{position:sticky;top:0;z-index:10;background:var(--olive-deep);border-bottom:3px solid var(--brick);
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tabs ul{list-style:none;padding:12px 14px 0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:block;white-space:nowrap;padding:8px 20px 9px;color:var(--ink);text-decoration:none;font-size:.95rem;
  border:2px solid var(--cobalt);border-bottom:0;border-radius:40px 40px 0 0;background:var(--cobalt-deep);
  transition:background .2s,color .2s}
.tabs a:hover{background:var(--cobalt)}
.tabs a.is-active{background:var(--lantern);color:#3a2605;border-color:var(--lantern);font-weight:600}

/* ---------- منو ---------- */
.menu{max-width:760px;margin:0 auto;padding:36px 18px 20px}
.cat{padding:34px 0 10px}
.cat__title{display:flex;justify-content:center;font-family:var(--head);font-weight:700;font-size:1.9rem;line-height:1.5}
.cat__title span{padding:14px 44px 6px;color:var(--lantern);background:var(--cobalt);
  border:4px solid var(--brick);border-bottom:0;border-radius:90px 90px 0 0;
  box-shadow:0 0 0 3px var(--grout),0 -2px 22px rgba(70,120,255,.5)}
.cat__note{text-align:center;margin-top:10px;font-size:.9rem;color:#cdd8b4}
.items{list-style:none;padding:26px 6px 0;border-top:4px solid var(--cobalt);margin-top:0}
.item{padding:12px 0 12px 0}
.item__row{display:flex;align-items:baseline;gap:10px}
.item__name{position:relative;padding-inline-start:22px;font-weight:600;font-size:1.08rem}
.item__name::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;width:9px;height:14px;
  background:var(--ruby);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:translateY(-50%) scale(1.15)}
.item__dots{flex:1;border-bottom:2px dotted rgba(231,220,196,.45);transform:translateY(-5px)}
.item__price{font-weight:600;color:var(--lantern);white-space:nowrap}
.item__price small{font-weight:300;font-size:.75rem;color:#d9cfae}
.item__desc{padding-inline-start:22px;font-size:.88rem;color:#d3dbbd;max-width:60ch}
.empty{text-align:center;padding:60px 0}
code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:4px}

/* ---------- فوتر ---------- */
.foot{text-align:center;padding:34px 16px 44px;background:var(--olive-deep);font-family:var(--head);font-size:1.3rem;color:var(--lantern)}
.foot__lamp{width:30px;height:60px;color:#3a2a14;filter:drop-shadow(0 0 12px rgba(255,217,120,.6))}

@media (max-width:520px){
  .arch{border-radius:180px 180px 10px 10px;padding-top:56px}
  .cat__title{font-size:1.6rem}.cat__title span{padding-inline:30px}
  .lamp--b{display:none}
}
[hidden] {
    display: none !important;
}

/* ===== صفحه انتخاب دسته‌بندی فانوس ===== */

.category-home {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 18px 65px;
  text-align: center;
}

.category-home__title {
  font-family: var(--head);
  color: var(--lantern);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
}

.category-home__subtitle {
  font-size: .9rem;
  color: var(--grout);
  margin: 8px 0 32px;
}

/* چیدمان دکمه‌ها */

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}


/* دکمه با فرم طاق سنتی */
.category-card {
  position: relative;
  min-width: 0;
  min-height: 155px;
  padding: 25px 12px 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  background: var(--cobalt);
  color: var(--lantern);

  border: 4px solid var(--brick);
  border-radius: 85px 85px 10px 10px;

  box-shadow:
    0 0 0 3px var(--grout),
    inset 0 0 24px rgba(0,0,0,.2);

  font-family: var(--head);
  cursor: pointer;
  transition: transform .2s, filter .2s;
}

.category-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.13);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 7px;

  border: 1px solid rgba(255,217,120,.4);
  border-radius: 75px 75px 6px 6px;
  pointer-events: none;
}

/* فقط بعضی کاشی‌ها بنفش */
.category-card:nth-child(4n+2) {
  background: var(--plum);
}

/* بعضی کاشی‌ها سبز */
.category-card:nth-child(4n+3) {
  background: var(--olive-deep);
}

/* بعضی کاشی‌ها آجری */
.category-card:nth-child(4n+4) {
  background: var(--brick);
}

.category-card__lantern {
  width: 25px;
  height: 50px;
  color: var(--lantern);
}

.category-card__title {
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: center;
}

.category-card__arrow {
  font-size: 1.1rem;
  color: var(--lantern);
}

/* دکمه برگشت */
.back-button {
  display: block;
  margin: 5px auto 35px;
  padding: 9px 24px;
  border: 2px solid var(--brick);
  border-radius: 30px;
  background: var(--cobalt-deep);
  color: var(--lantern);
  font: 600 .9rem var(--body);
  cursor: pointer;
}

.back-button:hover {
  background: var(--plum);
}

/* عکس و نوشته محصول */
.item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 0;
}

.item__photo {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  display: grid;
  place-items: center;
  overflow: hidden;

  border: 3px solid var(--brick);
  border-radius: 45px 45px 8px 8px;
  background: var(--cobalt-deep);
  box-shadow: 0 0 0 2px var(--grout);
}

.item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item__photo--empty svg {
  width: 28px;
  height: 55px;
  color: var(--lantern);
}

.item__content {
  flex: 1;
  min-width: 0;
}

/* موبایل */
@media (max-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }


.category-card {
  min-height: 135px;
  padding: 20px 8px 12px;
}

.category-card__title {
  font-size: 1rem;
}


  .item__photo {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }
}


/* لپ‌تاپ و موبایل: ۶ ستون */
.category-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

/* تنظیم اندازه دکمه‌ها در موبایل */
@media (max-width: 600px) {
  .category-grid {
    gap: 4px;
  }

  .category-home {
    width: 100%;
    padding: 25px 8px;
  }

  .category-card {
    min-height: 90px;
    padding: 12px 2px 6px;
    border-width: 1px;
    border-radius: 24px 24px 5px 5px;
  }

  .category-card::before {
    inset: 3px;
    border-radius: 20px 20px 3px 3px;
  }

  .category-card__lantern {
    width: 13px;
    height: 26px;
  }

  .category-card__title {
    font-size: 9px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .category-card__arrow {
    font-size: 10px;
  }
}

/* ===== فوتر کافه فانوس ===== */

.foot {
  text-align: center;
  padding: 45px 20px 22px;
  background: var(--olive-deep);
  color: var(--ink);
  border-top: 4px solid var(--brick);
}

/* نقش فانوس */
.foot__lamp {
  display: block;
  width: 36px;
  height: 72px;
  margin: 0 auto 12px;
  color: var(--mustard);
}

/* نام کافه */
.foot__title {
  font-family: var(--head);
  font-size: 2rem;
  color: var(--lantern);
}

.foot__subtitle {
  font-family: var(--body);
  font-size: .85rem;
  color: var(--grout);
  margin-top: 5px;
}

/* سه بخش فوتر */
.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  max-width: 1000px;
  margin: 35px auto;
}

/* قاب هر بخش */
.foot__section {
  padding: 22px 14px;
  border: 1px solid var(--mustard);
  border-radius: 70px 70px 12px 12px;

  background: linear-gradient(
    160deg,
    var(--cobalt-deep),
    var(--olive-deep)
  );

  box-shadow:
    inset 0 0 0 4px rgba(255,217,120,.06),
    0 5px 15px rgba(0,0,0,.18);

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

/* عنوان بخش */
.foot__section h3 {
  font-family: var(--head);
  font-size: 1.35rem;
  color: var(--lantern);
  margin-bottom: 12px;
}

/* اطلاعات */
.foot__section p {
  font-size: .9rem;
  line-height: 2.2;
  color: var(--grout);
}

/* شماره‌های تماس */
.foot__section a {
  display: block;
  width: fit-content;
  margin: 8px auto;

  color: var(--ink);
  font-size: 1rem;
  font-family: var(--body);
  text-decoration: none;
}

.foot__section a:hover {
  color: var(--lantern);
  text-decoration: underline;
}

/* قسمت پایین فوتر */
.foot__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  padding-top: 18px;
  border-top: 1px solid rgba(224,176,67,.3);

  color: var(--mustard);
  font-size: .85rem;
}

.foot__bottom p {
  font-family: var(--head);
}

/* موبایل */
@media (max-width: 600px) {
  .foot {
    padding: 35px 14px 20px;
  }

  .foot__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .foot__section {
    padding: 18px 12px;
    border-radius: 45px 45px 10px 10px;
  }

  .foot__title {
    font-size: 1.7rem;
  }
}

/* ===== نوار بالای سایت ===== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  padding: 12px 5%;

  background: var(--olive-deep);
  border-bottom: 3px solid var(--brick);
}

.site-nav button {
  font-family: var(--body);
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.site-nav__brand {
  font-family: var(--head) !important;
  font-size: 1.5rem;
  color: var(--lantern) !important;
}

.site-nav__links {
  display: flex;
  gap: 25px;
  align-items: center;
}

.site-nav__link {
  font-size: .95rem;
  padding: 5px 10px;
}

.site-nav__link:hover {
  color: var(--lantern);
}

/* مخفی کردن هدر بزرگ در صفحات داخلی */
.inner-page .hero,
.inner-page .hero + .lattice {
  display: none;
}

/* بخش فضای کافه */
.cafe-page {
  max-width: 1100px;
  min-height: 60vh;
  margin: 0 auto;
  padding: 55px 20px;
  text-align: center;
}

.cafe-page__title {
  font-family: var(--head);
  font-size: 2.2rem;
  color: var(--lantern);
}

.cafe-page__subtitle {
  margin: 10px 0 35px;
  color: var(--grout);
}

.cafe-gallery__placeholder {
  padding: 70px 20px;
  border: 2px dashed var(--mustard);
  border-radius: 16px;
  color: var(--grout);
  background: var(--olive-deep);
}

/* صفحات داخلی */
.inner-page .menu {
  padding-top: 10px;
}

@media (max-width: 600px) {
  .site-nav {
    padding: 10px 14px;
  }

  .site-nav__links {
    gap: 10px;
  }

  .site-nav__brand {
    font-size: 1.2rem;
  }

  .site-nav__link {
    font-size: .85rem;
  }
}

/* ===== FANOOUS INTRO ANIMATION ===== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;

  padding: 25px;

  background:
    radial-gradient(
      circle at center,
      rgba(123,47,142,.24),
      transparent 60%
    ),
    var(--olive-deep);

  animation: introFadeIn .5s ease both;
}

/* طاق آبی سنتی */
.intro__arch {
  width: min(350px, 85vw);
  min-height: 340px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 45px 20px 30px;

  background: linear-gradient(
    180deg,
    #2a52c4,
    var(--cobalt),
    var(--cobalt-deep)
  );

  border: 5px solid var(--brick);
  border-radius: 180px 180px 12px 12px;

  box-shadow:
    0 0 0 3px var(--grout),
    0 0 55px rgba(255,217,120,.18),
    inset 0 0 35px rgba(0,0,0,.3);

  animation: introArch 1s ease-out both;
}

/* نور فانوس */
.intro__lantern {
  width: 55px;
  height: 110px;
  color: var(--lantern);

  filter:
    drop-shadow(0 0 20px rgba(255,217,120,.8));

  transform-origin: 50% 15%;

  animation:
    lanternAppear 1s ease-out both,
    lanternGlow 1.5s ease-in-out infinite alternate;
}

.intro__kind {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--grout);
  margin-top: 12px;
}

/* اسم فانوس */
.intro__name {
  font-family: var(--head);
  font-size: clamp(4rem, 13vw, 5.5rem);
  line-height: 1.5;
  color: var(--lantern);

  text-shadow:
    0 0 20px rgba(255,217,120,.45);

  animation: introText .9s .55s both;
}

/* متن پایین */
.intro__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: var(--mustard);
  font-family: var(--head);
  font-size: 1rem;

  animation: introText .8s 1s both;
}

/* دکمه رد کردن اینترو */
.intro__skip {
  padding: 10px 28px;

  border: 1px solid var(--mustard);
  border-radius: 30px;

  background: transparent;
  color: var(--grout);

  font-family: var(--body);
  cursor: pointer;

  animation: introText .8s 1.1s both;
}

.intro__skip:hover {
  background: var(--plum);
  color: white;
}

/* انیمیشن‌ها */

@keyframes introFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes introArch {
  from {
    opacity: 0;
    transform: translateY(35px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lanternAppear {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lanternGlow {
  from {
    filter: drop-shadow(
      0 0 5px rgba(255,217,120,.3)
    );
  }
  to {
    filter: drop-shadow(
      0 0 27px rgba(255,217,120,1)
    );
  }
}

@keyframes introText {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* محو شدن کل صفحه */
.intro--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

/* موبایل */
@media (max-width: 600px) {
  .intro__arch {
    min-height: 290px;
  }

  .intro__lantern {
    width: 45px;
    height: 90px;
  }

  .intro__divider {
    font-size: .85rem;
  }
}

/* دسترسی‌پذیری */
@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro__arch,
  .intro__lantern,
  .intro__name,
  .intro__divider,
  .intro__skip {
    animation: none;
  }

  .intro--closing {
    transition: none;
  }
}

/* وقتی اینترو باز است */
body.intro-open {
  overflow: hidden;
}

/* دکمه ورود به منو */
.intro__skip {
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 38px;
  background: var(--mustard);
  color: var(--olive-deep);
  border: 2px solid var(--grout);
  box-shadow: 0 4px 18px rgba(224,176,67,.25);
}

.intro__skip:hover {
  background: var(--lantern);
  color: var(--olive-deep);
  transform: translateY(-2px);
}

.intro__skip:active {
  transform: scale(.97);
}