/**
 * استایل‌های انتخابیِ ظاهر (کارت، هدر، فوتر، صفحهٔ محصول).
 * این فایل فقط وقتی بارگذاری می‌شود که مدیر دست‌کم یکی از استایل‌ها را
 * از حالت پیش‌فرض عوض کرده باشد؛ وگرنه اصلاً درخواست نمی‌شود.
 */

/* ============================================================
   استایل‌های انتخابی — کارت محصول، کارت مقاله، هدر و فوتر
   ------------------------------------------------------------
   همه با یک کلاس روی <body> عوض می‌شوند. مارک‌آپ یکی است، پس
   نه درخواست اضافه‌ای به سرور می‌رود، نه جاوااسکریپتی اجرا می‌شود.
   استایل ۱ همان حالت پیش‌فرض است و قانونی برایش نوشته نشده.
   ============================================================ */

/* ---------- کارت محصول ۲: مینیمالِ بدون قاب ---------- */
body.pcard-2 .product-card {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
body.pcard-2 .product-card:hover { transform: none; }
body.pcard-2 .product-card .thumb {
  border-radius: calc(var(--radius) - 2px); overflow: hidden;
  background: var(--c-soft); transition: box-shadow .25s ease;
}
body.pcard-2 .product-card:hover .thumb { box-shadow: 0 16px 34px -20px rgba(0,0,0,.42); }
body.pcard-2 .product-card .thumb img { transition: transform .5s ease; }
body.pcard-2 .product-card:hover .thumb img { transform: scale(1.05); }
body.pcard-2 .product-card .body { padding: 12px 2px 0; }
body.pcard-2 .product-card h3 { font-size: 14px; margin-bottom: 7px; min-height: 3.2em; }
body.pcard-2 .price { font-size: 15.5px; }
body.pcard-2 .pc-add { padding-top: 10px; }
body.pcard-2 .pc-add .btn {
  background: transparent; color: var(--c-text);
  border: 1px solid var(--c-border);
}
body.pcard-2 .pc-add .btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
body.pcard-2 .tag-off { border-radius: 999px; padding: 3px 10px; }

/* ---------- کارت محصول ۳: قیمت روی تصویر، دکمه با هاور ---------- */
body.pcard-3 .product-card { border-radius: calc(var(--radius) + 2px); }
body.pcard-3 .product-card .thumb { overflow: hidden; }
body.pcard-3 .product-card .thumb img { transition: transform .55s ease; }
body.pcard-3 .product-card:hover .thumb img { transform: scale(1.07); }
body.pcard-3 .product-card .pc-link { position: relative; display: block; }
/* قیمت به‌صورت نشان روی گوشهٔ تصویر */
body.pcard-3 .product-card .body { padding: 13px 15px 15px; }
body.pcard-3 .product-card h3 { font-size: 14px; margin-bottom: 8px; min-height: 3.2em; }
body.pcard-3 .price-row {
  background: var(--c-soft); border-radius: 11px; padding: 7px 11px; justify-content: space-between;
}
body.pcard-3 .price { font-size: 15.5px; }
body.pcard-3 .pc-add { padding-top: 10px; }
body.pcard-3 .pc-add .btn { border-radius: 999px; }
body.pcard-3 .tag-off {
  border-radius: 999px; padding: 4px 11px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-primary) 90%, transparent);
}
/* روی دسکتاپ دکمه با هاور بالا می‌آید تا کارت تمیزتر بماند */
@media (hover: hover) and (min-width: 861px) {
  body.pcard-3 .product-card .pc-add {
    max-height: 0; opacity: 0; overflow: hidden; padding-top: 0;
    transition: max-height .28s ease, opacity .2s ease, padding-top .28s ease;
  }
  body.pcard-3 .product-card:hover .pc-add,
  body.pcard-3 .product-card:focus-within .pc-add { max-height: 64px; opacity: 1; padding-top: 10px; }
}

/* ---------- کارت مقاله ۲: افقی و فشرده ---------- */
body.acard-2 .article-card { display: flex; flex-direction: row; align-items: stretch; }
body.acard-2 .article-card .thumb {
  flex: 0 0 40%; max-width: 190px; aspect-ratio: auto; min-height: 100%;
}
body.acard-2 .article-card .thumb img { height: 100%; aspect-ratio: auto; object-fit: cover; }
body.acard-2 .article-card .body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
body.acard-2 .article-card h3 {
  font-size: 15px; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.acard-2 .article-card p { -webkit-line-clamp: 2; font-size: 13px; }
body.acard-2 .article-meta { margin-top: auto; padding-top: 10px; font-size: 11.5px; }
body.acard-2 .article-card .read-more { display: none; }
@media (max-width: 560px) {
  body.acard-2 .article-card { flex-direction: column; }
  body.acard-2 .article-card .thumb { flex: none; max-width: none; aspect-ratio: 16/10; }
  body.acard-2 .article-card .thumb img { height: auto; aspect-ratio: 16/10; }
}

/* ---------- کارت مقاله ۳: تصویر تمام‌قاب با عنوان روی آن ---------- */
body.acard-3 .article-card {
  position: relative; border: 0; border-radius: calc(var(--radius) + 2px);
  overflow: hidden; min-height: 260px; display: flex; align-items: flex-end;
  background: var(--c-soft);
}
body.acard-3 .article-card:hover { transform: translateY(-3px); }
body.acard-3 .article-card .thumb { position: absolute; inset: 0; aspect-ratio: auto; }
body.acard-3 .article-card .thumb img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .55s ease; }
body.acard-3 .article-card:hover .thumb img { transform: scale(1.06); }
body.acard-3 .article-card .body {
  position: relative; z-index: 2; width: 100%; padding: 60px 18px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,.18) 30%, rgba(0,0,0,.82));
  color: #fff;
}
body.acard-3 .article-card h3 { color: #fff; font-size: 16px; margin-bottom: 6px; }
body.acard-3 .article-card p { color: rgba(255,255,255,.82); -webkit-line-clamp: 2; }
body.acard-3 .article-meta { color: rgba(255,255,255,.7); margin-top: 10px; }
body.acard-3 .article-card .read-more { color: #fff; }

/* ---------- هدر ۲: لوگو وسط، منو زیر آن ----------
   با flex نمی‌شود آیتم وسط را واقعاً وسط نگه داشت وقتی فقط یک طرفش محتوا دارد؛
   مارجینِ auto لوگو را وسطِ «فضای باقی‌مانده» می‌برد نه وسطِ هدر. پس سه‌ستونه
   می‌چینیم: دو ستون کناری هم‌عرض (۱fr) و لوگو در ستون میانی — یعنی دقیقاً وسط. */
@media (min-width: 769px) {
  body.hstyle-2 .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "spacer logo actions" "nav nav nav";
    align-items: center;
    height: auto;
    padding: 12px 0 0;
    column-gap: 18px;
    row-gap: 0;
  }
  body.hstyle-2 .header-inner .logo {
    grid-area: logo;
    justify-self: center;
    margin-inline: 0;               /* گرید خودش وسط‌چین می‌کند */
  }
  body.hstyle-2 .header-inner .header-actions {
    grid-area: actions;
    justify-self: end;
    margin-inline-start: 0;         /* خنثی‌سازیِ auto‌ی حالت پیش‌فرض */
  }
  body.hstyle-2 .header-inner .nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 10px 0 0;               /* خنثی‌سازیِ margin-inline-start: 10px */
    padding: 9px 0;
    border-top: 1px solid var(--c-border);
  }
}
/* ---------- هدر ۳: نوار باریک و چسبیده، بدون شیشه ---------- */
body.hstyle-3 .header {
  background: var(--c-surface); backdrop-filter: none;
  box-shadow: 0 1px 0 var(--c-border);
}
body.hstyle-3 .header-inner { height: 58px; gap: 14px; }
body.hstyle-3 .logo img { height: 28px; }
body.hstyle-3 .nav { gap: 18px; font-size: 13.5px; }
body.hstyle-3 .icon-btn { width: 36px; height: 36px; border-radius: 11px; }

/* ---------- فوتر ۲: فشرده و تک‌ردیفه ---------- */
body.fstyle-2 .footer-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
body.fstyle-2 .footer-grid .footer-brand { grid-column: auto; }
body.fstyle-2 .footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
body.fstyle-2 .footer h4 { margin-bottom: 8px; }
body.fstyle-2 .footer-bottom { justify-content: center; text-align: center; }
/* ---------- فوتر ۳: تیره ---------- */
body.fstyle-3 .footer {
  background: #101012; color: #E7E7EA; border-top: 0;
}
body.fstyle-3 .footer a,
body.fstyle-3 .footer p,
body.fstyle-3 .footer li { color: #B4B4BC; }
body.fstyle-3 .footer a:hover { color: #fff; }
body.fstyle-3 .footer h4 { color: #fff; }
body.fstyle-3 .footer-bottom { border-top-color: rgba(255,255,255,.12); color: #8E8E98; }
body.fstyle-3 .footer .dot { background: var(--c-accent); }


/* ══════════════ استایل‌های شیشه‌ای (Glassmorphism) ══════════════
   نکته‌های مهمِ پیاده‌سازی:
   ۱) backdrop-filter فقط وقتی معنا دارد که چیزی پشتِ عنصر باشد؛ برای همین
      پس‌زمینهٔ نیمه‌شفاف با color-mix از رنگ‌های خود تم ساخته می‌شود تا در
      تم روشن و تیره هر دو خوانا بماند.
   ۲) روی مرورگرهایی که backdrop-filter ندارند، @supports پس‌زمینهٔ مات‌تر
      می‌گذارد تا متن هیچ‌وقت ناخوانا نشود.
   ۳) blur روی موبایل سبک‌تر است چون فیلترِ سنگین اسکرول را کند می‌کند. */

:root {
  --glass-bg: color-mix(in srgb, var(--c-surface) 62%, transparent);
  --glass-br: color-mix(in srgb, var(--c-text) 12%, transparent);
  --glass-sh: 0 12px 34px -18px rgba(0, 0, 0, .38);
}

/* ---------- کارت محصول ۴: شیشه‌ای ---------- */
body.pcard-4 .product-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-br);
  border-radius: 20px;
  box-shadow: var(--glass-sh);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  overflow: hidden;
}
body.pcard-4 .product-card:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
body.pcard-4 .product-card .thumb { border-radius: 0; }
body.pcard-4 .product-card .body { background: transparent; }

/* ---------- کارت محصول ۵: لایهٔ شیشه‌ای روی تصویر ---------- */
body.pcard-5 .product-card {
  position: relative; border: 0; border-radius: 20px; overflow: hidden;
  background: var(--c-soft); box-shadow: var(--glass-sh);
}
body.pcard-5 .product-card .thumb { border-radius: 0; margin: 0; }
body.pcard-5 .product-card .body {
  position: absolute; inset-inline: 10px; bottom: 10px; z-index: 2;
  border-radius: 15px; padding: 12px 13px;
  background: color-mix(in srgb, var(--c-surface) 72%, transparent);
  border: 1px solid var(--glass-br);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
body.pcard-5 .product-card .body h3 { font-size: 14px; margin-bottom: 4px; }
body.pcard-5 .pc-add { padding-top: 9px; }

/* ---------- کارت مقاله ۴: شیشه‌ای ---------- */
body.acard-4 .article-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-br);
  border-radius: 20px;
  box-shadow: var(--glass-sh);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  overflow: hidden;
}
body.acard-4 .article-card:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
body.acard-4 .article-card .body { background: transparent; }

/* ---------- کارت مقاله ۵: کادر شیشه‌ای روی تصویر ---------- */
body.acard-5 .article-card {
  position: relative; display: block; border: 0; border-radius: 20px;
  overflow: hidden; background: var(--c-soft); box-shadow: var(--glass-sh);
  min-height: 230px;
}
body.acard-5 .article-card .thumb { position: absolute; inset: 0; margin: 0; border-radius: 0; }
body.acard-5 .article-card .thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
body.acard-5 .article-card .body {
  position: relative; z-index: 2; margin: auto 12px 12px; border-radius: 15px; padding: 13px 14px;
  background: color-mix(in srgb, var(--c-surface) 74%, transparent);
  border: 1px solid var(--glass-br);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  display: flex; flex-direction: column;
}
body.acard-5 .article-card { display: flex; flex-direction: column; justify-content: flex-end; }
body.acard-5 .article-card h3 { font-size: 15px; }
body.acard-5 .article-card p { -webkit-line-clamp: 2; }

/* ---------- هدر ۴: نوار شیشه‌ای ---------- */
body.hstyle-4 .header {
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--glass-br);
}

/* ---------- هدر ۵: نوار شیشه‌ای شناور ---------- */
body.hstyle-5 .header {
  background: transparent; border: 0; backdrop-filter: none; padding: 10px 0;
}
body.hstyle-5 .header-inner {
  background: color-mix(in srgb, var(--c-surface) 62%, transparent);
  border: 1px solid var(--glass-br);
  border-radius: 18px;
  padding-inline: 18px;
  height: 62px;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* ---------- فوتر ۴: شیشه‌ای ---------- */
body.fstyle-4 .footer {
  background: color-mix(in srgb, var(--c-surface) 58%, transparent);
  border-top: 1px solid var(--glass-br);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* ---------- فوتر ۵: شیشهٔ تیره ---------- */
body.fstyle-5 .footer {
  background: color-mix(in srgb, #101012 78%, transparent);
  border-top: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: #e8e8ea;
}
body.fstyle-5 .footer h4 { color: #fff; }
body.fstyle-5 .footer a,
body.fstyle-5 .footer p,
body.fstyle-5 .footer-text,
body.fstyle-5 .footer-contact li,
body.fstyle-5 .footer-contact a,
body.fstyle-5 .footer-legal { color: rgba(255, 255, 255, .72); }
body.fstyle-5 .footer a:hover,
body.fstyle-5 .footer-contact a:hover { color: var(--c-primary); }
body.fstyle-5 .footer-bottom { border-top-color: rgba(255, 255, 255, .12); }
body.fstyle-5 .socials a { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }

/* ---------- پشتیبان: مرورگر بدون backdrop-filter ----------
   بدون بلور، پس‌زمینهٔ نیمه‌شفاف متن را ناخوانا می‌کند؛ پس مات‌ترش می‌کنیم. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.pcard-4 .product-card,
  body.acard-4 .article-card,
  body.fstyle-4 .footer { background: color-mix(in srgb, var(--c-surface) 94%, transparent); }
  body.pcard-5 .product-card .body,
  body.acard-5 .article-card .body,
  body.hstyle-5 .header-inner { background: color-mix(in srgb, var(--c-surface) 96%, transparent); }
  body.hstyle-4 .header { background: color-mix(in srgb, var(--c-surface) 95%, transparent); }
  body.fstyle-5 .footer { background: #101012; }
}

/* بلور سنگین روی موبایل اسکرول را کند می‌کند */
@media (max-width: 768px) {
  body.pcard-4 .product-card,
  body.acard-4 .article-card,
  body.hstyle-4 .header,
  body.hstyle-5 .header-inner,
  body.fstyle-4 .footer,
  body.fstyle-5 .footer {
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* کسانی که «کاهش حرکت/جلوه» را روشن کرده‌اند */
@media (prefers-reduced-transparency: reduce) {
  body.pcard-4 .product-card, body.acard-4 .article-card,
  body.pcard-5 .product-card .body, body.acard-5 .article-card .body,
  body.hstyle-4 .header, body.hstyle-5 .header-inner, body.fstyle-4 .footer {
    background: var(--c-surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* تصویرِ خرابْ نباید متنِ alt را روی کارت بریزد؛ کادر خالیِ تمیز بهتر است.
   (متن alt همچنان برای صفحه‌خوان‌ها در دسترس است، فقط دیداری پنهان می‌شود.) */
.article-card .thumb, .product-card .thumb { overflow: hidden; background: var(--c-soft); }
body.acard-5 .article-card .thumb,
body.pcard-5 .product-card .thumb { font-size: 0; color: transparent; }

/* ---------- تقویم شمسی (مشترک با پنل مدیریت) ---------- */
.jdate-view { cursor: pointer; background: var(--c-surface) !important; }
.jdp {
  position: absolute; z-index: 2000; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); padding: 12px; direction: rtl;
}
.jdp[hidden] { display: none; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jdp-my { font-weight: 800; font-size: 14px; }
.jdp-nav { width: 30px; height: 30px; border: 0; background: var(--c-soft); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.jdp-nav:hover { background: var(--c-border); }
.jdp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.jdp-week span { text-align: center; font-size: 11px; color: var(--c-muted); padding: 4px 0; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-grid .jdp-e { height: 34px; }
.jdp-d { height: 34px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; }
.jdp-d:hover { background: var(--c-soft); }
.jdp-d.sel { background: var(--c-primary); color: #fff; font-weight: 800; }
.jdp-foot { display: flex; gap: 8px; margin-top: 10px; border-top: 1px solid var(--c-border); padding-top: 10px; }
.jdp-today, .jdp-clear { flex: 1; border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 9px; padding: 7px; cursor: pointer; font: inherit; font-size: 12.5px; }
.jdp-today:hover, .jdp-clear:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.jdp-my { display: flex; gap: 6px; align-items: center; }
.jdp-my select {
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface);
  color: var(--c-text); font: inherit; font-size: 13px; font-weight: 700; padding: 4px 6px; cursor: pointer;
}


/* ══════ اصلاح استایل‌های شیشه‌ای و هدر وسط‌چین در موبایل ══════ */

/* ۱) شیشه به چیزی برای شکستنِ نور نیاز دارد.
   پس‌زمینهٔ صفحه تخت بود و بلورِ روی رنگِ تخت هیچ تفاوتی نمی‌سازد؛
   یک هالهٔ ملایم و ثابت (بدون انیمیشن، بدون هزینهٔ اجرایی) اضافه می‌کنیم. */
body.pcard-4, body.pcard-5,
body.acard-4, body.acard-5,
body.hstyle-4, body.hstyle-5,
body.fstyle-4 {
  background-image:
    radial-gradient(60rem 32rem at 82% -8%,  color-mix(in srgb, var(--c-primary) 13%, transparent), transparent 62%),
    radial-gradient(46rem 30rem at 8% 12%,   color-mix(in srgb, var(--c-primary) 8%,  transparent), transparent 60%),
    radial-gradient(52rem 34rem at 50% 108%, color-mix(in srgb, var(--c-primary) 9%,  transparent), transparent 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* روی موبایل fixed باعث پرش هنگام اسکرول می‌شود */
@media (max-width: 768px) {
  body.pcard-4, body.pcard-5, body.acard-4, body.acard-5,
  body.hstyle-4, body.hstyle-5, body.fstyle-4 { background-attachment: scroll; }
}

/* ۲) در موبایل کارت شیشه‌ای باید مرز و سایهٔ محسوس‌تری داشته باشد،
   وگرنه از پس‌زمینه جدا نمی‌شود. */
@media (max-width: 768px) {
  body.pcard-4 .product-card,
  body.acard-4 .article-card {
    border-color: color-mix(in srgb, var(--c-text) 16%, transparent);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .45);
  }
  body.pcard-5 .product-card .body,
  body.acard-5 .article-card .body {
    background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  }
}

/* ۳) هدر «لوگو وسط» باید در موبایل هم وسط بماند.
   پیش از این فقط از ۷۶۹ پیکسل به بالا اعمال می‌شد و روی گوشی
   لوگو کنارِ راست می‌افتاد. */
@media (max-width: 768px) {
  body.hstyle-2 .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: 62px;
    column-gap: 10px;
  }
  body.hstyle-2 .header-inner .logo {
    grid-column: 2; justify-self: center; margin-inline: 0;
  }
  /* برگر سمت راست، بقیهٔ آیکن‌ها سمت چپ */
  body.hstyle-2 .header-inner .header-actions {
    grid-column: 3; justify-self: end; margin-inline-start: 0; gap: 6px;
  }
  body.hstyle-2 .header-inner .header-actions .burger {
    position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
  }
  body.hstyle-2 .header { position: sticky; }
  body.hstyle-2 .header-inner { position: relative; }
  /* دکمهٔ ورود در فضای تنگِ موبایل جا نمی‌شود */
  body.hstyle-2 .header-actions .btn-sm { display: none; }
}

/* ۴) هدر شیشه‌ایِ شناور در موبایل نباید از لبه بزند بیرون */
@media (max-width: 768px) {
  body.hstyle-5 .header { padding: 8px 0; }
  body.hstyle-5 .header-inner { padding-inline: 14px; height: 56px; border-radius: 15px; }
}


/* ══════════ استایل‌های صفحهٔ محصول ══════════
   هر سه فقط با CSS ساخته شده‌اند و مارک‌آپ یکی است، پس هیچ قابلیتی
   (گالری، انتخاب رنگ/طرح، افزودن به سبد) در هیچ حالتی از کار نمی‌افتد. */

/* ---------- ۲: کادر خرید چسبان ---------- */
@media (min-width: 861px) {
  body.pdp-2 .product-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; }
  body.pdp-2 .product-layout > div:last-child {
    position: sticky; top: 84px; align-self: start;
  }
  body.pdp-2 .buy-box {
    border: 1px solid var(--c-border); border-radius: 18px; padding: 18px;
    background: var(--c-surface); box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35);
  }
  /* بندانگشتی‌ها کنار تصویر اصلی، نه زیر آن */
  body.pdp-2 .product-layout > div:first-child {
    display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start;
  }
  body.pdp-2 .gallery-main { grid-column: 2; grid-row: 1; }
  body.pdp-2 .gallery-thumbs {
    grid-column: 1; grid-row: 1; margin: 0;
    flex-direction: column; flex-wrap: nowrap; max-height: 520px; overflow-y: auto;
  }
  body.pdp-2 .gallery-thumbs button { width: 66px; height: 66px; flex: 0 0 auto; }
}

/* ---------- ۳: تمام‌عرض با نوار خرید چسبانِ پایین ---------- */
body.pdp-3 .product-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
body.pdp-3 .gallery-main { border-radius: 20px; }
@media (min-width: 861px) {
  body.pdp-3 .gallery-main img { aspect-ratio: 16 / 10; }
  body.pdp-3 .product-layout > div:last-child { max-width: 780px; margin-inline: auto; width: 100%; }
  body.pdp-3 .gallery-thumbs { justify-content: center; }
}
/* نوار خرید چسبان پایین صفحه */
body.pdp-3 .buy-box {
  position: sticky; bottom: 0; z-index: 30;
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-border); border-radius: 18px;
  padding: 14px 16px; margin-top: 18px;
  box-shadow: 0 -8px 30px -18px rgba(0, 0, 0, .4);
}
/* نوار پایینِ سایت نباید رویش بیفتد */
body.pdp-3.has-bottombar .buy-box { bottom: calc(var(--bb-h, 0px) + var(--stack-gap, 10px)); }

@media (max-width: 860px) {
  /* در موبایل هر سه حالت یک تجربهٔ یکسان و امن دارند */
  body.pdp-2 .product-layout, body.pdp-3 .product-layout { grid-template-columns: 1fr; }
  body.pdp-2 .gallery-thumbs { flex-direction: row; max-height: none; }
}


/* ============================================================
   استایل‌های جدید (۲۰۲۶): کارت محصول ۶ و ۷، صفحهٔ محصول ۴ و ۵، فوتر ۶ و ۷
   فقط CSS روی همان نشانه‌گذاری موجود؛ رفتار (افزودن به سبد، عوض‌شدن عکس رنگ/طرح) دست‌نخورده است.
   ============================================================ */

/* ---------- کارت محصول ۶: بنتو نرم ---------- */
body.pcard-6 .product-card {
  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface));
  border: 0; border-radius: 22px; padding: 8px; overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
body.pcard-6 .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.35); border-color: transparent; }
body.pcard-6 .product-card .thumb { border-radius: 16px; overflow: hidden; }
body.pcard-6 .product-card .thumb img { transition: transform .5s ease; }
body.pcard-6 .product-card:hover .thumb img { transform: scale(1.04); }
body.pcard-6 .product-card .body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 10px;
  padding: 12px 6px 4px;
}
body.pcard-6 .product-card .pc-name { grid-column: 1 / -1; }
body.pcard-6 .product-card h3 { margin-bottom: 6px; min-height: 3.2em; }
body.pcard-6 .tag-off { border-radius: 999px; padding: 3px 10px; }
/* دکمهٔ گرد «+» کنار قیمت؛ متن برای صفحه‌خوان می‌ماند */
body.pcard-6 .product-card .pc-add { margin: 0; }
body.pcard-6 .product-card .pc-add .btn,
body.pcard-6 .product-card a.pc-add {
  width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 0; line-height: 0; gap: 0;
}
body.pcard-6 .product-card .pc-add .btn svg { width: 18px; height: 18px; }
body.pcard-6 .product-card a.pc-add::before { content: '›'; font-size: 22px; line-height: 1; }
body.pcard-6 .product-card .pc-add .btn:hover { transform: scale(1.06); }

/* ---------- کارت محصول ۷: ادیتوریال ---------- */
body.pcard-7 .product-card { background: none; border: 0; border-radius: 0; overflow: visible; }
body.pcard-7 .product-card:hover { transform: none; border-color: transparent; }
body.pcard-7 .product-card .thumb { border-radius: 14px; overflow: hidden; background: var(--c-soft); }
body.pcard-7 .product-card .thumb img { aspect-ratio: 4 / 5; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
body.pcard-7 .product-card:hover .thumb img { transform: scale(1.05); }
body.pcard-7 .product-card .body { padding: 12px 2px 0; }
body.pcard-7 .product-card h3 { font-size: 14px; font-weight: 500; min-height: 0; -webkit-line-clamp: 1; margin-bottom: 4px; }
body.pcard-7 .price { font-size: 15px; font-weight: 700; }
body.pcard-7 .tag-off { background: var(--c-text); border-radius: 6px; font-weight: 700; }
body.pcard-7 .product-card .pc-add { margin-top: 10px; }
body.pcard-7 .product-card .pc-add .btn,
body.pcard-7 .product-card a.pc-add {
  background: transparent; color: var(--c-text); border: 1px solid var(--c-border);
  min-height: 38px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
body.pcard-7 .product-card .pc-add .btn:hover { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
@media (hover: hover) and (min-width: 861px) {
  body.pcard-7 .product-card .pc-add { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
  body.pcard-7 .product-card:hover .pc-add, body.pcard-7 .product-card:focus-within .pc-add { opacity: 1; transform: none; }
}

/* ---------- صفحهٔ محصول ۴: گالری موزاییکی ---------- */
@media (min-width: 861px) {
  body.pdp-4 .product-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 36px; }
  body.pdp-4 .product-layout > div:last-child { position: sticky; top: 84px; align-self: start; }
  body.pdp-4 .gallery-main { border-radius: 20px; overflow: hidden; }
  body.pdp-4 .gallery-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  body.pdp-4 .gallery-thumbs button { width: auto; height: auto; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
  body.pdp-4 .gallery-thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--c-primary); }
  body.pdp-4 .gallery-thumbs img { transition: transform .5s ease; }
  body.pdp-4 .gallery-thumbs button:hover img { transform: scale(1.04); }
  /* عکس اول همان عکس بزرگ بالاست؛ تکرار نشود (برگشت به آن با فلش‌های عکس بزرگ) */
  body.pdp-4 .gallery-thumbs button:first-child { display: none; }
  /* اگر تعداد عکس‌های پیدا فرد شد، آخری تمام‌عرض می‌شود تا جای خالی نماند */
  body.pdp-4 .gallery-thumbs button:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* ---------- صفحهٔ محصول ۵: کارت خرید شناور ---------- */
body.pdp-5 .product-layout {
  padding: 18px; border-radius: 28px;
  background: color-mix(in srgb, var(--c-primary) 6%, var(--c-soft));
}
body.pdp-5 .gallery-main { border-radius: 20px; overflow: hidden; }
body.pdp-5 .product-layout > div:last-child {
  background: var(--c-surface); border-radius: 22px; padding: 24px;
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.28), 0 1px 0 rgba(0,0,0,.03);
}
@media (min-width: 861px) {
  body.pdp-5 .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; padding: 24px; }
  body.pdp-5 .product-layout > div:last-child { position: sticky; top: 84px; align-self: start; }
}
@media (max-width: 860px) {
  body.pdp-5 .product-layout { padding: 10px; border-radius: 20px; }
  body.pdp-5 .product-layout > div:last-child { padding: 16px; margin-top: -28px; position: relative; z-index: 2; }
}

/* ---------- فوتر ۶: گرادیان برند ---------- */
body.fstyle-6 .footer {
  background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary-dark, var(--c-primary)) 80%, #000));
  border-radius: 32px 32px 0 0; color: #fff;
}
body.fstyle-6 .footer h4 { color: #fff; }
body.fstyle-6 .footer a, body.fstyle-6 .footer p, body.fstyle-6 .footer-text,
body.fstyle-6 .footer-contact li, body.fstyle-6 .footer-contact a, body.fstyle-6 .footer-legal { color: rgba(255,255,255,.8); }
body.fstyle-6 .footer a:hover, body.fstyle-6 .footer-contact a:hover { color: #fff; }
body.fstyle-6 .footer-contact .fc-ic { color: #fff; }
body.fstyle-6 .footer-bottom { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
body.fstyle-6 .footer-bottom .footer-credit a { color: #fff; }
body.fstyle-6 .socials a { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
body.fstyle-6 .socials a:hover { background: #fff; color: var(--c-primary); }
body.fstyle-6 .footer .dot { background: #fff; }

/* ---------- فوتر ۷: نام بزرگ ---------- */
body.fstyle-7 .footer { background: var(--c-surface); border-top: 1px solid var(--c-border); overflow: hidden; position: relative; }
body.fstyle-7 .footer h4 { font-size: 13px; letter-spacing: .02em; color: var(--c-muted); font-weight: 700; }
body.fstyle-7 .footer a { color: var(--c-text); }
body.fstyle-7 .footer a:hover { color: var(--c-primary); }
body.fstyle-7 .footer::after {
  content: attr(data-brand); display: block; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: var(--font-display); font-weight: 900; line-height: .9; letter-spacing: -.02em;
  font-size: clamp(56px, 15vw, 220px); margin: 8px 0 -0.12em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--c-text) 18%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 10%, transparent), transparent 85%);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none; user-select: none;
}