/* assets/css/jf-product.css — استایل صفحه‌ی محصول (product.php و اجزای آن)
 * ۱۴۰۵/۰۸/۰۹: از <style>های داخل صفحه جدا شد تا در مرورگر کش شود (ترتیب همان ترتیب قبلی در صفحه است).
 * هر بخش با نام فایل منبعش مشخص شده؛ تغییر استایل همان بخش را اینجا انجام دهید.
 */

/* ==== product.php ==== */
        [x-cloak] { display: none !important; }
        .product-description { font-size: 1rem; line-height: 1.9; color: #334155; }
        .product-description h2 { font-size: 1.25rem; font-weight: 900; color: #1e293b; margin-top: 2.5rem; margin-bottom: 1rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }
        .product-description h2:first-child { margin-top: 0; }
        .product-description h3 { font-size: 1rem; font-weight: 800; color: #1e293b; margin: 1.25rem 0 .35rem; }
        .product-description p { margin: 0 0 .75rem; }
        .product-description a { color: #334e68; font-weight: 700; text-decoration: none; border-bottom: 1px solid #bcccdc; }
        .product-description a:hover { color: #102a43; border-color: #102a43; }
        .product-description .jf-snote { margin: 0 0 1rem; padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; color: #78350f; line-height: 1.9; }
        @media (min-width: 768px) { .product-description p { text-align: justify; } }
        .qty-btn { width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
        .qty-btn:hover { background-color: #f1f5f9; }
        .qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .toast-enter { transform: translateY(-100%); opacity: 0; }
        .toast-enter-active { transform: translateY(0); opacity: 1; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .toast-leave { transform: translateY(0); opacity: 1; }
        .toast-leave-active { transform: translateY(-100%); opacity: 0; transition: all 0.3s ease-in; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    

/* ==== components/product-gallery.php ==== */
.jfg{position:relative}
@media (min-width:1024px){.jfg-col{z-index:30}}
.jfg-set[hidden]{display:none}
.jfg-stage{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid #f1f1f1;border-radius:1rem;overflow:hidden}
.jfg-main{width:100%;height:100%}
.jfg-main .swiper-slide{display:flex;align-items:center;justify-content:center;background:#fff;cursor:zoom-in}
.jfg-main img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.jfg-main img.jfg-fill{object-fit:cover}
.jfg-nav{position:absolute;top:50%;z-index:5;width:40px;height:40px;margin-top:-20px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f2937;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.12);opacity:0;transition:opacity .2s,background .2s;cursor:pointer}
.jfg-nav svg{width:20px;height:20px}
.jfg-prev{right:12px}.jfg-next{left:12px}
.jfg-stage:hover .jfg-nav{opacity:1}
.jfg-nav:hover{background:#fff}
.jfg-nav.swiper-button-disabled{opacity:0!important;pointer-events:none}
.jfg-count{position:absolute;bottom:12px;left:12px;z-index:5;background:rgba(17,24,39,.6);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;direction:rtl}
.jfg-expand{position:absolute;top:12px;left:12px;z-index:5;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f2937;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer}
.jfg-expand svg{width:18px;height:18px}
.jfg-dots{position:absolute;bottom:14px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:6px;pointer-events:none}
.jfg-dots .swiper-pagination-bullet{width:6px;height:6px;margin:0!important;background:#9ca3af;opacity:.6;pointer-events:auto}
.jfg-dots .swiper-pagination-bullet-active{background:#1f2937;opacity:1;width:16px;border-radius:999px}
.jfg-thumbs{margin-top:12px}
.jfg-thumb{width:72px!important;height:72px;border-radius:.75rem;overflow:hidden;border:2px solid transparent;background:#fff;padding:0;cursor:pointer;opacity:.65;transition:opacity .2s,border-color .2s;box-shadow:0 0 0 1px #eee inset}
.jfg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jfg-thumb:hover{opacity:1}
.jfg-thumb.swiper-slide-thumb-active{opacity:1;border-color:#1f2937}
.jfg-lens{position:absolute;z-index:3;display:none;pointer-events:none;border:1px solid rgba(31,41,55,.35);background:rgba(255,255,255,.25);box-shadow:0 0 0 9999px rgba(255,255,255,.18)}
.jfg-zoom{position:absolute;top:0;right:calc(100% + 24px);z-index:40;display:none;background-color:#fff;background-repeat:no-repeat;border:1px solid #e5e7eb;border-radius:1rem;box-shadow:0 20px 50px -12px rgba(0,0,0,.25);pointer-events:none}
@media (max-width:639px){
  .jfg-stage{border-radius:.75rem}
  .jfg-thumbs{display:none}
  .jfg-count{bottom:10px;left:auto;right:12px}
}
@media (min-width:640px){.jfg-dots{display:none}}
@media (hover:none){.jfg-nav{display:none}}
/* نمای تمام‌صفحه */
.jfg-lb{position:fixed;inset:0;z-index:120;background:#0c0c0e;display:flex;flex-direction:column}
.jfg-lb[hidden]{display:none}
.jfg-lb-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#fff;z-index:3}
.jfg-lb-count{font-size:14px;font-weight:700;opacity:.85}
.jfg-lb-close{width:44px;height:44px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);cursor:pointer}
.jfg-lb-close:hover{background:rgba(255,255,255,.18)}
.jfg-lb-close svg{width:24px;height:24px}
.jfg-lb-main{flex:1;width:100%;min-height:0}
.jfg-lb-main .swiper-slide{display:flex;align-items:center;justify-content:center;overflow:hidden}
.jfg-lb-main .swiper-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.jfg-lb-main img{max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.jfg-lb-nav{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.jfg-lb-nav:hover{background:rgba(255,255,255,.25)}
.jfg-lb-nav svg{width:24px;height:24px}
.jfg-lb-prev{right:16px}.jfg-lb-next{left:16px}
.jfg-lb-nav.swiper-button-disabled{opacity:.25;pointer-events:none}
.jfg-lb-hint{text-align:center;color:rgba(255,255,255,.55);font-size:12px;padding:10px 0 16px}
@media (hover:none){.jfg-lb-nav{display:none}}
@media (hover:hover){.jfg-lb-hint{display:none}}

/* ==== product.php ==== */
.jf-cnote{display:flex;gap:6px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.9;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px}.jf-cnote svg{flex:0 0 16px;width:16px;height:16px;margin-top:4px;color:#64748b}

/* ==== product.php ==== */
.jf-shipline{display:flex;gap:6px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.9;color:#475569}.jf-shipline svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;color:#334e68}

/* ==== product.php ==== */
            .jf-sa{border:1px solid #fde68a;background:#fffbeb;border-radius:14px;padding:14px 16px;margin:0 0 1.5rem}
            .jf-sa__t{margin:0;font-size:14px;font-weight:800;color:#92400e}
            .jf-sa__d{margin:4px 0 10px;font-size:12.5px;color:#78716c;line-height:1.9}
            .jf-sa__d b{color:#1f2937}
            .jf-sa__btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border:0;border-radius:10px;background:#102a43;color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
            .jf-sa__btn:hover{background:#243b53}.jf-sa__btn:disabled{opacity:.6}
            .jf-sa__btn svg{width:18px;height:18px}
            .jf-sa__on{display:flex;gap:10px;align-items:flex-start;color:#065f46}
            .jf-sa__on svg{flex:0 0 20px;width:20px;height:20px;margin-top:3px;color:#059669}
            .jf-sa__on p{margin:0;font-size:13px;line-height:1.9}
            .jf-sa__on button{background:none;border:0;padding:0 4px;font:inherit;font-weight:700;color:#b91c1c;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
            .jf-sa-bar{display:inline-flex;align-items:center;justify-content:center;gap:6px}
            .jf-sa-bar svg{width:17px;height:17px}
            .jf-sa-bar--m{font-size:12.5px;white-space:nowrap;gap:4px}
            .jf-sa-bar--m svg{width:15px;height:15px}
            .jf-sa-bar.is-on{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;box-shadow:none}
            .jf-sz{position:relative}
            .jf-sz__ok{position:absolute;top:-7px;left:-5px;width:17px;height:17px;border-radius:999px;background:#102a43;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
            .jf-sz__ok svg{width:10px;height:10px}
            @keyframes jfSzBump{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
            .jf-sz-bump{animation:jfSzBump .3s ease-out}
            @media (prefers-reduced-motion:reduce){.jf-sz-bump{animation:none}}
            .jf-szout{margin-top:6px}
            .jf-szout__tg{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:4px 0;font-size:12.5px;font-weight:700;color:#64748b;cursor:pointer}
            .jf-szout__tg svg{width:15px;height:15px;transition:transform .2s}
            .jf-col-out{font-size:9px;font-weight:700;color:#f87171;margin-right:4px}
            

/* ==== components/product-trust.php ==== */
.jf-trust{border:1px solid #e5e7eb;border-radius:14px;background:#fafafa;padding:10px;margin:0 0 2.5rem}
.jf-trust__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jf-trust__b{display:flex;align-items:center;gap:8px;width:100%;text-align:right;font-family:inherit;cursor:pointer;background:#fff;border:1px solid #eef0f3;border-radius:10px;padding:9px 10px;font-size:12.5px;font-weight:700;color:#1f2937;line-height:1.6;transition:border-color .15s,background .15s}
.jf-trust__b:hover{border-color:#bcccdc;background:#f8fafc}
.jf-trust__b span{flex:1}
.jf-trust__b .jf-trust__i{flex:0 0 14px;width:14px;height:14px;color:#9fb3c8}
.jf-trust__row.is-hl{background:#fffbeb;border-radius:10px;transition:background 1.2s}
.jf-trust__b svg{flex:0 0 18px;width:18px;height:18px;color:#102a43}
.jf-trust__more{margin-top:8px}
.jf-trust__more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:12.5px;font-weight:700;color:#334e68;border-radius:10px}
.jf-trust__more>summary::-webkit-details-marker{display:none}
.jf-trust__more>summary:hover{background:#f0f4f8}
.jf-trust__more>summary svg{width:16px;height:16px;transition:transform .2s}
.jf-trust__more[open]>summary svg{transform:rotate(180deg)}
.jf-trust__rows{padding:0 6px}
.jf-trust__row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed #e5e7eb}
.jf-trust__row:last-child{border-bottom:0}
.jf-trust__ic{flex:0 0 34px;height:34px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;display:grid;place-items:center;color:#102a43}
.jf-trust__ic svg{width:18px;height:18px}
.jf-trust__t{display:block;font-weight:700;font-size:13.5px;color:#1f2937;line-height:1.7}
.jf-trust__d{display:block;font-size:12.5px;color:#6b7280;line-height:1.9}
.jf-trust__d a{color:#334e68;font-weight:700;text-decoration:none;border-bottom:1px solid #bcccdc}
.jf-trust__d a:hover{color:#102a43;border-color:#102a43}
.jf-trust__tel{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.jf-callbtn{flex:0 0 44px;width:44px;height:44px;border-radius:10px;border:1px solid #d9e2ec;background:#fff;color:#102a43;display:grid;place-items:center}
.jf-callbtn svg{width:20px;height:20px}

/* ==== components/product-qa.php ==== */
.jf-qa{border-top:1px solid #f1f5f9;padding-top:2rem;margin-top:2rem}
.jf-qa__title{font-size:1.25rem;font-weight:900;color:#1e293b;margin:0 0 1rem}
.jf-qa__block{margin-bottom:1.75rem}
.jf-qa__bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.jf-qa__bh h3{margin:0;font-size:1rem;font-weight:800;color:#1e293b}
.jf-qa__cnt{font-size:12px;color:#64748b}
.jf-qa__sum{display:flex;align-items:center;gap:6px;font-size:13px;color:#64748b}
.jf-qa__sum b{font-size:15px;color:#1e293b}
.jf-qa__hint{margin:0 0 6px;font-size:11.5px;color:#94a3b8}
.jf-qa__stars{display:inline-flex;gap:1px;vertical-align:middle}
.jf-qa__stars svg,.jf-qa__rate svg{fill:#e2e8f0}
.jf-qa__stars svg.is-on,.jf-qa__rate svg.is-on{fill:#f59e0b}
.jf-qa__stars svg.is-half{fill:#fcd34d}
.jf-qa__item{padding:14px 0;border-top:1px solid #f1f5f9}
.jf-qa__more{display:none}
.jf-qa__block.is-all .jf-qa__more{display:block}
.jf-qa__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:#94a3b8}
.jf-qa__meta b{color:#334155;font-weight:800}
.jf-qa__buyer{font-size:10.5px;font-weight:800;color:#047857;background:#ecfdf5;border-radius:999px;padding:1px 8px}
.jf-qa__body{margin:6px 0 0;font-size:14px;line-height:2;color:#334155}
.jf-qa__q{display:flex;gap:10px;align-items:flex-start}
.jf-qa__q .jf-qa__body{margin:0 0 4px;font-weight:700;color:#1e293b}
.jf-qa__qi{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#f0f4f8;color:#334e68;display:grid;place-items:center;font-weight:900;font-size:14px}
.jf-qa__ans{margin:10px 36px 0 0;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #eef2f6}
.jf-qa__ans b{display:block;font-size:12px;color:#102a43;margin-bottom:2px}
.jf-qa__ans p{margin:0;font-size:13.5px;line-height:2;color:#334155}
.jf-qa__showall{margin-top:6px;background:none;border:0;padding:6px 0;font:inherit;font-size:13px;font-weight:800;color:#334e68;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.jf-qa__form{margin-top:10px}
.jf-qa__ft{margin:6px 0 6px;font-size:13.5px;font-weight:800;color:#1e293b}
.jf-qa__rate{display:flex;gap:2px;margin-bottom:8px;direction:ltr;justify-content:flex-end}
.jf-qa__rate button{background:none;border:0;padding:2px;cursor:pointer;line-height:0}
.jf-qa__in{display:block;width:100%;margin-top:8px;border:1.5px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:9px 12px;font:inherit;font-size:13.5px;color:#1e293b;outline:none}
.jf-qa__in:focus{border-color:#102a43;background:#fff;box-shadow:0 0 0 4px rgba(16,42,67,.08)}
.jf-qa__ta{line-height:1.9;resize:vertical;min-height:84px}
.jf-qa__err{margin:6px 0 0;font-size:12px;font-weight:700;color:#dc2626}
.jf-qa__btn{margin-top:10px;height:44px;padding:0 22px;border:0;border-radius:12px;background:#102a43;color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.jf-qa__btn:hover{background:#243b53}.jf-qa__btn:disabled{opacity:.6;cursor:wait}
.jf-qa__note{margin:8px 0 0;font-size:11.5px;color:#94a3b8;line-height:1.9}
.jf-qa__ask{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px dashed #9fb3c8;border-radius:12px;background:#f8fafc;color:#102a43;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.jf-qa__ask:hover{background:#f0f4f8}
.jf-qa__ask svg{width:18px;height:18px}
.jf-qa__okmsg,.jf-qa__mine{margin:10px 0 0;padding:12px;border-radius:12px;background:#ecfdf5;color:#065f46;font-size:13px;line-height:1.9}

/* ==== components/product-tabs.php ==== */
/* مسیر صفحه: یک خط کوچک، بدون اسم محصول (اسم همان عنوان H1 است) */
.jf-bc{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;margin:0 0 14px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.jf-bc::-webkit-scrollbar{display:none}
.jf-bc a{color:#64748b;text-decoration:none}
.jf-bc a:hover{color:#102a43}
.jf-bc span{color:#cbd5e1}
@media (min-width:1024px){.jf-bc{font-size:13px;margin-bottom:24px}}

/* زیر عنوان: کد مدل، وضعیت موجودی (فقط ناموجود / کم)، گل‌برجسته، دسته‌ها */
.jf-pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#6b7280}
.jf-pmeta__code{background:#f3f4f6;border-radius:6px;padding:2px 8px}
.jf-pmeta__out{color:#dc2626;font-weight:700}
.jf-pmeta__low{color:#b45309;font-weight:700}
.jf-pmeta__emb{background:#fffbeb;border:1px solid #fde68a;color:#b45309;border-radius:6px;padding:1px 8px;font-weight:700}
.jf-pcats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#9ca3af}
.jf-pcats a{color:#486581;font-weight:700;text-decoration:none}
.jf-pcats a:hover{color:#102a43;text-decoration:underline}

/* معرفی بازشونده: حدود ۶ خط + محو شدن */
.jf-collapse{position:relative}
.jf-collapse.is-clamped .jf-collapse__body{max-height:22rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
/* دکمه‌های «نمایش همه‌ی مشخصات» و «ادامه‌ی معرفی»: دکمه‌ی تمام‌عرض با فلش پایین (باز که شد، فلش بالا) */
.jf-morebtn{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:11px 16px;border:1px solid #d9e2ec;border-radius:10px;background:#f8fafc;color:#102a43;font:inherit;font-size:13.5px;font-weight:700;line-height:1.6;cursor:pointer;transition:background-color .15s,border-color .15s}
.jf-morebtn:hover{background:#f0f4f8;border-color:#9fb3c8}
.jf-morebtn:focus-visible{outline:2px solid #102a43;outline-offset:2px}
.jf-morebtn[hidden]{display:none}
.jf-morebtn::after{content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;transition:transform .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.jf-morebtn[aria-expanded="true"]::after{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.jf-morebtn::after{transition:none}}

/* نوار راهنمای بخش‌ها */
.jf-ptabs{position:fixed;left:0;right:0;top:var(--jf-hdr-h,0px);z-index:40;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 6px rgba(16,42,67,.05);transform:translateY(-110%);visibility:hidden;transition:transform .2s ease,visibility .2s}
.jf-ptabs.is-on{transform:none;visibility:visible}
.jf-ptabs__in{max-width:80rem;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.jf-ptabs__in::-webkit-scrollbar{display:none}
.jf-ptabs a{position:relative;flex:0 0 auto;padding:12px 14px;font-size:13.5px;font-weight:700;color:#6b7280;text-decoration:none}
.jf-ptabs a.is-active{color:#102a43}
.jf-ptabs a.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#102a43}
.jf-ptabs a:focus-visible{outline:2px solid #102a43;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.jf-ptabs{transition:none}}
/* دسکتاپ: گالری چسبان زیر نوار بخش‌ها قرار بگیرد، نه پشت آن */
@media (min-width:1024px){html.jf-ptabs-on .jfg-col.lg\:sticky{top:calc(var(--jf-hdr-h,0px) + 64px) !important;transition:top .2s ease}}