/* Overlia StoreDeck
 *
 * Every size inside a tile is a percentage of the tile width (cqi against the
 * tile container) and every gap is a percentage of the menu width (cqi against
 * the menu container). A row of four is therefore the same drawing as a row
 * of three, only smaller, and the whole menu scales with the screen.
 * The editor preview loads this same file. */

@font-face {
	font-family: "StoreDeck Industry";
	src: url("../../assets/fonts/industry.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.storedeck {
	--storedeck-font: "StoreDeck Industry", "Industry", "Arial Black", sans-serif;
	--storedeck-title-color: #c4b41c;
	--storedeck-title-size: 4.2;
	--storedeck-title-align: center;
	--storedeck-pill-bg: #0b7a3e;
	--storedeck-pill-text: #fff;
	--storedeck-pill-bg-h: #c4b41c;
	--storedeck-pill-text-h: #0b1f1a;
	--storedeck-pill-h: 20;
	--storedeck-pill-w: 100;
	--storedeck-radius: 50;
	--storedeck-text: 11;
	--storedeck-ls: 0.2;
	--storedeck-media-h: 62;
	--storedeck-gap: 5;
	--storedeck-row-gap: 7;
	--storedeck-rows-gap: 7;
	--storedeck-sep-color: #c4b41c;
	--storedeck-sep-w: 60;
	--storedeck-sep-size: 2px;
	--storedeck-sep-text: 1.8;
	--storedeck-tile-bg: #10332b;
	--storedeck-tile-text: #fff;
	--storedeck-max: 1400px;
	--storedeck-bg: transparent;
	--storedeck-m-cols: 2;
	--storedeck-dur: 700ms;
	--storedeck-stagger: 90ms;
	--storedeck-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
	--storedeck-pill-shadow: 0 0 0 transparent;
	--storedeck-shelf-bg: #10332b;
	--storedeck-shelf-text: #fff;
	--storedeck-card-bg: #fff;
	--storedeck-card-text: #0b1f1a;

	container: storedeck / inline-size;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--storedeck-max);
	margin-inline: auto;
}

/* Wide and full alignment in block themes stretch the block with negative
 * margins, which a fixed 100% width would cut short on the right. */
.storedeck.alignwide,
.storedeck.alignfull {
	width: auto;
}

.storedeck *,
.storedeck *::before,
.storedeck *::after {
	box-sizing: border-box;
}

.storedeck--bg {
	padding: clamp(24px, 5vw, 72px) clamp(12px, 3vw, 40px);
	background: var(--storedeck-bg);
}

/* --- heading ------------------------------------------------------------ */

.storedeck .storedeck__title {
	margin: 0 0 calc(var(--storedeck-row-gap) * 1cqi);
	padding: 0;
	border: 0;
	background: none;
	color: var(--storedeck-title-color);
	font-family: var(--storedeck-font);
	font-size: clamp(22px, calc(var(--storedeck-title-size) * 1cqi), 160px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-align: var(--storedeck-title-align);
	text-transform: none;
}

.storedeck--upper .storedeck__title {
	text-transform: uppercase;
}

/* --- rows ----------------------------------------------------------------
 * --storedeck-n is the number of tiles in the row (set by the markup) and
 * --storedeck-cols an optional fixed column count. A short row stays centred.
 *
 * Rows stand --storedeck-rows-gap apart, or a row's own --storedeck-rs.
 * Margins rather than a flex gap, so each pair of rows can differ. A
 * separator takes the middle of the distance: half above it, half below. */

.storedeck__rows {
	display: flex;
	flex-direction: column;
}

.storedeck__rows > * + * {
	margin-top: calc(var(--storedeck-rs, var(--storedeck-rows-gap)) * 1cqi);
}

.storedeck__rows > .storedeck__sep,
.storedeck__rows > .storedeck__sep + * {
	margin-top: calc(var(--storedeck-rs, var(--storedeck-rows-gap)) * 0.5cqi);
}

.storedeck__row {
	--storedeck-c: var(--storedeck-cols, var(--storedeck-n, 3));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--storedeck-rows-gap) * 1cqi) calc(var(--storedeck-gap) * 1cqi);
}

/* Separator (its data-style): lines left and right of an optional text, or
   of a diamond; "none" leaves the text alone, centred. */
.storedeck .storedeck__sep {
	display: flex;
	align-items: center;
	align-self: center;
	justify-content: center;
	width: calc(var(--storedeck-sep-w, 60) * 1%);
	max-width: 100%;
	color: var(--storedeck-sep-color);
	font-family: var(--storedeck-font);
	font-size: clamp(12px, calc(var(--storedeck-sep-text) * 1cqi), 100px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.12em;
	text-align: center;
}

.storedeck__sep::before,
.storedeck__sep::after {
	content: "";
	flex: 1 1 0;
	min-width: 0;
	border-top: var(--storedeck-sep-size, 2px) solid currentColor;
}

.storedeck__sep[data-style="dashed"]::before,
.storedeck__sep[data-style="dashed"]::after {
	border-top-style: dashed;
}

.storedeck__sep[data-style="dotted"]::before,
.storedeck__sep[data-style="dotted"]::after {
	border-top-style: dotted;
}

.storedeck__sep[data-style="fade"]::before,
.storedeck__sep[data-style="fade"]::after {
	height: var(--storedeck-sep-size, 2px);
	border: 0;
	background: linear-gradient(to right, transparent, currentColor);
}

.storedeck__sep[data-style="fade"]::after {
	background: linear-gradient(to left, transparent, currentColor);
}

.storedeck__sep[data-style="none"]::before,
.storedeck__sep[data-style="none"]::after {
	display: none;
}

/* The indent balances the letter spacing after the last letter, so the
   text sits on the centre line. */
.storedeck__sep-text {
	flex: 0 1 auto;
	max-width: 80%;
	margin-inline: 0.9em;
	padding-inline-start: 0.12em;
	overflow-wrap: anywhere;
}

.storedeck__sep[data-style="none"] .storedeck__sep-text {
	max-width: 100%;
	margin-inline: 0;
}

.storedeck--upper .storedeck__sep-text {
	text-transform: uppercase;
}

.storedeck__sep-mark {
	display: none;
}

.storedeck__sep[data-style="diamond"] .storedeck__sep-mark {
	display: block;
	flex: none;
	width: calc(var(--storedeck-sep-size, 2px) * 3 + 5px);
	height: calc(var(--storedeck-sep-size, 2px) * 3 + 5px);
	margin-inline: 0.7em;
	background: currentColor;
	transform: rotate(45deg);
}

/* With the entrance on, separators fade in as they reach the screen. */
.storedeck--live .storedeck__sep {
	opacity: 0;
	transition: opacity 0.7s ease;
}

.storedeck--live .storedeck__sep.is-in {
	opacity: 1;
}

/* --- tile ----------------------------------------------------------------- */

.storedeck .storedeck-tile {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex: 0 0 calc((100% - (var(--storedeck-c) - 1) * var(--storedeck-gap) * 1cqi) / var(--storedeck-c));
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	color: inherit;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

div.storedeck-tile {
	cursor: default;
}

.storedeck .storedeck-tile__media {
	position: relative;
	display: block;
	width: 100%;
	height: calc(var(--storedeck-media-h) * 1cqi);
	/* The picture is cut along the middle of the button below it: it may
	   rise above the tile and reach out sideways, and it tucks behind the
	   button's upper half, but nothing of it shows under the button or
	   around its rounded lower ends, however far it is enlarged or moved
	   down. The button starts where this box ends. */
	clip-path: inset(-9999px -9999px calc(var(--storedeck-pill-h) * -0.5cqi) -9999px);
}

/* The picture stands on the button: anchored bottom centre, sized as a
 * share of the picture area's height, then nudged by the tile's offsets.
 * The offset lives in `translate`, so hover effects can use `transform`
 * without undoing it. */
.storedeck .storedeck-tile__img {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--storedeck-is, 100) * 1%);
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	object-fit: contain;
	translate: calc(-50% + var(--storedeck-ix, 0) * 1cqi) calc(var(--storedeck-iy, 0) * 1cqi);
	transform-origin: 50% 100%;
	transition:
		transform 0.5s var(--storedeck-ease),
		filter 0.4s ease;
	-webkit-user-drag: none;
	user-select: none;
}

.storedeck .storedeck-tile__pill {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--storedeck-pill-w) * 1%);
	height: calc(var(--storedeck-pill-h) * 1cqi);
	padding: 0 calc(var(--storedeck-pill-h) * 0.45cqi);
	overflow: hidden;
	border-radius: calc(var(--storedeck-radius) * var(--storedeck-pill-h) * 0.01cqi);
	background-color: var(--storedeck-pill-bg);
	color: var(--storedeck-pill-text);
	box-shadow: var(--storedeck-pill-shadow);
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.4s var(--storedeck-ease);
}

/* Resolved on the button, so the cqi are the tile's. */
.storedeck--shadow {
	--storedeck-pill-shadow: 0 0.8cqi 2.4cqi rgba(0, 0, 0, 0.28);
}

/* The light that sweeps across the button in the "shine" hover. */
.storedeck .storedeck-tile__pill::after {
	content: "";
	position: absolute;
	inset: 0;
	display: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
	transform: translateX(-110%);
	pointer-events: none;
}

.storedeck[data-pill="shine"] .storedeck-tile__pill::after {
	display: block;
}

/* The label is sized in cqi so it scales with its tile; storedeck.js shrinks a
 * label that would not fit. The negative end margin cancels the spacing after
 * the last letter, which would otherwise push the word off centre. */
.storedeck .storedeck-tile__label {
	display: block;
	flex: 0 0 auto;
	margin: 0 calc(var(--storedeck-ls) * -1em) 0 0;
	padding: 0;
	font-family: var(--storedeck-font);
	/* --storedeck-fs: the tile style's scale; --storedeck-fit: storedeck.js
	   shrinking a label that would not fit. */
	font-size: calc(var(--storedeck-text) * var(--storedeck-fs, 1) * var(--storedeck-fit, 1) * 1cqi);
	font-weight: 700;
	line-height: 1;
	letter-spacing: calc(var(--storedeck-ls) * 1em);
	text-transform: none;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.storedeck--upper .storedeck-tile__label {
	text-transform: uppercase;
}

/* --- hover and focus ------------------------------------------------------
 * The picture and the button have separate effects: data-hover moves the
 * picture, data-pill the button. Keyboard focus shows what the pointer does. */

.storedeck-tile.is-current .storedeck-tile__pill,
.storedeck-tile.is-active .storedeck-tile__pill,
.storedeck-tile:hover .storedeck-tile__pill,
.storedeck-tile:focus-visible .storedeck-tile__pill {
	background-color: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
}

.storedeck-tile:focus-visible .storedeck-tile__pill {
	outline: 3px solid var(--storedeck-title-color);
	outline-offset: 3px;
}

/* Picture */

.storedeck[data-hover="lift"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: translateY(-4cqi) scale(1.04);
}

.storedeck[data-hover="zoom"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: scale(1.1);
}

.storedeck[data-hover="tilt"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: rotate(-5deg) scale(1.05);
}

/* The glow is there at rest too, as a transparent color(): Chrome fades a
   mixed colour in from a plain one (and from nothing) through black.
   --storedeck-img-fx keeps a style's own picture filter (the sticker
   outline) under it. */
.storedeck[data-hover="glow"] .storedeck-tile .storedeck-tile__img {
	filter:
		var(--storedeck-img-fx, )
		drop-shadow(0 0 0 color(srgb 0 0 0 / 0))
		drop-shadow(0 0 0 color(srgb 0 0 0 / 0));
}

.storedeck[data-hover="glow"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: scale(1.03);
	filter:
		var(--storedeck-img-fx, )
		drop-shadow(0 0 1cqi color-mix(in srgb, var(--storedeck-pill-bg-h) 80%, transparent))
		drop-shadow(0 0 4cqi color-mix(in srgb, var(--storedeck-pill-bg-h) 55%, transparent));
}

.storedeck[data-hover="swing"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-swing 0.9s ease-in-out;
}

.storedeck[data-hover="bounce"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-hop 0.8s;
}

.storedeck[data-hover="pulse"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-pulse 0.55s ease-in-out infinite alternate;
}

.storedeck[data-hover="shake"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-shake 0.5s ease-in-out;
}

.storedeck[data-hover="spin"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-spin 0.9s var(--storedeck-ease);
}

.storedeck[data-hover="jelly"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-jelly 0.8s ease;
}

.storedeck[data-hover="float"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: translateY(-5cqi);
	filter: var(--storedeck-img-fx, ) drop-shadow(0 5cqi 2.5cqi rgba(0, 0, 0, 0.4));
}

.storedeck[data-hover="wiggle"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-wiggle 0.6s ease-in-out;
}

.storedeck[data-hover="heartbeat"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-heartbeat 1.1s ease-in-out infinite;
}

.storedeck[data-hover="tilt3d"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	transform: perspective(600px) rotateY(-20deg) rotateX(6deg) scale(1.05);
}

.storedeck[data-hover="tada"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-tada 0.9s ease;
}

/* Jumps forward and stays there while pointed at. */
.storedeck[data-hover="popout"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__img {
	animation: storedeck-popout 0.45s var(--storedeck-ease) both;
}

/* Button */

.storedeck[data-pill="raise"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	transform: translateY(-1cqi);
}

.storedeck[data-pill="grow"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	transform: scale(1.05);
}

.storedeck[data-pill="ring"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	box-shadow: 0 0 0 1.8cqi color-mix(in srgb, var(--storedeck-pill-bg-h) 45%, transparent), var(--storedeck-pill-shadow);
}

.storedeck[data-pill="shine"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill::after {
	animation: storedeck-shine 0.8s ease;
}

/* Fill: the hover colour slides in from the left as an inset shadow, over
   a button that keeps its colour. */
.storedeck[data-pill="fill"] .storedeck-tile__pill {
	box-shadow: inset 0 0 0 var(--storedeck-pill-bg-h), var(--storedeck-pill-shadow);
}

.storedeck[data-pill="fill"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	background-color: var(--storedeck-pill-bg);
	box-shadow: inset 100cqi 0 0 var(--storedeck-pill-bg-h), var(--storedeck-pill-shadow);
}

.storedeck[data-pill="lift"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	transform: translateY(-1.6cqi);
	box-shadow: 0 2.2cqi 4cqi rgba(0, 0, 0, 0.38);
}

.storedeck[data-pill="wobble"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	animation: storedeck-wobble 0.7s ease-in-out;
}

.storedeck[data-pill="jump"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	animation: storedeck-jump 0.6s;
}

.storedeck[data-pill="pulse"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill {
	animation: storedeck-pill-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes storedeck-wobble {
	0%, 100% { transform: none; }
	20% { transform: translateX(-2cqi) rotate(-3deg); }
	40% { transform: translateX(1.5cqi) rotate(2deg); }
	60% { transform: translateX(-1cqi) rotate(-1.5deg); }
	80% { transform: translateX(0.5cqi) rotate(0.5deg); }
}

@keyframes storedeck-jump {
	0%   { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	40%  { transform: translateY(-3cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	70%  { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	85%  { transform: translateY(-0.8cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	100% { transform: none; }
}

@keyframes storedeck-pill-pulse {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

/* Pressed: after the hover rules, which it ties with, so it wins. */
.storedeck[data-pill] .storedeck-tile:active .storedeck-tile__pill {
	transform: scale(0.96);
	transition-duration: 0.3s, 0.3s, 0.3s, 0.1s;
}

@keyframes storedeck-swing {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(-5deg); }
	45%  { transform: rotate(4deg); }
	70%  { transform: rotate(-2deg); }
	88%  { transform: rotate(1deg); }
	100% { transform: rotate(0); }
}

/* Up, down, a smaller hop, down: eased like a thrown ball. */
@keyframes storedeck-hop {
	0%   { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	35%  { transform: translateY(-9cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	60%  { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	78%  { transform: translateY(-2.5cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	100% { transform: none; }
}

@keyframes storedeck-pulse {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

@keyframes storedeck-shake {
	0%, 100% { transform: none; }
	15% { transform: translateX(-1.6cqi) rotate(-2.5deg); }
	30% { transform: translateX(1.4cqi) rotate(2deg); }
	45% { transform: translateX(-1cqi) rotate(-1.5deg); }
	60% { transform: translateX(0.8cqi) rotate(1deg); }
	75% { transform: translateX(-0.4cqi) rotate(-0.5deg); }
}

@keyframes storedeck-spin {
	from { transform: perspective(900px) rotateY(0deg); }
	to   { transform: perspective(900px) rotateY(360deg); }
}

@keyframes storedeck-jelly {
	0%, 100% { transform: none; }
	30% { transform: scale(1.14, 0.86); }
	45% { transform: scale(0.9, 1.1); }
	60% { transform: scale(1.05, 0.95); }
	75% { transform: scale(0.98, 1.02); }
}

@keyframes storedeck-wiggle {
	0%, 100% { transform: none; }
	20% { transform: rotate(-9deg); }
	40% { transform: rotate(8deg); }
	60% { transform: rotate(-5deg); }
	80% { transform: rotate(3deg); }
}

@keyframes storedeck-heartbeat {
	0%, 40%, 100% { transform: none; }
	12% { transform: scale(1.1); }
	24% { transform: scale(1.02); }
	32% { transform: scale(1.12); }
}

@keyframes storedeck-tada {
	0%, 100% { transform: none; }
	10%, 20% { transform: scale(0.92) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
	40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes storedeck-popout {
	0%   { transform: none; }
	60%  { transform: translateY(-5cqi) scale(1.2); }
	100% { transform: translateY(-3.5cqi) scale(1.15); }
}

@keyframes storedeck-shine {
	from { transform: translateX(-110%); }
	to   { transform: translateX(110%); }
}

/* --- tile styles ----------------------------------------------------------
 * data-tile-style on the menu. The markup is the same for all of them (a
 * picture area, then the button holding the label), so the picture's size
 * and offsets, the tile colours, hover, idle and entrance effects all keep
 * working. Sizes stay in cqi of the tile. */

/* Arch: a coloured arch behind the picture, standing on the button. It
   lives in the picture area, so the same cut keeps it off the button's
   lower half, and the picture may still rise above it. */
.storedeck[data-tile-style="arch"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	top: 14%;
	right: 6%;
	bottom: calc(var(--storedeck-pill-h) * -0.5cqi);
	left: 6%;
	border-radius: 999px 999px 0 0;
	background: var(--storedeck-tile-bg);
	transition: background-color 0.3s ease;
}

/* Circle: a disc with the picture standing in it and rising out of its
   top. The picture area is the disc plus room above it; the mask keeps
   everything above the disc's middle and, below it, only what lies inside
   the disc. The label sits under it as text. */
.storedeck[data-tile-style="circle"] {
	--storedeck-cd: 84; /* Disc diameter, % of the tile width. */
	--storedeck-ch: 24; /* Room above the disc. */
}

.storedeck[data-tile-style="circle"] .storedeck-tile__media {
	width: calc(var(--storedeck-cd) * 1cqi);
	height: calc((var(--storedeck-cd) + var(--storedeck-ch)) * 1cqi);
	clip-path: none;
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc((var(--storedeck-ch) + var(--storedeck-cd) * 0.5) * 1cqi) no-repeat,
		radial-gradient(circle calc(var(--storedeck-cd) * 0.5cqi) at 50% calc(100% - var(--storedeck-cd) * 0.5cqi), #000 99.4%, transparent 100%);
	mask:
		linear-gradient(#000 0 0) top / 100% calc((var(--storedeck-ch) + var(--storedeck-cd) * 0.5) * 1cqi) no-repeat,
		radial-gradient(circle calc(var(--storedeck-cd) * 0.5cqi) at 50% calc(100% - var(--storedeck-cd) * 0.5cqi), #000 99.4%, transparent 100%);
}

.storedeck[data-tile-style="circle"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(var(--storedeck-cd) * 1cqi);
	border-radius: 50%;
	background: var(--storedeck-tile-bg);
	transition: box-shadow 0.3s ease;
}

.storedeck[data-tile-style="circle"] .storedeck-tile__img {
	bottom: calc(var(--storedeck-cd) * 0.06cqi);
	height: calc(var(--storedeck-is, 100) * var(--storedeck-cd) * 0.0095cqi);
}

.storedeck[data-tile-style="circle"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__media::before {
	box-shadow: inset 0 0 0 1.6cqi var(--storedeck-pill-bg-h);
}

/* Card: the tile is a rounded card, the button a bar across its foot.
   The card clips the picture. Its own sizes are in cqi of the menu. */
.storedeck[data-tile-style="card"] .storedeck-tile {
	overflow: hidden;
	border-radius: clamp(8px, calc(var(--storedeck-radius) * 0.04cqi), 28px);
	background: var(--storedeck-tile-bg);
}

.storedeck--shadow[data-tile-style="card"] .storedeck-tile {
	box-shadow: 0 0.6cqi 1.8cqi rgba(0, 0, 0, 0.3);
}

.storedeck[data-tile-style="card"] .storedeck-tile__media {
	margin-top: 7cqi;
	clip-path: none;
}

.storedeck[data-tile-style="card"] .storedeck-tile__pill {
	width: 100%;
	border-radius: 0;
	box-shadow: none;
}

/* Outline and plain text: the picture ends where the label begins, since
   nothing covers it there. */
.storedeck:is([data-tile-style="outline"], [data-tile-style="text"], [data-tile-style="glass"]) .storedeck-tile__media {
	clip-path: inset(-9999px -9999px 0 -9999px);
}

/* Outline: a ring in the button colour, filled on hover. */
.storedeck[data-tile-style="outline"] .storedeck-tile__pill {
	background-color: transparent;
	box-shadow: inset 0 0 0 max(2px, 0.9cqi) var(--storedeck-pill-bg);
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="outline"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	background-color: var(--storedeck-pill-bg-h);
	box-shadow: inset 0 0 0 max(2px, 0.9cqi) var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
}

/* Plain label (text, circle, glass): no button at all; hover colours the
   words. Glass adds room under the label, inside its panel. */
.storedeck:is([data-tile-style="text"], [data-tile-style="circle"], [data-tile-style="glass"]) .storedeck-tile__pill {
	width: 100%;
	height: auto;
	padding: 3.5cqi 0 0;
	overflow: visible;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck:is([data-tile-style="text"], [data-tile-style="circle"]) .storedeck-tile__pill::after {
	display: none !important;
}

.storedeck:is([data-tile-style="text"], [data-tile-style="circle"], [data-tile-style="glass"]) .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

/* Side room too: the label is fitted inside the padding, off the panel's
   edges. */
.storedeck[data-tile-style="glass"] .storedeck-tile__pill {
	padding: 3.5cqi 6cqi 6cqi;
}

.storedeck[data-tile-style="text"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__label {
	text-decoration: underline;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.3em;
}

/* Square and hexagon: like the arch, a backing behind the picture that
   stands on the button. The hexagon has a point at the top and is as
   tall as the picture area down to the button's middle. */
.storedeck[data-tile-style="square"] .storedeck-tile__media::before,
.storedeck[data-tile-style="hex"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	background: var(--storedeck-tile-bg);
	transition: background-color 0.3s ease;
}

.storedeck[data-tile-style="square"] .storedeck-tile__media::before {
	top: 12%;
	right: 8%;
	bottom: calc(var(--storedeck-pill-h) * -0.5cqi);
	left: 8%;
	border-radius: 9cqi;
}

.storedeck[data-tile-style="hex"] .storedeck-tile__media::before {
	bottom: calc(var(--storedeck-pill-h) * -0.5cqi);
	left: 50%;
	height: calc(var(--storedeck-media-h) * 1cqi + var(--storedeck-pill-h) * 0.5cqi);
	aspect-ratio: 0.866;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	translate: -50% 0;
}

/* Glow: a light in the button colour behind the picture, in the hover
   colour once pointed at. */
.storedeck[data-tile-style="glow"] .storedeck-tile__media::before,
.storedeck[data-tile-style="glow"] .storedeck-tile__media::after {
	content: "";
	position: absolute;
	/* Within the tile: wider would widen the page at the last tile. */
	inset: 2% 0 calc(var(--storedeck-pill-h) * -0.5cqi);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--storedeck-pill-bg) 80%, transparent), transparent);
	transition: opacity 0.4s ease;
}

.storedeck[data-tile-style="glow"] .storedeck-tile__media::after {
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--storedeck-pill-bg-h) 70%, transparent), transparent);
	opacity: 0;
}

.storedeck[data-tile-style="glow"] .storedeck-tile__media {
	isolation: isolate;
}

.storedeck[data-tile-style="glow"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__media::before {
	opacity: 0;
}

.storedeck[data-tile-style="glow"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__media::after {
	opacity: 1;
}

/* Glass: a frosted panel from a quarter of the way down the picture to
   the foot of the tile, so the picture rises out of it; the label stands
   in it as text. The tint follows the label colour, so it reads on dark
   and light pages alike. */
.storedeck[data-tile-style="glass"] .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: calc(var(--storedeck-media-h) * 0.28cqi) 0 0;
	border: 1px solid color-mix(in srgb, var(--storedeck-tile-text) 20%, transparent);
	border-radius: 7cqi;
	background: color-mix(in srgb, var(--storedeck-tile-text) 8%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.storedeck[data-tile-style="glass"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current)::before {
	border-color: color-mix(in srgb, var(--storedeck-pill-bg-h) 60%, transparent);
	background: color-mix(in srgb, var(--storedeck-tile-text) 14%, transparent);
}

/* Ribbon and slant: the button cut to a banner with notched ends, or to a
   parallelogram; slant adds a slanted band behind the picture. */
.storedeck[data-tile-style="ribbon"] .storedeck-tile__pill {
	padding-inline: calc(var(--storedeck-pill-h) * 0.45cqi + 5cqi);
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 4.5cqi) 50%, 100% 100%, 0 100%, 4.5cqi 50%);
}

.storedeck[data-tile-style="slant"] .storedeck-tile__pill {
	padding-inline: calc(var(--storedeck-pill-h) * 0.45cqi + 4cqi);
	border-radius: 0;
	clip-path: polygon(6cqi 0, 100% 0, calc(100% - 6cqi) 100%, 0 100%);
}

.storedeck[data-tile-style="slant"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	top: 16%;
	right: 10%;
	bottom: calc(var(--storedeck-pill-h) * -0.5cqi);
	left: 10%;
	background: var(--storedeck-tile-bg);
	clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}

/* Sticker: a white edge around the picture's own outline, tilted, and a
   button tilted the other way; every second tile leans the other side.
   rotate, not transform, so hover and idle effects still apply. */
.storedeck[data-tile-style="sticker"] .storedeck-tile__img {
	--storedeck-img-fx:
		drop-shadow(1.2cqi 0 0 #fff)
		drop-shadow(-1.2cqi 0 0 #fff)
		drop-shadow(0 1.2cqi 0 #fff)
		drop-shadow(0 -1.2cqi 0 #fff)
		drop-shadow(0 1.2cqi 1.6cqi rgba(0, 0, 0, 0.35));
	filter: var(--storedeck-img-fx);
}

.storedeck[data-tile-style="sticker"] .storedeck-tile__media {
	rotate: -4deg;
}

.storedeck[data-tile-style="sticker"] .storedeck-tile__pill {
	rotate: 2.5deg;
}

.storedeck[data-tile-style="sticker"] .storedeck-tile:nth-child(even) .storedeck-tile__media {
	rotate: 4deg;
}

.storedeck[data-tile-style="sticker"] .storedeck-tile:nth-child(even) .storedeck-tile__pill {
	rotate: -2.5deg;
}

/* Polaroid: a white print with the picture on a square of the backing
   colour and the label written below; prints lean either way and
   straighten when pointed at. */
/* The tile's own lengths would measure the menu, so the white margin is
   the picture area's, in cqi of the tile. */
.storedeck[data-tile-style="photo"] .storedeck-tile {
	background: #f7f5ef;
	box-shadow: 0 0.5cqi 1.6cqi rgba(0, 0, 0, 0.35);
	rotate: -2deg;
	transition: rotate 0.4s var(--storedeck-ease);
}

.storedeck[data-tile-style="photo"] .storedeck-tile:nth-child(even) {
	rotate: 2deg;
}

.storedeck[data-tile-style="photo"] .storedeck-tile:is(:hover, :focus-visible, .is-active) {
	rotate: 0deg;
}

.storedeck[data-tile-style="photo"] .storedeck-tile__media {
	width: 90cqi;
	margin-top: 5cqi;
	clip-path: inset(0);
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="photo"] .storedeck-tile__pill {
	width: 100%;
	height: auto;
	padding: 4.5cqi 6cqi 5.5cqi;
	overflow: visible;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: #1d2327;
}

.storedeck[data-tile-style="photo"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg);
}

.storedeck:is([data-tile-style="photo"], [data-tile-style="glass"]) .storedeck-tile__pill::after {
	display: none !important;
}

/* --- layouts that move the name ------------------------------------------ */

/* Name on top: the button first, the picture hanging under it in a
   U-shaped backing that tucks behind the button's lower half. */
.storedeck[data-tile-style="top"] .storedeck-tile {
	flex-direction: column-reverse;
}

.storedeck[data-tile-style="top"] .storedeck-tile__media {
	clip-path: none;
}

.storedeck[data-tile-style="top"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	top: calc(var(--storedeck-pill-h) * -0.5cqi);
	right: 8%;
	bottom: 0;
	left: 8%;
	border-radius: 0 0 999px 999px;
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="top"] .storedeck-tile__img {
	bottom: 6%;
	height: calc(var(--storedeck-is, 100) * 0.86%);
}

/* Side by side: a wide chip in the button colour, the picture on its left
   rising out of the top, the name on its right; mirrored in side-right,
   alternating in zigzag. The chip is the tile's ::before, whose cqi are
   the tile's. */
.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile {
	flex-direction: row;
	align-items: stretch;
}

.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: 9cqi 0 0;
	border-radius: 8cqi;
	background: var(--storedeck-pill-bg);
	box-shadow: var(--storedeck-pill-shadow);
	transition: background-color 0.3s ease;
}

.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current)::before {
	background: var(--storedeck-pill-bg-h);
}

.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile__media {
	flex: none;
	width: 44cqi;
	height: 48cqi;
	clip-path: inset(-9999px -9999px 0 -9999px round 0 0 0 8cqi);
}

.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile__pill {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	margin-top: 9cqi;
	padding: 0 6cqi 0 2cqi;
	justify-content: flex-start;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
}

.storedeck:is([data-tile-style="side"], [data-tile-style="side-right"], [data-tile-style="zigzag"]) .storedeck-tile__label {
	--storedeck-fs: 0.85;
}

/* Name on the picture: a card the picture fills, the name at its foot on
   the left over a darkening, larger than on a button. */
.storedeck:is([data-tile-style="overlay"], [data-tile-style="corner"]) .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 7cqi;
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="overlay"] .storedeck-tile::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: 7cqi;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 52%);
	pointer-events: none;
}

.storedeck:is([data-tile-style="overlay"], [data-tile-style="corner"]) .storedeck-tile__media {
	height: calc((var(--storedeck-media-h) + 22) * 1cqi);
	clip-path: inset(0 round 7cqi);
}

.storedeck:is([data-tile-style="overlay"], [data-tile-style="corner"]) .storedeck-tile__img {
	bottom: 5%;
}

/* Room at the top for the tag. */
.storedeck[data-tile-style="corner"] .storedeck-tile__img {
	height: calc(var(--storedeck-is, 100) * 0.82%);
}

.storedeck[data-tile-style="overlay"] .storedeck-tile__pill {
	position: absolute;
	z-index: 2;
	right: 7cqi;
	bottom: 7cqi;
	left: 7cqi;
	width: auto;
	height: auto;
	padding: 0;
	justify-content: flex-start;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="overlay"] .storedeck-tile__label {
	--storedeck-fs: 1.1;
}

.storedeck[data-tile-style="overlay"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

/* Name in the corner: the same card, the name as a small tag at its top
   left. Its width follows the name, capped, so long names still shrink. */
.storedeck[data-tile-style="corner"] .storedeck-tile__pill {
	position: absolute;
	z-index: 2;
	top: 5cqi;
	left: 5cqi;
	width: auto;
	max-width: calc(100% - 10cqi);
	height: calc(var(--storedeck-pill-h) * 0.62cqi);
	padding: 0 calc(var(--storedeck-pill-h) * 0.32cqi);
}

.storedeck[data-tile-style="corner"] .storedeck-tile__label {
	--storedeck-fs: 0.62;
}

/* Vertical name: the button turned on its side along the left edge, as
   long as the picture is tall, reading upwards. rotate and translate, so
   hover effects on transform still add to them; its layout width stays
   the picture height, which is what the label fitting measures. */
.storedeck[data-tile-style="vertical"] .storedeck-tile {
	align-items: flex-end;
}

.storedeck[data-tile-style="vertical"] .storedeck-tile__media {
	width: calc(100cqi - var(--storedeck-pill-h) * 1cqi - 3cqi);
	clip-path: inset(-9999px -9999px 0 -9999px);
}

.storedeck[data-tile-style="vertical"] .storedeck-tile__pill {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--storedeck-media-h) * 1cqi);
	transform-origin: 0 0;
	rotate: -90deg;
	translate: 0 calc(var(--storedeck-media-h) * 1cqi);
}

/* With an arrow: the picture on a rounded backing, the name under it on
   the left and an arrow on the right that steps forward on hover. */
.storedeck[data-tile-style="arrow"] .storedeck-tile__media {
	clip-path: inset(-9999px -9999px 0 -9999px);
}

.storedeck[data-tile-style="arrow"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	inset: 14% 0 0;
	border-radius: 6cqi;
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="arrow"] .storedeck-tile__pill {
	width: 100%;
	height: auto;
	padding: 4.5cqi 9cqi 0 1cqi;
	justify-content: flex-start;
	overflow: visible;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="arrow"] .storedeck-tile__pill::after {
	content: "";
	top: calc(4.5cqi + var(--storedeck-text) * 0.36cqi);
	right: 2.5cqi;
	bottom: auto;
	left: auto;
	display: block !important;
	width: calc(var(--storedeck-text) * 0.36cqi);
	height: calc(var(--storedeck-text) * 0.36cqi);
	border-top: 0.8cqi solid currentColor;
	border-right: 0.8cqi solid currentColor;
	background: none;
	transform: translateY(-50%) rotate(45deg) !important;
	animation: none !important;
	transition: right 0.3s var(--storedeck-ease);
}

.storedeck[data-tile-style="arrow"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="arrow"] .storedeck-tile:is(:hover, :focus-visible) .storedeck-tile__pill::after {
	right: 0.5cqi;
}

/* Band across the picture: the button as a see-through strip over the
   lower part of the picture, edge to edge. */
.storedeck[data-tile-style="band"] .storedeck-tile__media {
	clip-path: none;
}

.storedeck[data-tile-style="band"] .storedeck-tile__pill {
	position: absolute;
	z-index: 2;
	top: calc(var(--storedeck-media-h) * 0.64cqi);
	right: 0;
	left: 0;
	width: auto;
	border-radius: 0;
	background-color: color-mix(in srgb, var(--storedeck-pill-bg) 88%, transparent);
}

.storedeck[data-tile-style="band"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	background-color: color-mix(in srgb, var(--storedeck-pill-bg-h) 92%, transparent);
}

/* --- more shapes and layouts ---------------------------------------------- */

/* Shield: a crest-shaped backing, its point at the top of the button; the
   picture stands higher, inside the shield. */
.storedeck[data-tile-style="shield"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	top: 2%;
	bottom: 0;
	left: 50%;
	width: 76cqi;
	background: var(--storedeck-tile-bg);
	clip-path: polygon(50% 0, 100% 11%, 100% 56%, 50% 100%, 0 56%, 0 11%);
	translate: -50% 0;
}

.storedeck[data-tile-style="shield"] .storedeck-tile__img {
	bottom: 17%;
	height: calc(var(--storedeck-is, 100) * 0.74%);
}

/* Podium: the button is a round pedestal, its top an ellipse the picture
   stands on (the picture is above the button here), the name on its
   front. --storedeck-pod follows the button colour, hover included. */
.storedeck[data-tile-style="podium"] .storedeck-tile {
	--storedeck-pod: var(--storedeck-pill-bg);
}

.storedeck[data-tile-style="podium"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) {
	--storedeck-pod: var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="podium"] .storedeck-tile__media {
	z-index: 2;
	clip-path: inset(-9999px -9999px 0 -9999px);
}

.storedeck[data-tile-style="podium"] .storedeck-tile__pill {
	width: 74%;
	height: calc(var(--storedeck-pill-h) * 1.5cqi);
	padding-top: calc(var(--storedeck-pill-h) * 0.3cqi);
	overflow: visible;
	border-radius: 0 0 50% 50% / 0 0 32% 32%;
}

.storedeck[data-tile-style="podium"] .storedeck-tile__pill::before {
	content: "";
	position: absolute;
	top: calc(var(--storedeck-pill-h) * -0.3cqi);
	right: 0;
	left: 0;
	height: calc(var(--storedeck-pill-h) * 0.6cqi);
	border-radius: 50%;
	background: color-mix(in srgb, #fff 24%, var(--storedeck-pod));
	transition: background-color 0.3s ease;
}

.storedeck[data-tile-style="podium"] .storedeck-tile__label {
	position: relative;
}

/* Ticket: a card with a notch in each side where the stub begins, a
   dashed tear line across, and the name on the stub. --storedeck-cut is
   that line, below the picture; in cqi of the tile wherever it is used. */
.storedeck[data-tile-style="ticket"] .storedeck-tile {
	--storedeck-cut: calc(var(--storedeck-media-h) * 1cqi + 7cqi);
}

.storedeck[data-tile-style="ticket"] .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4cqi;
	background: var(--storedeck-tile-bg);
	-webkit-mask:
		radial-gradient(circle 4.5cqi at 0 var(--storedeck-cut), transparent 97%, #000 100%) left / 51% 100% no-repeat,
		radial-gradient(circle 4.5cqi at 100% var(--storedeck-cut), transparent 97%, #000 100%) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle 4.5cqi at 0 var(--storedeck-cut), transparent 97%, #000 100%) left / 51% 100% no-repeat,
		radial-gradient(circle 4.5cqi at 100% var(--storedeck-cut), transparent 97%, #000 100%) right / 51% 100% no-repeat;
}

.storedeck[data-tile-style="ticket"] .storedeck-tile::after {
	content: "";
	position: absolute;
	top: var(--storedeck-cut);
	right: 7cqi;
	left: 7cqi;
	border-top: 0.6cqi dashed color-mix(in srgb, var(--storedeck-tile-text) 40%, transparent);
}

.storedeck[data-tile-style="ticket"] .storedeck-tile__media {
	margin-top: 5cqi;
	clip-path: inset(0);
}

/* Neon: a glowing frame from a quarter down the picture, and a glowing
   name inside it; both switch to the hover colour. */
.storedeck[data-tile-style="neon"] .storedeck-tile {
	--storedeck-neon: color-mix(in srgb, var(--storedeck-pill-bg) 60%, #fff);
}

.storedeck[data-tile-style="neon"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) {
	--storedeck-neon: var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="neon"] .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: calc(var(--storedeck-media-h) * 0.24cqi) 0 0;
	border: 0.7cqi solid var(--storedeck-neon);
	border-radius: 7cqi;
	box-shadow:
		0 0 2.5cqi var(--storedeck-neon),
		inset 0 0 2.5cqi color-mix(in srgb, var(--storedeck-neon) 55%, transparent);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.storedeck[data-tile-style="neon"] .storedeck-tile:is(:hover, :focus-visible)::before {
	animation: storedeck-flicker 0.9s linear;
}

@keyframes storedeck-flicker {
	0%, 18%, 22%, 50%, 54%, 100% { opacity: 1; }
	20%, 52% { opacity: 0.35; }
}

/* Stack: the card and a second one fanned out behind it, both on the
   tile's pseudo-elements under the picture (the tile is a stacking
   context, so z-index -1 stays inside it). */
.storedeck[data-tile-style="stack"] .storedeck-tile::before,
.storedeck[data-tile-style="stack"] .storedeck-tile::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(var(--storedeck-media-h) * 0.18cqi) 0 0;
	border-radius: 6cqi;
}

.storedeck[data-tile-style="stack"] .storedeck-tile::before {
	background: color-mix(in srgb, var(--storedeck-tile-bg) 72%, #000);
	box-shadow: -2cqi -1.2cqi 0 color-mix(in srgb, var(--storedeck-tile-bg) 45%, #000);
	rotate: -5deg;
	transition: rotate 0.4s var(--storedeck-ease);
}

.storedeck[data-tile-style="stack"] .storedeck-tile::after {
	background: var(--storedeck-tile-bg);
	box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.3);
}

.storedeck[data-tile-style="stack"] .storedeck-tile:is(:hover, :focus-visible, .is-active)::before {
	rotate: -9deg;
}

.storedeck[data-tile-style="stack"] .storedeck-tile__media {
	clip-path: inset(-9999px -9999px 0 -9999px);
}

.storedeck[data-tile-style="stack"] .storedeck-tile__pill {
	width: 80%;
	margin: 4cqi auto 7cqi;
}

/* Two colours: a card cut on a slant, the button colour above, the
   backing below, the picture across the cut and the name underneath. */
.storedeck[data-tile-style="split"] .storedeck-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 7cqi;
	background: linear-gradient(168deg, var(--storedeck-pill-bg) 0 57%, var(--storedeck-tile-bg) 57.3%);
}

.storedeck[data-tile-style="split"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current)::before {
	background: linear-gradient(168deg, var(--storedeck-pill-bg-h) 0 57%, var(--storedeck-tile-bg) 57.3%);
}

.storedeck[data-tile-style="split"] .storedeck-tile__media {
	margin-top: 5cqi;
	clip-path: inset(-9999px -9999px 0 -9999px);
}

/* Plain names on a panel (ticket, neon, two colours): the name as text,
   with room inside the panel. */
.storedeck:is([data-tile-style="ticket"], [data-tile-style="neon"], [data-tile-style="split"]) .storedeck-tile__pill {
	width: 100%;
	height: auto;
	padding: 5cqi 6cqi 6cqi;
	overflow: visible;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="neon"] .storedeck-tile__pill {
	padding-top: 3.5cqi;
	color: color-mix(in srgb, var(--storedeck-neon) 35%, #fff);
	text-shadow: 0 0 1cqi var(--storedeck-neon), 0 0 3cqi var(--storedeck-neon);
}

.storedeck:is([data-tile-style="ticket"], [data-tile-style="split"]) .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

/* Bubble: the name in a speech bubble above the picture, its tail
   pointing down at it. The tail inherits the bubble colour, hover too. */
.storedeck[data-tile-style="bubble"] .storedeck-tile {
	flex-direction: column-reverse;
}

.storedeck[data-tile-style="bubble"] .storedeck-tile__media {
	clip-path: none;
}

.storedeck[data-tile-style="bubble"] .storedeck-tile__pill {
	margin-bottom: 5cqi;
	overflow: visible;
	border-radius: calc(var(--storedeck-pill-h) * 0.3cqi);
}

.storedeck[data-tile-style="bubble"] .storedeck-tile__pill::before {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: -1.8cqi;
	left: 50%;
	width: 4.4cqi;
	height: 4.4cqi;
	background: inherit;
	rotate: 45deg;
	translate: -50% 0;
}

/* Poster: a huge name across the top, the picture standing in front of
   its lower half. */
.storedeck[data-tile-style="poster"] .storedeck-tile__media {
	z-index: 2;
	height: calc((var(--storedeck-media-h) + 8) * 1cqi);
	clip-path: none;
}

.storedeck[data-tile-style="poster"] .storedeck-tile__img {
	height: calc(var(--storedeck-is, 100) * 0.92%);
}

.storedeck[data-tile-style="poster"] .storedeck-tile__pill {
	position: absolute;
	z-index: 1;
	top: 3cqi;
	right: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 0 2cqi;
	overflow: visible;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="poster"] .storedeck-tile__label {
	--storedeck-fs: 2;
}

.storedeck[data-tile-style="poster"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

/* --- more layouts --------------------------------------------------------- */

/* Mirrored side by side, and every second tile of a row in zigzag. */
.storedeck[data-tile-style="side-right"] .storedeck-tile,
.storedeck[data-tile-style="zigzag"] .storedeck-tile:nth-child(even) {
	flex-direction: row-reverse;
}

.storedeck[data-tile-style="side-right"] .storedeck-tile .storedeck-tile__media,
.storedeck[data-tile-style="zigzag"] .storedeck-tile:nth-child(even) .storedeck-tile__media {
	clip-path: inset(-9999px -9999px 0 -9999px round 0 0 8cqi 0);
}

.storedeck[data-tile-style="side-right"] .storedeck-tile .storedeck-tile__pill,
.storedeck[data-tile-style="zigzag"] .storedeck-tile:nth-child(even) .storedeck-tile__pill {
	padding: 0 2cqi 0 6cqi;
}

/* List: a small round picture and the name beside it, like an entry in a
   category list. */
.storedeck[data-tile-style="list"] .storedeck-tile {
	flex-direction: row;
}

.storedeck[data-tile-style="list"] .storedeck-tile__media {
	flex: none;
	width: 32cqi;
	height: 32cqi;
	border-radius: 50%;
	background: var(--storedeck-tile-bg);
	clip-path: circle(50%);
	transition: box-shadow 0.3s ease;
}

.storedeck[data-tile-style="list"] .storedeck-tile__img {
	bottom: 8%;
	height: calc(var(--storedeck-is, 100) * 0.84%);
}

.storedeck[data-tile-style="list"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__media {
	box-shadow: inset 0 0 0 1.4cqi var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="list"] .storedeck-tile__label {
	--storedeck-fs: 0.8;
}

/* Banner: the button as a colour block on the left with the name in it,
   the picture on the right standing over its edge. The name keeps clear
   of the part the picture covers. */
.storedeck[data-tile-style="banner"] .storedeck-tile {
	flex-direction: row;
}

.storedeck[data-tile-style="banner"] .storedeck-tile__media {
	z-index: 2;
	width: 56cqi;
	height: 60cqi;
	margin-left: auto;
	clip-path: inset(-9999px -9999px 0 -9999px);
}

.storedeck[data-tile-style="banner"] .storedeck-tile__pill {
	position: absolute;
	top: 14cqi;
	bottom: 0;
	left: 0;
	width: 64%;
	height: auto;
	padding: 0 20cqi 0 5cqi;
	justify-content: flex-start;
	border-radius: 4cqi;
}

.storedeck[data-tile-style="banner"] .storedeck-tile__label {
	--storedeck-fs: 0.9;
}

/* Diagonal: a large name at the top left, the picture at the bottom right
   on a backing set off from it. */
.storedeck[data-tile-style="diagonal"] .storedeck-tile__media {
	z-index: 2;
	width: 80cqi;
	margin: 11cqi 0 0 auto;
	clip-path: none;
}

.storedeck[data-tile-style="diagonal"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	inset: 18% 0 0 10%;
	border-radius: 6cqi;
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="diagonal"] .storedeck-tile__pill {
	position: absolute;
	z-index: 1;
	top: 2cqi;
	left: 0;
	width: 84%;
	height: auto;
	padding: 0;
	justify-content: flex-start;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

.storedeck[data-tile-style="diagonal"] .storedeck-tile__label {
	--storedeck-fs: 1.25;
}

.storedeck:is([data-tile-style="diagonal"], [data-tile-style="list"]) .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	color: var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="list"] .storedeck-tile__pill {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	padding: 0 2cqi 0 5cqi;
	justify-content: flex-start;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--storedeck-tile-text);
}

/* Tab: a folder. The button is the tab at the top left, the card under it
   in the same colour holds the picture; both take the hover colour. */
.storedeck[data-tile-style="tab"] .storedeck-tile {
	flex-direction: column-reverse;
}

.storedeck[data-tile-style="tab"] .storedeck-tile__pill {
	align-self: flex-start;
	width: auto;
	max-width: 80%;
	height: calc(var(--storedeck-pill-h) * 0.8cqi);
	padding: 0 5cqi;
	border-radius: 3.5cqi 3.5cqi 0 0;
	box-shadow: none;
}

.storedeck[data-tile-style="tab"] .storedeck-tile__label {
	--storedeck-fs: 0.72;
}

.storedeck[data-tile-style="tab"] .storedeck-tile__media {
	height: calc((var(--storedeck-media-h) + 6) * 1cqi);
	background-color: var(--storedeck-pill-bg);
	clip-path: inset(0 round 0 4cqi 4cqi 4cqi);
	transition: background-color 0.3s ease;
}

.storedeck[data-tile-style="tab"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__media {
	background-color: var(--storedeck-pill-bg-h);
}

.storedeck[data-tile-style="tab"] .storedeck-tile__img {
	bottom: 5%;
	height: calc(var(--storedeck-is, 100) * 0.88%);
}

/* TV lower third: the picture on a backing, the name in a bar across its
   lower left with an accent strip; on hover bar and strip swap colours. */
.storedeck[data-tile-style="lowerthird"] .storedeck-tile__media {
	height: calc((var(--storedeck-media-h) + 14) * 1cqi);
	clip-path: inset(0 round 5cqi);
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--storedeck-tile-bg);
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile__img {
	height: calc(var(--storedeck-is, 100) * 0.94%);
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile__pill {
	position: absolute;
	z-index: 2;
	bottom: 9cqi;
	left: 0;
	width: auto;
	max-width: 90%;
	height: calc(var(--storedeck-pill-h) * 0.82cqi);
	padding: 0 5cqi 0 8cqi;
	justify-content: flex-start;
	border-radius: 0 1.5cqi 1.5cqi 0;
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile__pill::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3cqi;
	background: var(--storedeck-pill-bg-h);
	transition: background-color 0.3s ease;
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill::before {
	background: var(--storedeck-pill-bg);
}

.storedeck[data-tile-style="lowerthird"] .storedeck-tile__label {
	--storedeck-fs: 0.75;
}

/* Stamp: the name in a round stamp with a double ring, tilted over the
   picture's top right corner. */
.storedeck[data-tile-style="stamp"] .storedeck-tile__media {
	height: calc((var(--storedeck-media-h) + 8) * 1cqi);
	clip-path: none;
}

.storedeck[data-tile-style="stamp"] .storedeck-tile__img {
	height: calc(var(--storedeck-is, 100) * 0.9%);
}

.storedeck[data-tile-style="stamp"] .storedeck-tile__pill {
	position: absolute;
	z-index: 2;
	top: -2cqi;
	right: -1cqi;
	width: 47cqi;
	height: 47cqi;
	padding: 0 5cqi;
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 1.3cqi var(--storedeck-pill-bg),
		inset 0 0 0 1.8cqi currentColor,
		0 1cqi 2.5cqi rgba(0, 0, 0, 0.3);
	rotate: -14deg;
}

.storedeck[data-tile-style="stamp"] .storedeck-tile:is(:hover, :focus-visible, .is-active, .is-current) .storedeck-tile__pill {
	box-shadow:
		inset 0 0 0 1.3cqi var(--storedeck-pill-bg-h),
		inset 0 0 0 1.8cqi currentColor,
		0 1cqi 2.5cqi rgba(0, 0, 0, 0.3);
}

.storedeck[data-tile-style="stamp"] .storedeck-tile__label {
	--storedeck-fs: 0.66;
}

.storedeck:is([data-tile-style="list"], [data-tile-style="diagonal"], [data-tile-style="lowerthird"], [data-tile-style="stamp"], [data-tile-style="tab"]) .storedeck-tile__pill::after {
	display: none !important;
}

/* No light sweeping over the button where it is not a plain button. */
.storedeck:is([data-tile-style="podium"], [data-tile-style="ticket"], [data-tile-style="neon"], [data-tile-style="split"], [data-tile-style="bubble"], [data-tile-style="poster"]) .storedeck-tile__pill::after {
	display: none !important;
}

/* --- idle ------------------------------------------------------------------
 * A slow loop on the picture area rather than the picture, so it adds to
 * the hover effect instead of replacing it. Neighbours run out of step. */

.storedeck[data-idle] .storedeck-tile__media {
	transform-origin: 50% 100%;
}

.storedeck[data-idle="float"] .storedeck-tile__media {
	animation: storedeck-float 3.4s ease-in-out infinite alternate;
}

.storedeck[data-idle="sway"] .storedeck-tile__media {
	animation: storedeck-sway 3.8s ease-in-out infinite alternate;
}

.storedeck[data-idle="breathe"] .storedeck-tile__media {
	animation: storedeck-breathe 3s ease-in-out infinite alternate;
}

.storedeck[data-idle="bob"] .storedeck-tile__media {
	animation: storedeck-bob 3.6s ease-in-out infinite alternate;
}

.storedeck[data-idle="turn"] .storedeck-tile__media {
	animation: storedeck-turn 4.2s ease-in-out infinite alternate;
}

.storedeck[data-idle="glow"] .storedeck-tile__media {
	animation: storedeck-glow-idle 2.8s ease-in-out infinite alternate;
}

/* Still most of the time, then a hop or a twitch: livelier than a loop. */
.storedeck[data-idle="hop"] .storedeck-tile__media {
	animation: storedeck-hop-idle 3.4s infinite;
}

.storedeck[data-idle="wiggle"] .storedeck-tile__media {
	animation: storedeck-wiggle-idle 3.8s infinite;
}

.storedeck[data-idle] .storedeck-tile:nth-child(4n + 2) .storedeck-tile__media { animation-delay: -1.1s; }
.storedeck[data-idle] .storedeck-tile:nth-child(4n + 3) .storedeck-tile__media { animation-delay: -2.3s; }
.storedeck[data-idle] .storedeck-tile:nth-child(4n) .storedeck-tile__media     { animation-delay: -0.6s; }

@keyframes storedeck-float {
	from { transform: translateY(0); }
	to   { transform: translateY(-2.5cqi); }
}

@keyframes storedeck-sway {
	from { transform: rotate(-2deg); }
	to   { transform: rotate(2deg); }
}

@keyframes storedeck-bob {
	from { transform: translateY(0) rotate(-2.5deg); }
	to   { transform: translateY(-2cqi) rotate(2.5deg); }
}

@keyframes storedeck-turn {
	from { transform: perspective(700px) rotateY(-16deg); }
	to   { transform: perspective(700px) rotateY(16deg); }
}

/* From a transparent color(), as in the glow hover: from a plain one
   Chrome draws the fade black. */
@keyframes storedeck-glow-idle {
	from { filter: drop-shadow(0 0 0 color(srgb 0 0 0 / 0)); }
	to   { filter: drop-shadow(0 0 2.6cqi color-mix(in srgb, var(--storedeck-pill-bg-h) 70%, transparent)); }
}

@keyframes storedeck-hop-idle {
	0%, 72%, 100% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	80% { transform: translateY(-4cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	88% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	93% { transform: translateY(-1.2cqi); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
}

@keyframes storedeck-wiggle-idle {
	0%, 80%, 100% { transform: none; }
	84% { transform: rotate(-4deg); }
	88% { transform: rotate(4deg); }
	92% { transform: rotate(-2deg); }
	96% { transform: rotate(1deg); }
}

@keyframes storedeck-breathe {
	from { transform: scale(1); }
	to   { transform: scale(1.035); }
}

/* --- entrance ------------------------------------------------------------
 * Tiles start hidden only while an entrance is set. storedeck.js adds
 * .storedeck--live and then .is-in to each tile as it scrolls into view. Should
 * the script never run, the fail-safe animation shows everything after
 * 2.5 s, so the menu cannot stay invisible. --i is the tile's place in the
 * chosen order, which sets its delay. */

.storedeck[data-anim="rise"]   { --storedeck-in: storedeck-rise; }
.storedeck[data-anim="drop"]   { --storedeck-in: storedeck-drop; }
.storedeck[data-anim="left"]   { --storedeck-in: storedeck-left; }
.storedeck[data-anim="right"]  { --storedeck-in: storedeck-right; }
.storedeck[data-anim="sides"]  { --storedeck-in: storedeck-left; }
.storedeck[data-anim="fade"]   { --storedeck-in: storedeck-fade; }
.storedeck[data-anim="blur"]   { --storedeck-in: storedeck-blur; }
.storedeck[data-anim="zoom"]   { --storedeck-in: storedeck-zoom; }
.storedeck[data-anim="shrink"] { --storedeck-in: storedeck-shrink; }
.storedeck[data-anim="pop"]    { --storedeck-in: storedeck-pop; }
.storedeck[data-anim="bounce"] { --storedeck-in: storedeck-bounce; }
.storedeck[data-anim="flip"]   { --storedeck-in: storedeck-flip; }
.storedeck[data-anim="twist"]  { --storedeck-in: storedeck-twist; }
.storedeck[data-anim="emerge"] { --storedeck-in: storedeck-fade; }
.storedeck[data-anim="rotate"]  { --storedeck-in: storedeck-in-rotate; }
.storedeck[data-anim="swing"]   { --storedeck-in: storedeck-in-swing; }
.storedeck[data-anim="unfold"]  { --storedeck-in: storedeck-in-unfold; }
.storedeck[data-anim="curtain"] { --storedeck-in: storedeck-in-curtain; }
.storedeck[data-anim="wipe"]    { --storedeck-in: storedeck-in-wipe; }
.storedeck[data-anim="iris"]    { --storedeck-in: storedeck-in-iris; }
.storedeck[data-anim="skew"]    { --storedeck-in: storedeck-in-skew; }
.storedeck[data-anim="rubber"]  { --storedeck-in: storedeck-in-rubber; }

/* Alternating: every second tile comes from the right. The heading has no
 * side to come from, so it fades. */
.storedeck[data-anim="sides"] .storedeck-tile:nth-child(even) {
	--storedeck-in: storedeck-right;
}

.storedeck[data-anim="sides"] .storedeck__title {
	--storedeck-in: storedeck-fade;
}

.storedeck:is([data-anim="flip"], [data-anim="unfold"], [data-anim="rubber"]) :is(.storedeck-tile, .storedeck__title) {
	transform-origin: 50% 100%;
}

.storedeck[data-anim="swing"] :is(.storedeck-tile, .storedeck__title) {
	transform-origin: 50% 0;
}

.storedeck[data-anim]:not([data-anim="none"]) :is(.storedeck-tile, .storedeck__title) {
	opacity: 0;
	animation: storedeck-failsafe 0.01s linear 2.5s forwards;
}

/* [data-anim] keeps these at least as specific as the hiding rule above. */
.storedeck.storedeck--live[data-anim] :is(.storedeck-tile, .storedeck__title) {
	animation: none;
}

.storedeck.storedeck--live[data-anim] :is(.storedeck-tile, .storedeck__title).is-in {
	animation: var(--storedeck-in) var(--storedeck-dur) var(--storedeck-ease) calc(var(--i, 0) * var(--storedeck-stagger)) both;
}

/* Emerge: the button unrolls, then the picture rises onto it. These stay
 * less specific than the hover rules and fill backwards only, so once they
 * finish the picture's own hover effect takes over again. */
.storedeck[data-anim="emerge"] .is-in .storedeck-tile__pill {
	animation: storedeck-unroll var(--storedeck-dur) var(--storedeck-ease) calc(var(--i, 0) * var(--storedeck-stagger)) backwards;
}

.storedeck[data-anim="emerge"] .is-in .storedeck-tile__img {
	animation: storedeck-emerge var(--storedeck-dur) var(--storedeck-ease) calc(var(--i, 0) * var(--storedeck-stagger) + var(--storedeck-dur) * 0.4) backwards;
}

@keyframes storedeck-failsafe {
	to { opacity: 1; }
}

@keyframes storedeck-rise {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-drop {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-left {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-right {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes storedeck-blur {
	from { opacity: 0; filter: blur(14px); transform: scale(1.06); }
	to   { opacity: 1; filter: none; transform: none; }
}

@keyframes storedeck-zoom {
	from { opacity: 0; transform: scale(0.82); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-shrink {
	from { opacity: 0; transform: scale(1.25); }
	to   { opacity: 1; transform: none; }
}

/* A damped spring, written out because no timing function overshoots twice. */
@keyframes storedeck-pop {
	0%   { opacity: 0; transform: scale(0.55); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
	45%  { opacity: 1; transform: scale(1.08); animation-timing-function: ease-in-out; }
	70%  { transform: scale(0.97); animation-timing-function: ease-in-out; }
	87%  { transform: scale(1.015); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: none; }
}

/* Falls in from above and settles with two smaller bounces. */
@keyframes storedeck-bounce {
	0%   { opacity: 0; transform: translateY(-70px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	40%  { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
	60%  { transform: translateY(-18px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	78%  { transform: none; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
	90%  { transform: translateY(-5px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	100% { opacity: 1; transform: none; }
}

/* Stands up from lying flat, hinged on its bottom edge. */
@keyframes storedeck-flip {
	from { opacity: 0; transform: perspective(900px) rotateX(-80deg); }
	60%  { opacity: 1; }
	to   { opacity: 1; transform: perspective(900px) rotateX(0deg); }
}

@keyframes storedeck-twist {
	from { opacity: 0; transform: translateY(30px) rotate(-10deg) scale(0.9); }
	to   { opacity: 1; transform: none; }
}

/* --- more entrances ---------------------------------------------------------
 * The reveals (curtain, wipe, iris) clip the tile instead of fading it. The
 * clip opens 40% past the tile, so a picture standing out of it is not cut
 * short, on a curve of its own: the menu's fast-out ease would uncover the
 * tile in a blink and spend the rest on empty space. The clip is dropped at
 * the very end, as one left on the tile would cut the glass style's blur
 * down to the tile. */

@keyframes storedeck-in-rotate {
	from { opacity: 0; transform: rotate(-16deg) scale(0.82); }
	to   { opacity: 1; transform: none; }
}

/* Hangs from its top edge and swings into place. */
@keyframes storedeck-in-swing {
	0%   { opacity: 0; transform: perspective(900px) rotateX(-95deg); }
	45%  { opacity: 1; transform: perspective(900px) rotateX(18deg); }
	70%  { transform: perspective(900px) rotateX(-8deg); }
	88%  { transform: perspective(900px) rotateX(3deg); }
	100% { opacity: 1; transform: perspective(900px) rotateX(0deg); }
}

/* Grows up from the button, overshooting a little. */
@keyframes storedeck-in-unfold {
	0%   { opacity: 0; transform: scaleY(0.05); }
	60%  { opacity: 1; transform: scaleY(1.06); }
	80%  { transform: scaleY(0.98); }
	100% { opacity: 1; transform: none; }
}

@keyframes storedeck-in-curtain {
	0%    { opacity: 1; clip-path: inset(100% -40% -40% -40%); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
	99.9% { clip-path: inset(-40%); }
	100%  { opacity: 1; clip-path: none; }
}

@keyframes storedeck-in-wipe {
	0%    { opacity: 1; clip-path: inset(-40% 100% -40% -40%); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
	99.9% { clip-path: inset(-40%); }
	100%  { opacity: 1; clip-path: none; }
}

@keyframes storedeck-in-iris {
	0%    { opacity: 1; clip-path: circle(0% at 50% 60%); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
	99.9% { clip-path: circle(110% at 50% 60%); }
	100%  { opacity: 1; clip-path: none; }
}

@keyframes storedeck-in-skew {
	from { opacity: 0; transform: translateX(-70px) skewX(22deg); }
	65%  { opacity: 1; transform: translateX(6px) skewX(-4deg); }
	to   { opacity: 1; transform: none; }
}

/* Squashed and stretched like a rubber ball landing. */
@keyframes storedeck-in-rubber {
	0%   { opacity: 0; transform: scale(0.6, 1.25); }
	35%  { opacity: 1; transform: scale(1.18, 0.84); }
	55%  { transform: scale(0.92, 1.08); }
	75%  { transform: scale(1.04, 0.97); }
	100% { opacity: 1; transform: none; }
}

@keyframes storedeck-unroll {
	from { opacity: 0; transform: scaleX(0.15); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-emerge {
	from { opacity: 0; transform: translateY(35%) scale(0.85); }
	to   { opacity: 1; transform: none; }
}

/* --- shelf -----------------------------------------------------------------
 * Shelf mode: a panel of the category's products opens under the line of
 * tiles holding the clicked one. It is a flex item of the full row width,
 * placed by storedeck.js after the last tile of that line. The negative top margin
 * cancels the row gap, and the 0fr/1fr grid row animates the height. */

.storedeck .storedeck-shelf {
	container: storedeck-shelf / inline-size;
	display: grid;
	flex: 0 0 100%;
	grid-template-rows: 0fr;
	/* Not stretched to its flex line: stretching subtracts the negative
	   top margin from the line, which gave a closed shelf a row gap of
	   height and made it start the unfold from there. */
	align-self: flex-start;
	min-width: 0;
	margin-top: calc(var(--storedeck-rows-gap) * -1cqi);
	opacity: 0;
	transition:
		grid-template-rows var(--storedeck-sh-dur, 450ms) var(--storedeck-ease),
		opacity calc(var(--storedeck-sh-dur, 450ms) * 0.66) ease;
}

/* Opening effects (data-sh-anim). The height always unfolds; on top of it
   the panel moves from a closed pose. The clip around it turns a slide into
   a reveal, and zoom grows from the pointer, so from the tile. */
.storedeck-shelf__panel {
	transform-origin: var(--storedeck-notch, 50%) 0;
	transition: transform var(--storedeck-sh-dur, 450ms) var(--storedeck-ease);
}

.storedeck[data-sh-anim="slide"] .storedeck-shelf:not(.is-open) .storedeck-shelf__panel {
	transform: translateY(-32px);
}

.storedeck[data-sh-anim="zoom"] .storedeck-shelf:not(.is-open) .storedeck-shelf__panel {
	transform: scale(0.88);
}

.storedeck[data-sh-anim="flip"] .storedeck-shelf:not(.is-open) .storedeck-shelf__panel {
	transform: perspective(1200px) rotateX(-28deg);
}

.storedeck[data-sh-anim="drop"] .storedeck-shelf:not(.is-open) .storedeck-shelf__panel {
	transform: translateY(-70px) scale(0.97);
}

.storedeck[data-sh-anim="tilt"] .storedeck-shelf:not(.is-open) .storedeck-shelf__panel {
	transform: translateY(-24px) rotate(-2.5deg);
}

.storedeck[data-sh-anim="none"] :is(.storedeck-shelf, .storedeck-shelf__panel) {
	transition: none;
}

.storedeck .storedeck-shelf.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.storedeck-shelf__clip {
	min-height: 0;
	overflow: hidden;
}

/* Header layouts (data-sh-head), all on one grid so no markup changes:
 * split   title left, "see all" right of it, close far right
 * bottom  title and close on top, "see all" under the carousel, left
 * center  title centred (a spacer mirrors the close button), "see all"
 *         centred under the carousel
 * The head is display: contents, so its three parts are grid items. */
.storedeck-shelf__panel {
	position: relative;
	display: grid;
	grid-template-areas:
		"title all close"
		"body  body body";
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: clamp(12px, 2.4cqi, 22px) 14px;
	align-items: center;
	margin-top: 14px;
	/* Full spacing on a shelf 1000 px wide or more, proportionally less
	   below, never under 12 px. */
	padding: clamp(12px, calc(var(--storedeck-sh-pad, 30) * 0.1cqi), calc(var(--storedeck-sh-pad, 30) * 1px));
	border-radius: var(--storedeck-sh-radius, 20px);
	background: var(--storedeck-shelf-bg);
	color: var(--storedeck-shelf-text);
}

.storedeck[data-sh-head="bottom"] .storedeck-shelf__panel {
	grid-template-areas:
		"title close"
		"body  body"
		"all   all";
	grid-template-columns: minmax(0, 1fr) auto;
}

.storedeck[data-sh-head="bottom"] .storedeck-shelf__all {
	justify-self: start;
}

.storedeck[data-sh-head="center"] .storedeck-shelf__panel {
	grid-template-areas:
		"space title close"
		"body  body  body"
		"all   all   all";
	grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.storedeck[data-sh-head="center"] .storedeck-shelf__title {
	text-align: center;
}

.storedeck[data-sh-head="center"] .storedeck-shelf__all {
	justify-self: center;
}

.storedeck--sh-nonotch .storedeck-shelf__panel::before {
	display: none;
}

/* The pointer up to the tile that opened the shelf. */
.storedeck-shelf__panel::before {
	content: "";
	position: absolute;
	top: -13px;
	left: var(--storedeck-notch, 50%);
	width: 28px;
	height: 14px;
	translate: -50% 0;
	background: inherit;
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Stroke instead of fill (data-sh-bg="stroke"): the shelf colour draws a
 * frame, and the pointer becomes an open caret of the same stroke.
 *
 * The caret is one clipped shape with 45 degree legs: apex 14 px above the
 * frame, feet standing in the frame line. Its legs are w thick, which on a
 * 45 degree leg is w * 1.4142 measured level. The frame is masked open for
 * exactly the caret's inner opening, so each leg meets the line in a clean
 * mitre at any stroke width. The pointer's position (--storedeck-notch) is moved
 * by storedeck.js, which keeps caret and gap together while it slides. */
.storedeck[data-sh-bg="stroke"] .storedeck-shelf__panel {
	--storedeck-sw: var(--storedeck-sh-stroke, 2px);
	--storedeck-gap: calc(14px - var(--storedeck-sw) * 0.4142);
	margin-top: 17px;
	background: transparent;
}

.storedeck[data-sh-bg="stroke"] .storedeck-shelf__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--storedeck-sw) solid var(--storedeck-shelf-bg);
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask:
		linear-gradient(to right, #000 calc(var(--storedeck-notch, 50%) - var(--storedeck-gap)), transparent 0 calc(var(--storedeck-notch, 50%) + var(--storedeck-gap)), #000 0) top / 100% var(--storedeck-sw) no-repeat,
		linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--storedeck-sw)) no-repeat;
	mask:
		linear-gradient(to right, #000 calc(var(--storedeck-notch, 50%) - var(--storedeck-gap)), transparent 0 calc(var(--storedeck-notch, 50%) + var(--storedeck-gap)), #000 0) top / 100% var(--storedeck-sw) no-repeat,
		linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--storedeck-sw)) no-repeat;
}

.storedeck[data-sh-bg="stroke"].storedeck--sh-nonotch .storedeck-shelf__panel::after {
	-webkit-mask: none;
	mask: none;
}

.storedeck[data-sh-bg="stroke"] .storedeck-shelf__panel::before {
	top: -14px;
	width: calc((14px + var(--storedeck-sw)) * 2);
	height: calc(14px + var(--storedeck-sw));
	background: var(--storedeck-shelf-bg);
	-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%, calc(100% - var(--storedeck-sw) * 1.4142) 100%, 50% calc(var(--storedeck-sw) * 1.4142), calc(var(--storedeck-sw) * 1.4142) 100%);
	clip-path: polygon(0 100%, 50% 0, 100% 100%, calc(100% - var(--storedeck-sw) * 1.4142) 100%, 50% calc(var(--storedeck-sw) * 1.4142), calc(var(--storedeck-sw) * 1.4142) 100%);
}

.storedeck-shelf__head {
	display: contents;
}

/* The title keeps its set size on a wide shelf and shrinks with a narrow
   one, down to 60 % of it. */
.storedeck .storedeck-shelf__title {
	grid-area: title;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--storedeck-sh-title-color, inherit);
	font-family: var(--storedeck-font);
	font-size: clamp(calc(var(--storedeck-sh-title, 28) * 0.6px), calc(var(--storedeck-sh-title, 28) * 0.1cqi), calc(var(--storedeck-sh-title, 28) * 1px));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-transform: none;
}

.storedeck--upper .storedeck-shelf__title {
	text-transform: uppercase;
}

.storedeck--sh-notitle .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__title {
	display: none;
}

/* Without a title the top row would hold only the close button, an empty
   band over the products. The button moves in with "see all" instead, or
   beside the carousel when "see all" is off too. */
.storedeck--sh-notitle[data-sh-head="split"] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
	grid-template-areas:
		"all  close"
		"body body";
	grid-template-columns: minmax(0, 1fr) auto;
}

.storedeck--sh-notitle[data-sh-head="split"] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__all {
	justify-self: end;
}

.storedeck--sh-notitle[data-sh-head="bottom"] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
	grid-template-areas:
		"body body"
		"all  close";
	grid-template-columns: minmax(0, 1fr) auto;
}

.storedeck--sh-notitle[data-sh-head="center"] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
	grid-template-areas:
		"body  body body"
		"space all  close";
}

.storedeck--sh-notitle.storedeck--shelf-noall[data-sh-head] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
	grid-template-areas: "body close";
	grid-template-columns: minmax(0, 1fr) auto;
}

.storedeck--sh-notitle.storedeck--shelf-noall[data-sh-head] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__close {
	align-self: start;
}

/* "See all": a pill of the same family as the tiles, with the product count
   in a badge and an arrow that steps forward on hover. */
.storedeck .storedeck-shelf__all {
	grid-area: all;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 6px 6px 6px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--storedeck-pill-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	color: var(--storedeck-pill-text);
	font-family: var(--storedeck-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s var(--storedeck-ease);
}

.storedeck--upper .storedeck-shelf__all,
.storedeck--upper .storedeck-card__more-text {
	text-transform: uppercase;
}

.storedeck .storedeck-shelf__all:hover,
.storedeck .storedeck-shelf__all:focus-visible {
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
	transform: translateY(-2px);
}

.storedeck .storedeck-shelf__all:focus-visible {
	outline: 3px solid var(--storedeck-pill-bg-h);
	outline-offset: 3px;
}

.storedeck .storedeck-shelf__all:active {
	transform: scale(0.97);
}

.storedeck-shelf__all-text {
	margin-right: -0.12em;
	text-box: trim-both cap alphabetic;
}

.storedeck-shelf__count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 13px;
	background: color-mix(in srgb, currentColor 18%, transparent);
	font-size: 12px;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.storedeck-shelf__count:empty {
	display: none;
}

.storedeck-shelf__all-arrow {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--storedeck-pill-text);
	color: var(--storedeck-pill-bg);
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s var(--storedeck-ease);
}

.storedeck .storedeck-shelf__all:hover .storedeck-shelf__all-arrow,
.storedeck .storedeck-shelf__all:focus-visible .storedeck-shelf__all-arrow,
.storedeck .storedeck-card--more .storedeck-card__link:hover .storedeck-shelf__all-arrow {
	background: var(--storedeck-pill-text-h);
	color: var(--storedeck-pill-bg-h);
	transform: translateX(4px);
}

/* "See all" as an outline: transparent, ringed in the shelf text colour,
   filled with the hover colours on hover. */
.storedeck[data-all-style="outline"] .storedeck-shelf__all {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
	color: inherit;
}

.storedeck[data-all-style="outline"] .storedeck-shelf__all-arrow {
	background: currentColor;
	color: var(--storedeck-shelf-bg);
}

.storedeck[data-all-style="outline"] .storedeck-shelf__all:is(:hover, :focus-visible) {
	box-shadow: inset 0 0 0 2px var(--storedeck-pill-bg-h);
}

/* "See all" as a plain text link with an arrow. */
.storedeck[data-all-style="link"] .storedeck-shelf__all {
	min-height: 0;
	padding: 8px 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

.storedeck[data-all-style="link"] .storedeck-shelf__all-text {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.storedeck[data-all-style="link"] .storedeck-shelf__all-arrow {
	width: auto;
	height: auto;
	background: none;
	color: inherit;
}

.storedeck[data-all-style="link"] .storedeck-shelf__all:is(:hover, :focus-visible) {
	background: none;
	color: var(--storedeck-pill-bg-h);
	transform: none;
}

.storedeck[data-all-style="link"] .storedeck-shelf__all:is(:hover, :focus-visible) .storedeck-shelf__all-arrow {
	background: none;
	color: inherit;
}

.storedeck--sh-nocount .storedeck-shelf__count,
.storedeck--sh-nomore .storedeck-card--more,
.storedeck--shelf-noall .storedeck-shelf:not(.storedeck-featured) :is(.storedeck-shelf__all, .storedeck-card--more),
.storedeck-featured--noall :is(.storedeck-shelf__all, .storedeck-card--more) {
	display: none;
}

/* Themes style bare buttons heavily; these are reset to the essentials. */
/* The shelf's own round buttons (arrows, close). The cart and size buttons
   on the cards are left out, with :where so the specificity stays low. */
.storedeck .storedeck-shelf button:where(:not(.storedeck-card__cart, .storedeck-pick__close, .storedeck-pick__opt, .storedeck-pick__add)) {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	appearance: none;
	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}

.storedeck .storedeck-shelf .storedeck-shelf__close {
	grid-area: close;
	width: 38px;
	height: 38px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
}

.storedeck .storedeck-shelf .storedeck-shelf__close:hover {
	background: color-mix(in srgb, currentColor 24%, transparent);
}

/* Arrows sit in side margins of their own, never over a card. The margins
 * open only while there is something to scroll (.has-nav, set by storedeck.js),
 * so a carousel whose cards all fit keeps its full width; until the script
 * runs there are no arrows at all. */
.storedeck-shelf__body {
	--storedeck-nav: 42px;
	--storedeck-nav-gap: 12px;
	position: relative;
	grid-area: body;
	min-width: 0;
}

.storedeck-shelf__body.has-nav {
	padding-inline: calc(var(--storedeck-nav) + var(--storedeck-nav-gap));
}

.storedeck .storedeck-shelf .storedeck-shelf__nav {
	position: absolute;
	top: 38%;
	z-index: 2;
	width: var(--storedeck-nav);
	height: var(--storedeck-nav);
	/* Button colours, like "see all": independent of the card colours, which
	   may be transparent or matched to the page. */
	background: var(--storedeck-pill-bg);
	color: var(--storedeck-pill-text);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	translate: 0 -50%;
}

.storedeck .storedeck-shelf .storedeck-shelf__nav--prev { left: 0; }
.storedeck .storedeck-shelf .storedeck-shelf__nav--next { right: 0; }
.storedeck .storedeck-shelf .storedeck-shelf__nav--next svg { rotate: 180deg; }

.storedeck .storedeck-shelf .storedeck-shelf__nav:hover:not(:disabled) {
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
	transform: scale(1.08);
}

/* At the start or the end the arrow that cannot go further stays, faded:
   the layout holds still and the way to scroll stays obvious. */
.storedeck .storedeck-shelf .storedeck-shelf__nav:disabled {
	opacity: 0.3;
	box-shadow: none;
	cursor: default;
}

.storedeck .storedeck-shelf .storedeck-shelf__body:not(.has-nav) .storedeck-shelf__nav,
.storedeck--sh-noarrows .storedeck-shelf .storedeck-shelf__nav {
	display: none;
}

.storedeck--sh-noarrows .storedeck-shelf__body.has-nav {
	padding-inline: 0;
}

/* Narrow shelf: fingers swipe, and the next card peeking in already shows
   there is more; the cards keep the full width. */
@container storedeck-shelf (max-width: 560px) {
	.storedeck .storedeck-shelf .storedeck-shelf__nav {
		display: none;
	}

	.storedeck-shelf__body.has-nav {
		padding-inline: 0;
	}
}

/* The carousel: a scroll-snapping row of cards, as many per view as the
   shelf width allows, with the next card peeking in on narrow screens. */
.storedeck .storedeck-shelf__track {
	--storedeck-per: var(--storedeck-per-max, 5);
	--storedeck-gap-c: var(--storedeck-card-gap, 16px);
	display: grid;
	grid-auto-columns: calc((100% - (var(--storedeck-per) - 1) * var(--storedeck-gap-c)) / var(--storedeck-per));
	grid-auto-flow: column;
	gap: var(--storedeck-gap-c);
	margin: 0;
	padding: 6px 2px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.storedeck-shelf__track::-webkit-scrollbar {
	display: none;
}

.storedeck-shelf__track[hidden] {
	display: none;
}

.storedeck-shelf__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/* The set number of cards on a wide shelf, fewer as it narrows, and the
   phone setting on the narrowest. */
@container storedeck-shelf (max-width: 980px) { .storedeck .storedeck-shelf__track { --storedeck-per: min(var(--storedeck-per-max, 5), 4); } }
@container storedeck-shelf (max-width: 760px) { .storedeck .storedeck-shelf__track { --storedeck-per: min(var(--storedeck-per-max, 5), 3); } }
@container storedeck-shelf (max-width: 540px) { .storedeck .storedeck-shelf__track { --storedeck-per: min(var(--storedeck-per-max, 5), var(--storedeck-per-m, 1.6) + 0.6); } }
@container storedeck-shelf (max-width: 380px) { .storedeck .storedeck-shelf__track { --storedeck-per: var(--storedeck-per-m, 1.6); } }

/* Narrow shelf: "see all" moves under the carousel, full width, where the
   thumb is after browsing. */
@container storedeck-shelf (max-width: 560px) {
	.storedeck-shelf__panel {
		grid-template-areas:
			"title close"
			"body  body"
			"all   all";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* Every layout: full width, reachable with the thumb. */
	.storedeck .storedeck-shelf__all,
	.storedeck[data-sh-head] .storedeck-shelf__all {
		justify-self: stretch;
	}

	/* No title: "see all" and the close button share the bottom row. */
	.storedeck--sh-notitle[data-sh-head] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
		grid-template-areas:
			"body body"
			"all  close";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.storedeck--sh-notitle[data-sh-head] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__all {
		justify-self: stretch;
	}

	.storedeck--sh-notitle.storedeck--shelf-noall[data-sh-head] .storedeck-shelf:not(.storedeck-featured) .storedeck-shelf__panel {
		grid-template-areas: "body close";
	}

	.storedeck[data-sh-head] .storedeck-featured .storedeck-shelf__panel {
		grid-template-areas:
			"title"
			"body"
			"all";
		grid-template-columns: minmax(0, 1fr);
	}

	.storedeck[data-sh-head] .storedeck-featured.storedeck-featured--notitle .storedeck-shelf__panel {
		grid-template-areas:
			"body"
			"all";
	}

	.storedeck[data-sh-head] .storedeck-featured--notitle .storedeck-shelf__all {
		justify-self: stretch;
	}
}

.storedeck .storedeck-card {
	position: relative;
	container: storedeck-card / inline-size;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.storedeck .storedeck-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 0;
	border-radius: var(--storedeck-card-radius, 14px);
	background: var(--storedeck-card-bg);
	box-shadow: none;
	color: var(--storedeck-card-text);
	text-decoration: none;
	-webkit-user-drag: none;
	transition: transform 0.3s var(--storedeck-ease), box-shadow 0.3s ease;
}

/* Cards entering (data-card-in), one after another: --ci is the card's
   place, capped by storedeck.js so cards far off screen do not wait long. */
.storedeck[data-card-in="fade"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-fade; }
.storedeck[data-card-in="rise"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-card-rise; }
.storedeck[data-card-in="slide"] .storedeck-card:not(.is-skeleton) { --storedeck-card-in: storedeck-card-slide; }
.storedeck[data-card-in="zoom"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-card-zoom; }
.storedeck[data-card-in="flip"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-card-flip; }
.storedeck[data-card-in="blur"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-blur; }
.storedeck[data-card-in="drop"] .storedeck-card:not(.is-skeleton)  { --storedeck-card-in: storedeck-card-drop; }
.storedeck[data-card-in="pop"] .storedeck-card:not(.is-skeleton)   { --storedeck-card-in: storedeck-pop; }

.storedeck[data-card-in]:not([data-card-in="none"]) .storedeck-card:not(.is-skeleton) {
	animation: var(--storedeck-card-in) 0.5s var(--storedeck-ease) calc(var(--ci, 0) * var(--storedeck-card-stagger, 60ms)) both;
}

@keyframes storedeck-card-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-card-slide {
	from { opacity: 0; transform: translateX(46px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-card-flip {
	from { opacity: 0; transform: perspective(900px) rotateY(-70deg); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-card-drop {
	from { opacity: 0; transform: translateY(-34px); }
	to   { opacity: 1; transform: none; }
}

@keyframes storedeck-card-zoom {
	from { opacity: 0; transform: scale(0.82); }
	to   { opacity: 1; transform: none; }
}

/* Card hover (data-card-hover): lift, photo zoom, both, photo tilt, a ring
   in the hover colour, or none. */
.storedeck:is([data-card-hover="both"], [data-card-hover="lift"]) :is(.storedeck-card:hover > .storedeck-card__link, .storedeck-card__link:focus-visible) {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.storedeck:is([data-card-hover="both"], [data-card-hover="lift"]) .storedeck-card:is(:hover, :has(.storedeck-card__link:focus-visible)) > .storedeck-card__cart {
	transform: translateY(-4px);
}

.storedeck[data-card-hover="ring"] :is(.storedeck-card:hover > .storedeck-card__link, .storedeck-card__link:focus-visible) {
	box-shadow: 0 0 0 3px var(--storedeck-pill-bg-h);
}

.storedeck[data-card-hover="glow"] :is(.storedeck-card:hover > .storedeck-card__link, .storedeck-card__link:focus-visible) {
	box-shadow:
		0 0 0 2px var(--storedeck-pill-bg-h),
		0 0 22px color-mix(in srgb, var(--storedeck-pill-bg-h) 60%, transparent);
}

/* A band of light passing over the photo. */
.storedeck[data-card-hover="shine"] .storedeck-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-110%);
	pointer-events: none;
}

.storedeck[data-card-hover="shine"] .storedeck-card:hover .storedeck-card__media::after {
	animation: storedeck-shine 0.9s ease;
}

.storedeck .storedeck-card__link:focus-visible {
	outline: 3px solid var(--storedeck-pill-bg-h);
	outline-offset: 2px;
}

.storedeck-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	padding: calc(var(--storedeck-card-pad, 8) * 1%);
}

/* Fill: the photo covers the whole square, edge to edge. */
.storedeck[data-card-fit="cover"] .storedeck-card__media {
	padding: 0;
}

.storedeck[data-card-fit="cover"] .storedeck-card__img {
	object-fit: cover;
}

.storedeck .storedeck-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	transition: transform 0.4s var(--storedeck-ease);
	-webkit-user-drag: none;
}

.storedeck:is([data-card-hover="both"], [data-card-hover="zoom"]) .storedeck-card:hover .storedeck-card__img {
	transform: scale(1.06);
}

.storedeck[data-card-hover="tilt"] .storedeck-card:hover .storedeck-card__img {
	transform: rotate(-4deg) scale(1.07);
}

.storedeck[data-card-align="center"] .storedeck-card__link {
	text-align: center;
}

.storedeck--sh-noprice .storedeck-card__price,
.storedeck--sh-nobadge .storedeck-card__badge {
	display: none;
}

/* Without prices the name sits at the bottom, with the price's padding. */
.storedeck--sh-noprice .storedeck-card__name {
	margin-bottom: 16px;
}

.storedeck-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 6px 9px 5px;
	border-radius: 999px;
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
	font-family: var(--storedeck-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.storedeck-card__badge--out {
	background: #6b6f73;
	color: #fff;
}

.storedeck-card__name {
	display: -webkit-box;
	margin: 0 14px;
	overflow: hidden;
	font-size: var(--storedeck-card-name, 15px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: calc(var(--storedeck-card-name-ls, 0) * 1em);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--storedeck-card-lines, 2);
}

.storedeck-card__price {
	margin: auto 14px 0;
	padding: 8px 0 16px;
	font-size: var(--storedeck-card-price, 16px);
	font-weight: 700;
}

.storedeck-card__price del {
	margin-right: 0.35em;
	font-weight: 400;
	opacity: 0.55;
}

.storedeck-card__price ins {
	background: none;
	color: var(--storedeck-pill-bg);
	text-decoration: none;
}

/* --- Add to cart ---------------------------------------------------------
   storedeck.js adds the button to cards the server marked data-buy. Under
   the price it is a pill across the card; the link keeps room for it, so
   cards do not grow when the script runs. As an icon it sits on the photo. */

.storedeck--cart[data-cart-style="button"] .storedeck-card[data-buy] > .storedeck-card__link {
	padding-bottom: 56px;
}

.storedeck .storedeck-card__cart {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--storedeck-pill-bg);
	box-shadow: none;
	color: var(--storedeck-pill-text);
	cursor: pointer;
	appearance: none;
	font-style: normal;
	text-decoration: none;
	text-shadow: none;
	font-family: var(--storedeck-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: none;
	white-space: nowrap;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.3s var(--storedeck-ease);
}

.storedeck--upper .storedeck-card__cart {
	text-transform: uppercase;
}

.storedeck .storedeck-card__cart:hover,
.storedeck .storedeck-card__cart:focus-visible,
.storedeck .storedeck-card__cart.is-added {
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
}

.storedeck .storedeck-card__cart:focus-visible {
	outline: 3px solid var(--storedeck-pill-bg-h);
	outline-offset: 2px;
}

.storedeck .storedeck-card__cart:disabled {
	cursor: default;
}

.storedeck-card__cart-icon {
	display: inline-flex;
	flex: none;
}

.storedeck-card__cart-text {
	overflow: hidden;
	text-overflow: ellipsis;
	text-box: trim-both cap alphabetic;
}

/* Narrow cards (many per view, phones): a tighter button, and on the
   narrowest the cart icon alone; its label stays for screen readers. */
@container storedeck-card (max-width: 190px) {
	.storedeck .storedeck-card__cart {
		gap: 6px;
		padding: 0 10px;
		font-size: 11.5px;
		letter-spacing: 0.03em;
	}
}

@container storedeck-card (max-width: 150px) {
	.storedeck .storedeck-card__cart-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.storedeck[data-cart-style="icon"] .storedeck-card__cart {
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	width: 42px;
	min-height: 0;
	height: 42px;
	padding: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.storedeck[data-cart-style="icon"] .storedeck-card__cart-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The cart button's loading ring (not the tiles' "spin" hover). */
.storedeck-spinner {
	animation: storedeck-spinner 0.8s linear infinite;
}

@keyframes storedeck-spinner {
	to { transform: rotate(1turn); }
}

/* Options of a variable product (sizes), over the card, in the tiles'
   button colours so they read on any card or shelf colour. */
.storedeck .storedeck-pick {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 12px 16px;
	overflow: auto;
	border-radius: var(--storedeck-card-radius, 14px);
	background: var(--storedeck-pill-bg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
	color: var(--storedeck-pill-text);
	text-align: center;
	animation: storedeck-pick-in 0.22s var(--storedeck-ease) both;
}

@keyframes storedeck-pick-in {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

.storedeck-pick__body {
	display: grid;
	gap: 14px;
}

.storedeck-pick.is-busy .storedeck-pick__body {
	opacity: 0.6;
	pointer-events: none;
}

.storedeck-pick__wait {
	display: flex;
	justify-content: center;
}

.storedeck-pick__wait svg {
	width: 28px;
	height: 28px;
}

.storedeck .storedeck-pick__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
	font-style: normal;
	text-decoration: none;
	text-shadow: none;
}

.storedeck .storedeck-pick__close:hover,
.storedeck .storedeck-pick__close:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.storedeck .storedeck-pick__label {
	margin: 0 0 8px;
	font-family: var(--storedeck-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.storedeck-pick__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.storedeck .storedeck-pick__opt {
	min-width: 42px;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
	font-style: normal;
	text-decoration: none;
	text-shadow: none;
	font-family: var(--storedeck-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.storedeck .storedeck-pick__opt:hover:not(:disabled),
.storedeck .storedeck-pick__opt:focus-visible,
.storedeck .storedeck-pick__opt[aria-pressed="true"] {
	border-color: var(--storedeck-pill-bg-h);
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
}

.storedeck .storedeck-pick__opt:focus-visible {
	outline: 2px solid var(--storedeck-pill-text);
	outline-offset: 2px;
}

.storedeck .storedeck-pick__opt:disabled {
	opacity: 0.35;
	cursor: default;
	text-decoration: line-through;
}

.storedeck .storedeck-pick__add {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 2px 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
	cursor: pointer;
	appearance: none;
	font-style: normal;
	text-decoration: none;
	text-shadow: none;
	font-family: var(--storedeck-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.storedeck--upper .storedeck-pick__add {
	text-transform: uppercase;
}

.storedeck .storedeck-pick__add:disabled {
	opacity: 0.45;
	cursor: default;
}

/* "Added to cart", at the bottom of the screen for a few seconds. It lives
   outside the menu; storedeck.js copies the menu's colours onto it. */
.storedeck-toast {
	position: fixed;
	bottom: max(20px, env(safe-area-inset-bottom));
	left: 50%;
	z-index: 100000;
	display: flex;
	gap: 12px;
	align-items: center;
	max-width: min(560px, calc(100vw - 32px));
	padding: 8px 8px 8px 16px;
	border-radius: 999px;
	background: var(--storedeck-pill-bg, #0b7a3e);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
	color: var(--storedeck-pill-text, #fff);
	font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.storedeck-toast.is-shown {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.storedeck-toast__icon {
	display: inline-flex;
	flex: none;
}

.storedeck-toast__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.storedeck-toast__link {
	flex: none;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--storedeck-pill-bg-h, #c4b41c);
	color: var(--storedeck-pill-text-h, #0b1f1a);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.storedeck-toast__link:hover,
.storedeck-toast__link:focus-visible {
	color: var(--storedeck-pill-text-h, #0b1f1a);
	text-decoration: underline;
}

.storedeck-toast.is-error {
	padding-right: 18px;
	background: #b32d2e;
	color: #fff;
}

.storedeck-toast.is-error .storedeck-toast__link {
	display: none;
}

/* Last card when the category holds more than the shelf shows. */
.storedeck .storedeck-card--more .storedeck-card__link {
	align-items: center;
	justify-content: center;
	background: var(--storedeck-pill-bg);
	color: var(--storedeck-pill-text);
	text-align: center;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s var(--storedeck-ease),
		box-shadow 0.3s ease;
}

.storedeck .storedeck-card--more .storedeck-card__link:hover,
.storedeck .storedeck-card--more .storedeck-card__link:focus-visible {
	background: var(--storedeck-pill-bg-h);
	color: var(--storedeck-pill-text-h);
}

.storedeck-card__more {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	padding: 24px 14px;
	font-family: var(--storedeck-font);
	font-weight: 700;
	line-height: 1;
}

.storedeck-card__more-num {
	font-size: clamp(34px, 4.6cqi, 56px);
	letter-spacing: 0.02em;
}

.storedeck-card__more-text {
	font-size: 13px;
	letter-spacing: 0.12em;
}

/* Name and price type: font (data-*-font; none = the page's own), weight
   (data-*-weight) and capitals (.storedeck--*-upper). */
.storedeck[data-name-font="menu"] .storedeck-card__name,
.storedeck[data-price-font="menu"] .storedeck-card__price {
	font-family: var(--storedeck-font);
}

.storedeck[data-name-font="industry"] .storedeck-card__name,
.storedeck[data-price-font="industry"] .storedeck-card__price {
	font-family: "StoreDeck Industry", "Industry", "Arial Black", sans-serif;
}

.storedeck[data-name-font="custom"] .storedeck-card__name {
	font-family: var(--storedeck-name-font);
}

.storedeck[data-price-font="custom"] .storedeck-card__price {
	font-family: var(--storedeck-price-font);
}

.storedeck[data-name-weight="normal"] .storedeck-card__name,
.storedeck[data-price-weight="normal"] .storedeck-card__price {
	font-weight: 400;
}

.storedeck[data-name-weight="semi"] .storedeck-card__name,
.storedeck[data-price-weight="semi"] .storedeck-card__price {
	font-weight: 600;
}

.storedeck[data-name-weight="bold"] .storedeck-card__name,
.storedeck[data-price-weight="bold"] .storedeck-card__price {
	font-weight: 700;
}

.storedeck--name-upper .storedeck-card__name,
.storedeck--price-upper .storedeck-card__price {
	text-transform: uppercase;
}

/* Transparent cards: products stand straight on the shelf. A shadow around
   an invisible box would look stray, so hover only lifts. */
.storedeck.storedeck--sh-cardclear .storedeck-card:not(.storedeck-card--more) .storedeck-card__link {
	background: transparent;
}

.storedeck.storedeck--sh-cardclear:is([data-card-hover="both"], [data-card-hover="lift"]) .storedeck-card__link:is(:hover, :focus-visible) {
	box-shadow: none;
}

/* The button colour marks sale prices on a card; on the shelf itself the
   hover colour stands out better. */
.storedeck.storedeck--sh-cardclear .storedeck-card__price ins {
	color: var(--storedeck-pill-bg-h);
}

/* Placeholder cards while the products load. */
.storedeck-card.is-skeleton .storedeck-card__link {
	pointer-events: none;
}

.storedeck-card.is-skeleton :is(.storedeck-card__media, .storedeck-card__name, .storedeck-card__price) {
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(127, 127, 127, 0.14) 30%, rgba(127, 127, 127, 0.28) 50%, rgba(127, 127, 127, 0.14) 70%) 0 0 / 300% 100%;
	color: transparent;
	animation: storedeck-shimmer 1.2s linear infinite;
}

.storedeck-card.is-skeleton .storedeck-card__media {
	margin: 10px;
}

.storedeck-card.is-skeleton .storedeck-card__price {
	width: 40%;
	margin-bottom: 14px;
	padding: 0;
}

@keyframes storedeck-shimmer {
	from { background-position: 100% 0; }
	to   { background-position: 0 0; }
}

.storedeck .storedeck-shelf__msg {
	grid-area: body;
	margin: 4px 0 6px;
	color: inherit;
	font-size: 16px;
}

.storedeck .storedeck-shelf__msg a {
	color: inherit;
	font-weight: 700;
}

/* --- featured shelf ---------------------------------------------------------
 * "Polecane": the shelf design, always open, above the tiles. It has no
 * tile to point at and nothing to close, so no pointer, no close button and
 * no room kept for them; and its heading and "see all" have their own
 * switches, so the category shelf's ones do not reach it. */

.storedeck .storedeck-featured {
	flex: none;
	align-self: auto;
	margin: 0;
	opacity: 1;
	transition: none;
}

/* Sections come in any order: one row gap between neighbours, none at the
   top or bottom of the menu. The tiles' heading keeps its own gap to them. */
.storedeck > :is(.storedeck-featured, .storedeck__title, .storedeck__rows) + .storedeck-featured,
.storedeck > .storedeck-featured + :is(.storedeck__title, .storedeck__rows) {
	margin-top: calc(var(--storedeck-row-gap) * 1cqi);
}

.storedeck .storedeck-featured .storedeck-shelf__panel,
.storedeck[data-sh-bg] .storedeck-featured .storedeck-shelf__panel {
	grid-template-areas:
		"title all"
		"body  body";
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: 0;
	transform: none;
}

.storedeck:is([data-sh-head="bottom"], [data-sh-head="center"]) .storedeck-featured .storedeck-shelf__panel {
	grid-template-areas:
		"title"
		"body"
		"all";
	grid-template-columns: minmax(0, 1fr);
}

.storedeck .storedeck-featured .storedeck-shelf__panel::before {
	display: none;
}

.storedeck[data-sh-bg="stroke"] .storedeck-featured .storedeck-shelf__panel::after {
	-webkit-mask: none;
	mask: none;
}

/* A heading marked hidden (the editor hides it rather than removing it)
   takes no place in the grid; nothing may override that. */
.storedeck .storedeck-shelf .storedeck-shelf__title[hidden] {
	display: none;
}

/* No heading: no row is kept for it. "See all" goes above the carousel on
   the right in the split layout, below it in the others, and the carousel
   stands alone when "see all" is off too. */
.storedeck[data-sh-head] .storedeck-featured.storedeck-featured--notitle .storedeck-shelf__panel {
	grid-template-areas:
		"all"
		"body";
	grid-template-columns: minmax(0, 1fr);
}

.storedeck[data-sh-head="split"] .storedeck-featured--notitle .storedeck-shelf__all {
	justify-self: end;
}

.storedeck:is([data-sh-head="bottom"], [data-sh-head="center"]) .storedeck-featured.storedeck-featured--notitle .storedeck-shelf__panel {
	grid-template-areas:
		"body"
		"all";
}

.storedeck[data-sh-head] .storedeck-featured.storedeck-featured--notitle.storedeck-featured--noall .storedeck-shelf__panel {
	grid-template-areas: "body";
}

/* No frame: no fill, no stroke, no inner spacing; the products stand on
   the page, lined up with the rest of the content. */
.storedeck .storedeck-featured--noframe .storedeck-shelf__panel,
.storedeck[data-sh-bg] .storedeck-featured--noframe .storedeck-shelf__panel {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.storedeck[data-sh-bg] .storedeck-featured--noframe .storedeck-shelf__panel::after {
	display: none;
}

/* Cards come in when the section scrolls into view; storedeck.js arms it. */
.storedeck-featured.is-armed:not(.is-in) .storedeck-card {
	animation-play-state: paused;
}

/* --- phone -----------------------------------------------------------------
 * Measured on the menu itself, not the window, so a narrow sidebar column
 * gets the phone layout too. */

@container storedeck (max-width: 600px) {
	.storedeck__row {
		--storedeck-c: min(var(--storedeck-cols, var(--storedeck-n, 3)), var(--storedeck-m-cols));
	}

	/* One grid for all tiles: rows dissolve and every tile flows on, so
	   there is nothing to separate. */
	.storedeck--merge .storedeck__rows {
		flex-flow: row wrap;
		justify-content: center;
		gap: calc(var(--storedeck-rows-gap) * 1cqi) calc(var(--storedeck-gap) * 1cqi);
	}

	.storedeck--merge .storedeck__sep {
		display: none;
	}

	.storedeck--merge .storedeck__row {
		--storedeck-c: var(--storedeck-m-cols);
		display: contents;
	}
}

@media (prefers-reduced-motion: reduce) {
	.storedeck :is(.storedeck-tile, .storedeck__title, .storedeck__sep) {
		opacity: 1 !important;
		animation: none !important;
	}

	.storedeck .storedeck-tile :is(.storedeck-tile__img, .storedeck-tile__pill, .storedeck-tile__media) {
		transform: none !important;
		animation: none !important;
	}

	.storedeck .storedeck-tile__pill::after {
		display: none !important;
	}

	/* The fill switches colour instead of sweeping in. */
	.storedeck[data-pill="fill"] .storedeck-tile__pill {
		transition-property: background-color, color !important;
	}

	.storedeck .storedeck-shelf,
	.storedeck .storedeck-shelf__panel,
	.storedeck .storedeck-shelf__panel::before,
	.storedeck .storedeck-shelf__track,
	.storedeck .storedeck-card,
	.storedeck .storedeck-card__link,
	.storedeck .storedeck-card__img,
	.storedeck .storedeck-card__cart,
	.storedeck .storedeck-pick {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}

	.storedeck-toast {
		transition: none;
	}

	.storedeck .storedeck-card__media::after {
		animation: none !important;
	}

	.storedeck[data-tile-style="neon"] .storedeck-tile::before {
		animation: none !important;
	}
}