/**
 * Super Mom — what theme.json cannot express.
 *
 * Rules:
 *  - Every colour comes from a --wp--preset--color--* token. No literals.
 *  - Logical properties only (inline-start/end, margin-inline), so the whole
 *    sheet mirrors itself in RTL without a separate theme-rtl.css.
 *  - "Comic" look = 3px navy border + hard magenta offset shadow, no blur.
 *    That hard shadow is the signature; don't soften it.
 */

/* ---------------------------------------------------------------- tokens */
:root {
	--sm-frame: 3px;
	--sm-shadow: 6px;
	--sm-radius: 10px;
}

/* Hard offset shadow flips direction in RTL so it always falls "outward". */
.sm-pop {
	border: var(--sm-frame) solid var(--wp--preset--color--navy);
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow) var(--sm-shadow) 0 var(--wp--preset--color--brand);
}
:root:dir(rtl) .sm-pop {
	box-shadow: calc(var(--sm-shadow) * -1) var(--sm-shadow) 0 var(--wp--preset--color--brand);
}

/* ---------------------------------------------------------------- hero */
.sm-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
}

/* Halftone dots — the one decorative flourish, kept faint. */
.sm-hero::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 46%;
	background-image: radial-gradient(var(--wp--preset--color--brand) 1.4px, transparent 1.5px);
	background-size: 10px 10px;
	opacity: .15;
	-webkit-mask-image: linear-gradient(to var(--sm-fade, left), #000, transparent);
	mask-image: linear-gradient(to var(--sm-fade, left), #000, transparent);
	pointer-events: none;
}
:root:dir(rtl) .sm-hero::before { --sm-fade: right; }

.sm-hero > * { position: relative; }

.sm-bubble {
	position: relative;
	background: var(--wp--preset--color--paper);
	border: 2.5px solid var(--wp--preset--color--navy);
	border-radius: 16px;
	padding: .85em 1.15em;
	font-weight: 600;
	line-height: 1.6;
	max-width: 34ch;
	box-shadow: 5px 5px 0 var(--wp--preset--color--brand);
}
:root:dir(rtl) .sm-bubble { box-shadow: -5px 5px 0 var(--wp--preset--color--brand); }

/* Tail: a rotated square showing only the two borders that face outward.
   Logical borders can't express this — rotation is physical — so it's set
   per direction explicitly. The tail points down toward the mascot. */
.sm-bubble::after {
	content: "";
	position: absolute;
	bottom: -10px;
	right: 32px;
	width: 15px;
	height: 15px;
	background: var(--wp--preset--color--paper);
	border-right: 2.5px solid var(--wp--preset--color--navy);
	border-bottom: 2.5px solid var(--wp--preset--color--navy);
	transform: rotate(45deg);
}
:root:dir(rtl) .sm-bubble::after {
	right: auto;
	left: 32px;
	border-right: 0;
	border-left: 2.5px solid var(--wp--preset--color--navy);
	transform: rotate(-45deg);
}

.sm-tagline {
	font-style: italic;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	/* The tagline is an English brand mark; keep it LTR inside Arabic copy. */
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

.sm-mascot {
	display: block;
	width: 100%;
	max-width: 280px;
	margin-inline: auto;
	/* She points toward the copy; the artwork points right, Arabic reads right. */
	transform: scaleX(-1);
}
:root:dir(rtl) .sm-mascot { transform: none; }

/* ---------------------------------------------------------------- stages */
/* Dreft's idea, worth stealing: sort by the baby, not by the chemical. */
.sm-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--30); }

.sm-stage {
	display: flex;
	flex-direction: column;
	gap: .4em;
	padding: 1.25em 1.1em;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--cloud);
	border-radius: var(--sm-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .15s;
}
.sm-stage:hover, .sm-stage:focus-visible {
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-2px);
}
.sm-stage b { font-family: var(--wp--preset--font-family--heading); font-size: 1.15em; font-weight: 800; }
.sm-stage span { font-size: .9em; color: var(--wp--preset--color--ink); opacity: .75; }

/* ---------------------------------------------------------------- panels */
.sm-panels { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--wp--preset--spacing--30); }

.sm-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .7em;
	min-height: 210px;
	padding: 1.15em;
	background: var(--wp--preset--color--paper);
}
.sm-panel__key {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	direction: ltr;
	text-align: end;
}
.sm-panel__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	margin: 0;
}
.sm-panel__big {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(2.4rem, 7vw, 3.2rem);
	line-height: 1;
	color: var(--wp--preset--color--brand);
	font-variant-numeric: tabular-nums;
}
.sm-panel img { width: 92px; height: 92px; object-fit: contain; align-self: center; mix-blend-mode: multiply; }
.sm-panel p { margin: 0; font-size: .92rem; }
.sm-panel .sm-price { font-weight: 800; color: var(--wp--preset--color--navy); font-size: 1.15em; font-variant-numeric: tabular-nums; }
.sm-panel .sm-was { opacity: .55; text-decoration: line-through; margin-inline-start: .5em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- table */
/* The comparison chart, rescued from a JPEG into real markup: searchable by
   Google, translatable, readable by a screen reader, and it reflows on a phone. */
.sm-table-wrap { overflow-x: auto; border: 2px solid var(--wp--preset--color--cloud); border-radius: var(--sm-radius); background: var(--wp--preset--color--paper); }
.sm-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .95rem; }
.sm-table caption { text-align: start; padding: 1em 1.1em .4em; font-weight: 700; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--heading); }
.sm-table th { text-align: start; padding: .7em 1.1em; font-size: .82rem; font-weight: 700; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--mist); border-block-end: 2px solid var(--wp--preset--color--cloud); }
.sm-table th:not(:first-child) { text-align: center; }
.sm-table td { padding: .7em 1.1em; border-block-end: 1px solid var(--wp--preset--color--mist); }
.sm-table td:not(:first-child) { text-align: center; }
.sm-table tr:last-child td { border-block-end: 0; }
.sm-table .sm-yes { color: var(--wp--preset--color--grass); font-weight: 800; }
.sm-table .sm-no { color: var(--wp--preset--color--ink); opacity: .55; }
.sm-table .sm-col-us { background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, transparent); }

/* ---------------------------------------------------------------- shared */
.sm-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--brand);
	margin-block-end: .5em;
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 781px) {
	.sm-panels, .sm-stages { grid-template-columns: 1fr; }
	.sm-hero::before { width: 100%; opacity: .08; }
	.sm-mascot { max-width: 200px; }
	:root { --sm-shadow: 4px; }

	/* The table is the one element allowed to be wider than the screen, and
	   only inside its own scroller. Below ~480px let it shrink instead, so
	   the page itself never scrolls sideways. */
	.sm-table { min-width: 0; font-size: .87rem; }
	.sm-table th, .sm-table td { padding: .55em .6em; }
}

/* ------------------------------------------------------- overflow guard */
/* A hard offset shadow paints outside its box and can widen the document in
   RTL. Nothing on this page may push the body sideways. */
.sm-hero, .sm-panels, .sm-stages, .sm-table-wrap { max-width: 100%; }
.sm-panel, .sm-stage, .sm-bubble { min-width: 0; }
.sm-panel img, .sm-mascot { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	.sm-stage { transition: none; }
	.sm-stage:hover, .sm-stage:focus-visible { transform: none; }
}

/* ================================================================ trust */
.sm-trust__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--20);
	text-align: center;
}
.sm-trust__list li { display: flex; flex-direction: column; gap: .15em; color: var(--wp--preset--color--paper); }
.sm-trust__list b { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 800; }
.sm-trust__list span { font-size: .85rem; opacity: .72; }

/* ============================================================ lifestyle */
.sm-life__photo img { border-radius: var(--sm-radius); display: block; width: 100%; height: auto; }
.sm-life__list { list-style: none; margin: 1.1em 0 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.sm-life__list li { position: relative; padding-inline-start: 1.6em; font-size: .95rem; color: var(--wp--preset--color--ink); }
.sm-life__list li::before {
	content: "";
	position: absolute; inset-inline-start: 0; top: .48em;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--wp--preset--color--brand);
}

/* ========================================================== ingredients */
.sm-ing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
.sm-ing__card { padding: 1.4em 1.5em; border-radius: var(--sm-radius); border: 2px solid var(--wp--preset--color--cloud); }
.sm-ing__card--no  { background: var(--wp--preset--color--paper); }
.sm-ing__card--yes { background: var(--wp--preset--color--mist); border-color: var(--wp--preset--color--sky); }
.sm-ing__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .8em; }
.sm-ing__card--no  .sm-ing__label { color: var(--wp--preset--color--brand); }
.sm-ing__card--yes .sm-ing__label { color: var(--wp--preset--color--grass); }
.sm-ing__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.sm-ing__card li { position: relative; padding-inline-start: 1.7em; font-size: .97rem; color: var(--wp--preset--color--navy); }
/* A crossed-out circle for "free from", a tick for "designed to be". */
.sm-ing__card--no li::before {
	content: "×"; position: absolute; inset-inline-start: 0; top: -.08em;
	color: var(--wp--preset--color--brand); font-weight: 800; font-size: 1.2em; line-height: 1.4;
}
.sm-ing__card--yes li::before {
	content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
	color: var(--wp--preset--color--grass); font-weight: 800;
}

/* ============================================================= learning */
.sm-learn__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--30); }
.sm-learn__card {
	display: flex; flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--cloud);
	border-radius: var(--sm-radius);
	overflow: hidden; text-decoration: none; color: inherit;
	transition: border-color .15s, transform .15s;
}
.sm-learn__card:hover, .sm-learn__card:focus-visible { border-color: var(--wp--preset--color--brand); transform: translateY(-2px); }
.sm-learn__card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--wp--preset--color--mist); }
.sm-learn__body { padding: .95em 1.05em 1.15em; display: flex; flex-direction: column; gap: .35em; }
.sm-learn__k { font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: var(--wp--preset--color--brand); }
.sm-learn__card b { font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--wp--preset--color--navy); }

/* =============================================================== quotes */
.sm-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--30); }
.sm-quote { margin: 0; padding: 1.5em 1.6em; background: var(--wp--preset--color--mist); border-radius: var(--sm-radius); display: flex; flex-direction: column; gap: 1em; }
.sm-quote blockquote {
	margin: 0; font-size: 1rem; line-height: 1.75; color: var(--wp--preset--color--navy); position: relative;
	padding-inline-start: 1.5em;
}
.sm-quote blockquote::before {
	content: "”";
	position: absolute; inset-inline-start: -.05em; top: -.35em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.6em; line-height: 1; color: var(--wp--preset--color--brand); opacity: .35;
}
.sm-quote figcaption { display: flex; flex-direction: column; gap: .1em; }
.sm-quote figcaption b { font-weight: 700; color: var(--wp--preset--color--navy); font-size: .93rem; }
.sm-quote figcaption span { font-size: .8rem; color: var(--wp--preset--color--ink); opacity: .65; }

/* ========================================================= phone tweaks */
@media (max-width: 781px) {
	.sm-trust__list  { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--30); }
	.sm-ing__grid,
	.sm-quotes__grid { grid-template-columns: 1fr; }
	.sm-learn__grid  { grid-template-columns: repeat(2, 1fr); }
	.sm-learn__card img { height: 120px; }
}
@media (max-width: 480px) {
	.sm-learn__grid { grid-template-columns: 1fr; }
}

/* ================================================================== FAQ */
/* <details>/<summary>: an accordion that needs no JavaScript and stays
   open to Ctrl+F and to search engines. */
.sm-faq { display: flex; flex-direction: column; gap: .6em; }
.sm-faq__item {
	border: 2px solid var(--wp--preset--color--cloud);
	border-radius: var(--sm-radius);
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}
.sm-faq__item[open] { border-color: var(--wp--preset--color--brand); }
.sm-faq summary {
	cursor: pointer; list-style: none;
	padding: .95em 1.15em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 1.02rem;
	color: var(--wp--preset--color--navy);
	display: flex; align-items: center; justify-content: space-between; gap: 1em;
}
.sm-faq summary::-webkit-details-marker { display: none; }
.sm-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.4em; font-weight: 700; line-height: 1;
	color: var(--wp--preset--color--brand);
	transition: transform .18s;
}
.sm-faq__item[open] summary::after { content: "−"; }
.sm-faq summary:hover { background: var(--wp--preset--color--mist); }
.sm-faq__a {
	padding: 0 1.15em 1.1em;
	color: var(--wp--preset--color--ink);
	font-size: .97rem; line-height: 1.85;
}

/* ====================================================== product assure */
.sm-assure__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.sm-assure__list li {
	position: relative; padding-inline-start: 1.7em;
	font-size: .93rem; color: var(--wp--preset--color--ink);
}
.sm-assure__list li::before {
	content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
	color: var(--wp--preset--color--grass); font-weight: 800;
}

/* ============================================== WooCommerce alignment */
/* Product cards: equal height, price and button on a shared baseline,
   so a long Arabic title never shunts one card's button out of line. */
.wc-block-product-template {
	display: grid !important;
	/* Must name the columns: display:grid alone collapses every card into
	   a single column and makes the page four screens tall. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.wc-block-product-template__responsive { display: contents; }
.wc-block-product-template li.wc-block-product {
	display: flex; flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--cloud);
	border-radius: var(--sm-radius);
	padding: 1em .9em 1.1em;
	transition: border-color .15s;
}
.wc-block-product-template li.wc-block-product:hover { border-color: var(--wp--preset--color--brand); }
.wc-block-product-template li.wc-block-product .wc-block-components-product-price { margin-top: auto; }
.wc-block-product-template li.wc-block-product img { mix-blend-mode: multiply; }
.wc-block-product-template li.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--navy); }
.wc-block-product-template li.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--brand); }

@media (prefers-reduced-motion: reduce) {
	.sm-learn__card, .sm-faq summary::after, .wc-block-product-template li.wc-block-product { transition: none; }
	.sm-learn__card:hover, .sm-learn__card:focus-visible { transform: none; }
}

/* =============================================================== footer */
.sm-foot {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.sm-foot__brand img { border-radius: 50%; display: block; margin-bottom: .8em; }
.sm-foot__slogan {
	margin: 0 0 .8em; font-style: italic; font-weight: 600; font-size: .92rem;
	color: var(--wp--preset--color--brand);
	direction: ltr; unicode-bidi: isolate;
}
.sm-foot__about { margin: 0 0 .9em; font-size: .9rem; line-height: 1.8; opacity: .8; max-width: 34ch; }
.sm-foot__tm { margin: 0; font-size: .78rem; opacity: .55; direction: ltr; unicode-bidi: isolate; }
.sm-foot__col { display: flex; flex-direction: column; gap: .55em; }
.sm-foot__col h3 {
	margin: 0 0 .3em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .95rem; font-weight: 700;
	color: var(--wp--preset--color--paper);
}
.sm-foot__col a {
	color: var(--wp--preset--color--paper);
	opacity: .78; text-decoration: none; font-size: .9rem;
	transition: opacity .15s, color .15s;
}
.sm-foot__col a:hover, .sm-foot__col a:focus-visible { opacity: 1; color: var(--wp--preset--color--brand); }
.sm-foot__tel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem !important; font-weight: 800;
	opacity: 1 !important; direction: ltr; unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}
.sm-foot__hours, .sm-foot__pay { margin: 0; font-size: .85rem; opacity: .7; line-height: 1.7; }
.sm-foot__rule { border: 0; border-top: 1px solid rgba(255,255,255,.18); }
.sm-foot__legal {
	display: flex; flex-wrap: wrap; gap: .5em 1.5em;
	justify-content: space-between;
	font-size: .82rem; opacity: .65;
}
.sm-foot__legal a { color: inherit; }

@media (max-width: 900px) {
	.sm-foot { grid-template-columns: 1fr 1fr 1fr; }
	.sm-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.sm-foot { grid-template-columns: 1fr 1fr; }
}

/* Product grid columns step down with the screen. */
@media (max-width: 900px) {
	.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.wc-block-product-template { grid-template-columns: minmax(0, 1fr); }
}

/* The product grid runs to the wide width, not the reading column. */
.wc-block-product-template li.wc-block-product .wp-block-post-title { font-size: .92rem; line-height: 1.5; }
.wc-block-product-template li.wc-block-product .wp-block-button__link,
.wc-block-product-template li.wc-block-product .wc-block-components-product-button a { white-space: nowrap; }

/* ======================================================= product gallery */
/* The gallery block ships almost no sizing of its own; without this the
   product photo renders at its intrinsic thumbnail size. */
.wp-block-woocommerce-product-image-gallery { width: 100%; }
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.wp-block-woocommerce-product-image-gallery img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sm-radius);
	background: var(--wp--preset--color--mist);
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .5rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li { margin: 0; }
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img {
	border: 2px solid transparent;
	cursor: pointer;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img.flex-active,
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--brand);
}
/* WooCommerce's zoom trigger overlaps the image corner. */
.woocommerce-product-gallery__trigger {
	top: .8rem !important;
	inset-inline-end: .8rem;
	inset-inline-start: auto;
	z-index: 2;
}

/* Product tabs read as navigation, not as decoration. */
.wp-block-woocommerce-product-details .wc-tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0; margin: 0 0 1.2rem; border-bottom: 2px solid var(--wp--preset--color--cloud); }
.wp-block-woocommerce-product-details .wc-tabs li { list-style: none; margin: 0; }
.wp-block-woocommerce-product-details .wc-tabs li a {
	display: block; padding: .6em 1.1em; text-decoration: none;
	font-weight: 700; font-size: .93rem;
	color: var(--wp--preset--color--ink);
	border-radius: var(--sm-radius) var(--sm-radius) 0 0;
}
.wp-block-woocommerce-product-details .wc-tabs li.active a { color: var(--wp--preset--color--navy); background: var(--wp--preset--color--mist); }

/* ================================================================ clouds */
/* Dreft's signature move: soft clouds drifting behind the hero. Kept behind
   the copy, very low contrast, and slow — atmosphere, not decoration. */
.sm-clouds {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.sm-cloud {
	position: absolute;
	color: #fff;
	opacity: .92;
	filter: drop-shadow(0 6px 14px rgba(20, 56, 77, .10));
	will-change: transform;
}
/* Positions are all on the MASCOT side (inline-end) plus the top strip.
   The copy sits on the inline-start side, and a cloud behind Arabic text
   ruins its legibility — in RTL inline-start is the right-hand edge, which
   is easy to get backwards. */
/*
 * Travel, not a bob.
 *
 * Both .sm-hero and .sm-clouds are overflow: hidden, so a cloud can run well
 * past the edge and simply clip — there is no page-overflow cost to a long
 * path. The earlier 14px on a single axis was inside the noise floor; these
 * cross a real distance, and the ones lower in the sky move further and
 * faster than the ones high up, which is the parallax cue that sells depth.
 */
.sm-cloud--1 { width: 230px; top:  4%; inset-inline-end: 24%; animation: sm-drift-a 21s ease-in-out infinite; }
.sm-cloud--2 { width: 140px; top: 34%; inset-inline-end:  4%; opacity: .72; animation: sm-drift-b 15s ease-in-out infinite; }
.sm-cloud--3 { width: 180px; top: 64%; inset-inline-end: 30%; opacity: .8;  animation: sm-drift-c 17s ease-in-out infinite 1.2s; }
.sm-cloud--4 { width: 120px; top:  8%; inset-inline-end: 47%; opacity: .55; animation: sm-drift-b 27s ease-in-out infinite 2s reverse; }
.sm-cloud--5 { width:  95px; top: 78%; inset-inline-end: 12%; opacity: .6;  animation: sm-drift-c 13s ease-in-out infinite 3s reverse; }

@keyframes sm-drift-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	25%  { transform: translate3d(-64px, -26px, 0) scale(1.07); }
	50%  { transform: translate3d(-96px, 12px, 0) scale(1.02); }
	75%  { transform: translate3d(-42px, 30px, 0) scale(.95); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sm-drift-b {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	30%  { transform: translate3d(78px, -34px, 0) scale(1.11); }
	60%  { transform: translate3d(112px, 8px, 0) scale(1.04); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sm-drift-c {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	20%  { transform: translate3d(38px, -44px, 0) scale(1.05); }
	55%  { transform: translate3d(-30px, -18px, 0) scale(1.12); }
	80%  { transform: translate3d(-58px, 22px, 0) scale(.93); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.sm-cloud { animation: none !important; }
}

/* Hero content sits above the clouds. */
.sm-hero > .wp-block-columns,
.sm-hero > .wp-block-group { position: relative; z-index: 1; }

/* A bigger, more confident primary call to action. */
.sm-cta-lg .wp-block-button__link {
	font-size: var(--wp--preset--font-size--md);
	padding: 1em 2.2em;
	box-shadow: 0 8px 20px -8px rgba(216, 39, 136, .6);
}

/* ==================================================== denser everywhere */
/* The mascot carries the hero; give her room. */
.sm-mascot { max-width: 360px; }
@media (max-width: 781px) { .sm-mascot { max-width: 240px; } }

/* Product cards: the image is the product, so let it dominate the card. */
.wc-block-product-template li.wc-block-product { padding: 1.1em 1em 1.2em; }
.wc-block-product-template li.wc-block-product .wc-block-components-product-image,
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-image { margin-bottom: .5rem; }
.wc-block-product-template li.wc-block-product img {
	width: 100%;
	height: 210px;
	object-fit: contain;
}
.wc-block-product-template li.wc-block-product .wp-block-post-title {
	font-size: 1.02rem !important;
	line-height: 1.55;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-price { font-size: 1.15rem; }
.wc-block-product-template li.wc-block-product .wp-block-button__link { font-size: .97rem; padding: .7em 1.4em; }

@media (max-width: 781px) {
	.wc-block-product-template li.wc-block-product img { height: 170px; }
}

/* Section headings carry more weight now that the scale is larger. */
.sm-eyebrow { font-size: .95rem; margin-block-end: .35em; }
.sm-stage b { font-size: 1.25rem; }
.sm-stage span { font-size: 1rem; }
.sm-trust__list b { font-size: 1.55rem; }
.sm-trust__list span { font-size: .95rem; }
.sm-learn__card b { font-size: 1.1rem; }
.sm-learn__k { font-size: .84rem; }
.sm-quote blockquote { font-size: 1.1rem; }
.sm-ing__card li { font-size: 1.05rem; }
.sm-life__list li { font-size: 1.05rem; }
.sm-table { font-size: 1.02rem; }
.sm-faq summary { font-size: 1.1rem; }
.sm-faq__a { font-size: 1.05rem; }
.sm-bubble { font-size: 1.15rem; max-width: 38ch; }

/* WooCommerce sizes product cards for ITS flex layout (flex-basis + max-width).
   Inside our grid those become a hard width cap and the cards shrink to a
   third of their cell. Reset them and let the grid do the sizing. */
.wc-block-product-template li.wc-block-product {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}
/* Product image fills the card's width; contain letterboxes the tall bundle
   banners instead of cropping their price off. */
.wc-block-product-template li.wc-block-product .wc-block-components-product-image,
.wc-block-product-template li.wc-block-product .wc-block-components-product-image a,
.wc-block-product-template li.wc-block-product .wc-block-components-product-image img { width: 100%; display: block; }
.wc-block-product-template li.wc-block-product .wc-block-components-product-image { overflow: visible; }
.wc-block-product-template li.wc-block-product .wc-block-components-product-sale-badge {
	inset-inline-end: .5rem;
	inset-inline-start: auto;
	top: .5rem;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	border: 0;
	font-weight: 700;
}

/* WooCommerce wraps each product image in a forced 1:1 box and crops to fill.
   The bundle artwork is a square advert with the price near its edge, so a
   crop cuts the price off. Let the box size to the image instead. */
.wc-block-components-product-image--aspect-ratio-1-1 { aspect-ratio: auto !important; }
.wc-block-components-product-image__inner-container { aspect-ratio: auto !important; height: auto !important; }
.wc-block-product-template li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	height: 210px !important;
	width: 100% !important;
}

/* Card chrome, stated once and explicitly so nothing upstream flattens it. */
.wc-block-product-template > li.wc-block-product {
	border: 2px solid var(--wp--preset--color--cloud) !important;
	border-radius: var(--sm-radius) !important;
	background: var(--wp--preset--color--paper) !important;
	overflow: hidden;
}
.wc-block-product-template > li.wc-block-product:hover {
	border-color: var(--wp--preset--color--brand) !important;
}
@media (max-width: 781px) {
	.wc-block-product-template li.wc-block-product .wc-block-components-product-image img { height: 170px !important; }
}

/* width:100% plus card padding overflowed each grid column by the padding
   amount (413px cards in 371px columns). */
.wc-block-product-template > li.wc-block-product { box-sizing: border-box; }
/* A slightly stronger card edge — the cloud token alone is too pale to read
   as a card boundary at this size. */
.wc-block-product-template > li.wc-block-product { border-color: #C3D9EC !important; }

/* =============================================================== header */
/* The bar read as empty: small nav type marooned between the logo and the
   cart. Bigger type, wider gaps, and a phone number — calling to order is
   normal for an Egyptian shop, and it fills the dead space usefully. */
.sm-head__brand { gap: .75rem; }
.sm-head__names { display: flex; flex-direction: column; gap: .05rem; }
.sm-head__names .wp-block-site-title { font-size: 1.45rem; line-height: 1.15; }
.sm-head__names .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--navy); }
.sm-head__slogan {
	margin: 0;
	font-size: .8rem;
	font-weight: 600;
	font-style: italic;
	color: var(--wp--preset--color--brand);
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}
@media (max-width: 1080px) { .sm-head__slogan { display: none; } }

.sm-head__aside { gap: 1.1rem; }
.sm-head__tel {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-decoration: none;
	line-height: 1.25;
	text-align: end;
}
.sm-head__tel-k { font-size: .76rem; color: var(--wp--preset--color--ink); opacity: .7; }
.sm-head__tel-n {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand);
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}
.sm-head__tel:hover .sm-head__tel-n { color: var(--wp--preset--color--navy); }
@media (max-width: 860px) { .sm-head__tel { display: none; } }
.sm-head .wc-block-mini-cart__button { font-size: 1.35rem; }

/* ========================================================= bigger mascot */
.sm-mascot { max-width: 440px; }
@media (max-width: 1080px) { .sm-mascot { max-width: 350px; } }
@media (max-width: 781px)  { .sm-mascot { max-width: 260px; } }

/* =================================================== bigger learn cards */
.sm-learn__grid { gap: var(--wp--preset--spacing--30); }
.sm-learn__card img { height: 230px; }
.sm-learn__body { padding: 1.15em 1.25em 1.35em; gap: .45em; }
.sm-learn__k { font-size: .9rem; }
.sm-learn__card b { font-size: 1.22rem; line-height: 1.45; }
@media (max-width: 1080px) { .sm-learn__card img { height: 190px; } }
@media (max-width: 781px)  { .sm-learn__card img { height: 200px; } }

/* ---------------------------------------------- Learning centre ---- */

.sm-lc__hero { text-align: center; }
.sm-lc__hero .wp-block-post-title { margin-block: 0.25em 0; }
.sm-eyebrow--on-navy { color: var(--wp--preset--color--sky); }

.sm-lc__deck {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* The index: four jump cards, each a numbered doorway into a topic. */
.sm-lc__index {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}
.sm-lc__card {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 1.35em 1.25em 1.45em;
	border: 2px solid #C3D9EC;
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Each topic keeps one colour, so the index and the band agree. */
.sm-lc__card--1 { border-top: 6px solid var(--wp--preset--color--sky); }
.sm-lc__card--2 { border-top: 6px solid var(--wp--preset--color--grass); }
.sm-lc__card--3 { border-top: 6px solid var(--wp--preset--color--brand); }
.sm-lc__card--4 { border-top: 6px solid var(--wp--preset--color--navy); }
.sm-lc__card:hover,
.sm-lc__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(4, 41, 104, .13);
	border-color: var(--wp--preset--color--navy);
}
.sm-lc__card-num {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--cloud);
	/* Latin numerals read left-to-right even on an RTL page. */
	unicode-bidi: isolate;
}
.sm-lc__card b {
	font-size: 1.12rem;
	color: var(--wp--preset--color--navy);
	line-height: 1.35;
}
.sm-lc__card-sub {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	opacity: .78;
}

/* A topic band. */
.sm-lc__topic { scroll-margin-block-start: 1rem; }
.sm-lc__head { max-width: 52rem; }
.sm-lc__kicker {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--brand);
	margin-block-end: 0.5em;
}
.sm-lc__topic h2 {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	margin: 0;
}
.sm-lc__lead {
	margin-block-start: 0.7em;
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

/* Steps as cards rather than bullets: each one a thing you can look at. */
.sm-lc__steps {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30);
}
/* Five steps wrap as 4+1 and leave an orphan; three columns give 3+2.
   Four-step sections keep their single clean row.
   Held behind a min-width: :has() outranks the one-column phone rule
   on specificity, so unscoped it would keep three columns at 360px
   and push the page 21px sideways. */
@media (min-width: 601px) {
	.sm-lc__steps:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.sm-lc__step {
	display: flex;
	align-items: flex-start;
	gap: 0.85em;
	padding: 1.15em 1.2em;
	background: var(--wp--preset--color--paper);
	border: 2px solid #C3D9EC;
	border-radius: 12px;
	font-size: 1.03rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}
/* On the paper bands the cards need a tint to separate from the ground. */
.sm-lc__topic.has-paper-background-color .sm-lc__step { background: var(--wp--preset--color--mist); }
.sm-lc__step-num {
	flex: 0 0 auto;
	inline-size: 2rem;
	block-size: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	font-weight: 800;
	font-size: 1rem;
	unicode-bidi: isolate;
}
.sm-lc__cta { margin-block-start: var(--wp--preset--spacing--40); }
.sm-lc__cta a {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	text-decoration: none;
}
.sm-lc__cta a:hover,
.sm-lc__cta a:focus-visible { background: var(--wp--preset--color--navy); }

@media (max-width: 1080px) {
	.sm-lc__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sm-lc__index { grid-template-columns: 1fr; }
	.sm-lc__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.sm-lc__card { transition: none; }
	.sm-lc__card:hover, .sm-lc__card:focus-visible { transform: none; }
}

/* WooCommerce's own product grid hangs 8px past its container on every
   width — the list carries negative side margins that the surrounding
   block layout does not account for. The children already have padding,
   so zeroing the margin keeps the gutter and stops the sideways scroll. */
.wc-block-grid__products {
	margin-inline: 0;
}

/* ------------------------------------------------- Header nav ------ */
/* Plain links rather than the navigation block: the bar has to render in
   whichever language the request is for, and a pattern (PHP) can do that
   where block markup cannot. */

.sm-head__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.sm-head__nav a {
	position: relative;
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	padding-block: .35em;
	white-space: nowrap;
}
.sm-head__nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--brand);
	transform: scaleX(0);
	transition: transform .18s ease;
}
.sm-head__nav a:hover::after,
.sm-head__nav a:focus-visible::after { transform: scaleX(1); }

/* The burger is hidden until the bar runs out of room. */
.sm-head__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}
.sm-head__burger span {
	display: block;
	block-size: 2.5px;
	inline-size: 24px;
	margin-inline: auto;
	border-radius: 2px;
	background: var(--wp--preset--color--navy);
	transition: transform .2s ease, opacity .2s ease;
}
.sm-head__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sm-head__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sm-head__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* The AR / EN toggle. Two links, always both present. */
.sm-lang {
	display: inline-flex;
	border: 2px solid #C3D9EC;
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}
.sm-lang__opt {
	padding: .3em .8em;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	/* A Latin label on an Arabic page must not be reordered by the bidi
	   algorithm, and vice versa. */
	unicode-bidi: isolate;
}
.sm-lang__opt.is-current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}
.sm-lang__opt:not(.is-current):hover { background: var(--wp--preset--color--mist); }

/* 1200, not 1080: the aside gained a search control, and at ~1180px the
   bar wrapped onto two rows with the logo stranded above everything else. */
@media (max-width: 1200px) {
	.sm-head__burger { display: flex; order: 3; }
	.sm-head__nav {
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-block-start: .75rem;
		padding-block-start: .75rem;
		border-block-start: 1px solid var(--wp--preset--color--cloud);
	}
	.sm-head__nav[hidden] { display: none; }
	.sm-head__nav a { padding-block: .7em; font-size: 1.15rem; }
	.sm-head__nav a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-head__nav a::after,
	.sm-head__burger span { transition: none; }
}

/* ---- Header search ---- */
.sm-head__search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.sm-head__search-btn:hover { background: var(--wp--preset--color--mist); }
.sm-search {
	display: flex;
	gap: .5rem;
	margin-block-start: .85rem;
	padding-block-start: .85rem;
	border-block-start: 1px solid var(--wp--preset--color--cloud);
}
.sm-search[hidden] { display: none; }
.sm-search input[type="search"] {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: .7em 1em;
	border: 2px solid #C3D9EC;
	border-radius: 999px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
.sm-search input[type="search"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
.sm-search button {
	padding: .7em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}
.sm-search button:hover { background: var(--wp--preset--color--navy); }

/* ---- Panels that are products ----
   Two of the three panels advertise a real product, so they behave like
   links: the whole card is the target, and it says where it goes. */
.sm-panel--link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.sm-panel--link:hover,
.sm-panel--link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 10px 10px 0 var(--wp--preset--color--brand);
}
.sm-panel__price {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: .35em 0 0;
	unicode-bidi: isolate;
}
.sm-panel__price del { opacity: .5; font-size: .82em; font-weight: 600; margin-inline-end: .45em; }
.sm-panel__price ins { text-decoration: none; color: var(--wp--preset--color--brand); }
.sm-panel__note {
	margin: .45em 0 0;
	font-size: .98rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.sm-panel__go {
	margin-block-start: auto;
	padding-block-start: .9em;
	font-weight: 700;
	color: var(--wp--preset--color--brand);
}

@media (prefers-reduced-motion: reduce) {
	.sm-panel--link { transition: none; }
	.sm-panel--link:hover,
	.sm-panel--link:focus-visible { transform: none; }
}