/*
 * Abzarct — base layout and shared components.
 * Mobile-first; on desktop the whole app sits in a centred 500px frame.
 */

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

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

body {
	margin: 0;
	background: var(--c-line);
	color: var(--c-text);
	font-size: var(--fs-14);
	line-height: 1.7;
	font-weight: var(--fw-regular);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

[hidden] {
	display: none !important;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

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

h1, h2, h3, h4 {
	margin: 0;
	font-weight: var(--fw-bold);
	line-height: 1.35;
}

:focus-visible {
	outline: 2px solid var(--c-indigo);
	outline-offset: 2px;
}

/* ---- App frame ---------------------------------------------------------- */

.app {
	max-width: var(--app-max);
	margin-inline: auto;
	min-height: 100vh;
	background: var(--c-bg);
	position: relative;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.06);
}

.app__main {
	flex: 1 0 auto;
	padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.container {
	padding-inline: var(--pad);
}

/* ---- Utility ------------------------------------------------------------ */

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

/* Price presentation shared by cards, cart, product.
 * WooCommerce's get_price_html() emits <del> (regular) and <ins> (sale). */
.price {
	color: var(--c-price);
	font-weight: var(--fw-bold);
}

.price del,
.price del .woocommerce-Price-amount {
	color: var(--c-text-dim);
	font-size: var(--fs-10);
	font-weight: var(--fw-regular);
	text-decoration: line-through;
	margin-inline-end: 4px;
}

.price ins,
.price ins .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--c-price);
	font-weight: var(--fw-bold);
}

.price .woocommerce-Price-currencySymbol {
	font-weight: var(--fw-regular);
	font-size: 0.85em;
}

.badge-off {
	display: inline-block;
	background: var(--c-discount-bg);
	color: #fff;
	font-size: var(--fs-10);
	font-weight: var(--fw-bold);
	padding: 1px 6px;
	border-radius: var(--r-sm);
	line-height: 1.6;
}

/* Primary red CTA (add to cart, pay). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--r);
	font-weight: var(--fw-bold);
	font-size: var(--fs-14);
	transition: filter 0.15s ease, transform 0.05s ease;
}

.btn:active {
	transform: scale(0.99);
}

.btn--primary {
	background: var(--c-red);
	color: #fff;
	width: 100%;
}

.btn--teal {
	background: var(--c-teal);
	color: #fff;
	width: 100%;
}

/* Blue is the "keep going" action — track an order, contact support. Red is
   reserved for buying, so the two never compete on the same screen. */
.btn--blue {
	background: var(--c-blue);
	color: #fff;
	width: 100%;
}

.btn--ghost {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	color: var(--c-text);
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--pad);
	background: var(--c-bg);
}

.site-header__logo {
	display: flex;
	align-items: center;
}

.site-header__logo img {
	width: 71px;
	height: auto;
	display: block;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.icon-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r);
	background: var(--c-surface);
	position: relative;
}

/* 20 is right, once the glyphs are the designer's stroke set rather than
 * Material Symbols: Lucide phone at 20 measures 18×18 and bell-dot 16×18,
 * against 18×18 / 17×18 in the frame. (Material's different geometry made
 * this look like a 24px box.) */
.icon-btn svg {
	width: 20px;
	height: 20px;
}

.icon-btn__count {
	position: absolute;
	top: -4px;
	inset-inline-start: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--r-pill);
	background: var(--c-red);
	color: #fff;
	font-size: var(--fs-10);
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Bottom tab bar ----------------------------------------------------- */

.tabbar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--app-max);
	height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 50;
}

/* Items (Figma 415:1953): teal icons, 10/500 gray-700 labels; the active
   item's icon sits in a teal pill with a white glyph. */
.tabbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	color: var(--c-gray-700);
	padding-top: 10px;
}

.tabbar__item svg {
	width: 18px;
	height: 18px;
	color: var(--c-teal);
}

.tabbar__item .tabbar__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 28px;
	border-radius: var(--r-pill);
}

.tabbar__item.is-active .tabbar__pill {
	background: var(--c-teal);
}

.tabbar__item.is-active .tabbar__pill svg {
	color: #fff;
}

/* Centre cart button, raised, with its own label (Figma 229:272). */
.tabbar__cart {
	flex: 0 0 auto;
	transform: translateY(-10px);
}

.tabbar__cart .tabbar__disc {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-teal);
	position: relative;
}

.tabbar__cart svg {
	width: 24px;
	height: 24px;
	color: #fff;
}

.tabbar__cart .icon-btn__count {
	top: -6px;
	inset-inline-start: -4px;
	background: #EB5757;
}

/* ===== Shared components: product rail, product card, trust row, accordion =====
   Used by home, product (related), cart (suggestions), categories. ===== */

/* ---- Product rail ------------------------------------------------------- */

.rail {
	padding-block: var(--sec-y);
}

.rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

/* Rail heading (Figma 4:564): heavy teal title + small subtitle, "همه" pill. */
.rail__title {
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	color: #40444C;
	margin: 0 0 4px;
}

.rail__sub {
	font-size: var(--fs-12);
	font-weight: var(--fw-regular);
	color: #626C83;
	margin: 0;
}

.rail__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	padding: 6px 12px;
	font-size: var(--fs-12);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

.rail__all svg {
	width: 16px;
	height: 16px;
}

.rail__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-inline: var(--pad);
	scroll-padding-inline: var(--pad);
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.rail__track::-webkit-scrollbar {
	display: none;
}

.rail__track > .pcard {
	scroll-snap-align: start;
}

/* ---- Product card ------------------------------------------------------- */

/* Card body — Figma 384:1599: 140w, r8, pad 14/12. No border and no shadow:
   the frame runs plain white straight to the card edge against the page grey. */
.pcard {
	flex: 0 0 auto;
	width: 140px;
	background: var(--c-surface);
	border-radius: 8px;
	/* 4 at the foot, not 14: the frame leaves 11px between the price ink and
	   the card edge, and the price line-box already contributes ~7 of it. */
	padding: 14px 12px 4px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.pcard__media {
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.pcard__link {
	display: block;
	width: 92px;
	height: 92px;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--c-surface);
}

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

.pcard__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--c-bg);
}

/* Quick-add overlaps the image's lower corner (36×36, #EB5757 stroke) — on
   the card's RIGHT side per the fresh Figma card spec (384:1599). */
.pcard__add {
	width: 36px;
	height: 36px;
	border-radius: var(--r);
	background: var(--c-surface);
	border: 1.5px solid #EB5757;
	color: #EB5757;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.pcard__add svg {
	width: 16px;
	height: 16px;
}

.pcard__add.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.pcard__add.is-added {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: #fff;
}

/* Add failed and there was nowhere useful to send the customer. */
.pcard__add.is-failed,
.pcard__stepbtn.is-failed {
	background: #FDECEC;
	border-color: var(--c-red);
	color: var(--c-red);
}

/* ---- Card quantity control ---------------------------------------------
   The «+» and the stepper occupy the same corner; the script swaps them. */

/* inset-inline-start is the RIGHT edge in RTL, which is where the frame puts
   this control — same corner the bare «+» used to sit in. */
.pcard__qty {
	position: absolute;
	inset-inline-start: 0;
	bottom: -8px;
	z-index: 3;
}

.pcard__qty.is-busy {
	opacity: .6;
	pointer-events: none;
}

.pcard__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 3px 0;
	width: 36px;
	background: var(--c-surface);
	border: 1.5px solid #EB5757;
	border-radius: var(--r-lg);
}

.pcard__step[hidden] {
	display: none;
}

.pcard__stepbtn {
	width: 30px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	color: #EB5757;
	cursor: pointer;
}

.pcard__stepbtn svg {
	width: 15px;
	height: 15px;
}

.pcard__stepnum {
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	color: var(--c-gray-700);
	line-height: 1;
}

/* Title reads from the start edge (right in RTL); prices sit on the opposite
   side. Both were centred before. */
.pcard__title {
	text-align: start;
	font-size: var(--fs-12);
	font-weight: var(--fw-medium);
	color: #333;
	line-height: 1.8;
	margin: 0 0 8px;
	min-height: calc(2 * 1.8em);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* In the horizontal rails the frame gives the name ONE line — that is what
 * makes the rail card 200px, and a two-line reserve there pushed every
 * section below the first rail 19px out of step, compounding down the page.
 * The archive grid keeps its two lines: its cards are a uniform grid, so the
 * extra line costs no alignment and saves long names from being cut. */
.flash__track .pcard__title,
.rail__track .pcard__title,
.bnpl__track .pcard__title {
	min-height: calc(1 * 1.8em);
	-webkit-line-clamp: 1;
}

/* Pricing row: prices column + «ماهیانه» chip on the far side.
   The prices hug the END edge (left in RTL) per the design. */
.pcard__pricing {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 6px;
}

.pcard__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

/* row-reverse so the % badge lands to the RIGHT of the struck price, which is
   what the frame shows — plain RTL order puts it on the left. */
.pcard__oldrow {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 6px;
}

.pcard__old {
	font-size: var(--fs-10);
	color: var(--c-gray-400);
	text-decoration: line-through;
}

/* Red % badge sits INLINE beside the struck price (not on the image). */
.pcard__off {
	background: var(--c-red);
	color: #fff;
	font-size: var(--fs-10);
	font-weight: var(--fw-bold);
	line-height: 1;
	padding: 2px 5px 3px;
	border-radius: var(--r-sm);
}

.pcard__now {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--c-gray-700);
	white-space: nowrap;
}

.pcard__now small {
	font-size: var(--fs-10);
	font-weight: var(--fw-regular);
	color: var(--c-gray-500);
}

.pcard__chip {
	flex: 0 0 auto;
	background: #E6F2FF;
	color: #0041B9;
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	padding: 4px 6px;
	border-radius: var(--r-sm);
}

/* ---- Trust badges ------------------------------------------------------- */

/* Trust badges (Figma 6:115): white r8 card exactly 69 tall, four 78-wide
   items filling it (no card padding — that is what made it 89), 20px teal
   icons, 10/500 lh18 #40444C labels. */
/* brands → trust = 83 in the home frame; desktop keeps the flat rhythm. */
.trust {
	padding-block: 45px var(--sec-y);
}

.trust__card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	height: 69px;
	background: var(--c-surface);
	border-radius: 8px;
}

.trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	line-height: 18px;
	color: #40444C;
}

.trust__ic {
	color: var(--c-teal);
}

.trust__ic svg {
	width: 20px;
	height: 20px;
}


/* ---- Accordion (shared: product, categories, home FAQ) ---- */

.acc__item {
	border-bottom: 1px solid var(--c-line);
}

.acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 2px;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	cursor: pointer;
	list-style: none;
}

.acc__head::-webkit-details-marker {
	display: none;
}

.acc__chev {
	color: var(--c-text-dim);
	transition: transform 0.2s ease;
}

.acc__chev svg {
	width: 20px;
	height: 20px;
	display: block;
}

.acc__item[open] .acc__chev {
	transform: rotate(180deg);
}

.acc__body {
	padding: 0 2px 14px;
	font-size: var(--fs-13);
	color: var(--c-text-muted);
	line-height: 1.9;
}

/* ---- Promo bar ---------------------------------------------------------- */

/*
 * Home also styles this in home.css (which loads after main.css and wins there
 * with identical values). These copies are what dress the bar on every OTHER
 * page, where home.css is not enqueued.
 */
.promobar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 12px;
	overflow: hidden;
	background: linear-gradient(90deg, #0041B9 0%, #14B8A6 100%);
	color: #fff;
	text-align: center;
	font-size: var(--fs-12);
	font-weight: var(--fw-medium);
}

.promobar__art {
	width: 49px;
	height: 50px;
	object-fit: contain;
	align-self: flex-start;
	margin-top: 6px;
	margin-bottom: -14px;
}

/* Mobile shows the bar on Home only; the desktop frames all carry it. */
.promobar--inner {
	display: none;
}

@media (min-width: 1025px) {
	.promobar--inner {
		display: flex;
	}
}