@layer components {
  /* ============================================================
     پریچهر — CSS مشترک و کی‌فریم‌ها
     ============================================================ */

  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--pc-font-sans);
    font-size: var(--pc-text-base);
    line-height: var(--leading-body);
    font-weight: var(--weight-body);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6, .h-display {
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    font-weight: var(--weight-heading);
  }
  label, .label { letter-spacing: var(--tracking-label); font-weight: var(--weight-label); }
  .price { font-weight: var(--weight-price); font-variant-numeric: tabular-nums; }
  a { color: var(--primary); text-decoration: none; }
  a:hover { color: var(--primary-hover); }

  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--pc-radius-xs); }

  /* ورودی‌های عددی/تلفن/بارکد لاتین می‌مانند */
  input[type="tel"], input[type="number"], input[inputmode="numeric"], .latin-nums {
    direction: ltr; text-align: start; font-variant-numeric: tabular-nums;
  }

  /* آیکون‌های جهت‌دار */
  .rtl-flip { transform: scaleX(-1); }

  /* ============================================================
     کی‌فریم‌ها
     ============================================================ */
  @keyframes shimmer { 100% { transform: translateX(100%); } }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes sheet-down { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes modal-in { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes toast-in { from { transform: translateY(-16px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
  @keyframes vibrate {
    0%, 92%, 100% { transform: translateX(0); }
    93% { transform: translateX(-2px) rotate(-0.6deg); }
    95% { transform: translateX(2px) rotate(0.6deg); }
    97% { transform: translateX(-1px); }
  }
  @keyframes flash-row {
    from { background: color-mix(in oklch, var(--success) 26%, transparent); }
    to { background: transparent; }
  }
  @keyframes pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

  .anim-sheet-up { animation: sheet-up var(--pc-dur-sheet) var(--pc-ease-sheet); }
  .anim-drawer { animation: sheet-up var(--pc-dur-drawer) var(--pc-ease-spring); }
  .anim-search-in { animation: sheet-down 260ms var(--pc-ease-default); }
  .anim-modal-in { animation: modal-in var(--pc-dur-normal) var(--pc-ease-default); }
  .anim-fade-in { animation: fade-in var(--pc-dur-normal) var(--pc-ease-default); }
  .anim-toast-in { animation: toast-in var(--pc-dur-normal) var(--pc-ease-spring); }
  .anim-vibrate { animation: vibrate 3.4s var(--pc-ease-default) infinite; }
  .anim-flash { animation: flash-row 700ms var(--pc-ease-default); }
  .anim-pop { animation: pop 320ms var(--pc-ease-spring); }

  /* ============================================================
     اسکلت بارگذاری (shimmer)
     ============================================================ */
  .skeleton {
    background: var(--muted);
    position: relative;
    overflow: hidden;
    border-radius: var(--pc-radius-xs);
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: shimmer 1.25s ease-in-out infinite;
  }
  .dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); }

  /* ============================================================
     الگوهای امضایی
     ============================================================ */

  /* تیتر بخش وسط‌چین با خط مو محوشونده */
  .section-rule {
    height: 1px;
    width: min(100%, 12rem);
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.22), transparent);
  }
  .dark .section-rule { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); }

  /* خط مو ۰.۵ پیکسلی */
  .hairline { border: 0.5px solid var(--hairline); }
  .hairline-b { border-bottom: 0.5px solid var(--hairline); }
  .hairline-t { border-top: 0.5px solid var(--hairline); }

  /* نشان کج — امضای کارت محصول */
  .curve-badge-bottom { border-radius: var(--pc-radius-curve-bottom); }
  .curve-badge-top { border-radius: var(--pc-radius-curve-top); }

  /* دکمه‌ی اصلی */
  .btn-cta {
    background: linear-gradient(color-mix(in oklch, var(--primary) 82%, white), var(--primary));
    color: var(--primary-foreground);
    font-weight: var(--weight-heading);
    min-height: 2.95rem;
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-glow);
    transition: transform var(--pc-dur-micro) var(--pc-ease-default), filter var(--pc-dur-micro) var(--pc-ease-default);
  }
  .btn-cta:hover { filter: brightness(1.06); }
  .btn-cta:active { transform: scale(0.985); }
  .btn-cta:disabled { opacity: 0.5; box-shadow: none; pointer-events: none; }

  /* دکمه‌ی «به من اطلاع بده» برای ناموجود */
  .btn-notify {
    background: linear-gradient(var(--danger), var(--danger-strong));
    color: var(--on-status);
    font-weight: var(--weight-heading);
    min-height: 2.95rem;
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-glow-danger);
    transition: transform var(--pc-dur-micro) var(--pc-ease-default), filter var(--pc-dur-micro) var(--pc-ease-default);
  }
  .btn-notify:hover { filter: brightness(1.08); }
  .btn-notify:active { transform: scale(0.985); }

  /* فشردن — حس نیتیو */
  .press { transition: transform var(--pc-dur-micro) var(--pc-ease-default); }
  .press:active { transform: scale(0.94); }
  .press-lg { transition: transform var(--pc-dur-micro) var(--pc-ease-default); }
  .press-lg:active { transform: scale(0.985); }

  /* سواچ رنگ ناموجود — هاشور مورب */
  .swatch-unavailable {
    background-image: repeating-linear-gradient(45deg, rgba(169, 169, 169, 0.7) 0 2px, transparent 2px 6px);
  }

  /* حلقه‌ی استوری */
  .story-ring {
    background: linear-gradient(211deg, var(--accent), var(--primary));
    padding: 3px;
    border-radius: var(--pc-radius-full);
  }
  .story-ring-seen { background: var(--border-strong); }
  .story-ring > * { border: 3px solid var(--surface); border-radius: var(--pc-radius-full); }

  /* کارت خرید صفحه‌ی محصول */
  .buy-card {
    background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(248, 249, 252, 0.96));
    border: 0.5px solid var(--hairline);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-md);
  }
  .dark .buy-card { background: linear-gradient(color-mix(in oklch, var(--surface-raised) 96%, transparent), var(--surface)); }

  /* اسکرولر افقی دسته‌ها */
  .scroller-shell {
    background: linear-gradient(rgba(255, 255, 255, 0.96), rgba(248, 249, 252, 0.94));
    border: 0.5px solid var(--hairline);
    border-radius: var(--pc-radius-xl);
  }
  .dark .scroller-shell { background: linear-gradient(var(--surface-raised), var(--surface)); }
  .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
  .no-scrollbar::-webkit-scrollbar { display: none; }

  /* تصویر محصول ۲:۳ */
  .product-media {
    aspect-ratio: 2 / 3;
    position: relative;
    overflow: hidden;
    border-radius: var(--pc-radius-md);
    background: var(--surface-sunken);
  }
  .product-media > img, .product-media > .ph { width: 100%; height: 100%; object-fit: contain; }
  .product-media::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 42%);
  }
  .dark .product-media::after { background: linear-gradient(rgba(255,255,255,0.05), transparent 42%); }
  .dark .product-media { border: 0.5px solid var(--hairline); }
  .product-card:active .product-media > img,
  .product-card:active .product-media > .ph { transform: scale(1.03); }
  .product-media > img, .product-media > .ph { transition: transform var(--pc-dur-normal) var(--pc-ease-default); }
  .product-out-of-stock { filter: grayscale(1); opacity: 0.72; }

  /* جایگزین تصویر — نمونه‌ی رنگ/پارچه با تنوع خودکار (به‌جای عکس واقعی) */
  .ph {
    --ph-h: 265; --ph-c: 0.055; --ph-a: 22deg;
    position: relative; overflow: hidden;
    display: grid; place-items: center; text-align: center;
    background:
      /* فرم نرم پارچه */
      radial-gradient(58% 42% at 32% 30%, oklch(0.99 0.012 var(--ph-h) / 0.85), transparent 70%),
      radial-gradient(64% 46% at 72% 74%, oklch(0.78 calc(var(--ph-c) * 1.5) var(--ph-h) / 0.55), transparent 72%),
      /* بافت ریز */
      repeating-linear-gradient(var(--ph-a), oklch(0.5 0.02 var(--ph-h) / 0.05) 0 1px, transparent 1px 5px),
      linear-gradient(155deg, oklch(0.95 var(--ph-c) var(--ph-h)), oklch(0.87 calc(var(--ph-c) * 1.25) calc(var(--ph-h) + 18)));
    color: oklch(0.34 0.08 var(--ph-h));
  }
  .dark .ph {
    background:
      radial-gradient(58% 42% at 32% 30%, oklch(0.42 calc(var(--ph-c) * 1.4) var(--ph-h) / 0.7), transparent 70%),
      radial-gradient(64% 46% at 72% 74%, oklch(0.24 var(--ph-c) var(--ph-h) / 0.8), transparent 72%),
      repeating-linear-gradient(var(--ph-a), oklch(0.9 0.02 var(--ph-h) / 0.045) 0 1px, transparent 1px 5px),
      linear-gradient(155deg, oklch(0.32 calc(var(--ph-c) * 0.9) var(--ph-h)), oklch(0.24 calc(var(--ph-c) * 0.7) calc(var(--ph-h) + 18)));
    color: oklch(0.86 0.03 var(--ph-h));
  }
  .ph-label {
    position: relative; z-index: 1; max-width: 88%;
    font-size: var(--pc-text-xs); font-weight: var(--weight-label);
    opacity: 0.95; padding: 0.5rem; line-height: 1.5;
  }
  /* تنوع رنگ بر پایه‌ی جایگاه آیتم در فهرست — نیاز به تغییر قالب ندارد */
  .product-card:nth-child(8n + 1) .ph, li:nth-child(8n + 1) .ph, a:nth-child(8n + 1) > .ph { --ph-h: 262; --ph-c: 0.045; --ph-a: 22deg; }
  .product-card:nth-child(8n + 2) .ph, li:nth-child(8n + 2) .ph, a:nth-child(8n + 2) > .ph { --ph-h: 28;  --ph-c: 0.05;  --ph-a: 68deg; }
  .product-card:nth-child(8n + 3) .ph, li:nth-child(8n + 3) .ph, a:nth-child(8n + 3) > .ph { --ph-h: 196; --ph-c: 0.045; --ph-a: 12deg; }
  .product-card:nth-child(8n + 4) .ph, li:nth-child(8n + 4) .ph, a:nth-child(8n + 4) > .ph { --ph-h: 148; --ph-c: 0.04;  --ph-a: 84deg; }
  .product-card:nth-child(8n + 5) .ph, li:nth-child(8n + 5) .ph, a:nth-child(8n + 5) > .ph { --ph-h: 342; --ph-c: 0.045; --ph-a: 38deg; }
  .product-card:nth-child(8n + 6) .ph, li:nth-child(8n + 6) .ph, a:nth-child(8n + 6) > .ph { --ph-h: 88;  --ph-c: 0.035; --ph-a: 56deg; }
  .product-card:nth-child(8n + 7) .ph, li:nth-child(8n + 7) .ph, a:nth-child(8n + 7) > .ph { --ph-h: 308; --ph-c: 0.04;  --ph-a: 6deg; }
  .product-card:nth-child(8n + 8) .ph, li:nth-child(8n + 8) .ph, a:nth-child(8n + 8) > .ph { --ph-h: 62;  --ph-c: 0.04;  --ph-a: 74deg; }

  /* نوار پیشرفت */
  .track { background: var(--muted); border-radius: var(--pc-radius-full); overflow: hidden; }
  .track > .bar { background: linear-gradient(90deg, var(--primary), color-mix(in oklch, var(--accent) 70%, var(--primary))); height: 100%; border-radius: var(--pc-radius-full); transition: width var(--pc-dur-normal) var(--pc-ease-default); }

  /* ============================================================
     حرکت کم‌شده
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ============================================================
     چاپ (فاکتور و رسید)
     ============================================================ */
  @media print {
    .no-print, .state-bar, header.floating, .tabbar { display: none !important; }
    body { background: #fff; }
  }

}