/* =====================================================================
 * Jahizsaz — catalog pages (/list/, /price/, /budget/)
 * Everything is scoped under .jh-catalog; the only global rules live in the
 * @media print block at the end (they hide site chrome on paper).
 * Tokens come from main.css :root.
 * ===================================================================== */

.jh-catalog {
    --jh-header-h: 60px;
    --jh-sticky-top: calc(var(--jh-header-h) + 8px);
    --jh-must-ink: #7A4A12;
    background: var(--sand);
    color: var(--ink);
    padding-block: var(--s-2) var(--s-7);
    line-height: var(--lh-body);
}
@media (min-width: 1024px) {
    .jh-catalog { --jh-header-h: 72px; padding-block-end: var(--s-8); }
}
.jh-catalog *, .jh-catalog *::before, .jh-catalog *::after { box-sizing: border-box; }
.jh-catalog ul, .jh-catalog ol { margin: 0; padding: 0; list-style: none; }
.jh-catalog p { margin: 0; }

.jh-wrap {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--s-4);
}
@media (min-width: 768px) { .jh-wrap { padding-inline: var(--s-5); } }

.jh-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Headings / shared text ---------- */
.jh-catalog .jh-h2 {
    margin: 0 0 var(--s-2);
    font-size: 20px;
    font-weight: 800;
    line-height: var(--lh-heading);
    color: var(--ink);
}
.jh-catalog .jh-lead {
    margin: 0 0 var(--s-3);
    font-size: 14px;
    color: var(--ink-muted);
}
.jh-tiers, .jh-links, .jh-tips, .jh-faq, .jh-cta { margin-top: var(--s-6); }

/* ---------- Breadcrumb ---------- */
.jh-crumbs { padding-block: var(--s-2); }
.jh-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font-size: 13px; color: var(--ink-muted); }
.jh-crumbs__item { display: inline-flex; align-items: center; }
.jh-crumbs__item + .jh-crumbs__item::before { content: "\2039"; margin-inline: 6px; color: var(--ink-disabled); font-size: 16px; line-height: 1; }
.jh-crumbs a { display: inline-block; padding-block: 8px; color: var(--primary); text-decoration: none; }
.jh-crumbs a:hover { text-decoration: underline; }
.jh-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.jh-hero { padding-block: var(--s-3) var(--s-2); }
.jh-catalog .jh-hero__title {
    margin: 0 0 var(--s-3);
    font-size: clamp(24px, 6.4vw, 36px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.jh-hero__intro { max-width: 68ch; font-size: 15px; line-height: 1.95; color: var(--ink); }
@media (min-width: 768px) { .jh-hero__intro { font-size: 16px; } }
.jh-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.jh-stats__item {
    display: flex; flex-direction: column;
    min-width: 128px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.jh-stats__label { font-size: 12px; color: var(--ink-muted); line-height: 1.6; }
.jh-stats__value { font-size: 16px; font-weight: 800; color: var(--primary); line-height: 1.6; }
.jh-hero__source { margin-top: var(--s-3); font-size: 13px; color: var(--ink-muted); }
.jh-hero__source::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px;
    border-radius: 50%; background: var(--success); vertical-align: middle;
}

/* ---------- Tier cards ---------- */
.jh-tiers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 768px) { .jh-tiers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } }
.jh-tier {
    display: flex; flex-direction: column; gap: 2px;
    height: 100%; min-height: 88px;
    padding: var(--s-3) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.jh-catalog a.jh-tier { color: var(--ink); }
.jh-catalog a.jh-tier:hover { border-color: var(--primary); box-shadow: var(--e1); color: var(--ink); }
.jh-tier.is-current { background: var(--primary-soft); border-color: var(--primary); }
.jh-tier__name { font-size: 14px; font-weight: 700; line-height: 1.6; }
.jh-tier__total { font-size: 17px; font-weight: 800; color: var(--primary); line-height: 1.5; }
.jh-tier__total small { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.jh-tier__count { font-size: 12px; color: var(--ink-muted); }

/* ---------- Buttons ---------- */
.jh-catalog .jh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 44px; padding: 0 var(--s-4);
    background: var(--surface);
    border: 1.5px solid var(--primary);
    border-radius: var(--r-btn);
    color: var(--primary);
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), filter var(--d-2) var(--ease);
}
.jh-catalog .jh-btn:hover { background: var(--primary-soft); color: var(--primary); }
.jh-catalog .jh-btn--solid { background: var(--primary); color: #fff; }
.jh-catalog .jh-btn--solid:hover { background: var(--primary-dark); color: #fff; }
.jh-catalog .jh-btn--ghost { border-color: var(--line-strong); color: var(--ink-muted); }
.jh-catalog .jh-btn--ghost:hover { background: var(--surface-alt); color: var(--ink); }
.jh-catalog .jh-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 800; }
.jh-catalog .jh-btn--accent:hover { background: var(--accent); color: var(--ink); filter: brightness(1.05); }
.jh-catalog .jh-btn:focus-visible,
.jh-catalog .jh-chip:focus-visible,
.jh-catalog .jh-faq__q:focus-visible { outline: 3px solid var(--primary-focus); outline-offset: 2px; }

/* ---------- Actions ---------- */
.jh-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-5); }
.jh-actions [data-jh-reset] { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .jh-actions { display: flex; flex-wrap: wrap; }
    .jh-actions [data-jh-reset] { margin-inline-start: auto; }
}

/* ---------- Sticky summary ---------- */
.jh-list { margin-top: var(--s-3); }
.jh-summary {
    position: sticky; top: var(--jh-sticky-top); z-index: 30;
    margin-bottom: var(--s-3);
    padding: 10px var(--s-4) 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--e1);
}
.jh-summary__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); font-size: 13px; line-height: 1.9; }
.jh-summary__progress, .jh-summary__remaining { white-space: nowrap; color: var(--ink-muted); }
.jh-summary__progress strong { color: var(--ink); font-size: 15px; }
.jh-summary__remaining strong { color: var(--primary); font-size: 15px; }
.jh-bar { height: 6px; margin-top: 4px; border-radius: var(--r-pill); background: var(--sand-deeper); overflow: hidden; }
.jh-bar__fill {
    display: block; width: 100%; height: 100%;
    background: var(--primary);
    transform: scaleX(0); transform-origin: right center;
    transition: transform var(--d-3) var(--ease);
}
@media (min-width: 640px) { .jh-summary__row { font-size: 14px; } }

/* ---------- Legend ---------- */
.jh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); margin-bottom: var(--s-3); font-size: 12px; color: var(--ink-muted); line-height: 1.9; }
.jh-legend__item { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }

/* ---------- Dots ---------- */
.jh-dots { display: inline-flex; align-items: center; gap: 4px; }
.jh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; flex: none; }
.jh-dot.is-on { background: var(--primary); border-color: var(--primary); }

/* ---------- Room card ---------- */
.jh-room {
    margin-bottom: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    scroll-margin-top: calc(var(--jh-header-h) + 72px);
}
.jh-room__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}
.jh-catalog .jh-room__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.5; }
.jh-room__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--ink-muted); }
.jh-room__meta a { display: inline-block; padding-block: 6px; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jh-room__sum { flex: none; text-align: end; }
.jh-room__sum strong { display: block; font-size: 17px; font-weight: 800; color: var(--primary); line-height: 1.5; white-space: nowrap; }
.jh-room__sum small { display: block; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }

/* ---------- Checklist rows ---------- */
.jh-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-2);
    padding: 6px var(--s-4) 6px var(--s-3);
    transition: background var(--d-2) var(--ease);
}
.jh-row + .jh-row { border-top: 1px solid var(--line); }
.jh-row:hover { background: var(--surface-alt); }
.jh-row__main { min-width: 0; padding-block: 4px; }
.jh-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.6; }
.jh-catalog .jh-row__title {
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px;
}
.jh-catalog .jh-row__title:hover { color: var(--primary); text-decoration-color: var(--primary); }
.jh-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; font-size: 13px; color: var(--ink-muted); line-height: 1.7; }
.jh-row__unit { color: var(--ink-muted); }
.jh-row__cost { text-align: end; white-space: nowrap; padding-block: 4px; }
.jh-row__cost strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.6; }
.jh-row__cost small { display: block; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.jh-row.is-done .jh-row__title { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-disabled); }
.jh-row.is-done .jh-row__cost strong { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-disabled); }

.jh-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.jh-badge--qty { background: var(--primary-soft); color: var(--primary); }
.jh-badge--must { background: var(--accent-soft); color: var(--jh-must-ink); }

/* Custom checkbox: the native input covers the 44px tap area. */
.jh-check { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jh-check__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jh-check__box {
    position: relative; display: block; width: 24px; height: 24px;
    border: 2px solid var(--ink-muted); border-radius: 7px; background: var(--surface);
    transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.jh-check__box::after {
    content: ""; position: absolute; inset-inline-start: 50%; top: 45%;
    width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform var(--d-2) var(--ease);
}
.jh-check__input:checked + .jh-check__box { background: var(--primary); border-color: var(--primary); }
.jh-check__input:checked + .jh-check__box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.jh-check__input:focus-visible + .jh-check__box { outline: 3px solid var(--primary-focus); outline-offset: 2px; }
@media (hover: hover) { .jh-check:hover .jh-check__box { border-color: var(--primary); } }

@media (min-width: 640px) {
    .jh-row { column-gap: var(--s-3); padding-inline-end: var(--s-5); }
    .jh-row__cost { min-width: 96px; }
}

/* ---------- Tips ---------- */
.jh-tips__list { display: grid; gap: var(--s-2); counter-reset: jh-tip; }
.jh-tips__list li {
    position: relative; counter-increment: jh-tip;
    padding: var(--s-3) var(--s-4); padding-inline-start: 56px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: 14px; line-height: 1.9;
}
.jh-tips__list li::before {
    content: counter(jh-tip, persian);
    position: absolute; inset-inline-start: var(--s-3); top: 12px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-soft); color: var(--jh-must-ink);
    font-size: 14px; font-weight: 800;
}

/* ---------- Link chips ---------- */
.jh-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jh-catalog .jh-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 44px; padding: 0 var(--s-4);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.jh-catalog .jh-chip:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.jh-chip small { font-size: 12px; font-weight: 500; color: var(--ink-muted); }

/* ---------- CTA ---------- */
.jh-cta {
    display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-5);
    background: var(--primary); color: #fff;
    border-radius: var(--r-lg);
}
.jh-catalog .jh-cta__title { margin: 0 0 var(--s-2); font-size: 20px; font-weight: 800; color: #fff; line-height: 1.5; }
.jh-cta__text { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .9); }
.jh-cta__btn { width: 100%; }
@media (min-width: 768px) {
    .jh-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); }
    .jh-cta__btn { width: auto; flex: none; }
}

/* ---------- FAQ ---------- */
.jh-faq__list { display: grid; gap: var(--s-2); }
.jh-faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.jh-faq__item[open] { border-color: var(--line-strong); }
.jh-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 52px; padding: 10px var(--s-4);
    font-size: 15px; font-weight: 700; line-height: 1.7;
    cursor: pointer; list-style: none;
}
.jh-faq__q::-webkit-details-marker { display: none; }
.jh-faq__q::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border: solid var(--ink-muted); border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform var(--d-2) var(--ease);
}
.jh-faq__item[open] > .jh-faq__q::after { transform: rotate(-135deg); }
.jh-faq__a { padding: 0 var(--s-4) var(--s-4); font-size: 14px; line-height: 2; color: var(--ink); }

/* ---------- Toast ---------- */
.jh-catalog .jh-toast {
    position: fixed; z-index: var(--z-toast);
    inset-inline: var(--s-4);
    inset-block-end: calc(84px + env(safe-area-inset-bottom));
    margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
    padding: 12px 20px;
    background: var(--ink); color: #fff;
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500; text-align: center; line-height: 1.6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.jh-catalog .jh-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 1024px) { .jh-catalog .jh-toast { inset-block-end: var(--s-5); } }

/* Print header: paper only. */
.jh-print-head { display: none; }

/* =====================================================================
 * Print: a clean black-and-white checklist with empty boxes.
 * (Global selectors below only exist because catalog.css loads on catalog
 * routes alone; they strip the site chrome from the printout.)
 * ===================================================================== */
@media print {
    @page { size: A4; margin: 14mm 12mm; }

    .kk-c-topbar, .kk-c-header, .kj-bottom-nav, .jahizsaz-footer, .jahizsaz-modal,
    .jahizsaz-toast, .skip-link, #wpadminbar { display: none !important; }
    html, body { background: #fff !important; color: #000 !important; padding: 0 !important; }

    .jh-catalog { background: #fff; color: #000; padding: 0; font-size: 11pt; line-height: 1.6; }
    .jh-wrap { max-width: none; padding: 0; }

    .jh-crumbs, .jh-hero, .jh-tiers, .jh-actions, .jh-summary, .jh-legend, .jh-dots,
    .jh-links, .jh-tips, .jh-cta, .jh-faq, .jh-toast, .jh-room__meta a, .jh-room__sum small,
    .jh-row__cost small { display: none !important; }

    .jh-print-head { display: block; margin-bottom: 6mm; padding-bottom: 3mm; border-bottom: 2pt solid #000; }
    .jh-print-head__brand { font-size: 10pt; }
    .jh-print-head__title { margin: 1mm 0; font-size: 18pt; font-weight: 900; }
    .jh-print-head__note { font-size: 9pt; }

    .jh-list { margin: 0; }
    .jh-room { margin: 0 0 6mm; border: 0; border-radius: 0; background: #fff; overflow: visible; }
    .jh-room__head { padding: 0 0 2mm; background: #fff; border-bottom: 1pt solid #000; break-after: avoid; }
    .jh-catalog .jh-room__title { font-size: 13pt; }
    .jh-room__sum strong { font-size: 11pt; color: #000; }
    .jh-room__meta { color: #000; font-size: 9pt; }

    .jh-row { grid-template-columns: 9mm minmax(0, 1fr) auto; padding: 1.6mm 0; border-top: 0.5pt solid #999; break-inside: avoid; }
    .jh-row:hover { background: none; }
    .jh-row + .jh-row { border-top: 0.5pt solid #999; }
    .jh-check { width: 9mm; height: 6mm; }
    .jh-check__box { width: 4.6mm; height: 4.6mm; border: 1.2pt solid #000; border-radius: 0; background: #fff !important; }
    .jh-check__input:checked + .jh-check__box { background: #fff !important; border-color: #000; }
    .jh-check__box::after { border-color: #000; transform: translate(-50%, -50%) rotate(45deg) scale(0); }
    .jh-check__input:checked + .jh-check__box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
    .jh-catalog .jh-row__title, .jh-row.is-done .jh-row__title { color: #000; font-size: 11pt; text-decoration: none; }
    .jh-row.is-done .jh-row__cost strong { color: #000; text-decoration: none; }
    .jh-row__meta, .jh-row__unit { color: #000; font-size: 9pt; }
    .jh-row__cost strong { font-size: 10pt; color: #000; }
    .jh-badge { height: auto; padding: 0 1.5mm; border: 0.5pt solid #000; background: none; color: #000; font-size: 8pt; }
    .jh-catalog a { color: #000 !important; text-decoration: none !important; }
}