/*
 * Tezhano's home page, on top of app.css, tezhano.css and skin.css (loaded last, on the front page only).
 *
 * The page is a kitchen at service, read from the pass inward. Three materials and two colours:
 * tile is the ground; brushed steel is what holds things (the counter, the rail, the well, the plates);
 * white paper is what tells you something (tickets, the inside of a pan, a product card); the flame is what
 * can be acted on; the ember only where something ends.
 *
 * One thing is bold — the pass — and one thing moves by itself: its plates. Everything else is still.
 *
 * Type: Estedad for headings, Vazirmatn FD for text and every digit.
 *   the word 12.4vw/800 · h1 1.6→2.5rem/800 · h2 1.45→2rem/800 · h3 1.5rem/800 and 1.0625rem/700
 *   lead 1.125rem · text 1rem · small 0.875rem · note 0.8125rem
 */

.home {
	/* Brushed steel, one recipe: light falling across it, the grain along its length, the body from lit edge to shaded. */
	--steel-light: linear-gradient(100deg, rgb(255 255 255 / 0) 0 6%, rgb(255 255 255 / 0.55) 15%, rgb(255 255 255 / 0) 27% 41%, rgb(255 255 255 / 0.32) 54%, rgb(255 255 255 / 0) 66% 79%, rgb(255 255 255 / 0.42) 90%, rgb(255 255 255 / 0) 100%);
	--steel-grain: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.2) 0 1px, rgb(23 32 43 / 0.04) 1px 2px, rgb(255 255 255 / 0) 2px 3px);
	--steel-body: linear-gradient(180deg, #fcfdfd 0%, #dde3e8 9%, #c4cdd4 44%, #aab5bf 80%, #8794a0 100%);
	--paper-edge: rgb(23 32 43 / 0.2);
	--h2: clamp(1.45rem, 1.14rem + 1.3vw, 2rem);
}

/* ---- Sections: one rhythm, one kind of heading ------------------------------------------------------------- */

.home > .section {
	padding-block: clamp(26px, 3.4vw, 52px);
}

.home > .section:last-child {
	padding-bottom: clamp(36px, 4.4vw, 64px);
}

.home-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin-bottom: clamp(14px, 1.8vw, 22px);
}

.home-head--text {
	display: block;
}

.site-main.home h2.home-title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--h2);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0;
}

.home-lead {
	max-width: 34rem;
	margin: 6px 0 0;
	color: var(--ink-2);
	font-size: 1rem;
	line-height: 1.9;
}

.home-more {
	color: var(--flame);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.home-more:hover {
		color: var(--flame-deep);
		text-decoration: underline;
		text-underline-offset: 5px;
	}
}

/* ---- The pass ---------------------------------------------------------------------------------------------- */
/* «تجهیـز»: the kashida is the counter. The zone above it is as wide as the steel and stands on the word's
   baseline (an empty box takes its bottom edge as its baseline), so the products' feet meet the steel's top
   whatever the font's own line metrics are. */

.home .pass {
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(10px, 1.6vw, 24px) var(--gutter) clamp(22px, 3vw, 40px);
	overflow: visible;
	overflow-x: clip;
}

.pass__line {
	--word: clamp(58px, 12.4vw, 190px);
	--steel-h: calc(var(--word) * 0.166); /* the stroke of Estedad's kashida at weight 800 */
	--screen: 100vh;
	--stage-h: clamp(168px, min(24.5vw, var(--screen) * 0.4), 368px); /* the first screen holds the search too */
	display: grid;
	align-items: baseline;
}

@supports (height: 1svh) {
	.pass__line {
		--screen: 100svh;
	}
}

.pass__zone,
.home .pass__word {
	grid-area: 1 / 1;
}

.pass__zone {
	position: relative;
	height: calc(var(--stage-h) + var(--steel-h));
	min-width: 0;
	/* the letters at both ends: «تجهی» and «ز» */
	margin-inline: calc(var(--word) * 1.922) calc(var(--word) * 0.489);
}

.pass__stage {
	position: absolute;
	inset: 0 0 var(--steel-h);
	display: grid;
}

.pass__set {
	display: flex;
	grid-area: 1 / 1;
	align-items: flex-end;
	justify-content: space-evenly;
	gap: clamp(10px, 2.2vw, 34px);
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 clamp(2px, 1.2vw, 20px);
	list-style: none;
}

.pass__set[hidden] {
	display: none;
}

/* A plate is as wide as its product stands (its share of the full height × its own proportions); when the
   counter is short they all give way together. */
.pass__plate {
	--natural: calc(var(--stage-h) * var(--scale, 1) * var(--ratio, 1));
	position: relative;
	flex: 0 1 var(--natural);
	min-width: 0;
}

.pass__pick {
	display: block;
	width: min(100%, var(--natural));
	margin-inline: auto;
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
}

/* The photo's white becomes the tile (a studio white is seldom quite white: it is lifted a touch first).
   The blend is on the photo itself — the thing that moves — and nothing above it up to the page makes a
   layer of its own, or there would be nothing to blend with. */
.pass__shot {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(1.04);
	mix-blend-mode: multiply;
}

/* The reflection: the same photo upside down, seen only where the steel is. */
.pass__glint {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	width: min(100%, var(--natural));
	height: var(--steel-h);
	margin-inline: auto;
	overflow: hidden;
	pointer-events: none;
}

.pass__glint img {
	display: block;
	width: 100%;
	height: auto;
	transform: scaleY(-1);
	opacity: 0.5;
	filter: brightness(1.04) blur(1.5px);
	mix-blend-mode: multiply;
}

/* where it touches the steel */
.pass__plate::after {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	width: min(100%, var(--natural));
	height: calc(var(--steel-h) * 0.5);
	margin-inline: auto;
	background: radial-gradient(50% 100% at 50% 0, rgb(23 32 43 / 0.3), rgb(23 32 43 / 0));
	content: "";
	pointer-events: none;
}

/* Its tag on the counter's edge: what it is and what it costs today. */
.pass__tag {
	position: absolute;
	top: calc(100% + var(--steel-h) + 9px);
	left: 50%;
	display: grid;
	width: max(100%, 136px);
	translate: -50% 0;
	text-align: center;
}

.pass__name {
	overflow: hidden;
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.7;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pass__price {
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* Under the pointer a product is lifted a little: it can be picked up. */
@media (hover: hover) {
	.pass__pick:hover .pass__shot {
		translate: 0 -6px;
	}

	.pass__pick:hover .pass__name {
		color: var(--flame);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pass__shot {
		transition: translate 0.25s var(--ease-out);
	}
}

.home .pass__word {
	display: flex;
	align-items: baseline;
	margin: 0;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--word);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

.pass__steel {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--steel-h);
	margin-inline: calc(var(--word) * -0.012); /* the three boxes overlap a hair, so no seam shows */
	background: var(--steel-light), var(--steel-grain), var(--steel-body);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(23 32 43 / 0.34);
}

/* Stops what moves by itself (shown by the script while the sets take turns). */
.pass__hold {
	position: absolute;
	bottom: calc(var(--word) * 0.5); /* above the dot of «ز» */
	left: calc(var(--word) * -0.489);
	display: inline-grid;
	width: 36px;
	height: 36px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--steel-2);
	color: var(--ink-2);
	cursor: pointer;
}

.pass__hold[hidden] {
	display: none;
}

.pass__hold-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pass__hold-go,
.pass__hold[aria-pressed="true"] .pass__hold-bars {
	display: none;
}

.pass__hold[aria-pressed="true"] .pass__hold-go {
	display: inline;
	fill: currentColor;
	stroke-width: 1.4;
}

@media (hover: hover) {
	.pass__hold:hover {
		box-shadow: 0 0 0 1.5px var(--ink);
		color: var(--ink);
	}
}

/* Under the counter: what the shop is | the search and the line of truth. */
.pass__base {
	display: grid;
	gap: 16px clamp(28px, 5vw, 80px);
	margin-top: clamp(14px, 2vw, 26px);
}

.home .pass__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.6rem, 1.12rem + 1.95vw, 2.5rem);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0;
}

.pass__sub {
	max-width: 36rem;
	margin: 6px 0 0;
	color: var(--ink-2);
	font-size: clamp(1rem, 0.96rem + 0.26vw, 1.125rem);
	line-height: 1.9;
}

.pass__search {
	display: flex;
	gap: 6px;
	padding: 5px;
	border: 2px solid var(--ink);
	border-radius: var(--r-card);
	background: var(--white);
}

.pass__search:focus-within {
	border-color: var(--flame);
	outline: 2px solid var(--flame);
	outline-offset: 2px;
}

.home .pass__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 50px;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 17px;
	box-shadow: none;
}

/* the frame shows the focus, not the field inside it */
.home .pass__search input.pass__field:focus,
.home .pass__search input.pass__field:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

.home .pass__field::placeholder {
	color: var(--muted);
	opacity: 1;
}

.home .pass__submit {
	flex: none;
	min-height: 50px;
	padding: 0 clamp(18px, 2.4vw, 30px);
	border-radius: 9px;
	font-size: 16.5px;
}

.pass__truth {
	margin: 10px 2px 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8;
}

.pass__read {
	color: var(--ink-2);
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 1000px) {
	.pass__base {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		align-items: end;
	}
}

/* Where tags are shown, a plate is never narrower than its tag, and the word leaves room under it for them. */
@media (min-width: 700px) {
	.pass__plate {
		min-width: 118px;
	}

	.pass:not(.pass--empty) .pass__line {
		margin-bottom: max(0px, calc(58px - var(--word) * 0.24));
	}
}

@media (max-width: 1180px) {
	.pass__plate:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 899px) {
	.pass__plate:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 699px) {
	/* smaller letters, so the stretch between them is long enough to stand two things on */
	.pass__line {
		--word: clamp(46px, 13.4vw, 94px);
		--stage-h: clamp(150px, min(50vw, var(--screen) * 0.36), 300px);
	}

	.pass__plate:nth-child(n + 3) {
		display: none;
	}

	/* no room for tags: the link keeps its name for those who do not see it */
	.pass__tag {
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		translate: none;
		white-space: nowrap;
	}

	.pass__hold {
		top: 0;
		bottom: auto;
		left: calc(var(--word) * -0.489);
		width: 32px;
		height: 32px;
	}
}

/* The one sequence: the counter draws out, the first plates are set down (once: the script marks the stage
   .is-set when that has played, so a plate shown again later — a turned tablet — simply stands); then every
   few seconds the plates are lifted off and the next are set down. */
@media (prefers-reduced-motion: no-preference) {
	/* Nothing here keeps its animation once it has played (no fill forwards): a finished one would still make
	   a layer of the steel, and the reflections — painted before it — would be lost under it. */
	.pass__steel {
		animation: pass-draw 0.8s var(--ease-out);
	}

	.pass__stage:not(.is-set) .pass__shot {
		animation: pass-arrive 0.5s var(--ease-out) backwards;
		animation-delay: calc(0.5s + var(--i, 0) * 0.08s);
	}

	.pass__stage:not(.is-set) .pass__glint img,
	.pass__stage:not(.is-set) .pass__plate::after,
	.pass__stage:not(.is-set) .pass__tag {
		animation: pass-show 0.4s ease-out backwards;
		animation-delay: calc(0.75s + var(--i, 0) * 0.08s);
	}

	.pass__set.is-leaving .pass__shot {
		animation: pass-leave 0.32s cubic-bezier(0.4, 0, 1, 1) both;
		animation-delay: calc(var(--i, 0) * 0.05s);
	}

	.pass__set.is-leaving .pass__glint img,
	.pass__set.is-leaving .pass__plate::after,
	.pass__set.is-leaving .pass__tag {
		animation: pass-hide 0.24s ease-in both;
		animation-delay: calc(var(--i, 0) * 0.05s);
	}

	.pass__set.is-arriving .pass__shot {
		animation: pass-arrive 0.5s var(--ease-out) backwards;
		animation-delay: calc(var(--i, 0) * 0.07s);
	}

	.pass__set.is-arriving .pass__glint img,
	.pass__set.is-arriving .pass__plate::after,
	.pass__set.is-arriving .pass__tag {
		animation: pass-show 0.4s ease-out backwards;
		animation-delay: calc(0.22s + var(--i, 0) * 0.07s);
	}
}

@keyframes pass-draw {
	from {
		clip-path: inset(0 0 0 100%);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes pass-arrive {
	from {
		opacity: 0;
		translate: 0 -26px;
	}
}

@keyframes pass-leave {
	to {
		opacity: 0;
		translate: 0 -22px;
	}
}

@keyframes pass-show {
	from {
		opacity: 0;
	}
}

@keyframes pass-hide {
	to {
		opacity: 0;
	}
}

/* ---- The rail: «فیش راه‌اندازی» ----------------------------------------------------------------------------- */
/* Tickets hang from a steel rail. One is pulled down and shows its figures; the others show their lines. */

.rail__bar {
	position: relative;
	z-index: 1;
	height: 28px;
	border-radius: 5px;
	background:
		linear-gradient(180deg, rgb(23 32 43 / 0) 0 60%, rgb(23 32 43 / 0.3) 60% 67%, rgb(255 255 255 / 0.5) 67% 71%, rgb(23 32 43 / 0) 71%),
		var(--steel-light), var(--steel-grain), var(--steel-body);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(23 32 43 / 0.34), inset 1px 0 0 rgb(23 32 43 / 0.12), inset -1px 0 0 rgb(23 32 43 / 0.12);
}

.rail__tickets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 14px clamp(12px, 1.7vw, 24px);
	margin-top: -9px; /* each ticket's top is held in the rail */
	padding-inline: clamp(6px, 1.5vw, 22px);
}

.ticket {
	--tooth: 7px;
	position: relative;
	isolation: isolate;
	min-width: 0;
	padding: 26px clamp(14px, 1.5vw, 20px) calc(18px + var(--tooth));
	/* a hairline that follows the torn edge */
	filter: drop-shadow(0 0 0.6px var(--paper-edge)) drop-shadow(0 1px 0 var(--paper-edge));
}

.ticket::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--white);
	content: "";
	/* cut from the roll with a serrated blade */
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
}

.ticket__head {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1.5px dashed var(--steel-2);
	font: inherit;
}

.ticket__venue {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 10px;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ticket__name {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.4;
}

.ticket__sum {
	color: var(--muted);
	font-size: 13.5px;
}

.ticket__hint {
	grid-column: 1 / -1;
	color: var(--flame);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.7;
}

.ticket__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticket__line {
	position: relative;
	padding: 9px 0 8px;
	border-bottom: 1px dashed var(--steel-1);
}

.ticket__line:last-child {
	border-bottom: 0;
}

.ticket__item {
	display: block;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.65;
	text-decoration: none;
}

/* the whole line is the link */
.ticket__item::after {
	position: absolute;
	inset: 0;
	content: "";
}

.ticket__item:focus-visible {
	outline: none;
}

.ticket__item:focus-visible::after {
	border-radius: 4px;
	outline: 2px solid var(--flame);
	outline-offset: 1px;
}

.ticket__meta {
	display: grid;
	grid-template-rows: 1fr;
}

.ticket__figures {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 10px;
	min-height: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.75;
}

.ticket__from {
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}

@media (hover: hover) {
	.ticket__line:hover .ticket__item {
		color: var(--flame);
	}

	.ticket:not(.is-open) .ticket__venue:hover .ticket__hint {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

/* With script: one ticket is open. Without: all are, and the heads are plain headings. */
.js .ticket.is-open .ticket__hint,
.no-js .ticket__hint {
	display: none;
}

.js .ticket.is-open .ticket__venue,
.no-js .ticket__venue {
	cursor: default;
}

.js .ticket:not(.is-open) .ticket__meta {
	grid-template-rows: 0fr;
}

.js .ticket:not(.is-open) .ticket__figures {
	visibility: hidden;
}

.js .ticket:not(.is-open) .ticket__item {
	color: var(--ink-2);
	font-weight: 400;
}

@media (prefers-reduced-motion: no-preference) {
	.js .ticket__meta {
		transition: grid-template-rows 0.3s var(--ease-out);
	}

	.js .ticket__figures {
		transition: visibility 0s 0.3s;
	}

	.js .ticket.is-open .ticket__figures {
		transition-delay: 0s;
	}
}

@media (max-width: 1019px) {
	.rail__tickets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 619px) {
	.rail__tickets {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding-inline: 8px;
	}

	.ticket {
		padding: 22px 16px calc(14px + var(--tooth));
	}

	/* a closed ticket is its head only */
	.js .ticket:not(.is-open) {
		padding-top: 14px;
	}

	.js .ticket:not(.is-open):first-child {
		padding-top: 22px;
	}

	.js .ticket:not(.is-open) .ticket__head {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.js .ticket:not(.is-open) .ticket__lines {
		display: none;
	}

	.js .ticket:not(.is-open) .ticket__name {
		grid-column: 1;
		grid-row: 1;
	}

	.js .ticket:not(.is-open) .ticket__hint {
		grid-column: 2;
		grid-row: 1;
	}

	.js .ticket:not(.is-open) .ticket__sum {
		display: none;
	}

	.ticket__name {
		font-size: 1.3125rem;
	}
}

/* ---- Today's deals ------------------------------------------------------------------------------------------ */

.home .deals__clock {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--ember);
	font-variant-numeric: tabular-nums;
}

.home .deals__clock-time {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0;
}

.home .deals__clock-label {
	color: var(--ember);
	font-size: 14px;
}

/* ---- The well: categories ----------------------------------------------------------------------------------- */
/* Pans in a steel well, each as wide as what it holds (--span, of 24 columns; the lead pan is two rows high). */

.well__pans {
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	grid-auto-rows: minmax(clamp(140px, 12.2vw, 178px), auto);
	gap: 10px;
	margin: 0;
	padding: 10px;
	border-radius: var(--r-panel);
	background: linear-gradient(180deg, #e9edf0, #dde3e7);
	box-shadow: inset 0 0 0 1px var(--steel-2), inset 0 2px 0 rgb(255 255 255 / 0.9);
	list-style: none;
}

.pan {
	position: relative;
	display: flex;
	grid-column: span var(--span, 4);
	flex-direction: column;
	min-width: 0;
	padding: 16px 18px;
	border-radius: var(--r-card);
	background: var(--white);
	/* the pan's rim: a line, a white lip, a line */
	box-shadow: 0 0 0 1px var(--steel-2), inset 0 0 0 5px var(--white), inset 0 0 0 6px var(--steel-1);
	container-type: inline-size;
	overflow: hidden;
}

.pan--lead,
.pan--tall {
	grid-row: span 2;
}

/* the lead pan: its name and subcategories on one side, what it holds on the other */
.pan--lead {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	column-gap: 14px;
	padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 30px);
}

.pan--lead .pan__main,
.pan--lead .pan__links {
	grid-column: 1;
}

.pan__main {
	display: grid;
	gap: 1px;
	color: inherit;
	text-decoration: none;
}

/* the whole pan is the link */
.pan__main::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
}

.pan__main:focus-visible {
	outline: none;
}

.pan__main:focus-visible::after {
	outline: 2px solid var(--flame);
	outline-offset: -4px;
}

.pan__name {
	position: relative;
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
}

.pan--lead .pan__name {
	font-size: clamp(1.5rem, 1.16rem + 1.4vw, 2rem);
	font-weight: 800;
	line-height: 1.35;
}

.pan__count {
	position: relative;
	color: var(--muted);
	font-size: 13.5px;
}

.pan__links {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: start;
	gap: 4px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.pan__link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.8;
	text-decoration: none;
}

.pan__link-count {
	flex: none;
	color: var(--muted);
	font-size: 12.5px;
}

/* What the pan holds stands in its far corner. */
.pan__photos {
	position: absolute;
	bottom: 13px;
	left: 14px;
	display: flex;
	align-items: flex-end;
	gap: 6%;
	width: 54%;
	height: 56%;
	pointer-events: none;
	direction: ltr;
}

.pan--lead .pan__photos {
	position: static;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: end;
	width: auto;
	height: 86%;
}

.pan__photo {
	display: block;
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}

.pan__photo--cut {
	filter: brightness(1.04);
	mix-blend-mode: multiply;
}

/* a photo with its own background is a small square print */
.pan__photo:not(.pan__photo--cut) {
	flex: 0 0 auto;
	width: auto;
	height: 88%;
	aspect-ratio: 1;
	border-radius: var(--radius);
	object-fit: cover;
}

/* in a narrow pan the name takes the width: the photo keeps under it */
@container (max-width: 190px) {
	.pan__photos {
		width: 72%;
		height: 44%;
	}
}

/* the narrowest is its name and number */
@container (max-width: 96px) {
	.pan__photos {
		display: none;
	}
}

@media (hover: hover) {
	.pan:hover {
		box-shadow: 0 0 0 1.5px var(--flame), inset 0 0 0 5px var(--white), inset 0 0 0 6px var(--flame-tint);
	}

	.pan__link:hover {
		color: var(--flame);
	}
}

@media (max-width: 1023px) {
	.well__pans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(132px, auto);
		gap: 8px;
		padding: 8px;
	}

	.pan,
	.pan--tall {
		grid-column: span 1;
		grid-row: span 1;
	}

	.pan--lead {
		grid-column: span 2;
		min-height: 250px;
	}

	/* an odd one out at the end takes the row */
	.pan:last-child:nth-child(even) {
		grid-column: span 2;
	}

	.pan {
		min-height: 148px;
	}

	.pan--lead {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}

	.pan--lead .pan__photos {
		height: 150px;
	}

	.pan__photos {
		bottom: 11px;
		left: 12px;
	}
}

/* ---- Picks: what is in stock, at today's price -------------------------------------------------------------- */

.home .slider-arrows {
	align-self: center;
}

.home .slider-tabs {
	gap: clamp(16px, 2.2vw, 30px);
	margin-bottom: clamp(16px, 2vw, 22px);
	border-bottom-color: var(--steel-2);
}

.home .slider-tab {
	padding-bottom: 12px;
	font-size: 15.5px;
	transition: none;
}

.home .slider-arrow {
	transition: none;
}

.home .slider-tab::after {
	height: 3px;
	background: var(--flame);
	transition: none;
}

.home .slider-tab[aria-selected="true"] {
	font-weight: 700;
}

.home .products.product-slider__track {
	grid-auto-columns: clamp(204px, 18.6%, 262px);
	gap: clamp(10px, 1.1vw, 16px);
}

/* cards stay still: no fade-in, no easing on hover */
.home .product-card {
	transition: none;
}

.home .slider-panel__more {
	display: inline-block;
	margin-top: 12px;
}

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

/* ---- Brands: spec plates ------------------------------------------------------------------------------------ */
/* The small plate riveted to a machine, with the maker's name stamped in. */

.plates__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plate {
	position: relative;
	display: grid;
	gap: 0;
	min-height: 66px;
	padding: 10px 26px 9px;
	align-content: center;
	border-radius: var(--radius);
	background: var(--steel-grain), linear-gradient(180deg, #eef1f3, #dfe4e8);
	box-shadow: inset 0 0 0 1px rgb(23 32 43 / 0.16), inset 0 2px 0 rgb(255 255 255 / 0.9);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
}

/* two rivets */
.plate::before,
.plate::after {
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0, #b9c2ca 55%, #8a96a1 100%);
	box-shadow: 0 0 0 1px rgb(23 32 43 / 0.22);
	content: "";
}

.plate::before {
	right: 10px;
}

.plate::after {
	left: 10px;
}

.plate__name {
	overflow: hidden;
	font-family: var(--display);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.55;
	text-overflow: ellipsis;
	text-shadow: 0 1px 0 rgb(255 255 255 / 0.85); /* stamped in */
	white-space: nowrap;
}

.plate__count {
	color: var(--ink-2);
	font-size: 12.5px;
	line-height: 1.5;
}

@media (hover: hover) {
	.plate:hover {
		box-shadow: inset 0 0 0 1.5px var(--flame), inset 0 2px 0 rgb(255 255 255 / 0.9);
		color: var(--flame-deep);
	}
}

@media (max-width: 1019px) {
	.plates__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 619px) {
	.plates__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.plates__list > li:nth-child(n + 13) {
		display: none; /* twelve on a phone; the link above leads to all */
	}
}

/* ---- Service lines ------------------------------------------------------------------------------------------ */

.service__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px clamp(20px, 3vw, 40px);
	margin: 0;
	padding: 18px 2px;
	border-block: 1px solid var(--steel-2);
	list-style: none;
}

.service__item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-size: 15.5px;
	font-weight: 600;
}

.service__icon {
	display: inline-grid;
	flex: none;
	color: var(--muted);
}

.service__icon .icon {
	width: 22px;
	height: 22px;
}

/* On phones a closed ticket is only its head: the head is the button, and gets a finger's height. */
@media (max-width: 619px) {
	.ticket__venue {
		min-height: 44px;
		align-items: center;
	}
}

/* «همهٔ کالاها» and its like: a finger-sized target without moving anything. */
.home-more {
	position: relative;
}

.home-more::after {
	position: absolute;
	inset: -10px -8px;
	content: "";
}