@charset "UTF-8";
/* paykar-base */
/*
Theme Name: Paykar
Author: Paykar
Description: هسته‌ی قالب فروشگاهی راست‌چین: بارگذاری شرطی ماژول‌ها، مرز ایمنی تراکنش ووکامرس و خط لوله‌ی بهینه‌ی استایل. بدون صفحات آماده — صفحات را خودتان روی این هسته می‌سازید.
Version: 1.1.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paykar
Domain Path: /languages
Tags: e-commerce, rtl-language-support, custom-logo, featured-images, translation-ready, block-styles
*/

/*
 * TOKENS
 *
 * Every value below is overwritten at runtime by Paykar_Theme::design_tokens_css()
 * from the stored settings. The declarations here are the packaged defaults and
 * the contract: a module, a child theme or a client restyle only ever needs to
 * change these, never the component sheets.
 *
 * The brand ramp derives from --pk-color-primary through color-mix(), so one
 * colour control moves the whole palette instead of two rules.
 */
:root {
	--pk-color-primary: #2F6BF3;
	--pk-color-primary-dark: color-mix(in srgb, var(--pk-color-primary) 84%, #000);
	--pk-color-primary-bright: color-mix(in srgb, var(--pk-color-primary) 80%, #fff);
	--pk-color-primary-mid: color-mix(in srgb, var(--pk-color-primary) 66%, #fff);
	--pk-color-primary-tint: color-mix(in srgb, var(--pk-color-primary) 35%, #fff);
	--pk-color-primary-wash: color-mix(in srgb, var(--pk-color-primary) 11%, #fff);
	--pk-color-secondary: #12B886;

	--pk-color-background: #FFFFFF;
	--pk-color-surface: #F7F8FA;
	--pk-color-border: #E5E8EE;
	--pk-color-text: #171717;
	--pk-color-muted: #5B6068;
	--pk-color-subtle: #868B93;

	--pk-font-family: "Paykar Vazirmatn", Tahoma, Arial, sans-serif;
	--pk-font-size-base: 14px;
	--pk-font-scale: 1;

	--pk-container: 1280px;
	--pk-gutter: 24px;
	--pk-radius: 16px;
	--pk-button-radius: 10px;
}

/* Older browsers with no color-mix() get the ramp pre-computed. */
@supports not (color: color-mix(in srgb, red 50%, #000)) {
	:root {
		--pk-color-primary-dark: #2759CC;
		--pk-color-primary-bright: #5989F5;
		--pk-color-primary-mid: #8AAEF8;
		--pk-color-primary-tint: #C0D3FB;
		--pk-color-primary-wash: #EDF2FE;
	}
}

/*
 * RESET
 *
 * Kept to what a theme actually needs. Block editor output and WooCommerce
 * markup both assume browser defaults for most elements, so a heavier reset
 * costs more in overrides than it saves.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--pk-color-background);
	color: var(--pk-color-text);
	font-family: var(--pk-font-family);
	font-size: var(--pk-font-size-base);
	font-weight: 400;
	line-height: 1.7;
}

button,
input,
select,
textarea {
	font-family: var(--pk-font-family);
}

/* Persian faces sit high in the em box; a slightly looser line-height keeps
   controls and their labels optically aligned. */
button,
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

/*
 * LAYOUT PRIMITIVES
 *
 * Two rules. Anything more specific belongs to a module.
 */
.paykar-main {
	width: min(100% - var(--pk-gutter), var(--pk-container));
	margin-inline: auto;
	min-height: 45vh;
}

.paykar-skip-link {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 100000;
	transform: translateY(-160%);
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.paykar-skip-link:focus {
	transform: none;
}
:root{--pk-color-primary:#2F6BF3;--pk-color-secondary:#12B886;--pk-color-background:#FFFFFF;--pk-color-text:#171717;--pk-font-family:"Paykar Vazirmatn",Tahoma,Arial,sans-serif;--pk-font-size-base:14px;--pk-font-scale:1;--pk-container:1280px;--pk-radius:16px;--pk-button-radius:10px}
/* paykar-design-system */
/*
 * TYPOGRAPHIC SCALE
 *
 * Eleven fluid steps. Each interpolates between a 360px and a 1280px viewport
 * with clamp(), so one declaration covers phone and desktop and there is no
 * second set of mobile overrides to drift out of sync.
 *
 * Sizes are in rem so they follow the reader's browser text-size setting;
 * pixel font sizes ignore it entirely.
 *
 * Every step is multiplied by --pk-font-scale, which PHP emits from the "base
 * font size" setting. That is what makes one control resize the whole theme
 * instead of a single wrapper rule. Use these tokens in component CSS rather
 * than hard-coded pixels, or the control stops working for that component.
 *
 * --pk-fs-field is pinned to 1rem (16px) below 768px on purpose: iOS Safari
 * zooms into any form control smaller than 16px and never zooms back out,
 * which makes checkout address fields jump on an iPhone.
 */
:root {
	--pk-fs-3xs: calc(0.625rem * var(--pk-font-scale, 1));
	--pk-fs-2xs: calc(0.6875rem * var(--pk-font-scale, 1));
	--pk-fs-xs: calc(clamp(0.75rem, 0.7378rem + 0.0543vw, 0.7812rem) * var(--pk-font-scale, 1));
	--pk-fs-sm: calc(clamp(0.8125rem, 0.8003rem + 0.0543vw, 0.8438rem) * var(--pk-font-scale, 1));
	--pk-fs-base: calc(clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem) * var(--pk-font-scale, 1));
	--pk-fs-md: calc(clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem) * var(--pk-font-scale, 1));
	--pk-fs-lg: calc(clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem) * var(--pk-font-scale, 1));
	--pk-fs-xl: calc(clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem) * var(--pk-font-scale, 1));
	--pk-fs-2xl: calc(clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem) * var(--pk-font-scale, 1));
	--pk-fs-3xl: calc(clamp(1.3125rem, 1.1902rem + 0.5435vw, 1.625rem) * var(--pk-font-scale, 1));
	--pk-fs-4xl: calc(clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem) * var(--pk-font-scale, 1));
	--pk-fs-field: calc(1rem * var(--pk-font-scale, 1));

	/* Spacing scale, used by the default chrome and available to modules. */
	--pk-space-2xs: 4px;
	--pk-space-xs: 8px;
	--pk-space-sm: 12px;
	--pk-space-md: 16px;
	--pk-space-lg: 24px;
	--pk-space-xl: 32px;
	--pk-space-2xl: 48px;
}

@media (min-width: 768px) {
	:root {
		--pk-fs-field: calc(0.9375rem * var(--pk-font-scale, 1));
	}
}

/*
 * DOCUMENT
 *
 * The body carries .paykar-theme, added by body_class() in header.php. Scoping
 * to it keeps these rules out of the block editor iframe and away from plugin
 * markup that renders outside the theme's own tree.
 */
.paykar-theme {
	background-color: var(--pk-color-background);
	color: var(--pk-color-text);
	font-family: var(--pk-font-family);
	font-size: var(--pk-fs-base);
}

html[dir="rtl"] .paykar-theme {
	direction: rtl;
}

html[dir="ltr"] .paykar-theme {
	direction: ltr;
}

/* :where() keeps specificity at zero, so a module overrides these without
   needing !important or a longer selector. */
.paykar-theme :where(button, .button, input[type="button"], input[type="submit"], input[type="reset"]) {
	border-radius: var(--pk-button-radius);
}

.paykar-theme :where(.alignwide) {
	width: min(100% - var(--pk-gutter), var(--pk-container));
	max-width: none;
	margin-inline: auto;
}

.paykar-theme :where(.alignfull) {
	width: 100%;
	max-width: none;
}

/* The @font-face itself is injected by PHP, and only when the file exists. */
html body,
html body button,
html body input,
html body select,
html body textarea {
	font-family: var(--pk-font-family, Tahoma, Arial, sans-serif);
}

/*
 * DEFAULT CHROME
 *
 * The minimal header and footer rendered by Paykar_Theme when no module has
 * replaced them. Deliberately plain: it should be obvious that this is the
 * skeleton's placeholder, not a design decision to inherit.
 */
.paykar-header {
	border-block-end: 1px solid var(--pk-color-border);
	background: var(--pk-color-background);
}

.paykar-header__inner,
.paykar-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pk-space-md);
	width: min(100% - var(--pk-gutter), var(--pk-container));
	margin-inline: auto;
	padding-block: var(--pk-space-md);
}

.paykar-brand__name {
	font-size: var(--pk-fs-xl);
	font-weight: 800;
}

.paykar-brand__logo {
	display: block;
	max-height: 48px;
	width: auto;
}

.paykar-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pk-fs-md);
}

.paykar-menu a:hover,
.paykar-menu a:focus-visible {
	color: var(--pk-color-primary);
}

.paykar-footer {
	margin-block-start: var(--pk-space-2xl);
	border-block-start: 1px solid var(--pk-color-border);
	background: var(--pk-color-surface);
}

.paykar-footer__inner {
	justify-content: space-between;
	padding-block: var(--pk-space-lg);
}

.paykar-footer__copyright {
	margin: 0;
	color: var(--pk-color-muted);
	font-size: var(--pk-fs-sm);
}
@font-face{font-family:"Paykar Vazirmatn";src:url("https://nk.toylandcenter.com/wp-content/themes/paykar/fonts/woff/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* paykar-accessibility */
.paykar-theme :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--pk-color-primary);outline:3px solid color-mix(in srgb,var(--pk-color-primary) 72%,#fff);outline-offset:3px}.paykar-theme :where(button,[role="button"]):not(:disabled){cursor:pointer}.paykar-theme :where(button,input,select,textarea):disabled{cursor:not-allowed}.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus{top:8px;right:8px;z-index:1000000;width:auto;height:auto;padding:12px 16px;clip:auto;background:#fff;color:#111;white-space:normal}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto !important}.paykar-theme *,.paykar-theme *::before,.paykar-theme *::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}@media (forced-colors: active){.paykar-theme :where(a,button,input,select,textarea):focus-visible{outline:2px solid CanvasText}}
/* paykar-content */
/*
 * Editorial screens: blog index, archives, search, 404, single posts, comments.
 *
 * Loaded only on the `content` context — see Paykar_Context::is_content().
 * WooCommerce catalogue and transactional pages carry none of this weight.
 *
 * Every colour, radius, space and size below is a design token. No literal hex
 * values and no fixed pixel font sizes: a literal ignores both the admin colour
 * controls and --pk-font-scale, so a component written that way silently stops
 * responding to the theme settings. This file is the reference for how a
 * component sheet should be written.
 */

/* ---------------------------------------------------------------------------
 * Shared page rhythm
 * ------------------------------------------------------------------------ */

.paykar-archive-main,
.paykar-single-main,
.paykar-search-main,
.paykar-404-main {
	padding-block: clamp(var(--pk-space-lg), 4vw, var(--pk-space-2xl));
}

/* ---------------------------------------------------------------------------
 * Archive header
 * ------------------------------------------------------------------------ */

.paykar-archive-header {
	margin-block-end: clamp(var(--pk-space-md), 3vw, var(--pk-space-xl));
	padding-block-end: var(--pk-space-md);
	border-block-end: 1px solid var(--pk-color-border);
}

.paykar-archive-title {
	margin: 0 0 var(--pk-space-xs);
	font-size: var(--pk-fs-3xl);
	font-weight: 800;
	line-height: 1.5;
	color: var(--pk-color-text);
}

.paykar-archive-title span {
	color: var(--pk-color-primary);
}

.paykar-archive-description {
	color: var(--pk-color-muted);
	line-height: 1.9;
}

/* ---------------------------------------------------------------------------
 * Loop
 * ------------------------------------------------------------------------ */

.paykar-loop {
	display: grid;
	gap: clamp(var(--pk-space-md), 2.4vw, var(--pk-space-lg));
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.paykar-loop-entry {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--pk-color-background);
	border: 1px solid var(--pk-color-border);
	border-radius: var(--pk-radius);
	transition: box-shadow .2s ease, transform .2s ease;
}

.paykar-loop-entry:hover,
.paykar-loop-entry:focus-within {
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
	transform: translateY(-2px);
}

.paykar-loop-entry__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pk-color-surface);
}

.paykar-loop-entry__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.paykar-loop-entry__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--pk-space-sm);
	padding: var(--pk-space-md);
}

.paykar-loop-entry__title {
	margin: 0;
	font-size: var(--pk-fs-lg);
	font-weight: 700;
	line-height: 1.7;
}

.paykar-loop-entry__title a {
	color: inherit;
}

.paykar-loop-entry__title a:hover,
.paykar-loop-entry__title a:focus-visible {
	color: var(--pk-color-primary);
}

.paykar-loop-entry__meta {
	margin: 0;
	font-size: var(--pk-fs-xs);
	color: var(--pk-color-subtle);
}

.paykar-loop-entry__excerpt {
	flex: 1;
	font-size: var(--pk-fs-sm);
	line-height: 1.9;
	color: var(--pk-color-muted);
}

.paykar-loop-entry__excerpt p {
	margin: 0;
}

.paykar-loop-entry__more {
	align-self: flex-start;
	font-size: var(--pk-fs-sm);
	font-weight: 700;
	color: var(--pk-color-primary);
}

/* ---------------------------------------------------------------------------
 * Single post
 * ------------------------------------------------------------------------ */

.paykar-single-entry {
	/* A measure, not a container: long-form text stops being readable well
	   before it reaches the full container width. */
	max-width: 72ch;
	margin-inline: auto;
}

.paykar-single-header {
	margin-block-end: var(--pk-space-lg);
}

.paykar-single-title {
	margin: 0 0 var(--pk-space-sm);
	font-size: var(--pk-fs-4xl);
	font-weight: 800;
	line-height: 1.6;
}

.paykar-single-meta {
	margin: 0;
	font-size: var(--pk-fs-xs);
	color: var(--pk-color-subtle);
}

.paykar-single-thumb {
	margin: 0 0 var(--pk-space-lg);
	overflow: hidden;
	border-radius: var(--pk-radius);
}

.paykar-single-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.paykar-single-content {
	font-size: var(--pk-fs-md);
	line-height: 2.05;
	color: var(--pk-color-text);
}

/* The owl selector: vertical rhythm with no trailing margin to collapse
   against whatever follows the article. */
.paykar-single-content > * + * {
	margin-block-start: 1.15em;
}

.paykar-single-content :is(h2, h3, h4) {
	margin-block: 1.6em .6em;
	font-weight: 800;
	line-height: 1.6;
}

.paykar-single-content img {
	height: auto;
	border-radius: calc(var(--pk-radius) * .75);
}

.paykar-single-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--pk-space-md);
	border-inline-start: 3px solid var(--pk-color-primary);
	color: var(--pk-color-muted);
}

/* Code is Latin-script regardless of the document direction. */
.paykar-single-content :is(pre, code) {
	direction: ltr;
	text-align: left;
}

.paykar-single-content pre {
	padding: var(--pk-space-md);
	overflow-x: auto;
	background: var(--pk-color-surface);
	border-radius: calc(var(--pk-radius) * .75);
}

.paykar-single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-xs);
	margin-block-start: var(--pk-space-lg);
}

.paykar-single-tags a {
	padding: var(--pk-space-2xs) var(--pk-space-sm);
	font-size: var(--pk-fs-xs);
	background: var(--pk-color-surface);
	border-radius: 999px;
	color: var(--pk-color-muted);
}

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------ */

.paykar-archive-main .navigation,
.paykar-single-main .navigation,
.paykar-search-main .navigation {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-xs);
	justify-content: center;
	margin-block-start: clamp(var(--pk-space-lg), 4vw, var(--pk-space-2xl));
}

.paykar-archive-main .page-numbers,
.paykar-search-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--pk-space-sm);
	background: var(--pk-color-background);
	border: 1px solid var(--pk-color-border);
	border-radius: var(--pk-button-radius);
	font-weight: 700;
}

.paykar-archive-main .page-numbers.current,
.paykar-search-main .page-numbers.current {
	background: var(--pk-color-primary);
	border-color: var(--pk-color-primary);
	color: var(--pk-color-background);
}

.paykar-page-links {
	display: flex;
	gap: var(--pk-space-xs);
	margin-block-start: var(--pk-space-lg);
}

/* ---------------------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------------------ */

.paykar-no-results,
.paykar-404 {
	max-width: 560px;
	margin-inline: auto;
	padding-block: clamp(var(--pk-space-xl), 6vw, 72px);
	text-align: center;
}

.paykar-no-results h2,
.paykar-404__title {
	margin: 0 0 var(--pk-space-sm);
	font-size: var(--pk-fs-3xl);
	font-weight: 800;
}

.paykar-no-results p,
.paykar-404__text {
	margin: 0 0 var(--pk-space-md);
	color: var(--pk-color-muted);
	line-height: 1.9;
}

.paykar-404__home {
	display: inline-block;
	margin-block-start: var(--pk-space-md);
	padding: var(--pk-space-sm) var(--pk-space-lg);
	background: var(--pk-color-primary);
	border-radius: var(--pk-button-radius);
	color: var(--pk-color-background);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Search form
 * ------------------------------------------------------------------------ */

.paykar-searchform {
	display: flex;
	gap: var(--pk-space-xs);
	max-width: 460px;
	margin-inline: auto;
}

.paykar-searchform__input {
	flex: 1;
	min-width: 0;
	padding: var(--pk-space-sm) var(--pk-space-md);
	font: inherit;
	/* Pinned to the field token: iOS Safari zooms into any control under 16px
	   and never zooms back out. */
	font-size: var(--pk-fs-field);
	background: var(--pk-color-background);
	border: 1px solid var(--pk-color-border);
	border-radius: var(--pk-button-radius);
}

.paykar-searchform__input:focus-visible {
	border-color: var(--pk-color-primary);
	outline: none;
}

.paykar-searchform__submit {
	padding: var(--pk-space-sm) var(--pk-space-lg);
	font: inherit;
	font-weight: 700;
	background: var(--pk-color-primary);
	border: 0;
	border-radius: var(--pk-button-radius);
	color: var(--pk-color-background);
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Comments
 * ------------------------------------------------------------------------ */

.paykar-comments {
	max-width: 72ch;
	margin: clamp(var(--pk-space-xl), 5vw, 56px) auto 0;
	padding-block-start: clamp(var(--pk-space-lg), 4vw, var(--pk-space-xl));
	border-block-start: 1px solid var(--pk-color-border);
}

.paykar-comments__title {
	margin: 0 0 var(--pk-space-md);
	font-size: var(--pk-fs-xl);
	font-weight: 800;
}

.paykar-comments__list {
	margin: 0 0 var(--pk-space-lg);
	padding: 0;
	list-style: none;
}

.paykar-comments__list ol.children {
	margin-block-start: var(--pk-space-md);
	padding-inline-start: clamp(var(--pk-space-sm), 3vw, var(--pk-space-xl));
	list-style: none;
	border-inline-start: 2px solid var(--pk-color-border);
}

.paykar-comments__list li.comment {
	margin-block-end: var(--pk-space-md);
}

.paykar-comments__list .comment-body {
	padding: var(--pk-space-md);
	background: var(--pk-color-surface);
	border-radius: calc(var(--pk-radius) * .85);
}

.paykar-comments__list .comment-author img {
	border-radius: 50%;
	vertical-align: middle;
}

.paykar-comments__list .comment-meta {
	font-size: var(--pk-fs-xs);
	color: var(--pk-color-subtle);
}

.paykar-comments__closed {
	color: var(--pk-color-subtle);
	text-align: center;
}

.paykar-comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: var(--pk-space-sm) var(--pk-space-md);
	font: inherit;
	font-size: var(--pk-fs-field);
	background: var(--pk-color-background);
	border: 1px solid var(--pk-color-border);
	border-radius: var(--pk-button-radius);
}

.paykar-comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

.paykar-comment-form .submit {
	padding: var(--pk-space-sm) var(--pk-space-lg);
	font: inherit;
	font-weight: 700;
	background: var(--pk-color-primary);
	border: 0;
	border-radius: var(--pk-button-radius);
	color: var(--pk-color-background);
	cursor: pointer;
}