/* =========================================================================
   صفحه‌های مستقل تعرفه (templates/hs_codes/detail.html و chapter.html) و فهرست فصل‌ها در /hscode/
   ========================================================================= */
.hsp { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; color: var(--sk-ink); }
.hsp a:not(.sk-btn) { color: var(--sk-primary); }

.hsp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--sk-muted); }
.hsp-crumbs a { color: var(--sk-muted); text-decoration: none; }
.hsp-crumbs a:hover { color: var(--sk-primary); }
.hsp-crumbs span[aria-hidden] { display: inline-flex; font-size: 12px; opacity: .6; }

.hsp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hsp-code {
    padding: 4px 12px; border-radius: 999px; background: var(--sk-primary-soft); border: 1px solid var(--sk-primary-soft-border);
    color: var(--sk-primary); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.hsp-head h1 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.7; }
.hsp-head__meta { margin: 0; font-size: var(--fs-sm); color: var(--sk-muted); line-height: 1.9; }
.hsp-head__meta a { text-decoration: none; font-weight: 700; }

.hsp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hsp-fact { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--sk-line); border-radius: 16px; background: var(--sk-surface); min-width: 0; }
.hsp-fact span { font-size: var(--fs-xs); color: var(--sk-muted); }
.hsp-fact strong { font-size: var(--fs-md); font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; }
.hsp-fact strong small { font-size: var(--fs-xs); font-weight: 600; color: var(--sk-muted); }
.hsp-fact--primary { background: var(--sk-primary); border-color: var(--sk-primary); }
.hsp-fact--primary span { color: rgba(255, 255, 255, .8); }
.hsp-fact--primary strong { color: #FFFFFF; font-size: 1.5rem; }
.hsp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hsp-box { padding: 18px 20px; border: 1px solid var(--sk-line); border-radius: 20px; background: var(--sk-surface); }
.hsp-box h2 { margin: 0 0 12px; font-size: var(--fs-md); font-weight: 800; }
.hsp-box h3 { margin: 16px 0 8px; font-size: var(--fs-sm); font-weight: 800; }
.hsp-text { margin: 0; font-size: var(--fs-sm); line-height: 2.1; color: var(--sk-ink); }
.hsp-lead { margin: 0 0 4px; font-size: var(--fs-sm); line-height: 2; }
.hsp-note { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.9; color: var(--sk-muted); }
.hsp-muted { font-size: var(--fs-xs); color: var(--sk-muted); }
.hsp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.hsp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hsp-table th { padding: 8px 10px; text-align: right; font-size: var(--fs-xs); font-weight: 700; color: var(--sk-muted); background: var(--sk-ground); }
.hsp-table th:first-child { border-radius: 0 10px 10px 0; }
.hsp-table th:last-child { border-radius: 10px 0 0 10px; }
.hsp-table td { padding: 8px 10px; border-bottom: 1px solid var(--sk-line); font-variant-numeric: tabular-nums; }
.hsp-table tr:last-child td { border-bottom: none; }
.hsp-table--compact { max-width: 520px; }
.hsp-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }

.hsp-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); line-height: 1.9; }
.hsp-codes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hsp-codes a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--sk-line); color: var(--sk-ink); text-decoration: none; }
.hsp-codes li:last-child a { border-bottom: none; }
.hsp-codes a:hover .hsp-codes__title { color: var(--sk-primary); }
.hsp-codes__code { font-weight: 800; color: var(--sk-primary); font-variant-numeric: tabular-nums; text-align: left; }
.hsp-codes__title { font-size: var(--fs-sm); line-height: 1.8; }
.hsp-codes__duty { padding: 2px 10px; border-radius: 999px; background: var(--sk-ground); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

.hsp-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; }
.hsp-pager a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* فهرست فصل‌ها در صفحه‌ی جستجوی تعرفه */
.hsp-chapters__list { margin: 0; padding: 4px 0 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.hsp-chapters__list a {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--sk-line); border-radius: 14px; color: var(--sk-ink); text-decoration: none; background: var(--sk-surface);
}
.hsp-chapters__list a:hover { border-color: var(--sk-primary-soft-border); background: var(--sk-primary-soft); }
.hsp-chapters__no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sk-primary-soft); color: var(--sk-primary); font-weight: 800; }
.hsp-chapters__name { font-size: var(--fs-sm); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hsp-chapters__count { font-size: var(--fs-xs); color: var(--sk-muted); white-space: nowrap; }

@media (max-width: 900px) {
    .hsp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hsp { padding-top: 12px; }
    .hsp-box { padding: 14px; border-radius: 16px; }
    .hsp-actions .sk-btn { flex: 1 1 100%; }
    .hsp-codes a { grid-template-columns: 82px minmax(0, 1fr); }
    .hsp-codes__duty { grid-column: 2; justify-self: start; }
    .hsp-table { font-size: var(--fs-xs); }
}