/* ============================================================
   دیباگ | استایل صفحه‌ی تک‌محصول
   ------------------------------------------------------------
   فقط در shop/products/show بارگذاری می‌شود.
   ⚠️ .product-wrap و .buybox عمداً این‌جا نیستند: صفحه‌های سبد،
   تسویه و پنل مشتری هم از همان چیدمان دوستونی استفاده می‌کنند و در
   shop.css مانده‌اند.
   ============================================================ */

@layer components{
    /* ---------------- گالری ---------------- */
    .gallery{display:flex;flex-direction:column;gap:.7rem}
    .gallery__main{
        aspect-ratio:16/9;
        border-radius:var(--r-lg);
        overflow:hidden;
        border:1px solid var(--line);
        background:var(--surface-2);
        box-shadow:var(--shadow-2);
    }
    .gallery__main img{inline-size:100%;block-size:100%;object-fit:cover}
    .gallery__empty{
        display:grid;
        place-items:center;
        block-size:100%;
        color:var(--muted);
        font-size:var(--fs-sm);
    }
    .gallery__strip{
        display:flex;
        gap:.6rem;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding-block-end:.3rem;
        scrollbar-width:thin;
    }
    .gallery__strip img{
        flex:none;
        inline-size:6.2rem;
        aspect-ratio:16/10;
        object-fit:cover;
        border-radius:var(--r-sm);
        border:1px solid var(--line);
        scroll-snap-align:start;
        cursor:pointer;
        transition:border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
        opacity:.75;
    }
    .gallery__strip img:hover{opacity:1;border-color:var(--line-2)}
    /* حلقه‌ی دوتایی به‌جای فقط رنگ حاشیه: روی بندانگشتی تیره هم دیده
       می‌شود، روی روشن هم. */
    .gallery__strip img[aria-current="true"]{
        opacity:1;
        border-color:var(--accent);
        box-shadow:0 0 0 2px var(--accent-200);
    }

    .specs{display:flex;flex-direction:column;font-size:var(--fs-sm)}
    .spec{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding-block:.65rem;
        border-block-end:1px dashed var(--line);
    }
    .spec:last-child{border-block-end:0}
    .spec dt{color:var(--muted);flex:none;unicode-bidi:plaintext}
    .spec dd{font-weight:600;unicode-bidi:plaintext;text-align:end}

    /* ---------------- بلوک پاسخ‌محور ---------------- */
    .answer{
        display:grid;
        gap:1px;
        background:var(--line);
        border:1px solid var(--line);
        border-radius:var(--r);
        overflow:hidden;
    }
    .answer__row{
        display:grid;
        grid-template-columns:9.5rem minmax(0,1fr);
        gap:1.2rem;
        padding:1.05rem 1.3rem;
        background:var(--surface);
    }
    .answer__q{font-weight:700;font-size:var(--fs-sm);color:var(--accent-text)}
    .answer__a{font-size:var(--fs-sm);color:var(--muted);line-height:1.95}
    @media (max-width:640px){
        .answer__row{grid-template-columns:1fr;gap:.25rem}
    }

    /* ---------------- متن توضیحات ---------------- */
    .prose{color:var(--ink-2);line-height:2.05}
    .prose > * + *{margin-block-start:1rem}
    .prose h2,.prose h3,.prose h4{color:var(--ink);margin-block-start:1.9rem}
    .prose ul,.prose ol{padding-inline-start:1.4rem;display:flex;flex-direction:column;gap:.45rem}
    .prose ul{list-style:disc}
    .prose ol{list-style:decimal}
    .prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
    .prose img{border-radius:var(--r-sm)}
    .prose blockquote{
        border-inline-start:3px solid var(--accent);
        padding-inline-start:1rem;
        color:var(--muted);
    }
    .prose code{
        unicode-bidi:isolate;
        direction:ltr;
        font-family:ui-monospace,monospace;
        font-size:.86em;
        background:var(--surface-2);
        border:1px solid var(--line);
        border-radius:var(--r-xs);
        padding-inline:.35em;
    }

    /* ---------------- تغییرات نسخه ---------------- */
    /* ---------------- تاریخچه‌ی نسخه‌ها: خط زمانی ----------------
       فهرست کارت‌های جدا، تاریخچه به نظر نمی‌رسید. یک خط عمودی و یک
       نقطه روی هر نسخه، ترتیب زمانی را بدون هیچ متن اضافه‌ای می‌گوید. */
    .changelog{
        position:relative;
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:var(--space-s);
        padding-inline-start:1.6rem;
    }
    .changelog::before{
        content:"";
        position:absolute;
        inset-block:.6rem;
        inset-inline-start:.32rem;
        inline-size:1px;
        background:var(--line);
    }
    .cl-item{position:relative}
    .cl-item::before{
        content:"";
        position:absolute;
        inset-block-start:.55rem;
        inset-inline-start:-1.6rem;
        inline-size:.7rem;
        block-size:.7rem;
        border-radius:50%;
        background:var(--surface);
        border:2px solid var(--line-2);
    }
    .cl-item[data-latest="1"]::before{
        background:var(--accent);
        border-color:var(--accent);
    }
    .cl-head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
    .cl-date{font-size:var(--fs-xs);color:var(--muted)}
    .cl-body{
        margin-block-start:.55rem;
        font-size:var(--fs-sm);
        color:var(--ink-2);
        line-height:1.95;
        white-space:pre-line;
        max-inline-size:62ch;
    }

    /* ---------------- پرسش‌های متداول ---------------- */
    .faq{display:flex;flex-direction:column;gap:.6rem}
    .faq details{
        border:1px solid var(--line);
        border-radius:var(--r-sm);
        background:var(--surface);
        overflow:hidden;
    }
    .faq details[open]{border-color:var(--line-2)}
    .faq summary{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        cursor:pointer;
        padding:.95rem 1.15rem;
        font-weight:700;
        font-size:var(--fs-sm);
        list-style:none;
        unicode-bidi:plaintext;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{
        content:"+";
        display:inline-block;
        color:var(--ink);
        font-weight:700;
        font-size:1rem;
        line-height:1;
        transform-origin:center;
        transition:transform .2s ease;
    }
    .faq details[open] summary::after{transform:rotate(45deg)}
    .faq .faq-a{
        padding-inline:1.15rem;
        padding-block-end:1.1rem;
        font-size:var(--fs-sm);
        color:var(--muted);
        line-height:1.95;
        unicode-bidi:plaintext;
    }

  /* ---------------- نوار خرید چسبان موبایل ----------------
     صفحه‌ی تک‌محصول تنها جایی است که خرید اتفاق می‌افتد؛ قیمت و دکمه
     نباید ته صفحه گم شوند. روی موبایل این نوار جای نوار ناوبری پایین
     را می‌گیرد تا دو نوار روی هم جمع نشوند. */
  .buybar{display:none}

  @media (max-width:860px){
    .has-buybar .tabbar{display:none}

    .buybar{
      position:fixed;
      inset-inline:0;
      inset-block-end:0;
      z-index:60;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--space-s);
      padding-block:.7rem;
      padding-inline:clamp(1rem,4vw,1.4rem);
      padding-block-end:calc(.7rem + env(safe-area-inset-bottom,0px));
      background:var(--bg-2);
      border-block-start:1px solid var(--line);
    }
    .buybar .price{font-size:var(--fs-lg)}
    .buybar .btn{flex:0 1 auto}

    .has-buybar{padding-block-end:calc(4.4rem + env(safe-area-inset-bottom,0px))}

    /* روی موبایل جعبه‌ی خرید دیگر چسبان نیست — نوار پایین کارش را
       می‌کند و این‌جا فقط مشخصات می‌ماند. */
    .buybox{position:static;inset-block-start:auto}
  }

  @supports (backdrop-filter:blur(4px)){
    @media (max-width:860px){
      .buybar{
        background:color-mix(in oklab,var(--bg-2) 93%,transparent);
        backdrop-filter:blur(16px) saturate(150%);
      }
    }
  }

  /* ============================================================
     صفحه‌ی تک‌محصول — جایی که خرید اتفاق می‌افتد
     ============================================================ */

  /* ---------------- ردیف شناسنامه زیر عنوان ---------------- */
  .p-lead{margin-block:1rem 0}
  .p-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-block-start:var(--space-s);
  }

  /* ---------------- شناسنامه‌ی فنی ----------------
     ⚠️ این‌ها قبلاً داخل جعبه‌ی خرید بودند و ارتفاعش را به ۶۳۸ پیکسل
     می‌رساندند — یعنی جعبه‌ای که چسبان بودنش بی‌فایده بود چون از
     ارتفاع صفحه بلندتر می‌شد. */
  /* ⚠️ عمداً از ترفند «gap یک‌پیکسلی روی پس‌زمینه‌ی خط» استفاده نشده:
     آن ترفند فقط وقتی درست است که ردیف آخر پر باشد. با شش قلم و پنج
     ستون، خانه‌ی خالیِ ردیف دوم به رنگ خط درمی‌آید و یک بلوک خاکستری
     بی‌معنی می‌سازد. حاشیه‌ی مستقل روی هر کارت این مشکل را ندارد. */
  .p-facts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
    gap:.6rem;
  }
  .p-fact{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:.6rem;
    row-gap:.15rem;
    padding-block:var(--space-xs);
    padding-inline:var(--space-s);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-sm);
  }
  .p-fact__ico{
    grid-row:1 / span 2;
    align-self:center;
    inline-size:1.15rem;
    block-size:1.15rem;
    color:var(--accent-text);
  }
  .p-fact__k{font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
  .p-fact__v{
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--ink);
    line-height:1.7;
    unicode-bidi:plaintext;
  }

  /* ---------------- جعبه‌ی خرید ---------------- */
  .buybox__price{align-items:center;gap:.6rem}
  .buybox__off{flex:none}

  .buybox .btn__ico{inline-size:1.15rem;block-size:1.15rem}

  .buybox__trust{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    padding-block-start:var(--space-xs);
    border-block-start:1px solid var(--line);
    list-style:none;
  }
  .buybox__trust li{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    font-size:var(--fs-xs);
    line-height:1.85;
    color:var(--ink-2);
  }
  .buybox__ico{
    flex:none;
    inline-size:1rem;
    block-size:1rem;
    margin-block-start:.22rem;
    color:var(--accent-text);
  }
}