@charset "UTF-8";
/* paykar-base */
/*
Theme Name: Paykar
Author: Paykar
Description: هسته‌ی قالب فروشگاهی راست‌چین: بارگذاری شرطی ماژول‌ها، مرز ایمنی تراکنش ووکامرس و خط لوله‌ی بهینه‌ی استایل. بدون صفحات آماده — صفحات را خودتان روی این هسته می‌سازید.
Version: 1.2.5
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-color-white: #FFFFFF;

	/* Narjes Khatoon landing-page palette. */
	--pk-narjes-green: #087A43;
	--pk-narjes-green-dark: #056337;
	--pk-narjes-green-soft: #EDF7F0;
	--pk-narjes-gold: #C6A13C;
	--pk-narjes-ink: #232A26;
	--pk-narjes-muted: #667069;
	--pk-narjes-border: #E3E9E4;
	--pk-narjes-hero: #F4F6F2;
	--pk-narjes-section: #FBFDFB;
	--pk-narjes-card-hover: #FDFEFD;
	--pk-narjes-border-hover: #B9D7C5;
	--pk-narjes-shadow: 0 8px 26px rgba(20, 55, 35, 0.08);
	--pk-narjes-shadow-hover: 0 12px 32px rgba(20, 55, 35, 0.12);

	--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}}