/* Template store (S06 home, S07 listing): kind tiles with a fan of covers, TemplateCard, listing controls.
   Plate, FilterBar, grid and go-link base styles: ui-showcase.css. */

/* ---- controls ---- */
a.chip {
	text-decoration: none;
}

a.chip[aria-current="page"] {
	border-color: var(--acc);
	background: var(--hi-wash);
	box-shadow: inset 0 0 0 1px var(--acc);
}

a.chip[aria-current="page"] .chk {
	display: block;
}

.tfrow {
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-16) var(--sp-24);
}

.tsearch {
	display: flex;
	flex: 1 1 320px;
	gap: var(--sp-8);
	max-inline-size: 520px;
}

.tsearch .fld-in {
	flex: 1 1 auto;
	min-inline-size: 0;
	appearance: none;
}

.tsearch .fld-in:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

.tsort {
	display: grid;
	gap: var(--sp-4);
	min-inline-size: 220px;
}

.tsort label {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fg2);
}

:lang(ar) .tsort label {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
}

.qchip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-16);
	align-items: center;
	margin-block: 0 var(--sp-24);
	color: var(--fg2);
}

.qchip b {
	color: var(--fg);
	font-weight: 500;
}

.qchip a {
	color: var(--acc-t);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- TemplateCard ---- */
.tcard .part {
	padding: 18px;
	place-items: center;
}

.tshot {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ink-900);
	border: var(--hairline) solid var(--ln-s);
}

.tshot img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transition: object-position 5s linear;
}

.tcard:hover .tshot img,
.tcard:focus-within .tshot img {
	object-position: 50% 100%;
}

.tshot .imgerr {
	inset: 0;
}

.tshot.is-broken .imgerr,
.kpg.is-broken .imgerr {
	display: grid;
}

.tshot.is-broken img,
.kpg.is-broken img {
	visibility: hidden;
}

.tprice {
	color: var(--fg);
}

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

/* ---- kind tiles ---- */
.kinds-s {
	padding-block: var(--sp-64) var(--sec);
}

.kgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-24);
	margin-block-start: var(--sp-48);
}

.stile {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--sp-24);
	padding: var(--sp-24);
	color: var(--fg);
	text-decoration: none;
	border: var(--hairline) solid var(--ln-s);
	border-radius: var(--radius-plate);
	transition: border-color var(--d-base) var(--ease);
}

.stile:hover,
.stile:focus-visible {
	border-color: var(--gold-300);
}

.stile:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

.sfan {
	position: relative;
	display: block;
	block-size: 190px;
	overflow: hidden;
}

.kpg {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 38%;
	overflow: hidden;
	background: var(--ink-900);
	border: var(--hairline) solid var(--ln-s);
	transform: translateX(calc(var(--dir) * -50%)) translateX(calc(var(--dir) * var(--sx, 0%)));
	transition: transform 0.7s var(--ease);
}

.kpg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: top;
}

.kpg .imgerr {
	inset: 0;
}

.kpg0 {
	--sx: -34%;
	z-index: 1;
}

.kpg1 {
	--sx: 0%;
	z-index: 3;
	inset-block-start: 14px;
}

.kpg2 {
	--sx: 34%;
	z-index: 2;
}

.kpg:only-child {
	--sx: 0%;
	inset-block-start: 0;
}

.stile:hover .kpg0,
.stile:focus-visible .kpg0 {
	--sx: -62%;
}

.stile:hover .kpg2,
.stile:focus-visible .kpg2 {
	--sx: 62%;
}

.sname {
	display: grid;
	align-content: start;
	gap: var(--sp-8);
	padding-inline-end: var(--sp-48);
}

.sname strong {
	font-size: var(--fs-h3);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.scount {
	color: var(--fg2);
}

.sintro {
	color: var(--gray-300);
}

.stile .arr {
	position: absolute;
	inset-block-end: var(--sp-24);
	inset-inline-end: var(--sp-24);
	inline-size: 22px;
	block-size: 22px;
	color: var(--gold-300);
	transition: transform var(--d-slow) var(--ease);
}

html[dir="rtl"] .stile .arr {
	transform: scaleX(-1);
}

.stile:hover .arr {
	transform: translateX(calc(var(--dir) * 5px));
}

html[dir="rtl"] .stile:hover .arr {
	transform: scaleX(-1) translateX(calc(var(--dir) * -5px));
}

/* ---- store home bits ---- */
.newest-s {
	padding-block-start: 0;
}

.more {
	margin-block: var(--sp-32) 0;
}

.go-inline {
	position: relative;
}

.craft-s .craft-l .go {
	position: relative;
}

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

	.kgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.tsearch,
	.tsort {
		flex-basis: 100%;
		max-inline-size: none;
	}
}

.rm .tshot img,
.rm .kpg {
	transition: none;
}

.rm .tcard:hover .tshot img,
.rm .tcard:focus-within .tshot img {
	object-position: 50% 0;
}

/* the craft block on its own page: its own paper sheet, no separator line above it */
.craft-s {
	padding-block: var(--sec);
}

.craft-s .craft {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}