/* ==========================================================================
   بام پنجم — صفحات نمونه پروژه
   ==========================================================================

   موبایل‌فرست: قاعده‌های بدون media query چیدمان گوشی‌اند و صفحه‌های بزرگ‌تر
   فقط با min-width اضافه می‌شوند. برخلاف blog.css هیچ max-width ای این‌جا نیست.

   توکن‌های رنگ و شعاع از :root در blog.css می‌آیند، پس این فایل همیشه بعد از
   آن لود می‌شود. حداقل اندازه‌ی متن (‎.75rem‎) هم همان‌جا توضیح داده شده.
   ========================================================================== */

.sp-page {
    --sp-dark: #0f172a;
    --sp-worker: #f59e0b;
    --sp-radius: 20px;
    --sp-summary-width: 340px;
    /* هدر ثابت سایت روی گوشی کمی بلندتر از padding بالای main است */
    padding-block: 1.25rem 2rem;
}

/* ---------------------------- مسیر صفحه ---------------------------- */
.sp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--text-muted);
}

.sp-breadcrumb li + li::before {
    content: "‹";
    margin-inline-end: .25rem;
    color: var(--border-soft);
}

.sp-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.sp-breadcrumb a:hover { color: var(--primary-color); }

.sp-breadcrumb [aria-current] { color: var(--text-main); font-weight: 600; }

/* ------------------------------ لیست ------------------------------ */
.sp-list-head { margin-bottom: 1.25rem; }

.sp-list-head h1 {
    font-size: clamp(1.3rem, 5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: .5rem;
}

.sp-list-head p {
    color: var(--text-muted);
    line-height: 1.9;
    margin-bottom: .75rem;
    max-width: 60ch;
}

.sp-list-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: .8rem;
    font-weight: 700;
}

.sp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.sp-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-soft);
    border-radius: var(--sp-radius);
}

/* ------------------------------ کارت ------------------------------ */
.sp-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--sp-radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.sp-card:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.sp-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.sp-card-link:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: -3px;
    border-radius: var(--sp-radius);
}

.sp-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--surface-softer);
}

.sp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-card-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2.5rem;
    color: var(--border-soft);
}

.sp-card-badge {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.sp-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    padding: 1rem;
}

.sp-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-card-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.sp-card-location i { color: var(--primary-color); }

.sp-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-card-facts li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: .78rem;
    color: var(--text-body);
}

.sp-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .5rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px dashed var(--border-soft);
}

.sp-card-price-label {
    width: 100%;
    font-size: .75rem;
    color: var(--text-muted);
}

.sp-card-price-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-color);
}

.sp-card-price-value small { font-size: .75rem; font-weight: 600; }

.sp-card-arrow {
    margin-inline-start: auto;
    color: var(--primary-color);
    transition: transform .2s ease;
}

.sp-card:hover .sp-card-arrow { transform: translateX(-4px); }

/* ------------------------------ CTA ------------------------------ */
.sp-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), #1e40af);
    color: #fff;
}

.sp-cta-text strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.sp-cta-text span {
    font-size: .88rem;
    line-height: 1.8;
    opacity: .9;
}

/* نشان بازار روی گوشی زیر متن و سمت راست می‌نشیند، از تبلت به بالا کنار متن */
.sp-cta-badge {
    display: inline-flex;
    align-self: flex-start;
    flex: none;
}

.sp-cta-badge:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 12px;
}

/* ------------------------------ سربرگ جزئیات ------------------------------ */
.sp-hero { margin-bottom: 1rem; }

.sp-hero h1 {
    font-size: clamp(1.3rem, 5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: .5rem;
}

.sp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.sp-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.sp-hero-meta i { color: var(--primary-color); }

.sp-hero-subtitle {
    margin: .6rem 0 0;
    color: var(--text-body);
    line-height: 1.8;
}

/* روی گوشی sp-main با display: contents کنار می‌رود تا بچه‌هایش و خلاصه در یک
   ستون بچینند و order خلاصه را درست بعد از گالری بنشاند؛ کاربر گوشی عدد اصلی
   را پیش از مشخصات می‌بیند. */
.sp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.sp-main { display: contents; }

.sp-main > * { order: 3; }

.sp-main > .sp-gallery { order: 1; }

.sp-summary { order: 2; }

/* ------------------------------ گالری ------------------------------ */
/* min-width: 0 لازم است: بدون آن Swiper داخل گرید عرض ستون را می‌ترکاند */
.sp-gallery { min-width: 0; }

.sp-gallery-filters {
    display: flex;
    gap: .4rem;
    margin-bottom: .6rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-gallery-filters::-webkit-scrollbar { display: none; }

.sp-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-body);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.sp-chip-count {
    font-size: .75rem;
    color: var(--text-muted);
}

.sp-chip.is-active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.sp-chip.is-active .sp-chip-count { color: rgba(255, 255, 255, .8); }

.sp-gallery-main {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
    background: var(--surface-softer);
}

.sp-gallery-main .swiper-wrapper { display: flex; }

.sp-gallery-main .swiper-slide {
    flex-shrink: 0;
    width: 100%;
}

.sp-slide {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--surface-softer);
}

.sp-slide img,
.sp-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* پلان، نما و برش نقشه‌اند: بریدنشان اطلاعات را حذف می‌کند، پس کامل دیده می‌شوند */
.swiper-slide[data-media-type="1"] .sp-slide,
.swiper-slide[data-media-type="2"] .sp-slide,
.swiper-slide[data-media-type="3"] .sp-slide { background: #fff; }

.swiper-slide[data-media-type="1"] img,
.swiper-slide[data-media-type="2"] img,
.swiper-slide[data-media-type="3"] img { object-fit: contain; }

.sp-slide video {
    object-fit: contain;
    background: #000;
}

.sp-slide figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2rem 1rem .8rem;
    background: linear-gradient(to top, rgba(15, 23, 42, .78), transparent);
    color: #fff;
    font-size: .85rem;
    pointer-events: none;
}

/* روی ویدیو کپشن نوار کنترل پخش را می‌پوشاند */
.sp-slide:has(video) figcaption {
    top: 0;
    bottom: auto;
    padding: .8rem 1rem 2rem;
    background: linear-gradient(to bottom, rgba(15, 23, 42, .7), transparent);
}

.sp-slide-type {
    display: inline-block;
    margin-inline-end: .4rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
    font-weight: 700;
}

.sp-slide-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    padding: 1rem;
    background: var(--sp-dark);
    color: #fff;
    text-align: center;
}

.sp-slide-download > i { font-size: 2.5rem; opacity: .7; }

.sp-slide-download p { margin: 0; font-size: .85rem; opacity: .85; }

.sp-slide-download a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: 12px;
    background: #fff;
    color: var(--sp-dark);
    font-weight: 700;
    text-decoration: none;
}

/* چپِ فیزیکی، نه inset-inline-end: جهت خود شمارنده ltr است تا «۳ / ۱۲» درست
   خوانده شود، و ویژگی‌های منطقی با جهت خود عنصر حل می‌شوند؛ inline-end آن را
   به راست می‌برد و روی برچسب نوع رسانه‌ی کپشن می‌افتاد. */
.sp-gallery-counter {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    direction: ltr;
}

/* روی گوشی کشیدن انگشت کافی است؛ دکمه‌ها از تبلت به بالا می‌آیند */
.sp-gallery-nav { display: none; }

.sp-gallery-thumbs { margin-top: .5rem; }

.sp-gallery-thumbs .swiper-slide {
    position: relative;
    border: 1px solid var(--border-soft);
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sp-dark);
    opacity: .5;
    cursor: pointer;
    transition: opacity .2s ease;
}

.sp-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.sp-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-thumb-play,
.sp-thumb-video {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
}

/* ------------------------- خلاصه‌ی برآورد ------------------------- */
.sp-summary {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--sp-radius);
    background: var(--surface);
}

.sp-summary-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sp-summary-label {
    font-size: .8rem;
    color: var(--text-muted);
}

.sp-summary-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
}

.sp-summary-value small { font-size: .8rem; font-weight: 600; }

.sp-summary-value-sm {
    font-size: 1.15rem;
    color: var(--text-main);
}

.sp-summary-empty { margin: 0; color: var(--text-muted); font-size: .9rem; }

.sp-split-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-softer);
}

.sp-split-material { background: var(--primary-color); }

.sp-split-worker { background: var(--sp-worker); }

.sp-split-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--text-body);
}

.sp-split-legend span { display: inline-flex; align-items: center; gap: .35rem; }

.sp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sp-dot-material { background: var(--primary-color); }

.sp-dot-worker { background: var(--sp-worker); }

.sp-summary-date {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
}

.sp-summary-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem;
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1rem;
    border-radius: 14px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.sp-btn-primary { background: var(--primary-color); color: #fff; }

.sp-btn-primary:hover { background: #1d4ed8; color: #fff; }

.sp-btn-ghost { background: var(--primary-light); color: var(--primary-color); }

.sp-btn-ghost:hover { color: #1d4ed8; }

/* ------------------------------ بخش‌ها ------------------------------ */
.sp-section { margin-top: 2rem; }

.sp-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.sp-section-title i { color: var(--primary-color); }

.sp-key-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-key-specs li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem;
    border-radius: 16px;
    background: var(--surface-soft);
}

.sp-key-specs i {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: .2rem;
}

.sp-key-label { font-size: .75rem; color: var(--text-muted); }

.sp-key-value { font-size: .92rem; color: var(--text-main); line-height: 1.6; }

/* ------------------- دکمه‌ی «بیشتر» روی details بومی ------------------- */
.sp-more { margin-top: .9rem; }

.sp-more > summary,
.sp-group > summary {
    list-style: none;
    cursor: pointer;
}

.sp-more > summary::-webkit-details-marker,
.sp-group > summary::-webkit-details-marker { display: none; }

.sp-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem;
    border: 1px dashed var(--border-soft);
    border-radius: 14px;
    color: var(--primary-color);
    font-size: .9rem;
    font-weight: 700;
}

.sp-more > summary:hover { background: var(--primary-light); }

.sp-more-open { display: none; }

details[open] > summary .sp-more-open { display: inline; }

details[open] > summary .sp-more-closed { display: none; }

details > summary .bi-chevron-down { transition: transform .2s ease; }

details[open] > summary .bi-chevron-down { transform: rotate(180deg); }

.sp-spec-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.sp-spec-group {
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.sp-spec-group h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-main);
}

.sp-spec-group h3 i { color: var(--primary-color); }

.sp-spec-list { margin: 0; }

.sp-spec-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: .88rem;
}

.sp-spec-list > div:last-child { border-bottom: 0; }

.sp-spec-list dt { font-weight: 400; color: var(--text-muted); }

.sp-spec-list dd {
    margin: 0;
    font-weight: 700;
    color: var(--text-main);
    text-align: end;
}

.sp-description {
    margin-top: 1.25rem;
    color: var(--text-body);
    line-height: 2;
}

/* ------------------------------ ریز برآورد ------------------------------ */
.sp-groups {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sp-group {
    --sp-group-color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
}

.sp-group[data-group="0"] { --sp-group-color: #2563eb; }
.sp-group[data-group="1"] { --sp-group-color: #0d9488; }
.sp-group[data-group="2"] { --sp-group-color: #f59e0b; }

.sp-group > summary {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

.sp-group > summary:hover { background: var(--surface-soft); }

.sp-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.sp-group-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
}

.sp-group-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sp-group-color);
    white-space: nowrap;
}

.sp-group-total small { font-size: .75rem; font-weight: 600; color: var(--text-muted); }

.sp-group-meter {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-softer);
    overflow: hidden;
}

.sp-group-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sp-group-color);
}

.sp-group-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    color: var(--text-muted);
}

.sp-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-inline-start: auto;
    color: var(--primary-color);
    font-weight: 700;
}

.sp-items {
    margin: 0;
    padding: 0 1rem;
    list-style: none;
}

.sp-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--border-softer);
}

.sp-item-main,
.sp-item-price {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sp-item-price { text-align: end; }

.sp-item-title { font-size: .9rem; font-weight: 700; color: var(--text-main); }

.sp-item-amount { font-size: .78rem; color: var(--text-muted); }

.sp-item-total { font-size: .9rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }

.sp-item-total small { font-size: .75rem; color: var(--text-muted); }

.sp-item-split {
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    color: var(--text-muted);
}

.sp-group-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-soft);
    font-size: .88rem;
}

.sp-group-sum strong { color: var(--sp-group-color); white-space: nowrap; }

.sp-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: .9rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--sp-dark);
    color: #fff;
}

.sp-grand-total span { display: block; font-weight: 700; }

.sp-grand-total div small { display: block; font-size: .75rem; opacity: .7; }

.sp-grand-total > strong { font-size: 1.1rem; white-space: nowrap; }

.sp-grand-total > strong small { font-size: .75rem; font-weight: 600; opacity: .8; }


.sp-article .article-body { margin-top: 0; }

/* ------------------------------ نمونه‌های دیگر ------------------------------ */
.sp-related { margin-top: 2.5rem; }

.sp-related-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.sp-related-head a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

/* روی گوشی یک ریل افقی با snap؛ بدون جاوااسکریپت */
.sp-related-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.sp-related-track > .sp-card { scroll-snap-align: start; }

/* ============================== تبلت ============================== */
@media (min-width: 576px) {
    .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sp-key-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .sp-related-track { grid-auto-columns: 46%; }

    .sp-item-split {
        flex-direction: row;
        justify-content: flex-end;
        gap: .6rem;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .sp-page { padding-block: 1.5rem 3rem; }

    .sp-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 1.75rem;
    }

    .sp-cta-badge { align-self: center; }

    .sp-slide { aspect-ratio: 16 / 10; }

    .sp-gallery-nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        color: var(--text-main);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
        cursor: pointer;
    }

    .sp-gallery-nav.swiper-button-disabled { opacity: .35; cursor: default; }

    /* در RTL «قبلی» سمت راست است */
    .sp-gallery-prev { inset-inline-start: .75rem; }

    .sp-gallery-next { inset-inline-end: .75rem; }

    .sp-gallery-thumbs .swiper-slide { width: 80px; height: 64px; }

    .sp-spec-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================== دسکتاپ ============================== */
@media (min-width: 992px) {
    .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

    /* محتوا و خلاصه کنار هم؛ در RTL ستون اول سمت راست است. خلاصه در تمام طول
       محتوا sticky می‌ماند، چون ناحیه‌ی گریدش هم‌قد ستون محتواست. */
    .sp-layout {
        grid-template-columns: minmax(0, 1fr) var(--sp-summary-width);
        gap: 1.5rem;
        align-items: start;
    }

    .sp-main {
        display: block;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .sp-summary {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        /* زیر هدر ثابت ۹۰ پیکسلی سایت (base.html) */
        top: 5.75rem;
    }

    .sp-related-track {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }
}