/* ==========================================================================
   03 — Layout: container, sections, heads, breadcrumbs, pagination
   ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }

.sec { padding-block: var(--sec); position: relative; }
.sec--white { background: var(--white); }
.sec--green { background: var(--green-deep); color: #EDE7D6; }
.sec--green h2, .sec--green h3 { color: #fff; }

.site-main { min-height: 50vh; }
/* فضای نوار پایین موبایل */
@media (max-width: 1023px) { body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }

/* ---------- Section head ---------- */
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(24px, 4vw, 44px); }
.sec-head > .btn { align-self: flex-start; }
.sec-head__title { font-size: var(--fs-2xl); font-weight: 900; }
.sec-head__title em { font-style: normal; color: var(--gold); }
.sec-head__lead { color: var(--muted); max-width: 560px; margin-top: 8px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--brown); margin-bottom: 6px; }
.kicker .ico { width: 18px; height: 18px; color: var(--gold); }
.sec--green .kicker { color: var(--gold-light); }
.sec--green .sec-head__lead { color: rgba(237, 231, 214, .72); }

@media (min-width: 768px) {
	.sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ---------- Page hero (صفحات داخلی) ---------- */
.page-hero { position: relative; padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 4vw, 40px); overflow: hidden; }
.page-hero::after {
	content: ""; position: absolute; inset: auto -10% -60% auto; width: 420px; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 154, 39, .16), transparent 70%); pointer-events: none;
}
.page-hero__title { font-size: var(--fs-3xl); font-weight: 900; }
.page-hero__lead { color: var(--muted); max-width: 640px; margin-top: 10px; font-size: var(--fs-lg); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); }
.page-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero__meta .ico { width: 18px; height: 18px; color: var(--gold); }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 18px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs ol, .crumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumbs a { color: var(--ink-2); transition: color var(--t); }
.crumbs a:hover { color: var(--green); }
.crumbs__sep { margin-inline: 6px; color: var(--line-2); }
.crumbs [aria-current] { color: var(--green); font-weight: 600; }

/* ---------- Pagination ---------- */
.pager ul, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.pager a, .pager span, .woocommerce-pagination a, .woocommerce-pagination span {
	min-width: 44px; height: 44px; padding-inline: 12px; display: grid; place-items: center;
	border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); font-weight: 700;
	transition: border-color var(--t), background var(--t), color var(--t);
}
.pager a:hover, .woocommerce-pagination a:hover { border-color: var(--green); color: var(--green); }
.pager .current, .woocommerce-pagination .current { background: var(--green); border-color: var(--green); color: #fff; }
.pager .ico { width: 18px; height: 18px; }
.woocommerce-pagination ul { list-style: none; padding: 0; border: 0; }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); background: rgba(255,255,255,.5); }
.empty .ico { width: 40px; height: 40px; color: var(--gold); }
.empty small { color: var(--brown); }

/* ---------- Two-column (content + aside) ---------- */
.layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .layout--aside { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } }