/*
 * Bohemi — the wood gallery's own design layer, on top of app.css (and commerce.css).
 *
 * Editorial and quiet: linen paper, charcoal type, walnut as the only accent; light display
 * type, generous space, one strict grid; photographs edge to edge or in soft rectangles, all
 * on the gallery's plain grey backdrop. No decorative motif: icons say what they do (a chat
 * bubble, a pin), wood swatches show the wood's colour as plank grain — never a log's rings.
 */

:root {
	--ring-line: rgb(107 74 52 / 0.16);
	--ring-line-strong: rgb(107 74 52 / 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;
}

/* Header: five items beside the centred logo; under 1200px the menu button. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.primary-nav {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}
}

.primary-nav__list {
	gap: clamp(14px, 1.7vw, 30px);
}

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

.arch-outline {
	display: none;
}

/* Hero: the copy on the reading side; beside it one frame in which the gallery's pieces take
   turns, each opening out from the middle like a growth ring. A card names the piece, thumbnails
   under the frame choose one and show the time left. Under 900px the frame comes first. ------- */

.stage {
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(14px, 2.2vw, 32px) var(--gutter) clamp(28px, 4vw, 64px);
}

.stage__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5.5vw, 96px);
}

.stage__copy {
	max-width: 620px;
}

.stage__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
	animation: stage-rise 1s 0.05s var(--ease-out) backwards;
}

.stage__eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--plum);
	transform-origin: right;
	animation: stage-draw 1.1s 0.15s var(--ease-out) backwards;
}

[dir="ltr"] .stage__eyebrow::before {
	transform-origin: left;
}

.stage__title {
	margin: 18px 0 0;
	font-size: clamp(44px, 5.4vw, 88px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.stage__line {
	display: block;
	overflow: hidden;
}

.stage__line > span {
	display: block;
	animation: stage-line 1.25s calc(0.12s + var(--i, 0) * 0.13s) var(--ease-out) backwards;
}

.stage__line + .stage__line > span {
	color: var(--plum);
}

.stage__lead {
	max-width: 31em;
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	color: var(--ink-2);
	font-size: var(--step-1);
	line-height: 2;
	animation: stage-rise 1s 0.45s var(--ease-out) backwards;
}

.stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(22px, 2.8vw, 36px);
	animation: stage-rise 1s 0.6s var(--ease-out) backwards;
}

/* The gallery in figures: a quiet line under the buttons; the numbers count up once. */
.stage__facts {
	display: flex;
	gap: clamp(28px, 3.4vw, 56px);
	margin: clamp(30px, 3.6vw, 52px) 0 0;
	padding: clamp(18px, 2vw, 24px) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	animation: stage-rise 1s 0.75s var(--ease-out) backwards;
}

.stage__fact {
	display: grid;
	gap: 2px;
}

.stage__fact-number {
	color: var(--ink);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 300;
	line-height: 1.3;
}

.stage__fact-label {
	color: var(--muted);
	font-size: 13px;
}

@keyframes stage-rise {
	from {
		opacity: 0;
		translate: 0 16px;
	}
}

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

@keyframes stage-line {
	from {
		translate: 0 110%;
	}
}

/* The frame and its pieces. The frame fills its column (a narrow portrait frame left an empty band
   between it and the copy) and is as tall as the screen allows, between 4:5 and 5:4 (the photos are
   square); it keeps to the page's edge. */
.stage__visual {
	--frame-h: clamp(420px, calc(100svh - var(--header-h) - 44px - 150px), 700px);
	display: grid;
	grid-template-columns: min(100%, calc(var(--frame-h) * 1.25));
	justify-content: end;
	justify-items: center;
	gap: 22px;
}

.stage__piece {
	position: relative;
	width: 100%;
}

.stage__frame {
	position: relative;
	width: 100%;
	max-height: var(--frame-h);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-panel);
	background: var(--paper-2);
	isolation: isolate;
	animation: stage-open 1.6s 0.1s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.stage__shot {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
}

.stage__shot.is-active {
	z-index: 2;
	opacity: 1;
	pointer-events: auto;
}

.stage__shot.is-leaving {
	z-index: 1;
	opacity: 1;
}

.stage__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	transition: scale 1.4s var(--ease-out);
}

.stage__shot.is-active img {
	animation: stage-settle 2s var(--ease-out) backwards;
}

.stage__shot.is-entering {
	animation: stage-ring 1.3s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.stage__shot.is-leaving img {
	animation: stage-recede 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@media (hover: hover) {
	.stage__piece:hover .stage__shot.is-active:not(.is-entering) img {
		scale: 1.03;
	}
}

@keyframes stage-open {
	from {
		clip-path: circle(0% at 50% 56%);
	}

	to {
		clip-path: circle(82% at 50% 56%);
	}
}

@keyframes stage-ring {
	from {
		clip-path: circle(0% at 50% 56%);
	}

	to {
		clip-path: circle(82% at 50% 56%);
	}
}

@keyframes stage-settle {
	from {
		scale: 1.14;
	}
}

@keyframes stage-recede {
	to {
		scale: 0.96;
		filter: brightness(0.9);
	}
}

/* The card: the piece's name, spec and price; it reaches past the frame towards the copy. */
.stage__cards {
	position: absolute;
	bottom: clamp(20px, 3vw, 40px);
	inset-inline-start: clamp(-84px, -5vw, -20px);
	z-index: 3;
	display: grid;
	width: min(290px, 78%);
	animation: stage-rise 1s 1.05s var(--ease-out) backwards;
}

.stage__card {
	position: relative;
	grid-area: 1 / 1;
	padding: 16px 18px 14px;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--r-card);
	background: rgb(251 249 246 / 0.92);
	box-shadow: 0 1px 2px rgb(40 40 40 / 0.05), 0 24px 48px -24px rgb(40 40 40 / 0.4);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	visibility: hidden;
	opacity: 0;
	translate: 0 12px;
	transition: opacity 0.3s var(--ease), translate 0.6s var(--ease-out), visibility 0s 0.6s;
}

.stage__card.is-active {
	visibility: visible;
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.5s 0.35s var(--ease), translate 0.8s 0.35s var(--ease-out), visibility 0s;
}

.stage__card-label {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.stage__card-name {
	display: block;
	margin-top: 2px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
}

.stage__card-name::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.stage__card-spec {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.75;
}

.stage__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.stage__card-price {
	font-size: 14px;
	font-weight: 600;
}

.stage__card-price del {
	color: var(--muted);
	font-weight: 400;
}

.stage__card-go {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.stage__card-go .icon {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.stage__card:hover .stage__card-go {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--paper);
	}
}

.stage__card-name:focus-visible {
	outline: none;
}

.stage__card:has(.stage__card-name:focus-visible) {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* Thumbnails (each with the time left on the current piece) and the stop button. */
.stage__controls {
	display: flex;
	order: 2;
	align-items: center;
	gap: 16px;
	animation: stage-rise 1s 1.2s var(--ease-out) backwards;
}

.stage__controls[hidden] {
	display: none;
}

.stage__thumbs {
	display: flex;
	gap: 10px;
}

.stage__thumb {
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--paper-2);
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s var(--ease);
	-webkit-tap-highlight-color: transparent;
}

.stage__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.stage__thumb[aria-current="true"] {
	opacity: 1;
}

@media (hover: hover) {
	.stage__thumb:hover {
		opacity: 0.85;
	}
}

.stage__time {
	position: absolute;
	inset-inline: 0;
	bottom: -9px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--line);
}

.stage__time::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	transform-origin: right;
	scale: var(--p, 0) 1;
}

[dir="ltr"] .stage__time::after {
	transform-origin: left;
}

.stage__pause {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

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

.stage__pause-icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.stage__icon-play {
	display: none;
	fill: currentColor;
	stroke: none;
}

.stage.is-paused .stage__icon-pause {
	display: none;
}

.stage.is-paused .stage__icon-play {
	display: block;
}

@media (max-width: 899px) {
	.stage {
		padding-top: 12px;
	}

	.stage__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.stage__visual {
		order: -1;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.stage__title {
		margin-top: 14px;
		font-size: clamp(40px, 11vw, 64px);
	}

	.stage__lead {
		font-size: 15.5px;
		line-height: 1.95;
	}

	.stage__actions .button {
		flex: 1 1 0;
		padding-inline: 18px;
	}

	.stage__facts {
		justify-content: space-between;
		gap: 16px;
		margin-top: 28px;
	}

	.stage__piece {
		width: 100%;
		margin-bottom: 52px;
	}

	.stage__frame {
		max-height: none;
		aspect-ratio: 1;
	}

	.stage__cards {
		inset-inline: 14px;
		bottom: -52px;
		width: auto;
	}

	.stage__card {
		padding: 12px 16px;
	}

	.stage__card-label {
		display: none;
	}

	.stage__card-name {
		margin-top: 0;
		font-size: 14.5px;
	}

	.stage__card-foot {
		margin-top: 6px;
		padding-top: 8px;
	}

	.stage__card-go {
		width: 30px;
		height: 30px;
	}

	.stage__thumb {
		width: 48px;
		height: 48px;
	}
}

/* Tablets: a full-width square was taller than the screen. */
@media (min-width: 600px) and (max-width: 899px) {
	.stage__frame {
		aspect-ratio: 5 / 4;
	}
}

/* Phones: the promise and its buttons on the first screen, then the piece in its frame (the first
   screen was only a photo, and the tab bar covered the slideshow's controls); the words about the
   gallery and its figures follow the frame. Reading order (the markup) is unchanged. */
@media (max-width: 899px) {
	.stage__inner {
		gap: 0;
	}

	.stage__copy {
		display: contents;
	}

	.stage__eyebrow {
		order: 1;
	}

	.stage__title {
		order: 2;
		margin-top: 10px;
	}

	.stage__actions {
		order: 3;
		margin-top: 20px;
	}

	.stage__visual {
		order: 4;
		margin-top: 28px;
	}

	.stage__lead {
		order: 5;
		max-width: none;
		margin-top: 20px;
	}

	.stage__facts {
		order: 6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stage__eyebrow,
	.stage__eyebrow::before,
	.stage__line > span,
	.stage__lead,
	.stage__actions,
	.stage__facts,
	.stage__frame,
	.stage__cards,
	.stage__controls,
	.stage__shot,
	.stage__shot img {
		animation: none !important;
	}

	.stage__card,
	.stage__card.is-active,
	.stage__shot img {
		transition: none;
	}
}

/* Categories: doors into the gallery, not pieces — 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(20 16 12 / 0.78) 0%, rgb(20 16 12 / 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(245 241 235 / 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;
	}
}

/* Product cards: a quiet «تک‌نسخه» badge. */
.badge--one-off {
	border: 1px solid rgb(107 74 52 / 0.22);
	background: rgb(251 249 246 / 0.94);
	color: var(--plum);
	backdrop-filter: blur(4px);
}

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

.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;
	}
}

/* «Choose your wood»: each tab is a small slice of that wood. */
.wood-tabs {
	display: flex;
	gap: clamp(18px, 3vw, 40px);
	margin: 0 0 clamp(16px, 2.4vw, 26px);
	padding: 6px 2px 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

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

.wood-tab {
	display: grid;
	flex: none;
	justify-items: center;
	gap: 4px;
	min-width: 84px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.wood-tab__swatch {
	width: 58px;
	height: 58px;
	margin-bottom: 6px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.06), 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
	transition: box-shadow 0.3s var(--ease);
}

.wood-tab[aria-selected="true"] {
	color: var(--ink);
}

.wood-tab[aria-selected="true"] .wood-tab__swatch {
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.06), 0 0 0 4px var(--paper), 0 0 0 6px var(--ink);
}

.wood-tab__name {
	font-size: 14px;
	font-weight: 600;
}

.wood-tab__count {
	font-size: 12px;
}

/* One line about the wood, marked in its own colour. */
.woods__note {
	max-width: 560px;
	margin: 0 0 clamp(18px, 2.4vw, 26px);
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--tone, var(--plum));
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.9;
}

/* A wood's swatch: its colour drawn as plank grain (two sets of fine lines a few degrees apart,
   a soft sheen), not as a log's rings. */
.wood-tab__swatch,
.wood-note__swatch {
	background:
		radial-gradient(140% 90% at 28% 18%, rgb(255 255 255 / 0.2), transparent 55%),
		repeating-linear-gradient(99deg, transparent 0 7px, color-mix(in srgb, var(--ring) 70%, transparent) 7px 8px, transparent 8px 13px),
		repeating-linear-gradient(94deg, transparent 0 11px, color-mix(in srgb, var(--ring) 45%, transparent) 11px 12.5px, transparent 12.5px 19px),
		var(--tone);
}

/* Story: an editorial split. --------------------------------------------------------------- */

.story-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: stretch;
}

.story-split__media {
	position: relative;
	min-height: clamp(380px, 42vw, 620px);
	margin: 0;
	overflow: hidden;
	background: var(--paper-2);
	border-start-start-radius: var(--r-panel);
	border-end-start-radius: var(--r-panel);
}

.story-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story-split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: clamp(32px, 5vw, 80px);
	background: var(--paper-2);
	border-start-end-radius: var(--r-panel);
	border-end-end-radius: var(--r-panel);
}

.story-split__text {
	margin: 16px 0 22px;
	color: var(--ink-2);
	line-height: 2.05;
}

@media (max-width: 900px) {
	.story-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.story-split__media {
		width: 100%;
		min-height: 0;
		aspect-ratio: 4 / 3;
		border-radius: var(--r-panel) var(--r-panel) 0 0;
	}

	.story-split__copy {
		border-radius: 0 0 var(--r-panel) var(--r-panel);
	}
}

/* Care: the store's guides and its wood butter. ------------------------------------------ */

.care {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.care__text {
	margin: 0;
	color: var(--ink-2);
	line-height: 2;
}

.care__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.care-card {
	display: grid;
	gap: 6px;
}

.care-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-card);
	background: var(--paper-2);
}

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

@media (hover: hover) {
	.care-card:hover .care-card__media img {
		scale: 1.04;
	}
}

.care-card__label {
	margin-top: 8px;
	color: var(--plum);
	font-size: 12px;
	font-weight: 600;
}

.care-card__title {
	font-size: var(--step-1);
	font-weight: 500;
	line-height: 1.6;
}

.care-card__price {
	color: var(--ink-2);
	font-size: 14px;
}

@media (max-width: 960px) {
	.care {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.care__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Product page: the care panel. */
.care-list {
	display: grid;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.care-list li {
	position: relative;
	padding-inline-start: 24px;
	line-height: 1.9;
}

.care-list li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	inset-inline-start: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--plum);
}

.care-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
}

/* 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 (bohemi.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;
}

/* Size: a dot that grows with the class. */
.facet__size {
	display: grid;
	flex: none;
	place-items: center;
	width: 16px;
	height: 16px;
}

.facet__size::before {
	content: "";
	border-radius: 50%;
	background: var(--plum-light);
}

.facet__size--s::before {
	width: 6px;
	height: 6px;
}

.facet__size--m::before {
	width: 9px;
	height: 9px;
}

.facet__size--l::before {
	width: 12px;
	height: 12px;
}

.facet__size--xl::before {
	width: 15px;
	height: 15px;
}

.facet__more > summary {
	display: inline-flex;
	padding: 8px 0 2px;
	color: var(--plum);
	font-size: 13px;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.facet__more > summary::-webkit-details-marker {
	display: none;
}

.facet__more-hide,
.facet__more[open] .facet__more-show {
	display: none;
}

.facet__more[open] .facet__more-hide {
	display: inline;
}

.facet__more[open] > summary {
	padding-bottom: 6px;
}

/* «Only pieces 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(40 40 40 / 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--bohemi {
	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(40 40 40 / 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--bohemi {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.shop-toolbar__count {
		display: none;
	}

	.shop-toolbar--bohemi .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--bohemi .grid-toggle {
		flex: none;
	}

	.shop-toolbar--bohemi .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--bohemi .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;
	}
}

/* Product page: the size, drawn to scale next to a mug. ------------------------------------- */

.size-card {
	margin: 20px 0 6px;
	padding: 18px 18px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--card);
}

.size-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.size-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.size-card__class {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--plum-tint);
	color: var(--plum);
	font-size: 12px;
	font-weight: 600;
}

/* Small · medium · large · extra large as four rising bars, filled up to the piece's class. */
.size-card__scale {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 13px;
}

.size-card__step {
	display: block;
	width: 3px;
	height: 5px;
	border-radius: 1px;
	background: rgb(107 74 52 / 0.25);
}

.size-card__step:nth-child(2) {
	height: 7.5px;
}

.size-card__step:nth-child(3) {
	height: 10px;
}

.size-card__step:nth-child(4) {
	height: 13px;
}

.size-card__step.is-on {
	background: var(--plum);
}

.size-figure {
	display: block;
	width: 100%;
	height: auto;
	direction: ltr;
	overflow: visible;
}

.size-figure__ground {
	stroke: var(--line-strong);
	stroke-width: 1;
}

.size-figure__piece {
	fill: #e9dccd;
	stroke: var(--plum);
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.size-figure__piece-grain {
	fill: url(#bohemi-grain);
	stroke: none;
}

.size-figure__grain {
	stroke: rgb(107 74 52 / 0.22);
	stroke-width: 0.8;
}

.size-figure__tick {
	stroke: var(--plum);
	stroke-width: 0.9;
}

.size-figure__dim {
	fill: none;
	stroke: var(--ink-2);
	stroke-width: 0.9;
}

.size-figure__mug rect,
.size-figure__mug path {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.2;
	stroke-dasharray: 3 3;
}

.size-figure__plan {
	fill: #e9dccd;
	stroke: var(--plum);
	stroke-width: 1.2;
}

.size-figure__label {
	direction: rtl;
	unicode-bidi: embed;
	fill: var(--ink);
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	text-anchor: middle;
}

.size-figure__label--muted {
	fill: var(--muted);
	font-weight: 500;
}

.size-card__note {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.8;
}

/* The drawing draws itself once it comes into view (bohemi.js adds .is-armed, then .is-drawn):
   the ground line, the outline, its wood, then the dimension lines and the numbers. */
@media (prefers-reduced-motion: no-preference) {
	.size-card.is-armed:not(.is-drawn) :is(.size-figure__ground, .size-figure__piece, .size-figure__dim) {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.size-card.is-armed:not(.is-drawn) .size-figure__piece {
		fill-opacity: 0;
	}

	.size-card.is-armed:not(.is-drawn) :is(.size-figure__piece-grain, .size-figure__tick, .size-figure__mug, .size-figure__plan, .size-figure__label) {
		opacity: 0;
	}

	.size-card.is-drawn .size-figure__ground {
		animation: size-draw 0.6s var(--ease-out) backwards;
	}

	.size-card.is-drawn .size-figure__piece {
		animation: size-draw 0.9s 0.1s var(--ease-out) backwards, size-fill 0.6s 0.6s var(--ease) backwards;
	}

	.size-card.is-drawn .size-figure__piece-grain {
		animation: size-fade 0.6s 0.7s var(--ease) backwards;
	}

	.size-card.is-drawn .size-figure__tick {
		animation: size-fade 0.5s 0.6s var(--ease) backwards;
	}

	.size-card.is-drawn .size-figure__mug {
		animation: size-fade 0.6s 0.3s var(--ease) backwards;
	}

	.size-card.is-drawn .size-figure__dim {
		animation: size-draw 0.6s 0.6s var(--ease-out) backwards;
	}

	.size-card.is-drawn .size-figure__plan {
		animation: size-fade 0.6s 0.7s var(--ease) backwards;
	}

	.size-card.is-drawn .size-figure__label {
		animation: size-fade 0.5s 0.8s var(--ease) backwards;
	}
}

@keyframes size-draw {
	from {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	to {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}
}

@keyframes size-fill {
	from {
		fill-opacity: 0;
	}
}

@keyframes size-fade {
	from {
		opacity: 0;
	}
}

/* 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 piece's page: the closest pieces still in the gallery, 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 pieces 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 piece 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 (pieces are chosen on their page). */
@media (hover: none) {
	.card-wish {
		top: 6px;
		inset-inline-end: 6px;
		width: 34px;
		height: 34px;
		background: rgb(251 249 246 / 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;
}

/* «دربارهٔ چوب گردو»: the wood's slice, one line about it, all its pieces. */
.wood-note {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 22px 0 0;
	padding: 18px;
	border-radius: var(--r-card);
	background: var(--paper-2);
}

.wood-note__swatch {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.06), 0 0 0 3px var(--paper-2), 0 0 0 4px var(--line);
}

.wood-note__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

.wood-note__text {
	margin: 2px 0 8px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.85;
}

.wood-note__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--plum);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.wood-note__link .icon {
	width: 16px;
	height: 16px;
	transition: translate 0.3s var(--ease);
}

@media (hover: hover) {
	.wood-note__link:hover .icon {
		translate: calc(3px * var(--dir)) 0;
	}
}

/* Photos full screen: on the paper, the photo as large as it fits, zoom into the grain. */
.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;
}

/* Home: the care guides scroll sideways on a phone instead of three tall cards. */
@media (max-width: 760px) {
	.care__list {
		display: flex;
		gap: 12px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.care__list > li {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
}

/* Home: the gallery in Shiraz, a quiet ending above the footer. */
.visit__inner {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
	border-radius: var(--r-panel);
	background: var(--paper-2);
	text-align: center;
}

.visit__mark .icon {
	width: 40px;
	height: 40px;
	color: var(--plum);
}

.visit__title {
	margin: 0;
}

.visit__address {
	color: var(--ink-2);
	font-size: var(--step-1);
	font-style: normal;
	line-height: 1.9;
}

.visit__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

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

.section.visit {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: clamp(24px, 3vw, 48px);
}

/* Home: the collections — one large tile and three beside it; sideways on phones. ----------- */

.collections {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.collections__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
	height: clamp(520px, 56vw, 760px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.collections__item--lead {
	grid-row: span 2;
}

/* Three tiles: the lead and two stacked; four: the last one spans the bottom. */
.collections__item:nth-child(4) {
	grid-column: span 2;
}

.collections__grid:has(> :nth-child(3):last-child) {
	grid-template-columns: 1.25fr 1fr;
}

.collection-tile {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--r-panel);
	background: var(--paper-2);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.collection-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s var(--ease-out);
}

.collection-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(20 16 12 / 0.72) 0%, rgb(20 16 12 / 0.25) 38%, transparent 62%);
	pointer-events: none;
}

@media (hover: hover) {
	.collection-tile:hover .collection-tile__media img {
		scale: 1.045;
	}
}

.collection-tile__text {
	position: absolute;
	inset-inline: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 26px);
	z-index: 1;
	display: grid;
	gap: 2px;
}

.collection-tile__name {
	font-size: clamp(20px, 1.6vw, 26px);
	font-weight: 500;
	line-height: 1.5;
}

.collections__item--lead .collection-tile__name {
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 300;
}

.collection-tile__note {
	max-width: 42ch;
	color: rgb(255 255 255 / 0.85);
	font-size: 14px;
	line-height: 1.8;
}

.collection-tile__count {
	margin-top: 4px;
	color: rgb(255 255 255 / 0.75);
	font-size: 12.5px;
}

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

@media (max-width: 760px) {
	.collections__grid {
		display: flex;
		gap: 12px;
		height: auto;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.collections__item {
		flex: 0 0 78%;
		aspect-ratio: 4 / 5;
		scroll-snap-align: start;
	}

	.collections__item--lead .collection-tile__name {
		font-size: 26px;
	}
}

/* Today's deals: the section's clock, the line under a piece'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(245 241 235 / 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 one-off 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 piece 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 piece 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 pieces 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 pieces; 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 (bohemi.js). */
.primary-nav li.is-dismissed > .sub-menu {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Very narrow screens (400% zoom): the thumbnails fit beside the pause button. */
@media (max-width: 400px) {
	.stage__thumbs {
		gap: 6px;
	}

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

	.stage__controls {
		gap: 10px;
	}
}

/* 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(40 40 40 / 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(245 241 235 / 0.1), 0 -10px 26px -16px rgb(20 16 12 / 0.4), 0 4px 10px -6px rgb(20 16 12 / 0.45);
	}

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

	.filters-fab {
		box-shadow: 0 8px 20px -10px rgb(20 16 12 / 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(245 241 235 / 0.08);
	border-radius: 999px;
	background: linear-gradient(135deg, #3b2b21 0%, #282828 60%);
	color: var(--paper);
	font: inherit;
	text-align: start;
	box-shadow: 0 10px 22px -12px rgb(20 16 12 / 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(20 16 12 / 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(245 241 235 / 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(245 241 235 / 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 (bohemi.js): out of sight and out of the tab order;
   it rises in once the hero's piece 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(20 16 12 / 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(20 16 12 / 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(20 16 12 / 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(245 241 235 / 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(245 241 235 / 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(107 74 52 / 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(245 241 235 / 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(107 74 52 / 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);
}

/* «Choose your wood»: «all woods» beside the slider's arrows, at the heading's end. */
.woods__head-end {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* 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 («باشگاه بوهمی», Bohemi Commerce) -------------------------------------------------
   The member's card is a plank of the tier's wood (beech, walnut, smoked walnut) with the theme's
   grain; one count-up of the points and one line drawing in (bohemi.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: #d8b48a;
	--ring: #b48b60;
	--text: #2b1f17;
	--soft: rgb(43 31 23 / 0.74);
	--rule: rgb(43 31 23 / 0.18);
	--fill: #2b1f17;
	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.2), transparent 60%),
		repeating-linear-gradient(97deg, transparent 0 9px, color-mix(in srgb, var(--ring) 50%, transparent) 9px 10px, transparent 10px 17px),
		repeating-linear-gradient(93deg, transparent 0 14px, color-mix(in srgb, var(--ring) 32%, transparent) 14px 15.5px, transparent 15.5px 24px),
		var(--tone);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 18px 40px -26px rgb(43 31 23 / 0.5);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.club-card--silver {
	--tone: #5a3a26;
	--ring: #3d2618;
	--text: #f5ede3;
	--soft: rgb(245 237 227 / 0.8);
	--rule: rgb(245 237 227 / 0.22);
	--fill: #f5ede3;
}

.club-card--gold {
	--tone: #2b211b;
	--ring: #17110d;
	--text: #f5ede3;
	--soft: rgb(245 237 227 / 0.8);
	--rule: rgb(214 191 166 / 0.3);
	--fill: #d6bfa6;
}

.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: #d8b48a;
	--ring: #b48b60;
	height: 10px;
	margin-bottom: 4px;
	border-radius: 6px;
	background:
		repeating-linear-gradient(97deg, transparent 0 9px, color-mix(in srgb, var(--ring) 60%, transparent) 9px 10px, transparent 10px 17px),
		var(--tone);
}

.club-tier--silver .club-tier__swatch {
	--tone: #5a3a26;
	--ring: #3d2618;
}

.club-tier--gold .club-tier__swatch {
	--tone: #2b211b;
	--ring: #17110d;
}

.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 piece 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;
}