/**
 * Frontend styles for mrg/casino-list.
 *
 * Theme independence rests on three rules:
 *   1. every selector is scoped under .mrg-cl,
 *   2. the block resets the properties it relies on instead of inheriting them,
 *   3. everything visual comes from a custom property, so a site can retheme
 *      the block without touching this file:
 *
 *      .mrg-cl { --mrg-cl-accent: #b8860b; --mrg-cl-radius: 4px; }
 */

.mrg-cl {
	/* Palette */
	--mrg-cl-accent: #146c43;
	--mrg-cl-accent-hover: #0f5133;
	--mrg-cl-on-accent: #ffffff;
	--mrg-cl-surface: #ffffff;
	--mrg-cl-surface-alt: #f7f8fa;
	--mrg-cl-border: #e2e5ea;
	--mrg-cl-text: #12161f;
	--mrg-cl-muted: #58606d;
	--mrg-cl-star: #e5a000;
	--mrg-cl-badge-bg: #12161f;
	--mrg-cl-badge-text: #ffffff;

	/* Shape */
	--mrg-cl-radius: 10px;
	--mrg-cl-gap: 16px;
	--mrg-cl-title-gap: 32px;
	--mrg-cl-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -12px rgba(16, 24, 40, 0.28);

	/* Type — set explicitly so the theme's body font cannot change the layout. */
	--mrg-cl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var( --mrg-cl-font );
	font-size: 16px;
	line-height: 1.45;
	color: var( --mrg-cl-text );
	text-align: left;

	/* The wide layout below is a @container query, not a media query: the
	   block almost always sits in a ~700px article column, so viewport width
	   said nothing useful about the width a row actually had to lay out in.
	   See the comment on the wide layout for what that mismatch did. */
	container-type: inline-size;
}

/* Scoped reset ----------------------------------------------------------- */

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

.mrg-cl h2,
.mrg-cl ol,
.mrg-cl ul,
.mrg-cl li,
.mrg-cl p {
	margin: 0;
	padding: 0;
}

.mrg-cl ol,
.mrg-cl ul {
	list-style: none;
}

.mrg-cl img {
	display: block;
	max-width: 100%;
	height: auto;
}

.mrg-cl button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mrg-cl a {
	text-decoration: none;
	box-shadow: none;
}

.mrg-cl :focus-visible {
	outline: 2px solid var( --mrg-cl-accent );
	outline-offset: 2px;
	border-radius: 4px;
}

.mrg-cl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Shell ------------------------------------------------------------------ */

/* Qualified with .mrg-cl (not just .mrg-cl__title) so this beats the h2
   reset above on specificity — both target the same h2, and a bare
   .mrg-cl__title class selector is not specific enough to win. */
.mrg-cl .mrg-cl__title {
	margin: 0 0 var( --mrg-cl-title-gap );
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	/* Falls back to the normal text colour when no title colour is set. */
	color: var( --mrg-cl-title-color, var( --mrg-cl-text ) );
}

.mrg-cl__items {
	display: grid;
	gap: 12px;
}

.mrg-cl--grid .mrg-cl__items {
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 24px;
}

/* Item ------------------------------------------------------------------- */

/* Qualified with .mrg-cl — same li-reset fight as .mrg-cl__feature below.
   Without it this loses to the li reset below 768px (list layout only —
   .mrg-cl--grid always wins on its own 2-class specificity). */
.mrg-cl .mrg-cl__item {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 16px;
	background: var( --mrg-cl-surface );
	border: 1px solid var( --mrg-cl-border );
	border-radius: var( --mrg-cl-radius );
	box-shadow: var( --mrg-cl-shadow );
}

/* Groups brand/bonus/features/payments so the wide list layout can grow
   THIS wrapper into the row's leftover width (see the wide-layout media
   query) without growing any individual section — that's what keeps bonus,
   features etc. aligned to the same column position on every row regardless
   of which optional sections a given casino has. `display: contents` makes
   it invisible to layout everywhere else (mobile list, and the card/grid
   layout), so those keep their original stacking untouched. */
.mrg-cl__info {
	display: contents;
}

.mrg-cl__badge {
	position: absolute;
	top: 0;
	right: 12px;
	transform: translateY( -50% );
	padding: 3px 10px;
	background: var( --mrg-cl-badge-bg );
	color: var( --mrg-cl-badge-text );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	white-space: nowrap;
}

.mrg-cl__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.mrg-cl__rank {
	flex: 0 0 auto;
	width: 24px;
	font-size: 15px;
	font-weight: 700;
	color: var( --mrg-cl-muted );
	font-variant-numeric: tabular-nums;
}

.mrg-cl__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 48px;
	overflow: hidden;
	background: var( --mrg-cl-surface-alt );
	border-radius: 8px;
}

.mrg-cl__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mrg-cl__logo-fallback {
	font-size: 20px;
	font-weight: 700;
	color: var( --mrg-cl-muted );
	text-transform: uppercase;
}

.mrg-cl__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mrg-cl__name {
	font-size: 18px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrg-cl__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mrg-cl__stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1;
	color: var( --mrg-cl-border );
	white-space: nowrap;
}

.mrg-cl__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var( --mrg-cl-star );
}

.mrg-cl__score {
	font-size: 14px;
	font-weight: 600;
	color: var( --mrg-cl-muted );
	font-variant-numeric: tabular-nums;
}

/* Bonus ------------------------------------------------------------------ */

.mrg-cl__bonus {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 14px;
	background: var( --mrg-cl-surface-alt );
	border-radius: 8px;
}

.mrg-cl__bonus-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.mrg-cl__bonus-text {
	font-size: 14px;
	color: var( --mrg-cl-muted );
}

/* Features and payments -------------------------------------------------- */

.mrg-cl__features {
	display: grid;
	gap: 4px;
}

/* Qualified with .mrg-cl (not just .mrg-cl__feature): both this and the
   .mrg-cl li reset above target the same <li>, and a bare class selector
   isn't specific enough to win — see .mrg-cl__title for the same fix.
   Without it, padding-left collapses to 0 and the tick below is drawn
   straight over the first letter of the label. */
.mrg-cl .mrg-cl__feature {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	color: var( --mrg-cl-muted );
}

.mrg-cl__feature::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 4px;
	width: 5px;
	height: 9px;
	border: solid var( --mrg-cl-accent );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.mrg-cl__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Qualified with .mrg-cl — same li-reset fight as .mrg-cl__feature above. */
.mrg-cl .mrg-cl__payment {
	padding: 3px 8px;
	background: var( --mrg-cl-surface-alt );
	border: 1px solid var( --mrg-cl-border );
	border-radius: 6px;
	font-size: 11px;
	color: var( --mrg-cl-muted );
	white-space: nowrap;
}

/* Actions ---------------------------------------------------------------- */

.mrg-cl__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.mrg-cl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 22px;
	/* !important on background/colour: themes routinely style bare `a`/`button`
	   with their own colour and background (e.g. GeneratePress's .button
	   rule), which plain specificity cannot reliably beat. The CTA's palette
	   is load-bearing (contrast against its own background), so it can't
	   lose that fight. */
	background: var( --mrg-cl-accent ) !important;
	color: var( --mrg-cl-on-accent ) !important;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.mrg-cl__button:hover,
.mrg-cl__button:focus {
	background: var( --mrg-cl-accent-hover ) !important;
	color: var( --mrg-cl-on-accent ) !important;
}

.mrg-cl__button:active {
	transform: scale( 0.985 );
}

/* Both controls are inert without JS, so they only appear once it has run. */
.mrg-cl__terms-toggle,
.mrg-cl__more-wrap {
	display: none;
}

.mrg-cl[data-mrg-cl-ready] .mrg-cl__terms-toggle {
	display: inline-flex;
	align-self: center;
	padding: 0 4px;
	font-size: 11px;
	/* !important: themes force a colour/background/weight/case on bare
	   `button` (GeneratePress does) — this is meant to read as a plain
	   footnote link, not a button, in both layouts. */
	background: none !important;
	color: var( --mrg-cl-muted ) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mrg-cl__terms {
	font-size: 12px;
	line-height: 1.5;
	color: var( --mrg-cl-muted );
}

.mrg-cl__terms[hidden] {
	display: none;
}

/* Show more -------------------------------------------------------------- */

.mrg-cl[data-mrg-cl-ready]:not( [data-expanded="true"] ) .mrg-cl__item--extra {
	display: none;
}

.mrg-cl[data-mrg-cl-ready]:not( [data-expanded="true"] ) .mrg-cl__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

.mrg-cl__more {
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var( --mrg-cl-border );
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	/* !important: see .mrg-cl__button — themes force a colour/background on
	   bare `button`. */
	background: var( --mrg-cl-surface ) !important;
	color: var( --mrg-cl-text ) !important;
	transition: background-color 0.15s ease;
}

.mrg-cl__more:hover {
	background: var( --mrg-cl-surface-alt ) !important;
}

/* Empty state ------------------------------------------------------------ */

.mrg-cl--empty .mrg-cl__empty {
	padding: 16px;
	border: 1px dashed var( --mrg-cl-border );
	border-radius: var( --mrg-cl-radius );
	font-size: 14px;
	color: var( --mrg-cl-muted );
	text-align: center;
}

.mrg-cl--empty .mrg-cl__empty a {
	color: var( --mrg-cl-accent );
	text-decoration: underline;
}

/* Card layout — poker-chip treatment -------------------------------------
 * The dark palette is scoped to .mrg-cl__item itself, not the block root, so
 * the heading and "show more" button — which sit on the page background, not
 * on a card — keep the plain light palette. Every element inside the card
 * already pulls its colour from a --mrg-cl-* custom property (see file
 * header), so redeclaring those properties here is enough to re-theme the
 * whole card; only the pieces that need new shapes get their own rules.
 */

.mrg-cl--grid .mrg-cl__item {
	--mrg-cl-surface: #171310;
	--mrg-cl-surface-alt: rgba( 212, 175, 92, 0.08 );
	--mrg-cl-border: rgba( 212, 175, 92, 0.22 );
	--mrg-cl-text: #f5efe4;
	--mrg-cl-muted: rgba( 245, 239, 228, 0.62 );
	--mrg-cl-star: #f2cd7c;
	--mrg-cl-gold-bright: #f2cd7c;
	--mrg-cl-badge-bg: linear-gradient( 135deg, #f2cd7c, #b8860b );
	--mrg-cl-badge-text: #171310;
	--mrg-cl-radius: 18px;

	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 20px 16px;
	background: var( --mrg-cl-surface );
	color: var( --mrg-cl-text );
	border-color: var( --mrg-cl-border );
	box-shadow: 0 1px 0 rgba( 212, 175, 92, 0.12 ) inset, 0 18px 40px -22px rgba( 0, 0, 0, 0.65 );
	animation: mrg-cl-card-in 0.6s cubic-bezier( 0.16, 1, 0.3, 1 ) backwards;
	animation-delay: calc( min( var( --mrg-cl-i, 0 ), 10 ) * 70ms );
	transition: transform 0.35s cubic-bezier( 0.19, 1, 0.22, 1 ), box-shadow 0.35s ease, border-color 0.35s ease;
}

@keyframes mrg-cl-card-in {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.mrg-cl--grid .mrg-cl__item:hover,
.mrg-cl--grid .mrg-cl__item:focus-within {
	transform: translateY( -6px );
	border-color: var( --mrg-cl-gold-bright );
	box-shadow:
		0 1px 0 rgba( 212, 175, 92, 0.18 ) inset,
		0 26px 50px -20px rgba( 0, 0, 0, 0.75 ),
		0 0 0 1px rgba( 212, 175, 92, 0.25 ),
		0 0 26px rgba( 20, 108, 67, 0.35 );
}

.mrg-cl--grid .mrg-cl__item :focus-visible {
	outline-color: var( --mrg-cl-gold-bright );
}

/* Rank medallion — a poker-chip disc overlapping the card's top-left corner,
 * gold / silver / bronze for the first three positions. */
.mrg-cl--grid .mrg-cl__rank {
	position: absolute;
	top: -14px;
	left: -14px;
	z-index: 1;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	color: #171310;
	background: repeating-conic-gradient( #f2cd7c 0deg 18deg, #d4af5c 18deg 36deg );
	box-shadow: 0 0 0 3px #171310, 0 0 0 4px rgba( 212, 175, 92, 0.35 ), 0 6px 14px rgba( 0, 0, 0, 0.5 );
}

.mrg-cl--grid .mrg-cl__item:nth-child( 2 ) .mrg-cl__rank {
	background: repeating-conic-gradient( #dde1e7 0deg 18deg, #aab0ba 18deg 36deg );
}

.mrg-cl--grid .mrg-cl__item:nth-child( 3 ) .mrg-cl__rank {
	background: repeating-conic-gradient( #dba876 0deg 18deg, #a9713f 18deg 36deg );
}

.mrg-cl--grid .mrg-cl__item:nth-child( n+4 ) .mrg-cl__rank {
	color: var( --mrg-cl-text );
	background: repeating-conic-gradient( rgba( 212, 175, 92, 0.28 ) 0deg 18deg, rgba( 212, 175, 92, 0.1 ) 18deg 36deg );
}

/* Corner ribbon badge, folded tail via ::after. */
.mrg-cl--grid .mrg-cl__badge {
	top: -10px;
	right: 14px;
	transform: none;
	padding: 5px 14px 5px 12px;
	border-radius: 3px 0 0 3px;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.4 );
}

.mrg-cl--grid .mrg-cl__badge::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	border-style: solid;
	border-width: 5px 6px 0 0;
	border-color: #7a5a12 transparent transparent transparent;
}

.mrg-cl--grid .mrg-cl__logo {
	width: 96px;
	height: 60px;
	border: 1px solid var( --mrg-cl-border );
}

.mrg-cl--grid .mrg-cl__logo-fallback {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 24px;
	color: var( --mrg-cl-gold-bright );
}

.mrg-cl--grid .mrg-cl__name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	line-height: 1.25;
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mrg-cl--grid .mrg-cl__score {
	padding: 2px 8px;
	background: rgba( 242, 205, 124, 0.12 );
	border-radius: 999px;
}

/* Bonus block styled as a torn ticket: dashed border plus two punched-out
 * side notches that match the card's own background, so they read as
 * genuine cut-outs rather than painted circles. */
.mrg-cl--grid .mrg-cl__bonus {
	position: relative;
	min-height: 62px;
	justify-content: center;
	border: 1px dashed var( --mrg-cl-border );
	border-radius: 10px;
}

.mrg-cl--grid .mrg-cl__bonus::before,
.mrg-cl--grid .mrg-cl__bonus::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	background: var( --mrg-cl-surface );
	border-radius: 50%;
	transform: translateY( -50% );
}

.mrg-cl--grid .mrg-cl__bonus::before {
	left: -7px;
}

.mrg-cl--grid .mrg-cl__bonus::after {
	right: -7px;
}

.mrg-cl--grid .mrg-cl__features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mrg-cl--grid .mrg-cl__feature {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 6px;
	background: var( --mrg-cl-surface-alt );
	border: 1px solid var( --mrg-cl-border );
	border-radius: 999px;
	color: var( --mrg-cl-text );
}

/* Small filled check badge instead of the base layout's corner tick — reads
   better as a chip icon than a diagonal line does. */
.mrg-cl--grid .mrg-cl__feature::before {
	content: "\2713";
	position: static;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	transform: none;
	background: var( --mrg-cl-accent );
	color: var( --mrg-cl-on-accent );
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

.mrg-cl--grid .mrg-cl__actions {
	margin-top: auto;
	gap: 4px;
}

/* CTA gets a gold-foil shimmer sweep on card hover. */
.mrg-cl--grid .mrg-cl__button {
	position: relative;
	overflow: hidden;
	min-height: 50px;
	/* !important: must beat the base rule's own !important background. */
	background: linear-gradient( 135deg, var( --mrg-cl-accent ), var( --mrg-cl-accent-hover ) ) !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.mrg-cl--grid .mrg-cl__button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient( 120deg, transparent, rgba( 255, 255, 255, 0.35 ), transparent );
	transform: skewX( -20deg );
	transition: left 0.6s ease;
}

.mrg-cl--grid .mrg-cl__item:hover .mrg-cl__button::after {
	left: 130%;
}

/* Wide layout ------------------------------------------------------------ */

/*
 * Keyed to the BLOCK's width, not the viewport. The viewport query this
 * replaced turned the row layout on at 768px of *screen*, then handed the row
 * a fixed column budget (320 + 280 + 190 + two 24px gaps = 838px) that a
 * ~690px article column could never hold. `flex-wrap: wrap` then resolved the
 * overflow per row rather than per block: a row wrapped wherever ITS OWN text
 * ran out of room, so most rows dropped the CTA to a second line while short
 * ones (a brief casino name plus a short bonus) kept the CTA up and pushed the
 * bonus box down under the logo instead. Same block, two different shapes,
 * columns lining up on neither. The budget below fits inside 620px, which is
 * also the query threshold, so the row has the room it asks for.
 */
@container ( min-width: 620px ) {
	.mrg-cl__title {
		font-size: 26px;
	}

	/*
	 * Flex rather than fixed grid columns: every section is optional in the
	 * block settings, and flex simply reflows (wraps, shrinks) when one is
	 * switched off, where a fixed column template would need a different
	 * grid per combination of visible sections.
	 *
	 * flex-grow is 0 on every section inside .mrg-cl__info on purpose: a
	 * casino missing one section (e.g. no features) must NOT make its
	 * neighbours (bonus, etc.) stretch wider to fill the gap — that's what
	 * breaks the column alignment down the list. Each section holds its own
	 * width; only .mrg-cl__info ITSELF grows to soak up the row's leftover
	 * width, so a short row doesn't leave a large dead gap before the CTA
	 * without shifting any column's start position. .mrg-cl__actions
	 * (flex 0 0, margin-left:auto) then pins every CTA to the same right edge.
	 */
	.mrg-cl--list .mrg-cl__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
		padding: 20px 24px;
	}

	/* `flex: 1 1 0` — a ZERO basis, not `auto`. With `auto` the base size is
	   the info block's max-content width, i.e. it grew with the row's own
	   text, and a long name or bonus headline was enough to push the CTA past
	   the wrap point on that row alone. At basis 0 every info block is the
	   same width (the row's leftover) whatever it contains, so the CTA stays
	   on the first line and the columns are identical on every row. */
	.mrg-cl--list .mrg-cl__info {
		display: flex;
		flex: 1 1 0;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
		min-width: 0;
	}

	.mrg-cl--list .mrg-cl__brand {
		flex: 0 1 250px;
	}

	.mrg-cl--list .mrg-cl__bonus {
		flex: 0 1 210px;
	}

	.mrg-cl--list .mrg-cl__features {
		flex: 0 1 150px;
	}

	.mrg-cl--list .mrg-cl__payments {
		flex: 0 1 130px;
	}

	.mrg-cl--list .mrg-cl__actions {
		flex: 0 0 160px;
		margin-left: auto;
	}

	.mrg-cl--list .mrg-cl__terms {
		flex: 1 1 100%;
	}

	.mrg-cl--list .mrg-cl__logo {
		width: 78px;
		height: 50px;
	}

	/* Wraps to two lines instead of the base layout's single ellipsised line:
	   the brand column is narrower than a full casino name, and a clipped
	   "Magicianbet Cas…" reads worse than two lines in a row that has the
	   vertical room anyway. overflow-wrap/word-break are reset explicitly
	   because themes set `overflow-wrap: break-word` globally, which breaks
	   the name mid-word ("CrazyTowe / r Casino"). */
	.mrg-cl--list .mrg-cl__name {
		font-size: 16px;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mrg-cl--list .mrg-cl__bonus-title {
		font-size: 17px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mrg-cl * {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}

	.mrg-cl__button:active {
		transform: none;
	}
}