/* assets/css/fonts.css */
/* Self-hosted fonts (Vazirmatn, Manrope).
   Generated from the Google Fonts CSS the site previously loaded, so families,
   weights, subsets and unicode-ranges match; only URLs point at the AtiChap
   origin. Weights declared are the ones the theme actually uses (400-800; 300
   was requested from Google but never applied). Licences: SIL OFL 1.1. */

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-arabic.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-arabic.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-arabic.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-arabic.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-arabic.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/vazirmatn-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-cyrillic-ext.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-greek.woff2) format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-vietnamese.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://atichap.com/wp-content/themes/atichap-child/assets/css/../fonts/manrope-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* assets/css/tokens.css */
/*
 * AtiChap Design Tokens
 * Source: Stitch "Precision Print Architecture" + Design Audit (refined).
 * Only tokens defined here (or in .atichap/design/tokens.md) may be used.
 */

:root {
	/* ---- Color ---- */
	--ati-color-primary: #0f7c75;
	--ati-color-primary-hover: #0b5e5c;
	--ati-color-primary-bright: #0f8b8d;
	--ati-color-primary-soft: #e8f5f3;
	/* Very light teal tint for full-width brand sections (e.g. Ordering Process),
	 * deliberately distinct from the neutral --ati-color-surface-container. */
	--ati-color-primary-surface: #f4faf9;
	--ati-color-on-primary: #ffffff;

	--ati-color-surface: #ffffff;
	--ati-color-surface-container: #f8fafa;
	--ati-color-border: #e6ecee;
	--ati-color-divider: #edf2f4;

	--ati-color-text: #182235;
	/* Muted/secondary text. Darkened from #718096 so it meets WCAG 2.2 AA
	 * (4.5:1) on BOTH the white surface and the #f8fafa surface-container, where
	 * #718096 measured 4.01:1 / 3.83:1. #667085 = 4.97:1 / 4.75:1 — same hue,
	 * same muted role, no hierarchy change. */
	--ati-color-text-muted: #667085;

	--ati-color-success: #10b981;
	--ati-color-warning: #f59e0b;
	--ati-color-error: #ef4444;

	/* ---- Spacing (8-point / 4px rhythm) ---- */
	--ati-space-1: 4px;
	--ati-space-2: 8px;
	--ati-space-3: 12px;
	--ati-space-4: 16px;
	--ati-space-6: 24px;
	--ati-space-8: 32px;
	--ati-space-12: 48px;
	--ati-space-16: 64px;

	--ati-space-gutter: 16px;
	--ati-space-gutter-desktop: 24px;
	--ati-space-margin: 16px;
	--ati-space-margin-desktop: 32px;

	/* ---- Radius (controlled system) ---- */
	--ati-radius-xs: 4px;
	--ati-radius-sm: 8px;
	--ati-radius-md: 12px;
	--ati-radius-lg: 16px;
	--ati-radius-full: 9999px;

	/* ---- Container ---- */
	--ati-container: 1200px;
	--ati-header-height: 64px;

	/* ---- Typography ---- */
	--ati-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	/* Brand wordmark only. A contemporary Latin face, because the Persian site
	 * face is not designed for a Latin wordmark. Never used for body copy. */
	--ati-font-wordmark: "Manrope", var(--ati-font);
	--ati-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ati-text-h1: 28px;
	--ati-text-h2: 22px;
	--ati-text-h3: 16px;
	--ati-text-body: 14px;
	--ati-text-caption: 12px;
	--ati-text-spec: 11px;

	--ati-leading-h1: 1.35;
	--ati-leading-h2: 1.4;
	--ati-leading-h3: 1.45;
	--ati-leading-body: 1.65;

	/* ---- Measure ----
	 * Two distinct concepts, never conflated:
	 *   --ati-measure       readable line length for LONG-FORM prose only
	 *   --ati-measure-wide  full column width for SHORT supporting UI copy
	 *                       (section descriptions) so they never form a
	 *                       narrow text column.
	 * Component/section width is always the global container. */
	--ati-measure: 80ch;
	--ati-measure-wide: 100%;

	/* ---- Elevation ---- */
	--ati-shadow-micro: 0 2px 8px -2px rgba(24, 34, 53, 0.04), 0 4px 16px -4px rgba(24, 34, 53, 0.08);

	/* ---- Focus ---- */
	--ati-focus-ring: 0 0 0 3px rgba(15, 139, 141, 0.18);

	/* ---- Z-index ---- */
	--ati-z-header: 100;
	/* Open header menus. Inside the header's own stacking context, so this only
	 * orders menus against each other, not against the page. */
	--ati-z-header-menu: 1;
	--ati-z-drawer: 110;
	--ati-z-skip: 200;
}

@media (min-width: 1024px) {
	:root {
		--ati-text-h1: 40px;
		--ati-text-h2: 28px;
		--ati-text-h3: 18px;
	}
}

/* assets/css/base.css */
/*
 * AtiChap base layer: reset, typography, accessibility primitives.
 */

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

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

body.ati-body {
	margin: 0;
	font-family: var(--ati-font);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-text);
	background: var(--ati-color-surface);
	text-align: start;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	/*
	 * Persian text integrity baseline. Words must break between words, never at
	 * an arbitrary character; long unbreakable tokens (codes, URLs) may still wrap
	 * only when they would otherwise overflow. This is the single global layer that
	 * keeps prose wrapping coherent across every component.
	 */
	word-break: normal;
	overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--ati-space-3);
	font-weight: 700;
	color: var(--ati-color-text);
}

h1 {
	font-size: var(--ati-text-h1);
	line-height: var(--ati-leading-h1);
	font-weight: 800;
}

h2 {
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
}

h3 {
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	font-weight: 600;
}

p {
	margin: 0 0 var(--ati-space-4);
}

a {
	color: var(--ati-color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--ati-color-primary-hover);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
	box-shadow: var(--ati-focus-ring);
}

.ati-icon {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

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

.ati-skip-link {
	position: absolute;
	inset-inline-start: var(--ati-space-4);
	top: -100px;
	z-index: var(--ati-z-skip);
	padding: var(--ati-space-2) var(--ati-space-4);
	background: var(--ati-color-primary);
	color: #fff;
	border-radius: var(--ati-radius-sm);
	transition: top 0.15s ease-in-out;
}

.ati-skip-link:focus {
	top: var(--ati-space-4);
	color: #fff;
}

.ati-empty {
	padding: var(--ati-space-8) 0;
	color: var(--ati-color-text-muted);
	text-align: center;
}

/* Long-form content (pages, posts). */
.ati-prose {
	max-width: 75ch;
	padding-block: var(--ati-space-8);
}

.ati-prose :where(h2, h3) {
	margin-top: var(--ati-space-8);
}

.ati-prose img {
	border-radius: var(--ati-radius-md);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* assets/css/layout.css */
/*
 * AtiChap layout primitives: container, section, grid.
 */

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

.ati-section {
	padding-block: var(--ati-space-8);
}

.ati-main {
	display: block;
}

.ati-grid {
	display: grid;
	gap: var(--ati-space-4);
}

.ati-grid--cards,
.ati-grid--services,
.ati-grid--quality,
.ati-grid--cases,
.ati-grid--guide,
.ati-post-grid {
	grid-template-columns: 1fr;
}

.ati-post-grid {
	display: grid;
	gap: var(--ati-space-4);
}

/* Pagination */
.ati-pagination {
	margin-top: var(--ati-space-8);
}

.ati-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ati-space-1);
}

.ati-pagination__list a,
.ati-pagination__list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text);
}

.ati-pagination__list .current {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: #fff;
}

.ati-page-hero {
	padding-block: var(--ati-space-8) var(--ati-space-6);
	background: var(--ati-color-surface-container);
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-page-hero__title {
	margin: 0;
}

.ati-page-hero__lead {
	max-width: 70ch;
	margin: var(--ati-space-3) 0 0;
	color: var(--ati-color-text-muted);
}

/* Category grid */
.ati-grid--categories {
	grid-template-columns: repeat(2, 1fr);
}

/* Breadcrumb (shared) */
.ati-breadcrumb {
	border-bottom: 1px solid var(--ati-color-border);
	background: var(--ati-color-surface-container);
}

.ati-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-1);
	padding-block: var(--ati-space-3);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
}

.ati-breadcrumb__item--home {
	gap: var(--ati-space-1);
}

.ati-breadcrumb__leading-icon {
	display: inline-flex;
	align-items: center;
	color: var(--ati-color-primary);
}

.ati-breadcrumb__leading-icon .ati-icon {
	width: 16px;
	height: 16px;
}

.ati-breadcrumb__item a {
	color: var(--ati-color-text-muted);
}

.ati-breadcrumb__item a:hover {
	color: var(--ati-color-primary);
}

.ati-breadcrumb__sep {
	display: inline-flex;
	color: var(--ati-color-outline, #bdc9c9);
}

.ati-breadcrumb__sep .ati-icon {
	width: 14px;
	height: 14px;
}

/* Tablet */
@media (min-width: 768px) {
	.ati-container {
		padding-inline: var(--ati-space-gutter-desktop);
	}

	.ati-section {
		padding-block: var(--ati-space-12);
	}

	.ati-grid--cards,
	.ati-grid--cases,
	.ati-grid--guide,
	.ati-post-grid--cols-2,
	.ati-post-grid--cols-3,
	.ati-post-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.ati-grid--services,
	.ati-grid--quality {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.ati-container {
		padding-inline: var(--ati-space-margin-desktop);
	}

	.ati-section {
		padding-block: var(--ati-space-16);
	}

	.ati-grid--cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.ati-grid--cases {
		grid-template-columns: repeat(3, 1fr);
	}

	.ati-grid--services {
		grid-template-columns: repeat(4, 1fr);
	}

	.ati-grid--quality {
		grid-template-columns: repeat(4, 1fr);
	}

	.ati-grid--guide {
		grid-template-columns: repeat(2, 1fr);
	}

	.ati-grid--categories {
		grid-template-columns: repeat(5, 1fr);
	}

	.ati-post-grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.ati-post-grid--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* assets/css/components/header.css */
/*
 * Component: Header
 */

.ati-header {
	position: sticky;
	top: 0;
	z-index: var(--ati-z-header);
	background: var(--ati-color-surface);
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-header__container {
	display: flex;
	align-items: center;
	gap: var(--ati-space-4);
	min-height: var(--ati-header-height, 64px);
}

.ati-header__brand {
	display: flex;
	align-items: center;
}

.ati-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	color: var(--ati-color-text);
}

.ati-brand:hover {
	color: var(--ati-color-text);
}

.ati-brand__mark {
	display: inline-block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	background: url("https://atichap.com/wp-content/themes/atichap-child/assets/css/components/../../brand/atichap-logo-mark.svg") center / contain no-repeat;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.ati-brand__text {
	display: flex;
	flex-direction: column;
}

/* The wordmark. Persian «آتی‌چاپ» in the project's loaded Vazirmatn face
   (semibold/bold, no Latin-style negative letter-spacing) so glyphs connect and
   the two-tone split still reads as one word. The line never breaks. */
.ati-brand__name {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--ati-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	/* The mark is a 40px box; matching the cap height keeps the wordmark optically
	 * centred inside it without touching the box or the header height. */
	color: var(--ati-color-text);
}

/* "Ati" in the brand's near-black, "Chap" in the AtiChap primary teal. Both are
 * existing brand tokens, so the wordmark introduces no new colour. */
.ati-brand__name-ati {
	color: var(--ati-color-text);
}

.ati-brand__name-chap {
	color: var(--ati-color-primary);
}

.ati-brand__tagline {
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
	line-height: 1.4;
}

.ati-header__utility {
	display: flex;
	align-items: center;
	gap: var(--ati-space-1);
	margin-inline-start: auto;
}

.ati-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ati-icon-button:hover {
	background: var(--ati-color-surface-container);
	border-color: var(--ati-color-primary);
}

/* Header user menu. The profile icon is the trigger, so this panel is positioned
 * against the icon itself rather than against the header, which keeps it correct
 * on both the desktop and the mobile header utility row. */
.ati-user-menu {
	position: relative;
}

.ati-user-menu__panel {
	position: absolute;
	inset-block-start: calc(100% + var(--ati-space-2));
	inset-inline-end: 0;
	z-index: var(--ati-z-header-menu);
	min-width: 190px;
	max-width: calc(100vw - var(--ati-space-8));
	padding: var(--ati-space-1);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	box-shadow: var(--ati-shadow-micro);
}

.ati-user-menu__panel[hidden] {
	display: none;
}

.ati-user-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	padding: var(--ati-space-2) var(--ati-space-3);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text);
	font-size: var(--ati-text-body);
	white-space: nowrap;
}

/* Hairline between the two actions, so signing out reads as its own step. */
.ati-user-menu__item + .ati-user-menu__item {
	border-block-start: 1px solid var(--ati-color-border);
}

.ati-user-menu__item:hover {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

.ati-user-menu__item-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: currentColor;
}

/* Primary navigation */
.ati-nav {
	display: none;
}

.ati-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ati-space-1);
}

.ati-nav__item {
	position: relative;
}

/* Items with a dropdown must not be a positioning context: the panel anchors to
 * the header, not to this item. This is what gives every open menu one top. */
.ati-nav__item--has-children {
	position: static;
}

.ati-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 0;
	border-radius: var(--ati-radius-sm);
	background: transparent;
	color: var(--ati-color-text);
	font: inherit;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover states are pointer-only: on touch, browsers emulate :hover and can leave
 * a nav item stuck in the hover style after a tap. Keyboard (:focus-visible) and
 * current-page states stay available on every device. */
@media (hover: hover) and (pointer: fine) {
	.ati-nav__link:hover {
		background: var(--ati-color-surface-container);
		color: var(--ati-color-primary);
	}
}

.ati-nav__item--active > .ati-nav__link {
	color: var(--ati-color-primary);
	font-weight: 600;
}

.ati-nav__caret {
	display: inline-flex;
	transition: transform 0.15s ease;
}

.ati-nav__caret .ati-icon {
	width: 15px;
	height: 15px;
}

.ati-nav__item--has-children .ati-nav__link[aria-expanded="true"] .ati-nav__caret {
	transform: rotate(-90deg);
}

/* Header dropdown shell ---------------------------------------------------
 * One positioning system and one visual shell for every open menu in the header.
 * The panel is absolutely positioned inside .ati-header (which is sticky and so
 * establishes the containing block) and sits at `inset-block-start: 100%`, so it
 * attaches to the header's real bottom edge at any header height. Nothing here
 * hard-codes a header height, and nothing is measured in JavaScript.
 *
 * Width, padding, border, radius, background, shadow, overflow and z-index are
 * the same for every menu; only the content inside differs.
 */
.ati-nav__dropdown {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	margin-inline: auto;
	width: min(var(--ati-container), calc(100vw - var(--ati-space-8)));
	max-width: var(--ati-container);
	z-index: var(--ati-z-header-menu);
	padding: var(--ati-space-6);
	border: 1px solid var(--ati-color-border);
	border-top: 0;
	border-radius: 0 0 var(--ati-radius-md) var(--ati-radius-md);
	background: var(--ati-color-surface);
	box-shadow: var(--ati-shadow-micro);
	max-height: calc(100dvh - var(--ati-header-height) - var(--ati-space-4));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* A child-only menu has no heading column, so its list fills the shell. */
.ati-nav__dropdown-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--ati-space-1);
}

.ati-nav__dropdown[hidden] {
	display: none;
}

.ati-nav__dropdown-link {
	display: block;
	padding: var(--ati-space-2) var(--ati-space-3);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text);
	font-size: var(--ati-text-caption);
}

@media (hover: hover) and (pointer: fine) {
	.ati-nav__dropdown-link:hover {
		background: var(--ati-color-surface-container);
		color: var(--ati-color-primary);
	}
}

.ati-nav-toggle__close {
	display: none;
}

.ati-nav-toggle[aria-expanded="true"] .ati-nav-toggle__open {
	display: none;
}

.ati-nav-toggle[aria-expanded="true"] .ati-nav-toggle__close {
	display: inline-flex;
}

/* Header Search panel */
.ati-header-search {
	border-top: 1px solid var(--ati-color-border);
	background: var(--ati-color-surface-container);
	padding-block: var(--ati-space-3);
}

.ati-header-search[hidden] {
	display: none;
}

.ati-header-search__form {
	display: flex;
	gap: var(--ati-space-2);
	max-width: var(--ati-container);
	margin-inline: auto;
	padding-inline: var(--ati-space-margin);
}

.ati-header-search__form .ati-header-search__input {
	flex: 1;
}

.ati-header-search__results {
	max-width: var(--ati-container);
	margin-inline: auto;
	margin-top: var(--ati-space-2);
	padding-inline: var(--ati-space-margin);
	max-height: 60vh;
	overflow-y: auto;
}

.ati-header-search__result {
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	padding: var(--ati-space-2) var(--ati-space-3);
	border-radius: var(--ati-radius-xs);
	color: var(--ati-color-text);
	background: var(--ati-color-surface);
	border: 1px solid var(--ati-color-border);
	margin-block-start: calc(-1 * var(--ati-space-1));
}

.ati-header-search__result:hover,
.ati-header-search__result--active {
	background: var(--ati-color-surface-container);
	border-color: var(--ati-color-primary);
	color: var(--ati-color-primary);
}

.ati-header-search__result:focus-visible {
	box-shadow: var(--ati-focus-ring);
	outline: none;
	position: relative;
}

.ati-header-search__result img {
	width: 56px;
	height: 56px;
	border-radius: var(--ati-radius-xs);
	object-fit: cover;
	flex: 0 0 auto;
}

.ati-header-search__result-placeholder {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
}

.ati-header-search__result-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ati-header-search__result-title {
	font-weight: 600;
	font-size: var(--ati-text-caption);
}

.ati-header-search__result-cat {
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-header-search__loading,
.ati-header-search__no-results,
.ati-header-search__error {
	margin: var(--ati-space-2) 0;
	padding: var(--ati-space-2) var(--ati-space-3);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-header-search__error {
	color: var(--ati-color-danger, #b3261e);
}

.ati-header-search__status--error {
	color: var(--ati-color-danger, #b3261e);
}

@media (min-width: 768px) {
	.ati-header-search__form,
	.ati-header-search__results {
		padding-inline: var(--ati-space-gutter-desktop);
	}
}

/*
 * 1080px, not 1024px.
 *
 * The expanded header needs 1063px of content width: the nav is 739px, the
 * utility cluster 140px, plus the brand and the container gaps. At 1024px this
 * query switched the nav on, but 1024 is also the width where the header can no
 * longer hold it.
 *
 * A media query measures the viewport *including* the vertical scrollbar, while
 * layout is constrained to `clientWidth`, which is 15px narrower. So at a 1024px
 * viewport the query matched, the nav expanded, and the content had only 1009px
 * to work with against a 1063px need. That produced a 54px page-level horizontal
 * overflow across the whole 1009-1035px band.
 *
 * The overflow was not cosmetic. This is an RTL page, so the origin is the right
 * edge and every heading and paragraph begins there. Overflow pushed the document
 * past the right edge, which clipped the brand wordmark, the product image and
 * the right-hand end of RTL headings and text on the Product Detail Page at 1024.
 * It read as a broken layout, and as text that did not fit its region.
 *
 * Measured requirement is 1063px; with the scrollbar that means a minimum
 * viewport of 1078px, so 1080px is the smallest conventional breakpoint at which
 * the nav can be shown without overflow. Below it the nav stays collapsed behind
 * the toggle, which fits comfortably. Verified: overflow is 0px at every width
 * from 1080 up, and 0px below 1080 with the nav collapsed.
 */
@media (min-width: 1080px) {
	.ati-nav {
		display: block;
	}

	.ati-nav-toggle {
		display: none;
	}
}

@media (max-width: 360px) {
	.ati-header__container {
		gap: var(--ati-space-2);
	}

	.ati-header__utility {
		gap: 2px;
	}

	.ati-header__utility .ati-icon-button {
		width: 36px;
		height: 36px;
	}
}

/* assets/css/components/navigation.css */
/*
 * Component: Mobile navigation drawer
 */

.ati-drawer {
	position: fixed;
	inset-block-start: var(--ati-header-height, 64px);
	inset-inline: 0;
	z-index: var(--ati-z-drawer);
	max-height: calc(100dvh - var(--ati-header-height, 64px));
	overflow-y: auto;
	background: var(--ati-color-surface);
	border-bottom: 1px solid var(--ati-color-border);
	box-shadow: var(--ati-shadow-micro);
	padding: var(--ati-space-4);
}

.ati-drawer[hidden] {
	display: none;
}

.ati-drawer__list {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-1);
}

.ati-drawer__link {
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	min-height: 48px;
	padding: 0 var(--ati-space-3);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text);
	font-weight: 500;
}

.ati-drawer__link:focus-visible {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

/* Touch devices: give press feedback (:active) instead of relying on :hover,
 * which some mobile browsers emulate and then leave stuck after a tap. */
.ati-drawer__link:active {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

@media (hover: hover) and (pointer: fine) {
	.ati-drawer__link:hover {
		background: var(--ati-color-surface-container);
		color: var(--ati-color-primary);
	}
}

.ati-drawer__link .ati-icon {
	color: var(--ati-color-primary);
}

.ati-drawer__link[aria-current="page"] {
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary-hover);
	font-weight: 600;
}

/* Group (products accordion) */
.ati-drawer__summary {
	list-style: none;
	cursor: pointer;
}

.ati-drawer__summary::-webkit-details-marker {
	display: none;
}

.ati-drawer__caret {
	margin-inline-start: auto;
	display: inline-flex;
	transition: transform 0.15s ease;
}

.ati-drawer__group[open] .ati-drawer__caret {
	transform: rotate(-90deg);
}

.ati-drawer__sublist {
	display: grid;
	gap: 2px;
	margin: var(--ati-space-1) 0 var(--ati-space-2);
	padding-inline-start: calc(var(--ati-space-3) + 20px);
}

.ati-drawer__sublink {
	display: block;
	min-height: 40px;
	padding: var(--ati-space-2) var(--ati-space-3);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-drawer__sublink:focus-visible {
	color: var(--ati-color-primary);
}

.ati-drawer__sublink:active {
	color: var(--ati-color-primary);
}

@media (hover: hover) and (pointer: fine) {
	.ati-drawer__sublink:hover {
		color: var(--ati-color-primary);
	}
}

/* The row that leads a group back to its archive. Both the products mega menu and
 * the industries list end with one, and they are styled identically. */
.ati-drawer__sublink--all {
	font-weight: 600;
	color: var(--ati-color-primary);
}

/* The panel wrapper is shared, so both groups get the same inner padding. */
.ati-drawer__panel {
	display: contents;
}

.ati-drawer__group--child {
	margin-inline-start: var(--ati-space-3);
	border-inline-start: 1px dashed var(--ati-color-divider);
	padding-inline-start: var(--ati-space-2);
}

.ati-drawer__group--child > summary {
	padding: var(--ati-space-2) var(--ati-space-3);
	font-weight: 500;
	cursor: pointer;
}

.ati-drawer__group--child .ati-drawer__sublist {
	padding: 0 0 var(--ati-space-2);
}

/* A childless category is rendered as a bare link with no group wrapper, so it
 * must carry the same branch line, inline offset and weight as a sibling group
 * summary to look identical at the same depth. */
.ati-drawer__group--child .ati-drawer__sublist > li > a.ati-drawer__sublink:not(.ati-drawer__sublink--all) {
	margin-inline-start: var(--ati-space-3);
	border-inline-start: 1px dashed var(--ati-color-divider);
	padding-inline-start: calc(var(--ati-space-2) + var(--ati-space-3));
	font-weight: 500;
}

body.ati-nav-open {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ati-drawer {
		display: none;
	}
}

/* assets/css/components/mobile-bottom-nav.css */
.ati-mobile-bottom-nav {
	display: none;
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--ati-z-header);
	height: calc(var(--ati-space-16) + env(safe-area-inset-bottom, 0px));
	padding: var(--ati-space-1) var(--ati-space-2) calc(var(--ati-space-1) + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--ati-color-border);
	background: var(--ati-color-surface);
}

.ati-mobile-bottom-nav__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-mobile-bottom-nav__item {
	position: relative;
	min-width: 0;
	min-height: 44px;
}

.ati-mobile-bottom-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--ati-space-1);
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: var(--ati-space-1);
	border: 0;
	background: transparent;
	color: var(--ati-color-text-muted);
	font: inherit;
	font-size: var(--ati-text-caption);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.ati-mobile-bottom-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ati-color-text-muted);
}

.ati-mobile-bottom-nav__icon .ati-icon {
	width: 22px;
	height: 22px;
}

.ati-mobile-bottom-nav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ati-mobile-bottom-nav__item--active .ati-mobile-bottom-nav__link,
.ati-mobile-bottom-nav__item--active .ati-mobile-bottom-nav__icon {
	color: var(--ati-color-primary);
}

.ati-mobile-bottom-nav__item--active .ati-mobile-bottom-nav__link {
	font-weight: 600;
}

.ati-mobile-bottom-nav__item--active .ati-mobile-bottom-nav__link::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	width: auto;
	height: 2px;
	background: var(--ati-color-primary);
	content: "";
}

.ati-mobile-bottom-nav__link:focus-visible {
	color: var(--ati-color-primary);
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
}

/* Touch devices: give press feedback (:active) instead of a :hover that a tap
 * would leave stuck. Pointer hover is opt-in via the capability query below. */
.ati-mobile-bottom-nav__link:active {
	color: var(--ati-color-primary);
}

@media (hover: hover) and (pointer: fine) {
	.ati-mobile-bottom-nav__link:hover {
		color: var(--ati-color-primary);
	}
}

.ati-mobile-bottom-nav__badge {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: calc(50% - 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-size: var(--ati-text-spec);
	font-weight: 700;
	line-height: 1;
}

.ati-mobile-bottom-nav__badge[hidden] {
	display: none;
}

@media (max-width: 1023px) {
	body.ati-mobile-bottom-nav-enabled {
		padding-block-end: calc(var(--ati-space-16) + env(safe-area-inset-bottom, 0px));
	}

	.ati-mobile-bottom-nav {
		display: block;
	}

	body.ati-search-open .ati-mobile-bottom-nav {
		display: none;
	}
}

@media (min-width: 1024px) {
	body.ati-mobile-bottom-nav-enabled {
		padding-block-end: 0;
	}
}

/* assets/css/components/buttons.css */
/*
 * Component: Buttons
 */

.ati-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	min-height: 44px;
	padding: 0 var(--ati-space-4);
	border: 1px solid transparent;
	border-radius: var(--ati-radius-sm);
	font-weight: 600;
	font-size: var(--ati-text-body);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ati-button:active {
	transform: scale(0.98);
}

.ati-button--primary {
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
}

.ati-button--primary:hover {
	background: var(--ati-color-primary-hover);
	color: var(--ati-color-on-primary);
}

.ati-button--secondary {
	background: transparent;
	border-color: var(--ati-color-border);
	color: var(--ati-color-text);
}

.ati-button--secondary:hover {
	background: var(--ati-color-surface-container);
	border-color: var(--ati-color-primary);
	color: var(--ati-color-text);
}

.ati-button--ghost {
	background: transparent;
	color: var(--ati-color-primary);
	padding-inline: var(--ati-space-2);
}

.ati-button--ghost:hover {
	color: var(--ati-color-primary-hover);
	text-decoration: underline;
}

.ati-button .ati-icon {
	width: 18px;
	height: 18px;
}

@media (min-width: 768px) {
	.ati-button {
		min-height: 48px;
	}
}

/* assets/css/components/cards.css */
/*
 * Component: Cards, badges, chips
 */

.ati-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ati-color-surface);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ati-card:hover {
	border-color: var(--ati-color-primary);
}

.ati-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
	padding: var(--ati-space-4);
}

.ati-card__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	font-weight: 600;
}

.ati-card__title a {
	color: var(--ati-color-text);
}

.ati-card__title a:hover {
	color: var(--ati-color-primary);
}

.ati-card__text {
	margin: 0;
	color: var(--ati-color-text-muted);
}

.ati-card__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 500;
	color: var(--ati-color-text-muted);
}

.ati-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	margin-top: var(--ati-space-1);
	color: var(--ati-color-primary);
	font-weight: 600;
	font-size: var(--ati-text-caption);
}

.ati-card__link:hover {
	color: var(--ati-color-primary-hover);
}

.ati-card__link .ati-icon {
	width: 16px;
	height: 16px;
}

.ati-blog-card {
	height: 100%;
}

.ati-blog-card:hover {
	box-shadow: var(--ati-shadow-micro);
}

.ati-blog-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ati-color-surface-container);
}

.ati-blog-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.ati-blog-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.15s ease;
}

.ati-blog-card:hover .ati-blog-card__image {
	transform: scale(1.02);
}

.ati-blog-card__category {
	position: absolute;
	inset-block-start: var(--ati-space-3);
	inset-inline-start: var(--ati-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - var(--ati-space-6));
	padding: var(--ati-space-1) var(--ati-space-2);
	border: 1px solid var(--ati-color-primary-soft);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface);
	color: var(--ati-color-primary-hover);
	font-size: var(--ati-text-caption);
	font-weight: 600;
	line-height: var(--ati-leading-body);
}

.ati-blog-card__category--inline {
	position: static;
	align-self: flex-start;
}

.ati-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4);
}

.ati-blog-card__title {
	margin: 0;
	color: var(--ati-color-text);
	font-size: var(--ati-text-h3);
	font-weight: 700;
	line-height: var(--ati-leading-h3);
}

.ati-blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ati-blog-card__title a:hover {
	color: var(--ati-color-primary);
}

.ati-blog-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.ati-blog-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-2);
	margin-top: auto;
	padding-top: var(--ati-space-3);
	border-top: 1px solid var(--ati-color-divider);
}

.ati-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-2);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-blog-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	white-space: nowrap;
}

.ati-blog-card__meta-item .ati-icon {
	width: 16px;
	height: 16px;
	color: var(--ati-color-primary);
}

.ati-blog-card__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-1);
	min-height: 44px;
	margin-inline-start: auto;
	color: var(--ati-color-primary);
	font-size: var(--ati-text-caption);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ati-blog-card__read-more:hover {
	color: var(--ati-color-primary-hover);
}

.ati-blog-card__read-more .ati-icon {
	width: 16px;
	height: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.ati-blog-card,
	.ati-blog-card__image,
	.ati-blog-card__title a,
	.ati-blog-card__read-more {
		transition: none;
	}

	.ati-blog-card:hover .ati-blog-card__image {
		transform: none;
	}
}

/* Media (Stitch images) */
.ati-media {
	position: relative;
	overflow: hidden;
	background: var(--ati-color-surface-container);
}

.ati-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* <picture> wrapper for WebP card images: keep it out of the layout so the
   inner <img> keeps behaving exactly as it did unwrapped (the card media boxes
   size the image with height:100%). */
.ati-picture {
	display: contents;
}

.ati-product-card__media,
.ati-case-card__media,
.ati-post-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ati-color-surface-container);
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-product-card__media .ati-media__img,
.ati-case-card__media .ati-media__img,
.ati-post-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ati-badge {
	position: absolute;
	inset-block-start: var(--ati-space-3);
	inset-inline-start: var(--ati-space-3);
	z-index: 1;
	padding: var(--ati-space-1) var(--ati-space-2);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-size: var(--ati-text-spec);
	font-weight: 600;
}

.ati-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--ati-space-1) var(--ati-space-2);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text);
	font-size: var(--ati-text-caption);
	font-weight: 500;
}

.ati-chip--accent {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary-hover);
}

/* Case (portfolio) card specifics */
.ati-case-card__category {
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-primary);
}

.ati-case-card__client {
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-case-card__specs {
	display: grid;
	gap: var(--ati-space-1);
	margin: 0;
	padding: var(--ati-space-3) 0 0;
	border-top: 1px dashed var(--ati-color-divider);
}

.ati-case-card__spec {
	display: flex;
	justify-content: space-between;
	gap: var(--ati-space-2);
}

.ati-case-card__spec dt {
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-case-card__spec dd {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	text-align: end;
}

.ati-case-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-1);
}

/* Product category card */
.ati-category-card {
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ati-category-card:hover {
	border-color: var(--ati-color-primary);
	box-shadow: var(--ati-shadow-micro);
}

.ati-category-card__link {
	display: block;
	color: var(--ati-color-text);
}

.ati-category-card__media {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-category-card__media .ati-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ati-category-card__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-2);
	padding: var(--ati-space-3);
}

.ati-category-card__title {
	margin: 0;
	font-size: var(--ati-text-body);
	font-weight: 600;
	line-height: 1.5;
}

.ati-category-card__count {
	flex: 0 0 auto;
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-case-card__title a {
	color: var(--ati-color-text);
}

.ati-case-card__title a:hover {
	color: var(--ati-color-primary);
}



/* assets/css/components/bookmarks.css */
/**
 * AtiChap product bookmarks (favorites) — heart control + account surface.
 */

.ati-bookmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--ati-radius-full);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ati-color-text-muted);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.ati-bookmark__icon {
	display: inline-flex;
	line-height: 0;
}

.ati-bookmark__label {
	font-size: var(--ati-text-body);
	font-weight: 600;
}

.ati-bookmark--card {
	position: absolute;
	top: var(--ati-space-2);
	inset-inline-end: var(--ati-space-2);
	z-index: 2;
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.14);
}

/* Product detail Actions — a borderless generalization of the Blog Post
   .ati-icon-button, carrying a visible label. The visual container is gone:
   only the icon and label remain, with the same 44px interactive target
   .ati-icon-button already establishes. Design System tokens only. */
.ati-product-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-6);
	margin-block: var(--ati-space-3);
}

.ati-product-action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	min-width: 44px;
	min-height: 44px;
	width: auto;
	height: auto;
	padding: var(--ati-space-1);
	/* Neutralise the card chrome inherited from the .ati-bookmark circle and
	   from the native button default, so only icon + label remain visible. */
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ati-color-text);
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.ati-product-action__icon {
	display: inline-flex;
	line-height: 0;
	color: currentColor;
}

.ati-product-action__icon .ati-icon {
	width: 24px;
	height: 24px;
}

.ati-product-action__label {
	font-size: var(--ati-text-caption);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ati-color-text-muted);
	overflow-wrap: anywhere;
}

.ati-product-action:hover {
	color: var(--ati-color-primary);
}

.ati-product-action:hover .ati-product-action__label {
	color: var(--ati-color-primary);
}

.ati-product-action:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
	box-shadow: var(--ati-focus-ring);
}

.ati-product-action:active {
	transform: scale(0.98);
}

.ati-product-action[aria-busy="true"],
.ati-product-action.is-loading {
	opacity: 0.6;
	cursor: progress;
}

/* Wishlist active state (mirrors the Blog pressed action). */
.ati-product-action--wishlist.is-bookmarked {
	color: var(--ati-color-primary);
}

.ati-product-action--wishlist.is-bookmarked .ati-product-action__label {
	color: var(--ati-color-primary);
}

.ati-product-action--wishlist.is-bookmarked .ati-product-action__icon .ati-icon {
	fill: currentColor;
	stroke: currentColor;
}

.ati-bookmark:hover {
	color: var(--ati-color-primary);
}

.ati-bookmark.is-bookmarked {
	color: var(--ati-color-primary);
}

.ati-bookmark.is-bookmarked .ati-bookmark__icon .ati-icon {
	fill: currentColor;
	stroke: currentColor;
}

.ati-bookmark.is-bookmarked.ati-bookmark--card {
	background: #fff;
}

/* The product-detail wishlist is borderless, so the active state is expressed
   through colour and the filled heart rather than a highlighted card. */
.ati-bookmark.is-bookmarked.ati-bookmark--detail {
	color: var(--ati-color-primary);
	background: none;
}

.ati-bookmark:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
}

.ati-bookmark.is-loading {
	opacity: 0.55;
	cursor: progress;
}

.ati-bookmark.is-loading .ati-bookmark__icon {
	animation: ati-bookmark-pulse 0.9s ease-in-out infinite;
}

@keyframes ati-bookmark-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.82);
	}
}

/* Footer account links */
.ati-footer__account {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-4);
	margin-block-end: var(--ati-space-3);
}

.ati-footer__account a {
	color: var(--ati-color-text-muted);
	text-decoration: none;
	font-size: var(--ati-text-caption);
}

.ati-footer__account a:hover {
	color: var(--ati-color-primary);
}

/* Account / saved products */
.ati-saved-products__count,
.ati-saved-products__empty-text {
	color: var(--ati-color-text-muted);
}

.ati-saved-products__empty {
	display: grid;
	gap: var(--ati-space-4);
	justify-items: center;
	text-align: center;
	padding-block: var(--ati-space-12);
}

.ati-account__login .ati-empty {
	display: grid;
	gap: var(--ati-space-4);
	justify-items: center;
	text-align: center;
}

/* Toast (error/success feedback) */
.ati-bookmark-toast {
	position: fixed;
	inset-block-end: var(--ati-space-6);
	inset-inline-start: 50%;
	transform: translateX(50%) translateY(12px);
	z-index: 9999;
	max-width: min(92vw, 420px);
	padding: var(--ati-space-3) var(--ati-space-4);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-text);
	color: #fff;
	font-size: var(--ati-text-body);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ati-bookmark-toast.is-visible {
	opacity: 1;
	transform: translateX(50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ati-bookmark,
	.ati-bookmark-toast {
		transition: none;
	}

	.ati-bookmark.is-loading .ati-bookmark__icon {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * Customer account — own pre-invoices
 * Reuses the existing token set and card/button components.
 * ------------------------------------------------------------------------ */

.ati-account__count {
  color: var(--ati-color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.ati-account__quote-list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ati-account__card {
  background: var(--ati-color-surface);
  border: 1px solid var(--ati-color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.ati-account__card-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.ati-account__number {
  color: var(--ati-color-text);
  font-size: 1rem;
  font-weight: 700;
}

/* Status is conveyed by text, not colour alone. */
.ati-account__status {
  background: var(--ati-color-primary-soft);
  border: 1px solid var(--ati-color-border);
  border-radius: 999px;
  color: var(--ati-color-primary-hover);
  font-size: 0.75rem;
  padding: 4px 12px;
  white-space: nowrap;
}

.ati-account__meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.ati-account__meta-row {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ati-account__meta dt {
  color: var(--ati-color-text-muted);
  font-size: 0.8125rem;
}

.ati-account__meta dd {
  color: var(--ati-color-text);
  font-size: 0.875rem;
  margin: 0;
}

.ati-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ati-account__action {
  flex: 1 1 160px;
}

.ati-account__notice,
.ati-account__empty-text {
  color: var(--ati-color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.ati-account__empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ati-account__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.ati-account__pagination .page-numbers {
  border: 1px solid var(--ati-color-border);
  border-radius: 8px;
  color: var(--ati-color-text);
  display: inline-block;
  min-width: 40px;
  padding: 8px 12px;
  text-align: center;
}

.ati-account__pagination .page-numbers.current {
  background: var(--ati-color-primary);
  border-color: var(--ati-color-primary);
  color: var(--ati-color-on-primary);
}

.ati-quote-drawer__claim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .ati-account__quote-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ati-account__card {
    padding: 12px;
  }

  .ati-account__actions {
    flex-direction: column;
  }

  .ati-account__action {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* assets/css/components/blog.css */
/*
 * Component: Blog archive (two-column posts + categories sidebar)
 */

.ati-blog-archive__layout {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-6);
}

/* On mobile the categories navigation sits above the posts. */
.ati-blog-archive__sidebar {
	order: -1;
}

/* Categories — horizontal compact selector on mobile. */
.ati-blog-categories__title {
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-body);
	font-weight: 700;
	color: var(--ati-color-text);
}

.ati-blog-categories__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ati-space-2);
	margin: 0;
	padding: 0 0 var(--ati-space-2);
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ati-blog-categories__item {
	flex: 0 0 auto;
}

.ati-blog-categories__item a {
	display: inline-flex;
	align-items: center;
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ati-blog-categories__item a:hover {
	color: var(--ati-color-primary-bright);
	border-color: var(--ati-color-primary-bright);
}

.ati-blog-categories__item--active a,
.ati-blog-categories__item--active a:hover {
	border-color: var(--ati-color-primary-bright);
	background: var(--ati-color-primary-bright);
	color: #fff;
}

/* Posts column */
.ati-blog-archive__posts .ati-post-grid {
	gap: var(--ati-space-4);
}

.ati-blog-pagination {
	margin-top: var(--ati-space-8);
}

/* Homepage blog: AJAX pagination states */
.ati-home-blog__status {
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
	text-align: center;
}

.ati-home-blog__status--error {
	color: var(--ati-color-error);
}

.ati-home-blog.is-loading .ati-home-blog-grid {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.ati-home-blog.is-loading .ati-home-blog__pagination {
	pointer-events: none;
}

.ati-home-blog__pagination {
	margin-top: var(--ati-space-8);
}

/* Tablet: two columns */
@media (min-width: 768px) {
	.ati-blog-archive__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(200px, 220px);
		align-items: start;
		gap: var(--ati-space-6);
	}

	.ati-blog-archive__sidebar {
		order: 0;
		position: sticky;
		top: calc(var(--ati-header-height) + var(--ati-space-6));
		align-self: start;
	}

	.ati-blog-categories {
		padding: var(--ati-space-4);
		border: 1px solid var(--ati-color-border);
		border-radius: var(--ati-radius-md);
		background: var(--ati-color-surface);
	}

	.ati-blog-categories__list {
		flex-direction: column;
		gap: 0;
		padding: 0;
		overflow: visible;
	}

	.ati-blog-categories__item a {
		display: flex;
		width: 100%;
		padding: var(--ati-space-2) var(--ati-space-3);
		border: 0;
		border-inline-start: 3px solid transparent;
		border-radius: var(--ati-radius-xs);
		background: none;
		color: var(--ati-color-text-muted);
		font-size: var(--ati-text-body);
	}

	.ati-blog-categories__item a:hover {
		border-inline-start-color: var(--ati-color-border);
		background: var(--ati-color-surface-container);
		color: var(--ati-color-text);
	}

	.ati-blog-categories__item--active a,
	.ati-blog-categories__item--active a:hover {
		border-inline-start-color: var(--ati-color-primary-bright);
		background: var(--ati-color-primary-soft);
		color: var(--ati-color-primary-hover);
		font-weight: 600;
	}
}

/* Desktop.
 *
 * The categories track was a fixed 240px, so the card gap could never influence
 * it: the sidebar width was pinned before the grid divided the remainder.
 * Expressing the track as a ratio of the layout lets the sidebar take a fair
 * share of a wider container, while the 240px floor leaves the tight
 * three-column case at 1024px exactly as it was. The card gap is deliberately
 * not overridden here, so the 16px base rule governs at every width and the
 * grid spacing is no longer inconsistent between desktop and tablet. */
@media (min-width: 1024px) {
	.ati-blog-archive__layout {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 24%);
		gap: var(--ati-space-6);
}
}

/* assets/css/components/sections.css */
/*
 * Component: Sections (headers, services, features, guide, CTA, blueprint)
 */

.ati-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-3);
	margin-bottom: var(--ati-space-6);
}

/*
 * The header text column must not carry a max-width of its own.
 *
 * It previously did (`max-width: 70ch`), and that cap applied to the whole column, so
 * the title inherited it. `ch` resolves against the font in use, so the column was
 * pinned to ~551px while the container offered ~1136px of usable width at 1440px. Every
 * heading between roughly 45 and 64 characters therefore wrapped onto two lines with
 * several hundred pixels sitting unused to the side. Capping the column also capped the
 * title, which is the element that most needs horizontal room.
 *
 * The readable line length that `70ch` was protecting belongs to the prose, not to the
 * heading, so it now lives on the description below. The title is free to use the full
 * width the flex row gives it, and still wraps on its own when it genuinely does not fit.
 */
.ati-section-header__text {
	min-width: 0;
}

.ati-section-header__eyebrow {
	display: inline-block;
	margin-bottom: var(--ati-space-1);
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-primary);
}

.ati-section-header__title {
	margin: 0 0 var(--ati-space-2);
	/*
	 * Balances a heading that still wraps: it stops a single trailing word from
	 * dropping onto a line of its own. `balance` only ever redistributes existing
	 * lines, so a heading that already fits on one line is unaffected.
	 *
	 * `overflow-wrap: break-word` is the safety net for the case `balance` cannot
	 * cover: a run with no break opportunity (an unbroken product code, a pasted URL,
	 * or a heading assembled without spaces). Without it the line is laid out at its
	 * full intrinsic width and spills out of the column and the page. `break-word`
	 * rather than `anywhere` so it only breaks when a line would otherwise overflow,
	 * and never opportunistically shortens ordinary Persian words. This matches the
	 * idiom already used in product.css and industry.css.
	 */
	text-wrap: balance;
	overflow-wrap: break-word;
}

.ati-section-header__description {
	margin: 0;
	/* Short supporting copy: full column width, never a narrow text column. */
	max-width: var(--ati-measure-wide);
	color: var(--ati-color-text-muted);
}

.ati-section-header .ati-button {
	align-self: flex-start;
}

@media (min-width: 768px) {
	.ati-section-header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--ati-space-6);
	}

	/*
	 * The text column grows into the free space of the row and may shrink below its
	 * intrinsic width, so a long heading wraps instead of pushing the action link.
	 * `min-width: 0` above is what permits that shrink: the default `auto` minimum on a
	 * flex item is its min-content size, which would refuse to go below one word and
	 * would hand the overflow to the row.
	 */
	.ati-section-header__text {
		flex: 1 1 auto;
	}

	/*
	 * The action link keeps its own column rather than sharing the title's. `nowrap`
	 * stops its own label from breaking across two lines when the row gets tight, and
	 * the explicit gap keeps a clear gap between it and the heading at every desktop
	 * width. The heading, not the link, is what gives way first.
	 */
	.ati-section-header .ati-button {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Hero */
.ati-hero {
	background: var(--ati-color-surface);
}

.ati-hero__inner {
	display: grid;
	gap: var(--ati-space-8);
}

.ati-hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--ati-space-3);
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	font-weight: 500;
}

/* ISO 12647 standards badge — compact quality chip, visually distinct from
   plain text but subordinate to the H1. Icon (shield = shield+check) + two-line
   RTL text; emphasis on the standard number only, no new certification claims. */
.ati-hero__eyebrow.ati-hero__standard {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-text);
	max-width: 100%;
}

.ati-hero__standard-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ati-color-primary);
}

.ati-hero__standard-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-hero__standard-text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	min-width: 0;
}

.ati-hero__standard-main {
	font-weight: 700;
}

/* The standard number itself: teal + heavier weight, no font-size jump. */
.ati-hero__standard-code {
	font-style: normal;
	font-weight: 800;
	color: var(--ati-color-primary);
}

.ati-hero__standard-sub {
	font-size: var(--ati-text-caption);
	font-weight: 500;
	color: var(--ati-color-text-muted);
}

.ati-hero__title {
	margin-bottom: var(--ati-space-4);
}

.ati-hero__text {
	max-width: 60ch;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-h3);
	line-height: 1.7;
}

.ati-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-3);
	margin-bottom: var(--ati-space-6);
}

.ati-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-3) var(--ati-space-6);
	padding-top: var(--ati-space-4);
	border-top: 1px solid var(--ati-color-divider);
}

.ati-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	font-weight: 500;
	color: var(--ati-color-text-muted);
}

.ati-hero__trust .ati-icon {
	/* Trust-badge icon box: the shape scales into a fixed 40px teal box
	   (8px padding shrinks the glyph to ~24px), giving every badge the same
	   green-teal frame. Uses the brand's primary-soft tint + primary glyph. */
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: var(--ati-space-2);
	color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
	border-radius: var(--ati-radius-md);
	flex: 0 0 auto;
}

.ati-hero__visual {
	display: none;
}

.ati-hero__media {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	overflow: hidden;
}

.ati-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* (Print blueprint overlay & «ابعاد شیت» caption removed from the hero —
   the figcaption element was deleted from home-hero.php.) */

/* Services */
.ati-service {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
	padding: var(--ati-space-6);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
}

.ati-service__icon,
.ati-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-service__icon .ati-icon,
.ati-feature__icon .ati-icon {
	width: 22px;
	height: 22px;
}

.ati-service__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	font-weight: 600;
}

.ati-service__badge {
	align-self: flex-start;
	padding: var(--ati-space-1) var(--ati-space-2);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-spec);
	font-weight: 500;
}

.ati-service__text {
	margin: 0;
	color: var(--ati-color-text-muted);
}

/* Features (quality) */
.ati-feature {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
	padding-top: var(--ati-space-4);
	border-top: 2px solid var(--ati-color-primary);
}

.ati-feature__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	font-weight: 600;
}

.ati-feature__text {
	margin: 0;
	color: var(--ati-color-text-muted);
}

/* Guide cards */
.ati-guide-card {
	padding: 0;
}

.ati-guide-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-guide-card__media .ati-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ati-guide-card__body {
	padding: var(--ati-space-6);
}

.ati-guide-card__body .ati-card__content {
	padding: 0;
}

.ati-guide-card__body .ati-chip {
	align-self: flex-start;
	margin-bottom: var(--ati-space-3);
}

.ati-guide__latest {
	margin-top: var(--ati-space-6);
}

/* Catalog */
.ati-catalog-nav__title {
	margin-bottom: var(--ati-space-4);
}

.ati-catalog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-bottom: var(--ati-space-4);
}

.ati-catalog-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ati-space-4);
	margin-bottom: var(--ati-space-4);
}

.ati-catalog-section__title {
	margin: 0 0 var(--ati-space-2);
}

.ati-catalog-section__desc {
	margin: 0;
	max-width: 70ch;
	color: var(--ati-color-text-muted);
}

.ati-catalog-section__body {
	display: grid;
	gap: var(--ati-space-6);
}

.ati-catalog-section__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface-container);
}

.ati-catalog-section__media .ati-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Category archive hero */
.ati-category-hero__inner {
	display: grid;
	gap: var(--ati-space-6);
}

.ati-category-hero__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
}

.ati-category-hero__media .ati-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.ati-catalog-section__body {
		grid-template-columns: 340px 1fr;
		align-items: start;
	}

	.ati-category-hero__inner {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}
}

/* CTA */
.ati-cta__panel {
	padding: var(--ati-space-8);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
	text-align: center;
}

.ati-cta__content {
	max-width: 70ch;
	margin-inline: auto;
}

.ati-cta__title {
	margin-bottom: var(--ati-space-3);
}

.ati-cta__text {
	color: var(--ati-color-text-muted);
}

.ati-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ati-space-3);
	margin-block: var(--ati-space-6) var(--ati-space-4);
}

.ati-cta__note {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

@media (min-width: 1024px) {
	.ati-hero__inner {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
	}

	.ati-hero__visual {
		display: block;
	}
}

/* FAQ ---------------------------------------------------------------------
 * One presentation contract for every FAQ on the site. Product FAQ
 * (inc/product-faq.php) and Industry FAQ (inc/industry/industry-render.php)
 * render the same markup contract, so they share every rule here: a borderless
 * divided row, a circular chevron, and native <details>/<summary> multi-open
 * behaviour with no JavaScript. Only the data layer differs between them.
 * Every selector is class-scoped on purpose — no bare details/summary rules. */

.ati-faq {
	background: var(--ati-color-surface);
}

.ati-faq__list {
	display: grid;
	gap: var(--ati-space-3);
}

.ati-faq__item {
	border: 0;
	border-bottom: 1px solid var(--ati-color-divider);
	border-radius: 0;
	background: var(--ati-color-surface);
	overflow: hidden;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ati-faq__item:hover {
	background: var(--ati-color-surface-container);
}

.ati-faq__item[open] {
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface-container);
	box-shadow: inset 0 0 0 1px var(--ati-color-border);
}

.ati-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-4);
	min-height: 64px;
	padding: var(--ati-space-4);
	color: var(--ati-color-text);
	font-size: var(--ati-text-body);
	font-weight: 600;
	line-height: 1.8;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ati-faq__question::-webkit-details-marker {
	display: none;
}

.ati-faq__question:hover,
.ati-faq__item[open] .ati-faq__question {
	color: var(--ati-color-primary);
}

.ati-faq__question:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: -3px;
}

.ati-faq__question-text {
	min-width: 0;
}

.ati-faq__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ati-faq__icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-faq__item[open] .ati-faq__icon {
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	transform: rotate(180deg);
}

.ati-faq__answer {
	max-width: 75ch;
	padding: 0 var(--ati-space-6) var(--ati-space-6);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: 1.9;
}

.ati-faq__answer p {
	margin: 0;
}

/* Industry FAQ keeps its rich-HTML answer capability, so a multi-paragraph
 * answer still gets vertical rhythm. The outer margins of the container stay
 * exactly as they are, which is what the single-paragraph case renders. */
.ati-faq__answer > p + p {
	margin-block-start: var(--ati-space-3);
}

.ati-faq__answer > :first-child {
	margin-block-start: 0;
}

.ati-faq__answer > :last-child {
	margin-block-end: 0;
}

@media (min-width: 1024px) {
	.ati-faq__question {
		padding: var(--ati-space-4) var(--ati-space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ati-faq__item,
	.ati-faq__question,
	.ati-faq__icon {
		transition: none;
	}
}

/* assets/css/components/pages.css */
/*
 * Component: About & Contact pages
 */

/* About — Introduction (content | image) */
.ati-about-intro__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-6);
}

/* Mobile order: content first, then image (source order). */
.ati-about-intro__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	overflow: hidden;
}

.ati-about-values,
.ati-about-process {
	padding-block: var(--ati-space-8);
}

.ati-about-values {
	background: var(--ati-color-surface);
}

.ati-about-values__surface {
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface);
	box-shadow: inset 0 0 0 1px var(--ati-color-border);
	overflow: hidden;
}

.ati-about-values__surface .ati-section-header {
	margin: 0;
	border-bottom: 1px solid var(--ati-color-divider);
}

.ati-about-values__items {
	display: grid;
}

.ati-about-values__item {
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	align-content: start;
	padding-block: var(--ati-space-4);
	border-radius: var(--ati-radius-sm);
	text-align: center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ati-about-values__item + .ati-about-values__item {
	border-top: 1px solid var(--ati-color-divider);
}

.ati-about-values__item:hover {
	background: var(--ati-color-surface-container);
	box-shadow: inset 0 0 0 1px var(--ati-color-primary-soft);
}

.ati-about-values__number {
	color: var(--ati-color-primary);
	font-family: var(--ati-font);
	font-size: var(--ati-text-body);
	font-weight: 600;
	line-height: 1;
}

.ati-about-values__item .ati-feature__icon {
	width: var(--ati-space-12);
	height: var(--ati-space-12);
	margin-block-start: var(--ati-space-2);
	border-radius: var(--ati-radius-md);
}

.ati-about-values__item .ati-feature__icon .ati-icon {
	width: var(--ati-space-6);
	height: var(--ati-space-6);
}

.ati-about-values__content {
	display: grid;
	inline-size: 100%;
	margin-block-start: var(--ati-space-2);
	gap: var(--ati-space-2);
	min-width: 0;
	text-align: center;
}

.ati-about-values__item .ati-feature__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
}

.ati-about-values__item .ati-feature__text {
	margin: 0;
	color: var(--ati-color-text);
	line-height: var(--ati-leading-body);
}

.ati-about-process {
	background: var(--ati-color-surface-container);
	border-block: 1px solid var(--ati-color-border);
}

.ati-process {
	--ati-process-node: var(--ati-space-16);
	--ati-process-marker: calc(var(--ati-space-12) + var(--ati-space-2));
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-process__step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	justify-items: stretch;
	align-items: start;
	align-content: start;
	gap: 0;
	padding-block-end: var(--ati-space-6);
	text-align: center;
}

.ati-process__step:last-child {
	padding-block-end: 0;
}

.ati-process__node {
	display: grid;
	justify-items: center;
	justify-self: center;
	gap: var(--ati-space-2);
}

.ati-process__number {
	color: var(--ati-color-primary);
	font-family: var(--ati-font);
	font-size: var(--ati-text-body);
	font-weight: 600;
	line-height: 1;
}

.ati-process__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ati-process-marker);
	height: var(--ati-process-marker);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-surface);
	color: var(--ati-color-primary);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ati-process__marker .ati-icon {
	width: var(--ati-space-8);
	height: var(--ati-space-8);
}

.ati-process__content {
	display: grid;
	inline-size: 100%;
	gap: var(--ati-space-2);
	min-width: 0;
	padding-block-start: var(--ati-space-2);
	text-align: center;
}

.ati-process__title {
	margin: 0;
	color: var(--ati-color-text);
	font-size: var(--ati-text-h3);
	font-weight: 600;
	line-height: var(--ati-leading-h3);
}

.ati-process__description {
	margin: 0;
	color: var(--ati-color-text);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
}

.ati-process__connector {
	position: absolute;
	inset-block-start: calc(var(--ati-text-body) + var(--ati-space-2) + var(--ati-process-marker) / 2 - 1px);
	inset-block-end: calc(-1 * (var(--ati-text-body) + var(--ati-space-2) + var(--ati-process-marker) / 2));
	inset-inline-start: calc(50% - 1px);
	inline-size: 2px;
	background: var(--ati-color-divider);
	transition: background-color 0.2s ease;
}

.ati-process__step:hover .ati-process__marker {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
}

.ati-process__step:hover .ati-process__connector {
	background: var(--ati-color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.ati-about-values__item,
	.ati-process__marker,
	.ati-process__connector {
		transition: none;
	}
}

/* Contact — shared information */
.ati-contact-info {
	padding: var(--ati-space-6);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	margin-block-end: var(--ati-space-6);
}

.ati-contact-info__title {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
}

.ati-contact-info__items {
	display: grid;
	gap: var(--ati-space-4);
	font-style: normal;
}

.ati-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-3);
	min-width: 0;
}

.ati-contact-info__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-contact-info__content {
	display: grid;
	gap: var(--ati-space-1);
	min-width: 0;
}

.ati-contact-info__label {
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	font-weight: 600;
}

.ati-contact-info__value,
.ati-contact-info__link {
	margin: 0;
	color: var(--ati-color-text);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	overflow-wrap: anywhere;
}

.ati-contact-info__link {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 44px;
	color: var(--ati-color-primary);
	transition: color 0.15s ease, opacity 0.15s ease;
}

.ati-contact-info__link:hover,
.ati-contact-info__link:focus-visible {
	color: var(--ati-color-primary-hover);
}

.ati-contact-info__link:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
}

.ati-contact-info__link:active {
	opacity: 0.8;
}

.ati-contact-info--footer {
	padding: 0;
	border: 0;
	background: transparent;
	margin-block-end: 0;
}

.ati-contact-info--footer .ati-contact-info__title {
	margin-block-end: var(--ati-space-3);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
}

.ati-contact-info--footer .ati-contact-info__items {
	gap: var(--ati-space-3);
}

.ati-contact-info--footer .ati-contact-info__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--ati-radius-sm);
}

@media (min-width: 768px) {
	.ati-contact-info__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ati-contact-info--footer .ati-contact-info__items {
		grid-template-columns: 1fr;
	}
}

/* Contact — response hours */
.ati-contact-hours {
	padding-block: 0 var(--ati-space-12);
}

.ati-contact-hours__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-4);
	padding-block: var(--ati-space-6);
	border-block: 1px solid var(--ati-color-border);
}

.ati-contact-hours__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-contact-hours__icon .ati-icon {
	width: 22px;
	height: 22px;
}

.ati-contact-hours__content {
	display: grid;
	gap: var(--ati-space-1);
	min-width: 0;
}

.ati-contact-hours__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
}

.ati-contact-hours__text {
	margin: 0;
	color: var(--ati-color-text-muted);
}

.ati-contact-details .ati-contact-info {
	margin-block-end: 0;
}

.ati-contact-cta {
	padding-block-start: 0;
}

.ati-contact-cta__panel {
	max-width: 900px;
	margin-inline: auto;
}

/* Tablet */
@media (min-width: 768px) {
	.ati-about-intro__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--ati-space-8);
	}

	.ati-grid--values,
	.ati-about-values__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ati-about-values__item {
		padding-block: var(--ati-space-6);
	}

	.ati-about-values__item + .ati-about-values__item {
		border-top: 0;
	}

	.ati-contact-hours__inner {
		padding-block: var(--ati-space-8);
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.ati-about-values,
	.ati-about-process {
		padding-block: var(--ati-space-6);
	}

	.ati-process {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--ati-space-3);
	}

	.ati-process__step {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		justify-items: stretch;
		align-content: start;
		gap: 0;
		padding-block-end: 0;
		text-align: center;
	}

	.ati-process__node {
		justify-self: center;
	}

	.ati-process__content {
		padding-block-start: var(--ati-space-2);
	}

	.ati-process__description {
		max-width: none;
		margin: 0;
		text-align: center;
	}

	.ati-process__connector {
		inset-block-start: calc(var(--ati-text-body) + var(--ati-space-2) + var(--ati-process-marker) / 2 - 1px);
		inset-block-end: auto;
		inset-inline-start: 50%;
		inset-inline-end: auto;
		inline-size: calc(100% + var(--ati-space-3));
		block-size: 2px;
	}
}

/* assets/css/components/order-process.css */
/*
 * Component: Order process (فرآیند ثبت سفارش)
 */

.ati-order-process {
	--ati-op-marker: 64px;
	--ati-op-gap: var(--ati-space-6);
	position: relative;
	padding-block: var(--ati-space-12);
	border-block: 1px solid var(--ati-color-border);
	/* Brand-tinted surface: clearly distinct from the neutral Footer. */
	background: var(--ati-color-primary-surface);
}

.ati-order-process__header {
	/* No max-width: the header block belongs to the section container. The title
	 * is centered by text-align, so a width cap here only narrowed the block
	 * without any readability benefit (it contains no prose paragraph). */
	margin-block-end: var(--ati-space-8);
	text-align: center;
}

.ati-order-process__eyebrow {
	display: inline-block;
	margin-bottom: var(--ati-space-3);
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	font-weight: 500;
}

.ati-order-process__title {
	margin: 0 0 var(--ati-space-2);
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
	font-weight: 700;
}

.ati-order-process__lead {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	/* Redistributes the centred intro lines so no single word is orphaned. */
	text-wrap: balance;
}

.ati-order-process__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ati-op-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-order-process__step {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ati-space-4);
	text-align: start;
}

/* Step marker (number + icon) */
.ati-order-process__step-marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ati-op-marker);
	height: var(--ati-op-marker);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-surface);
	color: var(--ati-color-primary);
}

.ati-order-process__step-icon .ati-icon {
	width: 28px;
	height: 28px;
}

.ati-order-process__step-number {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 var(--ati-space-1);
	border: 2px solid var(--ati-color-surface);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-size: var(--ati-text-caption);
	font-weight: 700;
	line-height: 1;
}

.ati-order-process__step-content {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.ati-order-process__step-title {
	margin: 0 0 var(--ati-space-1);
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	font-weight: 600;
}

.ati-order-process__step-description {
	margin: 0;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: 1.9;
}

/* Connector — vertical flow by default (mobile / tablet) */
.ati-order-process__connector {
	display: block;
	position: absolute;
	inset-inline-start: calc(var(--ati-op-marker) / 2 - 1px);
	inset-block-start: var(--ati-op-marker);
	inset-block-end: calc(-1 * var(--ati-op-gap));
	width: 2px;
	background: var(--ati-color-border);
	z-index: 0;
}

.ati-order-process__connector::after {
	content: none;
}

.ati-order-process__footer {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: var(--ati-space-2);
	margin-block: var(--ati-space-8) 0;
	margin-inline: auto;
	padding: var(--ati-space-2) var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
}

.ati-order-process__footer .ati-icon {
	width: 18px;
	height: 18px;
	color: var(--ati-color-primary);
}

.ati-order-process__footer a {
	color: var(--ati-color-primary);
	font-weight: 600;
}

.ati-order-process__footer a:hover {
	color: var(--ati-color-primary-hover);
}

/* Desktop: five horizontal steps with a directional connector.
 * Below the 1200px container width the process uses the vertical timeline, so
 * the five columns never become too narrow on tablet. */
@media (min-width: 1200px) {
	.ati-order-process {
		--ati-op-marker: 68px;
	}

	.ati-order-process__steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ati-order-process__step {
		flex-direction: column;
		align-items: center;
		gap: var(--ati-space-3);
		text-align: center;
	}

	.ati-order-process__connector {
		inset-inline-start: calc(50% + var(--ati-op-marker) / 2 + var(--ati-space-2));
		inset-block-start: calc(var(--ati-op-marker) / 2 - 1px);
		inset-block-end: auto;
		width: calc(100% - var(--ati-op-marker) - var(--ati-space-4) + var(--ati-op-gap));
		height: 2px;
	}

	.ati-order-process__connector::after {
		content: "";
		position: absolute;
		inset-inline-end: calc(-1 * var(--ati-space-1));
		inset-block-start: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-block: 5px solid transparent;
		border-inline-start: 6px solid var(--ati-color-border);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ati-order-process * {
		transition: none;
	}
}

/* assets/css/components/home-benefits.css */
/*
 * Component: Homepage service-benefits / value proposition
 */

.ati-home-benefits {
	direction: rtl;
	padding-block: var(--ati-space-8);
}

.ati-home-benefits__panel {
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
	overflow: hidden;
}

/* Section identity */
.ati-home-benefits__header {
	max-width: 62ch;
	margin-inline: auto;
	padding: var(--ati-space-6) var(--ati-space-4) var(--ati-space-6);
	text-align: center;
}

.ati-home-benefits__title {
	margin: 0 0 var(--ati-space-2);
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
	font-weight: 700;
	color: var(--ati-color-text);
}

.ati-home-benefits__description {
	margin: 0;
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-text-muted);
}

/* Feature grid */
.ati-home-benefits__grid {
	display: grid;
	grid-template-columns: 1fr;
	border-block-start: 1px solid var(--ati-color-border);
}

.ati-home-benefits__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ati-space-2);
	padding: var(--ati-space-6) var(--ati-space-4);
	text-align: center;
}

.ati-home-benefits__item + .ati-home-benefits__item {
	border-block-start: 1px solid var(--ati-color-border);
}

.ati-home-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-block-end: var(--ati-space-2);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-home-benefits__icon .ati-icon {
	width: 30px;
	height: 30px;
}

.ati-home-benefits__item-title {
	margin: 0;
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	font-weight: 600;
	color: var(--ati-color-text);
}

.ati-home-benefits__item-description {
	margin: 0;
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-text-muted);
}

/* Help row (subordinate to the benefits) */
.ati-home-benefits__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-3) var(--ati-space-4);
	padding: var(--ati-space-6) var(--ati-space-4);
	border-block-start: 1px solid var(--ati-color-border);
}

.ati-home-benefits__footer-text {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-1);
	font-size: var(--ati-text-body);
	color: var(--ati-color-text);
}

.ati-home-benefits__footer-text span {
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

/* Tablet: 2 × 2 */
@media (min-width: 640px) {
	.ati-home-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ati-home-benefits__item + .ati-home-benefits__item {
		border-block-start: 0;
	}

	.ati-home-benefits__item:nth-child(even) {
		border-inline-start: 1px solid var(--ati-color-border);
	}

	.ati-home-benefits__item:nth-child(n + 3) {
		border-block-start: 1px solid var(--ati-color-border);
	}
}

/* Desktop: four balanced columns */
@media (min-width: 1024px) {
	.ati-home-benefits {
		padding-block: var(--ati-space-12);
	}

	.ati-home-benefits__header {
		padding: var(--ati-space-8) var(--ati-space-6) var(--ati-space-6);
	}

	.ati-home-benefits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ati-home-benefits__item:nth-child(n + 3) {
		border-block-start: 0;
	}

	.ati-home-benefits__item + .ati-home-benefits__item {
		border-inline-start: 1px solid var(--ati-color-border);
	}

	.ati-home-benefits__item {
		padding: var(--ati-space-8) var(--ati-space-6);
	}

	.ati-home-benefits__icon {
		width: 72px;
		height: 72px;
	}

	.ati-home-benefits__footer {
		padding: var(--ati-space-6) var(--ati-space-8);
	}
}

/* assets/css/components/quote-drawer.css */
/*
 * Component: Quote / Pre-Invoice drawer + header trigger
 */

.ati-quote-drawer {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.ati-quote-drawer[hidden] {
	display: none;
}

.ati-quote-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 34, 53, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ati-quote-drawer--open .ati-quote-drawer__overlay {
	opacity: 1;
}

/* RTL site: the drawer enters from the right. */
.ati-quote-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(440px, 100vw);
	max-width: 100%;
	background: var(--ati-color-surface);
	border-inline-start: 1px solid var(--ati-color-border);
	box-shadow: var(--ati-shadow-micro);
	transform: translateX(100%);
	transition: transform 0.24s ease;
}

.ati-quote-drawer--open .ati-quote-drawer__panel {
	transform: translateX(0);
}

.ati-quote-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4) var(--ati-space-4);
	border-block-end: 1px solid var(--ati-color-border);
	background: var(--ati-color-surface);
}

.ati-quote-drawer__title {
	margin: 0;
	font-size: var(--ati-text-h3);
	font-weight: 700;
	color: var(--ati-color-text);
}

.ati-quote-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	cursor: pointer;
}

.ati-quote-drawer__close:hover {
	color: var(--ati-color-primary);
	border-color: var(--ati-color-primary);
}

.ati-quote-drawer__close:focus-visible,
.ati-quote-drawer__panel :focus-visible {
	box-shadow: var(--ati-focus-ring);
	outline: none;
}

.ati-quote-drawer__form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
}

.ati-quote-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--ati-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-4);
}

.ati-quote-drawer__empty {
	margin: auto;
	padding: var(--ati-space-6) 0;
	text-align: center;
	color: var(--ati-color-text-muted);
}

.ati-quote-drawer__empty p {
	margin: 0 0 var(--ati-space-4);
	line-height: 1.8;
}

.ati-quote-drawer__section-title {
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-caption);
	font-weight: 700;
	color: var(--ati-color-text-muted);
}

.ati-quote-drawer__items {
	display: grid;
	gap: var(--ati-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-quote-drawer__item {
	display: flex;
	gap: var(--ati-space-3);
	padding: var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface-container);
}

.ati-quote-drawer__item-image {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--ati-radius-sm);
	object-fit: cover;
	background: var(--ati-color-surface);
}

.ati-quote-drawer__item-content {
	min-width: 0;
	flex: 1 1 auto;
}

.ati-quote-drawer__item-title {
	display: block;
	margin: 0 0 var(--ati-space-1);
	font-size: var(--ati-text-body);
	font-weight: 600;
	color: var(--ati-color-text);
}

.ati-quote-drawer__item-specs {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-quote-drawer__item-spec {
	display: flex;
	justify-content: space-between;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-quote-drawer__item-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-1);
	flex: 0 0 auto;
}

/* Both item actions are caption-sized text with no padding, so on their own they
 * measure about 35x20px: far below the 44px minimum the drawer's own submit
 * button and the header icon buttons already meet. On a 360px phone that is a
 * genuinely hard target, and a mis-tap beside the remove control drops the item
 * from the quote. The 44px floor is set here, on the shared declaration, so the
 * two controls cannot drift apart again. The label stays caption-sized, so the
 * visual density of the item row is unchanged, and the column has ample spare
 * height to give the extra room. Logical properties keep it correct in RTL. */
.ati-quote-drawer__edit,
.ati-quote-drawer__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	min-inline-size: 44px;
}

/* A button, not an anchor: it performs the edit handoff instead of following a
 * link, so the browser's default button chrome is reset to match the remove
 * control beside it. */
.ati-quote-drawer__edit {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-primary);
	text-align: center;
	text-decoration: underline;
}

.ati-quote-drawer__remove {
	border: 0;
	background: none;
	padding: 0;
	color: var(--ati-color-text-muted);
	font: inherit;
	font-size: var(--ati-text-caption);
	cursor: pointer;
}

.ati-quote-drawer__remove:hover {
	color: var(--ati-color-error);
}

.ati-quote-drawer__fields {
	display: grid;
	gap: var(--ati-space-3);
}

.ati-quote-drawer__actions {
	padding: var(--ati-space-4);
	border-block-start: 1px solid var(--ati-color-border);
	background: var(--ati-color-surface);
}

.ati-quote-drawer__submit {
	width: 100%;
	justify-content: center;
}

.ati-quote-drawer__status {
	margin: var(--ati-space-2) 0 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
	text-align: center;
}

.ati-quote-drawer__status--error {
	color: var(--ati-color-error);
}

.ati-quote-drawer__status--success {
	color: var(--ati-color-success);
}

.ati-quote-drawer__success {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-3);
	align-items: center;
	text-align: center;
	padding: var(--ati-space-6) var(--ati-space-4);
}

/* Header trigger + badge */
.ati-header__quote-trigger {
	position: relative;
}

.ati-header__quote-badge {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-size: var(--ati-text-spec);
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

body.ati-quote-open {
	overflow: hidden;
}

/* Mobile: full-width sheet */
@media (max-width: 480px) {
	.ati-quote-drawer__panel {
		width: 100vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ati-quote-drawer__panel,
	.ati-quote-drawer__overlay {
		transition: none;
	}
}

/* assets/css/components/alert.css */
/*
 * Component: Pre-flight alert
 */

.ati-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-3);
	margin-bottom: var(--ati-space-6);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-inline-start: 4px solid var(--ati-color-primary);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface-container);
}

.ati-alert .ati-icon {
	margin-top: 2px;
	color: var(--ati-color-primary);
}

.ati-alert__title {
	margin: 0 0 var(--ati-space-1);
	font-weight: 600;
}

.ati-alert__text {
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-alert--warning {
	border-inline-start-color: var(--ati-color-warning);
}

.ati-alert--warning .ati-icon {
	color: var(--ati-color-warning);
}

.ati-alert--error {
	border-inline-start-color: var(--ati-color-error);
}

.ati-alert--error .ati-icon {
	color: var(--ati-color-error);
}

/* assets/css/components/forms.css */
/*
 * Component: Form controls
 *
 * Minimal, token-driven control styles. Used by future phases (Configurator).
 * No pricing logic lives here.
 */

.ati-field {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
}

.ati-field__label {
	font-size: var(--ati-text-caption);
	font-weight: 500;
	color: var(--ati-color-text-muted);
}

.ati-field__control,
.ati-select {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
	font: inherit;
}

.ati-field__control:focus-visible,
.ati-select:focus-visible {
	border-color: var(--ati-color-primary);
	outline: none;
	box-shadow: var(--ati-focus-ring);
}

.ati-field__control:disabled,
.ati-select:disabled {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text-muted);
	cursor: not-allowed;
}

/* Internal image CAPTCHA (quote request) */
.ati-captcha {
	display: grid;
	gap: var(--ati-space-2);
}

.ati-captcha__box {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	flex-wrap: wrap;
}

.ati-captcha__media {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
}

.ati-captcha__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: #fff;
}

.ati-captcha__question {
	display: inline-block;
	width: fit-content;
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 1px dashed var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text);
	font-weight: 600;
}

.ati-captcha__question[hidden],
.ati-captcha__image[hidden] {
	display: none;
}

.ati-captcha__refresh {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	min-height: 44px;
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.ati-captcha__refresh:hover {
	border-color: var(--ati-color-primary);
	color: var(--ati-color-primary);
}

.ati-captcha__refresh-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ati-captcha__refresh-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-captcha__refresh[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ati-captcha__alt {
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ati-color-text-muted);
	font: inherit;
	font-size: var(--ati-text-caption);
	text-decoration: underline;
	cursor: pointer;
}

.ati-captcha__refresh:focus-visible,
.ati-captcha__alt:focus-visible,
.ati-captcha__answer:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
}

.ati-captcha__answer {
	max-width: 180px;
	text-transform: uppercase;
}

.ati-captcha__status {
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-error);
}


/* assets/css/components/product.css */
/*
 * Component: Product page (hero, spec table, actions, factory note)
 */

/* Hero */
.ati-product-hero__inner {
	display: grid;
	gap: var(--ati-space-8);
}

.ati-product-hero__kicker {
	display: inline-block;
	margin-bottom: var(--ati-space-3);
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	font-weight: 500;
}

a.ati-product-hero__kicker:hover {
	border-color: var(--ati-color-primary);
	color: var(--ati-color-primary);
}

.ati-product-hero__kickers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-bottom: var(--ati-space-3);
}

.ati-product-hero__kickers .ati-product-hero__kicker {
	margin-bottom: 0;
}

.ati-product-hero__title {
	margin-bottom: var(--ati-space-2);
}

.ati-product-hero__code {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-product-hero__code span {
	font-family: var(--ati-font-mono);
	letter-spacing: 0.04em;
}

.ati-product-hero__text {
	color: var(--ati-color-text-muted);
}

.ati-product-hero__features {
	display: grid;
	gap: var(--ati-space-2);
	margin-top: var(--ati-space-4);
}

.ati-product-hero__features li {
	display: flex;
	/*
	 * `center`: the icon now sits in a compact square wrapper, so the row reads
	 * best with the wrapper vertically centred against the label (including
	 * multi-line labels, where the square stays centred on the text block).
	 */
	align-items: center;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	font-weight: 500;
	/*
	 * Persian labels must break at word boundaries. The project default is already
	 * `normal`, stated here so a future global reset cannot silently turn this into
	 * `break-all`, which would split Persian words mid-letter.
	 */
	overflow-wrap: normal;
	word-break: normal;
	/*
	 * Height follows the content. The list has no fixed row height, so a longer label
	 * grows its own row instead of being clipped by a neighbour.
	 */
	min-height: 0;
}

/*
 * Feature icon: compact rounded square with the AtiChap brand-tinted surface,
 * wrapping the EXISTING icon artwork (unchanged). The 20px SVG is centred inside
 * the 36px box, so the icon size/meaning are preserved.
 */
.ati-product-hero__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-product-hero__features .ati-icon {
	/* Existing 20px artwork kept at its intrinsic size inside the wrapper. */
	width: 20px;
	height: 20px;
}

.ati-blueprint--product {
	aspect-ratio: 4 / 3;
	max-width: 100%;
}

/* Product media + gallery */
.ati-product-hero__media {
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	overflow: hidden;
	background: var(--ati-color-surface-container);
}

.ati-product-hero__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ati-product-media-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	aspect-ratio: 4 / 3;
	padding: var(--ati-space-6);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
	text-align: center;
}

.ati-product-media-empty .ati-icon {
	width: 28px;
	height: 28px;
	color: var(--ati-color-outline, #bdc9c9);
}

.ati-product-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-top: var(--ati-space-3);
}

.ati-product-gallery__item {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	padding: 2px;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	overflow: hidden;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s ease;
}

.ati-product-gallery__item:hover {
	border-color: var(--ati-color-primary);
}

.ati-product-gallery__item:focus-visible {
	outline: none;
	box-shadow: var(--ati-focus-ring);
}

.ati-product-gallery__item.is-active {
	border-color: var(--ati-color-primary);
	box-shadow: inset 0 0 0 1px var(--ati-color-primary);
}

.ati-product-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--ati-radius-sm) - 2px);
}

/* Product description (توضیحات محصول) */
.ati-product-description__header {
	margin-bottom: var(--ati-space-6);
}

.ati-product-description__title {
	margin: 0;
	font-size: var(--ati-text-h2);
}

.ati-product-description__subtitle {
	margin: var(--ati-space-1) 0 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-product-description__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ati-space-3);
	margin: 0;
}

.ati-product-description__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	transition: border-color 0.15s ease;
}

.ati-product-description__item:hover {
	border-color: var(--ati-color-primary);
}

.ati-product-description__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-product-description__icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-product-description__label {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
}

.ati-product-description__value {
	margin: 2px 0 0;
	font-size: var(--ati-text-body);
	font-weight: 500;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.ati-product-description__empty {
	padding: var(--ati-space-6);
	border: 1px dashed var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	text-align: center;
}

/* Factory */
.ati-factory-note {
	padding: var(--ati-space-8);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
}

.ati-factory-note__title {
	margin-bottom: var(--ati-space-2);
}

.ati-factory-note__text {
	/*
	 * No max-width here: the card is already the measure.
	 *
	 * This used to carry `max-width: 70ch`, which capped the paragraph at ~551px inside a
	 * 1072px card while the heading right above it used the full 1070px. That left the left
	 * half of the bordered card permanently empty, and it was the only panel in the theme
	 * where the heading and its own paragraph disagreed on width — every other panel keeps
	 * the two equal (.ati-card 91%/91%, .ati-cta__panel 51%/51%). An empty region *inside* a
	 * bordered box reads as a broken layout, where the same region outside it reads as
	 * ordinary whitespace.
	 *
	 * The card is the component's own geometry, so the paragraph now fills it, exactly as
	 * the heading does. The element is still a block, so a longer note wraps at the card
	 * width rather than overflowing; this only removes the premature cap.
	 */
	color: var(--ati-color-text-muted);
}

.ati-factory-note__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-4);
	margin-top: var(--ati-space-4);
}

.ati-factory-note__badges li {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	font-weight: 500;
}

.ati-factory-note__badges .ati-icon {
	color: var(--ati-color-primary);
}

/* Related industries ------------------------------------------------------
 * The nav is a shared component (inc/industry/industry-render.php) that is also
 * appended to post and portfolio content, where it carries its own block
 * padding and divider because there is no section around it there. On the
 * product page it now sits inside the standard section + container pair, so the
 * section owns the vertical rhythm and the nav's own spacing would double it.
 * Only the spacing is neutralised here: the title, the pill row and the
 * link treatment are left exactly as the shared component defines them. */

.ati-product-related-industries .ati-business-profile__backlinks {
	padding-block: 0;
	border-block-start: 0;
}

@media (min-width: 768px) {
	.ati-product-description__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ati-product-hero,
	.ati-product-description,
	.ati-product-content,
	.ati-product-info-tabs,
	.ati-configurator-section,
	.ati-product-actions,
	.ati-product-faq,
	.ati-product-complementary,
	.ati-product-similar,
	.ati-product-factory,
	.ati-product-related-industries {
		padding-block: var(--ati-space-6);
	}

	/*
	 * One column at desktop, not two.
	 *
	 * The hero splits 1fr / 1.1fr, so the text side measured ~590px and a two-column
	 * feature grid inside it gave each item ~281px. Feature labels name a field and then
	 * list that field's options, which is a long line of Persian text; at 281px it
	 * wrapped to three lines and left the list far taller than it needed to be. A single
	 * column gives every item the full text width, so these lines read on one or two lines.
	 * The grid stays a grid, so the gap and the ordering are unchanged.
	 */
	.ati-product-hero__features {
		grid-template-columns: 1fr;
	}
}

/*
 * The Hero switches to two columns only once the Product container is wide
 * enough (>=1200px). Below that the gallery and the information stack, so
 * neither column is squeezed and the text side never becomes a narrow article
 * column. The breakpoint is the container width, not a generic device size.
 */
@media (min-width: 1200px) {
	.ati-product-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		align-items: center;
	}
}

/* Product SEO content (معرفی محصول — compact product information component) */
.ati-product-content__inner {
	/* Uses the product content width (global 1200px container), aligned with the page grid. */
	width: 100%;
	max-width: 100%;
}

.ati-product-content__title {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
}

.ati-product-content__body {
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	overflow-wrap: break-word;
}

/* The introduction keeps a readable measure; the block grid below spans the width. */
.ati-product-content__body > p {
	margin: 0;
	max-width: var(--ati-measure);
}

.ati-product-content__body > p + p {
	margin-top: var(--ati-space-3);
}

.ati-product-content__grid {
	display: grid;
	gap: var(--ati-space-4);
	margin-top: var(--ati-space-4);
}

.ati-product-content__block > * + * {
	margin-top: var(--ati-space-2);
}

.ati-product-content__body h3 {
	margin: 0;
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	color: var(--ati-color-text);
}

.ati-product-content__body p {
	margin: 0;
}

.ati-product-content__body ul,
.ati-product-content__body ol {
	margin: 0;
	padding-inline-start: var(--ati-space-6);
}

.ati-product-content__body li + li {
	margin-top: var(--ati-space-2);
}

.ati-product-content__body strong {
	color: var(--ati-color-text);
	font-weight: 600;
}

.ati-product-content__body a {
	color: var(--ati-color-primary);
	text-decoration: underline;
}

.ati-product-content__body a:hover {
	color: var(--ati-color-primary-hover);
}

.ati-product-content__body a:focus-visible {
	outline: none;
	border-radius: var(--ati-radius-xs);
	box-shadow: var(--ati-focus-ring);
}

@media (min-width: 1024px) {
	.ati-product-content__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ati-space-8);
		margin-top: var(--ati-space-6);
	}
}

/* Product Information tabs (specifications / introduction / benefits / selection) */
.ati-product-info-tabs__nav {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--ati-space-2);
	width: 100%;
	max-width: 100%;
	padding-inline: var(--ati-space-2);
	background: var(--ati-color-surface-container);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ati-product-info-tabs__nav::-webkit-scrollbar {
	display: none;
}

.ati-product-info-tabs__tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	min-height: 48px;
	margin: 0;
	padding: 0 var(--ati-space-4);
	border: 0;
	background: transparent;
	color: var(--ati-color-text-muted);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: color 200ms ease;
}

/* Tab icon: one sizing rule for all four, centered with the label (RTL). */
.ati-product-info-tabs__tab-icon {
	display: inline-flex;
	line-height: 0;
	flex: 0 0 auto;
}

.ati-product-info-tabs__tab-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-product-info-tabs__tab:hover {
	color: var(--ati-color-text);
}

.ati-product-info-tabs__tab::after {
	content: "";
	position: absolute;
	inset-inline: var(--ati-space-4);
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--ati-color-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 200ms ease;
}

.ati-product-info-tabs__tab--active {
	color: var(--ati-color-primary);
	font-weight: 700;
}

.ati-product-info-tabs__tab--active::after {
	transform: scaleX(1);
}

.ati-product-info-tabs__tab:focus-visible {
	outline: none;
	border-radius: var(--ati-radius-xs);
	box-shadow: var(--ati-focus-ring);
}

.ati-product-info-tabs__panels {
	width: 100%;
	max-width: 100%;
	/* Separation between the tab navigation bar and the content box below it. */
	margin-top: var(--ati-space-4);
}

.ati-product-info-tabs__panel {
	width: 100%;
}

.ati-product-info-tabs__panel[hidden] {
	display: none;
}

.ati-product-info-tabs__panel--active {
	animation: ati-product-info-tabs-in 200ms ease both;
}

.ati-product-info-tabs__panel:focus-visible {
	outline: none;
}

.ati-product-info-tabs__content {
	width: 100%;
	max-width: 100%;
	/* Internal padding of the tab content box so headings, paragraphs, tables,
	   lists and attribute rows never touch the container edges. Mobile-compact;
	   widened on desktop below. */
	padding-inline: var(--ati-space-4);
	padding-block: var(--ati-space-3) var(--ati-space-4);
}

/*
 * Consistent vertical rhythm inside every tab: one spacing unit between any two
 * adjacent top-level blocks (heading / paragraph / list / spec table / note),
 * so headings, labels and explanatory text never drift apart irregularly.
 */
.ati-product-info-tabs__content > * + * {
	margin-top: var(--ati-space-3);
}

.ati-product-info-tabs__content p {
	margin: 0;
	/* Persian RTL body text: justify so lines fill the full content column
	   instead of hugging the right edge with a ragged left margin. */
	text-align: justify;
}

.ati-product-info-tabs__content h2,
.ati-product-info-tabs__content h3 {
	margin: 0;
	font-weight: 700;
	line-height: var(--ati-leading-h3);
	color: var(--ati-color-text);
}

.ati-product-info-tabs__content h2 {
	font-size: var(--ati-text-h2);
}

.ati-product-info-tabs__content h3 {
	font-size: var(--ati-text-h3);
}

.ati-product-info-tabs__content ul {
	margin: 0;
	padding-inline-start: var(--ati-space-6);
}

.ati-product-info-tabs__content li + li {
	margin-top: var(--ati-space-2);
}

/* Benefits / applications: single full-width reading column. */
.ati-product-info-tabs__blocks {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ati-space-6);
	width: 100%;
}

.ati-product-info-tabs__block > * + * {
	margin-top: var(--ati-space-3);
}

.ati-product-info-tabs__lead {
	font-weight: 600;
	color: var(--ati-color-text);
}

.ati-product-info-tabs__note {
	color: var(--ati-color-text-muted);
}

/* Specifications: aligned label column + full-width value column. The label
   column is kept tight so a short value sits directly beside its label, and
   long value text wraps across the remaining width. */
.ati-product-info-tabs__heading {
	margin: 0;
	font-size: var(--ati-text-h3);
	font-weight: 700;
	line-height: var(--ati-leading-h3);
	color: var(--ati-color-text);
}

.ati-product-info-tabs__spec-list {
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--ati-color-border);
}

.ati-product-info-tabs__spec {
	display: grid;
	grid-template-columns: minmax(104px, 152px) minmax(0, 1fr);
	gap: var(--ati-space-3);
	align-items: center;
	padding: var(--ati-space-3) 0;
	border-bottom: 1px solid var(--ati-color-border);
}

.ati-product-info-tabs__spec-label {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 700;
	color: var(--ati-color-text);
}

.ati-product-info-tabs__spec-value {
	margin: 0;
	color: var(--ati-color-text-muted);
	text-align: justify;
}

@media (max-width: 600px) {
	.ati-product-info-tabs__spec {
		grid-template-columns: 1fr;
		gap: var(--ati-space-1);
		align-items: start;
	}
}

/* Desktop: standard 24px internal padding for the tab content box. */
@media (min-width: 1024px) {
	.ati-product-info-tabs__content {
		padding-inline: var(--ati-space-6);
		padding-block: var(--ati-space-4) var(--ati-space-6);
	}
}

@keyframes ati-product-info-tabs-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ati-product-info-tabs__tab,
	.ati-product-info-tabs__tab::after,
	.ati-product-info-tabs__panel--active {
		transition: none;
		animation: none;
	}
}

/* assets/css/components/configurator.css */
/*
 * Component: Configurator + Quote Cart (presentation only — no pricing)
 */

.ati-configurator,
.ati-configurator input,
.ati-configurator select,
.ati-configurator textarea,
.ati-configurator button,
.ati-configurator option {
	font-family: var(--ati-font);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
}

.ati-configurator__layout {
	display: grid;
	gap: var(--ati-space-6);
}

.ati-cfg-form {
	display: grid;
	gap: var(--ati-space-3);
}

/* Configurator header: compact and subordinate to the product section headings. */
.ati-product-configurator__header {
	margin-bottom: var(--ati-space-6);
}

.ati-product-configurator__title {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0 0 var(--ati-space-2);
	font-size: 24px;
	line-height: var(--ati-leading-h2);
}

/*
 * Settings icon badge beside the section title. Reuses the site's icon-badge
 * idiom (soft primary surface, primary icon) already established by
 * .ati-product-description__icon and .ati-feature__icon, so the Configurator
 * heading reads as part of the same visual language.
 */
.ati-product-configurator__title-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-product-configurator__title-icon .ati-icon {
	width: 20px;
	height: 20px;
}

.ati-product-configurator__description {
	margin: 0;
	max-width: var(--ati-measure-wide);
	color: var(--ati-color-text-muted);
}

@media (max-width: 1023px) {
	.ati-product-configurator__title {
		font-size: 20px;
	}
}

/* Steps (progressive disclosure — one section visible at a time) */
.ati-configurator__section {
	padding: var(--ati-space-4) 0 0;
}

.ati-configurator__section[hidden] {
	display: none;
}

.ati-configurator__section-title {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-h3);
}

.ati-configurator__section-title:focus-visible {
	outline: none;
	box-shadow: var(--ati-focus-ring);
	border-radius: var(--ati-radius-sm);
}

.ati-configurator__section-body {
	display: grid;
	gap: var(--ati-space-3);
}

.ati-configurator__section-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	font-size: var(--ati-text-spec);
	font-weight: 700;
}

/* Connected progressive stepper */
.ati-configurator__progress {
	margin: 0 0 var(--ati-space-4);
}

.ati-configurator__progress[hidden] {
	display: none;
}

.ati-configurator__progress-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-configurator__progress-item {
	--ati-step-marker: 30px;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Connector from this marker centre to the next, drawn behind the markers.
 * Logical properties keep the RTL flow (first step on the right). */
.ati-configurator__progress-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(var(--ati-step-marker) / 2 - 1px);
	inset-inline-start: 50%;
	inline-size: 100%;
	block-size: 2px;
	background: var(--ati-color-border);
	z-index: 0;
}

.ati-configurator__progress-item--done:not(:last-child)::after {
	background: var(--ati-color-primary);
}

.ati-configurator__progress-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ati-space-2);
	max-width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ati-color-text-muted);
	cursor: pointer;
}

.ati-configurator__progress-step[aria-disabled='true'] {
	cursor: default;
}

.ati-configurator__progress-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ati-step-marker);
	height: var(--ati-step-marker);
	border-radius: 50%;
	border: 2px solid var(--ati-color-border);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-spec);
	font-weight: 700;
}

.ati-configurator__progress-label {
	font-size: var(--ati-text-spec);
	line-height: 1.4;
}

.ati-configurator__progress-item--active .ati-configurator__progress-marker {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: #ffffff;
}

.ati-configurator__progress-item--active .ati-configurator__progress-label {
	color: var(--ati-color-text);
	font-weight: 700;
}

.ati-configurator__progress-item--done .ati-configurator__progress-marker {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: #ffffff;
}

.ati-configurator__progress-item--done .ati-configurator__progress-label {
	color: var(--ati-color-primary);
}

.ati-configurator__progress-step:focus-visible {
	outline: none;
}

.ati-configurator__progress-step:focus-visible .ati-configurator__progress-marker {
	box-shadow: var(--ati-focus-ring);
}

/* Step navigation */
.ati-configurator__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--ati-space-3);
	margin-top: var(--ati-space-4);
}

.ati-configurator__nav[hidden] {
	display: none;
}

.ati-configurator__nav-btn {
	min-width: 130px;
	justify-content: center;
}

/* Review step emphasises the existing summary + submit panel. */
.ati-configurator--review .ati-quote-summary {
	border-color: var(--ati-color-primary);
}

@media (max-width: 600px) {
	/* Same connected stepper — only dimensions/spacing adapt. */
	.ati-configurator__progress-item {
		--ati-step-marker: 24px;
	}

	.ati-configurator__progress-step {
		gap: var(--ati-space-1);
	}

	.ati-configurator__nav-btn {
		flex: 1;
		min-width: 0;
	}
}

@media (max-width: 360px) {
	.ati-configurator__progress-item {
		--ati-step-marker: 22px;
	}
}

/* Per-field error message */
.ati-cfg-field__error {
	margin: var(--ati-space-2) 0 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-danger, #b3261e);
}

/* Choice cards (single selection) */
.ati-cfg-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--ati-space-2);
}

.ati-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	padding: var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ati-choice:hover {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-surface-container);
}

.ati-choice:has(input:checked) {
	border-color: var(--ati-color-primary);
	box-shadow: inset 0 0 0 1px var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
}

.ati-choice:has(input:focus-visible) {
	box-shadow: var(--ati-focus-ring);
}

.ati-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ati-choice__marker {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--ati-color-border);
	border-radius: 50%;
	background: var(--ati-color-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ati-choice input:checked + .ati-choice__marker {
	border-color: var(--ati-color-primary);
	border-width: 5px;
}

.ati-choice input:checked ~ .ati-choice__label {
	font-weight: 600;
}

.ati-choice__label {
	font-size: var(--ati-text-body);
}

/* Toggle switches (multiple / boolean) */
.ati-cfg-toggles {
	display: grid;
	gap: var(--ati-space-2);
}

.ati-toggle {
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ati-toggle:hover {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-surface-container);
}

.ati-toggle:has(input:focus-visible) {
	box-shadow: var(--ati-focus-ring);
}

.ati-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ati-toggle__control {
	flex: 0 0 auto;
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--ati-color-border);
	transition: background-color 0.15s ease;
}

.ati-toggle__thumb {
	position: absolute;
	top: 3px;
	inset-inline-end: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ati-color-surface);
	box-shadow: 0 1px 2px rgba(24, 34, 53, 0.2);
	transition: transform 0.15s ease;
}

.ati-toggle input:checked + .ati-toggle__control {
	background: var(--ati-color-primary);
}

.ati-toggle input:checked + .ati-toggle__control .ati-toggle__thumb {
	transform: translateX(16px); /* RTL: thumb slides to the start side when ON */
}

.ati-toggle__label {
	font-size: var(--ati-text-body);
}

/* Quantity stepper */
.ati-cfg-stepper {
	display: inline-flex;
	align-items: stretch;
	gap: var(--ati-space-2);
}

/* Distinct, prominent stepper buttons (teal accent) — scoped to beat the base
 * `.ati-configurator button` typography so the +/− glyphs stay large. */
.ati-cfg-stepper .ati-cfg-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	min-height: 44px;
	border: 1px solid var(--ati-color-primary-soft);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ati-cfg-stepper .ati-cfg-stepper__btn:hover {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: #ffffff;
}

.ati-cfg-stepper .ati-cfg-stepper__btn:active {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary);
	color: #ffffff;
}

.ati-cfg-stepper .ati-cfg-stepper__btn:focus-visible {
	outline: none;
	box-shadow: var(--ati-focus-ring);
}

.ati-cfg-stepper .ati-cfg-stepper__btn:disabled {
	border-color: var(--ati-color-border);
	background: var(--ati-color-surface-container);
	color: var(--ati-color-text-muted);
	cursor: not-allowed;
}

.ati-cfg-stepper__value,
.ati-cfg-stepper input[type="number"] {
	width: 120px;
	min-height: 44px;
	padding: 0 var(--ati-space-3);
	text-align: center;
}

/* Bounded numeric: range + exact input */
.ati-cfg-range {
	display: flex;
	align-items: center;
	gap: var(--ati-space-4);
}

.ati-cfg-range__slider {
	flex: 1;
	accent-color: var(--ati-color-primary);
}

.ati-cfg-range__number {
	width: 110px;
	text-align: center;
}

/* Summary rows are editable */
.ati-quote-summary__row[data-edit-field] {
	cursor: pointer;
}

.ati-quote-summary__row[data-edit-field]:hover {
	background: var(--ati-color-primary-soft);
}

.ati-quote-summary__row[data-edit-field]:focus-visible {
	box-shadow: var(--ati-focus-ring);
	outline: none;
}

.ati-quote-summary__edit {
	display: inline-block;
	margin-inline-start: var(--ati-space-2);
	font-size: var(--ati-text-spec);
	font-weight: 500;
	color: var(--ati-color-primary);
	text-decoration: underline;
}

/* CTA loading/success states */
.ati-quote-summary__cta[disabled] {
	opacity: 0.6;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.ati-toggle__control,
	.ati-toggle__thumb,
	.ati-choice,
	.ati-opt {
		transition: none;
	}
}


.ati-cfg-field {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
}

/* The configuration group has no hover effect: it stays flat — surface, border,
 * elevation and position unchanged — when the pointer moves over it. Controls
 * inside keep their own hover/focus states. */
.ati-cfg-field:hover {
	background: var(--ati-color-surface);
	border-color: var(--ati-color-border);
	box-shadow: none;
	transform: none;
}

.ati-cfg-field[hidden] {
	display: none;
}

.ati-cfg-field--error {
	border-color: var(--ati-color-danger, #b3261e);
	box-shadow: 0 0 0 1px var(--ati-color-danger, #b3261e);
}

.ati-cfg-field__label {
	display: block;
	margin-bottom: var(--ati-space-3);
	font-weight: 600;
	font-size: var(--ati-text-body);
}

.ati-cfg-req {
	color: var(--ati-color-primary);
	font-weight: 700;
}

.ati-cfg-field__help {
	display: block;
	margin-top: var(--ati-space-2);
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

/* Fixed specification: a select/radio with a single supported value (no choice). */
.ati-cfg-fixed {
	margin: 0;
	font-weight: 600;
	color: var(--ati-color-text);
}

.ati-cfg-fixed__tag {
	display: inline-block;
	margin-inline-start: var(--ati-space-1);
	padding: 0 var(--ati-space-1);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	font-size: var(--ati-text-spec);
	font-weight: 400;
	color: var(--ati-color-text-muted);
}

.ati-cfg-field select,
.ati-cfg-field textarea,
.ati-cfg-field input[type="number"],
.ati-cfg-field input[type="text"] {
	width: 100%;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
}

/*
 * One coherent focus ring for every configurator control. These controls are
 * bare elements, so without this the global :focus-visible would stack an
 * outline + offset + box-shadow into a thick multi-layer frame. Matches the
 * established .ati-field__control treatment. Hover is unchanged (no hover rule).
 */
.ati-cfg-field select:focus-visible,
.ati-cfg-field textarea:focus-visible,
.ati-cfg-field input[type="number"]:focus-visible,
.ati-cfg-field input[type="text"]:focus-visible {
	outline: none;
	border-color: var(--ati-color-primary);
	box-shadow: var(--ati-focus-ring);
}

/* A control (notably the artwork file input) must never overflow its column and
 * stretch the grid, which would shift the summary column. */
.ati-cfg-field input,
.ati-cfg-field select,
.ati-cfg-field textarea {
	max-width: 100%;
}

/* Option groups (radio / checkbox) */
.ati-cfg-options {
	display: grid;
	gap: var(--ati-space-2);
}

.ati-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	padding: var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ati-opt:hover {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-surface-container);
}

.ati-opt:has(input:checked) {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
}

.ati-opt:has(input:focus-visible) {
	box-shadow: var(--ati-focus-ring);
}

.ati-opt input {
	flex: 0 0 auto;
	accent-color: var(--ati-color-primary);
}

.ati-opt span {
	font-size: var(--ati-text-body);
}

/* Dimension trio */
.ati-cfg-dims {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ati-space-2);
	align-items: end;
}

.ati-cfg-dim {
	display: grid;
	gap: var(--ati-space-1);
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-cfg-dim__unit {
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

/* File upload */
.ati-cfg-file {
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	flex-wrap: wrap;
}

.ati-cfg-file__status {
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

/* Edit mode: the visitor is changing a saved item, not creating a new one. */
.ati-cfg-edit-note {
	margin: 0 0 var(--ati-space-3);
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 1px solid var(--ati-color-primary);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-text);
	font-size: var(--ati-text-spec);
}

/* An already uploaded file cannot be put back into a file input, so the saved
 * reference is shown instead, with a control to drop it. */
.ati-cfg-file {
	flex-wrap: wrap;
}

.ati-cfg-file__ref {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text);
}

.ati-cfg-file__ref-name {
	/* Technical identifier (file name): wrap only when it would overflow; never
	 * split ordinary words of a Persian file name at character level. */
	word-break: normal;
	overflow-wrap: anywhere;
}

.ati-cfg-file__ref-drop {
	border: 0;
	background: none;
	padding: 0;
	color: var(--ati-color-danger, #b3261e);
	cursor: pointer;
	font: inherit;
	font-size: var(--ati-text-spec);
	text-decoration: underline;
}

/* Error box */
.ati-cfg-errors {
	margin: var(--ati-space-3) 0 0;
	color: var(--ati-color-danger, #b3261e);
	font-size: var(--ati-text-caption);
}

/* Quote summary (shared) */
.ati-quote-summary {
	align-self: start;
	padding: var(--ati-space-6);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
}

.ati-quote-summary__title {
	margin: 0;
	font-size: var(--ati-text-h3);
}

.ati-quote-summary__subtitle {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-quote-summary__list {
	margin: 0;
}

.ati-quote-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ati-space-3);
	padding: var(--ati-space-2) 0;
	border-bottom: 1px dashed var(--ati-color-divider);
}

.ati-quote-summary__row:last-child {
	border-bottom: 0;
}

.ati-quote-summary__row dt {
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-quote-summary__row dd {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	text-align: end;
}

.ati-quote-summary__note {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-2);
	margin: var(--ati-space-4) 0;
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-quote-summary__note .ati-icon {
	margin-top: 2px;
	/* Attention icon sized clearly above the default 20px, aligned to the note
	   text; flex prevents shrinking when the Persian text wraps. */
	width: 24px;
	height: 24px;
	color: var(--ati-color-primary);
	flex: 0 0 auto;
}

.ati-quote-summary__cta {
	width: 100%;
	justify-content: center;
}

/* Required selections that are still empty, surfaced in the live summary. */
.ati-quote-summary__row--missing dd {
	color: var(--ati-color-danger, #b3261e);
	font-weight: 600;
}

.ati-quote-summary__row--missing dt::before {
	content: '•';
	margin-inline-end: var(--ati-space-2);
	color: var(--ati-color-danger, #b3261e);
}

/* What happens after adding the configuration to the request. */
.ati-cfg-next-steps {
	margin: var(--ati-space-4) 0 0;
	padding: var(--ati-space-3);
	border: 1px dashed var(--ati-color-divider);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
}

.ati-cfg-next-steps__title {
	margin: 0 0 var(--ati-space-2);
	font-size: var(--ati-text-spec);
	font-weight: 600;
	color: var(--ati-color-text);
}

.ati-cfg-next-steps__list {
	margin: 0;
	padding-inline-start: var(--ati-space-5);
	display: grid;
	gap: var(--ati-space-1);
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

/* Quote cart page */
.ati-quote-cart {
	display: grid;
	gap: var(--ati-space-6);
}

.ati-quote-cart__empty {
	padding: var(--ati-space-8) var(--ati-space-4);
	border: 1px dashed var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	text-align: center;
}

.ati-quote-cart__items {
	display: grid;
	gap: var(--ati-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-quote-cart__item {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
}

.ati-quote-cart__item-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ati-space-3);
}

.ati-quote-cart__item-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-3);
}

.ati-quote-cart__edit,
.ati-quote-cart__remove {
	border: 0;
	background: none;
	color: var(--ati-color-danger, #b3261e);
	cursor: pointer;
	font: inherit;
	font-size: var(--ati-text-spec);
	text-decoration: underline;
}

.ati-quote-cart__edit {
	color: var(--ati-color-primary);
}

.ati-quote-cart__specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--ati-space-1) var(--ati-space-4);
	margin: var(--ati-space-3) 0 0;
	padding: var(--ati-space-3) 0 0;
	border-top: 1px dashed var(--ati-color-divider);
	list-style: none;
}

.ati-quote-cart__spec {
	display: flex;
	justify-content: space-between;
	gap: var(--ati-space-2);
	font-size: var(--ati-text-caption);
}

.ati-quote-cart__spec span:first-child {
	color: var(--ati-color-text-muted);
}

.ati-quote-form {
	display: grid;
	gap: var(--ati-space-3);
	max-width: 560px;
}

.ati-quote-form__title {
	margin: var(--ati-space-4) 0 0;
	font-size: var(--ati-text-h3);
}

.ati-quote-form__status {
	min-height: 1.4em;
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-primary);
}

/*
 * Form + Order Summary become two columns only once the Product container is
 * wide enough (>=1200px). Below that they stack full-width, so the Order
 * Summary is never a narrow secondary column.
 */
@media (min-width: 1200px) {
	.ati-configurator__layout {
		grid-template-columns: 1.7fr 1fr;
		align-items: start;
	}

	/*
	 * Pin each column to a single row. Grid items default to min-width:auto, so a
	 * wide active step (file input, wrapped controls) could otherwise stretch the
	 * form column and shift the summary; min-width:0 keeps the column proportions
	 * and guarantees the summary never drops below the form.
	 */
	.ati-configurator__layout > .ati-cfg-form {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.ati-configurator__layout > .ati-quote-summary {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.ati-quote-summary {
		position: sticky;
		top: 88px;
	}
}

@media (max-width: 600px) {
	.ati-cfg-dims {
		grid-template-columns: 1fr 1fr;
	}
}

/* assets/css/components/footer.css */
/*
 * Component: Footer
 */

.ati-footer {
	background: var(--ati-color-surface-container);
	border-top: 1px solid var(--ati-color-border);
	padding-block: var(--ati-space-8) var(--ati-space-6);
}

.ati-footer__grid {
	display: grid;
	gap: var(--ati-space-6);
}

.ati-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-3);
}

.ati-footer__about {
	margin: 0;
	max-width: 46ch;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-footer__social-label {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
}

.ati-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
}

.ati-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.ati-social-link:hover {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-social-link:focus-visible {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 2px;
	box-shadow: var(--ati-focus-ring);
}

.ati-social-link:active {
	transform: scale(0.98);
}

.ati-social-link__icon {
	width: 20px;
	height: 20px;
}

.ati-footer__col {
	border-bottom: 1px solid var(--ati-color-divider);
}

.ati-footer__col-title {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	padding: var(--ati-space-3) 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.ati-footer__col-title::-webkit-details-marker {
	display: none;
}

.ati-footer__col-title .ati-icon:first-child {
	color: var(--ati-color-primary);
}

.ati-footer__col-title .ati-icon:last-child {
	margin-inline-start: auto;
	transition: transform 0.15s ease;
}

.ati-footer__col[open] .ati-footer__col-title .ati-icon:last-child {
	transform: rotate(-90deg);
}

.ati-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
	padding-bottom: var(--ati-space-3);
}

/* Trust column body. The seal is a logo, not a card, so it gets no border,
 * background or shadow: it sits in the same optical space as a link list and is
 * scaled by its own aspect ratio rather than a fixed height. */
.ati-footer__trust {
	display: flex;
	align-items: flex-start;
	padding-block-end: var(--ati-space-3);
}

.ati-footer__trust-logo {
	display: block;
	width: auto;
	/* The file is 185x175, so the rendered box keeps that ratio exactly. */
	height: 96px;
	max-width: 100%;
}

.ati-footer__links a {
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-footer__links a:hover {
	color: var(--ati-color-primary);
}

.ati-footer__contact-items {
	display: grid;
	gap: var(--ati-space-3);
	padding-bottom: var(--ati-space-3);
	font-style: normal;
}

.ati-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-2);
	min-width: 0;
}

.ati-footer__contact-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--ati-color-primary);
}

.ati-footer__contact-content {
	display: grid;
	gap: var(--ati-space-1);
	min-width: 0;
}

.ati-footer__contact-label,
.ati-footer__contact-value {
	font-size: var(--ati-text-caption);
	line-height: var(--ati-leading-body);
}

.ati-footer__contact-label {
	color: var(--ati-color-text);
	font-weight: 600;
}

.ati-footer__contact-value {
	color: var(--ati-color-text-muted);
	overflow-wrap: anywhere;
}

.ati-footer__contact-link {
	width: fit-content;
	color: var(--ati-color-text-muted);
}

.ati-footer__contact-link:hover,
.ati-footer__contact-link:focus-visible {
	color: var(--ati-color-primary);
}

.ati-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
	margin-top: var(--ati-space-6);
	padding-top: var(--ati-space-4);
	border-top: 1px solid var(--ati-color-border);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-footer__copy,
.ati-footer__note {
	margin: 0;
}

@media (min-width: 768px) {
	.ati-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ati-footer__col {
		border-bottom: 0;
	}

	.ati-footer__col-title {
		cursor: default;
		padding-bottom: var(--ati-space-2);
	}

	.ati-footer__col-title .ati-icon:last-child {
		display: none;
	}

	.ati-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.ati-footer__grid {
		grid-template-columns: 1.6fr repeat(4, 1fr);
	}
}