/* ==========================================================================
   20 · Components — دکمه، فیلد، کارت، چیپ، نشان، صفحه‌بندی …
   ========================================================================== */

/* ---------- دکمه ----------
   اندازه: sm 36 · md 44 (پیش‌فرض) · lg 52
   نوع:    primary (پیش‌فرض) · white · outline · soft · link
   حالت:   hover · active · focus-visible · disabled                    */
.wm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: var(--control-md); padding: 0 var(--btn-px-md);
	border: 1.5px solid transparent; border-radius: var(--r-md);
	background: var(--c-primary-600); color: var(--c-white);
	font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug);
	white-space: nowrap; cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wm-btn:hover { background: var(--c-primary-700); color: var(--c-white); }
.wm-btn:active { transform: translateY(1px); }
.wm-btn:disabled, .wm-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.wm-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.wm-btn--sm { min-height: var(--control-sm); padding: 0 var(--btn-px-sm); font-size: var(--fs-xs); }
.wm-btn--lg { min-height: var(--control-lg); padding: 0 var(--btn-px-lg); font-size: var(--fs-base); }
.wm-btn--block { display: flex; width: 100%; }
.wm-btn--white { background: var(--c-white); color: var(--c-ink-900); box-shadow: var(--shadow-sm); }
.wm-btn--white:hover { background: var(--c-primary-50); color: var(--c-ink-900); }
.wm-btn--ghost, .wm-btn--outline { background: transparent; color: var(--c-primary-600); border-color: var(--c-primary-600); }
.wm-btn--ghost:hover, .wm-btn--outline:hover { background: var(--c-primary-50); color: var(--c-primary-700); }
.wm-btn--soft { background: var(--c-primary-50); color: var(--c-primary-700); }
.wm-btn--soft:hover { background: var(--c-primary-100); color: var(--c-primary-800); }
.wm-btn--link { background: none; padding: 0; min-height: 0; color: var(--c-primary-600); }
.wm-btn--link:hover { background: none; text-decoration: underline; }
.wm-btn--icon { width: var(--control-md); padding: 0; }
.wm-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--c-primary-600); font-size: var(--fs-sm); }
.wm-link svg { width: var(--icon-sm); height: var(--icon-sm); }
.wm-playdot { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); border-radius: 50%; border: 1.5px solid var(--c-primary-600); color: var(--c-primary-600); }
.wm-playdot svg { width: var(--icon-xs); height: var(--icon-xs); fill: var(--c-primary-600); stroke: none; }

/* ---------- فیلد فرم ----------
   ارتفاع 48 · حاشیه neutral · focus با حلقهٔ برند                        */
.wm-field, .wm-form input:not([type=checkbox]):not([type=radio]), .wm-form textarea, .wm-form select,
.wm-shop input[type=text], .wm-shop input[type=email], .wm-shop input[type=password], .wm-shop input[type=tel], .wm-shop input[type=number], .wm-shop textarea, .wm-shop select {
	width: 100%; min-height: var(--control-input); padding: var(--sp-3) var(--sp-4);
	font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-ink-900);
	background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wm-form textarea, .wm-shop textarea { min-height: 8rem; resize: vertical; }
.wm-field:focus, .wm-form input:focus, .wm-form textarea:focus, .wm-form select:focus,
.wm-shop input:focus, .wm-shop textarea:focus, .wm-shop select:focus { outline: 0; border-color: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-focus); }
.wm-form label, .wm-shop label { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-900); }
.wm-form { display: grid; gap: var(--sp-4); padding: var(--sp-6); background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.wm-form h2 { font-size: var(--fs-lg); margin: 0; }
.wm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wm-form .wm-btn { justify-self: start; }
.wm-search-form { display: flex; gap: var(--sp-2); }
.wm-search-form input[type=search] { flex: 1; min-height: var(--control-input); padding: 0 var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-white); }
.wm-search-form input[type=search]:focus { outline: 0; border-color: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-focus); }
.wm-wrap > .wm-search-form { max-width: 45rem; margin-inline-end: auto; }

/* ---------- سرتیتر بخش ---------- */
.wm-eyebrow { display: block; color: var(--c-primary-600); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-snug); margin-bottom: var(--sp-1); }
.wm-section { padding-block: var(--section-pad); }
.wm-section__head { max-width: 47.5rem; margin: 0 auto var(--sp-8); text-align: center; }
.wm-section__head h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.wm-section__head p { margin: 0; color: var(--c-ink-500); font-size: var(--fs-sm); }

/* ---------- رسانه ---------- */
.wm-media { overflow: hidden; }
.wm-media img { width: 100%; height: 100%; object-fit: cover; }
.wm-media--ph { display: grid; place-items: center; min-height: 9rem; color: var(--c-primary-600); background: linear-gradient(135deg, var(--c-white), var(--c-primary-100)); }
.wm-media--ph svg { width: 4.5rem; height: 4.5rem; opacity: .55; stroke-width: 1.2; }
.wm-avatar-ph { display: inline-grid; place-items: center; width: 100%; height: 100%; min-width: var(--control-md); min-height: var(--control-md); border-radius: 50%; background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-400)); color: var(--c-white); font-weight: var(--fw-extrabold); font-size: var(--fs-2xl); }
.wm-dots { background: radial-gradient(circle, var(--c-primary-300) 1.3px, transparent 1.8px) 0 0 / 11px 11px; opacity: .55; }

/* ---------- کارت ---------- */
.wm-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, 1fr); }
.wm-card { display: flex; flex-direction: column; overflow: hidden; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.wm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wm-card__media { position: relative; display: block; aspect-ratio: 5 / 3; overflow: hidden; background: linear-gradient(135deg, var(--c-primary-50), var(--c-primary-100)); }
.wm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.wm-card:hover .wm-card__media img { transform: scale(1.04); }
.wm-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-primary-600); }
.wm-card__ph svg { width: var(--icon-2xl); height: var(--icon-2xl); opacity: .5; stroke-width: 1.2; }
.wm-card__body { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; padding: var(--sp-4) var(--card-pad) var(--sp-3); }
.wm-card__title { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.wm-card__title a { color: var(--c-ink-900); }
.wm-card__title a:hover { color: var(--c-primary-600); }
.wm-card__excerpt { margin: 0 0 var(--sp-2); color: var(--c-ink-500); font-size: var(--fs-sm); line-height: var(--lh-body); }
.wm-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-ink-500); }
.wm-card--article .wm-card__meta { justify-content: flex-start; }
.wm-card__kind { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.wm-card__kind svg, .wm-card__read svg { width: var(--icon-sm); height: var(--icon-sm); }
.wm-card__read { display: inline-flex; align-items: center; gap: var(--sp-2); }
.wm-card__price { color: var(--c-primary-600); font-weight: var(--fw-bold); }
.wm-card__price del { margin-inline-start: var(--sp-2); color: var(--c-ink-500); font-weight: var(--fw-regular); }
.wm-card__price ins { text-decoration: none; }
.wm-card--product .wm-card__media { aspect-ratio: 1; }
.wm-card__play { position: absolute; inset-block-end: var(--sp-3); inset-inline-start: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-radius: var(--r-sm); background: rgba(32, 37, 63, .82); color: var(--c-white); font-size: var(--fs-xs); }
.wm-card__play b { font-weight: var(--fw-semibold); }
.wm-card__play i { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: var(--r-sm); background: var(--c-play); }
.wm-card__play svg { width: var(--icon-xs); height: var(--icon-xs); fill: var(--c-white); stroke: none; }
.wm-card__sale, .wm-shop span.onsale { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: var(--z-raised); min-width: 0; min-height: 0; margin: 0; padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--c-primary-600); color: var(--c-white); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.9; }

/* ---------- چیپ (مرحله / دسته) ---------- */
.wm-chip { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; padding: var(--sp-1); color: var(--c-ink-900); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-align: center; }
.wm-chip svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--c-primary-600); stroke-width: 1.4; }
.wm-chip:hover { color: var(--c-primary-600); }
.wm-chip small { color: var(--c-ink-500); font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.wm-chip--row { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-soft); text-align: start; font-size: var(--fs-sm); }
.wm-chip--row svg { width: var(--icon-md); height: var(--icon-md); }
.wm-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.wm-filters a { padding: var(--sp-1) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-full); color: var(--c-ink-900); font-size: var(--fs-sm); }
.wm-filters a:hover, .wm-filters a.is-active { background: var(--c-primary-600); border-color: var(--c-primary-600); color: var(--c-white); }

/* ---------- صفحه‌بندی و نقاط ---------- */
.wm-pagination { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-8) 0; }
.wm-pagination .page-numbers { min-width: var(--control-sm); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-sm); text-align: center; }
.wm-pagination .current { background: var(--c-primary-600); border-color: var(--c-primary-600); color: var(--c-white); }
.wm-pager { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-6); }
.wm-pager i { width: var(--sp-3); height: var(--sp-1); border-radius: var(--sp-1); background: var(--c-primary-100); }
.wm-pager i.is-on { width: var(--sp-8); background: var(--c-primary-600); }

/* ---------- جزئیات ---------- */
.wm-breadcrumb { margin-bottom: var(--sp-2); color: var(--c-ink-500); font-size: var(--fs-sm); }
.wm-count { margin: var(--sp-1) 0 0; color: var(--c-ink-500); font-size: var(--fs-sm); }
.wm-disclaimer { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-soft); color: var(--c-ink-500); font-size: var(--fs-xs); }
.wm-empty { padding: var(--sp-6) 0 var(--sp-2); text-align: center; color: var(--c-ink-500); }
.wm-empty > svg { width: var(--icon-2xl); height: var(--icon-2xl); color: var(--c-primary-600); opacity: .6; }
.wm-alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-soft); }
.wm-alert--danger { background: var(--c-danger-50); color: var(--c-danger); }
.wm-alert--success { background: var(--c-success-50); color: var(--c-success); }