/**
 * Custom product landing blocks — front end.
 *
 * Built mobile first, because that is where these pages are read: one hand,
 * Arabic, three seconds after a video. Desktop only widens the container.
 *
 * Every tone maps to the Waslli palette. A marketer picks a tone, not a colour,
 * so a hundred landings still look like one store.
 */

.waslli-landing {
	--lp-brand: var(--wa-primary, #00B77A);
	--lp-deep: var(--wa-primary-dark, #005135);
	--lp-accent: var(--wa-accent, #FE6102);
	--lp-gold: #F5B301;
	--lp-alert: #D93025;
	--lp-text: var(--wa-text, #111827);
	--lp-muted: var(--wa-muted, #6b7280);
	--lp-border: var(--wa-border, #e5e7eb);
	--lp-soft: #EFFBF6;

	display: grid;
	gap: 18px;
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 14px;
	color: var(--lp-text);
	text-align: start;
}

.waslli-landing * {
	box-sizing: border-box;
}

/* ---------- shared block chrome ---------- */

.waslli-lp {
	margin: 0;
	padding: 20px 18px;
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	background: #fff;
}

.waslli-lp h2 {
	margin: 0 0 14px;
	color: var(--lp-deep);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.4;
}

.waslli-lp__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--lp-brand);
	font-size: 13px;
	font-weight: 800;
}

.waslli-lp__body p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.9;
	color: #35423d;
}

.waslli-lp__body p:last-child {
	margin-bottom: 0;
}

/* ---------- tones ---------- */

.waslli-lp.is-tone-soft {
	border-color: #cceede;
	background: var(--lp-soft);
}

.waslli-lp.is-tone-brand {
	border-color: transparent;
	background: linear-gradient(135deg, var(--lp-brand), #009966);
	color: #fff;
}

.waslli-lp.is-tone-deep {
	border-color: transparent;
	background: var(--lp-deep);
	color: #fff;
}

.waslli-lp.is-tone-accent {
	border-color: transparent;
	background: linear-gradient(135deg, var(--lp-accent), #E04E00);
	color: #fff;
}

.waslli-lp.is-tone-gold {
	border-color: transparent;
	background: linear-gradient(135deg, var(--lp-gold), #E09B00);
	color: #3A2A00;
}

.waslli-lp.is-tone-alert {
	border: 2px dashed var(--lp-alert);
	background: #FFF5F5;
	color: #8A1C14;
}

.waslli-lp.is-tone-brand h2,
.waslli-lp.is-tone-deep h2,
.waslli-lp.is-tone-accent h2,
.waslli-lp.is-tone-brand .waslli-lp__eyebrow,
.waslli-lp.is-tone-deep .waslli-lp__eyebrow,
.waslli-lp.is-tone-accent .waslli-lp__eyebrow,
.waslli-lp.is-tone-brand .waslli-lp__body p,
.waslli-lp.is-tone-deep .waslli-lp__body p,
.waslli-lp.is-tone-accent .waslli-lp__body p {
	color: #fff;
}

.waslli-lp.is-tone-gold h2,
.waslli-lp.is-tone-gold .waslli-lp__body p {
	color: #3A2A00;
}

/* ---------- ribbon ---------- */

.waslli-lp--ribbon {
	padding: 14px 18px;
	text-align: center;
}

.waslli-lp--ribbon strong {
	display: block;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.55;
}

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

.waslli-lp--heading {
	padding: 4px 0;
	border: 0;
	background: none;
	text-align: center;
}

.waslli-lp--heading h2 {
	margin: 0;
	font-size: 24px;
}

/* ---------- image / gallery / video ---------- */

.waslli-lp--image,
.waslli-lp--gallery,
.waslli-lp--video {
	padding: 10px;
	overflow: hidden;
}

.waslli-lp--image figure {
	margin: 0;
}

.waslli-lp--image img,
.waslli-lp--gallery img,
.waslli-lp--video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 11px;
}

.waslli-lp--image figcaption {
	padding: 10px 4px 2px;
	color: var(--lp-muted);
	font-size: 13px;
	text-align: center;
}

.waslli-lp__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* ---------- features ---------- */

.waslli-lp__features {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.waslli-lp__features li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

/* The tick is two borders rotated into a check — no icon font, no SVG
   request, and it inherits the tone's colour. */
.waslli-lp__tick {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--lp-brand);
}

.waslli-lp__tick::after {
	content: "";
	position: absolute;
	top: 5px;
	inset-inline-start: 8px;
	width: 6px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.waslli-lp__features strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.waslli-lp__features em,
.waslli-lp__steps em {
	display: block;
	margin-top: 3px;
	color: var(--lp-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.7;
}

.is-tone-brand .waslli-lp__tick,
.is-tone-deep .waslli-lp__tick,
.is-tone-accent .waslli-lp__tick {
	background: rgba(255, 255, 255, .24);
}

.is-tone-gold .waslli-lp__tick {
	background: #3A2A00;
}

.is-tone-brand .waslli-lp__features em,
.is-tone-deep .waslli-lp__features em,
.is-tone-accent .waslli-lp__features em {
	color: rgba(255, 255, 255, .82);
}

/* ---------- steps ---------- */

.waslli-lp__steps {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: waslli-step;
}

.waslli-lp__steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	counter-increment: waslli-step;
}

.waslli-lp__steps li::before {
	content: counter(waslli-step);
	flex: 0 0 auto;
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--lp-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.waslli-lp__steps strong {
	display: block;
	padding-top: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- cards ---------- */

.waslli-lp__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 10px;
}

/* Four cards in a three-column grid leave the fourth alone against one edge
   with a two-card hole beside it. A last card with nothing next to it takes
   the whole row instead, which reads as a deliberate wide card. */
.waslli-lp__cards > .waslli-lp__card:last-child:nth-child(2n + 1) {
	grid-column: 1 / -1;
}

.waslli-lp__card {
	padding: 14px 12px;
	border: 1px solid #d7ebe2;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}

.waslli-lp__card strong {
	display: block;
	color: var(--lp-deep);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
}

.waslli-lp__card span {
	display: block;
	margin-top: 5px;
	color: var(--lp-muted);
	font-size: 13px;
	line-height: 1.7;
}

/* ---------- specs ---------- */

.waslli-lp__specs {
	display: grid;
	gap: 0;
	margin: 0;
}

/* Label then value, side by side.
 *
 * This was `justify-content: space-between`, which on a 780px column threw the
 * label to one edge and the value to the other with a hand-span of nothing in
 * between — the pair stopped reading as one fact. A fixed label column keeps
 * them together at any width. */
.waslli-lp__specs > div {
	display: grid;
	/* Capped rather than max-content: a long label like «مدة الشحن المتوقعة»
	   would otherwise take most of a 360px row and squeeze the value it is
	   meant to sit beside. At the cap it wraps instead. */
	grid-template-columns: minmax(86px, 42%) 1fr;
	align-items: baseline;
	gap: 14px;
	padding: 11px 2px;
	border-bottom: 1px dashed var(--lp-border);
}

.waslli-lp__specs > div:last-child {
	border-bottom: 0;
}

.waslli-lp__specs dt {
	color: var(--lp-muted);
	font-size: 14px;
	font-weight: 700;
}

.waslli-lp__specs dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-align: start;
}

/* A value nobody has written yet. Visible enough to notice in the editor,
   quiet enough not to look like a fact on the page. */
.waslli-lp__specs dd.is-empty {
	color: #b6c3be;
	font-weight: 700;
}

/* ---------- notice ---------- */

.waslli-lp--notice p {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.85;
	text-align: center;
}

/* ---------- faq ---------- */

.waslli-lp__faq {
	display: grid;
	gap: 8px;
}

.waslli-lp__faq details {
	border: 1px solid var(--lp-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.waslli-lp__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 15px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	list-style: none;
}

.waslli-lp__faq summary::-webkit-details-marker {
	display: none;
}

.waslli-lp__faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--lp-brand);
	border-bottom: 2px solid var(--lp-brand);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .18s ease;
}

.waslli-lp__faq details[open] summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.waslli-lp__faq p {
	margin: 0;
	padding: 0 15px 15px;
	color: #43524c;
	font-size: 15px;
	line-height: 1.9;
}

/* ---------- offer and CTA ---------- */

.waslli-lp--offer,
.waslli-lp--cta {
	display: grid;
	gap: 11px;
	justify-items: center;
	text-align: center;
}

.waslli-lp__offer-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
}

.waslli-lp__price {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.3;
}

/* WooCommerce prints the old price inside <del> — keep it legible on a
   coloured card instead of letting it inherit a low-contrast grey. */
.waslli-lp__price del {
	margin-inline-end: 9px;
	font-size: .62em;
	font-weight: 700;
	opacity: .72;
}

.waslli-lp__price ins {
	text-decoration: none;
}

.waslli-lp__note {
	font-size: 13px;
	line-height: 1.7;
	opacity: .9;
}

.waslli-lp__cta {
	display: block;
	width: 100%;
	max-width: 420px;
	min-height: 54px;
	padding: 15px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--lp-accent);
	color: #fff;
	font: inherit;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(254, 97, 2, .28);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.waslli-lp__cta:hover {
	background: #E04E00;
	box-shadow: 0 13px 26px rgba(254, 97, 2, .34);
	transform: translateY(-1px);
}

.waslli-lp__cta:active {
	transform: translateY(0);
}

.waslli-lp__cta:focus-visible {
	outline: 3px solid rgba(0, 183, 122, .5);
	outline-offset: 3px;
}

/* On a coloured card the orange button loses its contrast, so it flips white. */
.is-tone-accent .waslli-lp__cta,
.is-tone-gold .waslli-lp__cta {
	background: #fff;
	color: #C24300;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.is-tone-accent .waslli-lp__cta:hover,
.is-tone-gold .waslli-lp__cta:hover {
	background: #fff;
	color: #A63A00;
}

.is-tone-brand .waslli-lp__cta,
.is-tone-deep .waslli-lp__cta {
	background: var(--lp-accent);
	color: #fff;
}

/* ---------- spacer ---------- */

.waslli-lp--spacer {
	height: 8px;
	padding: 0;
	border: 0;
	background: none;
}

/* ---------- entry animations ---------- */

/* Content first, animation second.
 *
 * Blocks are visible by default and only become hidden once JS has added
 * `.is-armed` to the container — which it does immediately before it starts
 * observing them. Any failure path (the script blocked, deferred by a cache
 * plugin, an error thrown by another plugin, an extension) therefore leaves a
 * fully readable page instead of invisible sections on a page that sells. */
.waslli-landing.is-armed .waslli-lp.has-anim {
	opacity: 0;
	transition: opacity .45s ease, transform .45s ease;
	will-change: opacity, transform;
}

.waslli-landing.is-armed .waslli-lp.has-anim.anim-rise {
	transform: translateY(18px);
}

.waslli-landing.is-armed .waslli-lp.has-anim.anim-zoom {
	transform: scale(.96);
}

.waslli-landing.is-armed .waslli-lp.has-anim.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- rating strip ---------- */

.waslli-lp--rating {
	text-align: center;
}

.waslli-lp__rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.waslli-lp__rate-badge {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lp-soft);
	color: #0b6b49;
	font-size: 12px;
	font-weight: 900;
}

/* Five grey stars with five gold ones clipped over them. A fraction of a star
   costs nothing this way, and the row cannot break in the middle of one. */
.waslli-lp__stars {
	position: relative;
	display: inline-block;
	color: #d8e2dd;
	font-size: 19px;
	letter-spacing: 2px;
	line-height: 1;
	white-space: nowrap;
}

.waslli-lp__stars-on {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--lp-gold);
	white-space: nowrap;
}

.waslli-lp__rate-score {
	color: var(--lp-text);
	font-size: 15px;
	font-weight: 900;
}

.waslli-lp__rate-count {
	color: var(--lp-muted);
	font-size: 13px;
	font-weight: 700;
}

.waslli-lp__rate-note {
	display: block;
	margin-top: 7px;
	color: var(--lp-muted);
	font-size: 13px;
	font-weight: 700;
}

.is-tone-brand .waslli-lp__rate-badge,
.is-tone-deep .waslli-lp__rate-badge,
.is-tone-accent .waslli-lp__rate-badge {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.is-tone-brand .waslli-lp__rate-score,
.is-tone-deep .waslli-lp__rate-score,
.is-tone-accent .waslli-lp__rate-score,
.is-tone-brand .waslli-lp__rate-count,
.is-tone-deep .waslli-lp__rate-count,
.is-tone-accent .waslli-lp__rate-count,
.is-tone-brand .waslli-lp__rate-note,
.is-tone-deep .waslli-lp__rate-note,
.is-tone-accent .waslli-lp__rate-note {
	color: rgba(255, 255, 255, .9);
}

/* ---------- customer reviews ---------- */

.waslli-lp__reviews {
	display: grid;
	gap: 11px;
}

.waslli-lp__review {
	margin: 0;
	padding: 14px 15px;
	border: 1px solid #e6efeb;
	border-radius: 14px;
	background: #fcfefd;
}

.waslli-lp__review-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.waslli-lp__review-face {
	display: grid;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-brand), #009966);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

.waslli-lp__review-who {
	flex: 1;
	min-width: 0;
}

.waslli-lp__review-who strong {
	display: block;
	color: var(--lp-deep);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

/* A handle is Latin text starting with «@», and «@» is a neutral character:
   in an RTL paragraph it gets pushed to the far end and «@salma» renders as
   «salma@». The content is laid out left to right and isolated from the line
   around it, while still sitting under the name on the right. */
.waslli-lp__review-who small {
	display: block;
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--lp-muted);
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
}

.waslli-lp__reviews:dir(ltr) .waslli-lp__review-who small {
	text-align: left;
}

.waslli-lp__review-stars {
	flex: 0 0 auto;
	color: var(--lp-gold);
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
}

.waslli-lp__review blockquote {
	margin: 9px 0 0;
	color: #35423d;
	font-size: 15px;
	line-height: 1.85;
}

/* ---------- guarantee band ---------- */

.waslli-lp__promise {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-align: start;
}

.waslli-lp__promise-seal {
	flex: 0 0 auto;
	font-size: 26px;
	line-height: 1.2;
}

.waslli-lp__promise-body strong {
	display: block;
	margin-bottom: 4px;
	color: var(--lp-deep);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.5;
}

.waslli-lp__promise-body p {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.85;
	color: #35423d;
}

.waslli-lp__promise-body p:last-child {
	margin-bottom: 0;
}

.waslli-lp__promise-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 7px;
	margin-top: 13px;
	/* Indented to the text above rather than the seal, so the block reads as
	   one column instead of two things that happen to be in the same box. */
	padding-inline-start: 38px;
}

.waslli-lp__promise-tag {
	padding: 6px 13px;
	border: 1px solid #bfe3d2;
	border-radius: 999px;
	background: #fff;
	color: #0d5238;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
}

.waslli-lp__promise-tag em {
	color: var(--lp-muted);
	font-style: normal;
	font-weight: 700;
}

.is-tone-brand .waslli-lp__promise-body strong,
.is-tone-deep .waslli-lp__promise-body strong,
.is-tone-accent .waslli-lp__promise-body strong,
.is-tone-brand .waslli-lp__promise-body p,
.is-tone-deep .waslli-lp__promise-body p,
.is-tone-accent .waslli-lp__promise-body p {
	color: #fff;
}

.is-tone-brand .waslli-lp__promise-tag,
.is-tone-deep .waslli-lp__promise-tag,
.is-tone-accent .waslli-lp__promise-tag {
	border-color: rgba(255, 255, 255, .34);
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* ---------- offer countdown ---------- */

.waslli-lp--countdown {
	--lp-cd-red: #E4483C;
	--lp-cd-dark: #0B2E22;

	box-shadow: 0 6px 22px rgba(0, 81, 53, .07);
}

/* The card keeps a light surface whatever tone is chosen, because the ribbon,
   the red cells and the dark button are the design and they need something to
   sit on. The tone picker drives the ribbon instead — see further down.
 *
 * Every tone is spelled out rather than relying on `.waslli-lp--countdown`
 * alone: the tone rules up the file are two classes deep, so a single-class
 * selector here loses to them and the orange tone was flooding the card and
 * taking the red price with it. */
.waslli-lp--countdown.is-tone-plain,
.waslli-lp--countdown.is-tone-soft,
.waslli-lp--countdown.is-tone-brand,
.waslli-lp--countdown.is-tone-deep,
.waslli-lp--countdown.is-tone-accent,
.waslli-lp--countdown.is-tone-gold,
.waslli-lp--countdown.is-tone-alert {
	border: 1px solid #e7efec;
	background: #fff;
	color: var(--lp-text);
}

.waslli-lp__cd {
	display: grid;
	gap: 14px;
	justify-items: center;
	text-align: center;
}

/* ribbon */

.waslli-lp__cd-ribbon {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px 16px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--lp-deep);
	color: var(--lp-gold);
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
}

.waslli-lp__cd-ribbon > span {
	position: relative;
	z-index: 1;
}

/* A light sweep across the ribbon. One transform on one pseudo-element, so it
   runs on the compositor and costs no layout. */
.waslli-lp__cd-ribbon::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
	transform: skewX(-18deg);
	animation: waslli-cd-shine 4.5s ease-in-out 1.2s infinite;
}

@keyframes waslli-cd-shine {
	0%, 62% { transform: translateX(0) skewX(-18deg); }
	100% { transform: translateX(340%) skewX(-18deg); }
}

/* the four cells */

.waslli-lp__cd-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
}

.waslli-lp__cd-cell {
	display: grid;
	gap: 3px;
	padding: 11px 4px 9px;
	border-radius: 12px;
	background: var(--lp-cd-red);
	color: #fff;
	box-shadow: 0 5px 14px rgba(228, 72, 60, .26);
}

.waslli-lp__cd-num {
	display: block;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.05;
	/* Equal-width digits, so the box does not twitch every second. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.waslli-lp__cd-cell small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	opacity: .93;
}

.waslli-lp__cd-num.is-tick {
	animation: waslli-cd-tick .3s ease-out;
}

/* Deliberately shallow. A deeper drop with a lower opacity reads as the digit
   flickering once a second rather than turning over. */
@keyframes waslli-cd-tick {
	0% { transform: translateY(-24%); opacity: .55; }
	60% { transform: translateY(0); opacity: 1; }
	100% { transform: none; }
}

/* A passed deadline leaves the price and the button and takes the clock away.
   Zeroed digits on a live page read as a broken page, not as an ended offer. */
.waslli-lp__cd.is-ended .waslli-lp__cd-grid {
	display: none;
}

/* price — every number in here is rendered from the product */

.waslli-lp__cd-price {
	margin: 2px 0 0;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.6;
	color: var(--lp-text);
}

.waslli-lp__cd-lead,
.waslli-lp__cd-instead {
	font-size: 19px;
	font-weight: 800;
}

.waslli-lp__cd-instead {
	color: var(--lp-muted);
	font-size: 17px;
}

.waslli-lp__cd-now {
	color: var(--lp-cd-red);
	font-size: 28px;
	white-space: nowrap;
}

.waslli-lp__cd-was {
	color: #98a5a0;
	font-size: 20px;
	white-space: nowrap;
	text-decoration-color: var(--lp-cd-red);
	text-decoration-thickness: 2px;
}

.waslli-lp__cd-price--range {
	font-size: 24px;
}

/* button and note */

/* Two classes deep on purpose. The tone rules further up flip the button to
   white or to orange for a coloured card, and this card is never coloured — a
   single-class selector here loses to them and the button comes out the wrong
   colour for four of the seven tones. */
.waslli-lp--countdown .waslli-lp__cd-cta {
	background: var(--lp-cd-dark);
	color: #fff;
	box-shadow: 0 10px 24px rgba(11, 46, 34, .28);
	animation: waslli-cd-pulse 2.6s ease-in-out 1s infinite;
}

.waslli-lp--countdown .waslli-lp__cd-cta:hover {
	background: #062017;
	color: #fff;
	box-shadow: 0 13px 28px rgba(11, 46, 34, .34);
}

/* Small enough to read as a heartbeat rather than a flashing banner, and it
   stops the moment the visitor points at the button. */
@keyframes waslli-cd-pulse {
	0%, 100% { transform: none; }
	50% { transform: scale(1.022); }
}

.waslli-lp--countdown .waslli-lp__cd-cta:hover,
.waslli-lp--countdown .waslli-lp__cd-cta:focus-visible {
	animation: none;
}

.waslli-lp--countdown .waslli-lp__cd-note {
	display: block;
	max-width: 30ch;
	color: var(--lp-accent);
	font-size: 19px;
	font-weight: 900;
	line-height: 1.6;
}

/* The tone picker colours the ribbon. Anything else would mean either a dark
   card the red cells disappear into, or a tone control that does nothing. */
.waslli-lp--countdown.is-tone-brand .waslli-lp__cd-ribbon {
	background: linear-gradient(135deg, var(--lp-brand), #009966);
	color: #fff;
}

.waslli-lp--countdown.is-tone-accent .waslli-lp__cd-ribbon {
	background: linear-gradient(135deg, var(--lp-accent), #E04E00);
	color: #fff;
}

.waslli-lp--countdown.is-tone-gold .waslli-lp__cd-ribbon {
	background: linear-gradient(135deg, var(--lp-gold), #E09B00);
	color: #3c2c00;
}

.waslli-lp--countdown.is-tone-alert .waslli-lp__cd-ribbon {
	background: var(--lp-alert);
	color: #fff;
}

.waslli-lp--countdown.is-tone-soft .waslli-lp__cd-ribbon,
.waslli-lp--countdown.is-tone-plain .waslli-lp__cd-ribbon {
	background: var(--lp-soft);
	color: var(--lp-deep);
}

.waslli-lp--countdown.is-tone-soft .waslli-lp__cd-ribbon::after,
.waslli-lp--countdown.is-tone-plain .waslli-lp__cd-ribbon::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.waslli-landing.is-armed .waslli-lp.has-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.waslli-lp__cta {
		transition: none;
	}

	.waslli-lp__cd-ribbon::after,
	.waslli-lp--countdown .waslli-lp__cd-cta,
	.waslli-lp__cd-num.is-tick {
		animation: none;
	}
}

/* ---------- wider screens ---------- */

@media (min-width: 720px) {
	.waslli-landing {
		gap: 22px;
		padding-inline: 0;
	}

	.waslli-lp {
		padding: 28px 26px;
	}

	.waslli-lp h2 {
		font-size: 24px;
	}

	.waslli-lp--heading h2 {
		font-size: 30px;
	}

	.waslli-lp--ribbon strong {
		font-size: 22px;
	}

	.waslli-lp__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.waslli-lp__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.waslli-lp__price {
		font-size: 34px;
	}

	/* A wide column is where these blocks fell apart: a six-item tick list and
	   a three-row spec table were built for a phone, and stretched to 780px
	   they became a thin ribbon of text down one edge of a tall empty box.
	   Everything below splits into two columns so the box fills and halves in
	   height, and the eye travels a normal line length instead of a hand-span
	   of white space. */
	.waslli-lp__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		column-gap: 26px;
	}

	/* A lone last item takes the full width rather than sitting against one
	   edge — same reasoning as the cards. */
	.waslli-lp__features > li:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
	}

	.waslli-lp__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
	}

	.waslli-lp__specs > div {
		grid-template-columns: minmax(74px, max-content) 1fr;
	}

	/* Two pairs per row, so the bottom divider has to come off whichever cells
	   are in the final row — not just the last one.
	 *
	 * The last item is always in it. The one before it is too, but only when it
	 * sits at an odd position, which is exactly the case where the count is
	 * even and the pair shares that row. With three items the second is at an
	 * even position, so it keeps its divider and stays a row boundary. */
	.waslli-lp__specs > div:last-child,
	.waslli-lp__specs > div:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}

	.waslli-lp__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.waslli-lp__cards > .waslli-lp__card:last-child:nth-child(2n + 1) {
		grid-column: auto;
	}

	.waslli-lp__cards > .waslli-lp__card:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

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

	.waslli-lp__stars {
		font-size: 22px;
	}

	.waslli-lp__cd-ribbon {
		font-size: 21px;
	}

	.waslli-lp__cd-grid {
		gap: 10px;
	}

	.waslli-lp__cd-num {
		font-size: 38px;
	}

	.waslli-lp__cd-cell {
		padding: 15px 6px 12px;
	}

	.waslli-lp__cd-cell small {
		font-size: 12px;
	}

	.waslli-lp__cd-now {
		font-size: 34px;
	}

	.waslli-lp__cd-price {
		font-size: 26px;
	}

	.waslli-lp--countdown .waslli-lp__cd-note {
		max-width: 34ch;
		font-size: 22px;
	}
}

/* ---------- pasted HTML section ---------- */

/* The block wrapper adds nothing of its own: a pasted page brings its own
   padding, its own background and its own width, and a tone or a border drawn
   around it would fight whatever the marketer designed. */
.waslli-lp--code {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	overflow: hidden;
}

.waslli-lp__frame {
	display: block;
	width: 100%;
	border: 0;
	/* JS sets the real height from the frame's own content. Until that first
	   message arrives the min-height keeps the page from jumping. */
	height: auto;
	background: transparent;
	color-scheme: light;
}

/* ============================================================
 * Store components placed by the marketer
 * ------------------------------------------------------------
 * «بطاقة الطلب الكاملة» and «عدّاد ومشاهدين» render the store's own
 * purchase card and urgency bar. Both already carry their own card,
 * padding and background, so the landing section around them has to
 * stop drawing a second one — same reason .waslli-lp--code does.
 * ============================================================ */
.waslli-lp--decision,
.waslli-lp--urgency {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* The store's card sets its own max-width for the narrow summary column.
   Inside a landing it is the full width of the page column. */
.waslli-lp--decision .waslli-decision-box {
	max-width: none;
	margin: 0;
}

/* The summary copy of this widget centres these two rows, and is then
   hidden on mobile because the mobile cart box repeats it. The landing
   copy is the only one on its page, so it keeps the centring and stays
   visible at every width. */
.waslli-lp--urgency .waslli-urgency--landing {
	margin: 0;
}

.waslli-lp--urgency .waslli-urgency--landing .waslli-urgency-visitors,
.waslli-lp--urgency .waslli-urgency--landing .waslli-urgency-stock {
	align-self: center;
}

.waslli-lp--urgency .waslli-urgency--landing .waslli-urgency-cta {
	align-self: stretch;
}