/*
Theme Name:  Etminan
Theme URI:   https://etminan.local
Description: پوسته فروشگاه اطمینان
Author:      Etminan
Template:    blocksy
Version:     0.1.0
Text Domain: etminan
*/

@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--etminan-font: "Vazirmatn", Tahoma, sans-serif;

	/* Blocksy declares font-family only through these three custom properties —
	   every heading, button, form field, product title, price, badge and tab
	   resolves to one of them, and all three fall back to
	   --theme-font-stack-default (a system stack) in the parent bundle. Setting
	   them here is what puts Vazirmatn on the whole page rather than on body
	   copy alone.

	   Why this wins, precisely — `etminan-css` is NOT the last stylesheet in
	   the document, and betting on that would be a font regression debugged in
	   the wrong file. Served head order on /shop/, verified 2026-08-07:

	     … ct-main-styles-css, ct-woocommerce-styles-css,
	     ct-page-title-styles-css, ct-main-rtl-styles-css,
	     ct-sidebar-styles-css, blocksy-parent-css, etminan-css,
	     <style id="ct-main-styles-inline-css">, <style>, <style>,
	     <link id="ct-pagination-styles-css">

	   Three stylesheets and Blocksy's whole dynamic-CSS block load *after*
	   this file, and Blocksy lazy-injects further component stylesheets at
	   runtime, so "last" will keep being wrong.

	   It wins for a narrower reason. The only declaration it has to beat is
	   `--theme-font-stack-default`, declared in the parent bundle's
	   main.min.css and main-rtl.min.css — `ct-main-styles-css` and
	   `ct-main-rtl-styles-css`, both earlier than this file. (It is declared
	   in editor-styles.min.css too, but that one is never served on the
	   front end.) The later
	   ct-main-styles-inline-css block redeclares `:root` but sets
	   `--theme-font-family: var(--theme-font-stack-default)`, an indirection
	   that resolves through the value set here rather than a literal stack of
	   its own. `--theme-form-font-family` and `--theme-button-font-family` are
	   never declared by Blocksy anywhere — only referenced, with fallbacks —
	   so nothing competes with them at all.

	   The thing to watch is therefore a future Blocksy that declares
	   --theme-font-stack-default (or a literal font stack) in its dynamic CSS,
	   which loads after this file and would win. If the typeface ever reverts,
	   read ct-main-styles-inline-css in the served <head> first.

	   Blocksy's own `pre, code, samp, kbd { --theme-font-family: monospace }` is
	   a descendant rule and still overrides this, which is what we want. */
	--theme-font-stack-default: var(--etminan-font);
	--theme-form-font-family:   var(--etminan-font);
	--theme-button-font-family: var(--etminan-font);

	--etminan-canvas:       #ECEFEF;
	--etminan-surface:      #FFFFFF;
	--etminan-surface-sunk: #F6F8F8;
	--etminan-ink:          #16181A;
	--etminan-ink-soft:     #55605F;
	--etminan-line:         #D8DEDE;
	--etminan-line-strong:  #B9C3C3;
	--etminan-accent:       #0F766E;
	--etminan-accent-deep:  #115E59;
	--etminan-accent-wash:  #E4EFED;
	--etminan-warn-bg:      #FEF6E7;
	--etminan-warn-ink:     #8A5A0B;
	--etminan-danger:       #B42318;
	--etminan-radius:       6px;
	--etminan-radius-lg:    10px;
	--etminan-space:        clamp(1rem, 2.5vw, 2rem);
	--etminan-tap:          44px;
}

body {
	font-family: var(--etminan-font);
	background: var(--etminan-canvas);
	color: var(--etminan-ink);
	line-height: 1.8;
}

/* Named explicitly as well as through Blocksy's variables, so a future parent
   theme swap cannot silently drop the typeface. Form controls do not inherit
   font-family from body in any browser. */
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--etminan-font);
}

/* Headings previously carried weight and line-height but no size of their own,
   so their scale came entirely from the parent theme. Persian text takes no
   letter-spacing. */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.45rem); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; font-weight: 600; }

/* Prose headings and UI headings are different scales. Product card titles,
   widget titles and table headings are `h2`/`h3` in WooCommerce's markup, so
   without this they inherit the 30.4px document scale — measured, a 200px-wide
   product card was carrying a 176px-tall title above a 101px-tall photo. */
:root {
	--etminan-ui-lg:  1.0625rem;  /* 17px — widget + section titles   */
	--etminan-ui-md:  1rem;       /* 16px — card titles               */
	--etminan-ui-sm:  0.875rem;   /* 14px — meta, counts, helper text */
}

.widget-title,
.ct-widget h3,
.etminan-specs th,
.etminan-payment-table th {
	font-size: var(--etminan-ui-lg);
	line-height: 1.6;
	font-weight: 600;
}

a { color: var(--etminan-accent); }
a:hover { color: var(--etminan-accent-deep); }

/* Buttons — one accent, no gradient.
   Blocksy's dynamic CSS prints after this file and paints every real
   <button>/<input type=submit> with --theme-palette-color-1 (#2872FA, 4.31:1
   on white — below AA). Element selectors lose to it. These compound
   selectors do not. Measured before/after with getComputedStyle; if a new
   button ever reverts to blue, add its selector here rather than reaching for
   !important.

   Every `.woocommerce`-prefixed line below is listed TWICE, as
   `body.woocommerce X` (no space) and `body .woocommerce X` (space) — because
   this site puts the `woocommerce` class in two different places depending on
   the page template, measured live on all four:

     /product/…/ and /shop/  → class="woocommerce …" is on <body> itself,
                                no wrapper div exists. `body .woocommerce X`
                                (descendant) matches nothing there.
     /cart/ and /checkout/   → these are plain WP pages running the
                                [woocommerce_cart]/[woocommerce_checkout]
                                shortcode. <body> gets woocommerce-cart /
                                woocommerce-checkout / woocommerce-page, but
                                NOT plain `woocommerce` — the shortcode instead
                                wraps its output in a <div class="woocommerce">
                                descendant. `body.woocommerce X` (no space)
                                matches nothing there.

   A single form picks one template and silently loses the other: with only
   the space form, Blocksy's `.woocommerce button.button` (0,0,2,1) beat this
   file's `body button` (0,0,0,2) on every product/shop button — the bug this
   round fixed on paper but which a no-space-only fix would have reopened on
   /cart/'s "به‌روزرسانی سبد خرید" (confirmed by measurement: still
   rgb(40, 114, 250) with only the no-space form). Both forms compile to
   (0,0,2,2) either way, which beats Blocksy's (0,0,2,1) wherever they match.
   If a future selector needs `.woocommerce` as an ancestor, check the real
   DOM on both a canonical WC template and a shortcode page — don't assume
   either structure. */
body .button,
body button,
body input[type="submit"],
body .wp-element-button,
body .etminan-btn-primary,
body.woocommerce a.button,
body .woocommerce a.button,
body.woocommerce button.button,
body .woocommerce button.button,
body.woocommerce input.button,
body .woocommerce input.button,
body.woocommerce a.button.alt,
body .woocommerce a.button.alt,
body.woocommerce button.button.alt,
body .woocommerce button.button.alt,
body.woocommerce input.button.alt,
body .woocommerce input.button.alt,
body button.single_add_to_cart_button,
body .etminan-receipt-form button[type="submit"],
body #place_order {
	background: var(--etminan-accent);
	color: #fff;
	border: none;
	border-radius: var(--etminan-radius);
	padding: 0.7em 1.5em;
	min-height: var(--etminan-tap);
	font-family: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease;
}

body .button:hover,
body button:hover,
body input[type="submit"]:hover,
body .etminan-btn-primary:hover,
body.woocommerce a.button:hover,
body .woocommerce a.button:hover,
body.woocommerce button.button:hover,
body .woocommerce button.button:hover,
body.woocommerce button.button.alt:hover,
body .woocommerce button.button.alt:hover,
body button.single_add_to_cart_button:hover,
body #place_order:hover {
	background: var(--etminan-accent-deep);
	color: #fff;
}

/* WooCommerce disables the cart update button until a quantity changes. In
   Blocksy's blue it read as broken rather than as not-yet-available. Both
   `.woocommerce` forms again — see the comment above the button block. */
body.woocommerce button.button:disabled,
body .woocommerce button.button:disabled,
body.woocommerce button.button[disabled],
body .woocommerce button.button[disabled] {
	background: var(--etminan-line);
	color: var(--etminan-ink-soft);
	cursor: not-allowed;
}

/* Keyboard focus. :focus-visible only, so a mouse press does not draw a ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--etminan-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Blocksy's mobile menu trigger measures 18×18 — the only navigation control
   on a phone, less than half the 44px floor and below the 24px WCAG 2.5.8
   minimum. */
body .ct-header-trigger,
body .ct-header-search {
	min-width: var(--etminan-tap);
	min-height: var(--etminan-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Form controls: 40px measured across checkout, 16px for the create-account
   checkbox. 16px font-size additionally stops iOS Safari zooming on focus. */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body input[type="password"],
body select,
body textarea {
	min-height: var(--etminan-tap);
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--etminan-line-strong);
	border-radius: var(--etminan-radius);
	background: var(--etminan-surface);
	color: var(--etminan-ink);
}

body input:focus,
body select:focus,
body textarea:focus {
	border-color: var(--etminan-accent);
}

body .required {
	color: var(--etminan-danger);
	text-decoration: none;
}

.etminan-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Spec table (Task 9) */
.etminan-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}
.etminan-specs th,
.etminan-specs td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--etminan-line);
	text-align: right;
}
.etminan-specs th {
	width: 40%;
	font-weight: 500;
	color: var(--etminan-ink-soft);
}

/* Freight-collect notice (Task 10) */
.etminan-freight-notice {
	background: var(--etminan-surface-sunk);
	border-inline-start: 3px solid var(--etminan-accent);
	padding: 1rem 1.25rem;
	margin: 1.25rem 0;
	border-radius: var(--etminan-radius);
	color: var(--etminan-ink-soft);
	font-size: 0.95em;
}

/* Swatches — square chips, clear selected state. Measured 30×30 — below the
   44px tap-target floor. */
.variable-items-wrapper .variable-item {
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--etminan-radius);
	box-shadow: 0 0 0 1px var(--etminan-line);
}
.variable-items-wrapper .variable-item.selected {
	box-shadow: 0 0 0 2px var(--etminan-accent);
}

@media (max-width: 600px) {
	.etminan-specs th { width: 45%; }
}

.etminan-wordmark {
	display: inline-block;
	max-width: 180px;
}
.etminan-wordmark svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Brand badge / product meta (Task 18) */
.etminan-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	padding: 1rem 0;
	border-top: 1px solid var(--etminan-line);
	color: var(--etminan-ink-soft);
	font-size: 0.95em;
}
.etminan-brand__label {
	color: var(--etminan-ink-soft);
}
.etminan-brand__value {
	display: inline-block;
	padding: 0.2em 0.7em;
	background: var(--etminan-accent-wash);
	color: var(--etminan-accent-deep);
	border-radius: 100px;
	font-weight: 500;
}

/* Front page ----------------------------------------------------------- */

.etminan-hero {
	text-align: center;
	padding: clamp(2.5rem, 8vw, 4.5rem) var(--etminan-space);
	background: var(--etminan-surface);
	border: 1px solid var(--etminan-line);
	border-radius: var(--etminan-radius-lg);
	margin-bottom: var(--etminan-space);
}

.etminan-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--etminan-ui-sm);
	font-weight: 700;
	color: var(--etminan-accent-deep);
}

.etminan-hero__title {
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	margin: 0 0 0.6em;
	text-wrap: balance;
}

.etminan-hero__lede {
	color: var(--etminan-ink-soft);
	max-width: 52ch;
	margin-inline: auto;
}

.etminan-hero__cta { font-size: 1.05rem; }

.etminan-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: var(--etminan-space);
}

.etminan-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--etminan-surface);
	border: 1px solid var(--etminan-line);
	border-radius: var(--etminan-radius-lg);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--etminan-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.etminan-tile:hover {
	border-color: var(--etminan-accent);
	color: var(--etminan-accent-deep);
	box-shadow: 0 2px 12px rgb(22 24 26 / 8%);
}

.etminan-tile__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.etminan-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Statements, not targets: no border, no card, no hover. Previously identical
   to the category tiles above, so a buyer could not tell which was a link. */
.etminan-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem 1.5rem;
	padding: 1.25rem 0;
	margin-bottom: var(--etminan-space);
	border-block: 1px solid var(--etminan-line);
	background: none;
	border-inline: 0;
	border-radius: 0;
	overflow: visible;
}

.etminan-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: none;
	padding: 0.35rem 0;
	text-align: start;
	color: var(--etminan-ink-soft);
	font-weight: 500;
	font-size: var(--etminan-ui-sm);
}

.etminan-trust__icon { color: var(--etminan-accent); flex: 0 0 auto; }

.etminan-section-title {
	margin: 2rem 0 1rem;
	font-size: var(--etminan-ui-lg);
	text-transform: none;
}

/* Digits in prices and data tables sit in columns, so they need equal advance
   widths. .etminan-payment-table (assets/css/checkout.css) sets this on its
   own cells separately. */
.price,
.woocommerce-Price-amount,
.etminan-specs td {
	font-variant-numeric: tabular-nums;
}
