/* =========================================================
   فروشگاه تجهیزات خورشیدی تهران انرژی — shop.css (V37)
   هم‌خانواده با style.css: سرمه‌ای #0f172a + نارنجی #ff6600 + وزیرمتن
   ========================================================= */

:root {
  --navy: #0f172a;
  --orange: #ff6600;
  --orange-soft: #ffb877;
  --green: #16a34a;
  --line: #e5e7eb;
  --muted: #667085;
  --bg: #f4f6f8;
  --radius-pill: 999px;
  /* ⬅ رنگ پس‌زمینهٔ کارت محصولات و پکیج‌ها — فقط همین یک خط را تغییر دهید */
  --card-bg: #ffffff;
}

/* ---------- قالب مشترک فروشگاه ---------- */
.shop-hero { background: var(--navy); color: #fff; padding: 108px max(22px, 6%) 40px }
.shop-hero-inner { max-width: 1150px; margin: 0 auto }
.shop-hero .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: #94a3b8; margin-bottom: 14px }
.shop-hero .crumbs a { color: #cbd5e1; text-decoration: none }
.shop-hero .crumbs a:hover { color: var(--orange-soft) }
.shop-hero h1 { font-size: clamp(22px, 3.2vw, 31px); font-weight: 900; margin: 0 0 8px }
.shop-hero p { color: #c9d3e0; font-size: 13px; margin: 0; line-height: 1.9 }
.shop-wrap { max-width: 1150px; margin: 0 auto; padding: 26px max(22px, 6%) 60px }

/* ---------- چیدمان لیست ---------- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start }
/* سایدبار فیلترها: چسبان و «اسکرول‌پذیر» تا فیلترهای زیاد از صفحه بیرون نزنند */
.shop-side { position: sticky; top: 92px; display: grid; gap: 10px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 2px }
.side-box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px }
.side-box > b { display: block; font-size: 12px; font-weight: 800; margin-bottom: 9px; color: var(--navy) }
.cat-links { display: grid; gap: 2px }
.cat-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; font-size: 11.5px; text-decoration: none; color: #172033 }
.cat-links a:hover { background: #fff4ec }
.cat-links a.on { background: var(--navy); color: #fff; font-weight: 800 }
.cat-links a small { color: inherit; opacity: .65; font-size: 9.5px }
.fgroup { border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 9px }
.fgroup > b { display: block; font-size: 11px; font-weight: 800; margin-bottom: 6px }
.chk { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 3px 0; cursor: pointer }
.chk input { accent-color: var(--orange); width: 14px; height: 14px; flex: none }
.range-row { display: flex; align-items: center; gap: 6px }
.range-row input { width: 100%; border: 1px solid #d5d9df; border-radius: 8px; padding: 6px 7px; font: inherit; font-size: 11px; text-align: center }
.range-sep { color: var(--muted); flex: none; font-size: 11px }
.apply-btn { width: 100%; margin-top: 8px; border: none; background: var(--navy); color: #fff; border-radius: 9px; padding: 8px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer }
.apply-btn:hover { background: var(--orange) }
.reset-link { display: block; text-align: center; margin-top: 7px; font-size: 10.5px; color: var(--muted); text-decoration: none }
.reset-link:hover { color: var(--orange) }

.shop-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 15px; margin-bottom: 16px }
.shop-count { font-size: 12px; color: var(--muted) }
.shop-count b { color: var(--navy) }
.sort-select { margin-inline-start: auto; border: 1px solid #d5d9df; border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 12px; background: #fff; color: var(--navy); cursor: pointer }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
/* کارت محصول: پس‌زمینه از --card-bg (بالای همین فایل) + کل کارت کلیک‌پذیر */
.p-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: .2s; position: relative }
.p-card[data-href] { cursor: pointer }
.p-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .09) }
.p-img { position: relative; display: block; background: #f6f8fb; aspect-ratio: 4 / 3; overflow: hidden }
.p-img img { width: 100%; height: 100%; object-fit: cover; transition: .3s }
.p-card:hover .p-img img { transform: scale(1.04) }
.p-flag { position: absolute; top: 10px; right: 10px; font-size: 9.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px }
.p-flag.ok { background: #e8f7ee; color: #15803d }
.p-flag.oos { background: #fee4e2; color: #b42318 }
.p-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.p-brand { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .3px }
.p-title { font-size: 13px; font-weight: 800; line-height: 1.75; margin: 0; color: var(--navy) }
.p-title a { color: inherit; text-decoration: none }
.p-title a:hover { color: var(--orange) }
.p-props { display: grid; gap: 3px }
.p-prop { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--muted) }
.p-prop b { color: #172033; font-weight: 700; white-space: nowrap }
.p-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px }
.p-price { font-size: 13.5px; font-weight: 900; color: var(--navy); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap }
/* برچسب «ناموجود» به‌جای قیمت برای کالاهای خارج از انبار */
.price-oos { color: #b42318; font-size: 13px; font-weight: 800 }
.p-price small { display: inline; font-size: 9.5px; color: var(--muted); font-weight: 400 }
.p-actions { display: flex; gap: 6px; width: 100% }
.p-actions .pbtn { flex: 1; min-width: 0; white-space: nowrap; padding-inline: 6px }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: none; border: 1px solid var(--navy); background: #fff; color: var(--navy); transition: .15s; white-space: nowrap }
.pbtn:hover { background: var(--navy); color: #fff }
.pbtn.add { background: var(--orange); border-color: var(--orange); color: #fff }
.pbtn.add:hover { background: #d95400; border-color: #d95400 }
.pbtn.call { border-color: var(--green); color: var(--green) }
.pbtn.call:hover { background: var(--green); color: #fff }
.pbtn.green { background: var(--green); border-color: var(--green); color: #fff }
.pbtn.green:hover { background: #12813c; border-color: #12813c }
.pbtn svg { width: 13px; height: 13px }
.pbtn[disabled] { opacity: .5; cursor: default }

.empty-state { background: #fff; border: 1px dashed #d8dee6; border-radius: 20px; padding: 46px 20px; text-align: center }
.empty-state svg { width: 44px; height: 44px; color: #cbd5e1 }
.empty-state h3 { margin: 12px 0 6px; font-size: 15px; color: var(--navy) }
.empty-state p { margin: 0 0 16px; font-size: 12px; color: var(--muted) }

.pager { display: flex; justify-content: center; gap: 7px; margin-top: 26px }
.pager a, .pager span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 12px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--navy); padding: 0 8px }
.pager .on { background: var(--orange); border-color: var(--orange); color: #fff }
.pager span.dis { opacity: .4; pointer-events: none }
.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; align-items: center }
.af-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff4ec; border: 1px solid #ffd9b8; color: #c2410c; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 11px; text-decoration: none }
.af-chip svg { width: 11px; height: 11px }
.af-clear { font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.af-clear:hover { color: #b42318 }

/* ---------- نوار جست‌وجوی بالای فهرست (دسکتاپ + موبایل) ---------- */
.shop-searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 14px; margin-bottom: 14px; transition: .18s }
.shop-searchbar:focus-within { border-color: var(--orange-soft); box-shadow: 0 0 0 3px rgba(255, 102, 0, .08) }
.shop-searchbar svg { width: 18px; height: 18px; color: var(--muted); flex: none }
.shop-searchbar input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; padding: 9px 0; min-width: 0 }
.shop-searchbar button { border: none; background: var(--orange); color: #fff; border-radius: 10px; padding: 9px 18px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; flex: none }
.shop-searchbar button:hover { background: #d95400 }

/* ---------- پیشنهاد «منظورتان این محصول است؟» ---------- */
.sug-banner { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #ffd9b8; border-radius: 16px; padding: 12px 16px; margin-bottom: 14px; flex-wrap: wrap }
.sug-banner img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: #f6f8fb; border: 1px solid var(--line); flex: none }
.sug-t { flex: 1; min-width: 160px }
.sug-t b { display: block; font-size: 11.5px; color: #c2410c; margin-bottom: 2px }
.sug-t a { font-size: 12.5px; font-weight: 800; color: var(--navy); text-decoration: none }
.sug-t a:hover { color: var(--orange) }
.sug-p { font-size: 12px; font-weight: 800; color: var(--navy); white-space: nowrap }

/* ---------- «منظورتان یکی از این محصولات است؟» — تا ۳ کاندید ---------- */
.sug-banner-col{display:grid;gap:8px;margin-bottom:14px}
.sug-title-row{font-size:12.5px;font-weight:800;color:#c2410c;background:#fff4ec;border:1px solid #ffd9b8;border-radius:12px;padding:9px 14px}

/* ---------- صفحهٔ محصول ---------- */
.pd-grid { display: grid; grid-template-columns: 470px 1fr; gap: 30px; align-items: start }
.pd-gallery { position: sticky; top: 92px }
.pd-main-img { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover }
.pd-thumbs { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap }
.pd-thumbs img { width: 66px; height: 66px; object-fit: cover; border-radius: 12px; border: 2px solid transparent; background: #f6f8fb; cursor: pointer; padding: 2px }
.pd-thumbs img.on { border-color: var(--orange) }
.pd-info h1 { font-size: clamp(19px, 2.4vw, 26px); font-weight: 900; color: var(--navy); margin: 6px 0 6px; line-height: 1.6 }
.pd-brandline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.pd-brandline b { color: var(--navy) }
.pd-rating { color: #f59e0b; font-size: 12px }
.pd-pricebox { display: flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 15px 0; flex-wrap: wrap }
.pd-price { font-size: 22px; font-weight: 900; color: var(--navy) }
.pd-price small { font-size: 12px; font-weight: 600; color: var(--muted) }
.pd-stock { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px }
.pd-stock.ok { background: #e8f7ee; color: #15803d }
.pd-stock.oos { background: #fee4e2; color: #b42318 }
.pd-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px }
.pd-cta .pbtn { font-size: 13px; padding: 12px 22px; border-radius: 12px }
.pd-cta .qty-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; background: #fff }
.pd-cta .qty-row input { width: 58px; text-align: center; border: none; font: inherit; font-weight: 800; font-size: 14px; outline: none }
.pd-cta .qty-row button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d5d9df; background: #fff; color: #c2410c; font-size: 16px; cursor: pointer; line-height: 1 }
.pd-short { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 13px; line-height: 2; color: #2a3547 }
.pd-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 15px 0 }
.pd-hl { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px }
.pd-hl small { display: block; font-size: 9.5px; color: var(--muted); margin-bottom: 4px }
.pd-hl b { font-size: 13px; color: var(--navy) }
.pd-sec { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; margin-top: 18px }
.pd-sec > h2 { margin: 0 0 12px; font-size: 16px; color: var(--navy) }
.pd-desc { font-size: 13px; line-height: 2.1; color: #2a3547; white-space: pre-line }
.pd-feats { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none }
.pd-feats li { display: flex; gap: 9px; font-size: 12.5px; color: #2a3547; line-height: 1.9 }
.pd-feats li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 6px; background: #e8f7ee; color: #15803d; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 4px; font-weight: 900 }
.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.spec-table tr { border-bottom: 1px solid #f0f2f5 }
.spec-table tr:last-child { border-bottom: none }
.spec-table td { padding: 10px 8px; vertical-align: top }
.spec-table td:first-child { color: var(--muted); width: 38%; font-weight: 600 }
.spec-table td:last-child { color: var(--navy); font-weight: 700 }
.spec-note { font-size: 10.5px; color: var(--muted); line-height: 1.8; margin-top: 3px }
.ds-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--navy); color: var(--navy); border-radius: 11px; padding: 10px 16px; font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; margin: 0 0 8px 10px }
.ds-btn:hover { background: var(--navy); color: #fff }
.ds-btn svg { width: 15px; height: 15px }
.pd-warn { background: #fff8f2; border: 1px solid #ffe4cc; color: #7c4a12; border-radius: 12px; padding: 11px 14px; font-size: 11.5px; line-height: 1.9 }

/* کارت‌های مشابه */
.reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px }

/* ---------- سبد خرید ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start }
.cart-list { display: grid; gap: 12px }
.c-line { display: grid; grid-template-columns: 86px 1fr auto; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; align-items: center }
.c-line img { width: 86px; height: 86px; object-fit: cover; border-radius: 13px; background: #f6f8fb; border: 1px solid var(--line) }
.c-t b { display: block; font-size: 13px; color: var(--navy); margin-bottom: 3px }
.c-t small { color: var(--muted); font-size: 11px; display: block }
.c-unit { font-size: 11.5px; color: var(--muted); margin-top: 6px }
.c-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px }
.c-total { font-size: 14px; font-weight: 900; color: var(--navy) }
.c-qty { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; padding: 3px 7px; background: #fff }
.c-qty input { width: 52px; text-align: center; border: none; font: inherit; font-weight: 800; font-size: 13.5px; outline: none }
.c-qty button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #d5d9df; background: #fff; color: #c2410c; font-size: 15px; cursor: pointer; line-height: 1 }
.c-del { border: none; background: none; color: #b42318; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px }
.c-del svg { width: 13px; height: 13px }
.cart-notices { display: grid; gap: 7px; margin-bottom: 14px }
.cart-notice { background: #fff8f2; border: 1px solid #ffe4cc; color: #7c4a12; border-radius: 12px; padding: 10px 14px; font-size: 11.5px }
.cart-empty { text-align: center; background: #fff; border: 1px dashed #d8dee6; border-radius: 22px; padding: 60px 20px }
.cart-empty svg { width: 52px; height: 52px; color: #cbd5e1 }
.cart-empty h3 { margin: 14px 0 6px; font-size: 16px; color: var(--navy) }
.cart-empty p { margin: 0 0 18px; color: var(--muted); font-size: 12.5px }
.sum-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; position: sticky; top: 92px }
.sum-box h3 { margin: 0 0 14px; font-size: 14.5px; color: var(--navy) }
.sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; color: #2a3547 }
.sum-row.total { border-top: 1px dashed var(--line); margin-top: 7px; padding-top: 12px; font-size: 15px; font-weight: 900; color: var(--navy) }
.coupon-row { display: flex; gap: 7px; margin: 12px 0 }
.coupon-row input { flex: 1; border: 1px solid #d5d9df; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 12px; min-width: 0 }
.coupon-row button { border: none; background: var(--navy); color: #fff; border-radius: 10px; padding: 0 15px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer }
.coupon-msg { font-size: 11px; min-height: 15px; margin-bottom: 8px }
.coupon-msg.ok { color: #15803d }
.coupon-msg.err { color: #b42318 }

/* ---------- تسویه حساب ---------- */
.co-layout { display: grid; grid-template-columns: 1fr 350px; gap: 22px; align-items: start }
.co-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px }
.co-box h3 { margin: 0 0 15px; font-size: 14.5px; color: var(--navy) }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.co-field { display: grid; gap: 5px }
.co-field.full { grid-column: 1 / -1 }
.co-field label { font-size: 11px; color: var(--muted); font-weight: 700 }
.co-field input, .co-field select, .co-field textarea { border: 1px solid #d5d9df; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 12.5px; background: #fff; color: var(--navy); width: 100% }
.co-field textarea { resize: vertical; min-height: 74px }
.co-field input:focus, .co-field textarea:focus, .co-field select:focus { outline: none; border-color: var(--orange-soft); box-shadow: 0 0 0 3px rgba(255, 102, 0, .08) }
.pay-note { background: #fff8f2; border: 1px solid #ffe4cc; color: #7c4a12; border-radius: 12px; padding: 11px 14px; font-size: 11.5px; line-height: 1.9; margin-top: 12px }
.co-items { display: grid; gap: 9px; margin-bottom: 12px }
.co-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #2a3547; padding: 7px 0; border-bottom: 1px dashed #f0f2f5 }
.co-item small { color: var(--muted) }
.co-submit { width: 100%; margin-top: 15px; border: none; background: var(--orange); color: #fff; border-radius: 13px; padding: 14px; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer }
.co-submit:hover { background: #d95400 }
.co-submit[disabled] { opacity: .6; cursor: default }
.co-err { color: #b42318; font-size: 12px; min-height: 17px; margin-top: 9px }
.co-ok { background: #e8f7ee; border: 1px solid #bbe7cb; color: #15803d; border-radius: 12px; padding: 12px 15px; font-size: 12px; margin-top: 10px }

/* ---------- سفارش ---------- */
.order-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; text-align: center }
.order-ok-ic { width: 64px; height: 64px; border-radius: 50%; background: #e8f7ee; color: #15803d; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px }
.order-ok-ic svg { width: 30px; height: 30px }
.order-card h1 { font-size: 20px; color: var(--navy); margin: 0 0 6px }
.order-card .num { font-size: 14px; color: var(--muted); margin-bottom: 18px }
.order-card .num b { color: var(--orange); font-size: 17px }
.order-sum { text-align: right; background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; margin: 15px 0 }
.order-sum .co-item:last-child { border-bottom: none }

/* ---------- پکیج‌ها ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.pkg-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: .2s }
.pkg-card[data-href] { cursor: pointer }
.pkg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .09) }
.pkg-card .p-img { aspect-ratio: 10 / 7 }
.pkg-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.pkg-body h3 { margin: 0; font-size: 14px; color: var(--navy); line-height: 1.8 }
.pkg-body p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.9 }
.pkg-foot { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 9px }
.pkg-foot .pbtn { width: 100% }
.pkg-sec { margin-top: 34px }
.pkg-sec > h2 { font-size: 18px; color: var(--navy); margin: 0 0 14px; display: flex; align-items: center; gap: 9px }
.pkg-sec > h2::before { content: ""; width: 5px; height: 22px; border-radius: 4px; background: var(--orange) }
.pkg-detail-grid { display: grid; grid-template-columns: 470px 1fr; gap: 30px; align-items: start }
.pkg-items { display: grid; gap: 8px }
.pkg-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 13px }
.pkg-item img { width: 52px; height: 52px; border-radius: 11px; object-fit: cover; background: #f6f8fb; border: 1px solid var(--line) }
.pkg-item b { font-size: 12.5px; color: var(--navy); display: block }
.pkg-item small { color: var(--muted); font-size: 11px }
.pkg-item .q { margin-inline-start: auto; background: #fff4ec; color: #c2410c; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 4px 11px; white-space: nowrap }

/* ---------- اسلایدرهای صفحهٔ اصلی ---------- */
.home-shop { max-width: 1150px; margin: 0 auto; padding: 10px max(22px, 6%) 8px }
.hcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.hcat { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; text-decoration: none; color: inherit; transition: .2s }
.hcat:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 23, 42, .08) }
.hcat img { width: 74px; height: 74px; border-radius: 16px; object-fit: cover; background: #f6f8fb; border: 1px solid var(--line); padding: 6px; flex: none }
.hcat b { display: block; font-size: 13.5px; color: var(--navy); margin-bottom: 4px }
.hcat small { display: block; font-size: 10.8px; color: var(--muted); line-height: 1.8 }
.hcat .go { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--orange); flex: none }
.hcat .go svg { width: 15px; height: 15px }
.slider-shell2 { position: relative }
.slider-row { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none }
.slider-row::-webkit-scrollbar { display: none }
.slider-row > * { flex: 0 0 calc((100% - 28px) / 3); min-width: 0 }
/* فلش‌ها — دقیقاً همان استایل و جایگاه اسلایدر «پروژه‌ها» */
.slider-shell2 .slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .18s; box-shadow: 0 8px 22px rgba(15, 23, 42, .10) }
.slider-shell2 .slide-arrow svg { width: 18px; height: 18px }
.slider-shell2 .slide-arrow:hover { background: var(--orange-soft); border-color: #ffdcc4 }
.slider-shell2 .slide-arrow:active { transform: translateY(-50%) scale(.93) }
.slider-shell2 .slide-arrow[hidden] { display: none }
.slider-shell2 .arr-start { right: 12px }   /* فلش راست — به عقب */
.slider-shell2 .arr-end { left: 12px }      /* فلش چپ — به جلو */

/* ---------- جداسازی بصری بخش‌های اسلایدر صفحهٔ اصلی ---------- */
.home-shop.pkg-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line) }
.home-shop.pkg-sec h2 { font-size: 20px; color: var(--navy); margin: 0 0 4px; display: flex; align-items: center; gap: 9px }
.home-shop.pkg-sec h2::before { content: ""; width: 5px; height: 22px; border-radius: 4px; background: var(--orange); flex: none }

/* ---------- پاپ‌آپ «کالا اضافه شد» — کوچک، غیرمسدودکننده ---------- */
.atc-pop { position: fixed; left: 20px; bottom: 20px; z-index: 96; width: 348px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); padding: 14px 15px 15px; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; max-height: min(74vh, 560px); overflow: auto }
.atc-pop.show { opacity: 1; transform: translateY(0) }
.atc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px }
.atc-check { width: 26px; height: 26px; border-radius: 50%; background: #e8f7ee; color: #15803d; display: flex; align-items: center; justify-content: center; flex: none }
.atc-check svg { width: 14px; height: 14px }
.atc-title { font-size: 13.5px; font-weight: 900; color: var(--navy); flex: 1 }
.atc-close { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none }
.atc-close:hover { background: #fee4e2; color: #b42318; border-color: #fec1bd }
.atc-close svg { width: 14px; height: 14px }
.atc-gocart { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--navy); color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 800; border-radius: 11px; padding: 11px 12px; transition: .15s }
.atc-gocart:hover { background: var(--orange) }
.atc-gocart svg { width: 15px; height: 15px }
.atc-sec-title { font-size: 11px; font-weight: 800; color: #c2410c; margin: 13px 0 8px; display: flex; align-items: center; gap: 6px }
.atc-sec-title::before { content: ""; width: 4px; height: 14px; border-radius: 3px; background: var(--orange) }
.atc-items { display: grid; gap: 7px }
.atc-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 7px 9px; background: #fbfcfe }
.atc-img { position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #f6f8fb; border: 1px solid var(--line); flex: none; display: block }
.atc-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.atc-plus { position: absolute; bottom: 2px; left: 2px; width: 18px; height: 18px; border-radius: 6px; border: none; background: var(--orange); color: #fff; font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 }
.atc-plus:hover { background: #d95400 }
.atc-t { flex: 1; min-width: 0 }
.atc-t a { display: block; font-size: 11.5px; font-weight: 800; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.atc-t a:hover { color: var(--orange) }
.atc-t small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.atc-qty { display: none; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 3px 7px; background: #fff; flex: none }
.atc-qty.on { display: flex }
.atc-qty b { min-width: 20px; text-align: center; font-size: 12px; color: var(--navy) }
.atc-qty button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #d5d9df; background: #fff; color: #c2410c; font-size: 13px; cursor: pointer; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center }
.atc-qty button:hover { background: #fff4ec }

@media (max-width: 640px) {
  .atc-pop { left: 10px; right: 10px; bottom: 96px; width: auto; max-width: none; border-radius: 16px; padding: 12px 12px 13px }
  .atc-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none }
  .atc-items::-webkit-scrollbar { display: none }
  .atc-item { flex: 0 0 178px; }
}

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 1080px) {
  .prod-grid, .pkg-grid { grid-template-columns: repeat(2, 1fr) }
  .pd-grid, .pkg-detail-grid { grid-template-columns: 1fr }
  .pd-gallery { position: static }
  .slider-row > * { flex-basis: calc((100% - 14px) / 2) }
}
@media (max-width: 860px) {
  .shop-layout, .cart-layout, .co-layout { grid-template-columns: 1fr }
  /* فیلترها و دسته‌ها بالای فهرست محصول — نه پایین صفحه (و بدون محدودیت ارتفاع) */
  .shop-side { position: static; max-height: none; overflow: visible }
  .shop-side.collapsible { display: none }
  .shop-side.collapsible.open { display: grid; margin-bottom: 16px }
  .filter-toggle { display: flex !important }
}
@media (max-width: 640px) {
  .prod-grid, .pkg-grid, .hcat-grid { grid-template-columns: 1fr }
  .slider-row > * { flex-basis: 82% }
  .c-line { grid-template-columns: 70px 1fr; }
  .c-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center }
  .co-grid { grid-template-columns: 1fr }
  .pd-cta { flex-direction: column; align-items: stretch }
  .pd-cta .qty-row { justify-content: center }
}
.filter-toggle { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 11px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--navy); cursor: pointer; margin-bottom: 14px }