/* Home scene 06: store. A paper sheet cut diagonally into the dark, TemplateSlider (3D flip cards) and ThemeTry. */

.tpl {
	position: relative;
	background: var(--gray-50);
	color: var(--ink-900);
	padding-block: calc(var(--sec) + 40px) calc(var(--sec) + 20px);
	margin-block: -40px;
	clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%);
	z-index: 2;
}

.tpl::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

.store-head {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--margin);
	align-items: end;
}

.store-head .lead {
	justify-self: end;
	color: var(--gray-600);
}

.chips {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-start: clamp(28px, 4vw, 52px);
}

.chips .lbl {
	color: var(--gray-600);
	margin-inline-end: 6px;
}

.chips button {
	height: 44px;
	padding-inline: 18px;
	background: transparent;
	color: var(--ink-900);
	border: var(--hairline) solid var(--ln-s);
	font: 500 12px var(--font-mono);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.3s,
		color 0.3s;
}

:lang(ar) .chips button {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
}

.chips button:hover,
.chips button.on {
	background: var(--ink-900);
	color: var(--white);
	border-color: var(--ink-900);
}

.chips .go {
	color: var(--ink-900);
	margin-inline-start: auto;
}

/* slider */
.slider {
	position: relative;
	margin-block-start: clamp(36px, 5vw, 70px);
}

.sl-view {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-inline: var(--rail);
	scroll-padding-inline: var(--rail);
	padding-block: 20px 30px;
	scrollbar-width: none;
	cursor: grab;
}

.sl-view::-webkit-scrollbar {
	display: none;
}

.sl-view.drag {
	scroll-snap-type: none;
	cursor: grabbing;
}

.sl-view.drag * {
	pointer-events: none;
}

.tc {
	flex: none;
	width: clamp(260px, 26vw, 380px);
	aspect-ratio: 3/4;
	perspective: 1200px;
	scroll-snap-align: start;
	user-select: none;
}

.tc-in {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1s var(--ease);
}

.tc:hover .tc-in,
.tc:focus-within .tc-in,
.tc.flip .tc-in {
	transform: rotateY(calc(var(--dir) * 180deg));
}

.tf,
.tb2 {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border: var(--hairline) solid var(--ln-s);
	border-radius: var(--radius-plate);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.tf {
	background: var(--white);
}

.tb2 {
	transform: rotateY(180deg);
	background: var(--ink-900);
	color: var(--white);
	padding: 22px;
	gap: 14px;
	border-color: var(--ink-900);
}

.tf .shot {
	flex: 1;
	position: relative;
	background: var(--c1);
	overflow: hidden;
}

.tf .shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.tf .cap2 {
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-block-start: var(--hairline) solid var(--ln);
}

.tf .cap2 b {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tf .cap2 span {
	color: var(--gray-600);
}

/* wireframe variants: white blocks, hairlines, one accent */
.shot i {
	position: absolute;
	display: block;
	border: var(--hairline) solid rgb(var(--ink-900-rgb) / 0.14);
	border-radius: 2px;
}

.v1 .nv {
	inset: 12px 14px auto;
	height: 10px;
	border: 0;
	background: linear-gradient(90deg, var(--ink-900) 0 16%, transparent 16% 66%, rgb(var(--ink-900-rgb) / 0.5) 66% 76%, transparent 76% 80%, rgb(var(--ink-900-rgb) / 0.5) 80% 90%, transparent 90%);
}

.v1 .h {
	inset: 40px 14px auto;
	height: 42%;
	border: 0;
	background:
		linear-gradient(var(--white), var(--white)) 14px 18px / 46% 10px no-repeat,
		linear-gradient(rgb(var(--white-rgb) / 0.6), rgb(var(--white-rgb) / 0.6)) 14px 38px / 30% 6px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 14px calc(100% - 16px) / 54px 18px no-repeat, var(--c2);
}

.v1 .r {
	inset: auto 14px 14px;
	height: 28%;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--white) 0 31%, transparent 31% 34.5%);
	box-shadow: inset 0 0 0 1px rgb(var(--ink-900-rgb) / 0.12);
}

.v2 .a {
	inset: 14px auto auto 14px;
	width: 48%;
	height: 62%;
	background: var(--c2);
	border: 0;
}

.v2 .b {
	inset: 14px 14px auto auto;
	width: 40%;
	height: 28%;
	background: var(--white);
}

.v2 .c {
	inset: auto 14px 14px;
	height: 14%;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--white) 0 22%, transparent 22% 26%);
	box-shadow: inset 0 0 0 1px rgb(var(--ink-900-rgb) / 0.12);
}

.v3 .a {
	inset: 0 0 auto;
	height: 60%;
	border: 0;
	background: linear-gradient(160deg, var(--c2), transparent);
}

.v3 .b {
	inset: 26% 18% auto;
	height: 10px;
	background: var(--white);
	border: 0;
}

.v3 .c {
	inset: 40% 30% auto;
	height: 6px;
	background: rgb(var(--white-rgb) / 0.75);
	border: 0;
}

.v3 .d {
	inset: auto 12px 12px;
	height: 30%;
	background: repeating-linear-gradient(90deg, var(--white) 0 47%, transparent 47% 53%);
}

.v4 .a {
	inset: 14px 14px auto;
	height: 30%;
	background: var(--white);
}

.v4 .b {
	inset: 44% 14px 14px;
	border: 0;
	background: repeating-linear-gradient(0deg, var(--c2) 0 7px, transparent 7px 15px);
}

.tb2 h3 {
	font-size: 26px;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1;
}

.tb2 h3 strong {
	font-weight: 800;
}

.tb2 dl {
	display: grid;
	font-size: 13px;
}

.tb2 dl div {
	display: flex;
	justify-content: space-between;
	padding-block: 9px;
	border-block-start: var(--hairline) solid var(--ln-s);
	color: var(--gray-300);
}

.tb2 dd {
	color: var(--white);
}

.tb2 .price {
	margin-block-start: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.sl-ctl {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-inline: var(--rail);
}

.sl-ctl .scale {
	position: relative;
	flex: 1;
	height: 28px;
	background:
		repeating-linear-gradient(90deg, var(--ln-s) 0 1px, transparent 1px 12px) 0 100% / 100% 8px no-repeat,
		repeating-linear-gradient(90deg, var(--ink-900) 0 1px, transparent 1px 120px) 0 100% / 100% 18px no-repeat;
}

.sl-ctl .car {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 48px;
	border-inline: 2px solid var(--blue-600);
	background: color-mix(in srgb, var(--blue-600) 10%, transparent);
}

.ar {
	width: 48px;
	height: 48px;
	border: var(--hairline) solid var(--ink-900);
	background: transparent;
	color: var(--ink-900);
	display: grid;
	place-items: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.3s;
}

.ar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink-900);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.5s var(--ease);
	z-index: -1;
}

.ar:hover,
.ar:focus-visible {
	color: var(--white);
}

.ar:hover::before,
.ar:focus-visible::before {
	transform: none;
}

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

.ar[data-prev] svg {
	transform: scaleX(-1);
}

:dir(rtl) .ar[data-prev] svg {
	transform: none;
}

:dir(rtl) .ar[data-next] svg {
	transform: scaleX(-1);
}

.sl-ctl .cn {
	min-width: 5ch;
	text-align: end;
	direction: ltr;
}

.rm .tc-in,
.rm .ar::before {
	transition: none;
}

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

	.store-head .lead {
		justify-self: start;
	}

	.chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block-end: 6px;
	}

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

	.chips button,
	.chips .lbl,
	.chips .go {
		flex: none;
	}
}