/*
Base layer — resets and element defaults. No classes here, only elements
and the document root. Everything is RTL-first: this theme has no LTR
variant to support, so direction is set globally rather than per-component.
*/

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	direction: rtl;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	direction: rtl;
	text-align: start;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-regular);
	line-height: var(--leading-normal);
	color: var(--color-ink);
	background: var(--color-bg);
	min-height: 100svh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'dlig' 1,'swsh' 1;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }



p {
	text-wrap: pretty;
}

ul, ol {
	list-style: none;
}

/* No underline anywhere by default. WordPress's own wp_nav_menu() output
   (and WooCommerce's breadcrumb) never puts a class on the <a> itself —
   only on its parent <li> — so a :not([class]) heuristic here would
   wrongly catch every nav/breadcrumb link too. The one deliberate
   exception is .entry-content a (prose.css): body-content links get a
   real underline, since color alone isn't enough affordance there. */
a {
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: from-font;
}

img, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}



table {
	border-collapse: collapse;
	width: 100%;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	text-align: start;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Numerals that must stay LTR regardless of surrounding Persian text
   (prices, SKUs, phone numbers) — apply via this utility class. */
.ltr-num {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

/* Focus ---------------------------------------------------------------- */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--color-primary-tint);
	color: var(--color-ink);
}

/* Screen-reader-only utility, used across the theme for accessible labels. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Core search form (get_search_form) — used on the search empty state and
   the 404 page. */

.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form .search-field {
	flex: 1;
	min-height: 44px;
	padding-inline: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-base);
	font-family: inherit;
}

.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-bg);
	font-weight: var(--font-medium);
}

.search-form .search-submit:hover {
	background: var(--color-primary-hover);
}

.error-404 {
	max-width: 480px;
	margin-inline: auto;
	padding-block: var(--space-8);
	text-align: center;
}

.error-404 p {
	color: var(--color-muted);
	margin-block: var(--space-3) var(--space-5);
}

.error-404 h2 {
	font-size: var(--text-lg);
	margin-block: var(--space-6) var(--space-3);
}

.error-404 ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-6);
}

.error-404 ul a:hover {
	color: var(--color-primary);
}

/* Layout container ------------------------------------------------------ */

.container {
	width: 100%;
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Shared content header, reused by static pages, blog archive, and blog
   single — anywhere a template just needs a title above its content. */

.breadcrumb,
.woocommerce-breadcrumb {
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-block-end: var(--space-4);
	margin-block-start: var(--space-4);
}

.breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
}

.page-header {
	padding-block: var(--space-6) var(--space-4);
}

.page-title {
	font-size: var(--text-xl);
}

.page-content {
	padding-block: var(--space-2) var(--space-8);
}

/* Excludes .woocommerce: Cart/Checkout/My Account render inside that
   wrapper and need the full container width, not a prose measure.
   Spacing between children comes from .entry-content (prose.css), which
   page.php also applies — this file only handles what prose.css doesn't
   need to know about (the WooCommerce exclusion). */
.page-content > *:not(.woocommerce) {
	max-width: 75ch;
}

/* Page layout with a featured image + TOC (.page-layout__image) beside
   the content -- only rendered by page.php when the page actually has an
   image and/or a TOC, so no modifier class is needed for the plain case
   (just .page-content, full width). page.php puts the aside before
   .page-content in the markup, so it stacks above the content on mobile
   (below 1024px, where the aside isn't worth the grid and is left in
   normal flow) and lands in the grid's first (inline-start) track on
   desktop -- the right edge in this RTL theme -- without a CSS `order`
   override that would leave the visual and DOM order mismatched. */
.page-layout__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin-block: var(--space-2) var(--space-8);
}

@media (min-width: 1024px) {
	.page-layout {
		display: grid;
		grid-template-columns: 4.2fr 7fr;
		gap: var(--space-8);
		align-items: start;
	}

	.page-layout__image {
		position: sticky;
		top: calc(var(--header-h, 0px) + var(--space-4));
	}
}

/* WordPress core pagination (the_posts_pagination) — shared by the blog
   archive and search results. WooCommerce's own pagination reuses the
   same .page-numbers class convention but is scoped separately in
   shop.css since it sits in a different wrapper. */

.pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-start: var(--space-8);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.pagination a.page-numbers:hover {
	background: var(--color-surface);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: var(--color-bg);
	font-weight: var(--font-semibold);
}

.pagination .page-numbers.dots {
	background: none;
}


span.woocommerce-Price-currencySymbol {
    font-size: 0.7em;
}

.product-carousel__nav:disabled {
    opacity: 0;
}