/*
 * Abzarbin Tools — Single Product page styles (v5 "Refined Industrial Elegance")
 *
 * v3.1.0 fix: this file was previously dead weight — a stale, internally
 * duplicated revision (spShimmer keyframes twice, media queries repeated,
 * 52 !important, ~2136 lines) that no template ever loaded, while a NEWER
 * diverged copy was inlined via a <style> tag inside
 * woocommerce/content-single-product.php on every product page.
 *
 * This file now contains exactly that live inline copy (dedented, content
 * unchanged) and is enqueued via functions.php on single product pages:
 *   handle: abzarbin-single-product-modern  (deps: abzarbin-main)
 */

/* ============================================================================
   ABZARBIN TOOLS — Single Product v2.0 "Refined Industrial Elegance"
   Same design tokens as homepage v5.0 — visual consistency guaranteed.
   ============================================================================ */

/* ---------- DESIGN TOKENS (mirror of homepage v5) ---------- */
.single-product-modern {
    --ry-crimson: #EA580C;
    --ry-crimson-dark: #C2410C;
    --ry-crimson-soft: rgba(234, 88, 12, 0.08);
    --ry-crimson-line: rgba(234, 88, 12, 0.18);

    --ry-ink: #1C1917;
    --ry-ink-2: #44403C;
    --ry-ink-3: #78716C;
    --ry-ink-4: #A8A29E;
    --ry-paper: #FFFFFF;
    --ry-paper-2: #FAF8F5;
    --ry-paper-3: #F4F1EC;
    --ry-line: #EDE9E3;
    --ry-line-2: #E5E0D8;

    --ry-sh-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --ry-sh-md: 0 4px 16px rgba(28, 25, 23, 0.06);
    --ry-sh-lg: 0 18px 40px rgba(28, 25, 23, 0.10);
    --ry-sh-crimson: 0 8px 24px rgba(234, 88, 12, 0.22);

    --ry-r-sm: 8px;
    --ry-r:    14px;
    --ry-r-lg: 20px;
    --ry-r-xl: 28px;
    --ry-r-pill: 999px;

    --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ry-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
    --ry-t: 0.28s var(--ry-ease);
    --ry-t-slow: 0.5s var(--ry-ease);

    font-family: 'Vazirmatn', -apple-system, 'Segoe UI', Tahoma, sans-serif;
    color: var(--ry-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.single-product-modern .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

.single-product-modern * { box-sizing: border-box; }

/* ============================================================================
   1. BREADCRUMB BAR — refined, minimal
   ============================================================================ */
.sp-breadcrumb-bar {
    background: var(--ry-paper);
    border-bottom: 1px solid var(--ry-line);
    padding: 14px 0;
}
.single-product-modern .sp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ry-ink-3);
    margin: 0;
}
.single-product-modern .sp-breadcrumb a {
    color: var(--ry-ink-2);
    text-decoration: none;
    transition: var(--ry-t);
    padding: 4px 8px;
    border-radius: var(--ry-r-sm);
}
.single-product-modern .sp-breadcrumb a:hover {
    color: var(--ry-crimson);
    background: var(--ry-crimson-soft);
}
.single-product-modern .sp-breadcrumb-sep {
    font-size: 9px;
    color: var(--ry-ink-4);
    opacity: 0.7;
}

/* ============================================================================
   2. MAIN LAYOUT — sticky gallery + summary
   ============================================================================ */
.sp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    padding: 48px 0 64px;
    align-items: start;
}

/* ---------- GALLERY ---------- */
.sp-gallery-wrap {
    position: sticky;
    top: 24px;
}
.sp-gallery {
    background: var(--ry-paper);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-xl);
    padding: 22px;
    position: relative;
    transition: var(--ry-t);
}
.sp-gallery:hover {
    border-color: var(--ry-line-2);
    box-shadow: var(--ry-sh-md);
}

.sp-discount-badge {
    position: absolute;
    top: 32px;
    inset-inline-start: 32px;
    z-index: 4;
    background: var(--ry-crimson);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--ry-r-pill);
    box-shadow: var(--ry-sh-crimson);
    line-height: 1;
}

.sp-main-image-wrap {
    position: relative;
    background: var(--ry-paper-2);
    border-radius: var(--ry-r-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.sp-main-image {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}
.sp-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 36px;
    transition: transform 0.4s var(--ry-ease-soft), opacity 0.18s var(--ry-ease);
    transform-origin: center center;
}
.sp-main-img.sp-fading { opacity: 0; }

/* v6.9.0 — بزرگنمایی تصویر با کلیک = لایت‌باکس تمام‌صفحه
 * (اسکریپت inline-zoom قدیمی حذف شد؛ لایت‌باکس در انتهای همین فایل است) */
.sp-zoom-hint {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ry-line);
    color: var(--ry-ink-3);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--ry-r-pill);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    transition: opacity var(--ry-t);
}
.sp-main-image-wrap:hover .sp-zoom-hint { opacity: 1; }

/* Thumbnails — refined pill row */
.sp-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.sp-thumbs::-webkit-scrollbar { height: 4px; }
.sp-thumbs::-webkit-scrollbar-thumb { background: var(--ry-line-2); border-radius: 2px; }
.sp-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--ry-r);
    border: 1px solid var(--ry-line);
    background: var(--ry-paper-2);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: var(--ry-t);
}
.sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.sp-thumb:hover {
    border-color: var(--ry-ink-4);
    transform: translateY(-2px);
}
.sp-thumb.active {
    border-color: var(--ry-ink);
    box-shadow: 0 0 0 2px var(--ry-ink);
}

/* v6.9.0 — بج‌های متنی زیر گالری حذف شدند؛ به‌جایش گالری تصاویر
 * (ردیف بندانگشتی‌های .sp-thumbs بالا) نمایش داده می‌شود. */

/* ---------- SUMMARY ---------- */
.sp-summary-wrap { min-width: 0; }
.sp-summary {
    background: var(--ry-paper);
}

.sp-brand-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 12px 5px 6px;
    background: var(--ry-paper-2);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-pill);
}
.sp-brand-label {
    font-size: 11.5px;
    color: var(--ry-ink-3);
    font-weight: 500;
}
.sp-brand-name {
    font-size: 12.5px;
    color: var(--ry-ink);
    font-weight: 700;
}

.sp-title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ry-ink);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.sp-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 13px;
}
.sp-stars {
    display: inline-flex;
    gap: 2px;
    color: #F59E0B;
    font-size: 14px;
}
.sp-stars .empty { color: var(--ry-line-2); }
.sp-rating-text {
    color: var(--ry-ink-3);
}
.sp-rating-text a {
    color: var(--ry-ink-2);
    text-decoration: none;
    transition: var(--ry-t);
}
.sp-rating-text a:hover { color: var(--ry-crimson); }
.sp-rating-divider { color: var(--ry-line-2); margin: 0 6px; }
.sp-no-rating { color: var(--ry-ink-3); }
.sp-be-first {
    color: var(--ry-crimson) !important;
    font-weight: 600;
}

/* Meta row — SKU / stock / category */
.sp-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    padding: 16px 0;
    border-top: 1px solid var(--ry-line);
    border-bottom: 1px solid var(--ry-line);
    margin-bottom: 24px;
}
.sp-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.sp-meta-label { color: var(--ry-ink-3); }
.sp-meta-value { color: var(--ry-ink); font-weight: 600; }
.sp-in-stock { color: #16A34A; }
.sp-in-stock i { color: #16A34A; }
.sp-out-of-stock { color: var(--ry-crimson); }
.sp-out-of-stock i { color: var(--ry-crimson); }

/* Price block — refined, no loud gradient */
.sp-price-block {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--ry-paper-2);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-lg);
    margin-bottom: 24px;
}
.sp-price-block .price,
.sp-price-block .price ins,
.sp-price-block .price > span,
.sp-price-block .price > .amount,
.sp-price-block .price bdi {
    background: transparent !important;
    color: var(--ry-ink) !important;
    font-family: inherit !important;
}
.sp-price-block .price {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}
.sp-price-block .price ins {
    text-decoration: none !important;
    color: var(--ry-crimson) !important;
}
.sp-price-block .price del {
    color: var(--ry-ink-4) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-inline-end: 8px !important;
    text-decoration: line-through !important;
}
.sp-price-block .price del .amount,
.sp-price-block .price del bdi { color: var(--ry-ink-4) !important; }
.sp-price-block .price .woocommerce-Price-currencySymbol {
    font-size: 0.6em;
    font-weight: 500;
    margin-inline-end: 2px;
}
.sp-discount-tag {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--ry-crimson);
    padding: 5px 11px;
    border-radius: var(--ry-r-pill);
    line-height: 1;
}

/* Short description — refined card */
.sp-short-desc {
    padding: 18px 22px;
    background: var(--ry-paper-2);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-lg);
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--ry-ink-2);
}
.sp-short-desc p:last-child { margin-bottom: 0; }
.sp-short-desc p:first-child { margin-top: 0; }

/* Cart row — quantity + add to cart + buy now */
.sp-cart-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 16px;
}
.sp-quantity {
    display: flex;
    align-items: center;
    background: var(--ry-paper);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r);
    overflow: hidden;
    flex-shrink: 0;
}
.sp-qty-btn {
    width: 44px;
    height: 52px;
    background: var(--ry-paper-2);
    border: none;
    color: var(--ry-ink);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ry-t);
}
.sp-qty-btn:hover {
    background: var(--ry-paper-3);
    color: var(--ry-crimson);
}
.sp-qty-input {
    width: 56px;
    height: 52px;
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ry-ink);
    background: var(--ry-paper);
    -moz-appearance: textfield;
}
.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sp-add-to-cart {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    height: 52px;
    border-radius: var(--ry-r);
    background: var(--ry-crimson);
    color: #fff;
    border: 1px solid var(--ry-crimson);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ry-t);
    box-shadow: var(--ry-sh-crimson);
    line-height: 1;
}
.sp-add-to-cart:hover {
    background: var(--ry-crimson-dark);
    border-color: var(--ry-crimson-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(234, 88, 12, 0.30);
}
.sp-add-to-cart i { font-size: 15px; }
.sp-add-to-cart.loading {
    pointer-events: none;
    opacity: 0.75;
}
.sp-add-to-cart.added {
    background: #16A34A;
    border-color: #16A34A;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.22);
}

.sp-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 52px;
    border-radius: var(--ry-r);
    background: var(--ry-ink);
    color: var(--ry-paper);
    border: 1px solid var(--ry-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ry-t);
    line-height: 1;
}
.sp-buy-now:hover {
    background: #0F0D0B;
    border-color: #000;
    transform: translateY(-2px);
}
.sp-buy-now i { font-size: 13px; color: #F59E0B; }

/* Out of stock — notify button */
.sp-out-row { width: 100%; }
.sp-notify-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: var(--ry-r);
    background: var(--ry-paper);
    color: var(--ry-ink);
    border: 1px solid var(--ry-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ry-t);
}
.sp-notify-btn:hover {
    background: var(--ry-ink);
    color: var(--ry-paper);
}

/* Quick actions — wishlist / compare / share */
.sp-quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}
.sp-quick-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border-radius: var(--ry-r);
    background: var(--ry-paper);
    color: var(--ry-ink-2);
    border: 1px solid var(--ry-line);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ry-t);
}
.sp-quick-action:hover {
    border-color: var(--ry-ink-4);
    background: var(--ry-paper-2);
    color: var(--ry-ink);
}
.sp-quick-action.active {
    border-color: var(--ry-crimson);
    background: var(--ry-crimson-soft);
    color: var(--ry-crimson);
}
.sp-quick-action i { font-size: 13px; }

/* Trust badges — 4-up grid, refined */
.sp-trust-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
    background: var(--ry-paper-2);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-lg);
}
.sp-trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sp-trust-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ry-r-sm);
    background: var(--ry-paper);
    border: 1px solid var(--ry-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ry-crimson);
    font-size: 16px;
}
.sp-trust-body h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ry-ink);
    margin: 0 0 2px;
    line-height: 1.2;
}
.sp-trust-body p {
    font-size: 11px;
    color: var(--ry-ink-3);
    margin: 0;
    line-height: 1.4;
}

/* ============================================================================
   3. TABS SECTION — refined pill nav
   ============================================================================ */
.sp-tabs-section {
    margin: 16px 0 56px;
    background: var(--ry-paper);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-xl);
    overflow: hidden;
}
.sp-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 10px;
    background: var(--ry-paper-2);
    border-bottom: 1px solid var(--ry-line);
}
.sp-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--ry-r);
    background: transparent;
    color: var(--ry-ink-3);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ry-t);
    line-height: 1;
}
.sp-tab-btn:hover { color: var(--ry-ink); }
.sp-tab-btn.active {
    background: var(--ry-paper);
    color: var(--ry-crimson);
    box-shadow: var(--ry-sh-sm);
}
.sp-tab-btn i { font-size: 13px; }

.sp-tab-panels { padding: 36px 40px; }
.sp-tab-panel { display: none; }
.sp-tab-panel.active {
    display: block;
    animation: spTabFade 0.35s var(--ry-ease-soft);
}
@keyframes spTabFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Description typography */
.sp-tab-panel[id], .sp-tab-panel.active[id] { /* avoid css validator complaints */ }
.sp-tab-panel p {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ry-ink-2);
    margin: 0 0 16px;
}
.sp-tab-panel h2,
.sp-tab-panel h3,
.sp-tab-panel h4 {
    color: var(--ry-ink);
    font-weight: 700;
    margin: 24px 0 12px;
    line-height: 1.3;
}
.sp-tab-panel h2 { font-size: 22px; }
.sp-tab-panel h3 { font-size: 18px; }
.sp-tab-panel h4 { font-size: 15px; }
.sp-tab-panel ul,
.sp-tab-panel ol {
    padding-inline-start: 22px;
    margin: 0 0 16px;
    color: var(--ry-ink-2);
    font-size: 14.5px;
    line-height: 1.85;
}
.sp-tab-panel li { margin-bottom: 6px; }
.sp-tab-panel a { color: var(--ry-crimson); text-decoration: none; }
.sp-tab-panel a:hover { text-decoration: underline; }
.sp-tab-panel img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ry-r);
    margin: 16px 0;
}
.sp-tab-panel table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.sp-tab-panel table th,
.sp-tab-panel table td {
    padding: 10px 12px;
    border: 1px solid var(--ry-line);
    text-align: start;
}
.sp-tab-panel table th {
    background: var(--ry-paper-2);
    font-weight: 700;
    color: var(--ry-ink);
}

/* Specs table — refined rows */
.sp-specs-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ry-line);
    border-radius: var(--ry-r);
    overflow: hidden;
    border: 1px solid var(--ry-line);
}
.sp-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    background: var(--ry-paper);
    padding: 16px 22px;
    gap: 24px;
    align-items: center;
    transition: var(--ry-t);
}
.sp-spec-row:hover { background: var(--ry-paper-2); }
.sp-spec-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ry-ink-3);
}
.sp-spec-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ry-ink);
}

.sp-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--ry-line);
}
.sp-tags-label {
    font-size: 12.5px;
    color: var(--ry-ink-3);
    font-weight: 600;
}
.sp-tag {
    font-size: 11.5px;
    color: var(--ry-ink-2);
    background: var(--ry-paper-2);
    border: 1px solid var(--ry-line);
    padding: 5px 11px;
    border-radius: var(--ry-r-pill);
    font-weight: 500;
}

/* ============================================================================
   4. RELATED PRODUCTS — v5.3.0 بازطراحی کامل (کارت استاندارد حرفه‌ای)
   ============================================================================ */
.sp-related-section {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--ry-line);
    position: relative;
}
.sp-related-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
}
.sp-related-head-text {
    min-width: 0;
}
/* v5.3 — آیکون خودش نشان گرادیانی است (بدون ::before) */
.sp-related-head-text h2 {
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    color: var(--ry-ink);
    margin: 0 0 6px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sp-related-head-text h2 i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    border-radius: 15px;
    background: linear-gradient(140deg, #EA580C, #F59E0B);
    box-shadow: 0 10px 22px -8px rgba(234, 88, 12, 0.55);
}
.sp-related-head-text p {
    font-size: 13px;
    color: var(--ry-ink-3);
    margin: 0;
    line-height: 1.7;
    padding-inline-start: 62px;
}
@media (max-width: 480px) {
    .sp-related-head-text p { padding-inline-start: 0; }
    .sp-related-head-text h2 i { width: 40px; height: 40px; font-size: 14px; border-radius: 12px; }
}
.sp-related-head-link {
    flex-shrink: 0;
}
.sp-related-head-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ry-paper);
    color: var(--ry-ink);
    border: 1px solid var(--ry-line);
    border-radius: var(--ry-r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--ry-t);
}
.sp-related-head-link a:hover {
    background: var(--ry-ink);
    color: #fff;
    border-color: var(--ry-ink);
}
.sp-related-head-link a i { font-size: 11px; }

/* WooCommerce related/upsell products grid — 4 cols standard */
.sp-related-section .products,
.sp-related-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}
.sp-related-section li.product {
    position: relative;
    margin: 0 !important;
    padding: 0;
    width: auto !important;
    max-width: none !important;
    background: var(--ry-paper);
    border: 1px solid var(--ry-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.32s var(--ry-ease-soft), box-shadow 0.32s var(--ry-ease-soft), border-color 0.32s var(--ry-ease-soft);
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.sp-related-section li.product:hover {
    border-color: rgba(234, 88, 12, 0.38);
    box-shadow:
        0 22px 48px -18px rgba(28, 25, 23, 0.22),
        0 6px 18px -8px rgba(234, 88, 12, 0.16);
    transform: translateY(-6px);
}
/* v5.3 — خط کهربایی بالای کارت هنگام هاور (امضای ابزاربین) */
.sp-related-section li.product::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 4;
    background: linear-gradient(90deg, #EA580C, #FBBF24);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.32s var(--ry-ease);
    pointer-events: none;
}
.sp-related-section li.product:hover::after { transform: scaleX(1); }

/* Standard image wrap — 1:1 aspect ratio, soft background */
.sp-related-section li.product .pcm-image-wrap,
.sp-related-section li.product .woocommerce-loop-product__image,
.sp-related-section li.product .woocommerce-loop-product__link,
.sp-related-section li.product .product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ry-paper-2);
    overflow: hidden;
    display: block;
    margin: 0;
}
.sp-related-section li.product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    margin: 0 !important;
    transition: transform 0.7s var(--ry-ease-soft);
}
.sp-related-section li.product:hover img {
    transform: scale(1.08);
}

/* Badges — top-start, stacked */
.sp-related-section .pcm-badges {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.sp-related-section .pcm-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--ry-r-pill);
    line-height: 1.4;
    letter-spacing: -0.01em;
    backdrop-filter: blur(4px);
}
.sp-related-section .pcm-badge-sale {
    background: var(--ry-crimson);
    color: #fff;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
}
.sp-related-section .pcm-badge-new {
    background: var(--ry-ink);
    color: #fff;
}
.sp-related-section .pcm-badge-hot {
    background: #fff;
    color: var(--ry-ink);
    border: 1px solid var(--ry-line);
}
.sp-related-section .pcm-badge-out {
    background: rgba(120, 113, 108, 0.92);
    color: #fff;
}

/* Quick actions — top-end, slide in on hover */
.sp-related-section .pcm-quick-actions {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transform: translateX(8px);
    transition: var(--ry-t);
}
[dir="rtl"] .sp-related-section .pcm-quick-actions { transform: translateX(-8px); }
.sp-related-section li.product:hover .pcm-quick-actions {
    opacity: 1;
    transform: translateX(0);
}
.sp-related-section .pcm-quick-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ry-line);
    color: var(--ry-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: var(--ry-t);
}
.sp-related-section .pcm-quick-btn:hover {
    background: var(--ry-ink);
    color: #fff;
    border-color: var(--ry-ink);
    transform: scale(1.08);
}

/* Card body — consistent padding */
.sp-related-section .pcm-content,
.sp-related-section li.product .woocommerce-loop-product__title,
.sp-related-section li.product .product-info,
.sp-related-section li.product .product-details {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.sp-related-section .pcm-brand {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ry-ink-3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}
.sp-related-section .pcm-title,
.sp-related-section li.product .woocommerce-loop-product__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ry-ink);
    line-height: 1.55;
    margin: 0 0 4px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}
.sp-related-section .pcm-title a,
.sp-related-section li.product .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
    transition: var(--ry-t);
}
.sp-related-section li.product:hover .pcm-title a,
.sp-related-section li.product:hover .woocommerce-loop-product__title a {
    color: var(--ry-crimson);
}

/* Rating */
.sp-related-section .pcm-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ry-ink-3);
    margin-bottom: 6px;
}
.sp-related-section .pcm-stars {
    display: inline-flex;
    gap: 1px;
    color: #F59E0B;
    font-size: 12px;
}
.sp-related-section .pcm-stars .empty { color: var(--ry-line-2); }
.sp-related-section .pcm-rating-text { color: var(--ry-ink-3); }
.sp-related-section .pcm-no-rating { color: var(--ry-ink-4); }

/* Price + cart bottom — v5.3: ستونی (قیمت بالا، دکمه تمام‌عرض پایین) */
.sp-related-section .pcm-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--ry-line);
}
.sp-related-section li.product .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sp-related-section .pcm-price-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-related-section .pcm-price-wrap .price,
.sp-related-section li.product .price {
    font-size: 17px !important;
    font-weight: 800;
    color: var(--ry-ink) !important;
    margin: 0 !important;
    line-height: 1;
    letter-spacing: -0.02em;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-top: none !important;
    padding-top: 0 !important;
}
.sp-related-section li.product .price ins,
.sp-related-section li.product .price .amount,
.sp-related-section li.product .price bdi {
    background: transparent !important;
    color: var(--ry-ink) !important;
    font-family: inherit !important;
}
.sp-related-section li.product .price ins { color: var(--ry-crimson) !important; text-decoration: none !important; font-weight: 800; }
.sp-related-section li.product .price del {
    color: var(--ry-ink-4) !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
    margin-inline-end: 0 !important;
    font-weight: 500;
    order: 2;
}
.sp-related-section li.product .price del .amount,
.sp-related-section li.product .price del bdi { color: var(--ry-ink-4) !important; }
.sp-related-section li.product .price .woocommerce-Price-currencySymbol {
    font-size: 0.6em;
    font-weight: 500;
    margin-inline-end: 2px;
    opacity: 0.8;
}
.sp-related-section .pcm-price-on-request {
    font-size: 13.5px !important;
    color: var(--ry-ink-3) !important;
    font-weight: 600;
}

/* Add to cart — دکمه تمام‌عرض (v5.3). رنگ/هاور سبز سراسری سایت است که از
   responsive-master.css (.pcm-add-to-cart با !important) می‌آید و برای
   هماهنگی با گرید فروشگاه همین باقی می‌ماند؛ اینجا فقط چیدمان دکمه. */
.sp-related-section .pcm-actions {
    flex-shrink: 0;
}
.sp-related-section .pcm-add-to-cart,
.sp-related-section li.product .button,
.sp-related-section li.product .add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s var(--ry-ease);
    text-decoration: none !important;
    padding: 0 14px !important;
    line-height: 1;
    white-space: nowrap;
}
.sp-related-section .pcm-add-to-cart-text { display: inline; }
.sp-related-section .pcm-add-to-cart i,
.sp-related-section li.product .add_to_cart_button i {
    font-size: 14px;
}
.sp-related-section .pcm-out-of-stock {
    background: var(--ry-paper);
    color: var(--ry-ink-3) !important;
    border-color: var(--ry-line);
    cursor: not-allowed;
    box-shadow: none;
}
.sp-related-section .pcm-out-of-stock:hover {
    background: var(--ry-paper-2);
    transform: none;
    box-shadow: none;
    border-color: var(--ry-line);
}

/* Hide short desc in related cards (kept clean) */
.sp-related-section .pcm-short-desc { display: none; }

/* Hide WooCommerce's default sale flash (we use custom pcm-badges) */
.sp-related-section li.product .onsale {
    display: none !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
    .sp-related-section .products,
    .sp-related-section ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .sp-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sp-gallery-wrap {
        position: static;
    }
    .sp-tab-panels { padding: 24px 22px; }
}

@media (max-width: 768px) {
    .single-product-modern .container { padding: 0 18px; }
    .sp-layout { padding: 28px 0 40px; }
    .sp-gallery { padding: 14px; }
    .sp-discount-badge { top: 22px; inset-inline-start: 22px; }
    .sp-main-img { padding: 22px; }
    .sp-thumbs { gap: 8px; }
    .sp-thumb { flex: 0 0 60px; width: 60px; height: 60px; }
    .sp-title { font-size: 22px; }
    .sp-meta-row { gap: 12px 20px; padding: 14px 0; }
    .sp-price-block { padding: 14px 16px; }
    .sp-price-block .price { font-size: 22px !important; }
    .sp-cart-row { flex-wrap: wrap; }
    .sp-quantity { width: 100%; justify-content: space-between; }
    .sp-qty-btn { flex: 1; }
    .sp-qty-input { width: auto; flex: 1; }
    .sp-add-to-cart { flex: 1 1 100%; height: 48px; }
    .sp-buy-now { flex: 1 1 100%; height: 48px; }
    .sp-quick-actions { flex-wrap: wrap; }
    .sp-quick-action { flex: 1 1 calc(50% - 5px); }
    .sp-trust-badges { grid-template-columns: 1fr; }
    .sp-tabs-nav { flex-direction: column; gap: 4px; }
    .sp-tab-btn { width: 100%; }
    .sp-tab-panels { padding: 20px 16px; }
    .sp-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 16px;
    }
    .sp-related-section .products,
    .sp-related-section ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .sp-related-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .sp-related-section .products,
    .sp-related-section ul.products {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sp-related-section li.product,
    .sp-related-section li.product img,
    .sp-add-to-cart,
    .sp-buy-now,
    .sp-thumb,
    .sp-quick-action,
    .sp-tab-btn,
    .sp-tab-panel.active {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   v5.3.0 — RELATED PRODUCTS CAROUSEL (محصولات مرتبط — بازطراحی)
   v5.2.0 باگ: کارت‌ها داخل <li> اضافه پیچیده می‌شدند → <li> تودرتو نامعتبر و
   «کارت خالی». اکنون کارت‌ها مستقیم فرزند track هستند و استایل روی
   .sp-rel-track > li اعمال می‌شود (کلاس .sp-rel-item حذف شد).
   ============================================================================ */
.sp-related-carousel { position: relative; }

/* v5.5 — ریشه واقعی «فلش‌های بی‌اثر»: قاعده گرید ۴ستونه بالاتر
   (.sp-related-section ul.products — specificity 0,2,1) قاعده flex قبلی
   (0,1,0) را می‌شکست؛ نتیجه: track هرگز overflow نداشت و فلش‌ها کار نمی‌کردند.
   راه‌حل: سلکتور با specificity بالاتر (0,3,1). */
.sp-related-section ul.products.sp-rel-track,
.sp-related-section .products.sp-rel-track {
    /* v5.4.0 — نوار اسکرول افقی در همه حالت‌ها (الگوی فروشگاه‌های ابزار):
       کارت با عرض ثابت + snap؛ فلش‌ها به‌واقع اسکرول می‌کنند. */
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px;
    margin: 0;
    padding: 4px 2px 10px;
    list-style: none;
    float: none !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.sp-related-section .sp-rel-track::-webkit-scrollbar { display: none; }
.sp-related-section .sp-rel-track::before,
.sp-related-section .sp-rel-track::after { display: none !important; }
.sp-related-section .sp-rel-track > li {
    flex: 0 0 262px;
    width: 262px !important;
    max-width: 262px;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    min-width: 0;
    scroll-snap-align: start;
}

/* فلش‌های ناوبری — فقط دسکتاپ (دایره سفید + سایه، هاور کهربایی) */
.sp-rel-arrow {
    display: none;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 1px solid #EDE9E3;
    background: #fff;
    color: #1C1917;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(28, 25, 23, 0.18);
    transition: all 0.22s var(--ry-ease);
    align-items: center;
    justify-content: center;
}
.sp-rel-arrow:hover {
    background: linear-gradient(135deg, #EA580C, #F97316);
    border-color: #EA580C;
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}
.sp-rel-prev { right: -13px; }
.sp-rel-next { left: -13px; }
/* v5.4.0 — حالت غیرفعال فلش‌ها در ابتدا/انتهای مسیر */
.sp-rel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    transform: translateY(-50%);
}
@media (min-width: 993px) {
    .sp-related-carousel { margin-inline: 14px; }
    .sp-rel-arrow { display: inline-flex; }
}

/* موبایل: نوار اسکرول لمسی با snap */
@media (max-width: 992px) {
    .sp-related-section .sp-rel-track {
        gap: 12px;
        padding-bottom: 6px;
        margin-inline: -16px;
        padding-inline: 16px;
        /* v5.4 fix — هم‌ترازی snap اولیه با padding در RTL (کارت اول نصفه نشود) */
        scroll-padding-inline: 16px;
    }
    .sp-related-section .sp-rel-track > li {
        flex: 0 0 44vw;
        width: 44vw !important;
        max-width: 44vw;
    }
}
@media (max-width: 480px) {
    .sp-related-section .sp-rel-track > li { flex: 0 0 62vw; max-width: 62vw; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1024px) {
    .sp-related-section .sp-rel-track > li { flex: 0 0 30vw; max-width: 30vw; }
}

/* ============================================================================
   5. v5.5.0 — محصولات مشابه: بازطراحی کامل (الگوی abzarreza.com/product)
   ----------------------------------------------------------------------------
   درخواست کاربر: «محصولات مشابه رو باز طراحی کامل کن به این سبک بشه
   دکمه اسلایدرش هم کار کنه وقتی چپ و راست رو میزنیم».
   ۱) ریشه‌یابی باگ فلش‌ها: دو بلوک JS متضاد (این‌جا + related.php) روی همان
      دکمه‌ها هندلر می‌بستند؛ بلوک قدیمی از content-single-product.php حذف شد.
   ۲) سکشن: باند پس‌زمینه ملایم + خط کهربایی + نشان گرادیانی تیتر.
   ۳) فلش‌ها: ۴۶px دایره سفید با سایه — روی لبه کارت‌ها، هاور کهربایی.
   ============================================================================ */
.sp-related-section {
    margin-top: 56px;
    padding: 34px clamp(16px, 3vw, 34px) 38px;
    border: 1px solid var(--ry-line, #EDE9E3);
    border-top: 3px solid #EA580C;
    border-radius: var(--ry-r-lg, 20px);
    background: linear-gradient(180deg, #FDFBF7 0%, #FAF8F5 100%);
}
.sp-related-head { margin-bottom: 20px; }
.sp-related-head-text h2 { gap: 16px; }
.sp-related-head-text h2 i {
    width: 52px;
    height: 52px;
    font-size: 19px;
    border-radius: 16px;
    background: linear-gradient(140deg, #1C1917 0%, #292524 55%, #3A322B 100%);
    color: #FDBA74;
    box-shadow: 0 12px 26px -10px rgba(28, 25, 23, 0.5);
}
.sp-related-head-text h2 i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120px 40px at 30% 0%, rgba(234, 88, 12, 0.45), transparent 70%);
}
.sp-related-head-text h2 i { position: relative; }
.sp-related-head-text p { padding-inline-start: 68px; }

/* فلش‌های ناوبری — v5.5: بزرگ‌تر و همیشه در دسترس روی دسکتاپ */
@media (min-width: 993px) {
    .sp-rel-arrow {
        width: 46px;
        height: 46px;
        font-size: 15px;
        top: 44%;
        border-color: #F0EDE8;
        box-shadow: 0 10px 26px rgba(28, 25, 23, 0.22);
    }
    .sp-rel-prev { right: -16px; }
    .sp-rel-next { left: -16px; }
    .sp-rel-arrow:disabled {
        opacity: 0.22;
        pointer-events: none;
    }
    .sp-related-carousel { margin-inline: 16px; }
}

/* کارت‌ها داخل باند: سایه ملایم‌تر و هاور هماهنگ */
.sp-related-section .sp-rel-track { padding: 6px 2px 12px; }
.sp-related-section .sp-rel-track > li {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
    transition: transform 0.25s var(--ry-ease, ease), box-shadow 0.25s ease;
}
.sp-rel-track > li:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(28, 25, 23, 0.12);
}

@media (max-width: 480px) {
    .sp-related-section { padding: 22px 14px 26px; margin-top: 36px; }
    .sp-related-head-text h2 i { width: 42px; height: 42px; font-size: 15px; }
    .sp-related-head-text p { padding-inline-start: 0; }
}

/* ==========================================================================
   v6.9.0 — لایت‌باکس گالری محصول (بزرگنمایی با کلیک روی تصویر اصلی)
   اسکرول/چرخ ماوس = زوم، درگ = جابه‌جایی، پینچ در موبایل، Esc = بستن
   ========================================================================== */
html.sp-lb-open { overflow: hidden; }

.sp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(12, 10, 9, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    animation: spLbFade 0.22s ease both;
}

.sp-lightbox.is-open { display: flex; }

@keyframes spLbFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sp-lb-stage {
    position: relative;
    width: min(94vw, 1080px);
    height: min(86vh, 1080px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    touch-action: none;
}

.sp-lb-img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transition: transform 0.18s ease-out;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}

.sp-lb-stage.is-zoomed .sp-lb-img {
    max-width: 100%;
    max-height: 100%;
    cursor: grab;
}

html.sp-lb-pan .sp-lb-stage.is-zoomed .sp-lb-img { cursor: grabbing; }

.sp-lb-close {
    position: fixed;
    top: 18px;
    inset-inline-start: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.sp-lb-close:hover {
    background: #EA580C;
    transform: rotate(90deg);
}

.sp-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 2;
}

.sp-lb-prev { inset-inline-start: 16px; }
.sp-lb-next { inset-inline-end: 16px; }

.sp-lb-nav:hover { background: #EA580C; }
.sp-lb-nav:disabled { opacity: 0; pointer-events: none; }

.sp-lb-count {
    position: fixed;
    bottom: 18px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    direction: rtl;
}

.sp-lb-hint {
    position: fixed;
    bottom: 18px;
    inset-inline-end: 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .sp-lb-stage { width: 100vw; height: 100vh; border-radius: 0; }
    .sp-lb-img { max-width: 96%; max-height: 88%; border-radius: 10px; }
    .sp-lb-nav { width: 46px; height: 46px; }
    .sp-lb-hint { display: none; }
    .sp-lb-count { bottom: 76px; }
    .sp-lightbox { animation-name: spLbFadeM; }
}

@keyframes spLbFadeM {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}


/* ============================================================================
   v6.13.0 — کارت اختصاصی «محصولات مشابه» (abz-rel-card)
   دو دکمهٔ متفاوت: استعلام (کهربایی/طلایی) + افزودن به سبد (گرد سبز)
   ============================================================================ */

.sp-related-section .sp-rel-track > li.abz-rel-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #EDE9E3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(28, 25, 23, 0.05);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    padding: 0 !important;
}

.sp-related-section .sp-rel-track > li.abz-rel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px -14px rgba(28, 25, 23, 0.22);
    border-color: #FDBA74;
}

/* --- تصویر --- */
.abz-rel-card .abz-rel-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #FBF9F4;
    overflow: hidden;
}

.abz-rel-card .abz-rel-img,
.abz-rel-card .abz-rel-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    display: block;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.abz-rel-card:hover .abz-rel-img,
.abz-rel-card:hover .abz-rel-media img {
    transform: scale(1.07);
}

.abz-rel-card .abz-rel-flag {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

.abz-rel-card .abz-rel-flag-new { background: rgba(22, 163, 74, 0.92); color: #fff; }
.abz-rel-card .abz-rel-flag-out { background: rgba(120, 113, 108, 0.92); color: #fff; }

/* --- بدنه --- */
.abz-rel-card .abz-rel-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px 14px 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.abz-rel-card .abz-rel-brand {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    color: #B45309;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    padding: 2.5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.abz-rel-card .abz-rel-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #1C1917;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}

.abz-rel-card .abz-rel-title a { color: inherit; text-decoration: none; }
.abz-rel-card .abz-rel-title a:hover { color: #EA580C; }

.abz-rel-card .abz-rel-desc {
    font-size: 11.5px;
    color: #78716C;
    line-height: 1.8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- ردیف دکمه‌ها: استعلام + افزودن --- */
.abz-rel-card .abz-rel-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.abz-rel-card .abz-rel-actions .abz-inquiry-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

.abz-rel-card a.abz-rel-atc,
.abz-rel-card .abz-rel-atc {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #16A34A, #15803D);
    color: #fff;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.abz-rel-card .abz-rel-atc:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(22, 163, 74, 0.6);
}

.abz-rel-card .abz-rel-atc:active { transform: translateY(0) scale(0.94); }

.abz-rel-card .abz-rel-atc.abz-atc-busy {
    pointer-events: none;
    opacity: 0.6;
    animation: abzRelPulse 0.9s ease-in-out infinite;
}

.abz-rel-card .abz-rel-atc.abz-atc-done {
    background: linear-gradient(145deg, #1C1917, #38302B) !important;
}

@keyframes abzRelPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}

@media (max-width: 680px) {
    .sp-related-section .sp-rel-track > li {
        flex-basis: 232px;
        width: 232px !important;
        max-width: 232px;
    }
    .abz-rel-card .abz-rel-atc {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}