/* ============================================
   MAIN — reset, tokens, base, layout, utils
   ============================================ */

/* ── Local fonts ── */
@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb(FaNum)-Medium.woff2') format('woff2'),
       url('../fonts/KalamehWeb(FaNum)-Medium.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb(FaNum)-SemiBold.woff2') format('woff2'),
       url('../fonts/KalamehWeb(FaNum)-SemiBold.woff')  format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb(FaNum)-Bold.woff2') format('woff2'),
       url('../fonts/KalamehWeb(FaNum)-Bold.woff')  format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/Comfortaa-Medium.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Persian text → Kalameh, Latin/English fallback → Comfortaa */
:root {
  --font-fa: 'Kalameh', Tahoma, sans-serif;
  --font-en: 'Comfortaa', sans-serif;

  --sage:        #88B5A8;
  --sage-dark:   #7FA99B;
  --sage-light:  #B8D4CD;
  --blush:       #F5DDD8;
  --blush-dark:  #E8C5BF;
  --offwhite:    #F8F6F3;
  --concrete:    #9E9C97;
  --black:       #1A1A1A;
  --white:       #ffffff;

  --radius-card: 22px;
  --radius-pill: 50px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-btn:  0 4px 16px rgba(136,181,168,0.45);

  --max-width: 1200px;
  --col-gap:   16px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-fa);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-fa);
  background: #d7ebed;
  color: var(--black);
  direction: rtl;
  overflow-x: hidden;
}

/* English-only elements */
/*.section-title-en,*/
/*.feat-price .price-old,*/
/*.feat-price .price-new,*/
/*.item-price .price-old,*/
/*.item-price .price-new,*/
/*.modal-price-old,*/
/*.modal-price-new,*/
/*.hero-meta-item,*/
/*.hero-open-pill {*/
/*  font-family: var(--font-en);*/
/*}*/

/* terrazzo texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, #E8C5BF 1px, transparent 1px),
    radial-gradient(circle, #B4B2AD 1px, transparent 1px),
    radial-gradient(circle, #88B5A8 0.8px, transparent 0.8px);
  background-size: 60px 60px, 90px 90px, 45px 45px;
  background-position: 10px 10px, 35px 40px, 55px 20px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Page wrapper ── */
.page-content {
  padding: 0 var(--col-gap) 48px;
}

/* ── Loading styles → loading.css ── */

/* ── Error state ── */
.status-error {
  text-align: center;
  padding: 80px 20px;
  color: #dc2626;
  font-size: 0.95rem;
}

/* ── Page entrance animation ── */
#app > *:first-child {
  animation: pageEnter 0.6s ease both;
}

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

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sage-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--sage); }

/* ── Utilities ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Section divider ── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blush-dark), transparent);
  opacity: 0.5;
  margin: 8px 0;
}

/* ── Scroll margin for sticky tab offset ── */
.category-section {
  scroll-margin-top: 70px;
}