/*
 * Zhingo — the cosmetics store's components, on top of app.css (and commerce.css): filters,
 * sliders and tabs, brands, cards' details, the product page, chat and the club. The store's
 * look itself (colours, type, header, home sections, cards) is settled by store.css, loaded
 * after this file.
 */

:root {
	--ring-line: rgb(214 36 94 / 0.16);
	--ring-line-strong: rgb(214 36 94 / 0.32);
	--r-card: 16px;
	--r-panel: 24px;
}

/* Nothing may widen the page sideways (full-bleed parts, sliders). */
body {
	overflow-x: clip;
}

/* Prices read «۴٬۳۵۰٬۰۰۰ تومان»: WooCommerce's <bdi> takes its direction from the digits alone
   (the currency's own dir="auto" is skipped), falls back to left-to-right and put the currency
   first on the product page and in the bag. */
.woocommerce-Price-amount > bdi {
	direction: rtl;
	unicode-bidi: isolate;
}

/* Type and sections: lighter, calmer headings everywhere. --------------------------------- */

.section {
	padding-top: clamp(64px, 8vw, 128px);
}

.section-head {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.section-title {
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.section-title em {
	color: var(--plum);
	font-style: normal;
}

.eyebrow {
	letter-spacing: 0.01em;
}

.shop-hero {
	padding-block: clamp(14px, 2vw, 26px) clamp(12px, 1.6vw, 20px);
}

.shop-hero__row {
	justify-content: flex-start;
	gap: 4px 14px;
	margin-top: 10px;
}

.shop-hero__title {
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 300;
	line-height: 1.3;
}

.shop-hero__count {
	font-size: 14px;
}

.shop-hero .term-description,
.shop-hero .page-description {
	max-width: 62ch;
	margin-top: 6px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.95;
}

.shop-hero .term-description p {
	margin: 0;
}

.blog-hero__title {
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 300;
}

/* Frames: soft rectangles (no arches, no animated shapes). */
.arch {
	clip-path: none;
	border-radius: var(--r-panel);
}

.arch-outline {
	display: none;
}

/* Categories: doors into the store, not products — the name on the photo (a dark veil under it),
   the count in a glass pill, an arrow; landscape tiles in a fixed grid. Product cards are portrait
   photos with their words under them, in sliders, so the two never read alike. ------------------ */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-card);
	background: var(--ink);
	color: #fff;
	isolation: isolate;
}

.cat-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--paper-2);
}

.cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.9s var(--ease-out);
}

.cat-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(30 18 26 / 0.78) 0%, rgb(30 18 26 / 0.28) 46%, transparent 72%);
}

.cat-card__label {
	position: absolute;
	z-index: 1;
	inset-inline: 18px 66px;
	bottom: 16px;
	display: grid;
	justify-items: start;
	gap: 6px;
}

.cat-card__name {
	color: #fff;
	font-size: clamp(16px, 0.9rem + 0.5vw, 21px);
	font-weight: 600;
	line-height: 1.5;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

.cat-card__count {
	padding: 1px 10px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.18);
	color: rgb(255 255 255 / 0.92);
	font-size: 12px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.cat-card__go {
	position: absolute;
	z-index: 1;
	inset-inline-end: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgb(255 248 250 / 0.94);
	color: var(--ink);
	transition: translate 0.35s var(--ease-out);
}

.cat-card__go .icon {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.cat-card:hover .cat-card__media img {
		scale: 1.05;
	}

	.cat-card:hover .cat-card__go {
		translate: -4px 0;
	}

	[dir="ltr"] .cat-card:hover .cat-card__go {
		translate: 4px 0;
	}
}

.cat-card:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* Phones: two to a row, a little taller, a smaller arrow. */
@media (max-width: 760px) {
	.cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cat-card__media {
		aspect-ratio: 4 / 3;
	}

	.cat-card__label {
		inset-inline: 12px 46px;
		bottom: 11px;
		gap: 4px;
	}

	.cat-card__name {
		font-size: 15px;
	}

	.cat-card__count {
		padding: 0 8px;
		font-size: 11px;
	}

	.cat-card__go {
		inset-inline-end: 10px;
		bottom: 11px;
		width: 30px;
		height: 30px;
	}

	.cat-card__go .icon {
		width: 15px;
		height: 15px;
	}
}

/* Tabbed sliders (picks, brands). ---------------------------------------------------------- */

.slider-tabs {
	display: flex;
	gap: clamp(18px, 2.6vw, 36px);
	margin: 0 0 clamp(22px, 3vw, 34px);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}

.slider-tabs::-webkit-scrollbar {
	display: none;
}

.slider-tab {
	position: relative;
	flex: none;
	padding: 0 0 14px;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s;
}

.slider-tab::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ink);
	scale: 0 1;
	transition: scale 0.35s var(--ease);
}

.slider-tab[aria-selected="true"] {
	color: var(--ink);
	font-weight: 600;
}

.slider-tab[aria-selected="true"]::after {
	scale: 1 1;
}

@media (hover: hover) {
	.slider-tab:hover {
		color: var(--ink);
	}
}

.js .slider-panel[data-hidden] {
	display: none;
}

.no-js .slider-panel + .slider-panel {
	margin-top: 48px;
}

.slider-panel__more {
	margin-top: clamp(16px, 2vw, 24px);
}

.product-slider {
	margin-inline: calc(-1 * var(--gutter));
}

.products.product-slider__track {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: clamp(210px, 22.6%, 320px);
	gap: clamp(14px, 1.6vw, 24px);
	padding: 4px var(--gutter) 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.products.product-slider__track::-webkit-scrollbar {
	display: none;
}

.product-slider__track > li {
	scroll-snap-align: start;
}

@media (max-width: 760px) {
	.products.product-slider__track {
		grid-auto-columns: 64%;
	}
}

.slider-arrows {
	display: flex;
	gap: 8px;
}

.slider-arrow {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, opacity 0.2s;
}

.slider-arrow .icon {
	width: 18px;
	height: 18px;
}

[dir="rtl"] .slider-arrow[data-slider-prev] .icon {
	transform: scaleX(-1);
}

@media (hover: hover) {
	.slider-arrow:hover:not(:disabled, [aria-disabled="true"]) {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--paper);
	}
}

.slider-arrow:disabled,
.slider-arrow[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 760px) {
	.slider-arrows {
		display: none;
	}
}

/* Shop: categories as a hierarchy. ---------------------------------------------------------- */

.cat-nav {
	margin: 0 0 clamp(14px, 2vw, 26px);
}

/* position: the counts' hidden labels (absolutely placed) must be held by the rail; anchored to
   the page they sat far to the left and widened it, so Android opened the shop scrolled into
   blank space. */
.cat-rail {
	position: relative;
	display: flex;
	gap: clamp(12px, 1.6vw, 22px);
	margin: 0 calc(-1 * var(--gutter));
	padding: 8px var(--gutter) 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.cat-rail::-webkit-scrollbar {
	display: none;
}

.cat-rail > li {
	flex: none;
	scroll-snap-align: start;
}

.cat-rail__item {
	display: grid;
	justify-items: center;
	gap: 2px;
	width: 86px;
	text-align: center;
}

.cat-rail__media {
	display: block;
	width: 68px;
	height: 68px;
	margin-bottom: 6px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--paper-2);
	box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
	transition: box-shadow 0.3s var(--ease);
}

.cat-rail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.6s var(--ease-out);
}

/* «همه»: the first four categories' photos as one quartered tile (a grid icon with fewer). */
.cat-rail__item--all .cat-rail__media {
	display: grid;
	place-items: center;
}

.cat-rail__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	width: 100%;
	height: 100%;
	background: var(--paper);
}

.cat-rail__collage img {
	min-width: 0;
	min-height: 0;
}

.cat-rail__media > .icon {
	width: 26px;
	height: 26px;
	color: var(--ink);
}

.cat-rail__item.is-active .cat-rail__media,
.cat-rail__item[aria-current="page"] .cat-rail__media {
	box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink);
}

@media (hover: hover) {
	.cat-rail__item:hover .cat-rail__media img {
		scale: 1.07;
	}
}

.cat-rail__name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.cat-rail__item.is-active .cat-rail__name,
.cat-rail__item[aria-current="page"] .cat-rail__name {
	font-weight: 700;
}

.cat-rail__count {
	color: var(--muted);
	font-size: 11px;
}

/* Shop: the filters — a sidebar beside the list from 1024px, a sheet below that. ----------- */

.shop-layout {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 3vw, 52px);
	scroll-margin-top: calc(var(--header-h) + 12px);
}

/* The sidebar has no scroll box of its own (the wheel always scrolls the page): it stays under
   the header while it fits; a taller one moves with the page until its end shows (zhingo.js). */
.shop-sidebar {
	position: relative;
}

.js .shop-sidebar {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	will-change: translate;
}

.shop-results {
	position: relative;
	min-width: 0;
}

/* Three cards a row beside the sidebar; two with large photos. */
@media (min-width: 1024px) {
	.shop-layout .products:is(ul, ol) {
		--cols: 3;
	}
}

/* The form. */
.filters {
	display: grid;
}

.filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
}

.filters__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}

.filters__clear {
	color: var(--muted);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.filters__clear[hidden] {
	display: none;
}

.facet {
	min-width: 0;
	margin: 0;
	padding: 14px 0 12px;
	border: 0;
	border-top: 1px solid var(--line);
}

/* A floated legend sits like a heading instead of breaking the fieldset's top line. */
.facet__title {
	float: inline-start;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.facet__title + * {
	clear: both;
}

.facet__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.facet__option,
.facet__switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	margin-inline: -6px;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.facet__option:not(.is-disabled):hover,
	.facet__switch:not(.is-disabled):hover {
		background: var(--paper-2);
	}
}

.facet__option.is-disabled,
.facet__switch.is-disabled {
	cursor: default;
	opacity: 0.42;
}

/* The real input stays in the page (keyboard, screen readers); the mark is what shows. */
.facet__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.facet__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--line-field);
	border-radius: 5px;
	background: var(--card);
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.facet__mark--radio {
	border-radius: 50%;
}

.facet__input:checked + .facet__mark {
	border-color: var(--ink);
	background: var(--ink);
}

.facet__input:checked + .facet__mark--checkbox::after {
	content: "";
	width: 9px;
	height: 5px;
	border: solid var(--paper);
	border-width: 0 0 2px 2px;
	rotate: -45deg;
	translate: 0 -1px;
}

.facet__input:checked + .facet__mark--radio {
	background: var(--card);
}

.facet__input:checked + .facet__mark--radio::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink);
}

.facet__input:focus-visible + .facet__mark,
.facet__input:focus-visible ~ .facet__track {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.facet__label {
	flex: 1;
	min-width: 0;
	line-height: 1.5;
}

.facet__label small {
	margin-inline-start: 4px;
	color: var(--muted);
	font-size: 12px;
}

.facet__count {
	flex: none;
	min-width: 2.2em;
	color: var(--muted);
	font-size: 12px;
	text-align: end;
}

/* «Only products in stock»: a switch. */
.facet--stock {
	padding-block: 12px;
}

.facet__switch .facet__label {
	font-weight: 500;
}

.facet__track {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: rgb(38 35 42 / 0.55);
	transition: background-color 0.2s var(--ease);
}

.facet__track::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
	transition: inset-inline-start 0.2s var(--ease);
}

.facet__input:checked ~ .facet__track {
	background: var(--ink);
}

.facet__input:checked ~ .facet__track::after {
	inset-inline-start: 19px;
}

.filters__actions {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.filters__actions .button {
	min-height: 50px;
	padding-inline: 20px;
}

.filters__apply[disabled] {
	opacity: 0.5;
	cursor: default;
}

.filters__apply.is-loading {
	opacity: 0.75;
}

/* Beside the list the choices apply as they are made: no buttons. */
.js .shop-sidebar .filters__actions {
	display: none;
}

/* In the sheet: its own title; the buttons stay at the bottom. */
.filters-drawer .filters__head {
	display: none;
}

.filters-drawer .facet:first-of-type {
	border-top: 0;
}

.filters-drawer .facet__option,
.filters-drawer .facet__switch {
	min-height: 46px;
}

.filters-drawer .drawer__body {
	padding-bottom: 0;
}

.filters-drawer .filters__actions {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin-inline: -24px;
	padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
	background: var(--paper);
}

/* The toolbar: the count, the order and the grid size; on narrower screens «Filters» first. */
.shop-toolbar--zhingo {
	margin-bottom: 18px;
}

.shop-toolbar__count {
	min-width: 0;
}

.filters-button,
.filters-fab {
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.filters-button {
	display: none;
}

.filters-button .icon,
.filters-fab .icon {
	width: 18px;
	height: 18px;
}

.filters-button__badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font-size: 12px;
	line-height: 1;
}

.filters-button__badge:empty {
	display: none;
}

/* Further down the list on a phone, «Filters» floats above the tab bar. */
.filters-fab {
	position: fixed;
	z-index: 44;
	bottom: calc(24px + env(safe-area-inset-bottom));
	left: 50%;
	display: inline-flex;
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
	box-shadow: 0 16px 34px -14px rgb(38 35 42 / 0.6);
	translate: -50% 0;
	animation: stage-rise 0.4s var(--ease-out);
}

.filters-fab .filters-button__badge {
	background: var(--paper);
	color: var(--ink);
}

.filters-fab[hidden] {
	display: none;
}

@media (max-width: 900px) {
	.filters-fab {
		bottom: calc(10px + 66px + 14px + env(safe-area-inset-bottom));
	}
}

.shop-chips:empty {
	display: none;
}

.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.chip--remove {
	height: 34px;
	border-color: transparent;
	background: var(--plum-tint);
	color: var(--plum);
	font-size: 13px;
	white-space: nowrap;
}

.chip--remove .icon {
	width: 14px;
	height: 14px;
}

.active-filters__clear {
	padding: 0 6px;
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* While a new list is on its way: the old one fades, a thin line runs above it. */
.shop-list {
	transition: opacity 0.25s var(--ease);
}

[data-shop].is-loading .shop-list {
	opacity: 0.45;
	pointer-events: none;
}

[data-shop].is-loading .shop-results::before {
	content: "";
	position: absolute;
	top: -2px;
	inset-inline: 0;
	z-index: 2;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--plum), transparent) no-repeat;
	background-size: 40% 100%;
	animation: shop-loading 1s linear infinite;
}

@keyframes shop-loading {
	from {
		background-position: -40% 0;
	}

	to {
		background-position: 140% 0;
	}
}

@media (max-width: 1023px) {
	.shop-layout {
		display: block;
	}

	.js .shop-sidebar {
		display: none;
	}

	.no-js .shop-sidebar {
		position: static;
		max-height: none;
		margin-bottom: 24px;
	}

	.js .filters-button {
		display: inline-flex;
		flex: none;
		padding-inline: 14px;
	}

	/* «Filters», the order and the grid size in one row. */
	.shop-toolbar--zhingo {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.shop-toolbar__count {
		display: none;
	}

	.shop-toolbar--zhingo .shop-toolbar__actions {
		flex: 1;
		justify-content: flex-end;
		gap: 8px;
		width: auto;
		min-width: 0;
	}

	.shop-toolbar__order {
		flex: 0 1 220px;
		min-width: 0;
	}

	.shop-toolbar__order :is(.sort-form, .select-wrap, select) {
		width: 100%;
		min-width: 0;
	}

	.shop-toolbar__order select {
		min-height: 44px;
		text-overflow: ellipsis;
	}

	.shop-toolbar--zhingo .grid-toggle {
		flex: none;
	}

	.shop-toolbar--zhingo .grid-toggle button {
		width: 36px;
		height: 36px;
	}

	/* On a phone the chips scroll sideways in one row. */
	.active-filters {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}
}

@media (min-width: 1024px) {
	.filters-fab {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.shop-toolbar--zhingo .sort-form__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters-fab,
	[data-shop].is-loading .shop-results::before {
		animation: none;
	}
}

/* Blog: a few stories side by side; more get the wide first one. ------------------------- */

@media (min-width: 600px) {
	.blog-grid--few {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 1040px;
		margin-inline: auto;
	}
}


/* Product page: the spec line right under the name (on phones too, where the theme moves
   everything it doesn't know after the buy button), the code as a quiet tag beside it. */
.product-spec__code {
	padding: 0 10px;
	border-radius: 999px;
	background: var(--paper-2);
	font-size: 12px;
	line-height: 2;
	white-space: nowrap;
}

@media (max-width: 899px) {
	.product-summary > .product-spec {
		order: 0;
		gap: 8px 10px;
		margin: 2px 0 14px;
		font-size: 14.5px;
		line-height: 1.9;
	}
}

/* Search suggestions: the spec under the name, as on the cards. */
.search-hit__spec {
	display: block;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.7;
}

/* A sold product's page: the closest products still in the store, under the price. */
.similar-now {
	margin: 4px 0 22px;
	padding: 18px;
	border-radius: var(--r-card);
	background: var(--paper-2);
}

.similar-now__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

.similar-now__text {
	margin: 2px 0 12px;
	color: var(--muted);
	font-size: 13px;
}

.similar-now__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.similar-now__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	transition: box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
	.similar-now__item:hover {
		box-shadow: var(--shadow);
	}
}

.similar-now__media img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
}

.similar-now__body {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.similar-now__name {
	font-size: 14px;
	font-weight: 500;
}

.similar-now__spec {
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.similar-now__price {
	font-size: 13px;
	font-weight: 600;
}

.similar-now__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
}

.similar-now__more .icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 899px) {
	.product-summary > .similar-now {
		order: 1;
	}
}

/* Product cards: a clean photo, the words under it. ----------------------------------------- */

.product-card__media {
	border-radius: var(--r-card);
}

/* «ناموجود»: a quiet line above the name instead of a badge on the photo, with how
   many are in stock at its other end (the product page's green dot). */
.product-card__tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 10px;
	margin: 0;
	color: var(--plum);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
}

.product-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ink-2);
	font-weight: 500;
	white-space: nowrap;
}

.product-card__stock::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
}

.product-card__tag--off {
	color: var(--muted);
}

.product-card__body {
	gap: 2px;
	padding-top: 12px;
}

.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.product-card__spec {
	display: -webkit-box;
	margin: 0 0 4px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.product-card__price {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

/* Sold products stay in the list (after the ones that can be bought) but step back. */
.product-card.outofstock .product-card__media {
	opacity: 0.7;
	filter: grayscale(0.35);
}

.product-card.outofstock .product-card__price {
	color: var(--muted);
	font-weight: 400;
}

/* The heart: on wide screens when the card is pointed at, focused or the product is saved. */
@media (hover: hover) {
	.card-wish {
		opacity: 0;
		translate: 0 -4px;
		transition: opacity 0.25s var(--ease), translate 0.35s var(--ease-out), background-color 0.2s, color 0.2s;
	}

	.product-card:hover .card-wish,
	.product-card:focus-within .card-wish,
	.card-wish.is-saved {
		opacity: 1;
		translate: 0 0;
	}
}

/* On phones: a smaller heart, and no «+» on the photo (products are chosen on their page). */
@media (hover: none) {
	.card-wish {
		top: 6px;
		inset-inline-end: 6px;
		width: 34px;
		height: 34px;
		background: rgb(255 255 255 / 0.85);
	}

	.card-wish .icon {
		width: 17px;
		height: 17px;
	}

	.card-plus {
		display: none !important;
	}
}

@media (max-width: 760px) {
	.product-card__title {
		font-size: 14px;
	}
}

/* Cards in a row: the body fills the card and the price sits at its bottom, so a row's prices
   line up whatever the names and specs above them. */
.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.product-card__body > .product-card__price {
	margin-top: auto;
}

/* «Show more» under the list; the page links stay below it. */
.shop-tail {
	display: grid;
	justify-items: center;
	gap: 22px;
	margin-top: clamp(40px, 4.4vw, 64px);
}

.load-more {
	display: grid;
	justify-items: center;
	gap: 8px;
}

.load-more__button {
	min-width: min(280px, 80vw);
}

.load-more__button.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.load-more__note {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

@media (max-width: 760px) {
	.cat-rail__item {
		width: 76px;
	}

	.cat-rail__media {
		width: 60px;
		height: 60px;
	}

	.shop-hero__title {
		font-size: 28px;
	}

	.shop-hero .term-description,
	.shop-hero .page-description {
		font-size: 14px;
	}
}

/* Product page: calmer type sizes. ---------------------------------------------------------- */

.product_title {
	font-size: clamp(26px, 1.6rem + 0.8vw, 36px);
	font-weight: 400;
	line-height: 1.45;
}

.related > h2,
.up-sells > h2,
.cross-sells > h2,
.recently-viewed > h2 {
	font-size: clamp(22px, 1.25rem + 0.9vw, 32px);
	font-weight: 300;
}

/* Photos full screen: on the paper, the photo as large as it fits, zoom into the details. */
.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--paper);
	color: var(--ink);
}

.lightbox[open] {
	display: block;
	animation: stage-rise 0.35s var(--ease-out);
}

.lightbox::backdrop {
	background: var(--paper);
}

/* One cell the size of the stage, so the photo's max-height has something to measure against (on
   wide screens a tall photo ran past the stage and lost its bottom). */
.lightbox__stage {
	position: absolute;
	inset: 64px 0;
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	overflow: hidden;
	touch-action: none;
}

.lightbox__image {
	max-width: min(100% - 32px, 1400px);
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: 0 0;
	transition: transform 0.35s var(--ease-out);
}

/* While fingers or the mouse move it, the photo follows without easing. */
.lightbox.is-moving .lightbox__image {
	transition: none;
}

.lightbox.is-zoomed .lightbox__image {
	cursor: zoom-out;
}

/* Said once, the first time the photos open: how to zoom. */
.lightbox__hint {
	position: absolute;
	z-index: 2;
	bottom: 76px;
	left: 50%;
	margin: 0;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgb(38 34 31 / 0.88);
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	translate: -50% 8px;
	pointer-events: none;
	transition: opacity 0.3s var(--ease), translate 0.4s var(--ease-out);
}

.lightbox__hint.is-shown {
	opacity: 1;
	translate: -50% 0;
}

.lightbox__count {
	position: absolute;
	bottom: 22px;
	inset-inline: 0;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	text-align: center;
	pointer-events: none;
}

.lightbox__button {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--card);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

@media (hover: hover) {
	.lightbox__button:hover {
		border-color: var(--ink);
	}
}

.lightbox__button .icon {
	width: 20px;
	height: 20px;
}

.lightbox__close {
	top: 10px;
	inset-inline-end: 12px;
}

.lightbox__prev,
.lightbox__next {
	top: 50%;
	translate: 0 -50%;
}

.lightbox__prev {
	inset-inline-start: 16px;
}

.lightbox__next {
	inset-inline-end: 16px;
}

.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next {
	display: none;
}

/* On phones the arrows sit at the bottom, beside the count, out of the photo's way; the photo
   takes the whole width. */
@media (max-width: 760px) {
	.lightbox__stage {
		inset: 56px 0 72px;
	}

	.lightbox__image {
		max-width: 100%;
	}

	.lightbox__hint {
		bottom: 84px;
	}

	.lightbox__prev,
	.lightbox__next {
		top: auto;
		bottom: 12px;
		translate: none;
	}
}

.woocommerce-product-gallery__image > a {
	cursor: zoom-in;
}

/* Product details: the attributes and the code and category rows read as one list (the table's
   cells took the page text's padding and bold, the rows under it had neither): the label in muted
   text at the reading edge, the value beside it, a hairline between rows. */
.product-accordion__panel .woocommerce-product-attributes {
	margin: 0;
}

.product-accordion__panel .woocommerce-product-attributes :is(th, td) {
	padding: 11px 0;
	font-weight: 400;
}

.product-accordion__panel .woocommerce-product-attributes th {
	width: 38%;
	font-weight: 500;
}

.product-accordion__panel .product_meta {
	margin-top: 0;
}

.product-accordion__panel .meta-list {
	gap: 0;
}

.product-accordion__panel .meta-list > div {
	display: grid;
	grid-template-columns: 38% minmax(0, 1fr);
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.product-accordion__panel .meta-list > div:last-child {
	border-bottom: 0;
}

.product-accordion__panel .meta-list dt {
	min-width: 0;
	font-weight: 500;
}

/* Today's deals: the section's clock, the line under a product's price, the cards' tag. */
.deals__clock {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font-variant-numeric: tabular-nums;
}

.deals__clock-time {
	direction: ltr;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.deals__clock-label {
	color: rgb(255 248 250 / 0.75);
	font-size: 13px;
}

.deal-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: -4px 0 14px;
	color: #b42318;
	font-size: 14px;
}

.deal-line__clock {
	color: var(--ink-2);
	font-size: 13px;
}

.deal-line__clock [data-deal-end] {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.deals__notify-row {
	margin: clamp(18px, 2.4vw, 28px) 0 0;
	text-align: center;
}

.deals__notify[hidden] {
	display: none;
}

.deals__notify .icon {
	width: 18px;
	height: 18px;
}

.deals.is-over,
.deal-line.is-over {
	opacity: 0.55;
}

.product-card__deal {
	padding: 1px 8px;
	border-radius: 999px;
	background: #b42318;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

/* Honest urgency: a last one in the bag is held for no one until paid; other visitors' bags. */
.bag-note,
.demand-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	color: var(--ink-2);
	font-size: 12.5px;
	line-height: 1.7;
}

.demand-note {
	margin: -8px 0 14px;
	font-size: 13.5px;
	animation: stage-rise 0.4s var(--ease-out);
}

.bag-note.is-wanted,
.demand-note {
	color: var(--plum);
	font-weight: 500;
}

.bag-note.is-wanted::before,
.demand-note::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c2410c;
}

.talk-nudge__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.talk-nudge__bag {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: 10px;
	padding: 0 18px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.talk-nudge__bag[hidden] {
	display: none;
}

/* The slide-out bag: the remove button and the steppers get 44px to hit (34 and 32 before); a
   removed product can be put back for a few seconds. The remove button stays absolute (pinned to
   the item's corner), which already anchors its larger hit area. */
.mini-cart .qty-stepper__btn {
	position: relative;
}

.mini-cart__remove::after,
.mini-cart .qty-stepper__btn::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.mini-cart__undo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 0 0 10px;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--ink-2);
	font-size: 13.5px;
	animation: stage-rise 0.3s var(--ease-out);
}

/* The bag page while it updates: WooCommerce's white overlay (z-index 1000) stays inside the
   list and the totals instead of flashing over the header, the bars and the contact button. */
.woocommerce-cart-form,
.cart_totals,
.cart-collaterals {
	isolation: isolate;
}

.cart-item__qty-fixed {
	color: var(--ink-2);
	font-size: 13.5px;
	white-space: nowrap;
}

.cart-item__qty-note {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
}

/* Sold: the price quietly (at full weight it looked buyable). */
.product-card.outofstock .product-card__price,
.product.outofstock .product-summary > .price {
	color: var(--muted);
	font-weight: 400;
}

/* A product already in the bag: «۱ عدد از این قطعه در سبد شماست · دیدن سبد» under the buy row, and
   at the maximum the button itself opens the bag (outlined, with a tick). */
.in-bag-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 10px 0 0;
	color: var(--ink-2);
	font-size: 13.5px;
}

.link-button {
	padding: 8px 2px;
	border: 0;
	background: none;
	color: var(--plum);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.single_add_to_cart_button.is-in-bag {
	border-color: var(--ink);
	background: var(--card);
	color: var(--ink);
}

.buy-row .quantity[hidden],
.checkout-steps[hidden] {
	display: none;
}

/* Contact: the channels are cards, not an article's list (its 1.4em indent put them out of line
   with the form), and the address is a card beside them. */
.entry-content ul.contact__channels {
	padding: 0;
}

.contact__address {
	align-items: center;
	min-height: 76px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
}

/* Directions, at the card's end. */
.contact__map {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-inline-start: auto;
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

/* Shop on phones: the categories' row no taller than two lines of name (one long name made every
   tile tall and left a band under the row); no «خانه / فروشگاه» on the shop itself (the tab bar
   says it), so the products start higher. */
.cat-rail__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 760px) {
	.cat-nav {
		margin-bottom: 4px;
	}

	.woocommerce-shop:not(.search) .shop-hero :is(.breadcrumb, .woocommerce-breadcrumb) {
		display: none;
	}
}

/* Fingers: 44px to hit for the cards' heart, the grid toggle and «پاک کردن» (34, 36 and 20 before),
   without changing how they look. */
.card-wish::after,
.grid-toggle button::after,
.filters__clear::after,
.active-filters__clear::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.grid-toggle button,
.filters__clear,
.active-filters__clear {
	position: relative;
}

.filters__clear::after,
.active-filters__clear::after {
	inset: -12px -6px;
}

/* The grid toggle's pictures: two or four per row on wide screens, one or two on phones. */
.grid-icon--narrow {
	display: none;
}

@media (max-width: 760px) {
	.grid-icon--wide {
		display: none;
	}

	.grid-icon--narrow {
		display: inline-block;
	}
}

/* An empty search: the message right under the title, ways on, the newest products; the toolbar,
   the categories' row, the sidebar and the floating filter button step aside (an empty list of
   filters keeps them: they are how to widen it). */
.shop-main:has(.empty-state--search) :is(.cat-nav, .shop-toolbar, #shop-sidebar),
body:has(.empty-state--search) .filters-fab {
	display: none !important;
}

.shop-layout:has(.empty-state--search) {
	grid-template-columns: minmax(0, 1fr);
}

.empty-state__kinds {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.empty-state__ask {
	display: inline-flex;
	gap: 8px;
	margin-top: 18px;
}

.empty-state__ask .icon {
	width: 18px;
	height: 18px;
}

.empty-state__new {
	margin-top: clamp(36px, 5vw, 64px);
}

.empty-state__new-title {
	margin: 0 0 16px;
	font-size: clamp(20px, 1.1rem + 0.6vw, 26px);
	font-weight: 300;
}

/* The bag's suggestions are a slider that already reaches the screen's edges (the phone rule for
   suggestion rows pulled it out a second time, past them). */
.cart-suggestions .products.product-slider__track {
	margin-inline: 0;
}

/* Footer: closer to the page above it; the floating contact button gets room at the very end so
   it never covers the last line (the credit). */
.site-footer {
	margin-top: clamp(48px, 6vw, 72px);
}

.site-footer__bottom {
	padding-bottom: calc(22px + 80px + env(safe-area-inset-bottom));
}

@media (max-width: 900px) {
	.has-dock .site-footer__bottom {
		padding-bottom: calc(100px + 64px + env(safe-area-inset-bottom));
	}
}

/* Desktop menu: a sub-menu closed with Esc stays closed until its item is left (zhingo.js). */
.primary-nav li.is-dismissed > .sub-menu {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Short screens (landscape phones, zoomed in): the header scrolls away instead of covering it. */
@media (max-height: 420px) {
	.site-header {
		position: relative;
	}
}

/* The header and the phone's tab bar: no cut shadows. ------------------------------------------
   They stay out of the page-change snapshot (Safari cuts a captured element's shadow to its box);
   the page's own cross-fade carries them, the same on both pages. The header is opaque (no text
   showing through it) and gets a soft shadow once the page is scrolled; tucked away, it takes its
   line and shadow along (they stayed behind as a strip at the top of the screen). */
.site-header,
.dock {
	view-transition-name: none;
}

.site-header {
	background: var(--paper);
	transition: translate 0.45s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}

.site-header[data-scrolled] {
	border-color: transparent;
	box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgb(38 35 42 / 0.4);
}

.site-header[data-hidden] {
	translate: 0 calc(-100% - 24px);
}

/* The tab bar is opaque (the cards' text showed through at 97%) and is not itself clipped: its
   rounded clip is the inner .dock__clip, so its shadow is never cut, and the shadow ends inside the
   10px between the bar and the screen's edge. */
@media (max-width: 900px) {
	.dock {
		overflow: visible;
		background: var(--ink);
		box-shadow: 0 0 0 1px rgb(255 248 250 / 0.1), 0 -10px 26px -16px rgb(30 18 26 / 0.4), 0 4px 10px -6px rgb(30 18 26 / 0.45);
	}

	.dock__clip {
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: inherit;
	}

	.filters-fab {
		box-shadow: 0 8px 20px -10px rgb(30 18 26 / 0.6);
	}
}

/* «گفت‌وگو با ژینگو»: the launcher — a chat bubble (its dots type) with a live dot, a name and a
   line; it slides in after the page opens, shrinks to the avatar while the page scrolls. The sheet
   opens above it on wide screens, from the bottom on phones. ------------------------------------ */
.talk {
	position: fixed;
	z-index: 44;
	bottom: calc(24px + env(safe-area-inset-bottom));
	inset-inline-end: 24px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 320px;
	height: 64px;
	padding: 8px 8px 8px 22px;
	padding-inline: 8px 22px;
	border: 1px solid rgb(255 248 250 / 0.08);
	border-radius: 999px;
	background: linear-gradient(135deg, #3b2b21 0%, #26232a 60%);
	color: var(--paper);
	font: inherit;
	text-align: start;
	box-shadow: 0 10px 22px -12px rgb(30 18 26 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.06);
	cursor: pointer;
	transition: max-width 0.45s var(--ease-out), padding 0.45s var(--ease-out), gap 0.45s var(--ease-out), translate 0.4s var(--ease-out), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
	-webkit-tap-highlight-color: transparent;
	animation: talk-in 0.8s 1.4s var(--ease-out) backwards;
}

@keyframes talk-in {
	from {
		opacity: 0;
		translate: 0 24px;
		scale: 0.9;
	}
}

@media (hover: hover) {
	.talk:hover {
		translate: 0 -2px;
		box-shadow: 0 14px 26px -12px rgb(30 18 26 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.08);
	}
}

.talk:focus-visible {
	outline: 3px solid var(--plum-light);
	outline-offset: 3px;
}

.talk__avatar {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 0 0 3px rgb(255 248 250 / 0.12);
}

.talk__avatar .icon {
	width: 28px;
	height: 28px;
	color: var(--ink);
}

/* The bubble's dots type twice when the launcher arrives, and keep typing while it invites. */
.talk__avatar .icon-dot,
.talk-start__avatar .icon-dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: talk-type 1.1s 2.2s ease-in-out 2;
}

.talk__avatar .icon-dot:nth-of-type(2),
.talk-start__avatar .icon-dot:nth-of-type(2) {
	animation-delay: 2.35s;
}

.talk__avatar .icon-dot:nth-of-type(3),
.talk-start__avatar .icon-dot:nth-of-type(3) {
	animation-delay: 2.5s;
}

.talk.is-nudging .talk__avatar .icon-dot {
	animation-iteration-count: infinite;
}

@keyframes talk-type {
	0%,
	60%,
	100% {
		translate: 0 0;
		opacity: 1;
	}

	30% {
		translate: 0 -2.2px;
		opacity: 0.55;
	}
}

.talk__dot {
	position: absolute;
	bottom: 1px;
	inset-inline-end: 1px;
	width: 12px;
	height: 12px;
	border: 2px solid #2f2a26;
	border-radius: 50%;
	background: #9a958e;
}

.talk__dot.is-online {
	background: #2fbf71;
}

.talk__dot.is-online::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgb(47 191 113 / 0.55);
	animation: talk-live 2.4s ease-out infinite;
}

@keyframes talk-live {
	from {
		opacity: 1;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 2.2;
	}
}

.talk__text {
	display: grid;
	min-width: 0;
	overflow: hidden;
	transition: opacity 0.3s var(--ease), max-width 0.45s var(--ease-out);
	max-width: 220px;
}

.talk__label {
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.talk__sub {
	overflow: hidden;
	color: rgb(255 248 250 / 0.72);
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* While the page scrolls, and while «فیلترها» floats beside it: only the avatar. */
.talk.is-compact,
body:has(.filters-fab:not([hidden])) .talk {
	gap: 0;
	padding-inline: 8px;
}

.talk.is-compact .talk__text,
body:has(.filters-fab:not([hidden])) .talk__text {
	max-width: 0;
	opacity: 0;
}

.talk[aria-expanded="true"] {
	opacity: 0;
	pointer-events: none;
}

/* Waiting under a phone's home-page hero (zhingo.js): out of sight and out of the tab order;
   it rises in once the hero's product card has scrolled away. */
.talk.is-held {
	visibility: hidden;
	opacity: 0;
	translate: 0 24px;
	pointer-events: none;
	transition: opacity 0.3s var(--ease), translate 0.4s var(--ease-out), visibility 0s 0.4s;
}

/* Out of the way while typing (the on-screen keyboard). */
body.is-typing .talk {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 900px) {
	.talk {
		bottom: calc(10px + 66px + 14px + env(safe-area-inset-bottom));
		inset-inline-end: 12px;
		height: 54px;
		padding-inline: 6px 16px;
		gap: 10px;
	}

	.talk__avatar {
		width: 40px;
		height: 40px;
	}

	.talk__avatar .icon {
		width: 26px;
		height: 26px;
	}

	.talk__label {
		font-size: 13.5px;
	}

	.talk__sub {
		font-size: 11.5px;
	}

	.talk.is-compact,
	body:has(.filters-fab:not([hidden])) .talk {
		padding-inline: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.talk,
	.talk__avatar .icon-dot,
	.talk-start__avatar .icon-dot,
	.talk__dot.is-online::after {
		animation: none;
	}
}

.talk-sheet {
	position: fixed;
	inset: auto 24px calc(96px + env(safe-area-inset-bottom)) auto;
	width: min(380px, calc(100vw - 32px));
	max-height: min(640px, calc(100dvh - 140px));
	margin: 0;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 24px 60px -24px rgb(30 18 26 / 0.45);
}

[dir="rtl"] .talk-sheet {
	inset: auto auto calc(96px + env(safe-area-inset-bottom)) 24px;
}

.talk-sheet[open] {
	animation: stage-rise 0.35s var(--ease-out);
}

.talk-sheet::backdrop {
	background: rgb(30 18 26 / 0.18);
}

.talk-sheet__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 18px 6px;
}

.talk-sheet__mark .icon {
	width: 34px;
	height: 34px;
	color: var(--plum);
}

.talk-sheet__head > div {
	flex: 1;
	min-width: 0;
}

.talk-sheet__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

.talk-sheet__lead {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.8;
}

.talk-sheet__close {
	flex: none;
	margin-top: -6px;
	margin-inline-end: -8px;
}

.talk-sheet__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 10px 12px 14px;
	list-style: none;
}

.talk-sheet__list > li {
	animation: stage-rise 0.45s calc(0.05s + var(--i, 0) * 0.04s) var(--ease-out) backwards;
}

.talk-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 8px 12px;
	border-radius: 16px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
	.talk-option:hover {
		box-shadow: 0 0 0 1px var(--line-strong);
	}

	.talk-option:hover .talk-option__go {
		translate: calc(3px * var(--dir)) 0;
	}
}

.talk-option__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--plum);
}

.talk-option__icon .icon {
	width: 22px;
	height: 22px;
}

.talk-option__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.talk-option--whatsapp .talk-option__icon,
.talk-option--piece .talk-option__icon {
	color: #1f7a4d;
}

.talk-option__text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.talk-option__title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.6;
}

.talk-option__note {
	overflow: hidden;
	color: var(--muted);
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.talk-option__go {
	flex: none;
	color: var(--muted);
	transition: translate 0.3s var(--ease);
}

.talk-option__go .icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 600px) {
	.talk-sheet,
	[dir="rtl"] .talk-sheet {
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: 88dvh;
		border-width: 1px 0 0;
		border-radius: 26px 26px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.talk-sheet[open] {
		animation: talk-up 0.4s var(--ease-out);
	}

	.talk-option {
		min-height: 64px;
	}
}

@keyframes talk-up {
	from {
		translate: 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.talk,
	.talk-sheet[open],
	.talk-sheet__list > li {
		animation: none;
	}
}

/* The menu drawer: a search, the menu as rows that open in place, account and help, a call. -- */
.m-drawer .drawer__title {
	gap: 10px;
}

.m-drawer__mark .icon {
	width: 26px;
	height: 26px;
	color: var(--plum);
}

.m-menu {
	display: grid;
	gap: 18px;
	padding: 6px 20px 28px;
}

.m-menu__search {
	position: relative;
	display: flex;
	align-items: center;
}

.m-menu__search input {
	width: 100%;
	height: 48px;
	padding-inline: 16px 48px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	font-size: 16px;
}

.m-menu__search-go {
	position: absolute;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.m-menu__search-go .icon {
	width: 18px;
	height: 18px;
}

.m-menu__list,
.m-menu__sub,
.m-menu__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-menu__list > li {
	border-bottom: 1px solid var(--line);
}

.m-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.m-menu__link::-webkit-details-marker {
	display: none;
}

.m-menu__link[aria-current="page"] {
	color: var(--plum);
}

/* The icon itself turns for RTL (.icon--dir): it points forward, to the left. */
.m-menu__chevron {
	width: 18px;
	height: 18px;
	color: var(--muted);
}

/* «+» that turns into «−» when the group is open. */
.m-menu__toggle {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.m-menu__toggle::before,
.m-menu__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	right: 2px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--ink);
	transition: rotate 0.3s var(--ease);
}

.m-menu__toggle::after {
	rotate: 90deg;
}

.m-menu__group[open] .m-menu__toggle::after {
	rotate: 0deg;
}

.m-menu__group[open] > .m-menu__link {
	color: var(--plum);
}

.m-menu__sub {
	display: grid;
	gap: 2px;
	padding: 0 0 14px;
	animation: stage-rise 0.35s var(--ease-out);
}

.m-menu__sublink {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 4px 6px;
	border-radius: 12px;
	color: var(--ink-2);
	font-size: 15px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.m-menu__sublink:active {
	background: var(--paper-2);
}

.m-menu__sublink[aria-current="page"] {
	background: var(--paper-2);
	color: var(--ink);
	font-weight: 600;
}

.m-menu__sublink--all {
	color: var(--plum);
	font-weight: 600;
}

.m-menu__thumb {
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--line);
}

.m-menu__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.m-menu__subname {
	flex: 1;
	min-width: 0;
}

.m-menu__count {
	flex: none;
	color: var(--muted);
	font-size: 12px;
}

.m-menu__rows {
	display: grid;
	gap: 2px;
	padding: 6px;
	border-radius: var(--r-card);
	background: var(--paper-2);
}

.m-menu__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.m-menu__row[hidden] {
	display: none;
}

.m-menu__row:active {
	background: var(--card);
}

.m-menu__row .icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--plum);
}

.m-menu__row .wish-count {
	margin-inline-start: auto;
}

.m-menu__talk {
	display: grid;
	gap: 10px;
}

.m-menu__talk-title {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.m-menu__talk-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.m-menu__talk-actions .button {
	min-height: 50px;
	padding-inline: 14px;
}

.m-menu__talk-actions .icon {
	width: 18px;
	height: 18px;
}

.m-menu__whatsapp .icon {
	color: #1f7a4d;
}

.m-menu__insta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	color: var(--ink-2);
	font-size: 14px;
	text-decoration: none;
}

.m-menu__insta .icon {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.m-menu__sub {
		animation: none;
	}
}

/* The invitation beside «گفت‌وگو با ژینگو»: a chat bubble that types first. ------------------- */
.talk.is-nudging::before,
.talk.is-nudging::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--ink);
	border-radius: inherit;
	pointer-events: none;
	animation: talk-ring 1.8s var(--ease-out) 2;
}

.talk.is-nudging::after {
	animation-delay: 0.45s;
}

@keyframes talk-ring {
	from {
		opacity: 0.55;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 1.7;
	}
}

.talk-nudge {
	position: fixed;
	z-index: 44;
	bottom: calc(24px + 56px + 14px + env(safe-area-inset-bottom));
	inset-inline-end: 24px;
	width: min(320px, calc(100vw - 32px));
	padding: 14px 16px 14px;
	border: 1px solid var(--line);
	border-radius: 20px 20px 6px 20px;
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 18px 40px -18px rgb(30 18 26 / 0.45);
	transform-origin: bottom left;
	animation: talk-pop 0.45s var(--ease-out);
}

[dir="ltr"] .talk-nudge {
	border-radius: 20px 20px 20px 6px;
	transform-origin: bottom right;
}

.talk-nudge.is-leaving {
	opacity: 0;
	scale: 0.92;
	transition: opacity 0.25s var(--ease), scale 0.25s var(--ease);
}

@keyframes talk-pop {
	from {
		opacity: 0;
		scale: 0.85;
		translate: 0 10px;
	}
}

.talk-nudge__close {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.talk-nudge__from {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding-inline-end: 30px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

.talk-nudge__avatar svg {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--plum);
}

.talk-nudge__text {
	min-height: 26px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.9;
}

.talk-nudge__typing {
	display: inline-flex;
	gap: 4px;
	padding: 8px 10px;
	border-radius: 999px;
	background: var(--paper-2);
}

.talk-nudge__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
	animation: talk-dot 1s ease-in-out infinite;
}

.talk-nudge__typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.talk-nudge__typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes talk-dot {
	0%,
	60%,
	100% {
		opacity: 0.35;
		translate: 0 0;
	}

	30% {
		opacity: 1;
		translate: 0 -3px;
	}
}

.talk-nudge__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	animation: stage-rise 0.4s var(--ease-out);
}

.talk-nudge__actions[hidden] {
	display: none;
}

/* The invitation's one button; the quick questions and the box open on tap. */
.talk-nudge__reply {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: 10px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	animation: stage-rise 0.4s var(--ease-out);
}

.talk-nudge__reply[hidden] {
	display: none;
}

/* Phones: always the round button (it said its name over the cards after every scroll), no rings;
   on the bag page, which has its own bar and its prices at that side, none at all. */
@media (max-width: 900px) {
	.talk {
		gap: 0;
		padding-inline: 6px;
	}

	.talk .talk__text {
		max-width: 0;
		opacity: 0;
	}

	.talk.is-nudging::before,
	.talk.is-nudging::after {
		display: none;
	}

	.woocommerce-cart .talk {
		display: none;
	}
}

/* A note («added to the bag») has the bottom of the screen to itself. */
body:has(.toast.is-visible) .talk,
body:has(.toast.is-visible) .talk-nudge {
	opacity: 0;
	pointer-events: none;
}

/* Wide screens: once round, the name comes back while pointed at or focused. */
@media (hover: hover) and (min-width: 901px) {
	.talk.is-compact:hover,
	.talk.is-compact:focus-visible {
		gap: 12px;
		padding-inline: 8px 22px;
	}

	.talk.is-compact:hover .talk__text,
	.talk.is-compact:focus-visible .talk__text {
		max-width: 220px;
		opacity: 1;
	}
}

.talk-nudge__ask,
.talk-nudge__more {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.talk-nudge__ask {
	background: var(--ink);
	color: var(--paper);
}

.talk-nudge__ask[hidden] {
	display: none;
}

.talk-nudge__more {
	background: transparent;
	color: var(--ink);
}

@media (max-width: 900px) {
	.talk-nudge {
		bottom: calc(10px + 66px + 14px + 52px + 12px + env(safe-area-inset-bottom));
		inset-inline-end: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.talk.is-nudging::before,
	.talk.is-nudging::after,
	.talk-nudge,
	.talk-nudge__typing i,
	.talk-nudge__actions {
		animation: none;
	}

	.talk.is-nudging::before,
	.talk.is-nudging::after {
		display: none;
	}
}

/* While the «install the app» card is up (phones), the contact button and its invitation wait
   above it instead of under it. */
body:has(.install-card.is-visible) .talk,
body:has(.install-card.is-visible) .talk-nudge {
	translate: 0 calc(-1 * (var(--install-card-h, 76px) + 12px));
}

/* The chat in «گفت‌وگو با ژینگو». --------------------------------------------------------------- */
.talk-chat {
	display: grid;
	gap: 10px;
	padding: 4px 16px 6px;
}

.talk-chat__presence {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.talk-chat__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line-strong);
}

.talk-chat__presence.is-online {
	color: #1f7a4d;
}

.talk-chat__presence.is-online .talk-chat__dot {
	background: #1f9d5b;
	box-shadow: 0 0 0 3px rgb(31 157 91 / 0.18);
}

.talk-chat__thread {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: min(320px, 40dvh);
	margin: 0;
	padding: 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 16px;
	background: var(--paper-2);
	list-style: none;
}

.talk-chat__thread[hidden] {
	display: none;
}

.talk-msg {
	display: grid;
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 16px;
	background: var(--card);
}

.talk-msg--visitor {
	align-self: flex-start;
	border-end-start-radius: 4px;
	background: var(--ink);
	color: var(--paper);
}

.talk-msg--agent {
	align-self: flex-end;
	border-end-end-radius: 4px;
}

.talk-msg__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.talk-msg.is-sending {
	opacity: 0.6;
}

.talk-msg.is-failed {
	background: var(--danger-tint);
	color: var(--danger);
}

.talk-msg small {
	font-size: 11.5px;
}

.talk-chat__chips,
.talk-nudge__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.talk-chat__chips[hidden] {
	display: none;
}

.talk-chat__chip {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

@media (hover: hover) {
	.talk-chat__chip:hover {
		border-color: var(--ink);
	}
}

.talk-chat__compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 6px 6px 6px 6px;
	border: 1px solid var(--line-strong);
	border-radius: 24px;
	background: var(--card);
}

.talk-chat__compose:focus-within {
	border-color: var(--ink);
}

.talk-chat__compose textarea {
	flex: 1;
	min-height: 36px;
	max-height: 132px;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: none;
	outline: none;
}

.talk-chat__send {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.talk-chat__send .icon {
	width: 18px;
	height: 18px;
}

[dir="rtl"] .talk-chat__send .icon {
	scale: -1 1;
}

.talk-phone {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--plum-tint);
}

.talk-phone__label {
	color: var(--plum);
	font-size: 12.5px;
	line-height: 1.8;
}

.talk-phone__row {
	display: flex;
	gap: 6px;
}

.talk-phone__row input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	font-size: 15px;
}

.talk-phone__row .button {
	min-height: 40px;
	padding: 0 16px;
}

.talk-sheet__or {
	margin: 6px 16px 0;
	color: var(--muted);
	font-size: 12.5px;
}

/* The button: a count of answers waiting, and «سؤال داری؟» once invitations have been closed. */
.talk__badge {
	position: absolute;
	top: -4px;
	inset-inline-start: -4px;
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var(--paper);
	border-radius: 999px;
	background: #b32d2e;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}


/* The invitation's own little chat: suggestions, a line to write, then other ways. */
.talk-nudge__name {
	flex: 1;
}

.talk-nudge__online {
	color: #1f7a4d;
	font-size: 11.5px;
	font-weight: 600;
}

.talk-nudge__online::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-end: 4px;
	border-radius: 50%;
	background: #1f9d5b;
}

.talk-nudge__body {
	display: grid;
	gap: 10px;
	margin-top: 10px;
	animation: stage-rise 0.4s var(--ease-out);
}

.talk-nudge__body[hidden] {
	display: none;
}

.talk-nudge__compose {
	display: flex;
	gap: 6px;
}

.talk-nudge__compose[hidden] {
	display: none;
}

.talk-nudge__compose input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--paper);
	font-size: 15px;
}

.talk-nudge__compose button {
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.talk-nudge__body .talk-nudge__actions {
	margin-top: 0;
}

.talk-nudge__body .talk-nudge__ask {
	background: transparent;
	color: var(--ink);
}

/* The chat window («گفت‌وگو با ژینگو» → «گفت‌وگو با ژینگو» row). ------------------------------- */
.talk-start {
	display: flex;
	align-items: center;
	gap: 12px;
	width: calc(100% - 24px);
	margin: 6px 12px 0;
	padding: 14px;
	border: 0;
	border-radius: 18px;
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: translate 0.25s var(--ease-out);
}

@media (hover: hover) {
	.talk-start:hover {
		translate: 0 -1px;
	}

	.talk-start:hover .talk-start__go {
		translate: calc(4px * var(--dir)) 0;
	}
}

.talk-start__avatar {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(255 248 250 / 0.12);
}

.talk-start__avatar .icon {
	width: 28px;
	height: 28px;
	color: var(--paper);
}

.talk-start__avatar i {
	position: absolute;
	bottom: 1px;
	inset-inline-end: 1px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: #8c8f94;
}

.talk-start__avatar i.is-online {
	background: #2fbf71;
}

.talk-start__text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.talk-start__text strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

.talk-start__text span {
	color: rgb(255 248 250 / 0.75);
	font-size: 12.5px;
	line-height: 1.7;
}

.talk-start__go .icon {
	width: 20px;
	height: 20px;
	transition: translate 0.3s var(--ease);
}

.talk-sheet__or {
	margin: 14px 16px 2px;
}

/* In the chat, the sheet becomes a window: a header, the conversation, the line to write. */
.talk-sheet.is-chat {
	display: flex;
	flex-direction: column;
	height: min(620px, calc(100dvh - 140px));
	overflow: hidden;
}

.talk-sheet__home[hidden],
.tchat[hidden] {
	display: none;
}

.tchat {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.tchat__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--card);
}

.tchat__back,
.tchat__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.tchat__back .icon,
.tchat__close .icon {
	width: 20px;
	height: 20px;
}

@media (hover: hover) {
	.tchat__back:hover,
	.tchat__close:hover {
		background: var(--paper-2);
	}
}

.tchat__avatar {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--paper-2);
}

.tchat__avatar svg {
	width: 26px;
	height: 26px;
	color: var(--plum);
}

.tchat__head.is-online .tchat__avatar::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	width: 11px;
	height: 11px;
	border: 2px solid var(--card);
	border-radius: 50%;
	background: #2fbf71;
}

.tchat__who {
	flex: 1;
	min-width: 0;
}

.tchat__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.tchat__state {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.tchat__head.is-online .tchat__state {
	color: #1f7a4d;
}

.tchat__thread {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 16px 14px 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(circle at 20% 10%, rgb(214 36 94 / 0.04), transparent 40%),
		var(--paper);
	list-style: none;
}

.talk-msg {
	position: relative;
	display: grid;
	gap: 2px;
	max-width: 82%;
	padding: 8px 12px 6px;
	border-radius: 18px;
	animation: stage-rise 0.3s var(--ease-out);
}

.talk-msg--agent {
	align-self: flex-end;
	border-end-end-radius: 6px;
	background: var(--card);
	box-shadow: 0 1px 0 var(--line);
}

.talk-msg--visitor {
	align-self: flex-start;
	border-end-start-radius: 6px;
	background: var(--ink);
	color: var(--paper);
}

.talk-msg__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.85;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.talk-msg__meta {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}

.talk-msg--visitor .talk-msg__meta {
	color: rgb(255 248 250 / 0.65);
}

.talk-msg__receipt::before {
	content: "· ";
}

.talk-msg--hello .talk-msg__meta {
	display: none;
}

.talk-msg.is-sending {
	opacity: 0.6;
}

.talk-msg.is-failed {
	background: var(--danger-tint);
	color: var(--danger);
}

.talk-msg__error {
	font-size: 11.5px;
	line-height: 1.6;
}

.tchat__typing {
	align-self: flex-end;
}

.tchat__typing[hidden] {
	display: none;
}

.tchat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 10px;
	background: var(--paper);
}

.tchat__chips[hidden] {
	display: none;
}

.tchat .talk-phone {
	margin: 0 12px 10px;
}

.talk-phone__skip {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 20px;
	cursor: pointer;
}

.tchat__compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--card);
}

.tchat__compose textarea {
	flex: 1;
	min-height: 44px;
	max-height: 120px;
	padding: 10px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: var(--paper);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	resize: none;
}

.tchat__compose textarea:focus {
	border-color: var(--ink);
	outline: none;
}

.tchat__send {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.tchat__send .icon {
	width: 20px;
	height: 20px;
}

[dir="rtl"] .tchat__send .icon {
	scale: -1 1;
}

@media (max-width: 600px) {
	.talk-sheet.is-chat {
		height: 92dvh;
	}

	.talk-msg {
		max-width: 86%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.talk-msg {
		animation: none;
	}
}

/* «خودت را معرفی کن» in the chat (optional). */
.talk-me-holder {
	align-self: stretch;
	margin: 4px 0;
}

.talk-me {
	display: grid;
	gap: 8px;
	padding: 12px;
	border: 1px solid rgb(214 36 94 / 0.16);
	border-radius: 18px;
	background: var(--plum-tint);
}

.talk-me__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.talk-me__title {
	margin: 0;
	color: var(--plum);
	font-size: 13.5px;
	font-weight: 600;
}

.talk-me__skip {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 20px;
	cursor: pointer;
}

.talk-me__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.talk-me__fields label {
	display: grid;
	gap: 4px;
	color: var(--ink-2);
	font-size: 12px;
}

.talk-me__fields input {
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: var(--card);
	font-size: 16px;
}

.talk-me__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--ink-2);
	font-size: 12.5px;
	line-height: 1.8;
	cursor: pointer;
}

.talk-me__consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--ink);
}

.talk-me__error {
	margin: 0;
	color: var(--danger);
	font-size: 12px;
}

.talk-me__error[hidden] {
	display: none;
}

.talk-me__save {
	min-height: 40px;
	justify-self: start;
	padding-inline: 22px;
}

.talk-note {
	align-self: center;
	margin: 4px 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--muted);
	font-size: 12px;
}

@media (max-width: 340px) {
	.talk-me__fields {
		grid-template-columns: 1fr;
	}
}

/* «وقتی ژینگو جواب داد خبرم کن» in the chat. */
.talk-push {
	align-self: center;
	margin: 2px 0;
}

.talk-push__ask {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.talk-push__ask .icon {
	width: 18px;
	height: 18px;
	color: var(--plum);
}

.talk-push__ask:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Live search: the categories most of the matches are in, under the results' heading; the match
   marked with the arrow keys looks like a hovered one, with a ring. */
.search-results__kinds {
	margin: 0 0 14px;
}

.search-results [role="option"].is-active .search-hit {
	background: var(--paper-2);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* Desktop menu: the small button beside a parent item that opens its sub-menu from the keyboard
   (and says there is one); hover opens it too. */
.primary-nav .menu-item-has-children {
	display: flex;
	align-items: center;
	gap: 2px;
}

.sub-toggle {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.sub-toggle .icon {
	width: 14px;
	height: 14px;
	transition: rotate 0.2s var(--ease);
}

.primary-nav li.is-open > .sub-toggle {
	color: var(--ink);
}

.primary-nav li.is-open > .sub-toggle .icon {
	rotate: 180deg;
}

@media (hover: hover) {
	.sub-toggle:hover {
		color: var(--ink);
	}
}

/* Wishlist: each card's own «add to bag» under its price (phones have no «+» on cards). */
.product-card__add {
	align-self: stretch;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	min-height: 44px;
}

.product-card__add .icon {
	width: 17px;
	height: 17px;
}

.wishlist-page .page-hero__text a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Customer club («باشگاه ژینگو», Zhingo Commerce) -------------------------------------------------
   The member's card is in the tier's colour (blush, rose, deep plum) with a soft sheen; one
   count-up of the points and one line drawing in (zhingo.js), nothing else moves. */

.club {
	display: grid;
	gap: 22px;
}

.club-notes {
	display: grid;
	gap: 8px;
}

.club-note,
.club-debt,
.club-empty {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--plum-tint);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.8;
}

.club-debt,
.club-empty {
	background: var(--paper-2);
	color: var(--ink-2);
}

.club-note .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--plum);
}

.club-card {
	--tone: #ffe3ec;
	--ring: #f6bfd1;
	--text: #26232a;
	--soft: rgb(38 35 42 / 0.74);
	--rule: rgb(38 35 42 / 0.18);
	--fill: #26232a;
	position: relative;
	display: grid;
	gap: 4px;
	width: 100%;
	max-width: 440px;
	padding: 22px 22px 16px;
	border-radius: var(--r-panel);
	background:
		radial-gradient(140% 90% at 20% 0%, rgb(255 255 255 / 0.32), transparent 60%),
		linear-gradient(135deg, var(--tone), var(--ring));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 18px 40px -26px rgb(38 35 42 / 0.5);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.club-card--silver {
	--tone: #f45d8f;
	--ring: #c81d56;
	--text: #fff6f9;
	--soft: rgb(255 246 249 / 0.8);
	--rule: rgb(255 246 249 / 0.22);
	--fill: #fff6f9;
}

.club-card--gold {
	--tone: #5b1a3a;
	--ring: #2a0d1f;
	--text: #fff6f9;
	--soft: rgb(255 246 249 / 0.8);
	--rule: rgb(245 179 200 / 0.3);
	--fill: #f5b3c8;
}

.club-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.club-card__brand {
	font-size: 14px;
	font-weight: 700;
}

.club-card__tier {
	padding: 2px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--text) 14%, transparent);
	font-size: 12.5px;
	font-weight: 700;
}

.club-card__balance {
	margin: 14px 0 0;
	color: var(--soft);
	font-size: 15px;
}

.club-card__balance strong {
	display: inline-block;
	margin-inline-end: 6px;
	color: var(--text);
	font-size: clamp(38px, 10vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.club-card__value,
.club-card__next {
	margin: 0;
	color: var(--soft);
	font-size: 13.5px;
}

.club-card__facts {
	display: grid;
	gap: 4px;
	margin: 10px 0 0;
	padding: 0;
	color: var(--soft);
	font-size: 12.5px;
	list-style: none;
}

.club-card__facts li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.club-card__facts .icon {
	flex: none;
	width: 15px;
	height: 15px;
}

.club-card__progress {
	margin-top: 12px;
}

.club-card__line {
	display: block;
	height: 2px;
	margin-bottom: 6px;
	border-radius: 2px;
	background: var(--rule);
	overflow: hidden;
}

.club-card__line > span {
	display: block;
	width: var(--progress, 0%);
	height: 100%;
	background: var(--fill);
	transform-origin: right;
	animation: club-draw 0.9s 0.2s var(--ease-out) backwards;
}

[dir="ltr"] .club-card__line > span {
	transform-origin: left;
}

@keyframes club-draw {
	from {
		scale: 0 1;
	}
}

.club-card__next--top {
	margin-top: 10px;
}

.club-card__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--rule);
	color: var(--soft);
	font-size: 12px;
}

.club-card__code {
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
}

.club-card__note {
	margin: -12px 0 0;
	color: var(--muted);
	font-size: 12.5px;
}

.club-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.club-panel {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
}

:is(.club-panel, .club-invite, .club-history) h3 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.club-panel p {
	margin: 0 0 8px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

.club-panel .club-panel__next {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.club-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.8;
}

.club-list .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--plum);
}

.club-list a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.club-invite {
	padding: 18px;
	border-radius: 16px;
	background: var(--plum-tint);
}

.club-invite p {
	margin: 0 0 12px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

.club-invite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.club-invite__actions .button {
	gap: 8px;
	min-height: 44px;
}

.club-invite__actions .icon {
	width: 17px;
	height: 17px;
}

.club-invite .club-invite__count {
	color: var(--ink);
	font-weight: 600;
}

.club-invite .club-invite__note {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.club-history__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 8px;
}

.club-history__head h3 {
	margin: 0;
}

.club-history__filter {
	display: flex;
	gap: 6px;
}

.club-history__filter a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 13px;
	text-decoration: none;
}

.club-history__filter a[aria-current="page"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.club-history__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.club-history__list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "what points" "when points";
	gap: 2px 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.club-history__what {
	grid-area: what;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.7;
}

.club-history__what small {
	display: block;
	color: var(--muted);
	font-size: 12px;
}

.club-history__when {
	grid-area: when;
	color: var(--muted);
	font-size: 12.5px;
}

.club-history__points {
	grid-area: points;
	align-self: center;
	color: var(--success);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.club-history__points.is-minus,
.club-history__list li.is-pending .club-history__points {
	color: var(--muted);
}

.club-history__pages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	color: var(--muted);
	font-size: 13px;
}

.club-history__empty {
	color: var(--muted);
	font-size: 14px;
}

.club-history__terms {
	margin: 14px 0 0;
	font-size: 13px;
}

.club-history__terms a,
.club-redeem__terms {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* /club/ and its rules. */
.club-info {
	display: grid;
	gap: 18px;
	font-size: 15px;
	line-height: 1.9;
}

.club-info h2 {
	margin: 18px 0 0;
	font-size: clamp(20px, 1.2rem + 0.6vw, 26px);
	font-weight: 300;
}

.club-info__intro {
	display: grid;
	justify-items: start;
	gap: 14px;
}

.club-info__lead {
	max-width: 60ch;
	margin: 0;
	color: var(--ink-2);
	font-size: clamp(16px, 1rem + 0.3vw, 18px);
	line-height: 2;
}

.club-info__me {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 16px;
	border-radius: 14px;
	background: var(--plum-tint);
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
}

.club-info__me .icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--plum);
}

.club-info__steps,
.club-info__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-info__steps li,
.club-tier {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
}

.club-info__step {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font-size: 14px;
	font-weight: 700;
}

.club-info__steps strong,
.club-tier__name {
	font-size: 16px;
}

.club-info__steps li > span:last-child {
	color: var(--ink-2);
	font-size: 14px;
}

.club-tier__swatch {
	--tone: #ffe3ec;
	--ring: #f6bfd1;
	height: 10px;
	margin-bottom: 4px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--tone), var(--ring));
}

.club-tier--silver .club-tier__swatch {
	--tone: #f45d8f;
	--ring: #c81d56;
}

.club-tier--gold .club-tier__swatch {
	--tone: #5b1a3a;
	--ring: #2a0d1f;
}

.club-tier__from,
.club-info__note,
.club-terms__updated {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.club-tier .club-list {
	margin-top: 6px;
}

.club-info__perks {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-info__perks li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--paper-2);
}

.club-info__perks .icon {
	grid-row: span 2;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	color: var(--plum);
}

.club-info__perks span {
	color: var(--ink-2);
	font-size: 14px;
}

.club-info__faq {
	display: grid;
	gap: 8px;
}

.club-info__faq details {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
}

.club-info__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.club-info__faq summary::-webkit-details-marker {
	display: none;
}

.club-info__faq summary::after {
	content: "+";
	color: var(--muted);
	font-size: 20px;
	font-weight: 300;
}

.club-info__faq details[open] summary::after {
	content: "−";
}

.club-info__faq p {
	margin: 0;
	padding: 0 16px 14px;
	color: var(--ink-2);
	font-size: 14px;
}

.club-info__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 0;
}

.club-info__soon {
	padding: 18px;
	border-radius: 14px;
	background: var(--paper-2);
	color: var(--muted);
	text-align: center;
}

.club-terms__list {
	display: grid;
	gap: 12px;
	margin: 0 0 18px;
	padding-inline-start: 1.4em;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 2;
}

/* Checkout: the box says why points can't be used yet (no button then), and links the rules. */
.club-redeem:is(.club-redeem--below, .club-redeem--pending, .club-redeem--personal) {
	grid-template-columns: auto minmax(0, 1fr);
	background: var(--paper-2);
}

.club-redeem__terms {
	display: inline-block;
	margin-top: 2px;
	font-size: 12.5px;
}

/* The thank-you page: what the order will bring, and the invitation. */
.club-thanks {
	display: grid;
	gap: 10px;
	margin: 18px 0;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--plum-tint);
}

.club-thanks p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	color: var(--ink);
	font-size: 14.5px;
	line-height: 1.8;
}

.club-thanks .icon {
	width: 18px;
	height: 18px;
	color: var(--plum);
}

.club-thanks__invite {
	justify-content: space-between;
}

.club-review-hint {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--plum-tint);
	color: var(--ink);
	font-size: 13.5px;
}

/* Members first: the product says who may buy it now, and when everyone may. */
.club-early {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 12px 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--plum-tint);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.8;
}

.club-early .icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--plum);
}

.club-early strong {
	display: block;
	font-size: 15px;
}

.club-early p {
	margin: 2px 0 6px;
	color: var(--ink-2);
}

.club-early a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.club-early--member {
	padding: 10px 14px;
}

.product-card__early {
	color: var(--plum);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.club-card__line > span {
		animation: none;
	}
}

/* Product page: the stock line and «in other bags» read as one short status under the price —
   the note right under the stock line (on phones it followed the buy button, half hidden by its
   edge), each dot on its first line when a line wraps, a little room after the club's chip. */
.product-summary > .stock,
.demand-note {
	align-items: flex-start;
}

.product-summary > .stock::before,
.demand-note::before {
	margin-top: 0.62em;
}

.product-summary > .club-hint {
	margin-bottom: 10px;
}

@media (max-width: 899px) {
	.product-summary > .demand-note {
		order: 1;
	}
}

/* The club's own lists sit on the page's edge (the page text indents its lists). */
.entry-content :is(.club-info__steps, .club-info__perks, .club-list) {
	margin-inline: 0;
	padding: 0;
}

.entry-content :is(.club-info__steps, .club-info__perks, .club-list) > li {
	margin: 0;
}

.entry-content .club-terms__list {
	padding-inline-start: 1.4em;
}

/* Brands on cards and on the product page: the brand above the name, in the accent colour. ----- */

.product-card__brand {
	margin: 0;
	color: var(--plum);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.7;
}

.product-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	color: var(--plum);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.product-brand__latin {
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (hover: hover) {
	.product-brand:hover {
		text-decoration: underline;
		text-underline-offset: 5px;
	}
}

.similar-now__brand {
	display: block;
	color: var(--plum);
	font-size: 12px;
	font-weight: 600;
}

/* Filters: a brand's Latin name, quietly, after its Persian one. */
.facet__label small[dir="ltr"] {
	margin-inline-start: 4px;
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The brands page ([zhingo_brands]): a card per brand, its logo on top; wider than the page's text.
   ------------------------------------------------------------------------------------------------ */

.brand-index {
	width: min(100vw - 2 * var(--gutter), 1120px);
	margin-inline: calc(50% - min(50vw - var(--gutter), 560px));
}

.brand-index__lead {
	margin: 0 0 18px;
	color: var(--muted);
}

.brand-index__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .brand-index__list {
	padding: 0;
}

.brand-card {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 2px;
	height: 100%;
	padding: 16px 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--card);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.3s var(--ease);
}

.brand-card__mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 60px;
	margin-bottom: 8px;
}

.brand-card__mark img {
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 52px;
	object-fit: contain;
}

.brand-card__word {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.brand-card__name {
	font-size: 14.5px;
	font-weight: 700;
}

.brand-card__count {
	color: var(--muted);
	font-size: 12.5px;
}

.brand-card__stock {
	color: var(--success);
}

@media (hover: hover) {
	.brand-card:hover {
		border-color: var(--line-strong);
		box-shadow: var(--shadow);
	}
}