/* ==========================================================================
   Z.SHOP — Typography & Visual Refresh 2026
   Loaded last (after design-system.css). Upgrades font, type scale,
   card/box language and image treatment across the whole theme without
   touching layout logic or the audited business logic in main.css/commerce.css.
   ========================================================================== */

/* -- 1. Self-hosted variable font (Vazirmatn) -----------------------------
   Replaces the old system-font fallback (Tahoma) which is what made the
   site read as "amateur / school-essay" rather than a retail brand.
   Self-hosted (not Google Fonts) on purpose: Google Fonts CDN is frequently
   slow or blocked from Iran, and self-hosting avoids a render-blocking
   third-party request entirely. -------------------------------------------- */
@font-face {
	font-family: 'Vazirmatn Var';
	src: url('../fonts/vazirmatn-var.woff2') format('woff2-variations'),
	     url('../fonts/vazirmatn-var.woff2') format('woff2') tech(variations);
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--zshop-font: 'Vazirmatn Var', 'Vazirmatn', Tahoma, 'Segoe UI', Arial, sans-serif;

	/* Fluid type scale — one consistent ratio instead of ad-hoc px values
	   scattered across 19 stylesheets. Every clamp() scales smoothly
	   between mobile and desktop, no breakpoint jumps. */
	--zshop-fs-xs:   clamp(11.5px, 0.95vw + 9px, 13px);
	--zshop-fs-sm:   clamp(12.5px, 1vw + 9.5px, 14.5px);
	--zshop-fs-base: clamp(14.5px, 0.8vw + 12.5px, 16px);
	--zshop-fs-md:   clamp(16px, 1vw + 13px, 18px);
	--zshop-fs-lg:   clamp(19px, 1.4vw + 15px, 23px);
	--zshop-fs-xl:   clamp(23px, 2vw + 17px, 30px);
	--zshop-fs-2xl:  clamp(28px, 3vw + 18px, 40px);
	--zshop-fs-3xl:  clamp(34px, 4vw + 20px, 52px);

	--zshop-lh-tight: 1.28;
	--zshop-lh-normal: 1.7;
	--zshop-lh-loose: 1.9;

	/* Slightly softer, more contemporary elevation than the old flat shadows */
	--zshop-shadow-xs: 0 1px 2px rgba(7,63,49,.04), 0 2px 8px rgba(7,63,49,.05);
	--zshop-shadow-sm: 0 4px 14px rgba(7,63,49,.07), 0 1px 3px rgba(7,63,49,.06);
	--zshop-shadow-md: 0 14px 36px rgba(7,63,49,.10), 0 3px 10px rgba(7,63,49,.06);
	--zshop-shadow-hover: 0 20px 46px rgba(7,63,49,.14), 0 6px 14px rgba(7,63,49,.08);

	--zshop-border: 1px solid rgba(7,63,49,.08);
	--zshop-ease: cubic-bezier(.22,.9,.32,1.1);
}

/* -- 2. Global font + body rhythm ------------------------------------------ */
body,
button,
input,
select,
textarea,
.woocommerce,
.wp-site-blocks,
.editor-styles-wrapper,
.zshop-magazine,
.zshop-magazine *,
.zshop-article-main,
.zshop-article-main * {
	font-family: var(--zshop-font) !important;
	font-optical-sizing: auto;
}

body {
	font-size: var(--zshop-fs-base);
	line-height: var(--zshop-lh-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* -- 3. Headings — real hierarchy instead of near-identical sizes --------- */
h1, .zshop-h1 { font-size: var(--zshop-fs-3xl); line-height: var(--zshop-lh-tight); font-weight: 800; }
h2, .zshop-h2, .zshop-section-heading h2 { font-size: var(--zshop-fs-2xl); line-height: var(--zshop-lh-tight); font-weight: 800; }
h3, .zshop-h3 { font-size: var(--zshop-fs-xl); line-height: 1.4; font-weight: 700; }
h4, .zshop-h4 { font-size: var(--zshop-fs-lg); line-height: 1.45; font-weight: 700; }
h5, h6 { font-size: var(--zshop-fs-md); line-height: 1.5; font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zshop-font);
	letter-spacing: -.01em;
	text-wrap: balance;
}

p, li, dd, dt, label { font-size: var(--zshop-fs-base); line-height: var(--zshop-lh-normal); }
small, .zshop-fs-sm { font-size: var(--zshop-fs-sm); }

/* Product typography — was using flat 800-weight everywhere; now titles
   read as titles and prices read as prices. */
.zshop-product-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--zshop-font) !important;
	font-size: var(--zshop-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	letter-spacing: 0;
}
.zshop-product-card__price,
.woocommerce ul.products li.product .price {
	font-family: var(--zshop-font) !important;
	font-size: var(--zshop-fs-md);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* -- 4. Buttons — consistent weight + spacing ------------------------------ */
.zshop-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button,
button[type="submit"] {
	font-family: var(--zshop-font) !important;
	font-size: var(--zshop-fs-sm);
	font-weight: 700;
	letter-spacing: 0;
	transition: transform .18s var(--zshop-ease), box-shadow .18s var(--zshop-ease), background-color .18s ease;
}
.zshop-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-1px);
}

/* -- 5. Card / box language — one shared elevation + hover behaviour ------- */
.zshop-product-card,
.zshop-page-shell,
.zshop-auth-card,
.zshop-cart-content,
.zshop-account-content,
.zshop-legal-card,
.zshop-about-content,
.zshop-about-facts,
.zs-support-form-card,
.zs-contact-channels,
.zs-contact-faq {
	border: var(--zshop-border) !important;
	box-shadow: var(--zshop-shadow-xs);
	transition: box-shadow .22s var(--zshop-ease), transform .22s var(--zshop-ease);
}

.zshop-product-card {
	background: var(--zshop-white, #fff);
}
.zshop-product-card:hover,
.zshop-product-card:focus-within {
	box-shadow: var(--zshop-shadow-hover);
	transform: translateY(-3px);
}

/* -- 6. Images — the part that most reads as "unprofessional" when off ----
   Consistent aspect ratio, no stretching/cropping surprises, soft zoom on
   hover for product photography, and rounded corners that match the card. */
.zshop-product-card__media {
	position: relative;
	overflow: clip;
	border-radius: var(--zshop-radius-lg) var(--zshop-radius-lg) 0 0;
	background: #f4f1ea;
}
.zshop-product-card__image {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--zshop-ease);
}
.zshop-product-card:hover .zshop-product-card__image {
	transform: scale(1.045);
}

/* Product detail gallery: crisp frame instead of a bare floating image */
.zshop-pdp-gallery__stage {
	border-radius: var(--zshop-radius-lg);
	overflow: clip;
	border: var(--zshop-border);
	background: #f4f1ea;
	box-shadow: var(--zshop-shadow-xs);
}
.zshop-pdp-gallery__stage img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.zshop-pdp-gallery__thumb {
	border-radius: var(--zshop-radius-sm);
	overflow: clip;
	border: 1px solid transparent;
	transition: border-color .18s ease, opacity .18s ease;
	opacity: .7;
}
.zshop-pdp-gallery__thumb.is-active,
.zshop-pdp-gallery__thumb:hover {
	border-color: var(--zshop-gold);
	opacity: 1;
}
.zshop-pdp-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Editorial / article / brand images — consistent ratio, no layout shift */
.zshop-article-card img,
.zshop-magazine img,
.zshop-about-content img,
.zshop-page-hero img {
	border-radius: var(--zshop-radius-md);
	object-fit: cover;
}

/* Enamad and inline trust badges shouldn't inherit the same treatment */
.zshop-enamad img { border-radius: 0; box-shadow: none; }

/* -- 7. Small screens: keep the fluid scale from feeling cramped ---------- */
@media (max-width: 767px) {
	h1, .zshop-h1 { font-size: var(--zshop-fs-2xl); }
	h2, .zshop-h2, .zshop-section-heading h2 { font-size: var(--zshop-fs-xl); }
	.zshop-product-card__media { border-radius: var(--zshop-radius-md) var(--zshop-radius-md) 0 0; }
}

/* ==========================================================================
   9. Card layout refresh — matches the reference screenshots' shapes/sizing
   (pill buttons, stacked category cards, brand-label placement, image
   treatment). Colour palette is untouched — everything still uses the
   theme's own --zshop-green / --zshop-gold tokens, nothing new introduced.
   ========================================================================== */

/* Favorite (heart) icon — plain outline mark, no filled circle, top-right slot
   freed up for the brand label added in template-parts/product-card.php */
.zshop-favorite {
	top: 14px;
	inset-inline-start: 14px;
	width: 30px;
	height: 30px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #2b2b2b;
}
.zshop-favorite:hover,
.zshop-favorite.is-active {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--zshop-green) !important;
	transform: none;
}
.zshop-favorite .zshop-icon { width: 19px; height: 19px; }

.zshop-product-card__brand {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	z-index: 2;
	color: #9aa0a6;
	font-size: var(--zshop-fs-xs);
	font-weight: 600;
}

/* Product image sits on plain white, not a tinted box — matches the airy
   product photography look in the reference screenshots */
.zshop-product-card__media {
	padding: 20px 18px 6px !important;
	background: var(--zshop-white) !important;
}
.zshop-product-card__media > a {
	background: transparent !important;
	border-radius: 0 !important;
}

.zshop-product-card__price,
.woocommerce ul.products li.product.zshop-product-card .price {
	font-size: var(--zshop-fs-lg);
}

/* CTA — same pill shape as the reference, theme's own green kept as the colour */
.zshop-product-card__cta,
.woocommerce ul.products li.product.zshop-product-card a.button.zshop-product-card__cta {
	border-radius: 999px !important;
}

/* Category cards — stacked photo-first layout: full-width rounded image on
   top, bold centered label underneath. */
.zshop-category-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px !important;
}
.zshop-category-card {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	min-height: auto !important;
}
.zshop-category-card__image {
	aspect-ratio: 1 / 0.9;
	margin: 10px 10px 0;
	border-radius: var(--zshop-radius-lg);
	background: #fff;
}
.zshop-category-card__image img { border-radius: inherit; }
.zshop-category-card__copy {
	align-items: center;
	padding: 10px 14px 20px;
	text-align: center;
}
.zshop-category-card__copy strong {
	font-size: var(--zshop-fs-md);
}
.zshop-category-card__copy small,
.zshop-category-card__copy > span {
	display: none;
}

/* -- 8. Respect reduced-motion preference ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.zshop-product-card,
	.zshop-product-card__image,
	.zshop-button,
	.woocommerce a.button {
		transition: none !important;
	}
}