/**
 * SIMM.li — styles for the parts Elementor cannot own.
 *
 * Global colours, fonts, container width and breakpoints live in Elementor's
 * Site Settings (see KitSettings), not here. This file covers only:
 *   1. the two custom widgets that generate their own markup,
 *   2. the WooCommerce account area, which Elementor does not template,
 *   3. a small number of guards against theme defaults.
 *
 * Values mirror the Kit's globals so the two stay visually identical; the Kit
 * remains the place to change them.
 *
 * RTL-first (logical properties throughout) and mobile-first.
 */

:root {
	--simm-blue-50:  #eef3ff;
	--simm-blue-100: #dbe6ff;
	--simm-blue-200: #b8ceff;
	--simm-blue-300: #85a9ff;
	--simm-blue-400: #3d7bff;
	/* The light end of the CTA gradient. #3d7bff measured 3.84:1 against white
	   text, and the button label (15.2px bold) does not reach the large-text
	   threshold, so it failed AA at that end of the sweep. 5.10:1. */
	--simm-blue-cta: #2463f0;
	--simm-blue-500: #0050f8;
	--simm-blue-600: #0040cc;
	--simm-blue-700: #0032a0;

	--simm-ink:       #001040;
	--simm-body:      #46526e;
	/* Darkened from #7a869f, which measured 3.66:1 on white and failed WCAG
	   AA for the body sizes it is used at. 5.33:1 on white, 5.01 on canvas —
	   still clearly lighter than --simm-body, so the hierarchy survives. */
	--simm-muted:     #5f6b87;
	--simm-line:      #e5eaf3;
	--simm-line-soft: #eef2f8;
	--simm-surface:   #ffffff;
	--simm-canvas:    #f5f8fd;

	/* Darkened from #0d8a4f: 3.94:1 on its own tint and 4.41:1 under white
	   text, both short of AA at the badge sizes. Now 5.29 and 5.92. */
	--simm-success:    #0a7343;
	--simm-success-bg: #e6f6ed;
	--simm-warning:    #a15c00;
	--simm-warn-bg:    #fff7e8;
	--simm-violet:     #5b2ec4;
	--simm-violet-bg:  #f2edfe;

	/* Promoted from the inline fallbacks §51 was already using on the eSIM
	   status pill (`var(--simm-danger, #c0392b)`), with exactly those values, so
	   nothing there moves. They are real tokens now because the device
	   compatibility banner needs the same pair for "does not support eSIM" and
	   a second hard-coded red would be a second red. 5.06:1 on white and 4.72:1
	   on its own tint. */
	--simm-danger:     #c0392b;
	--simm-danger-bg:  #fdecec;

	--simm-r-sm: 10px;
	--simm-r:    16px;
	--simm-r-lg: 24px;

	/* Two-stop shadows read as depth; a single stop reads as a smudge. */
	--simm-sh-xs: 0 1px 2px rgba(0, 16, 64, .05);
	--simm-sh-sm: 0 2px 4px rgba(0, 16, 64, .04), 0 4px 12px rgba(0, 16, 64, .05);
	--simm-sh:    0 4px 8px rgba(0, 16, 64, .05), 0 12px 28px rgba(0, 16, 64, .08);
	--simm-sh-lg: 0 8px 16px rgba(0, 16, 64, .06), 0 24px 56px rgba(0, 16, 64, .12);
	--simm-sh-blue: 0 6px 16px rgba(0, 80, 248, .22);

	--simm-tap: 44px;
	--simm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================================
   1. Guards against theme defaults
   ========================================================================= */

/* The logo must never render at its intrinsic width. Applies to the Elementor
   Site Logo widget and to the theme's own header, whichever is active. */
.custom-logo,
.custom-logo-link img,
.elementor-widget-theme-site-logo img {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 224px;
	max-block-size: 52px;
	object-fit: contain;
	display: block;
}

@media (max-width: 767px) {
	.custom-logo,
	.custom-logo-link img,
	.elementor-widget-theme-site-logo img {
		max-inline-size: 165px;
		max-block-size: 40px;
	}
}

/* Fallback header, shown only if the Elementor one is unavailable. */
#site-header.site-header {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 28px);
	align-items: center;
}

/* =========================================================================
   2. Shared primitives for the custom widgets
   ========================================================================= */

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

.simm { color: var(--simm-body); line-height: 1.6; }

/* Every inline SVG here is an icon sized by its font-size. Without this an
   SVG carrying only a viewBox stretches to fill its container — which is what
   turned the card checkmarks into full-width graphics. */
.simm svg {
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	display: inline-block;
	vertical-align: middle;
}

.simm img { max-inline-size: 100%; block-size: auto; }

/* Codes, prices and identifiers stay LTR inside the RTL page. */
.simm-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.simm-isolate { unicode-bidi: isolate; }

.simm-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.simm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-block-size: var(--simm-tap);
	padding: .8rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--simm-r-sm);
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--simm-ease), box-shadow .2s var(--simm-ease), background-color .18s ease;
}

.simm-btn:focus-visible { outline: 3px solid var(--simm-blue-300); outline-offset: 2px; }

.simm-btn--primary {
	background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-cta));
	color: #fff;
	box-shadow: var(--simm-sh-blue);
}

.simm-btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 80, 248, .3);
}

.simm-btn--primary:active { transform: translateY(0); }

.simm-btn--ghost {
	background: var(--simm-surface);
	border-color: var(--simm-blue-200);
	color: var(--simm-blue-600);
}

.simm-btn--ghost:hover { background: var(--simm-blue-50); border-color: var(--simm-blue-400); }
.simm-btn--block { inline-size: 100%; }

.simm-state {
	padding: clamp(32px, 5vw, 56px) 1.25rem;
	text-align: center;
	background: var(--simm-canvas);
	border: 1px dashed var(--simm-line);
	border-radius: var(--simm-r-lg);
	color: var(--simm-muted);
}

.simm-state__title { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; color: var(--simm-ink); }

/* =========================================================================
   3. Plan cards
   ========================================================================= */

.simm-plans {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media (min-width: 560px)  { .simm-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .simm-plans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .simm-plans { grid-template-columns: repeat(4, 1fr); } }

.simm-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-lg);
	padding: 1.1rem 1.1rem 1.2rem;
	box-shadow: var(--simm-sh-xs);
	transition: transform .25s var(--simm-ease), box-shadow .25s var(--simm-ease), border-color .2s ease;
}

@media (hover: hover) {
	.simm-plan:hover {
		border-color: var(--simm-blue-200);
		box-shadow: var(--simm-sh);
		transform: translateY(-4px);
	}
}

.simm-plan--featured {
	border-color: transparent;
	box-shadow: var(--simm-sh), 0 0 0 2px var(--simm-blue-500);
}

.simm-plan__flag {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	display: inline-flex;
	align-items: center;
	padding: .26rem .8rem;
	background: var(--simm-blue-500);
	color: #fff;
	font-size: .71rem;
	font-weight: 700;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: var(--simm-sh-xs);
}

.simm-plan__flag--cheapest { background: var(--simm-success); }
.simm-plan__flag--value    { background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-cta)); }
.simm-plan__flag--data     { background: var(--simm-violet); }

/* Coverage badge — stops a 34-country regional pack reading as country-specific. */
.simm-plan__coverage {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	max-inline-size: 100%;
	padding: .2rem .6rem;
	margin-block-end: .5rem;
	border-radius: 999px;
	font-size: .69rem;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.simm-plan__coverage--national { background: var(--simm-success-bg); color: var(--simm-success); }
.simm-plan__coverage--regional { background: var(--simm-blue-50);    color: var(--simm-blue-700); }
.simm-plan__coverage--global   { background: var(--simm-violet-bg);  color: var(--simm-violet); }

/* Provider title is secondary; clamped so a long name cannot stretch the card. */
.simm-plan__title {
	margin: 0 0 .08rem;
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--simm-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.simm-plan__validity { margin: 0 0 .5rem; font-size: .79rem; color: var(--simm-muted); }

/* Volume is the headline number. */
.simm-plan__data {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 2.45rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--simm-ink);
}

.simm-plan--featured .simm-plan__data {
	background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.simm-plan__data-label { margin: .22rem 0 0; font-size: .73rem; color: var(--simm-muted); }

/* Benefits: a compact list of small icons, never the focus of the card. */
.simm-plan__specs {
	margin: .8rem 0 .45rem;
	padding: .75rem 0 0;
	border-block-start: 1px solid var(--simm-line-soft);
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .78rem;
}

.simm-plan__spec { display: flex; align-items: center; gap: .4rem; color: var(--simm-body); }

/* ~13px icons. Explicit, because these were previously unsized. */
.simm-plan__spec svg,
.simm-plan__includes svg,
.simm-plan__kyc svg,
.simm-coverage-note svg { font-size: .9rem; color: var(--simm-blue-500); }

.simm-plan__includes {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	font-weight: 700;
	color: var(--simm-success);
}

.simm-plan__includes svg { color: var(--simm-success); }

.simm-plan__countries-toggle {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	align-self: flex-start;
	/* Padded to the 44px touch floor without adding visible bulk to the card. */
	min-block-size: 44px;
	padding: .5rem .25rem;
	background: none;
	border: 0;
	font: inherit;
	font-size: .75rem;
	color: var(--simm-blue-600);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.simm-plan__countries-toggle::after {
	content: "";
	inline-size: 0;
	block-size: 0;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
	transition: transform .2s var(--simm-ease);
}

.simm-plan__countries-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.simm-plan__countries {
	margin: .28rem 0 .45rem;
	padding: .6rem;
	max-block-size: 140px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--simm-canvas);
	border-radius: var(--simm-r-sm);
	font-size: .73rem;
	line-height: 1.85;
	color: var(--simm-body);
}

.simm-plan__countries[hidden] { display: none; }

.simm-plan__kyc { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 0; font-size: .73rem; }

.simm-plan__kyc--required {
	padding: .38rem .55rem;
	background: var(--simm-warn-bg);
	border-radius: var(--simm-r-sm);
	color: var(--simm-warning);
}

.simm-plan__kyc--required svg { color: var(--simm-warning); }
.simm-plan__kyc--clear { color: var(--simm-muted); }
.simm-plan__kyc--clear svg { color: var(--simm-success); }

/* Price and CTA pinned to the bottom so every card's action line aligns. */
.simm-plan__price {
	margin-block-start: auto;
	padding-block-start: .8rem;
	border-block-start: 1px solid var(--simm-line-soft);
}

.simm-plan__price-value {
	font-size: clamp(1.45rem, 2.3vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--simm-ink);
	line-height: 1.1;
}

.simm-plan__price-per { display: block; margin-block-start: .08rem; font-size: .71rem; color: var(--simm-muted); }
.simm-plan .simm-btn { margin-block-start: .65rem; border-radius: 10px; }

.simm-coverage-note {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-block-end: clamp(18px, 2.4vw, 28px);
	padding: 1rem 1.15rem;
	background: linear-gradient(135deg, var(--simm-blue-50), #fff);
	border: 1px solid var(--simm-blue-100);
	border-radius: var(--simm-r);
	font-size: .92rem;
	line-height: 1.55;
	color: var(--simm-ink);
}

.simm-coverage-note svg { margin-block-start: .2rem; font-size: 1.05rem; }

/* =========================================================================
   4. Networks
   ========================================================================= */

.simm-networks { display: flex; flex-wrap: wrap; gap: .5rem; }

.simm-network {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .85rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--simm-ink);
	box-shadow: var(--simm-sh-xs);
}

.simm-network__tech {
	font-size: .66rem;
	font-weight: 800;
	color: var(--simm-blue-600);
	background: var(--simm-blue-50);
	padding: .12rem .4rem;
	border-radius: 5px;
}

.simm-networks__heading { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 700; color: var(--simm-ink); }

/* =========================================================================
   5. Destination cards + search
   ========================================================================= */

.simm-destinations { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 700px)  { .simm-destinations { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .simm-destinations { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .simm-destinations { grid-template-columns: repeat(6, 1fr); } }

.simm-destination {
	display: block;
	overflow: hidden;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	text-decoration: none;
	box-shadow: var(--simm-sh-xs);
	transition: transform .25s var(--simm-ease), box-shadow .25s var(--simm-ease);
}

@media (hover: hover) {
	.simm-destination:hover { box-shadow: var(--simm-sh); transform: translateY(-4px); }
	.simm-destination:hover .simm-destination__media img { transform: scale(1.06); }
}

.simm-destination__media {
	position: relative;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: linear-gradient(135deg, var(--simm-blue-100), var(--simm-blue-300));
}

.simm-destination__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--simm-ease);
}

.simm-destination__media--empty::after {
	content: attr(data-flag);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(2rem, 5vw, 2.8rem);
}

.simm-destination__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .8rem .9rem .9rem;
}

/* The whole card is one anchor, so it is already tabbable — this is what
   makes that visible. Without it a keyboard user cannot tell where they are. */
.simm-destination:focus-visible {
	outline: 3px solid var(--simm-blue-400);
	outline-offset: 3px;
	box-shadow: var(--simm-sh);
}

.simm-destination__name { font-weight: 700; color: var(--simm-ink); font-size: .95rem; }
.simm-destination__count { display: block; font-size: .74rem; font-weight: 400; color: var(--simm-muted); }

.simm-destination__price {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--simm-blue-600);
	white-space: nowrap;
	letter-spacing: -.02em;
}

.simm-destination__price small { display: block; font-size: .66rem; font-weight: 500; color: var(--simm-muted); text-align: start; }

.simm-search { position: relative; max-inline-size: 520px; }
.simm-search__form { display: flex; gap: .6rem; flex-direction: column; }

@media (min-width: 560px) {
	.simm-search__form { flex-direction: row; }
	.simm-search__field { flex: 1; }
}

.simm-search__field {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding-inline: 1.1rem;
	min-block-size: 60px;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: 14px;
	box-shadow: var(--simm-sh-xs);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.simm-search__field:focus-within { border-color: var(--simm-blue-400); box-shadow: 0 0 0 4px var(--simm-blue-100); }
.simm-search__field svg { font-size: 1.25rem; color: var(--simm-muted); }

.simm-search__field input {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1.02rem;
	color: var(--simm-ink);
	outline: none;
}

.simm-search__form .simm-btn { min-block-size: 60px; padding-inline: 2.2rem; border-radius: 14px; }

.simm-search__results {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + .5rem);
	z-index: 30;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	box-shadow: var(--simm-sh-lg);
	max-block-size: 380px;
	overflow-y: auto;
}

.simm-search__results[hidden] { display: none; }

.simm-search__results a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-block-size: var(--simm-tap);
	padding: .6rem .8rem;
	border-radius: var(--simm-r-sm);
	text-decoration: none;
	color: var(--simm-ink);
	font-size: .94rem;
}

.simm-search__results a:hover,
.simm-search__results a:focus-visible { background: var(--simm-blue-50); }

.simm-search__results small { color: var(--simm-muted); font-size: .78rem; white-space: nowrap; }
.simm-search__empty { padding: .85rem .8rem; color: var(--simm-muted); font-size: .88rem; }

/* =========================================================================
   6. WooCommerce account area
   Elementor does not template this, so it is styled here to match.
   ========================================================================= */

.woocommerce-account .woocommerce {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 28px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce { grid-template-columns: 260px minmax(0, 1fr); }
}

/* Navigation: a proper card, not a bullet list. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	inline-size: 100%;
	float: none;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-lg);
	padding: .5rem;
	box-shadow: var(--simm-sh-xs);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; inset-block-start: 90px; }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li::before,
.woocommerce-account .woocommerce-MyAccount-navigation li::marker { content: none; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-block-size: var(--simm-tap);
	padding: .7rem .9rem;
	border-radius: var(--simm-r-sm);
	color: var(--simm-body);
	text-decoration: none;
	font-size: .93rem;
	font-weight: 600;
	transition: background-color .16s ease, color .16s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--simm-blue-50);
	color: var(--simm-blue-600);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-cta));
	color: #fff;
	box-shadow: var(--simm-sh-blue);
}

/* Simple leading glyphs, keyed off WooCommerce's own endpoint classes. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "•";
	font-size: 1rem;
	line-height: 1;
	opacity: .7;
}

.woocommerce-account .woocommerce-MyAccount-navigation li--simm-esims a::before      { content: "📱"; }
.woocommerce-account .woocommerce-MyAccount-navigation li--dashboard a::before        { content: "🏠"; }
.woocommerce-account .woocommerce-MyAccount-navigation li--orders a::before           { content: "🧾"; }
.woocommerce-account .woocommerce-MyAccount-navigation li--edit-address a::before     { content: "📍"; }
.woocommerce-account .woocommerce-MyAccount-navigation li--edit-account a::before     { content: "⚙️"; }
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a::before  { content: "↩"; }

.woocommerce-account .woocommerce-MyAccount-content {
	inline-size: 100%;
	float: none;
	min-inline-size: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 {
	margin-block: 0 1rem;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 800;
	color: var(--simm-ink);
	letter-spacing: -.02em;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	inline-size: 100%;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--simm-surface);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: .85rem 1rem;
	border: 0;
	border-block-end: 1px solid var(--simm-line-soft);
	text-align: start;
	font-size: .9rem;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: var(--simm-canvas);
	color: var(--simm-ink);
	font-weight: 700;
}

/* Tables become cards on small screens (spec §27). */
@media (max-width: 700px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { display: block; inline-size: 100%; }

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: none; }

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
		margin-block-end: .75rem;
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r);
		overflow: hidden;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--simm-muted);
	}
}

.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--simm-tap);
	padding: .7rem 1.4rem;
	background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-cta));
	border: 0;
	border-radius: var(--simm-r-sm);
	color: #fff;
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
	box-shadow: var(--simm-sh-blue);
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover { color: #fff; transform: translateY(-1px); }

/* =========================================================================
   6b. Signing in
   -------------------------------------------------------------------------
   Signed out, /my-account/ is not the account area at all. WooCommerce prints
   a heading and a form and nothing else — `woocommerce_account_navigation`
   never fires, so the grid above has no sidebar to put in its sidebar column,
   and the form was being laid into the 260px slot meant for the menu and
   stretched by whatever the theme does to a bare form.

   The markup is ours here (AccountLayout::auth_open) rather than WooCommerce's
   leftovers: one card, at reading width, on the page's own surface. Styling
   what a template happens to emit is how the first version of this ended up
   depending on which of two divs WooCommerce wrapped things in.

   The fields borrow the checkout's measurements rather than inventing a second
   set: 44px targets, 16px type so iOS does not zoom the page on focus, and the
   same focus ring.
   ========================================================================= */

/* Out of the sidebar grid. There is no navigation while signed out, and this
   is also what stops WooCommerce's own float rules from finding a layout. */
.simm-account-auth .woocommerce {
	display: block;
	padding-block: clamp(8px, 2vw, 28px);
}

.simm-auth {
	max-inline-size: 440px;
	margin-inline: auto;
}

.simm-auth__card {
	padding: clamp(22px, 3.4vw, 34px);
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-lg);
	box-shadow: var(--simm-sh-sm);
}

.simm-auth__card > h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(1.25rem, 2.8vw, 1.55rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--simm-ink);
	text-align: center;
}

/* Registration, where it is switched on, is WooCommerce's second column. Two
   halves of 440px is neither form, so they stack. */
.simm-auth #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 28px);
}

.simm-auth #customer_login > div {
	inline-size: 100%;
	float: none;
	margin: 0;
}

.simm-auth form { margin: 0; }

.simm-auth .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 1rem;
	padding: 0;
	inline-size: 100%;
	float: none;
}

.simm-auth .form-row label {
	margin-block-end: .35rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--simm-ink);
}

.simm-auth .form-row .required { color: #b3261e; text-decoration: none; }

.simm-auth .form-row input.input-text,
.simm-auth .form-row input[type="text"],
.simm-auth .form-row input[type="email"],
.simm-auth .form-row input[type="password"] {
	inline-size: 100%;
	min-block-size: var(--simm-tap);
	padding: .55rem .8rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	color: var(--simm-ink);
	font: inherit;
	font-size: 16px;
}

.simm-auth .form-row input:focus {
	border-color: var(--simm-blue-500);
	outline: 2px solid rgba(0, 80, 248, .18);
	outline-offset: 0;
}

/* "Remember me" and the submit button share one row in WooCommerce's template,
   so the row is what has to lay them out: the tick above, the button below and
   full width, rather than the two colliding on one line. */
.simm-auth .woocommerce-form-login__rememberme,
.simm-auth .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-block-size: var(--simm-tap);
	margin-block-end: .5rem;
	font-size: .9rem;
	font-weight: 500;
	color: var(--simm-body);
	cursor: pointer;
}

.simm-auth .woocommerce-form__input-checkbox {
	inline-size: 20px;
	block-size: 20px;
	accent-color: var(--simm-blue-500);
}

.simm-auth button[type="submit"],
.simm-auth .woocommerce-Button,
.simm-auth .button {
	inline-size: 100%;
	min-block-size: var(--simm-tap);
	padding: .75rem 1.4rem;
	background: linear-gradient(135deg, var(--simm-blue-500), var(--simm-blue-cta));
	border: 0;
	border-radius: var(--simm-r-sm);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	box-shadow: var(--simm-sh-blue);
	cursor: pointer;
}

.simm-auth button[type="submit"]:hover { transform: translateY(-1px); }

.simm-auth .woocommerce-LostPassword {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .88rem;
}

.simm-auth .woocommerce-LostPassword a,
.simm-auth__aside a {
	color: var(--simm-blue-600);
	font-weight: 600;
	text-decoration: none;
}

.simm-auth .woocommerce-LostPassword a:hover,
.simm-auth__aside a:hover { text-decoration: underline; }

/* The lost-password form opens with an explanation, and the register form with
   the privacy note. Both are body copy inside a card, not headings. */
.simm-auth form > p:first-of-type:not(.form-row),
.simm-auth .woocommerce-privacy-policy-text p {
	margin: 0 0 1.15rem;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--simm-muted);
}

/* Registration is off on this page, so somebody arriving without an account
   needs the door pointed out. */
.simm-auth__aside {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--simm-muted);
}

/* WooCommerce's `.clear` divs exist to break a float layout this card does not
   use, and they open a gap between the field and the button that reads as a
   missing element. */
.simm-auth .clear { display: none; }

.simm-account-auth .woocommerce-notices-wrapper {
	max-inline-size: 440px;
	margin-inline: auto;
}

.simm-account-auth .woocommerce-notices-wrapper .woocommerce-error,
.simm-account-auth .woocommerce-notices-wrapper .woocommerce-message,
.simm-account-auth .woocommerce-notices-wrapper .woocommerce-info {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	list-style: none;
	font-size: .9rem;
	color: var(--simm-body);
}

.simm-account-auth .woocommerce-notices-wrapper .woocommerce-error {
	background: var(--simm-danger-bg);
	border-color: #f3c9c5;
	color: var(--simm-danger);
}

.simm-account-auth .woocommerce-notices-wrapper .woocommerce-message {
	background: var(--simm-success-bg);
	border-color: #b6e0c8;
	color: var(--simm-success);
}

.simm-account-auth .woocommerce-notices-wrapper li::before,
.simm-account-auth .woocommerce-notices-wrapper li::marker { content: none; }

/* =========================================================================
   7. My eSIMs
   ========================================================================= */

.simm-esims { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }

.simm-esim {
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-lg);
	padding: clamp(16px, 2.4vw, 26px);
	box-shadow: var(--simm-sh-sm);
}

.simm-esim__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--simm-line-soft);
}

.simm-esim__title { margin: 0 0 .25rem; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; color: var(--simm-ink); }
.simm-esim__meta { margin: 0; font-size: .85rem; color: var(--simm-muted); }

.simm-esim__status { padding: .35rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.simm-esim__status--ready { background: var(--simm-success-bg); color: var(--simm-success); }
.simm-esim__status--pending { background: var(--simm-warn-bg); color: var(--simm-warning); }

.simm-esim__pending { margin: 1rem 0; font-size: .92rem; color: var(--simm-body); }

.simm-esim__body { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); padding-block: 1.25rem; }

@media (min-width: 700px) { .simm-esim__body { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }

.simm-esim__qr { margin: 0; text-align: center; }

.simm-esim__qr img {
	display: block;
	inline-size: 100%;
	max-inline-size: 230px;
	block-size: auto;
	margin-inline: auto;
	padding: .7rem;
	background: #fff;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	box-shadow: var(--simm-sh-xs);
	image-rendering: pixelated;
}

.simm-esim__qr figcaption { margin-block-start: .55rem; font-size: .76rem; color: var(--simm-muted); }

.simm-esim__install h4 { margin: 0 0 .2rem; font-size: 1.05rem; color: var(--simm-ink); }
.simm-esim__hint { margin: 0 0 .9rem; font-size: .84rem; color: var(--simm-muted); }
.simm-esim__buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 1rem; }
.simm-esim__buttons .simm-btn { flex: 1 1 190px; }

.simm-esim__manual summary { cursor: pointer; font-size: .89rem; font-weight: 600; color: var(--simm-blue-600); padding-block: .45rem; }
.simm-esim__manual dl { margin: .5rem 0 0; display: grid; gap: .5rem; }
.simm-esim__manual dt { font-size: .75rem; color: var(--simm-muted); }
.simm-esim__manual dd { margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.simm-esim__manual code {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: .45rem .65rem;
	background: var(--simm-canvas);
	border-radius: 7px;
	font-size: .8rem;
	word-break: break-all;
	color: var(--simm-ink);
}

.simm-copy {
	flex: none;
	min-block-size: 36px;
	padding-inline: .8rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: 7px;
	font: inherit;
	font-size: .78rem;
	color: var(--simm-blue-600);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.simm-copy:hover { background: var(--simm-blue-50); border-color: var(--simm-blue-300); }
.simm-copy[data-copied="true"] { background: var(--simm-success-bg); border-color: #b6e0c8; color: var(--simm-success); }

.simm-esim__tips {
	margin: 0;
	padding: 1rem 0 0;
	border-block-start: 1px solid var(--simm-line-soft);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: .84rem;
	color: var(--simm-body);
}

.simm-esim__tips li::before { content: "•"; color: var(--simm-blue-500); font-weight: 800; margin-inline-end: .4rem; }

.simm-esim__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	margin-block-start: 1rem;
	padding-block-start: .9rem;
	border-block-start: 1px solid var(--simm-line-soft);
	font-size: .79rem;
	color: var(--simm-muted);
}

.simm-esim__foot a { color: var(--simm-blue-600); text-decoration: none; }
.simm-esim__foot a:hover { text-decoration: underline; }

/* =========================================================================
   8. Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.simm *,
	.simm *::before,
	.simm *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* =========================================================================
   9. Destination page — pieces Elementor cannot express
   Each rule below exists because the effect is not reachable through an
   Elementor control. Everything else on the page is Elementor-native.
   ========================================================================= */

/* Hero: the photo occupies the visual right and fades into the copy. Elementor
   can set a background image but not a directional fade over it, so the
   gradient is applied here as an overlay. */
.simm-hero-media {
	position: relative;
	background-color: var(--simm-canvas);
}

.simm-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* The gradient itself is declared once, in §13, for both directions. There
	   used to be a second RTL/LTR pair here with the OPPOSITE mapping. §13 is
	   later in the cascade and won on every page that loads this file, so the
	   pair never rendered — but it would have silently inverted the fade the
	   moment §13 was moved or re-scoped. One declaration, one place. */
}

.simm-hero-media > * { position: relative; }

@media (max-width: 1024px) {
	.simm-hero-media::before { background: linear-gradient(to top, transparent 55%, rgba(255,255,255,.85) 100%); }
}

/* The networks card floats over the lower corner of the photo. */
.simm-hero-netcard { box-shadow: 0 8px 28px rgba(0, 16, 64, .16); }
.simm-hero-netcard .simm-networks { gap: .4rem; }
.simm-hero-netcard .simm-network { box-shadow: none; border-color: var(--simm-line-soft); }

/* Country chip — a pill, which the Heading widget cannot produce alone. */
.simm-chip .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem 1rem;
	background: #fff;
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	box-shadow: var(--simm-sh-xs);
}

/* "eSIM" takes the brand colour; the rest stays navy. Achieved by colouring
   the Latin run, which Elementor cannot target. */
.simm-hero-title .elementor-heading-title { unicode-bidi: plaintext; }

/* Hero halves: the copy/photo split also needs forcing. */
/* Copy first (visual right in RTL), photo second (visual left). */
.simm-hero-row,
.simm-hero-row > .e-con-inner { --flex-direction: row !important; flex-direction: row !important; display: flex !important; }
.simm-hero-row > .e-con,
.simm-hero-row > .e-con-inner > .e-con { flex: 1 1 0 !important; inline-size: auto !important; max-inline-size: none !important; min-inline-size: 0; }
.simm-hero-row > .e-con:first-child,
.simm-hero-row > .e-con-inner > .e-con:first-child { flex-basis: 46% !important; }
.simm-hero-row > .e-con:last-child,
.simm-hero-row > .e-con-inner > .e-con:last-child  { flex-basis: 54% !important; }

@media (max-width: 1024px) {
	/* Stack the hero. The inner wrapper has to be listed too, or the 46/54
	   split below keeps both columns narrow and every word wraps on its own
	   line. */
	.simm-hero-row,
	.simm-hero-row > .e-con-inner {
		--flex-direction: column !important;
		flex-direction: column !important;
	}

	.simm-hero-row > .e-con,
	.simm-hero-row > .e-con-inner > .e-con {
		flex-basis: auto !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
	}

	/* Copy first, photo after it. */
	.simm-hero-row > .e-con-inner > .e-con:first-child,
	.simm-hero-row > .e-con:first-child { order: 1; }

	.simm-hero-row > .e-con-inner > .e-con:last-child,
	.simm-hero-row > .e-con:last-child { order: 2; }
}

/* Hero benefits: equal columns separated by hairlines. */
.simm-benefits {
	--flex-direction: row;
	--flex-wrap: nowrap;
	flex-direction: row;
	flex-wrap: nowrap;
	border-block-start: 1px solid var(--simm-line);
}
.simm-benefits > .simm-benefit { flex: 1 1 0; min-inline-size: 0; }
.simm-benefits > .simm-benefit + .simm-benefit { border-inline-start: 1px solid var(--simm-line); }
.simm-benefits > .simm-benefit:first-child { padding-inline-start: 0; }

@media (max-width: 600px) {
	.simm-benefits { flex-wrap: wrap; }
	.simm-benefits > .simm-benefit { flex: 1 1 45%; padding-inline: 0 !important; border-inline-start: 0 !important; }
}

/* Breadcrumbs */
.simm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; color: var(--simm-muted); }
.simm-crumbs a { color: inherit; text-decoration: none; }
.simm-crumbs a:hover { color: var(--simm-blue-600); }
.simm-crumbs [aria-current] { color: var(--simm-ink); font-weight: 600; }
.simm-crumbs__sep { opacity: .5; }

/* Filter row.
   The selects must stay compact and on one line; without an explicit display
   the form falls back to block and each select stretches to the full width. */
.simm-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	inline-size: 100%;
}

.simm-filterbar select {
	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: 100%;
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 700px) {
	/* Horizontal scroll strip rather than a stacked column. */
	.simm-filterbar {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block-end: .25rem;
	}

	.simm-filterbar::-webkit-scrollbar { display: none; }
	.simm-filterbar > * { flex: 0 0 auto; white-space: nowrap; }
}

.simm-filterbar__label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	font-size: .87rem;
	font-weight: 700;
	color: var(--simm-ink);
	background: #fff;
}

.simm-filterbar__label svg { inline-size: 1em; block-size: 1em; }

/* Inclusion note under the grid */
.simm-inclusions { text-align: center; }

/* -------------------------------------------------------------------------
   Plan card — reference layout
   ------------------------------------------------------------------------- */

.simm-plans--5 { grid-template-columns: 1fr; }

@media (min-width: 560px)  { .simm-plans--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .simm-plans--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .simm-plans--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px)  { .simm-plans--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .simm-plans--3 { grid-template-columns: repeat(3, 1fr); } }

.simm-plan { text-align: center; align-items: center; padding: 1.4rem 1rem 1.2rem; }

.simm-plan__validity { margin: 0 0 .35rem; font-size: .82rem; font-weight: 500; color: var(--simm-body); }

/*
 * TEMPORARY — the M/E fulfilment marker. Emitted only while
 * `show_provider_debug_marker` is on, and expected to be deleted with it.
 * Absolutely positioned so it occupies no space in the card's layout: the
 * cards share row tracks by position, and a marker that pushed the content
 * down would misalign every card beside it.
 */
.simm-plan__provider {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 6px;
	z-index: 2;
	min-width: 1.15rem;
	padding: .05rem .25rem;
	border-radius: 4px;
	background: var(--simm-ink);
	color: #fff;
	font: 700 .68rem/1.5 var(--simm-font, system-ui), sans-serif;
	letter-spacing: .02em;
	opacity: .55;
}

.simm-plan__data {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.045em;
	color: var(--simm-ink);
}

.simm-plan__data-unit { font-size: .48em; font-weight: 700; margin-inline-start: .08em; }
.simm-plan__data--word { font-size: .62em; }
.simm-plan--featured .simm-plan__data { color: var(--simm-blue-500); background: none; -webkit-text-fill-color: currentColor; }
.simm-plan--featured .simm-plan__validity { color: var(--simm-blue-600); }

.simm-plan__data-label { margin: .3rem 0 0; font-size: .78rem; color: var(--simm-muted); }

.simm-plan__rule { inline-size: 100%; block-size: 1px; background: var(--simm-line-soft); margin-block: .95rem; }

.simm-plan__tech { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--simm-body); }
.simm-plan__tech span:last-child { color: var(--simm-muted); font-size: .76rem; }

.simm-plan__coverage-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	margin-block-start: .7rem;
}

.simm-plan__coverage { margin: 0; }
.simm-plan__includes { font-size: .74rem; font-weight: 600; text-align: center; }

.simm-plan__price { margin-block-start: auto; padding-block-start: 0; border: 0; }
.simm-plan__price-value { font-size: 1.65rem; }
.simm-plan__price-per { margin-block-start: .1rem; }

.simm-plan .simm-btn { margin-block-start: .9rem; }

/* Outlined CTA for non-featured cards, solid blue for the featured one. */
.simm-btn--outline {
	background: #fff;
	border-color: var(--simm-blue-400);
	color: var(--simm-blue-600);
}

.simm-btn--outline:hover {
	background: var(--simm-blue-50);
	border-color: var(--simm-blue-500);
	color: var(--simm-blue-700);
	transform: translateY(-1px);
}

.simm-plan__flag { gap: .3rem; }
.simm-plan__flag svg { inline-size: .85em; block-size: .85em; fill: currentColor; stroke-width: 1.5; }

/* -------------------------------------------------------------------------
   Guards
   ------------------------------------------------------------------------- */

/* Nothing may exceed the viewport; a stray negative margin caused 20px of
   horizontal scroll at every width. */
html, body { overflow-x: clip; max-inline-size: 100%; }

/* Elementor's boxed containers already carry side padding, so an extra
   horizontal margin pushes them past the viewport. */
.elementor-element.e-con { max-inline-size: 100%; }

/* Menu links need a 44px touch target. */
.elementor-nav-menu--main .elementor-item { min-block-size: 44px; display: flex; align-items: center; }


/* =========================================================================
   10. Touch targets
   Spec §27 requires a 44px minimum for tappable controls. Elementor sizes its
   buttons from typography and padding alone, which lands them at 29–36px, so
   the floor is enforced here. Inline text links are deliberately excluded —
   the rule is about controls, not prose.
   ========================================================================= */

.elementor-button,
.elementor-menu-cart__toggle_button,
.simm-filterbar select,
.simm-filterbar__label,
.woocommerce-MyAccount-navigation a,
.show-password-input {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The cart toggle is an icon button: keep it square. */
.elementor-menu-cart__toggle_button { min-inline-size: 44px; }

/* WooCommerce's password reveal sits inside the field, so it gets the target
   without changing the field's own height. */
.woocommerce form .password-input { position: relative; display: block; }

.show-password-input {
	position: absolute;
	inset-inline-end: .25rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	min-inline-size: 44px;
	background: none;
	border: 0;
}

/* Nav items already carry vertical padding; this guarantees the floor. */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--dropdown .elementor-item {
	min-block-size: 44px;
	display: flex;
	align-items: center;
}


/* =========================================================================
   11. Row layouts
   Elementor drives container flex through CSS custom properties on `.e-con`
   (`--flex-direction` and friends), and its default is `column`. Setting
   `flex-direction` directly loses to that, so the custom properties are set
   instead.

   `!important` is required and deliberate: Elementor emits a per-element rule
   (`.elementor-224 .elementor-element.elementor-element-XXXX`) at specificity
   0,3,0, which outbids any class selector available here. The container's own
   direction control is absent in this Elementor build, so the stored setting
   never becomes CSS — see docs/elementor-notes.md.
   ========================================================================= */

/* `.simm-benefits` was in this group. Its `display: flex !important` beat
   Elementor's own `.elementor-hidden-mobile { display: none }`, so the
   container could not be hidden per breakpoint from the panel — the §11 debt
   doing real damage, not just sitting there. Removed from the group per the
   §12 procedure: direction is all that was ever needed, and Elementor already
   emits `display: flex` for a container. */
.simm-row-values,
.simm-row-info,
.simm-row-support,
.simm-hero-titlerow,
.simm-row-values > .e-con-inner,
.simm-row-info > .e-con-inner,
.simm-row-support > .e-con-inner,
.simm-hero-titlerow > .e-con-inner {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
}

/* Direction only, and only while the element is actually shown. */
.simm-benefits:not(.elementor-hidden-mobile),
.simm-benefits:not(.elementor-hidden-mobile) > .e-con-inner {
	--flex-direction: row;
	flex-direction: row;
}

.simm-row-values,
.simm-row-info,
.simm-row-support {
	--flex-wrap: wrap !important;
	flex-wrap: wrap !important;
	align-items: stretch;
}

/* Five equal value cards on one line. */
.simm-row-values { --justify-content: center; --gap: 12px; justify-content: center; gap: 12px; }
/* Same specificity problem as the direction: Elementor's per-element width
   rule wins, so the flex basis is forced here. */
.simm-row-values > .e-con,
.simm-row-values > .e-con-inner > .e-con {
	flex: 1 1 0 !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 0;
}

@media (max-width: 1024px) { .simm-row-values > .e-con, .simm-row-values > .e-con-inner > .e-con { flex: 1 1 30% !important; } }
@media (max-width: 600px)  { .simm-row-values > .e-con, .simm-row-values > .e-con-inner > .e-con { flex: 1 1 100% !important; } }

/* Three information cards. */
.simm-row-info { --gap: 16px; gap: 16px; }
.simm-row-info > .e-con,
.simm-row-info > .e-con-inner > .e-con {
	flex: 1 1 0 !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 250px;
}

@media (max-width: 900px) { .simm-row-info > .e-con, .simm-row-info > .e-con-inner > .e-con { flex: 1 1 100% !important; } }

.simm-row-support { --gap: 24px; --align-items: center; gap: 24px; align-items: center; }
.simm-row-support > .e-con,
.simm-row-support > .e-con-inner > .e-con {
	flex: 1 1 320px !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 0;
}

/* Value cards: compact, centred, equal height. */
.simm-row-values .elementor-widget-icon-box { inline-size: 100%; }
.simm-row-values .elementor-icon-box-wrapper { text-align: center; }
.simm-row-values .elementor-icon-box-title { margin-block: .5rem .2rem; }

/* =========================================================================
   12. Header navigation
   The menu must not wrap to a second line on desktop.
   ========================================================================= */

@media (min-width: 1025px) {
	.elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.elementor-nav-menu--main .elementor-item {
		white-space: nowrap;
	}
}

/* =========================================================================
   13. Hero
   ========================================================================= */

/* One visual unit: the photo fades into the copy rather than sitting in its
   own hard-edged box. */
.simm-hero-media {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

/* The photo sits on the visual left, so the fade runs to the right, dissolving
   into the copy column. */
.simm-hero-media::before {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .55) 62%,
		rgba(255, 255, 255, .92) 84%,
		#fff 97%
	);
}

[dir="ltr"] .simm-hero-media::before {
	background: linear-gradient(
		to left,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .55) 62%,
		rgba(255, 255, 255, .92) 84%,
		#fff 97%
	);
}

/* Networks card over the photo: larger names, room to breathe, never clipped. */
.simm-hero-netcard {
	max-inline-size: min(100%, 460px);
	box-shadow: 0 10px 34px rgba(0, 16, 64, .18);
}

.simm-hero-netcard .simm-network {
	padding: .5rem 1rem;
	font-size: .95rem;
	font-weight: 700;
}

.simm-hero-netcard .simm-network__tech { font-size: .72rem; }
.simm-hero-netcard .simm-networks { gap: .5rem; }

@media (max-width: 600px) {
	.simm-hero-netcard { max-inline-size: 100%; }
	.simm-hero-netcard .simm-network { padding: .4rem .75rem; font-size: .85rem; }
}

/* The "eSIM" run and the destination name are separate headings so each can
   carry its own colour; this keeps them on one baseline. */
.simm-hero-titlerow {
	--flex-direction: row;
	--align-items: baseline;
	--gap: 8px;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .25em;
}

.simm-hero-titlerow .elementor-widget { width: auto; }
.simm-hero-titlerow .elementor-heading-title { margin: 0; }

/* =========================================================================
   14. Mobile
   A dedicated pass, not a squeezed desktop. Elementor responsive controls
   handle the containers; these rules cover the custom widgets and the few
   header behaviours Elementor cannot express per-device.
   ========================================================================= */

@media (max-width: 767px) {

	/* --- Header: one clean row, no overlap ---------------------------- */

	/* The account label and cart subtotal collide with the logo at 360px.
	   On mobile the icons alone carry the meaning. */
	.elementor-location-header .elementor-widget-button .elementor-button-text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.elementor-location-header .elementor-widget-button .elementor-button-content-wrapper {
		gap: 0;
	}

	.elementor-location-header .elementor-widget-button .elementor-button {
		min-inline-size: 44px;
		padding-inline: 0;
	}

	/* Cart: icon and bubble only. */
	.elementor-menu-cart__toggle .elementor-button-text { display: none; }

	.elementor-menu-cart__toggle_button {
		padding-inline: 0;
		min-inline-size: 44px;
	}

	.elementor-location-header .elementor-widget-image img { max-inline-size: 118px; }

	/* --- Hero --------------------------------------------------------- */

	/* Keep "eSIM לצרפת" on one line: the two runs sit on one baseline and
	   the size steps down rather than wrapping mid-title. */
	.simm-hero-titlerow { flex-wrap: nowrap; gap: .2em; align-items: baseline; }

	.simm-hero-titlerow .elementor-heading-title {
		font-size: clamp(1.75rem, 8.6vw, 2.5rem) !important;
		white-space: nowrap;
		line-height: 1.1;
	}

	/* Chip sits directly above the title. */
	.simm-chip .elementor-heading-title { padding: .35rem .8rem; font-size: .85rem; }

	/* Benefits: readable, and network names must not shred into a column. */
	.simm-benefits { gap: 0; padding-block-start: 14px !important; }

	.simm-benefits > .simm-benefit {
		flex: 1 1 0 !important;
		padding-inline: 6px !important;
		border-inline-start: 1px solid var(--simm-line) !important;
		text-align: center;
		align-items: center;
	}

	.simm-benefits > .simm-benefit:first-child { border-inline-start: 0 !important; }

	.simm-benefits .elementor-heading-title { font-size: 12.5px !important; line-height: 1.35; }

	/* Cap the network list to two lines so a long carrier list cannot push
	   the hero open. */
	.simm-benefits > .simm-benefit:last-child .elementor-heading-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 11.5px !important;
	}

	.simm-benefits .elementor-widget-icon { text-align: center; }
	.simm-benefits .elementor-icon { font-size: 20px !important; }

	/* Photo: a proper landscape crop with rounded corners, biased upward so
	   a landmark is not cut off at the top. */
	.simm-hero-media {
		min-block-size: 0 !important;
		aspect-ratio: 16 / 10;
		border-radius: 18px;
		margin-inline: 16px;
		background-position: center 35% !important;
		padding: 0 !important;
		justify-content: flex-end !important;
	}

	/* The white fade belongs to the desktop split; on mobile it only greys
	   out the photograph. */
	.simm-hero-media::before { background: none !important; }

	/* Networks move out of the photo and become a compact strip beneath it. */
	.simm-hero-netcard {
		position: static;
		max-inline-size: none;
		margin: 12px 16px 0;
		padding: 12px 14px !important;
		border: 1px solid var(--simm-line);
		box-shadow: var(--simm-sh-xs);
		gap: 8px !important;
	}

	.simm-hero-netcard .simm-networks { gap: 6px; }

	.simm-hero-netcard .simm-network {
		padding: .35rem .7rem;
		font-size: .82rem;
	}

	.simm-hero-netcard .simm-network__tech { font-size: .65rem; }

	/* --- Filters: rounded pills, not raw form controls ----------------- */

	.simm-filterbar {
		flex-wrap: wrap;
		overflow: visible;
		gap: 8px;
		padding-inline: 4px;
	}

	.simm-filterbar > * { flex: 1 1 calc(50% - 4px); }
	.simm-filterbar__label { flex: 1 1 100%; justify-content: center; }

	.simm-filterbar select {
		inline-size: 100%;
		min-block-size: 46px;
		padding: .6rem 2.2rem .6rem 1rem;
		border: 1px solid var(--simm-line);
		border-radius: 999px;
		background-color: #fff;
		/* Chevron on the inline-end side, correct for RTL. */
		background-position: left 1rem center;
		font-size: .88rem;
		font-weight: 600;
		color: var(--simm-ink);
		box-shadow: var(--simm-sh-xs);
	}

	/* --- Plan cards: one per row, tight, 20px gutters ------------------ */

	.simm-plans { gap: 14px; padding-inline: 4px; }
	.simm-plans--3, .simm-plans--4, .simm-plans--5 { grid-template-columns: 1fr; }

	.simm-plan {
		padding: 1.5rem 1.1rem 1.1rem;
		/* Room for the ribbon so it never touches or clips the border. */
		margin-block-start: 10px;
		overflow: visible;
	}

	.simm-plan__flag { inset-block-start: -12px; font-size: .74rem; padding: .3rem .85rem; }

	/* Squeeze the vertical air out of the middle of the card. */
	.simm-plan__validity  { margin-block-end: .2rem; }
	.simm-plan__data      { font-size: 2.6rem; }
	.simm-plan__data-label { margin-block-start: .15rem; }
	.simm-plan__rule      { margin-block: .7rem; }
	.simm-plan__coverage-wrap { margin-block-start: .5rem; gap: .25rem; }
	.simm-plan__price     { padding-block-start: .2rem; }
	.simm-plan .simm-btn  { margin-block-start: .7rem; inline-size: 100%; min-block-size: 50px; }

	/* --- Section rhythm ------------------------------------------------ */

	/* Hero to packages heading was a large dead gap. */
	#simm-plans { padding-block-start: 26px !important; }

	.simm-row-values { gap: 10px; }
	.simm-row-values > .e-con { flex: 1 1 calc(50% - 5px) !important; }
	.simm-row-values .elementor-icon-box-title { font-size: 13px !important; }
	.simm-row-values .elementor-icon-box-description { font-size: 11.5px !important; }

	.simm-row-info > .e-con { flex: 1 1 100% !important; }
	.simm-row-support { gap: 16px; }
}

@media (max-width: 430px) {
	.simm-row-values > .e-con { flex: 1 1 100% !important; }
}

/* =========================================================================
   15. Header and footer rows
   Same container-direction limitation as §11 — see docs/elementor-notes.md.
   ========================================================================= */

/* The row direction USED to be an unconditional `row-reverse` here. That is an
   RTL-only trick and it mirrored the whole English header; it now lives in
   §52.3 as a [dir="rtl"] / [dir="ltr"] pair. The RTL half of that pair is
   byte-identical to what this rule declared, so Hebrew is unchanged. Display
   and alignment are direction-neutral and stay here. */
.simm-row-header,
.simm-row-header > .e-con-inner {
	display: flex !important;
	align-items: center;
}

.simm-header-actions,
.simm-header-actions > .e-con-inner {
	--flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
}

.simm-row-footer,
.simm-row-footer > .e-con-inner {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
}

.simm-row-footer > .e-con,
.simm-row-footer > .e-con-inner > .e-con {
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 0;
}

.simm-row-footer > .e-con:first-child,
.simm-row-footer > .e-con-inner > .e-con:first-child { flex: 1 1 40% !important; }

.simm-row-footer > .e-con:not(:first-child),
.simm-row-footer > .e-con-inner > .e-con:not(:first-child) { flex: 1 1 22% !important; }

@media (max-width: 767px) {
	.simm-row-footer > .e-con,
	.simm-row-footer > .e-con-inner > .e-con { flex: 1 1 100% !important; }
}

/* The wordmark is navy; invert it to read on the dark footer. */

/* The mobile menu toggle must not appear on desktop, and the desktop menu
   must not appear on mobile. Elementor's per-device visibility settings did
   not compile for these programmatically created widgets. */
@media (min-width: 1025px) {
	.simm-header-actions .elementor-widget-nav-menu { display: none; }
}

@media (max-width: 1024px) {
	.simm-row-header .elementor-nav-menu--main { display: none; }
	.simm-header-actions .elementor-widget-nav-menu { display: block; }
}

/* Cart toggle: no bordered box, and no subtotal crowding the logo. */
.elementor-menu-cart__toggle .elementor-button {
	border: 0;
	background: transparent;
	padding-inline: 6px;
}

.elementor-menu-cart__toggle .elementor-button-text { display: none; }

/* --- Support band ------------------------------------------------------- */

.simm-row-support > .e-con,
.simm-row-support > .e-con-inner > .e-con { flex: 1 1 0 !important; }

.simm-row-support .elementor-icon-box-wrapper { text-align: start; }

/* --- Hero: the photo should fill its half, top to bottom ----------------- */

.simm-hero-media {
	align-self: stretch;
	border-radius: 20px;
	overflow: hidden;
}

.simm-hero-row,
.simm-hero-row > .e-con-inner { align-items: stretch !important; }

.simm-hero-row > .e-con:first-child,
.simm-hero-row > .e-con-inner > .e-con:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* =========================================================================
   16. Final desktop corrections
   ========================================================================= */

/* The burger belongs to mobile only. Elementor's per-device visibility did not
   compile for these programmatically created widgets, so it is enforced by
   width here (see docs/elementor-notes.md §2). */
/* `nav.` matters: Elementor puts the very same elementor-nav-menu--dropdown
   class on desktop SUB-menus (ul.sub-menu), and the bare class selector kept
   the new region dropdown from ever opening on desktop. Only the mobile menu
   copy — the nav element — should be hidden here. */
@media (min-width: 1025px) {
	.simm-header-actions .elementor-widget-nav-menu,
	.elementor-location-header nav.elementor-nav-menu--dropdown,
	.elementor-location-header .elementor-menu-toggle { display: none !important; }
}

@media (max-width: 1024px) {
	.elementor-location-header .elementor-nav-menu--main { display: none !important; }
	.simm-header-actions .elementor-widget-nav-menu { display: block !important; }
	.elementor-location-header .elementor-menu-toggle { display: flex !important; }
}

/* The cart toggle was rendering as an empty bordered box beside the logo. */
.elementor-location-header .elementor-menu-cart__toggle,
.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 8px !important;
	min-inline-size: 44px;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text {
	display: none !important;
}

/* --- Hero photo bleeds to the viewport edge, as in the reference --------- */

/* The photo is the SECOND column of a row that §52.3 pins to `row`, so it is
   the OUTWARD column in both directions — visually right in LTR, visually left
   in RTL. The side it has to bleed toward is therefore the inline END in both,
   and the rounded corners belong on the inline START, facing the copy.

   This rule used to say `margin-inline-start`, which is the inward side. It
   read as correct in Hebrew only because the overlap it produced landed inside
   the photo's white gradient fade and left the text legible: measured he@1440,
   the media box spanned 80..811.2 against an h1 starting at 731.2 — 80px of
   overlap — while the viewport edge it was supposed to reach kept an 80px white
   gutter, with the square corners facing the copy and the 24px radii stranded
   in the gutter. At 1920 the same error grew to 320px and put the search field
   and the primary CTA bodily on top of the photo.

   `calc(50% - 50vw)` is not a magic number: 50% resolves against the row's own
   inline size and 50vw against the viewport, so the difference is exactly the
   distance from the boxed container's edge to the viewport's, whatever either
   measures. */

@media (min-width: 1025px) {
	.simm-hero-media {
		/* Extend past the boxed container to the outward viewport edge. */
		margin-inline-end: calc(50% - 50vw);
		border-start-start-radius: 24px;
		border-end-start-radius: 24px;
		border-start-end-radius: 0;
		border-end-end-radius: 0;
		min-block-size: 420px;
	}

	/* The copy column keeps the container's measure. */
	.simm-hero-row > .e-con:first-child,
	.simm-hero-row > .e-con-inner > .e-con:first-child {
		padding-inline-end: 0;
	}
}

/* Show more of the subject: bias the crop upward so a landmark is not cut. */
.simm-hero-media { background-position: center 30% !important; }

/* =========================================================================
   17. Homepage
   Three sections had no styles at all, so they fell back to block/list
   defaults: the value strip stacked into a narrow column, and the steps list
   rendered its own <ol> marker beside our numbered badge ("1. 1").
   ========================================================================= */

/* --- Value strip: four balanced cells on one line ------------------------ */

.simm-row-band,
.simm-row-band > .e-con-inner {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
}

.simm-row-band > .e-con,
.simm-row-band > .e-con-inner > .e-con {
	flex: 1 1 0 !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	position: relative;
}

/* Hairline separators between cells, as in the reference. */
.simm-row-band > .e-con + .e-con::before,
.simm-row-band > .e-con-inner > .e-con + .e-con::before {
	content: "";
	position: absolute;
	inset-block: 6px;
	inset-inline-start: 0;
	inline-size: 1px;
	background: var(--simm-line);
}

.simm-row-band .elementor-icon-box-title { margin: 0 0 .15rem; }
.simm-row-band .elementor-icon-box-description { margin: 0; }

@media (max-width: 900px) {
	.simm-row-band > .e-con,
	.simm-row-band > .e-con-inner > .e-con { flex: 1 1 calc(50% - 8px) !important; }

	/* Separators only make sense between items on the same line. */
	.simm-row-band > .e-con + .e-con::before,
	.simm-row-band > .e-con-inner > .e-con + .e-con::before { display: none; }
}

@media (max-width: 520px) {
	.simm-row-band > .e-con,
	.simm-row-band > .e-con-inner > .e-con { flex: 1 1 100% !important; }

	/* Compact rows rather than four tall blocks. */
	.simm-row-band .elementor-icon-box-wrapper { display: flex; align-items: center; gap: .7rem; }
	.simm-row-band .simm-band-cell { padding-block: 8px !important; }
}

/* --- How it works: four balanced step cards ----------------------------- */

.simm-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
	/* The <ol> marker would duplicate the numbered badge. */
	list-style: none;
}

.simm-steps > li::marker { content: none; }

@media (max-width: 900px) { .simm-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .simm-steps { grid-template-columns: 1fr; } }

.simm-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 1.4rem 1.1rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-lg);
	text-align: center;
	box-shadow: var(--simm-sh-xs);
}

.simm-step__num {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: var(--simm-blue-50);
	color: var(--simm-blue-600);
	font-weight: 800;
	font-size: 1.05rem;
	flex: none;
}

.simm-step strong { display: block; color: var(--simm-ink); font-size: 1rem; }
.simm-step p { margin: .25rem 0 0; font-size: .86rem; color: var(--simm-muted); line-height: 1.55; }

/* --- Hero headline: one H1, two colours --------------------------------- */

.simm-home-title .elementor-heading-title { unicode-bidi: plaintext; }
.simm-accent { color: var(--simm-blue-500); }

/* Keep the headline to two lines rather than one word per line. */
.simm-home-title .elementor-heading-title { text-wrap: balance; }

/* Fluid below the tablet breakpoint. Elementor's fixed 32px mobile step left
   the headline small on a 480px-wide phone (S25 Ultra) and cramped at 360px.
   Capped at the 40px tablet value so nothing jumps at 768px.
   `!important` is the §5 specificity case: Elementor emits typography at
   0,3,1 and no class selector here can outbid it. */
@media (max-width: 767px) {
	.simm-home-title .elementor-heading-title {
		font-size: clamp(30px, 8.2vw, 40px) !important;
	}
}

/* --- Destination search must fill its column ---------------------------- */

.simm-search,
.elementor-widget-simm-destination-search { inline-size: 100%; }

/* In the stacked (mobile) form the field is a block-level flex item, so it
   needs an explicit full width — `auto` collapses it to its content and the
   input renders as an empty square. */
.simm-search__field {
	inline-size: 100%;
	min-inline-size: 0;
}

@media (min-width: 560px) {
	/* Side by side with the CTA: take the remaining space. */
	.simm-search__field { flex: 1 1 auto; inline-size: auto; }
}

.simm-search__form .simm-btn { flex: 0 0 auto; }

@media (max-width: 559px) {
	.simm-search__form .simm-btn { inline-size: 100%; }
}


/* =========================================================================
   18. Support strip balance
   Two halves of equal weight, each icon + text on one line, the CTA inline
   with its own half rather than orphaned underneath.
   ========================================================================= */

.simm-row-support .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	text-align: start;
}

.simm-row-support .elementor-icon-box-icon { margin: 0; flex: none; }
.simm-row-support .elementor-icon-box-title { margin: 0 0 .2rem; }
.simm-row-support .elementor-icon-box-description { margin: 0; }

/* The two halves share the row evenly and sit on a hairline divider. */
.simm-row-support > .e-con-inner > .e-con,
.simm-row-support > .e-con { flex: 1 1 0 !important; }

@media (min-width: 800px) {
	.simm-row-support > .e-con-inner > .e-con + .e-con,
	.simm-row-support > .e-con + .e-con {
		border-inline-start: 1px solid var(--simm-blue-100);
		padding-inline-start: 28px;
	}
}

@media (max-width: 799px) {
	.simm-row-support > .e-con-inner > .e-con,
	.simm-row-support > .e-con { flex: 1 1 100% !important; }
}

/* =========================================================================
   19. Homepage mobile polish
   ========================================================================= */

@media (max-width: 767px) {
	/* Value strip: compact rows (icon beside text) instead of four tall
	   centred blocks, while keeping the 44px touch height. */
	.simm-row-band .elementor-icon-box-wrapper {
		display: flex;
		align-items: center;
		gap: .8rem;
		text-align: start;
	}

	.simm-row-band .elementor-icon-box-icon { margin: 0 !important; flex: none; }
	.simm-row-band .elementor-icon-box-title { margin: 0 0 .1rem !important; font-size: 14.5px !important; }
	.simm-row-band .elementor-icon-box-description { margin: 0 !important; font-size: 12.5px !important; }

	/* `.simm-band-cell` was never in the markup — the class was never written
	   into the template, so this rule styled nothing for as long as it existed.
	   Targets the real child containers instead. */
	.simm-row-band > .e-con-inner > .e-con,
	.simm-row-band > .e-con {
		padding: 7px 14px !important;
		min-block-size: 44px;
		justify-content: center;
	}

	/* The band's own padding stacked on top of each cell's. */
	.simm-row-band,
	.simm-row-band > .e-con-inner { padding-block: 6px !important; }

	/* Hairlines between the stacked rows. */
	.simm-row-band > .e-con-inner > .e-con + .e-con,
	.simm-row-band > .e-con + .e-con {
		border-block-start: 1px solid var(--simm-line-soft);
	}

	/* Steps: tighter cards. */
	.simm-step { padding: 1.1rem 1rem; }
	.simm-step p { font-size: .82rem; }
}

/* The footer menu inherits Elementor's white dropdown panel; on a navy footer
   it renders as a white block behind the links. */
.simm-row-footer .elementor-nav-menu,
.simm-row-footer .elementor-nav-menu--dropdown,
.simm-row-footer .elementor-nav-menu__container {
	background: transparent !important;
	box-shadow: none !important;
}

.simm-row-footer .elementor-nav-menu a { background: transparent !important; }

/* =========================================================================
   20. Search dropdown stacking
   The suggestions must sit above the benefit row beneath them. Without an
   opaque background and a stacking context the benefit text showed through
   and read as mixed into the list.
   ========================================================================= */

.simm-search { position: relative; z-index: 40; }

.simm-search__results {
	z-index: 60;
	background: var(--simm-surface);
	/* Opaque, so nothing underneath bleeds through the list. */
	backdrop-filter: none;
}

.simm-search__results li { list-style: none; }

.simm-search__results [role="option"] > a { border-radius: var(--simm-r-sm); }

/* Highlighted option — same treatment for hover and keyboard. */
.simm-search__results [role="option"].is-active > a,
.simm-search__results [role="option"] > a:hover,
.simm-search__results [role="option"] > a:focus-visible {
	background: var(--simm-blue-50);
	outline: none;
}

.simm-search__results [role="option"].is-active > a {
	box-shadow: inset 0 0 0 2px var(--simm-blue-300);
}

.simm-search__field:focus-within { z-index: 61; }

/* =========================================================================
   21. Destination cards — equal height, long names must not distort the grid
   ========================================================================= */

.simm-destination {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.simm-destination__body {
	flex: 1;
	align-items: center;
	gap: .6rem;
}

/* A long country name wraps to a second line instead of stretching the cell,
   and the price keeps its own column. */
/* `min-inline-size: auto`, not 0, is what actually stops the mid-word break.
   `overflow-wrap: break-word` already keeps the element's min-content equal to
   its longest word — but an explicit `min-inline-size: 0` overrides the flex
   automatic minimum and lets the item shrink below that anyway, at which point
   the browser has no choice left but to break inside the word. Measured on
   /en/ at 390px: the box was 70.4px against 70.97px for "Indonesia", short by
   0.58px, and the trailing "a" wrapped alone. `auto` makes the row allocate
   the whole word and shrink the price column instead. */
.simm-destination__name {
	min-inline-size: auto;
	overflow-wrap: break-word;
	line-height: 1.3;
}

.simm-destination__price { flex: none; }

/* =========================================================================
   22. Support strip — mobile
   Compact, balanced, and clearly separated from the sections around it.
   ========================================================================= */

@media (max-width: 799px) {
	.simm-row-support {
		gap: 0 !important;
	}

	.simm-row-support > .e-con-inner > .e-con,
	.simm-row-support > .e-con {
		padding-block: 14px !important;
	}

	/* A hairline between the two halves once they stack. */
	.simm-row-support > .e-con-inner > .e-con + .e-con,
	.simm-row-support > .e-con + .e-con {
		/* blue-100 on the blue-50 panel was almost invisible. */
		border-block-start: 1px solid var(--simm-blue-200);
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.simm-row-support .elementor-icon-box-wrapper { gap: .7rem; align-items: flex-start; }
	.simm-row-support .elementor-icon-box-title { font-size: 16px !important; }
	.simm-row-support .elementor-icon-box-description { font-size: 13.5px !important; line-height: 1.55; }

	/* Icons render as inline SVG, not <i>; the old rule matched nothing. */
	.simm-row-support .elementor-icon-box-icon i,
	.simm-row-support .elementor-icon-box-icon svg { font-size: 22px !important; inline-size: 22px; block-size: 22px; }

	/* Equal padding on both halves, so neither reads as the larger block. */
	.simm-row-support > .e-con-inner > .e-con,
	.simm-row-support > .e-con { padding: 18px 4px !important; }

	/* The CTA belongs to its half, aligned with the text above it. */
	.simm-row-support .elementor-widget-button { margin-block-start: 14px; }

	.simm-row-support .elementor-button {
		min-block-size: 48px;
		min-inline-size: 150px;
		padding-inline: 1.6rem;
		font-size: 15px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* =========================================================================
   23. FAQ accordion (Nested Accordion — native <details>)
   ========================================================================= */

.simm-faq .e-n-accordion-item {
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	margin-block-end: 10px;
	overflow: hidden;
	background: var(--simm-surface);
}

.simm-faq .e-n-accordion-item-title {
	min-block-size: 52px;
	padding: 14px 18px;
	cursor: pointer;
	gap: 12px;
	list-style: none;
}

/* Safari still paints the default disclosure marker. */
.simm-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }

.simm-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	background: var(--simm-blue-50);
}

.simm-faq .e-n-accordion-item-title:focus-visible {
	outline: 3px solid var(--simm-blue-300);
	outline-offset: -3px;
}

.simm-faq .e-n-accordion-item-title-text { font-weight: 600; }

/* =========================================================================
   24. Mobile drawer
   Elementor's dropdown panel is the drawer; it must open from the RTL start
   edge and every control in it must clear 44px.
   ========================================================================= */

@media (max-width: 1024px) {
	/* The dropdown is a child of the burger widget, so by default it inherits
	   that widget's ~94px width. A drawer has to span the viewport, anchored
	   under the header and to the RTL start edge. */
	.elementor-location-header .elementor-widget-nav-menu { position: static; }

	.elementor-location-header .elementor-nav-menu--dropdown {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		inline-size: 100vw;
		max-inline-size: 100vw;
		background: var(--simm-surface);
		box-shadow: var(--simm-sh-lg);
		border-radius: 0 0 var(--simm-r) var(--simm-r);
		max-block-size: calc(100vh - 60px);
		overflow-y: auto;
		z-index: 90;
	}

	/* The header row is the positioning context for the drawer. */
	.simm-row-header { position: relative; }

	.elementor-location-header .elementor-nav-menu--dropdown a {
		min-block-size: 48px;
		display: flex;
		align-items: center;
		padding-inline: 20px !important;
		font-size: 16px;
		border-block-end: 1px solid var(--simm-line-soft);
	}

	.elementor-location-header .elementor-menu-toggle {
		min-inline-size: 44px;
		min-block-size: 44px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
	}

	/* Account and cart icons need the same target size. */
	.simm-header-actions .elementor-button,
	.simm-header-actions .elementor-menu-cart__toggle_button {
		min-inline-size: 44px;
		min-block-size: 44px;
	}
}

/* =========================================================================
   25. Mobile search sheet
   Below 768px the anchored dropdown is unusable: it renders under the CTA and
   behind the software keyboard, so a user who types a country sees nothing and
   has no reason to think results exist. The widget is promoted to a fixed
   sheet instead — sticky field on top, scrollable results directly beneath it.

   Sizing comes from the Visual Viewport API through `--simm-sheet-h` and
   `--simm-sheet-top`, set in simm.js. `100dvh` is only the fallback: with the
   default `interactive-widget: resizes-visual`, the dynamic viewport unit still
   measures the layout viewport, so the sheet would run on under the keyboard.
   ========================================================================= */

.simm-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--simm-tap);
	block-size: var(--simm-tap);
	padding: 0;
	border: 0;
	border-radius: var(--simm-r-sm);
	background: none;
	color: var(--simm-ink);
	cursor: pointer;
}

.simm-search__close svg { inline-size: 22px; block-size: 22px; }
.simm-search__close:focus-visible { outline: 2px solid var(--simm-blue-400); outline-offset: 2px; }

/* The attribute is the single switch, so JS toggling `hidden` is enough. */
.simm-search__close[hidden] { display: none; }

/* Page behind the sheet. `overflow: hidden` alone does not hold on iOS, so the
   body is pinned and its offset restored on close.

   `simm-modal-open` is the same lock without the header rule below — see the
   note there. Both classes exist so the body pin is written once. */
html.simm-sheet-open,
html.simm-modal-open,
html.simm-sheet-open body,
html.simm-modal-open body { overflow: hidden; }

html.simm-sheet-open body,
html.simm-modal-open body {
	position: fixed;
	inset-inline: 0;
	inline-size: 100%;
}

/* The header stays on screen with the sheet, so the site is still identifiable
   while searching. The sheet is offset below it rather than raised above it:
   the widget sits inside the hero, which Elementor gives its own stacking
   context, so no z-index here can beat the sticky header — measured, the
   header's menu toggle won the hit test over the sheet's own close button.
   Not overlapping is the only reliable fix; `--simm-sheet-offset` is the
   header's measured height, set in simm.js.

   NOT applied to the plan-details modal, which is why that has a lock class of
   its own. Fixing the header takes it out of flow, so everything below it rises
   by its height — measured 61px — and the modal's backdrop is
   `rgba(0, 16, 64, .55)`, i.e. see-through. The result was the page visibly
   lurching upward behind the dialog at the moment it opened. A sheet needs the
   header; a dialog that covers the screen does not. */
html.simm-sheet-open .elementor-location-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1001;
}

@media (max-width: 767px) {

	.simm-search.is-sheet {
		position: fixed;
		inset-inline: 0;
		inset-block-start: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		max-inline-size: none;
		block-size: calc(100dvh - var(--simm-sheet-offset, 0px));
		block-size: calc(var(--simm-sheet-h, 100dvh) - var(--simm-sheet-offset, 0px));
		/* Keeps the sheet against the visible area when the keyboard pushes
		   the visual viewport down inside the layout viewport. */
		inset-block-start: var(--simm-sheet-offset, 0px);
		transform: translateY(var(--simm-sheet-top, 0px));
		/* Canvas, not white: with a single result the list ends a third of the
		   way down, and against white the remaining space read as a page that
		   had failed to load. The tint makes the list a panel on a surface. */
		background: var(--simm-canvas);
	}

	.simm-search.is-sheet .simm-search__head {
		position: sticky;
		inset-block-start: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: .4rem;
		padding: .6rem .8rem;
		background: var(--simm-surface);
		border-block-end: 1px solid var(--simm-line);
	}

	/* Row even under 560px, because the CTA is out of the way. */
	.simm-search.is-sheet .simm-search__form {
		flex: 1 1 auto;
		flex-direction: row;
		gap: 0;
		min-inline-size: 0;
	}

	/* Choosing a destination is the action here; the CTA would only push the
	   results down again. It stays in the form, so Enter still submits. */
	.simm-search.is-sheet [data-simm-search-submit] { display: none; }

	.simm-search.is-sheet .simm-search__field {
		flex: 1 1 auto;
		inline-size: auto;
		min-block-size: 52px;
	}

	/* Static, so the list is a normal flex child that scrolls on its own
	   instead of scrolling the page. `flex: 0 1 auto` keeps it as tall as its
	   contents and no taller — it still scrolls once the results outgrow the
	   space the keyboard leaves. */
	.simm-search.is-sheet .simm-search__results {
		position: static;
		flex: 0 1 auto;
		max-block-size: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		margin: 0;
		padding: .3rem;
		border: 0;
		border-start-start-radius: 0;
		border-start-end-radius: 0;
		border-end-start-radius: var(--simm-r);
		border-end-end-radius: var(--simm-r);
		box-shadow: var(--simm-sh-sm);
	}

	/* Breathing room under the panel, inside the safe area. */
	.simm-search.is-sheet .simm-search__results::after {
		content: "";
		display: block;
		block-size: env(safe-area-inset-bottom, 0px);
	}

	/* The whole row is the target, not just the words in it. */
	.simm-search.is-sheet .simm-search__results a {
		min-block-size: 56px;
		padding: .7rem .9rem;
		font-size: 1rem;
	}

	.simm-search.is-sheet .simm-search__results a:active {
		background: var(--simm-blue-100);
		transform: scale(.995);
	}

	/* Long country names wrap rather than shoving the price off the row. */
	.simm-search.is-sheet .simm-search__results a > span {
		min-inline-size: 0;
		overflow-wrap: break-word;
	}

	.simm-search.is-sheet .simm-search__empty {
		min-block-size: 56px;
		display: flex;
		align-items: center;
		font-size: .95rem;
	}
}

/* =========================================================================
   26. Logo link tap target
   The logo wordmark is 25px tall on a phone, and Elementor wraps it in a bare
   <a>, so the "go home" target was 118x25 — under the 44px minimum. The link
   is padded rather than the image, so the mark itself does not grow.
   ========================================================================= */

.elementor-location-header .elementor-widget-image a,
.simm-row-footer .elementor-widget-image a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--simm-tap);
}

/* =========================================================================
   27. Search sheet — pre-typing state
   The sheet opens on real destinations instead of nothing, so it never reads
   as a page that failed to load. Sheet-only: the desktop dropdown still stays
   shut until the visitor types.
   ========================================================================= */

.simm-search__hint {
	margin: 0;
	padding: .55rem .9rem .3rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--simm-muted);
	letter-spacing: .01em;
}

.simm-search__hint[hidden] { display: none; }

@media (max-width: 767px) {
	.simm-search.is-sheet .simm-search__hint {
		background: var(--simm-surface);
		border-start-start-radius: var(--simm-r);
		border-start-end-radius: var(--simm-r);
		padding-block-start: .8rem;
	}

	/* With the label above it the list is the bottom half of one panel. */
	.simm-search.is-sheet .simm-search__hint:not([hidden]) + .simm-search__results {
		border-start-start-radius: 0;
		border-start-end-radius: 0;
	}
}

/* =========================================================================
   28. Plan card — "פרטים" and comparison (§20)
   Native <details> and a real checkbox, so both work without script and reach
   assistive technology. Only presentation lives here.
   ========================================================================= */

.simm-plan__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-block-start: .6rem;
}

.simm-plan__details { flex: 1 1 auto; min-inline-size: 0; }

.simm-plan__details-toggle {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-block-size: var(--simm-tap);
	padding-inline: .5rem;
	border-radius: var(--simm-r-sm);
	color: var(--simm-blue-600);
	font-size: .86rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.simm-plan__details-toggle::-webkit-details-marker { display: none; }

.simm-plan__details-toggle::after {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .18s var(--simm-ease);
}

.simm-plan__details[open] .simm-plan__details-toggle::after { transform: rotate(225deg) translateY(-2px); }
.simm-plan__details-toggle:focus-visible { outline: 2px solid var(--simm-blue-400); outline-offset: 2px; }

.simm-plan__facts {
	margin: .5rem 0 0;
	padding: .6rem .7rem;
	background: var(--simm-canvas);
	border-radius: var(--simm-r-sm);
	font-size: .82rem;
	text-align: start;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem .6rem;
}

.simm-plan__facts dt { color: var(--simm-muted); }
.simm-plan__facts dd { margin: 0; color: var(--simm-ink); font-weight: 600; }

/* The comparison control is a tap target in its own right. */
.simm-plan__compare {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-block-size: var(--simm-tap);
	min-inline-size: var(--simm-tap);
	padding-inline: .5rem;
	border-radius: var(--simm-r-sm);
	color: var(--simm-body);
	font-size: .82rem;
	cursor: pointer;
	flex: 0 0 auto;
}

.simm-plan__compare input { inline-size: 18px; block-size: 18px; accent-color: var(--simm-blue-500); }
.simm-plan__compare.is-disabled { opacity: .45; cursor: not-allowed; }
.simm-plan__compare:focus-within { outline: 2px solid var(--simm-blue-400); outline-offset: 2px; }

/* Selected cards are visibly part of the comparison. */
.simm-plan.is-comparing {
	border-color: var(--simm-blue-400);
	box-shadow: 0 0 0 2px var(--simm-blue-100);
}

/* --- Comparison tray ---------------------------------------------------- */

.simm-compare-tray {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
	padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
	background: var(--simm-surface);
	border-block-start: 1px solid var(--simm-line);
	box-shadow: var(--simm-sh-lg);
}

.simm-compare-tray[hidden] { display: none; }
.simm-compare-tray__count { margin: 0; font-size: .82rem; font-weight: 700; color: var(--simm-ink); }

.simm-compare-tray__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.simm-compare-tray__list li {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .5rem;
	background: var(--simm-blue-50);
	border-radius: 999px;
	font-size: .78rem;
}

.simm-compare-tray__list button {
	inline-size: 22px;
	block-size: 22px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--simm-body);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.simm-compare-tray__actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.simm-compare-tray__actions .simm-btn { min-block-size: var(--simm-tap); padding-inline: 1rem; font-size: .85rem; }

@media (max-width: 559px) {
	.simm-compare-tray { flex-direction: column; align-items: stretch; }
	.simm-compare-tray__actions .simm-btn { flex: 1 1 0; }
}

/* --- Comparison dialog -------------------------------------------------- */

.simm-compare-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 16, 64, .55);
}

.simm-compare-modal__inner {
	inline-size: min(100%, 900px);
	max-block-size: 88vh;
	max-block-size: 88dvh;
	overflow-y: auto;
	background: var(--simm-surface);
	border-radius: var(--simm-r-lg);
	padding: 1rem 1.1rem 1.4rem;
}

.simm-compare-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-block-end: .8rem;
}

.simm-compare-modal__head h2 { margin: 0; font-size: 1.1rem; color: var(--simm-ink); }

.simm-compare-modal__head button {
	inline-size: var(--simm-tap);
	block-size: var(--simm-tap);
	border: 0;
	border-radius: var(--simm-r-sm);
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: var(--simm-body);
	cursor: pointer;
}

.simm-compare-modal__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.simm-compare-col { border: 1px solid var(--simm-line); border-radius: var(--simm-r); padding: .8rem; }
.simm-compare-col h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--simm-ink); }
.simm-compare-col .simm-plan__facts { background: transparent; padding: 0; }
.simm-compare-col .simm-btn { margin-block-start: .7rem; }

/* =========================================================================
   29. Filter Bottom Sheet (§27)
   Desktop keeps the compact horizontal row; below 768px the same form becomes
   a bottom sheet. The inputs are never moved, so filtering behaviour and the
   selects' state are untouched by the change of presentation.
   ========================================================================= */

.simm-filterbar__open { display: none; }
.simm-filterbar__head,
.simm-filterbar__foot { display: none; }

@media (min-width: 768px) {
	/* The panel IS the bar above the breakpoint. */
	.simm-filterbar__panel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: inherit;
	}
}

@media (max-width: 767px) {
	.simm-filterbar { display: block; }

	.simm-filterbar__label { display: none; }

	.simm-filterbar__open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		inline-size: 100%;
		min-block-size: var(--simm-tap);
		padding: .6rem 1rem;
		background: var(--simm-surface);
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r);
		color: var(--simm-ink);
		font: inherit;
		font-size: .95rem;
		font-weight: 600;
		cursor: pointer;
	}

	.simm-filterbar__open svg { inline-size: 18px; block-size: 18px; }

	.simm-filterbar__count {
		min-inline-size: 20px;
		block-size: 20px;
		display: inline-grid;
		place-items: center;
		padding-inline: 5px;
		background: var(--simm-blue-500);
		border-radius: 999px;
		color: #fff;
		font-size: .72rem;
	}

	.simm-filterbar__count[hidden] { display: none; }

	/* Closed: the panel is not rendered at all, so its selects cannot be
	   tabbed to behind the page. */
	.simm-filterbar__panel { display: none; }

	.simm-filterbar.is-sheet .simm-filterbar__panel {
		display: flex;
		flex-direction: column;
		gap: .7rem;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 1100;
		max-block-size: 86dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		background: var(--simm-surface);
		border-start-start-radius: var(--simm-r-lg);
		border-start-end-radius: var(--simm-r-lg);
		box-shadow: var(--simm-sh-lg);
	}

	/* Backdrop, so the sheet reads as modal. */
	.simm-filterbar.is-sheet::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1099;
		background: rgba(0, 16, 64, .45);
	}

	.simm-filterbar.is-sheet .simm-filterbar__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
	}

	.simm-filterbar__title { margin: 0; font-size: 1.05rem; color: var(--simm-ink); }

	.simm-filterbar__close {
		inline-size: var(--simm-tap);
		block-size: var(--simm-tap);
		display: inline-grid;
		place-items: center;
		border: 0;
		border-radius: var(--simm-r-sm);
		background: transparent;
		color: var(--simm-body);
		cursor: pointer;
	}

	.simm-filterbar__close svg { inline-size: 20px; block-size: 20px; }

	/* Full-width, comfortably tappable selects inside the sheet. */
	.simm-filterbar.is-sheet select {
		inline-size: 100%;
		min-block-size: 48px;
		font-size: 16px;
	}

	.simm-filterbar.is-sheet .simm-filterbar__foot {
		display: flex;
		gap: .6rem;
		padding-block-start: .3rem;
	}

	.simm-filterbar.is-sheet .simm-filterbar__foot .simm-btn {
		flex: 1 1 0;
		min-block-size: 48px;
	}
}

/* =========================================================================
   30. Country page — lower content (§20)
   Layout only; every colour and size above is an Elementor control.
   ========================================================================= */

.simm-infobox { flex: 1 1 260px; }

.simm-row-compat > .e-con-inner > .e-con,
.simm-row-compat > .e-con,
.simm-row-related > .e-con-inner > .e-con,
.simm-row-related > .e-con {
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	padding: 1rem 1.1rem;
}

.simm-related { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .1rem; }

.simm-related__item { border-block-end: 1px solid var(--simm-line-soft); }
.simm-related__item:last-child { border-block-end: 0; }

.simm-related__item > a,
.simm-related__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-block-size: var(--simm-tap);
	padding-block: .3rem;
	text-decoration: none;
	color: var(--simm-ink);
	font-size: .9rem;
}

.simm-related__item > a { inline-size: 100%; border-radius: var(--simm-r-sm); padding-inline: .4rem; }
.simm-related__item > a:hover { background: var(--simm-blue-50); }
.simm-related__item > a:focus-visible { outline: 2px solid var(--simm-blue-400); outline-offset: 2px; }
.simm-related__meta { color: var(--simm-muted); font-size: .8rem; white-space: nowrap; }

.simm-terms .elementor-icon-list-item { align-items: flex-start; }
.simm-terms .elementor-icon-list-icon { margin-block-start: .25rem; }

/* =========================================================================
   31. Country page — mobile first (§27)
   Most visitors buy from a phone, so this block is the primary design and the
   desktop rules above are the enhancement. Everything here is layout; colour
   and type remain Elementor controls.
   ========================================================================= */

/* --- Country FAQ (native <details>, no script) --------------------------- */

.simm-cfaq { display: flex; flex-direction: column; gap: 10px; }

.simm-cfaq__item {
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
	overflow: hidden;
}

.simm-cfaq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	min-block-size: var(--simm-tap);
	padding: .75rem .9rem;
	cursor: pointer;
	list-style: none;
}

.simm-cfaq__q::-webkit-details-marker { display: none; }

/* §54.5 — the two borders are PHYSICAL on purpose.

   They were `border-inline-end` + `border-block-end`, which mirror under RTL.
   With the same `rotate(45deg)` that gave English a caret from the right and
   bottom edges — pointing DOWN — and Hebrew one from the left and bottom edges,
   pointing LEFT. Open (`225deg`) was English UP and Hebrew RIGHT. So English
   got the vertical pattern an accordion wants and Hebrew got a horizontal one
   by accident.

   A disclosure marker is not a directional affordance: the panel expands
   downward in both languages, so the caret must read down-when-closed and
   up-when-open in both. Physical `border-right` / `border-bottom` are immune to
   `dir`, which is exactly the property wanted here.

   Size (9px), stroke (2px), colour, the `translateY(-2px)` optical nudge, the
   transition and the row's `justify-content: space-between` are all unchanged —
   the caret still sits on the trailing edge of the question in each language,
   it just points the right way. */

.simm-cfaq__q::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 9px;
	block-size: 9px;
	border-right: 2px solid var(--simm-blue-500);
	border-bottom: 2px solid var(--simm-blue-500);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s var(--simm-ease);
}

.simm-cfaq__item[open] .simm-cfaq__q::after { transform: rotate(225deg) translateY(-2px); }
.simm-cfaq__q:focus-visible { outline: 2px solid var(--simm-blue-400); outline-offset: -2px; }

.simm-cfaq__qt { margin: 0; font-size: 15px; font-weight: 600; color: var(--simm-ink); }
.simm-cfaq__a { padding: 0 .9rem .9rem; font-size: 14.5px; line-height: 1.75; color: var(--simm-body); }
.simm-cfaq__a p:last-child { margin-block-end: 0; }

/* --- Below 768px -------------------------------------------------------- */

@media (max-width: 767px) {

	/* The hero image is hidden on mobile now (see CountryTemplate::image), so
	   sizing it here is dead weight — removed rather than left to confuse. */

	/* §18 debt #1 and #2 used to live here and in §34, unscoped:

	     .simm-hero-row { padding-block: 0 !important }
	     .simm-hero-row > … > .e-con { padding-block: 8px !important }

	   They are now scoped away from the destination page, whose hero carries
	   `padding_mobile` on the containers instead — §12 step 3, and §58 needs
	   that padding to be the destination card's inset over the photograph.

	   The scope is not decoration. `HomeTemplate` uses `.simm-hero-row` too,
	   and deleting these outright moved the approved homepage: measured at
	   320/390/430 in both languages, its hero children lost 8px top and bottom
	   and everything below rose by 16px. The homepage is a frozen baseline, so
	   the rules stay exactly as they were for every page but this one. */
	body:not(.single-simm_country) .simm-hero-row { padding-block: 0 !important; }

	body:not(.single-simm_country) .simm-hero-row > .e-con-inner > .e-con,
	body:not(.single-simm_country) .simm-hero-row > .e-con { padding-block: 8px !important; }

	.simm-hero-title .elementor-heading-title { font-size: clamp(26px, 7.4vw, 34px) !important; }

	/* The network card and the three benefit boxes are supporting detail, not
	   first-screen content; they sit under the plans' fold either way. */
	.simm-hero-netcard { margin-block-start: 8px; }

	/* 2. One full-width plan card per row, with the price and CTA reachable
	   without horizontal movement. */
	.simm-plans { grid-template-columns: 1fr !important; }

	.simm-plan { inline-size: 100%; }

	/* 3. Comparison tray must not cover the last card's CTA. */
	body:has(.simm-compare-tray:not([hidden])) .simm-plans { padding-block-end: 96px; }

	/* 4. Related columns stack. */
	.simm-row-related > .e-con-inner > .e-con,
	.simm-row-related > .e-con { inline-size: 100%; }
}

/* Long provider and network names are Latin inside Hebrew text; isolating them
   stops the bidi algorithm reordering the surrounding sentence. */
.simm-plan__tech span,
.simm-related__meta,
.simm-chip__flag { unicode-bidi: isolate; }

/* Comparison checkbox: the label is the 44px target and tapping it toggles the
   input, but the input's own box was 18px. Stretching its hit area over the
   label makes the control itself measure as a full target. */
.simm-plan__compare { position: relative; }
.simm-plan__compare input { inline-size: 20px; block-size: 20px; }
.simm-plan__compare input::after { content: ""; position: absolute; inset: 0; }

/* =========================================================================
   32. Plan details modal + result state
   The <details> element stays in the markup as the no-JS fallback; with JS the
   toggle opens a dialog instead, so a card never grows and pushes the list.
   ========================================================================= */

.simm-plans__count { margin: 0 0 .7rem; font-size: .88rem; font-weight: 600; color: var(--simm-body); text-align: start; }
.simm-planswrap.is-loading { opacity: .55; transition: opacity .12s linear; }
.simm-planswrap[aria-busy="true"] { cursor: progress; }

.simm-state--empty { text-align: center; padding: 1.6rem 1rem; }
.simm-state--empty .simm-btn { margin-block-start: .8rem; min-block-size: var(--simm-tap); padding-inline: 1.4rem; }

.simm-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 16, 64, .55);
}

.simm-modal__inner {
	inline-size: min(100%, 460px);
	max-block-size: 88dvh;
	display: flex;
	flex-direction: column;
	background: var(--simm-surface);
	border-radius: var(--simm-r-lg);
	overflow: hidden;
}

.simm-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .85rem 1rem;
	border-block-end: 1px solid var(--simm-line);
}

.simm-modal__title { margin: 0; font-size: 1rem; color: var(--simm-ink); }

.simm-modal__close {
	inline-size: var(--simm-tap);
	block-size: var(--simm-tap);
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: var(--simm-r-sm);
	background: transparent;
	color: var(--simm-body);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* Body scrolls; the purchase action stays pinned and never covers content. */
.simm-modal__body { overflow-y: auto; padding: .9rem 1rem; flex: 1 1 auto; }
.simm-modal__body .simm-plan__facts { background: transparent; padding: 0; font-size: .9rem; }

.simm-modal__foot {
	padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--simm-line);
	background: var(--simm-surface);
}

.simm-modal__foot .simm-btn { min-block-size: 50px; }

/* With JS the inline panel is never shown; the toggle acts as a button. */
.simm-plan__details[open] > .simm-plan__facts { display: block; }
.js-simm .simm-plan__details > .simm-plan__facts { display: none; }

/* =========================================================================
   33. Trip selector + coverage list
   ========================================================================= */

.simm-trip {
	background: var(--simm-blue-50);
	border: 1px solid var(--simm-blue-100);
	border-radius: var(--simm-r);
	padding: .9rem 1rem;
	margin-block-end: .9rem;
}

.simm-trip__prompt { margin: 0; font-size: 1rem; font-weight: 700; color: var(--simm-ink); }
.simm-trip__lead { margin: .15rem 0 .7rem; font-size: .86rem; color: var(--simm-body); }

.simm-trip__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; padding: 0; list-style: none; }

.simm-trip__chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-block-size: 36px;
	padding: .2rem .5rem .2rem .25rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	font-size: .85rem;
	color: var(--simm-ink);
}

.simm-trip__chip.is-primary { border-color: var(--simm-blue-300); background: #fff; }
.simm-trip__flag { font-size: 1rem; unicode-bidi: isolate; }
.simm-trip__badge { font-size: .7rem; color: var(--simm-muted); padding-inline-start: .25rem; }

.simm-trip__remove {
	inline-size: var(--simm-tap);
	block-size: var(--simm-tap);
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--simm-body);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.simm-trip__remove:focus-visible { outline: 2px solid var(--simm-blue-400); outline-offset: 1px; }

.simm-trip__add {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-block-size: var(--simm-tap);
	padding-inline: .9rem;
	background: var(--simm-surface);
	border: 1px dashed var(--simm-blue-300);
	border-radius: var(--simm-r-sm);
	color: var(--simm-blue-600);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}

.simm-trip__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-block-start: .6rem; }
.simm-trip__suggest-label { font-size: .78rem; color: var(--simm-muted); }

.simm-trip__suggestion {
	min-block-size: var(--simm-tap);
	padding-inline: .6rem;
	background: transparent;
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	color: var(--simm-body);
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
}

/* --- Add-a-destination sheet -------------------------------------------- */

.simm-tripsheet {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 16, 64, .5);
}

@media (min-width: 768px) { .simm-tripsheet { align-items: center; } }

.simm-tripsheet__inner {
	inline-size: min(100%, 460px);
	max-block-size: 86dvh;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	background: var(--simm-surface);
	border-start-start-radius: var(--simm-r-lg);
	border-start-end-radius: var(--simm-r-lg);
}

@media (min-width: 768px) { .simm-tripsheet__inner { border-radius: var(--simm-r-lg); } }

.simm-tripsheet__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.simm-tripsheet__title { margin: 0; font-size: 1.05rem; color: var(--simm-ink); }

.simm-tripsheet__close {
	inline-size: var(--simm-tap);
	block-size: var(--simm-tap);
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: var(--simm-r-sm);
	background: transparent;
	color: var(--simm-body);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* Superseded by the shared field component in §45. */

.simm-tripsheet__results { margin: 0; padding: 0; list-style: none; overflow-y: auto; flex: 1 1 auto; }

.simm-tripsheet__results button {
	inline-size: 100%;
	min-block-size: 52px;
	padding-inline: .7rem;
	border: 0;
	border-radius: var(--simm-r-sm);
	background: transparent;
	color: var(--simm-ink);
	font: inherit;
	font-size: .95rem;
	text-align: start;
	cursor: pointer;
}

.simm-tripsheet__results button:hover,
.simm-tripsheet__results button:focus-visible { background: var(--simm-blue-50); outline: none; }
.simm-tripsheet__empty { padding: .9rem .7rem; color: var(--simm-muted); font-size: .88rem; }

/* --- Coverage list inside the details modal ------------------------------ */

.simm-plan__coverage-list { margin-block-start: .9rem; }
.simm-plan__coverage-title { margin: 0 0 .4rem; font-size: .85rem; font-weight: 700; color: var(--simm-ink); text-align: start; }

.simm-plan__countries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: .15rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.simm-plan__countries li { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--simm-body); }
.simm-plan__country-flag { unicode-bidi: isolate; }

.simm-related__more {
	margin-block-start: .5rem;
	min-block-size: var(--simm-tap);
	padding-inline: .9rem;
	background: transparent;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	color: var(--simm-blue-600);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}

.simm-related__item[hidden] { display: none; }

/* Breadcrumb links were 17px tall; the trail is a navigation control and needs
   a real target like any other. */
.simm-crumbs a,
.simm-crumbs span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--simm-tap);
	padding-inline: .15rem;
}

@media (max-width: 767px) {
	/* The trip selector sits between the hero and the plans by design, so it
	   has to be cheap in height: tighter padding, and the suggestion row is
	   reachable from the add sheet instead of standing on its own line. */
	.simm-trip { padding: .7rem .8rem; margin-block-end: .6rem; }
	.simm-trip__lead { font-size: .82rem; margin-block-end: .5rem; }
	.simm-trip__suggest { display: none; }
	.simm-trip__chips { margin-block-end: .45rem; }
}

/* =========================================================================
   34. Country page — mobile information hierarchy
   Plans have to arrive early. Everything here is about what the first screen
   spends its height on; nothing is deleted, only reordered or compacted.
   ========================================================================= */

@media (max-width: 767px) {

	/* One-line breadcrumb: a back link to the parent, not a full trail. */
	.simm-crumbs {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
	}

	/* Compact heading area: flag, country, H1 together with tight rhythm. */
	.simm-chip { margin-block-end: 2px; }

	.simm-hero-title .elementor-heading-title { margin-block: 0; line-height: 1.12; }

	/* The `padding-block: 8px !important` on the row's children was §18 debt #2.
	   It moved to §31, scoped to `body:not(.single-simm_country)` — the reason
	   it cannot simply be deleted is written out there. */

	/* Trip + filter as one row of buttons directly above the results. */
	.simm-plans-actions,
	.simm-plans-actions > .e-con-inner {
		align-items: stretch;
	}

	.simm-plans-actions .elementor-widget-simm-trip-selector,
	.simm-plans-actions .elementor-widget-simm-plan-filters {
		flex: 1 1 0;
		min-inline-size: 0;
	}

	/* Collapsed by default: the prompt and explanation live in the add sheet,
	   the row shows one button. Chips appear only once something is added. */
	.simm-trip {
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
	}

	.simm-trip__prompt,
	.simm-trip__lead { display: none; }

	.simm-trip__chips:empty { display: none; }

	.simm-trip__add {
		inline-size: 100%;
		justify-content: center;
		background: var(--simm-surface);
		border: 1px solid var(--simm-line);
		border-style: solid;
		min-block-size: var(--simm-tap);
	}

	/* Chips sit under the action row once they exist. */
	.simm-trip__chips {
		order: 2;
		margin: .5rem 0 0;
	}

	.simm-trip { display: flex; flex-direction: column; }
	.simm-trip__add { order: 1; }

	.simm-filterbar__open { margin: 0; }

	/* Compact section heading and count. */
	.simm-plans__count { margin-block-end: .5rem; font-size: .84rem; }

	/* A `.simm-country-photo img` block sat here for the relocated photograph.
	   It never matched anything: the widget's element carries the *widget*
	   class `elementor-widget-simm-country-photo` and the picture itself is
	   `.simm-cphoto`. The photograph now lives in the hero (§58) either way. */
}

@media (max-width: 767px) {
	/* One compact back link instead of the full trail. The intermediate crumbs
	   are hidden rather than removed, so the trail is intact for search engines
	   and for anyone on a wider screen, and the one visible control is a real
	   44x44 target. */
	.simm-crumbs { display: flex; align-items: center; }

	.simm-crumbs > a:not(:nth-last-of-type(1)),
	.simm-crumbs > .simm-crumbs__sep,
	.simm-crumbs > span[aria-current] { display: none; }

	.simm-crumbs > a:nth-last-of-type(1) {
		display: inline-flex;
		align-items: center;
		gap: .3rem;
		min-inline-size: var(--simm-tap);
		min-block-size: var(--simm-tap);
		padding-inline: .5rem .3rem;
		color: var(--simm-blue-600);
		font-weight: 600;
	}

	.simm-crumbs > a:nth-last-of-type(1)::before {
		content: "›";
		font-size: 1.15em;
		line-height: 1;
	}
}

/* A `.simm-photo-block` wrapper used to hold the photograph and was hidden
   here. The wrapper no longer exists; the rule that still matters is the one on
   the widget element, in §37. */

/* The country photograph. `<picture>` decides what to fetch, so the only job
   here is shape. On desktop the block is hidden and its source media query does
   not match, so nothing is downloaded either way. */
.simm-cphoto {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--simm-cphoto-ratio, 20 / 13);
	border-radius: var(--simm-r);
	overflow: hidden;
	background: var(--simm-canvas);
}

.simm-cphoto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* =========================================================================
   35. Narrow phones (320–359px)
   The action row was wrapping to two 44px lines on every phone, costing 44px
   before the plans on all of them. Keeping it to one line is the fix; the rest
   of this block trims only the narrowest widths, and never a touch target.
   ========================================================================= */

@media (max-width: 767px) {
	/* One line, always. The buttons shrink; they do not stack. */
	.simm-plans-actions > .e-con-inner,
	.simm-plans-actions {
		flex-wrap: nowrap;
	}

	.simm-trip__add,
	.simm-filterbar__open {
		white-space: nowrap;
		padding-inline: .6rem;
	}
}

@media (max-width: 359px) {
	/* Section heading fits one line at this width instead of two. */
	.simm-plans-heading .elementor-heading-title { font-size: 20px; line-height: 1.2; }

	/* The intro line is one sentence; let it be one or two, not three. */
	.simm-hero-copy .elementor-widget-text-editor { font-size: 14px; line-height: 1.5; }

	/* Trim the gaps rather than the targets — every control stays 44px. */
	.simm-plans-actions > .e-con-inner { gap: 6px; }
	.simm-coverage-note { font-size: 12px; padding: 7px 10px; }
	.simm-trip__add span:not([aria-hidden]) { font-size: .82rem; }
	.simm-filterbar__open { font-size: .85rem; }
	.simm-plans__count { margin-block-end: .35rem; }
}

@media (max-width: 767px) {
	/* "Show selected additional countries only after the user adds them": with
	   no trip the list holds just the page's own country, which the H1 already
	   states. Hiding it removes a 44px row from every phone. */
	.simm-trip__chips:not(:has(.simm-trip__chip:nth-child(2))) { display: none; }
}

/* =========================================================================
   36. Mobile: keeping the pre-plan block a fixed height across countries
   The distance to the first card must not depend on which destination it is.
   Two things varied: the hero intro wraps differently per country name, and
   the coverage notice appears only where no country-only package exists —
   which alone pushed Zambia 120px past France. Both are handled by reserving a
   consistent height, not by hiding anything.
   ========================================================================= */

@media (max-width: 767px) {
	/* Two lines, always — the same height whatever the country is called. The
	   full sentence stays in the DOM for assistive technology and is read in
	   full on tablet and desktop. */
	.simm-hero-copy .elementor-widget-text-editor p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-block-end: 0;
	}

	/* The notice is essential — a destination with no country-only package has
	   to say so before purchase — so it is compacted, never hidden. Two lines
	   at this size, and `min-block-size` reserves the space either way so the
	   distance to the first card does not depend on how long the sentence
	   wraps for a given country. */
	.simm-coverage-note {
		padding: 8px 11px;
		font-size: 12.5px;
		line-height: 1.4;
		gap: .4rem;
		margin-block-end: .5rem;
	}

	.simm-coverage-note svg { margin-block-start: .1rem; font-size: .9rem; flex: 0 0 auto; }
}

/* The add-a-destination sheet must clear the software keyboard, exactly like
   the destination search sheet. Without this it sat at the bottom of the layout
   viewport — behind the keyboard on a phone. */
.simm-tripsheet {
	block-size: 100dvh;
	block-size: var(--simm-sheet-h, 100dvh);
	transform: translateY(var(--simm-sheet-top, 0px));
	inset-block-start: 0;
	inset-block-end: auto;
}

/* Chips appear as soon as a destination is added, and the row is scrollable if
   a long trip outgrows the width rather than wrapping into the plans. */
@media (max-width: 767px) {
	.simm-trip__chips { flex-wrap: wrap; row-gap: .35rem; }
}

/* =========================================================================
   37. Country page — final visual pass
   ========================================================================= */

/* --- Trip selector: a compact horizontal panel on desktop ---------------- */

@media (min-width: 768px) {
	.simm-trip {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 1rem;
		row-gap: .35rem;
		padding: .85rem 1.1rem;
	}

	/* Heading and its one explanatory line share the first column. */
	.simm-trip__prompt { grid-column: 1; grid-row: 1; margin: 0; font-size: .95rem; white-space: nowrap; }
	.simm-trip__lead   { grid-column: 1; grid-row: 2; margin: 0; font-size: .8rem; white-space: nowrap; }

	/* Chips take the middle and wrap within it rather than stacking the panel. */
	.simm-trip__chips {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
		align-content: center;
		max-block-size: 76px;
		overflow-y: auto;
	}

	.simm-trip__add { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

	/* Suggestions sit under the panel, only when there are any. */
	.simm-trip__suggest { grid-column: 1 / -1; grid-row: 3; margin-block-start: .2rem; }
	.simm-trip__suggest:empty { display: none; }
}

/* --- Mobile: close the gap between the intro and the plans heading ------- */

@media (max-width: 767px) {
	.simm-hero-copy { padding-block-end: 0 !important; }
	.simm-hero-section { padding-block-end: 0 !important; }

	/* One deliberate step between the hero and the product, not a void. */
	.simm-plans-outer,
	.simm-plans-outer > .e-con-inner { padding-block-start: 14px !important; }
}

/* --- Related destinations: choices, not a data table --------------------- */

.simm-related { gap: .3rem; }

.simm-related__item {
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	background: var(--simm-surface);
	transition: border-color .15s ease, background .15s ease;
}

.simm-related__item > a {
	padding: .55rem .7rem;
	min-block-size: 52px;
}

.simm-related__item:hover { border-color: var(--simm-blue-300); background: var(--simm-blue-50); }

/* A chevron marks the row as somewhere you can go. */
.simm-related__item > a::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 7px;
	block-size: 7px;
	border-inline-start: 2px solid var(--simm-blue-500);
	border-block-end: 2px solid var(--simm-blue-500);
	transform: rotate(45deg);
	margin-inline-start: .1rem;
}

/* A row with no destination page is information, not a link — no chevron. */
.simm-related__item:not(:has(> a)) { padding: .55rem .7rem; min-block-size: 52px; }

.simm-related__name { font-weight: 600; }
.simm-related__more { inline-size: 100%; }

/* The country photograph is a mobile-hierarchy element: on desktop the hero
   already carries the image, and the widget's `max_width` control governs the
   same 767px boundary its <picture> source uses. Hidden rather than left as a
   1×1 pixel stretched to the aspect ratio, which is what it became once the old
   wrapper was removed. */
@media (min-width: 768px) {
	.elementor-widget-simm-country-photo { display: none; }
}

/* It used to introduce the country-information block on mobile and carried a
   margin for that rhythm. It is now the hero's background layer, where any
   margin would inset the photograph inside its own card — see §58. */

/* =========================================================================
   38. Plan card — one alignment system, compact connectivity, card-body trigger
   Commercial information (validity, allowance, price) is centred on every
   card; descriptive rows share one alignment regardless of which optional
   pieces a given plan happens to have.
   ========================================================================= */

.simm-plan { position: relative; text-align: center; }

.simm-plan__validity,
.simm-plan__data,
.simm-plan__data-label,
.simm-plan__price { text-align: center; }

/* Reserved space so a card without a badge does not sit higher than one with
   a badge, and a missing coverage line does not shift the price row. */
.simm-plan__coverage-wrap { min-block-size: 46px; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.simm-plan__tech { min-block-size: 34px; }

/* --- Connectivity, one line --------------------------------------------- */

/* Plain text flow, not flex: as flex items the separator became a line of its
   own containing a single dot. The operator list wraps naturally; the
   separator is inside the technology span so the two can never be split. */
.simm-plan__tech {
	display: block;
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--simm-body);
	text-align: center;
	text-wrap: balance;
}

.simm-plan__tech-label { color: var(--simm-muted); }
.simm-plan__tech-ops { font-weight: 600; overflow-wrap: break-word; }
.simm-plan__tech-tech { color: var(--simm-body); white-space: nowrap; }

/* Operators + separator + technology are one Latin run; isolating the whole
   line keeps the separator beside the value it belongs to. The labelled
   variant (חיבור נתמך: 4G/5G) stays in the RTL flow, because its label is
   Hebrew. */
.simm-plan__tech--ltr { direction: ltr; unicode-bidi: isolate; }

/* --- Card body opens the details ---------------------------------------- */

/* The stretched trigger.
   `.simm-cardlink` is a dedicated reset class, not shared with anything that
   should ever look like a button. It exists because the theme styles bare
   `button:hover` with a solid magenta (#c36) — the trigger covers the whole
   card, so it painted over the content the moment a pointer touched it.
   Every visual property is neutralised in every state, so no future global
   button rule can reach it either. Interactivity is expressed by the parent
   card instead. */
/* The `button.`-prefixed twins are not decoration: the theme's magenta rule
   is `[type="button"]`, which TIES the bare class on specificity, so whichever
   stylesheet prints later would win. On deal pages simm.css can legitimately
   print before the theme, and the trigger grew a magenta border and hover
   fill. The element+class selectors outrank the attribute selector in every
   load order. */
.simm-plan__open,
.simm-plan__open:hover,
.simm-plan__open:focus,
.simm-plan__open:focus-visible,
.simm-plan__open:active,
.simm-plan__open:visited,
button.simm-plan__open,
button.simm-plan__open:hover,
button.simm-plan__open:focus,
button.simm-plan__open:focus-visible,
button.simm-plan__open:active,
.simm-cardlink,
.simm-cardlink:hover,
.simm-cardlink:focus,
.simm-cardlink:focus-visible,
.simm-cardlink:active,
.simm-cardlink:visited,
a.simm-cardlink,
a.simm-cardlink:hover,
a.simm-cardlink:focus,
a.simm-cardlink:focus-visible,
a.simm-cardlink:active,
a.simm-cardlink:visited {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-color: transparent;
	box-shadow: none;
	color: inherit;
	filter: none;
	opacity: 1;
	text-decoration: none;
	transform: none;
	transition: none;
	padding: 0;
	margin: 0;
	font: inherit;
}

.simm-plan__open {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	cursor: pointer;
	z-index: 1;
	border-radius: inherit;
}

/* The purchase action and the comparison control sit above the trigger, so a
   tap on either reaches them and not the modal. */
.simm-plan .simm-btn--block,
.simm-plan__actions { position: relative; z-index: 2; }

/* Restraint on purpose: a border shift and a shadow, never a fill. */
.simm-plan:hover,
.simm-plan:has(.simm-plan__open:hover) {
	border-color: var(--simm-blue-400);
	box-shadow: var(--simm-sh);
}

/* Keyboard focus is drawn on the card, so it is visible at the card's edge
   rather than hidden inside an invisible element. */
.simm-plan:has(.simm-plan__open:focus-visible) {
	outline: 3px solid var(--simm-blue-400);
	outline-offset: 2px;
	border-color: var(--simm-blue-400);
}

/* Comparison selection stays a distinct state, and the recommended plan keeps
   its own frame — neither is overwritten by hover. */
.simm-plan.is-comparing { border-color: var(--simm-blue-500); box-shadow: 0 0 0 2px var(--simm-blue-100); }

/* With JavaScript the inline <details> is never the surface; it stays in the
   markup as the no-JS fallback and as the modal's content source. */
.simm-plan__details { position: relative; z-index: 2; }
.simm-plan__details-toggle { display: none; }

/* =========================================================================
   39. Desktop filter controls
   Native selects looked unfinished beside the rest of the page. The arrow is
   drawn here rather than left to the platform, because the platform puts it on
   the wrong side in RTL and styles it differently per OS.
   ========================================================================= */

@media (min-width: 768px) {
	.simm-filterbar__panel {
		gap: .5rem;
		align-items: center;
	}

	.simm-filterbar select {
		appearance: none;
		-webkit-appearance: none;
		min-block-size: 46px;
		padding-inline: .9rem 2.1rem;
		background-color: var(--simm-surface);
		/* Chevron drawn as a background image so it sits on the inline end in
		   RTL, where the native control puts it on the wrong side. */
		background-image: linear-gradient(45deg, transparent 50%, var(--simm-body) 50%),
			linear-gradient(135deg, var(--simm-body) 50%, transparent 50%);
		background-position: left 0.85rem top calc(50% + 1px), left calc(0.85rem + 5px) top calc(50% + 1px);
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r-sm);
		font: inherit;
		font-size: .92rem;
		font-weight: 500;
		color: var(--simm-ink);
		cursor: pointer;
		transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	}

	.simm-filterbar select:hover { border-color: var(--simm-blue-300); background-color: var(--simm-blue-50); }

	.simm-filterbar select:focus-visible {
		outline: none;
		border-color: var(--simm-blue-400);
		box-shadow: 0 0 0 3px var(--simm-blue-100);
	}

	.simm-filterbar select:active { background-color: var(--simm-blue-50); }

	/* A filter that is actually narrowing the list reads as engaged. */
	.simm-filterbar select.is-active {
		border-color: var(--simm-blue-400);
		background-color: var(--simm-blue-50);
		color: var(--simm-blue-700);
		font-weight: 600;
	}

	.simm-filterbar__label {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
		min-block-size: 46px;
		padding-inline-end: .2rem;
		font-size: .9rem;
		font-weight: 600;
		color: var(--simm-body);
	}

	.simm-filterbar__label svg { inline-size: 17px; block-size: 17px; color: var(--simm-blue-500); }
}

/* =========================================================================
   40. Filter toolbar — one system, aligned to the reading start
   The action and the selects were two unrelated shapes: a pill with an icon
   beside rectangles. They are one toolbar, so they share one set of metrics.
   ========================================================================= */

@media (min-width: 768px) {
	.simm-filterbar__panel {
		/* Logical, not left/right: in an RTL container this starts on the
		   right, and the same rule is correct if the site is ever LTR. */
		justify-content: flex-start;
		gap: .5rem;
	}

	/* One shape for every member of the toolbar. */
	.simm-filterbar__panel .simm-filterbar__label,
	.simm-filterbar__panel select {
		min-block-size: 46px;
		block-size: 46px;
		padding-inline: .9rem;
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r-sm);
		background-color: var(--simm-surface);
		font: inherit;
		font-size: .92rem;
		font-weight: 500;
		color: var(--simm-ink);
		line-height: 1;
	}

	/* The action reads first in the row and keeps its icon at the same size as
	   the selects' chevron. */
	.simm-filterbar__panel .simm-filterbar__label {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		font-weight: 600;
		color: var(--simm-body);
		order: -1;
		white-space: nowrap;
	}

	.simm-filterbar__panel .simm-filterbar__label svg {
		inline-size: 16px;
		block-size: 16px;
		color: var(--simm-blue-500);
	}

	/* The chevron is drawn against the physical left edge, which is the inline
	   END in RTL — so the room for it is reserved there, not at the start. */
	.simm-filterbar__panel select {
		padding-inline-start: .9rem;
		padding-inline-end: 2.1rem;
	}

	.simm-filterbar__panel .simm-filterbar__label:hover,
	.simm-filterbar__panel select:hover {
		border-color: var(--simm-blue-300);
		background-color: var(--simm-blue-50);
	}

	.simm-filterbar__panel select:focus-visible {
		outline: none;
		border-color: var(--simm-blue-400);
		box-shadow: 0 0 0 3px var(--simm-blue-100);
	}

	/* Engaged filters change colour, never shape. */
	.simm-filterbar__panel select.is-active {
		border-color: var(--simm-blue-400);
		background-color: var(--simm-blue-50);
		color: var(--simm-blue-700);
		font-weight: 600;
	}

	/* The count belongs to the toolbar, so it sits with it rather than
	   floating above the grid on its own line. */
	.simm-plans__count { text-align: start; margin-block-start: .1rem; }
}

/* =========================================================================
   41. "הוספת יעד" sheet — top-aligned on mobile
   It opened at the bottom, which put the field under the keyboard and the
   results nowhere. The field belongs at the top, directly under the header,
   with the results filling the space above the keyboard.
   ========================================================================= */

.simm-tripsheet {
	align-items: flex-start;
	padding-block-start: var(--simm-sheet-offset, 0px);
}

.simm-tripsheet__inner {
	border-radius: var(--simm-r-lg);
	max-block-size: calc(var(--simm-sheet-h, 100dvh) - var(--simm-sheet-offset, 0px) - 16px);
}

@media (max-width: 767px) {
	.simm-tripsheet__inner {
		inline-size: calc(100% - 1.2rem);
		margin-inline: .6rem;
		margin-block-start: .6rem;
		border-start-start-radius: var(--simm-r-lg);
		border-start-end-radius: var(--simm-r-lg);
	}
}

/* =========================================================================
   42. Plan card — one grid, so every row aligns
   Cards previously stacked their content, so an optional row (a price-per-GB,
   a longer coverage line, a badge) pushed the purchase button down and the
   buttons across a desktop row no longer met. The card is now a grid with a
   named row per content slot: an absent slot keeps its track, so nothing below
   it moves.
   ========================================================================= */

/* Cards are grid items and already stretch to equal height, so the reliable
   way to align the purchase row is to pin the commercial block to the bottom
   of every card and let the descriptive content above absorb the slack.
   (Subgrid was tried first: the card carries a 13th, absolutely-positioned
   child for the details trigger, and sharing tracks by position became
   fragile. Equal height plus an auto margin needs no such contract.) */
.simm-plan {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Everything from the price down is the commercial block; it starts at the
   bottom edge, so price, button and comparison line up across the row. */
.simm-plan__price { margin-block-start: auto; }

/* The optional rows keep their height whether or not they have content, which
   is what actually aligns the buttons. Values are the measured heights of the
   populated versions, so a full card is unchanged. */
.simm-plan__tech { min-block-size: 34px; }
.simm-plan__coverage-wrap { min-block-size: 46px; }
.simm-plan__price-per { display: block; min-block-size: 17px; }

/* An unlimited plan has no meaningful price-per-GB. The slot stays; it simply
   holds nothing, rather than the price area collapsing upward. */
.simm-plan__price { display: flex; flex-direction: column; align-items: center; }

/* The purchase action is pushed to a consistent line by the tracks above it,
   not by margin guesswork. */
.simm-plan .simm-btn--block { margin-block-start: auto; }

@media (max-width: 767px) {
	/* One card per row on a phone, so reserving space for absent optional rows
	   only adds emptiness. The tracks collapse to their content instead. */
	.simm-plan__tech,
	.simm-plan__coverage-wrap { min-block-size: 0; }
	.simm-plan__price-per:empty { display: none; }
}

/* =========================================================================
   43. Allowance typography — Hebrew needs the brand face named
   "ללא הגבלה" rendered in a synthetic-oblique serif while "20GB" rendered
   correctly. Same computed family for both: the stack simply had no Hebrew
   face, so Latin resolved and Hebrew fell back. Naming the brand font fixes
   the word without touching the numeral.
   ========================================================================= */

.simm-plan__data,
.simm-plan__data-unit,
.simm-plan__data--word {
	font-family: "Heebo", var(--simm-font, system-ui), sans-serif;
	font-style: normal;
	text-decoration: none;
	font-synthesis: none;
}

/* Sized to sit on the same baseline as a numeric allowance rather than reading
   as a smaller, different thing. */
.simm-plan__data--word {
	font-size: .58em;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
	display: inline-block;
	vertical-align: baseline;
}

/* =========================================================================
   44. Region badge — centred, with the Latin token isolated
   ========================================================================= */

.simm-plan__coverage-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
}

.simm-plan__coverage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	text-align: center;
}

.simm-plan__coverage bdi { unicode-bidi: isolate; }


/* The recommended card carried a 2px border while its siblings had 1px, which
   moved its content box down by a pixel and left the purchase buttons a pixel
   out of line. Same border on every card; the emphasis comes from a ring that
   costs no layout. */
.simm-plan--featured {
	border-width: 1px;
	box-shadow: 0 0 0 2px var(--simm-blue-500), var(--simm-sh);
}

/* The recommended card's CTA is solid and the others are outlined. Without a
   matching (transparent) border the two variants differ by a fraction of a
   pixel in line box, which was enough to leave the buttons visibly unaligned
   at the top of the row. */
.simm-btn--primary { border: 1px solid transparent; }

/* =========================================================================
   45. Search field — one component, two places
   The destination-add field was a grey box with the browser's black double
   focus ring and no icon; the homepage field was a white pill with a subtle
   border. They are the same control and now share one set of tokens.
   ========================================================================= */

:root {
	--simm-field-height: 56px;
	--simm-field-radius: 14px;
	--simm-field-border: var(--simm-line);
	--simm-field-bg: var(--simm-surface);
	--simm-field-size: 1.02rem;
}

.simm-field,
.simm-search__field {
	display: flex;
	align-items: center;
	gap: .65rem;
	inline-size: 100%;
	min-block-size: var(--simm-field-height);
	padding-inline: 1.1rem;
	background: var(--simm-field-bg);
	border: 1px solid var(--simm-field-border);
	border-radius: var(--simm-field-radius);
	box-shadow: var(--simm-sh-xs);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.simm-field > svg,
.simm-search__field > svg {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	color: var(--simm-muted);
}

.simm-field input,
.simm-search__field input {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--simm-field-size);
	color: var(--simm-ink);
	outline: none;
}

.simm-field input::placeholder,
.simm-search__field input::placeholder { color: var(--simm-muted); opacity: 1; }

.simm-field:hover,
.simm-search__field:hover { border-color: var(--simm-blue-300); }

/* One border plus a brand-blue ring with a small offset. No black outline and
   no second border: the focus ring the browser draws on the input itself is
   suppressed, and the wrapper carries the state instead. */
.simm-field:focus-within,
.simm-search__field:focus-within {
	border-color: var(--simm-blue-400);
	box-shadow: 0 0 0 3px var(--simm-blue-100);
	outline: none;
}

.simm-field input:focus,
.simm-field input:focus-visible,
.simm-search__field input:focus,
.simm-search__field input:focus-visible { outline: none; box-shadow: none; }

.simm-field:has(input:disabled),
.simm-search__field:has(input:disabled) { opacity: .55; background: var(--simm-canvas); }

/* The sheet's field is the same component; only its own layout differs. */
.simm-tripsheet__field { margin: 0; }

/* Result rows match the primary search's suggestion rows. */
.simm-tripsheet__results button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-block-size: 56px;
	padding-inline: .8rem;
	border-radius: var(--simm-r-sm);
	font-size: .95rem;
}

/* =========================================================================
   46. Mobile action row and chip row
   Rebuilt without `display: contents`. On a physical phone the contents chain
   through Elementor's wrappers left both controls squeezed into the right half
   and clipped a chip against the viewport edge. The action row is now an
   explicit two-column grid, and the chips live in the full-width plans wrapper
   rather than inside the half-width trip widget.
   ========================================================================= */

@media (max-width: 767px) {
	/* The grid goes on the INNER element only. A boxed container renders an
	   outer `.e-con` wrapper around a `.e-con-inner` flex host (see
	   docs/elementor-notes.md §3); making both a grid put the inner into one
	   column, halving it, and the inner grid then halved again — 40px buttons.
	   The `:not(:has())` fallback covers an unboxed container, which has no
	   inner element. */
	.simm-plans-actions > .e-con-inner,
	.simm-plans-actions:not(:has(> .e-con-inner)) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		inline-size: 100%;
		align-items: stretch;
	}

	/* Each widget fills its whole column, whatever Elementor sized it. */
	.simm-plans-actions .elementor-widget,
	.simm-plans-actions .elementor-widget-container,
	.simm-plans-actions .simm-trip,
	.simm-plans-actions .simm-filterbar {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		margin: 0;
	}

	/* The filter button lives inside the filter form, which carries its own
	   padding — that is where the missing 8px went. Nothing between the grid
	   column and the button may add box. */
	.simm-plans-actions .simm-filterbar,
	.simm-plans-actions .simm-filterbar__panel,
	.simm-plans-actions .simm-trip {
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent;
		inline-size: 100%;
	}

	/* Two identical controls: same box, same height, centred content, label on
	   one line and the icon inside its own button. */
	.simm-trip__add,
	.simm-filterbar__open {
		box-sizing: border-box;
		block-size: 46px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .4rem;
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: var(--simm-tap);
		padding-inline: .6rem;
		white-space: nowrap;
		overflow: hidden;
	}

	.simm-trip__add > span,
	.simm-filterbar__open > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.simm-filterbar__open svg,
	.simm-trip__add svg { flex: 0 0 auto; }

	/* The panel's own framing is not wanted around a bare button. */
	.simm-plans-actions .simm-trip {
		background: transparent;
		border: 0;
		padding: 0;
		display: block;
	}

	.simm-plans-actions .simm-trip__prompt,
	.simm-plans-actions .simm-trip__lead,
	.simm-plans-actions .simm-trip__suggest { display: none; }

	/* --- Row 2: the chips, in the full-width plans wrapper ---------------- */

	.simm-trip__chips {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		inline-size: 100%;
		margin: 0 0 .5rem;
		/* Inline padding keeps the first and last chip clear of the edges, and
		   the negative margin lets the row still span the full width. */
		padding-inline: 2px;
		padding-block: 2px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* The fade sits over the padding, not over readable chip text. */
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent 100%);
		mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent 100%);
	}

	.simm-trip__chips[hidden] { display: none; }
	.simm-trip__chips::-webkit-scrollbar { display: none; }

	/* The H1 already names the page's country, so the primary chip is not
	   repeated on a phone. It still counts toward the result total, which is
	   computed from the intersection including it. */
	.simm-trip__chips .simm-trip__chip.is-primary { display: none; }

	.simm-trip__chip {
		flex: 0 0 auto;
		min-block-size: 38px;
		padding: .15rem .5rem .15rem .15rem;
		max-inline-size: 60vw;
	}

	.simm-trip__name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-inline-size: 0;
	}

	.simm-trip__remove {
		position: relative;
		inline-size: 30px;
		block-size: 30px;
	}

	/* Visible control is 30px; its touch area is a full 44x44 drawn outside. */
	.simm-trip__remove::after {
		content: "";
		position: absolute;
		inset: 50% auto auto 50%;
		inline-size: 44px;
		block-size: 44px;
		transform: translate(50%, -50%);
	}
}

/* =========================================================================
   47. Region badge — centre the box, not just the text
   Measured 52px right of the card centre on desktop and ~100px on mobile, for
   national, regional and global alike: `text-align` centred the glyphs inside
   a box that was itself sitting at the inline start. The box is now centred
   explicitly, and sized to its content so there is no invisible full-width
   pill to mis-centre.
   ========================================================================= */

.simm-plan__coverage-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	text-align: center;
}

.simm-plan__coverage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	align-self: center;
	margin-inline: auto;
	inline-size: max-content;
	max-inline-size: 100%;
	/* A long mixed label wraps inside the pill rather than pushing the box
	   wider than the card and losing the centring. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* The Latin region name keeps its own bidi run, so the separator stays put. */
.simm-plan__coverage bdi { unicode-bidi: isolate; }

/* The coverage summary under the badge is centred on the same axis. */
.simm-plan__includes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	margin-inline: auto;
	inline-size: max-content;
	max-inline-size: 100%;
	text-align: center;
}

/* =========================================================================
   48. "Find a Plan" — the coverage entry points and the results controls
   /packages/ answers three questions the destination pages cannot: a trip
   through several countries, a whole region, worldwide coverage. Everything
   below belongs to that page; the plan cards, chips, filter sheet and details
   modal are the approved components and are not restyled here.
   ========================================================================= */

/* --- Region and global tiles --------------------------------------------- */

.simm-coverage {
	display: grid;
	/* One column on a phone: these are wide, text-led rows, and two of them
	   side by side at 320px truncated the destination counts. */
	grid-template-columns: 1fr;
	gap: .6rem;
}

@media (min-width: 600px) { .simm-coverage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .simm-coverage { grid-template-columns: repeat(3, 1fr); } }

.simm-coverage__tile {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-block-size: 72px;
	padding: .75rem .9rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.simm-coverage__tile:hover,
.simm-coverage__tile:focus-visible {
	border-color: var(--simm-blue-500);
	box-shadow: 0 4px 14px rgba(0, 80, 248, .1);
	outline: none;
}

.simm-coverage__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: var(--simm-blue-50);
	color: var(--simm-blue-500);
}

.simm-coverage__icon svg { inline-size: 22px; block-size: 22px; }

.simm-coverage__body { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.simm-coverage__name { font-weight: 700; color: var(--simm-ink); }
.simm-coverage__meta { font-size: .82rem; color: var(--simm-muted); }

.simm-coverage__price {
	/* Pushed to the end of the row in both directions without a float. */
	margin-inline-start: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-weight: 700;
	color: var(--simm-ink);
	white-space: nowrap;
}

.simm-coverage__price small { font-size: .7rem; font-weight: 500; color: var(--simm-muted); }
.simm-coverage__tile.is-global .simm-coverage__icon { background: #eaf7f0; color: #17794b; }

/* --- "הצגת עוד" ---------------------------------------------------------- */

.simm-plans__more { display: flex; justify-content: center; margin-block-start: 1.1rem; }
.simm-plans__more .simm-btn { min-inline-size: min(100%, 320px); }

/* A card focused after a "show more" is a scroll target, not a control: the
   ring says "you are here" without implying the card itself is clickable. */
.simm-plan[tabindex="-1"]:focus-visible {
	outline: 2px solid var(--simm-blue-500);
	outline-offset: 3px;
}

/* --- Ways out of an impossible trip -------------------------------------- */

.simm-state__outs-label {
	margin-block: .9rem .4rem;
	font-size: .88rem;
	color: var(--simm-muted);
}

.simm-state__outs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }

.simm-state__out {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-block-size: var(--simm-tap);
	padding-inline: .8rem;
	border: 1px solid var(--simm-line);
	border-radius: 999px;
	background: var(--simm-surface);
	color: var(--simm-ink);
	font-size: .9rem;
	text-decoration: none;
}

.simm-state__out:hover,
.simm-state__out:focus-visible { border-color: var(--simm-blue-500); outline: none; }

/* --- Trip builder: destinations picked but not yet committed -------------- */

.simm-tripsheet__foot {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding-block-start: .7rem;
	border-block-start: 1px solid var(--simm-line);
}

.simm-tripsheet__picked {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The search page has no page destination, so no chip is the "page" one and
   every chip carries a remove control. */
.simm-trip--free .simm-trip__prompt { margin-block-end: .15rem; }

/* The chrome of the state a visitor is not in.
   The widgets inside it were already withheld by StateVisibility — this only
   removes the empty container that Elementor's element cache bakes into the
   page as static HTML and therefore cannot decide about per request. */
body.simm-scope-results .simm-when-default,
body.simm-scope-default .simm-when-results { display: none; }

/* The chip's remove control is 30×32 — comfortably past WCAG 2.5.8's 24px
   floor, but under this project's own 44px standard. Growing the button itself
   would make every chip a third taller and turn a compact row of destinations
   into a stack. The hit area is extended instead, which is what a finger
   actually needs; the × stays the size it is drawn.

   Applies on the Country Page too, where the same control has always been this
   size. The change is hit area only: no box, no colour, no reflow. */
.simm-trip__remove { position: relative; }

.simm-trip__remove::after {
	content: "";
	position: absolute;
	/* 30 + 7 + 7 = 44 tall, 32 + 6 + 6 = 44 wide. */
	inset-block: -7px;
	inset-inline: -6px;
}

/* On a destination page the trip prompt is redundant — the page already says
   which country you are looking at — so §mobile collapses it to a single
   button. On "Find a Plan" there is no such context: the button is the only
   route to a multi-destination search, and without its prompt it reads as an
   unexplained control. The prompt comes back for that variant only. */
@media (max-width: 767px) {
	.simm-trip--free .simm-trip__prompt,
	.simm-trip--free .simm-trip__lead { display: block; }

	.simm-trip--free .simm-trip__prompt { font-size: 1rem; }
	.simm-trip--free .simm-trip__lead { margin-block-end: .55rem; }
}

/* On a destination page the filter bar shares a row with the trip selector and
   fills its half, so centring it is invisible. On "Find a Plan" it is alone
   across the full column, and centring left it floating in the middle while
   the chips, the count and the grid below all began at the inline start —
   three different left edges in one region. It starts where they start. */
@media (min-width: 768px) {
	body.simm-scope-results .simm-filterbar { justify-content: flex-start; }
}

/* The trip row on the search results: the add button and the suggestions read
   as one thought, so they sit together at the start rather than at opposite
   ends of a 1280px band. */
@media (min-width: 768px) {
	.simm-trip--free {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: .6rem;
	}

	.simm-trip--free .simm-trip__suggest { margin: 0; }
}

/* =========================================================================
   49. Checkout (§22)
   WooCommerce's default checkout is styled for a shop that ships boxes. This
   is one digital line, on a phone, in Hebrew. Everything below is layout and
   type only — no field is hidden, moved or made to look optional when it is
   not, because a checkout that misleads is worse than an ugly one.
   ========================================================================= */

.woocommerce-checkout .simm-checkout__lead {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border-radius: var(--simm-r);
	background: var(--simm-blue-50);
	color: var(--simm-ink);
	font-size: .95rem;
}

/* One column, always. Two columns of form fields on a 390px screen is how a
   checkout ends up with 12px labels. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	inline-size: 100%;
	float: none;
	margin: 0;
}

.woocommerce-checkout h3,
.woocommerce-checkout h2 {
	margin-block: 1.4rem .7rem;
	font-size: 1.15rem;
	color: var(--simm-ink);
}

.woocommerce-checkout .form-row {
	margin: 0 0 .85rem;
	padding: 0;
	display: block;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-block-end: .3rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--simm-ink);
}

.woocommerce-checkout .form-row .required {
	color: #b3261e;
	text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select {
	inline-size: 100%;
	/* 44px minimum, and 16px type so iOS does not zoom the page on focus. */
	min-block-size: var(--simm-tap);
	padding: .55rem .8rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	background: var(--simm-surface);
	color: var(--simm-ink);
	font: inherit;
	font-size: 16px;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--simm-blue-500);
	outline: 2px solid rgba(0, 80, 248, .18);
	outline-offset: 0;
}

/* WooCommerce hides field descriptions and reveals them on focus through its
   own script. That is a tooltip pattern, and it is wrong for the two notes
   that matter here — "this is where the eSIM is sent" has to be readable
   before the field is touched, not after. The selector matches WooCommerce's
   own specificity rather than reaching for !important. */
.woocommerce-checkout form .form-row .woocommerce-input-wrapper .description,
.woocommerce-checkout form .form-row .description,
.woocommerce-checkout .form-row small {
	display: block;
	position: static;
	margin-block-start: .25rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--simm-muted);
	font-size: .8rem;
}

.woocommerce-checkout form .form-row .woocommerce-input-wrapper .description::before,
.woocommerce-checkout form .form-row .woocommerce-input-wrapper .description::after { display: none; }

/* Business invoicing stays out of the way until it is asked for. Hidden with
   `hidden` on the row rather than display:none in CSS alone, so the fields are
   genuinely inert — a collapsed-but-focusable field is a keyboard trap. */
.woocommerce-checkout .simm-checkout__business[hidden] { display: none; }

/* WooCommerce renders a checkbox field as an inline <label>, and
   `min-block-size` does nothing to an inline box — the rule applied and the
   row stayed 27px tall. The selector carries enough specificity to change the
   display type, which is what makes the height take effect.
   `woocommerce-form__label-for-checkbox` covers the "create an account" row,
   which only exists for a logged-out visitor and was therefore invisible to
   every check run while signed in. */
.woocommerce-checkout form .form-row.simm-checkout__toggle label.checkbox,
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .simm-checkout__toggle label,
.woocommerce-checkout .simm-checkout__consent label {
	display: flex;
	align-items: center;
	gap: .5rem;
	/* The tick is drawn at 22px; the row it sits in is the actual target. */
	min-block-size: var(--simm-tap);
	padding-block: .4rem;
	font-weight: 500;
	line-height: 1.45;
	cursor: pointer;
}

.woocommerce-checkout .simm-checkout__consent label { align-items: flex-start; }

.woocommerce-checkout form .form-row input[type="checkbox"],
.woocommerce-checkout .simm-checkout__toggle input[type="checkbox"],
.woocommerce-checkout .simm-checkout__consent input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 22px;
	block-size: 22px;
	margin-block-start: .1rem;
	accent-color: var(--simm-blue-500);
}

/* The tick is 22px drawn; the target around it is 44px. */
.woocommerce-checkout .simm-checkout__consent label { position: relative; padding-block: .6rem; }

/* select2 keeps the real <select> in the DOM, 1px wide and focusable, as its
   accessibility bridge. It is not a control the customer aims at. */
.woocommerce-checkout select.select2-hidden-accessible { position: absolute; }

/* The §22 notice: the last thing read before paying. */
.simm-checkout__notice {
	margin-block: 1rem;
	padding: .8rem .95rem;
	border-inline-start: 3px solid var(--simm-blue-500);
	border-radius: var(--simm-r-sm);
	background: var(--simm-blue-50);
}

.simm-checkout__notice p { margin: 0; font-size: .9rem; color: var(--simm-ink); }

.simm-checkout__consent {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-block: 1rem;
}

.simm-checkout__consent a { color: var(--simm-blue-500); }

/* Order summary */
.woocommerce-checkout .shop_table {
	inline-size: 100%;
	border-collapse: collapse;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	overflow: hidden;
}

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	padding: .7rem .8rem;
	border-block-end: 1px solid var(--simm-line-soft);
	text-align: start;
	font-size: .92rem;
}

.woocommerce-checkout .shop_table .order-total td,
.woocommerce-checkout .shop_table .order-total th {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--simm-ink);
	border-block-end: 0;
}

.woocommerce-checkout .shop_table dl.variation {
	margin: .3rem 0 0;
	font-size: .82rem;
	color: var(--simm-muted);
}

.woocommerce-checkout .shop_table dl.variation dt,
.woocommerce-checkout .shop_table dl.variation dd {
	display: inline;
	margin: 0;
}

.woocommerce-checkout .shop_table dl.variation dd::after { content: ""; display: block; }

/* The one button that matters. */
.woocommerce-checkout #place_order {
	inline-size: 100%;
	min-block-size: 52px;
	margin-block-start: .5rem;
	border: 0;
	border-radius: var(--simm-r-sm);
	background: var(--simm-blue-500);
	color: #fff;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover { background: #0043d1; }
.woocommerce-checkout #place_order:focus-visible { outline: 3px solid rgba(0, 80, 248, .35); outline-offset: 2px; }
.woocommerce-checkout #place_order[disabled] { opacity: .55; cursor: default; }

/* Coupon */
.woocommerce-checkout .checkout_coupon .form-row { margin-block-end: .6rem; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { font-size: .9rem; }

/* --- The page as a whole -------------------------------------------------- */

/* WooCommerce's shortcode output inherits whatever width the theme's content
   area gives it, which on this theme is the full canvas — the form sat in a
   narrow column with a screen of empty white beside it. */
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .simm-checkout__title,
.woocommerce-cart .simm-checkout__title {
	inline-size: min(100%, 1120px);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* --- Cards ---------------------------------------------------------------- */

/* The three regions of a checkout — who you are, what you are buying, and what
   you are agreeing to — read as surfaces rather than one long scroll. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
	box-shadow: var(--simm-sh-xs);
}

.woocommerce-checkout #customer_details { margin-block-end: 1rem; }

.woocommerce-checkout #customer_details h3 {
	margin-block: 0 .9rem;
	padding-block-end: .6rem;
	border-block-end: 1px solid var(--simm-line-soft);
	font-size: 1.05rem;
	font-weight: 700;
}

/* The summary heading is the top of the summary card, not a floating title. */
.woocommerce-checkout #order_review_heading {
	margin-block: 0;
	padding: 1.1rem 1.15rem .7rem;
	border: 1px solid var(--simm-line);
	border-block-end: 0;
	border-radius: var(--simm-r) var(--simm-r) 0 0;
	background: var(--simm-surface);
	font-size: 1.05rem;
	font-weight: 700;
}

.woocommerce-checkout #order_review_heading + #order_review {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-block-start: 0;
}

/* The order table already sits inside the summary card. */
.woocommerce-checkout #order_review .shop_table { border: 0; }
.woocommerce-checkout #order_review .shop_table th:first-child,
.woocommerce-checkout #order_review .shop_table td:first-child { padding-inline-start: 0; }
.woocommerce-checkout #order_review .shop_table th:last-child,
.woocommerce-checkout #order_review .shop_table td:last-child { padding-inline-end: 0; }

/* The confirmations and the button are inside the summary card, so what you
   are agreeing to and what you are paying are one block. */
.woocommerce-checkout #order_review .simm-checkout__consent {
	margin-inline: -1.15rem;
	margin-block: 1rem 0;
	padding: .8rem 1.15rem;
	border-block-start: 1px solid var(--simm-line-soft);
	background: var(--simm-canvas, #f5f8fd);
}

/* --- The login and coupon prompts ---------------------------------------- */

/* WooCommerce's stock info boxes: a grey slab with a blue top rule. They are
   the first two things above the form, so they carry the page's first
   impression. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin-block-end: .6rem;
	padding: .7rem .9rem;
	border: 1px solid var(--simm-line);
	border-block-start-width: 1px;
	border-radius: var(--simm-r-sm);
	background: var(--simm-surface);
	color: var(--simm-body);
	font-size: .9rem;
}

.woocommerce-checkout .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-info a { color: var(--simm-blue-500); font-weight: 600; }

/* The "added to your order" confirmation. */
.woocommerce-checkout .woocommerce-message {
	padding: .8rem .9rem;
	border: 1px solid #bfe3cd;
	border-radius: var(--simm-r-sm);
	background: #f0faf4;
	color: #14532d;
	font-size: .92rem;
}

.woocommerce-checkout .woocommerce-message::before { display: none; }

/* --- Payment availability ------------------------------------------------- */

.woocommerce-checkout #payment { background: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { margin: 0; padding: 0; border: 0; }

.woocommerce-checkout #payment .woocommerce-notice,
.woocommerce-checkout #payment .woocommerce-info {
	margin-block: .6rem;
	padding: .8rem .9rem;
	border-radius: var(--simm-r-sm);
	background: var(--simm-blue-50);
	color: var(--simm-ink);
	font-size: .88rem;
}

/* --- Desktop: details beside a sticky summary ----------------------------- */

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
		grid-template-areas:
			"details summary-head"
			"details summary"
			"details filler";
		align-content: start;
		column-gap: 1.75rem;
	}

	/* `start`, not the grid's default stretch: the details card was growing to
	   match the summary column and trailing a screen of empty white. */
	.woocommerce-checkout form.checkout > #customer_details {
		grid-area: details;
		align-self: start;
		margin-block-end: 0;
	}
	.woocommerce-checkout form.checkout > h3#order_review_heading { grid-area: summary-head; }
	.woocommerce-checkout form.checkout > #order_review { grid-area: summary; }

	/* The summary follows the customer down a long form, so the total and the
	   button they are working toward stay in view. */
	.woocommerce-checkout form.checkout > h3#order_review_heading {
		position: sticky;
		inset-block-start: 0;
		z-index: 2;
	}

	.woocommerce-checkout form.checkout > #order_review {
		position: sticky;
		/* Below the sticky heading, whose height is its padding plus one line. */
		inset-block-start: 3.4rem;
	}
}

/* The cart and the checkout are WooCommerce shortcode pages: they render no
   heading of their own, and the page template hides the post title, which left
   them as the only two pages on the site without an <h1>. */
.simm-checkout__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 800;
	color: var(--simm-ink);
}

/* Cart controls: WooCommerce ships them well under the tap minimum. */
.woocommerce-cart .quantity input.qty,
.woocommerce-cart .actions .button,
.woocommerce-cart .coupon .button,
.woocommerce-cart td.product-remove a.remove {
	min-block-size: var(--simm-tap);
	min-inline-size: var(--simm-tap);
}

.woocommerce-cart td.product-remove a.remove {
	display: inline-grid;
	place-items: center;
	line-height: 1;
}

/* =========================================================================
   50. Package usage on the eSIM card
   Read from the stored snapshot, so it renders instantly and says how old it
   is rather than pretending to be live.
   ========================================================================= */

.simm-usage { margin-block-start: 1rem; }

.simm-usage__pkg {
	padding: .85rem .95rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
}

.simm-usage__pkg + .simm-usage__pkg { margin-block-start: .6rem; }
.simm-usage__name { margin: 0 0 .6rem; font-weight: 700; color: var(--simm-ink); }

.simm-usage__bar {
	block-size: 8px;
	margin-block-end: .7rem;
	border-radius: 999px;
	background: var(--simm-line-soft);
	overflow: hidden;
}

.simm-usage__bar > span {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--simm-blue-500);
}

.simm-usage__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: .5rem .7rem;
	margin: 0;
}

.simm-usage__figures > div { margin: 0; }
.simm-usage__figures dt { margin: 0 0 .1rem; font-size: .75rem; color: var(--simm-muted); }
.simm-usage__figures dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--simm-ink); }
.simm-usage__figures dd small { display: block; font-size: .72rem; font-weight: 500; color: var(--simm-muted); }
.simm-usage__figures .is-strong dd { color: var(--simm-blue-500); }

.simm-usage__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: .6rem 0 0;
	font-size: .78rem;
	color: var(--simm-muted);
}

/* Said plainly rather than hidden: figures this old should be read as an
   estimate, and the card is the only place that can say so. */
.simm-usage__stale {
	padding: .1rem .45rem;
	border-radius: 999px;
	background: #fdf3d8;
	color: #7a5b00;
	font-weight: 600;
}

/* --- Refresh control on the usage card ----------------------------------- */

.simm-usage__refresh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-block-start: .7rem;
}

.simm-usage__refresh form { margin: 0; }

.simm-usage__button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-block-size: var(--simm-tap);
	padding-inline: .9rem;
	font-size: .85rem;
}

.simm-usage__button svg { inline-size: 15px; block-size: 15px; }

.simm-usage__button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.simm-usage__button[aria-busy="true"] svg { animation: simm-spin 900ms linear infinite; }

@keyframes simm-spin { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
	.simm-usage__button[aria-busy="true"] svg { animation: none; }
}

.simm-usage__notice {
	margin: 0;
	padding: .35rem .6rem;
	border-radius: var(--simm-r-sm);
	font-size: .82rem;
}

.simm-usage__notice.is-success { background: #f0faf4; color: #14532d; }
.simm-usage__notice.is-info    { background: var(--simm-blue-50); color: var(--simm-ink); }
.simm-usage__notice.is-error   { background: #fdf0ef; color: #8a1c16; }

/* =========================================================================
   51. The account area
   WooCommerce renders the navigation and the content as two siblings with no
   common parent, which on this theme produced a full-width menu panel and the
   eSIM cards stranded in a narrow strip below it. AccountLayout wraps both in
   `.simm-account`; everything here lays that wrapper out.
   ========================================================================= */

/* WooCommerce's own wrapper is a grid with a narrow content column, so the
   account shell inside it measured 848px of a 1440px screen however wide we
   asked it to be. On the account page it becomes an ordinary block, which is
   all it needs to be — the shell below does the layout. */
body.simm-account-page .woocommerce {
	display: block;
	max-inline-size: none;
	padding-inline: 0;
}

.simm-account {
	inline-size: min(100%, 1240px);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* --- Mobile: a disclosure, closed by default ------------------------------ */

.simm-account__toggle {
	display: flex;
	align-items: center;
	gap: .55rem;
	inline-size: 100%;
	min-block-size: var(--simm-tap);
	margin-block-end: .75rem;
	padding: .55rem .85rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
	color: var(--simm-ink);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.simm-account__toggle svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

/* The section you are on, so a closed menu still says where you are. */
.simm-account__toggle-current {
	margin-inline-start: auto;
	color: var(--simm-muted);
	font-weight: 500;
	font-size: .85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.simm-account__chevron { transition: transform .18s ease; margin-inline-start: .1rem; }
.simm-account__toggle[aria-expanded="true"] .simm-account__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.simm-account__chevron { transition: none; }
}

/* --- The navigation itself ------------------------------------------------ */

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No decorative bullets, no oversized panel. */
.woocommerce-MyAccount-navigation li::before,
.woocommerce-MyAccount-navigation li::marker { content: none; }

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-block-size: 46px;
	padding: .4rem .8rem;
	border-radius: var(--simm-r-sm);
	color: var(--simm-body);
	font-size: .93rem;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--simm-blue-50);
	color: var(--simm-ink);
	outline: none;
}

.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--simm-esims.is-active > a {
	background: var(--simm-blue-500);
	color: #fff;
	font-weight: 700;
}

@media (max-width: 1023px) {
	/* Collapsed until asked for, so the eSIM cards are the first thing on the
	   screen instead of the last. `hidden` rather than a class, so the links
	   are genuinely out of the tab order while closed. */
	.woocommerce-MyAccount-navigation[hidden] { display: none; }

	.woocommerce-MyAccount-navigation {
		margin-block-end: 1rem;
		padding: .35rem;
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r);
		background: var(--simm-surface);
	}
}

/* --- Desktop: compact sidebar beside a wide content column ---------------- */

@media (min-width: 1024px) {
	.simm-account {
		display: grid;
		/* The sidebar is a fixed lane; `minmax(0, 1fr)` on the content is what
		   stops a long English package name from widening the column and
		   pushing the card out of the card. */
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	.simm-account__toggle { display: none; }

	.woocommerce-MyAccount-navigation {
		grid-column: 1;
		margin: 0;
		padding: .35rem;
		border: 1px solid var(--simm-line);
		border-radius: var(--simm-r);
		background: var(--simm-surface);
		position: sticky;
		/* Clears the header without ever covering it: the header is static on
		   this theme, so it has already scrolled away by the time this sticks. */
		inset-block-start: 1rem;
	}

	/* `hidden` is a mobile concern; the sidebar is always visible here. */
	.woocommerce-MyAccount-navigation[hidden] { display: block; }

	.woocommerce-MyAccount-content {
		grid-column: 2;
		min-inline-size: 0;
		margin: 0;
		inline-size: auto;
		float: none;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.simm-account { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; }
}

/* WooCommerce floats these at some widths; the grid owns the layout now. */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { float: none; inline-size: auto; }

/* --- eSIM cards fill their column ---------------------------------------- */

.simm-esims { display: grid; gap: 1rem; }
.simm-esim { min-inline-size: 0; }

/* A long English package name must wrap, not widen the card. */
.simm-esim__title,
.simm-usage__name {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

/* --- Installed state ------------------------------------------------------ */

.simm-esim__installed {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .7rem .9rem;
	border-radius: var(--simm-r);
	background: #f0faf4;
	color: #14532d;
}

.simm-esim__installed svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.simm-esim__installed strong { display: block; font-size: .98rem; }
.simm-esim__installed small { display: block; font-size: .8rem; opacity: .85; }

.simm-esim__body.is-installed { display: block; }

/* --- Platform actions for an eSIM that is not installed yet --------------- */

.simm-esim__platforms {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-block: .7rem;
}

.simm-esim__platform {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-block-size: var(--simm-tap);
	padding-inline: .6rem;
	border: 1px solid var(--simm-blue-500);
	border-radius: var(--simm-r-sm);
	background: var(--simm-surface);
	color: var(--simm-blue-500);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.simm-esim__platform svg { inline-size: 17px; block-size: 17px; flex: 0 0 auto; }

/* The QR is a fixed-size image in a fluid column; it shrinks rather than
   pushing the card open. */
.simm-esim__qr { min-inline-size: 0; margin-inline: 0; }
.simm-esim__qr img { inline-size: min(100%, 245px); block-size: auto; }

.simm-esim__platform:hover,
.simm-esim__platform:focus-visible {
	background: var(--simm-blue-500);
	color: #fff;
	outline: none;
}

/* A secondary route, not a third button competing with the two above. */
.simm-esim__manual > summary {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--simm-tap);
	color: var(--simm-blue-500);
	font-size: .88rem;
	cursor: pointer;
}

/* The QR beside the instructions, but only once the content column is genuinely
   wide enough for both. At 1024 the sidebar leaves ~410px, and splitting that
   pushed the two platform buttons out through the side of the card — measured,
   not guessed. Below this the panel stacks, which is never wrong, only taller. */
@media (min-width: 1200px) {
	.simm-esim__body:not(.is-installed) {
		display: grid;
		grid-template-columns: minmax(0, 245px) minmax(0, 1fr);
		gap: 1.5rem;
		align-items: start;
	}

	.simm-esim__body:not(.is-installed) .simm-esim__qr { margin: 0; }
	.simm-esim__install { min-inline-size: 0; }
	.simm-esim__platforms { max-inline-size: 380px; }
}

/* --- The installed card's internal layout -------------------------------- */

/* Mobile stacks; desktop puts the allowance beside its context, so the card
   stops being a column of one-fact rows. */
.simm-esim__grid { display: grid; gap: .9rem; }
.simm-esim__main { min-inline-size: 0; }
.simm-esim__aside { display: flex; flex-direction: column; gap: .7rem; min-inline-size: 0; }

@media (min-width: 1024px) {
	.simm-esim__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 1.25rem;
		align-items: start;
	}
}

.simm-esim__meta { display: grid; gap: .45rem; margin: 0; }
.simm-esim__meta > div { margin: 0; }
.simm-esim__meta dt { margin: 0; font-size: .74rem; color: var(--simm-muted); }
.simm-esim__meta dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--simm-ink); }

/* Actions: distinct verbs, never competing for the same meaning. */
.simm-esim__actions { display: flex; flex-wrap: wrap; gap: .45rem; }

.simm-esim__action {
	flex: 1 1 auto;
	min-block-size: var(--simm-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: .8rem;
	font-size: .88rem;
	text-align: center;
}

.simm-esim__actions .simm-usage__refresh { margin: 0; flex: 1 1 auto; }
.simm-esim__actions .simm-usage__button { inline-size: 100%; justify-content: center; }

@media (min-width: 1024px) {
	.simm-esim__actions { flex-direction: column; }
	.simm-esim__action, .simm-esim__actions .simm-usage__refresh { flex: 0 0 auto; inline-size: 100%; }
}

/* The usage block is the main column's whole job, so it loses its own frame. */
.simm-esim__main .simm-usage { margin-block-start: 0; }

/* --- Top-up ---------------------------------------------------------------- */

.simm-topup {
	margin-block-start: .9rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	background: var(--simm-surface);
}

.simm-topup > summary {
	display: flex;
	align-items: center;
	min-block-size: var(--simm-tap);
	padding-inline: .9rem;
	color: var(--simm-blue-500);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

.simm-topup__lead { margin: 0 .9rem .5rem; font-size: .85rem; color: var(--simm-muted); }
.simm-topup__list { margin: 0; padding: 0 .9rem; list-style: none; }

.simm-topup__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding-block: .5rem;
	border-block-start: 1px solid var(--simm-line-soft);
}

.simm-topup__facts { display: flex; flex-direction: column; min-inline-size: 0; }
.simm-topup__name { font-size: .9rem; font-weight: 600; color: var(--simm-ink); overflow-wrap: break-word; }
.simm-topup__meta { font-size: .78rem; color: var(--simm-muted); }

.simm-topup__price {
	margin-inline-start: auto;
	font-weight: 700;
	color: var(--simm-ink);
	white-space: nowrap;
}

.simm-topup__more { margin: .5rem .9rem 0; font-size: .8rem; color: var(--simm-muted); }

/* --------------------------------------------------------------------------
   Top-Ups and additional packages — the purchase history nested inside the
   eSIM's own card.

   One physical eSIM is one accordion block however many packages were loaded
   onto it, so this list lives inside that block rather than beside it. It is
   history: the allowance figures above it come from the provider and remain the
   only place a customer reads "how much is left".

   Logical properties throughout (`border-inline-start`, `margin-inline`), so
   the block reads correctly in Hebrew and in a left-to-right locale without a
   second rule set.
   -------------------------------------------------------------------------- */
.simm-esim__topup-history {
	margin-block-start: 1rem;
	padding-block-start: .9rem;
	border-block-start: 1px solid var(--simm-line-soft);
}

.simm-esim__subhead {
	margin: 0 0 .25rem;
	font-size: .92rem;
	font-weight: 700;
	color: var(--simm-ink);
}

.simm-topup__history-list {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.simm-topup__history-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .8rem;
	padding-block: .5rem;
	padding-inline-start: .7rem;
	border-block-start: 1px solid var(--simm-line-soft);
	border-inline-start: 3px solid var(--simm-line-soft);
}

.simm-topup__history-item:first-child { border-block-start: 0; }

.simm-topup__history-item .simm-topup__name { flex: 1 1 auto; }
.simm-topup__history-item .simm-topup__meta { flex: 1 1 100%; }

/* A refunded package stays in the history — the customer did buy it — but it
   must never read as live allowance. Dimmed and struck, not hidden. */
.simm-topup__history-item.is-refunded { opacity: .62; }

.simm-topup__history-item.is-refunded .simm-topup__name {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Said once, plainly, where the buy button would be — rather than a disabled
   button that looks like it might work on the next tap. */
.simm-topup__blocked {
	margin: .7rem 0 0;
	padding: .6rem .9rem;
	border-block-start: 1px solid var(--simm-line-soft);
	background: #fdf8e8;
	color: #7a5b00;
	font-size: .82rem;
	border-end-start-radius: var(--simm-r);
	border-end-end-radius: var(--simm-r);
}

/* Generic advice, collapsed. It is the same on every card, so it should not
   cost a sixth of every card's height to repeat it. */
.simm-esim__notes { margin-block-start: .6rem; border-block-start: 1px solid var(--simm-line-soft); }

.simm-esim__notes > summary {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--simm-tap);
	color: var(--simm-muted);
	font-size: .82rem;
	cursor: pointer;
}

.simm-esim__notes .simm-esim__tips { margin-block: 0 .5rem; }

@media (min-width: 1024px) {
	/* Two actions share a row, the utility sits under them: three full-width
	   buttons stacked were the single tallest thing in the card. */
	.simm-esim__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .4rem;
	}

	.simm-esim__actions .simm-usage__refresh { grid-column: 1 / -1; }
	.simm-esim__action { inline-size: auto; font-size: .84rem; }

	/* The two facts read as one line rather than two stacked pairs. */
	.simm-esim__meta { grid-template-columns: 1fr 1fr; gap: .3rem .8rem; }

	.simm-esim__aside { gap: .55rem; }
	.simm-esim__installed { padding: .55rem .75rem; }

	/* The card's own chrome, trimmed: separators that grouped nothing. */
	.simm-esim { padding: 1rem 1.1rem; }
	.simm-esim__head { padding-block-end: .6rem; }
	.simm-topup { margin-block-start: .6rem; }
}

/* The refresh belongs to the timestamp it refreshes, so it sits on that line
   rather than claiming a row of its own at the bottom of the card. */
.simm-esim__meta-refresh dd {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.simm-esim__meta-refresh .simm-usage__refresh { margin: 0; }

.simm-esim__meta-refresh .simm-usage__button {
	min-block-size: 34px;
	padding-inline: .55rem;
	font-size: .78rem;
	font-weight: 600;
}

/* On a phone the control stays a full 44px target; only the desktop inline
   version is allowed to be smaller, and there it sits beside a label rather
   than being aimed at with a thumb. */
@media (max-width: 1023px) {
	.simm-esim__meta-refresh .simm-usage__button { min-block-size: var(--simm-tap); font-size: .85rem; }
}

/* The top-up disclosure is the primary action, so its summary looks like one. */
.simm-esim__actions .simm-topup { margin: 0; border: 0; background: none; }

.simm-esim__actions .simm-topup > summary {
	justify-content: center;
	padding-inline: .8rem;
	border-radius: var(--simm-r-sm);
	background: var(--simm-blue-500);
	color: #fff;
	font-size: .88rem;
	list-style: none;
}

.simm-esim__actions .simm-topup > summary::-webkit-details-marker { display: none; }
.simm-esim__actions .simm-topup[open] > summary { margin-block-end: .5rem; }

/* Open, the list needs the card's width, not the aside's column. */
@media (min-width: 1024px) {
	.simm-esim__actions .simm-topup[open] {
		position: relative;
		z-index: 1;
	}

	.simm-esim__actions .simm-topup[open] .simm-topup__list,
	.simm-esim__actions .simm-topup[open] .simm-topup__lead,
	.simm-esim__actions .simm-topup[open] .simm-topup__more,
	.simm-esim__actions .simm-topup[open] .simm-topup__blocked {
		padding-inline: 0;
		margin-inline: 0;
	}
}

@media (min-width: 1024px) {
	/* The notes disclosure shares the footer's line instead of owning a band
	   of its own: it is one collapsed word, not a section. */
	.simm-esim__notes {
		margin-block-start: .4rem;
		border-block-start: 0;
	}

	.simm-esim__notes > summary { min-block-size: 28px; }
	.simm-esim__foot { padding-block-start: .5rem; }
	.simm-esim__head { padding-block-end: .5rem; }
	.simm-usage__pkg { padding: .7rem .85rem; }
}

/* The theme draws the account-menu bullet on the *link*, not the list item, so
   `list-style` and `li::before` both reported "none" while a dot kept
   rendering. Removed where it actually lives. */
body.simm-account-page .woocommerce-MyAccount-navigation ul li a::before,
body.simm-account-page .woocommerce-MyAccount-navigation li a::before {
	content: none;
	display: none;
}

/* Top-up is not on offer. Said once, quietly, where the action would be —
   not as a disabled button that invites another tap. */
.simm-esim__unavailable {
	margin: 0;
	padding: .5rem .7rem;
	border-radius: var(--simm-r-sm);
	background: var(--simm-line-soft);
	color: var(--simm-muted);
	font-size: .82rem;
}

/* An eSIM attached to an order by an administrator rather than sold through
   it. Said quietly, because it explains why the order and the package differ
   without making the customer's own eSIM look provisional. */
.simm-esim__imported {
	margin: .25rem 0 0;
	font-size: .74rem;
	color: var(--simm-muted);
}

/* A field note WooCommerce does not manage, so it cannot be slid away on blur
   the way its own `description` tooltips are. */
.woocommerce-checkout .simm-field-note {
	display: block;
	margin-block-start: .25rem;
	font-size: .8rem;
	color: var(--simm-muted);
}

/* ---------------------------------------------------------------------------
   Payment return pages
   --------------------------------------------------------------------------- */

.simm-payment-return {
	display: flex;
	justify-content: center;
	padding: clamp( 2rem, 8vw, 5rem ) 1rem;
}

.simm-payment-return__card {
	width: 100%;
	max-width: 34rem;
	padding: clamp( 1.5rem, 5vw, 2.5rem );
	text-align: center;
	background: #fff;
	border: 1px solid var(--simm-border, #e5e7eb);
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 0 0 0 / 6% );
}

.simm-payment-return__title {
	margin: 0 0 .75rem;
	font-size: clamp( 1.4rem, 4vw, 1.9rem );
	line-height: 1.25;
}

.simm-payment-return__body {
	margin: 0 0 1rem;
	color: var(--simm-muted, #555);
	line-height: 1.6;
}

.simm-payment-return__meta {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	color: var(--simm-muted, #555);
}

.simm-payment-return__actions {
	margin: 0;
}

/* A quiet pulse while the notification is still in flight, so the page reads
   as "working" rather than as a final answer that happens to be vague. */
.simm-payment-return--checking .simm-payment-return__title::after {
	content: '';
	display: inline-block;
	inline-size: .5em;
	block-size: .5em;
	margin-inline-start: .4em;
	vertical-align: middle;
	background: currentColor;
	border-radius: 50%;
	animation: simm-payment-pulse 1.2s ease-in-out infinite;
}

@keyframes simm-payment-pulse {
	0%, 100% { opacity: .2; }
	50%      { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.simm-payment-return--checking .simm-payment-return__title::after {
		animation: none;
		opacity: .5;
	}
}

/* ---------------------------------------------------------------------------
   Payment host page
   --------------------------------------------------------------------------- */

.simm-pay {
	display: flex;
	justify-content: center;
	padding: clamp( 1.5rem, 6vw, 4rem ) 1rem;
}

.simm-pay__panel {
	width: 100%;
	max-width: 34rem;
	padding: clamp( 1.25rem, 5vw, 2rem );
	text-align: center;
	background: #fff;
	border: 1px solid var(--simm-border, #e5e7eb);
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 0 0 0 / 6% );
}

.simm-pay__title {
	margin: 0 0 .5rem;
	font-size: clamp( 1.35rem, 4vw, 1.8rem );
}

.simm-pay__summary {
	margin: 0 0 .75rem;
	font-weight: 600;
}

.simm-pay__note,
.simm-pay__back {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--simm-muted, #555);
	line-height: 1.6;
}

.simm-pay__actions {
	margin: 0 0 .75rem;
}

/* The escape hatch. Quiet by default, prominent once the frame has misbehaved,
   because at that point it is the only thing that still works. */
.simm-pay__fallback {
	margin: 0 0 1rem;
	font-size: .9rem;
}

.simm-pay--degraded .simm-pay__fallback-link {
	display: inline-block;
	min-block-size: 44px;
	padding: .7rem 1.25rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: .6rem;
}

.simm-pay__alert {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	font-size: .9rem;
	line-height: 1.5;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: .6rem;
}

/* ---------------------------------------------------------------------------
   Payment dialog
   --------------------------------------------------------------------------- */

body.simm-paydlg-open {
	overflow: hidden;
}

.simm-paydlg {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.simm-paydlg__backdrop {
	position: absolute;
	inset: 0;
	background: rgb( 15 23 42 / 55% );
}

.simm-paydlg__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 32rem, calc( 100vw - 2rem ) );
	/* A definite height, not a content-driven one. The frame is cross-origin,
	   so it contributes no intrinsic height and the panel would collapse to
	   the min-height — measured at 531px on a 900px screen, which cut the card
	   fields off below the fold. */
	block-size: min( 46rem, calc( 100vh - 3rem ) );
	max-block-size: calc( 100vh - 3rem );
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 20px 45px rgb( 0 0 0 / 25% );
	overflow: hidden;
}

.simm-paydlg__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	border-block-end: 1px solid var(--simm-border, #e5e7eb);
}

.simm-paydlg__title {
	margin: 0;
	font-size: 1.05rem;
}

.simm-paydlg__close {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	font-size: 1.6rem;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	border-radius: .5rem;
	cursor: pointer;
}

.simm-paydlg__close:hover,
.simm-paydlg__close:focus-visible {
	background: #f1f5f9;
}

.simm-paydlg__body {
	position: relative;
	flex: 1 1 auto;
	min-block-size: 0;
	display: flex;
}

.simm-paydlg__frame {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	border: 0;
	background: #fff;
}

.simm-paydlg__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	color: var(--simm-muted, #555);
	background: #fff;
}

.simm-paydlg__loading--failed {
	color: #9a3412;
}

.simm-paydlg__foot {
	padding: .75rem 1rem;
	font-size: .875rem;
	text-align: center;
	border-block-start: 1px solid var(--simm-border, #e5e7eb);
}

/* Until the frame reports a load, its own footer link is the visible way out;
   once it fails, that link becomes the point of the dialog. */
.simm-paydlg--failed .simm-paydlg__fallback {
	display: inline-block;
	min-block-size: 44px;
	padding: .7rem 1.25rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: .6rem;
}

/* Full-screen sheet on a phone, sized to the visual viewport so the software
   keyboard cannot hide the card fields or the close button. */
@media ( max-width: 640px ) {
	.simm-paydlg {
		align-items: flex-start;
		block-size: var( --simm-paydlg-h, 100vh );
		inset-block-start: var( --simm-paydlg-top, 0 );
		inset-block-end: auto;
	}

	.simm-paydlg__panel {
		inline-size: 100vw;
		block-size: var( --simm-paydlg-h, 100vh );
		max-block-size: none;
		border-radius: 0;
		padding-block-end: env( safe-area-inset-bottom, 0 );
	}

	.simm-paydlg__frame {
		min-block-size: 0;
	}
}

/* ---------------------------------------------------------------------------
   Checkout: the order-details panel
   ---------------------------------------------------------------------------
   WooCommerce ships `.woocommerce table.shop_table` (0,2,1) and
   `.woocommerce-checkout #payment` (an ID), both of which outrank the plainer
   selectors used above — which is why the summary kept rendering as a bordered
   default table with a lilac payment box. These match or beat that specificity
   deliberately; the comment is here so the next person does not "simplify" them
   back into being ignored.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	background: transparent;
}

/* The column head ("מוצר" / "סכום ביניים") is noise once there is one line and
   the row already says what it is. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table thead {
	display: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td {
	padding: .85rem 0;
	border: 0;
	border-block-end: 1px solid var(--simm-line-soft, #eef1f7);
	background: transparent;
	text-align: start;
	font-size: .95rem;
	vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tbody tr:first-child td {
	border-block-start: 0;
	padding-block-start: 0;
}

/* The line: name on top, the facts under it in the muted voice used on the
   plan cards, price held to the opposite edge. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td.product-name {
	inline-size: 100%;
	font-weight: 600;
	line-height: 1.45;
	color: var(--simm-ink, #001040);
	overflow-wrap: break-word;
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td.product-total {
	inline-size: 1%;
	white-space: nowrap;
	font-weight: 600;
	text-align: end;
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table .product-quantity {
	font-weight: 400;
	color: var(--simm-muted, #5b6478);
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table dl.variation {
	margin: .35rem 0 0;
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--simm-muted, #5b6478);
}

/* Subtotal reads as a running figure; the total is the one that matters. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot td {
	font-size: .95rem;
	font-weight: 500;
	color: var(--simm-muted, #5b6478);
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot td {
	text-align: end;
	white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot .order-total td {
	padding-block-start: .9rem;
	border-block-end: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--simm-ink, #001040);
}

/* --- the payment method block ------------------------------------------- */

.woocommerce-checkout #payment,
.woocommerce-cart #payment {
	margin-block-start: 1.25rem;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: block;
	font-weight: 600;
	color: var(--simm-ink, #001040);
}

/* WooCommerce's lilac callout, replaced with the same quiet surface the
   consent notice uses — and without the little triangle, which pointed at a
   radio button that is not there when only one method exists. */
.woocommerce-checkout #payment div.payment_box {
	margin: .6rem 0 0;
	padding: .85rem 1rem;
	background: var(--simm-blue-50, #f4f7ff);
	border: 1px solid var(--simm-line-soft, #eef1f7);
	border-radius: var(--simm-r-sm, 10px);
	color: var(--simm-muted, #5b6478);
	font-size: .9rem;
	line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after {
	display: none;
}

.woocommerce-checkout #payment div.payment_box p:last-child { margin-block-end: 0; }

/* ---------------------------------------------------------------------------
   Scrollbars
   ---------------------------------------------------------------------------
   The platform default is a wide tray with stepper arrows, which on the payment
   sheet sat right against the card fields and read as chrome from another
   decade. Thin, no arrows, and only as dark as it needs to be to be findable.
   Firefox gets the standard properties; WebKit gets the pseudo-elements.
   --------------------------------------------------------------------------- */

html {
	scrollbar-width: thin;
	scrollbar-color: rgb( 0 16 64 / 25% ) transparent;
}

*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
	background: rgb( 0 16 64 / 22% );
	border: 3px solid transparent;
	border-radius: 999px;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover { background: rgb( 0 16 64 / 38% ); background-clip: padding-box; }

/* The stepper arrows. Removing them is the whole point. */
*::-webkit-scrollbar-button { display: none; }
*::-webkit-scrollbar-corner { background: transparent; }

/* =========================================================================
   52. Direction-scoped corrections
   ---------------------------------------------------------------------------
   Everything in this section exists because a rule elsewhere in this file
   encodes an RTL assumption as if it were a universal one. The site was built
   Hebrew-first and the English routes are a translation layer over the same
   markup, so a `row-reverse` or an `inline-start` that reads correctly in
   Hebrew becomes a pixel mirror in English.

   Two rules for the whole section:

   1. HEBREW MUST NOT MOVE. Nothing here is an unscoped property swap. Where a
      declaration has to differ, the existing rule is scoped to [dir="rtl"] with
      its declarations byte-identical, and an [dir="ltr"] sibling is added
      beside it. Where the existing rule is already correct for both, it is left
      alone entirely.
   2. No per-label widths and no magic numbers. Direction is expressed with
      [dir] selectors and logical properties, never by hardcoding which side a
      thing lands on.
   ========================================================================= */

/* --- 52.1 Suggestion rows: the flag is an element, not a text node -------

   The flag and the destination name used to share one text node, written as
   `flag + ' ' + name`. That is why the flag could not be sized, could not be
   isolated from the surrounding bidi run, and had no emoji font fallback — and
   on English it disappeared entirely, because TranslatePress's DOM observer
   overwrote the whole node and took wp-emoji's <img> substitution with it.

   Both languages get the same structure. The gap is a flex `gap`, so it needs
   no side: it is the same on the start side in Hebrew and in English. */

.simm-search__label {
	display: flex;
	align-items: center;
	gap: .45rem;
	min-inline-size: 0;
}

.simm-search__flag,
.simm-trip__flag {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A fixed box, so every row's name starts on the same axis whether the
	   glyph is a wide flag, a narrow one, or the neutral region badge. */
	inline-size: 1.5em;
	block-size: 1.5em;
	line-height: 1;
	/* A flag is a pair of regional-indicator codepoints. Left in the
	   surrounding run it can be reordered against an RTL name; isolate pins it
	   to its own embedding level. */
	unicode-bidi: isolate;
	/* Named colour-emoji faces first: the body stack is a text-font stack and
	   on a platform without emoji coverage a flag renders as two boxed
	   letters. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
		"Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;
	font-size: 1em;
}

/* wp-emoji swaps the codepoints for an SVG <img> on platforms without a colour
   emoji font. Size it to the box rather than letting it inherit 1em plus the
   theme's image margins. */
.simm-search__flag img.emoji,
.simm-trip__flag img.emoji {
	inline-size: 1.15em;
	block-size: 1.15em;
	margin: 0;
	vertical-align: middle;
}

/* Regions have no flag of their own. A neutral badge rather than an empty box,
   so the column of names stays aligned; SVG rather than 🌍 so it is styleable
   and does not depend on an emoji font being present. */
.simm-search__flag--neutral,
.simm-trip__flag--neutral { color: var(--simm-muted); }

.simm-search__flag--neutral svg,
.simm-trip__flag--neutral svg {
	inline-size: 1.15em;
	block-size: 1.15em;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* `auto`, for the same reason as .simm-destination__name in §21: an explicit
   zero minimum lets the item shrink below its own longest word and forces a
   mid-word break. Wrap at spaces; break inside a word only when there is no
   alternative. */
.simm-search__name {
	min-inline-size: auto;
	overflow-wrap: break-word;
}

.simm-search__price { flex: none; }

/* The trip sheet's rows now carry the same two elements, so the button has to
   be a flex row for the gap to apply. */
.simm-tripsheet__results button {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.simm-tripsheet__results .simm-trip__name {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

/* --- 52.2 Language switcher ---------------------------------------------

   Frontend\Language::switcher() has existed and been correct for some time
   with no caller and no stylesheet. Both land here together: a definition with
   no styling is the same defect as a call site with no definition. */

.simm-langs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	/* Never taller than the header row it sits in, and never a wrap point. */
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.simm-langs__item {
	display: inline-flex;
	align-items: center;
	/* 44px of touch target without 44px of visible chrome: the padding is
	   vertical and the row it sits in supplies the rest. */
	min-block-size: 32px;
	padding-inline: .15rem;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
}

.simm-langs a.simm-langs__item:hover,
.simm-langs a.simm-langs__item:focus-visible {
	color: var(--simm-blue-600, #1447e6);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.simm-langs a.simm-langs__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	text-decoration: none;
}

/* The current language is text, not a dead link. Dimmed rather than bolded, so
   the actionable one is the one that stands out. */
.simm-langs__item.is-current {
	color: inherit;
	opacity: .55;
	cursor: default;
}

.simm-langs__sep {
	opacity: .35;
	user-select: none;
}

/* In the menu it is a list item like any other, minus the two things a menu
   item has that a switcher must not: an underline on hover and the
   active-page pointer. */
.simm-menu-item--langs { display: flex; align-items: center; }

/* Matched to the nav item beside it rather than given a height of its own: the
   items are `padding_vertical_menu_item: 14` around a 14px/1.12 line, and a
   switcher even a pixel taller would stretch every sibling and grow the whole
   sticky header — which is a Hebrew rendering change for an English feature. */
.simm-menu-item--langs .simm-langs {
	padding-inline: 9px;
	padding-block: 14px;
	line-height: 1.12;
}

/* Elementor styles every <a> inside a nav menu, and its 13px block padding and
   20px line-height landed on the switcher's link but not on the current
   language's <span> — so the two halves of "עברית | English" were different
   heights and the taller one stretched the row. Reset to the nav's own metrics
   so both halves and the sibling menu items are one height. */
.simm-menu-item--langs .simm-langs .simm-langs__item {
	min-block-size: 0;
	padding-block: 0;
	line-height: inherit;
}

@media (max-width: 1024px) {
	/* The burger dropdown is a stack of full-width rows; the switcher matches
	   their height and their inset rather than centring in the panel. */
	.simm-menu-item--langs .simm-langs {
		justify-content: flex-start;
		padding-inline: 18px;
		font-size: 15px;
	}
}

/* --- 52.3 Header row direction ------------------------------------------

   §15 forced `row-reverse` on .simm-row-header unconditionally. That is an
   RTL-only trick — in an RTL document row-reverse is what puts the first DOM
   child (the logo) on the visual LEFT — and applying it to an LTR document
   mirrors the whole header: the logo landed on the far right with ~303px of
   dead white beside it and the cart cluster on the left with ~225px beside it.

   `row` in LTR produces the same READING order Hebrew has today: logo first,
   then the menu, then currency / account / cart. */

[dir="rtl"] .simm-row-header,
[dir="rtl"] .simm-row-header > .e-con-inner {
	--flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
}

[dir="ltr"] .simm-row-header,
[dir="ltr"] .simm-row-header > .e-con-inner {
	--flex-direction: row !important;
	flex-direction: row !important;
}

/* The three columns render as equal thirds — the per-container widths set in
   HeaderTemplate never compiled out of _elementor_data. The English menu's
   natural width (456px, and it cannot compress: §12 pins it to nowrap) is
   wider than a third of any viewport below ~1448px, so it overflowed its
   column and ran over the logo below 1400px.

   Giving the logo and the actions their intrinsic width and handing the
   remainder to the menu fixes both the overlap and the dead white beside the
   logo, with no width anywhere in the rule. Scoped to LTR: the Hebrew header
   keeps its thirds and does not move.

   `space-between` is what holds the logo and the actions apart below the
   breakpoint, where the menu column is display:none and the row would
   otherwise collapse them together on the left. */

[dir="ltr"] .simm-row-header > .e-con-inner {
	justify-content: space-between !important;
}

[dir="ltr"] .simm-row-header > .e-con-inner > .e-con:first-child,
[dir="ltr"] .simm-row-header > .e-con-inner > .e-con:last-child {
	flex: 0 0 auto !important;
	inline-size: auto !important;
	max-inline-size: none !important;
}

[dir="ltr"] .simm-row-header > .e-con-inner > .e-con:nth-child(2) {
	flex: 1 1 auto !important;
	inline-size: auto !important;
	min-inline-size: 0;
}

/* The actions cluster carries its own compiled `row-reverse` from
   HeaderTemplate, which is the same RTL-only assumption one level down: in
   English it put the cart first and the currency last. Targeted structurally —
   the `.simm-header-actions` class those six §15/§16 rules are keyed on is
   never emitted, so it matches nothing and a fix aimed at it would silently do
   nothing. */

[dir="ltr"] .simm-row-header > .e-con-inner > .e-con:last-child,
[dir="ltr"] .simm-row-header > .e-con-inner > .e-con:last-child > .e-con-inner {
	flex-direction: row !important;
	--flex-direction: row !important;
	justify-content: flex-end !important;
}

/* Headroom for longer English labels than the ones shipped today. The menu
   needs ~915px of the 977px available at the 1025px breakpoint; this returns
   another ~36px by tightening the per-item padding — a single rule for every
   item, not a width per label — so the labels can grow before anything
   collides. Below 1025px the burger takes over regardless. */
@media (min-width: 1025px) and (max-width: 1279px) {
	[dir="ltr"] .simm-row-header .elementor-nav-menu--main .elementor-item {
		padding-inline: 6px;
	}
}

/* --- 52.4 Hero bleed -----------------------------------------------------

   WITHDRAWN. This block was an [dir="ltr"] override that restated §16's hero
   bleed with `margin-inline-end` instead of `margin-inline-start`, on the
   stated assumption that §16 was right for Hebrew and wrong only for English.

   It was not. `margin-inline-start` is the INWARD side in both directions, and
   Hebrew was overlapping its own heading by 80px at 1440 and by 320px at 1920 —
   it merely looked acceptable because the overlap fell inside the photo's white
   gradient fade. §16 now carries the correct declarations for both directions
   and there is nothing left for a direction-scoped rule to say.

   The fade direction in §13 is already correct for both — white toward the copy
   column, which is the left in LTR and the right in RTL — so it is not restated
   here either. */

/* --- 52.5 Latin tracking -------------------------------------------------

   "Almost200 countries" and "Supportin Hebrew" are NOT missing spaces. Every
   space is present in the .mo, in the TranslatePress dictionary and in the
   served HTML. The Elementor Global Typography kit sets tracking in ABSOLUTE
   PIXELS (--e-global-typography-primary-letter-spacing: -1px, simmsection
   -1px, simmdisplay -2px), and that one token is inherited unchanged across a
   3.2x font-size range: it is -0.031em on the 32px h1 but -0.080em on the
   12.5px trust-strip heading. At 12.5px/700 the gap between "t" and "i" in
   "Support in" measures 2.09px against 3.09px at normal tracking, which is
   below the point where bold Latin reads as joined.

   Hebrew computes the identical -1px and reads correctly — Hebrew glyphs carry
   larger side bearings and have no lowercase terminals to collide — so the kit
   token is left alone and the override is [dir="ltr"]-scoped and expressed in
   em. -0.02em keeps the intended display-size tightening (-0.64px at 32px,
   close to the current -1px) while returning ~0.9px of word gap at 12.5-16px.

   `font-stretch` is asserted normal as a regression guard, not a fix: nothing
   on the page currently uses a condensed face or a scaleX transform, and this
   keeps it that way. Heebo loads and covers Latin; the stack is not changed. */

/* The override is on the TOKEN, not on a list of selectors.

   Every consumer in the generated CSS reads the variable —
   `.elementor-widget-heading .elementor-heading-title { letter-spacing:
   var(--e-global-typography-primary-letter-spacing) }` and 39 more like it
   across post-228.css and post-449.css alone. Redefining the three tokens
   under [dir="ltr"] reaches all of them at once, in the right unit, and keeps
   working when a widget is added or the page is re-generated. Matching them
   selector by selector does not: those consumers are (0,2,0) and live in files
   Elementor enqueues AFTER this one, so an equally specific rule here loses
   the tie on source order — measured, the first attempt at this changed
   nothing.

   Matched on the kit CLASS PATTERN rather than on `.elementor-kit-6`, so a
   regenerated kit with a different post id does not silently drop the fix. */
[dir="ltr"] body[class*="elementor-kit-"] {
	--e-global-typography-primary-letter-spacing: -0.02em;
	--e-global-typography-simmsection-letter-spacing: -0.02em;
	--e-global-typography-simmdisplay-letter-spacing: -0.02em;
}

/* Backstop for anything that sets tracking without going through a token, and
   the font-stretch guard. */
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4,
[dir="ltr"] h5,
[dir="ltr"] h6,
[dir="ltr"] .elementor-heading-title,
[dir="ltr"] .elementor-icon-box-title,
[dir="ltr"] .elementor-icon-box-description,
[dir="ltr"] .elementor-icon-list-text,
[dir="ltr"] .elementor-button-text,
[dir="ltr"] .elementor-item,
[dir="ltr"] .woocommerce-Price-amount {
	font-stretch: normal;
}

/* --- 52.6 Footer focus indicator ----------------------------------------

   Footer link CONTRAST is not a defect: measured rgba(255,255,255,.82) on
   rgb(0,16,64) = 12.34:1 normal, 18.29:1 hover / current, against a 4.5:1
   threshold — in both languages, in every state. The gap is the focus RING.
   No :focus-visible rule exists for these links, so they fall back to the UA
   `outline: auto`, whose computed colour is rgb(29,29,29) — 1.09:1 on the navy
   panel, against the 3:1 that SC 1.4.11 requires. Chrome happens to paint an
   adaptive white ring, but that is an implementation detail; a browser that
   honours outline-color literally paints a near-invisible dark one.

   Deliberately NOT direction-scoped. A focus ring is not a directional
   concern, and scoping it would leave one language unprotected. It changes
   only the keyboard-focus state, never the static render. */

.simm-row-footer .elementor-nav-menu a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Stated rather than inherited: with no rule, a visited footer link takes
   whatever the browser's default visited colour is. */
.simm-row-footer .elementor-nav-menu a:visited { color: rgba(255, 255, 255, .82); }

.simm-row-footer .elementor-nav-menu a:visited:hover,
.simm-row-footer .elementor-nav-menu a:visited:focus-visible { color: #fff; }

/* =========================================================================
   53. Header chrome, the switcher, and the rules that lost on specificity
   ---------------------------------------------------------------------------
   Everything here repairs a rule that already exists somewhere above and does
   not do what it says. Three kinds of failure, all of them silent:

   1. A rule written for one direction and applied to both (§16's hero bleed,
      already corrected in place; the support band's icon boxes, below).
   2. A rule outranked by a more specific one written earlier, so it never
      applies at all (the footer's mobile stack).
   3. A rule that assumes an element it does not own — Elementor's collapsed
      dropdown, its per-device visibility classes, its container positioning.

   The two standing rules from §52 still hold: Hebrew does not move except
   where a Hebrew defect is being repaired, and direction is expressed with
   [dir] selectors and logical properties, never by hardcoding a side.
   ========================================================================= */

/* --- 53.1 The dropdown that can never be opened ---------------------------

   The header contains TWO nav-menu widgets: the desktop list (`toggle: none`)
   and the burger (`toggle: burger`). Elementor renders a `.elementor-nav-menu
   --dropdown` copy of the list for BOTH of them, but only the burger gets a
   `.elementor-menu-toggle`, and Elementor collapses a dropdown with

       .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container

   — an ADJACENT SIBLING rule. The desktop widget has no toggle, so its
   dropdown has no preceding sibling to match and is never collapsed: measured
   `max-height: 840px`, `transform: none`, `aria-expanded="false"` and no click.

   Above 1024px that costs nothing, because Elementor hides every dropdown
   there. Below it, §24 gives the dropdown `position: absolute` and a viewport
   width, so the orphan renders as a full-width panel hanging under the header.
   It only became visible because the desktop container's per-device visibility
   covers `hidden-mobile` (≤767) and `hidden-tablet` (881–1024) but NOT the
   768–880 band Elementor calls `mobile_extra` — which is why it reproduced at
   768, 769 and 800 and not at 767 or 900. Measured he@768: the panel spanned
   -269.3..498.7 over an h1 at 48..720, on every page in both languages.

   Matched structurally rather than by element id: a dropdown whose previous
   sibling is the horizontal list rather than a toggle is, by construction, one
   nothing can open. */

.elementor-location-header .elementor-nav-menu--main + .elementor-nav-menu--dropdown {
	display: none !important;
}

/* The container that holds that widget has nothing else in it below the
   desktop breakpoint — §16 already hides its list — so it is hidden outright
   rather than left as an empty flex child whose width the row still has to
   share. `:nth-child(2)` is the same structural handle §52.3 uses for the
   three header columns. */
@media (max-width: 1024px) {
	.simm-row-header > .e-con-inner > .e-con:nth-child(2) { display: none !important; }
}

/* --- 53.2 The drawer's positioning context -------------------------------

   §24 positions the burger drawer with `inset-inline: 0` so it spans the
   viewport, and sets `inline-size: 100vw` as well. Three of `left`, `right`
   and `width` is one too many: the box is over-constrained, and CSS resolves
   that by dropping the offset on the END side — which DIRECTION decides. RTL
   honours `right`, LTR honours `left`. Hebrew therefore landed on-screen by
   accident of direction and English did not.

   Both were wrong. Measured at 390 with the panel open: EN 224..614, i.e. 224px
   (57%) past the right edge, every label clipped and the switcher reading
   "Englis…"; HE -14..376, i.e. 14px clipped off the left. At 768 the same
   defect put 269.3px of the Hebrew panel and 190px of the English one outside
   the viewport. `documentElement.scrollWidth` stayed equal to `innerWidth` in
   every case, so the overhang was unreachable rather than scrollable.

   `inline-size: auto` removes the third constraint. With both insets at 0 the
   box resolves to the width of its containing block in either direction, with
   no side named anywhere. */

@media (max-width: 1024px) {
	.elementor-location-header .elementor-nav-menu--dropdown {
		inline-size: auto;
		max-inline-size: none;
	}

	/* …and the containing block has to be the header ROW. §24 makes that row
	   `position: relative` and the nav-menu widget `position: static`, but
	   Elementor gives every container `position: relative`, so the nearest
	   positioned ancestor was the 152px action cluster — which is where the
	   224px offset came from. */
	.simm-row-header > .e-con-inner > .e-con,
	.simm-row-header > .e-con-inner > .e-con > .e-con-inner { position: static; }
}

/* --- 53.3 The action cluster must not be compressed ----------------------

   `HeaderTemplate` gives the cluster a fixed width (270px desktop, 140px
   mobile). Those widths never compiled — the three header columns render as
   equal thirds — and below the desktop breakpoint a third of the viewport is
   less than the controls need: at 320 the cluster is 138px wide and its
   contents measure 152px. The widget wrappers shrink to fit (39.8px, 54.3px,
   39.8px) but the buttons inside them carry `min-inline-size: 44px` from §24
   and §16, so each button overflows its own wrapper by ~4px and the rectangles
   of adjacent controls intersect: account × cart 3.6px and burger × cart 2.2px
   at 320, and account × cart 8.0px and cart × toggle 5.3px at 768.

   Hebrew only, because §52.3 already gives the LTR header intrinsic column
   widths — English measured a clean 2px gap at the same widths. This is that
   same treatment, direction-neutral, and confined to the widths where the
   compression happens: above 1024px the cluster has 225px to spare in both
   languages and the approved Hebrew desktop header is not touched.

   No width is named. The columns are asked for their own size and the row is
   told to hold them apart. */

@media (max-width: 1024px) {
	.simm-row-header > .e-con-inner { justify-content: space-between !important; }

	.simm-row-header > .e-con-inner > .e-con {
		flex: 0 0 auto !important;
		inline-size: auto !important;
		max-inline-size: none !important;
	}

	/* The controls themselves stop shrinking too, so a wrapper can never be
	   narrower than the 44px target it contains. */
	.simm-row-header > .e-con-inner > .e-con:last-child > .e-con-inner > .elementor-widget,
	.simm-row-header > .e-con-inner > .e-con:last-child > .elementor-widget { flex: 0 0 auto; }
}

/* --- 53.4 One switcher, two homes ----------------------------------------

   The switcher existed only inside Elementor's collapsed mobile dropdown, so
   above 1024px — where that dropdown is `display: none` and the burger that
   would open it is `display: none` too — every instance measured 0×0 with a
   null offsetParent. A desktop reader in either language had no way to change
   language at all, and TranslatePress's own floater is deliberately suppressed
   by Language::suppress_trp_floater(), so there was no fallback.

   Language::render_header_switcher() now emits one instance as a sibling of
   the cart widget in the header's action row. The two placements are ONE
   switcher between them: each is visible exactly where the other cannot be,
   so the count is one at every width and never two.

   The 600px boundary is measured, not chosen. Below the desktop breakpoint the
   header carries logo 118 + account 44 + cart 60 + burger 44 = 266px of
   controls plus 22px of gaps and 28px of padding. The switcher renders ~100px
   wide, and the currency indicator §53.8 restores at the same boundary another
   ~60px: 476px of content, which fits from 600px with room to spare and does
   not fit at 480. Below 600px the burger's copy is the switcher, which is
   where a phone expects it and the only place the approved Hebrew mobile
   header has room for it. */

.simm-langs-slot {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

@media (max-width: 599px) {
	.simm-langs-slot { display: none; }
}

@media (min-width: 600px) {
	/* Scoped `!important` for the usual reason: Elementor styles the dropdown's
	   list items at a higher specificity than a single class and loads after
	   this file, so the plain rule computed `display: block` and the drawer
	   kept a second switcher once it was opened at 768. Verified by reading
	   the computed value, not by assuming the selector matched. */
	.elementor-location-header .simm-menu-item--langs { display: none !important; }
}

/* Elementor's sticky effect clones the header into an
   `.elementor-sticky__spacer` placeholder. It is `visibility: hidden`, but it
   is a second copy of every control in the DOM — including a second switcher.
   One switcher is a property of the page, not of the visible layer. */
.elementor-sticky__spacer .simm-langs-slot,
.elementor-sticky__spacer .simm-menu-item--langs { display: none !important; }

/* In the drawer the switcher is a row like any other row. It was 19px tall
   against 48px siblings, because §52.2 sizes it to the DESKTOP menu item's
   metrics (`padding-block: 14px` around a 14px/1.12 line) and the drawer's own
   rows are sized by §24's `min-block-size: 48px` on the anchor — which the
   switcher's `<a>` does not match, being outside `.elementor-item`. */
@media (max-width: 1024px) {
	.simm-menu-item--langs .simm-langs {
		padding-block: 0;
		min-block-size: 48px;
		gap: .5rem;
	}

	.simm-menu-item--langs .simm-langs .simm-langs__item {
		min-block-size: 48px;
		padding-inline: .35rem;
	}
}

/* --- 53.5 Touch targets that depend on how long a word is ----------------

   Three controls fell under 44px in one language and not the other, purely
   because the label is shorter there: the primary-nav "FAQ" at 42.5px against
   a 89.6px Hebrew counterpart, the breadcrumb "Home" at 40.1px against 49.4px,
   and — in the other direction — the Hebrew breadcrumb "יעדים" at 35.4px
   against a 78.1px "Destinations".

   A minimum is the right instrument for exactly this: it binds only on the
   label that is too short, in whichever language that turns out to be, and it
   is one declaration rather than a width per label. Every other item in both
   menus already measures more than 44px, so nothing else moves. */

.elementor-location-header .elementor-nav-menu--main .elementor-item {
	min-inline-size: 44px;
	justify-content: center;
}

.simm-crumbs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* --- 53.6 The footer's mobile stack never applied ------------------------

   §15 stacks the footer columns below 768px with

       .simm-row-footer > .e-con-inner > .e-con { flex: 1 1 100% !important }

   and outranks itself four lines earlier with

       .simm-row-footer > .e-con-inner > .e-con:not(:first-child) { flex: 1 1 22% !important }

   which is (0,4,0) against (0,3,0) — `:not()` takes the specificity of its
   argument. `!important` does not break that tie; specificity decides first.
   So the footer stayed three columns at every width, and at 320 each column is
   77px: "Destinations" needs 84px and rendered 7px outside its own box, over
   the neighbouring column, because the box is `overflow-x: visible`.

   Rather than raise the stack rule — which would restack the Hebrew footer,
   where every label fits — the columns are given a floor of their own narrowest
   unbreakable content. It binds only where a word genuinely does not fit, which
   is the English column at 320 and nowhere else: Hebrew's longest unbreakable
   run in that column measures ~50px against the same 77px. */

.simm-row-footer > .e-con,
.simm-row-footer > .e-con-inner > .e-con { min-inline-size: min-content; }

/* --- 53.7 The support band ------------------------------------------------

   Two defects in one band, one directional and one not.

   DIRECTIONAL. The icon boxes are built with `position: right` and
   `text_align: right`. Both are VISUAL settings standing in for logical ones:
   they name the side Hebrew reads FROM, and Elementor honours them literally,
   so in English the band is right-aligned while every neighbouring column is
   left-aligned, and the icon renders after the text instead of leading it.
   Measured en@1440: heading "Need help?" at 589..672 with the 🎧 icon at
   687..713, i.e. 15px past where the heading ends.

   Elementor compiles its own rules at (0,4,0) and loads them after this file,
   so the scoped `!important` is what carries the override — the same reason
   §11 and §15 use it. Hebrew is not in the selector and does not move. */

/* Elementor stores this control's `right` as the LOGICAL class
   `elementor-position-inline-end` and then flips its own declaration in the RTL
   stylesheet, so Hebrew ends up with the icon leading — correct — and English
   with it trailing. `elementor-position-right` is matched alongside it because
   older Elementor builds emit that instead, and a selector that silently
   matches nothing is the failure mode this file has been bitten by before. */
/* Bounded to the widths where the box IS a row. Below 768px the widget carries
   `elementor-mobile-position-block-start` and stacks the icon above the text in
   both languages, which is correct — an unbounded `!important` here outranked
   that and put the English mobile band back on one line while Hebrew stayed
   stacked. Measured before the bound: he@390 column, en@390 row. */
@media (min-width: 768px) {
	[dir="ltr"] .simm-row-support .elementor-position-inline-end .elementor-icon-box-wrapper,
	[dir="ltr"] .simm-row-support .elementor-position-right .elementor-icon-box-wrapper {
		flex-direction: row !important;
	}
}

[dir="ltr"] .simm-row-support .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-support .elementor-icon-box-content,
[dir="ltr"] .simm-row-support .elementor-icon-box-title,
[dir="ltr"] .simm-row-support .elementor-icon-box-description {
	text-align: start !important;
}

/* NOT DIRECTIONAL. The band's outer container is `width: 100%` of a row it also
   carries 24px of inline margin inside, so its border box measures 48px more
   than the space available to it: 1440px laid out in 1392px at a 1440 viewport,
   1392px in 1344px at 390. The surplus lands entirely on one side — the inline
   START — so the band hangs 24px off one edge and leaves a 24px gutter at the
   other, mirrored between the two languages. In LTR that overhang falls on the
   side the text ENDS on, which is what pushed the right-aligned English copy
   above against a clipped edge.

   `inline-size: auto` lets the box size itself from its containing block minus
   its own margins, which is what `width: 100%` was reaching for. */

.elementor > .e-con,
.elementor-location-footer > .e-con {
	inline-size: auto;
	max-inline-size: 100%;
}

/* --- 53.8 The currency indicator at reflow widths -------------------------

   The ILS control carries Elementor's `hidden-mobile`, so it disappears below
   768px — including at the 720 CSS px a 1440 desktop reports at 200% zoom,
   where the header has ~330px of unused width. A control that exists unzoomed
   should not vanish because the reader enlarged the text.

   Restored from the same measured 600px boundary as the switcher, and no
   lower: below it the header genuinely has no room, and the approved Hebrew
   mobile header does not gain a control. */

@media (min-width: 600px) and (max-width: 767px) {
	/* `elementor-hidden-mobile` is on exactly one widget in this header — the
	   currency button is the only one that asks to be hidden on mobile — so it
	   is a precise handle and not a generated id. */
	.simm-row-header .elementor-widget-button.elementor-hidden-mobile { display: block; }

	/* …with its label. §14 visually hides every header button label below
	   768px, which is right for "My account" beside a person icon but empties
	   this control completely: the label IS the currency. Restoring the button
	   without it would put a bare globe in the header and still not tell a
	   zoomed reader what currency the prices are in. */
	.simm-row-header .elementor-widget-button.elementor-hidden-mobile .elementor-button-text {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
	}

	.simm-row-header .elementor-widget-button.elementor-hidden-mobile .elementor-button-content-wrapper { gap: 6px; }
	.simm-row-header .elementor-widget-button.elementor-hidden-mobile .elementor-button { padding-inline: 10px; }
}

/* --- 54 The icon-box direction rule, for the two rows §52.6 did not cover ---

   `.simm-row-band` (the home trust band) and `.simm-row-compat` (the country
   page's device-compatibility three-up) are authored with the same VISUAL
   `position: right` / `text_align: right` settings the footer help band uses,
   so they carry the same defect §53 recorded: Elementor stores the position as
   `elementor-position-inline-end` and flips that declaration in its RTL
   stylesheet, so Hebrew reads correctly by accident and English does not.

   §52.6 corrected `.simm-row-support` only. Measured on build 3166f017, both of
   these rows still render `flex-direction: row-reverse` under LTR — the icon
   trails its own heading and the copy is right-aligned:

     home    en@1440  "Almost 200 countries"      icon 380-404, title ink 229-368
     country en@1440  "How to check compatibility" icon 489-511, title ink 290-477

   Hebrew at the same widths is `row` with the icon on the leading (right) edge
   and is not touched by anything below — every selector here is `[dir="ltr"]`.

   NOT bounded to >=768px, unlike `.simm-row-support`. That row carries
   `elementor-mobile-position-block-start` and stacks below 768px, so an
   unbounded rule there put the English mobile band back on one line. These two
   rows stay a row at every width — measured he@390 `row`, en@390 `row-reverse`
   — so bounding them would leave the mobile band unmirrored. */

[dir="ltr"] .simm-row-band .elementor-position-inline-end .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-band .elementor-position-right .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-compat .elementor-position-inline-end .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-compat .elementor-position-right .elementor-icon-box-wrapper {
	flex-direction: row !important;
}

[dir="ltr"] .simm-row-band .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-band .elementor-icon-box-content,
[dir="ltr"] .simm-row-band .elementor-icon-box-title,
[dir="ltr"] .simm-row-band .elementor-icon-box-description,
[dir="ltr"] .simm-row-compat .elementor-icon-box-wrapper,
[dir="ltr"] .simm-row-compat .elementor-icon-box-content,
[dir="ltr"] .simm-row-compat .elementor-icon-box-title,
[dir="ltr"] .simm-row-compat .elementor-icon-box-description {
	text-align: start !important;
}

/* --- 54.1 The search sheet's dismiss arrow is a directional glyph ----------

   `.simm-search__close` is an arrow, not an ×: `M5 12h14` plus an arrowhead at
   `m12 5 7 7-7 7`, which points RIGHT. The button is correctly placed on the
   leading edge in both languages — measured he x=333-377 in a 390 viewport,
   en x=13-57 — but the glyph itself is the same markup in both, so in English
   it sits at the left edge still pointing right: it points INTO the field it
   dismisses instead of away from it. In Hebrew right IS the dismiss direction,
   so Hebrew is correct and only LTR needs the flip.

   Mirrored rather than given a second path, so there is one source of truth for
   the shape and the aria-label ("Close search" / "סגירת החיפוש") is untouched. */

[dir="ltr"] .simm-search__close svg { transform: scaleX(-1); }

/* --- 54.2 The RTL half of the icon-box text rule --------------------------

   §52.6 and §54 corrected the LTR half. This is the other half, and it is the
   defect §53 named without finishing: `text_align: right` is a VISUAL setting
   standing in for a logical one. Elementor emits it as the logical `end`, and
   under RTL `end` is LEFT — so in Hebrew the heading and body ran to the far
   edge of their own content box, away from the icon labelling them, while the
   content box itself stayed correctly beside the icon. Measured on 340815e2:

     .simm-row-support  he@1440  "זקוקים לעזרה?"     glyph 1284→1310, title ink 752→848   (436px away)
     .simm-row-band     he@1440  "כמעט 200 מדינות"    glyph 1286→1310, title ink 1036→1135 (151px away)
     .simm-row-compat   he@1440  "איך בודקים תאימות"  glyph 1298→1320, title ink 929→1046  (252px away)
     .simm-row-band     he@1440  "שאלות נפוצות"       glyph 1286→1310, title ink 736→823   (463px away)   /he/support/

   Only the text moves. In every row-layout case the icon glyph's box is
   IDENTICAL before and after — 1284→1310 stays 1284→1310 — because the icon is
   a flex sibling of the content box, not a participant in its text alignment.
   Spacing, dimensions and typography are untouched; the resulting glyph-to-text
   gap is 10-15px, matching the English side.

   Scoped to these three row classes by name, never to `.elementor-icon-box-*`
   globally. Audited across /he/, /he/packages/, /he/esim/france/, /he/faq/,
   /he/support/, /he/cart/ and /he/terms/: 52 elements match, every one of them
   inside these three rows. `.simm-row-values` — the centred five-up on the
   country page — is NOT matched and keeps `text-align: center`. */

/* `.simm-row-support` ONLY at >=768px. Below that it carries
   `elementor-mobile-position-block-start` and stacks the icon ABOVE the text,
   and in a column layout `text-align` on the wrapper positions the icon itself:
   measured, an unbounded rule moved the Hebrew mobile glyph from 46→68 across
   to 322→344. The icon must not move, so the stacked width is left alone.
   `.simm-row-band` and `.simm-row-compat` stay a row at every width — measured
   he@390 `row` — so they are deliberately NOT bounded. */
@media (min-width: 768px) {
	[dir="rtl"] .simm-row-support .elementor-icon-box-wrapper,
	[dir="rtl"] .simm-row-support .elementor-icon-box-content,
	[dir="rtl"] .simm-row-support .elementor-icon-box-title,
	[dir="rtl"] .simm-row-support .elementor-icon-box-description {
		text-align: start !important;
	}
}

[dir="rtl"] .simm-row-band .elementor-icon-box-wrapper,
[dir="rtl"] .simm-row-band .elementor-icon-box-content,
[dir="rtl"] .simm-row-band .elementor-icon-box-title,
[dir="rtl"] .simm-row-band .elementor-icon-box-description,
[dir="rtl"] .simm-row-compat .elementor-icon-box-wrapper,
[dir="rtl"] .simm-row-compat .elementor-icon-box-content,
[dir="rtl"] .simm-row-compat .elementor-icon-box-title,
[dir="rtl"] .simm-row-compat .elementor-icon-box-description {
	text-align: start !important;
}

/* --- 54.3 The cart count badge sat on top of the cart -------------------

   Elementor ships the badge as `position: absolute; inset: -7px -7px 6px 6px;
   width: 16px; height: 16px`. With a 44px control and a 15px glyph the badge
   landed ON the glyph, covering ~9px of its 15px in BOTH languages — measured
   he badge 1146→1162 over icon 1153→1168, en badge 1273→1289 over icon
   1267→1282. It mirrored correctly; it simply overlapped, in both directions.

   Pinned instead to the control's top trailing corner with logical insets, so
   one rule serves both languages and the badge mirrors itself. `inline-size:
   auto` with a `min-inline-size` floor lets a two-digit count grow sideways
   instead of spilling out of a fixed 16px box, which the shipped rule did. */

/* Two things decide the numbers here, and both are easy to get wrong.

   FIRST, the badge's containing block is `.elementor-button-icon` — a 13x13
   box with `position: relative` — NOT the 44px control. Elementor's own
   `inset-inline-end: -0.7em` is therefore measured from the GLYPH's edge, which
   is why the badge lands on the glyph however the button is sized. Any inset
   that clears the glyph has to be expressed relative to that 13px box.

   SECOND, Elementor Pro's rule is
     .elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle
     .elementor-button-icon .elementor-button-icon-qty[data-counter]
   — four classes and an attribute, (0,5,0), against (0,2,0) here. That is why
   the first attempt moved nothing while its `inline-size` took effect:
   Elementor sets the insets and does not set the sizes. Elementor's
   declarations are NOT `!important`, so `!important` here wins outright on
   importance without needing to out-specify it. (Contrast §53's footer tie,
   where BOTH sides were `!important` and specificity decided it.)

   Geometry, measured: the control spans y 11->55, the glyph y 25->40, so the
   glyph's top edge is 14px below the control's top. A 14px-tall badge pulled up
   by exactly 14px occupies y 11->25 — flush to the control's top edge, ending
   exactly where the glyph begins. Vertical overlap is 0, so the horizontal
   offset is then free to keep the badge visually attached rather than pushed
   out into the 2px gap between the header controls. */

.elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	inset-block-start: -14px !important;
	inset-block-end: auto !important;
	inset-inline-end: -6px !important;
	inset-inline-start: auto !important;
	inline-size: auto !important;
	min-inline-size: 14px !important;
	block-size: 14px !important;
	padding-inline: 3px !important;
	border-radius: 7px !important;
	font-size: 9.5px !important;
	line-height: 14px !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

/* --- 54.4 The current-language token failed AA -----------------------------

   §6011 dims the current language with `opacity: .55` so the ACTIONABLE token
   is the one that stands out. The intent is right; the value was not
   measurable at the time and lands under the contrast floor.

   rgb(51,51,51) at .55 over white composites to rgb(143,143,143) — measured,
   and it is exactly the #8E8E8E a pixel reading of the header returns. Against
   white that is 3.23:1, at 13px/600 weight, where WCAG AA wants 4.5:1. It is
   not exempt as "disabled": it is text, and it is the only thing on the page
   telling a reader which language they are currently in.

   .72 composites to rgb(108,108,108) = 5.26:1 and stays visibly dimmer than the
   full-strength link beside it, so the affordance the original rule was after
   survives. Verified in both languages after the change. */

.simm-langs__item.is-current {
	opacity: .72;
}

/* --- 54.6 The plan ribbon centred itself in Hebrew only -------------------

   §233 centres the ribbon on the card's midline with the usual two-part idiom:
     inset-inline-start: 50%;  transform: translateX(50%);
   `inset-inline-start` mirrors with direction. `translateX` NEVER does — it is
   physical, like the `rotate()` in §54.5 and the badge insets in §54.3. So the
   two halves agree in RTL and fight in LTR:

     he  card 1120->1360 (mid 1240), flag w72  -> 1204->1276   centred, inside
     en  card   80-> 320 (mid  200), flag w91  ->  246-> 337   17px PAST the edge

   In RTL `inset-inline-start: 50%` puts the flag's END edge on the midline and
   `translateX(+50%)` walks it back by half its width — centred. In LTR the same
   inset puts its START edge on the midline and the same translate walks it
   FURTHER out, so the whole ribbon sits right of centre and the overflow scales
   with the label: "Cheapest" (91px) and "Most data" (93px) overhang at 1440,
   where the Hebrew "הכי זול" (72px) does not.

   `.simm-plan` is `overflow: visible`, so it really does paint outside the card
   rather than being clipped.

   LTR only — Hebrew is correct and approved. Measured after: en flag 154->246
   inside a card of 80->320. */

[dir="ltr"] .simm-plan__flag {
	transform: translateX(-50%);
}

/* --- 55 Account navigation had no usable focus indicator ------------------

   §675 collapses hover and keyboard focus into one rule and then removes the
   ring:

     .woocommerce-MyAccount-navigation li a:hover,
     .woocommerce-MyAccount-navigation li a:focus-visible {
         background: var(--simm-blue-50); color: var(--simm-ink); outline: none;
     }

   So the only thing marking the focused link is `--simm-blue-50` (#eef3ff)
   against `--simm-surface` (#ffffff). Measured: **1.11:1**, where WCAG 1.4.11
   asks a focus indicator to reach 3:1 against the unfocused state. Keyboard
   users tabbing the account menu effectively cannot see where they are — and
   there are seven links behind the mobile toggle.

   Verified by real Tab traversal, not programmatic focus: at 1440 six of the
   nav's links reported `outline: 3px none` while `:focus-visible` was true.

   Hover is deliberately left exactly as it was — this adds a ring for keyboard
   focus only, so the approved pointer design does not change. `outline-offset`
   is negative so the ring sits inside the 46px row and cannot nudge the layout.

   (`.simm-esim__platform` also sets `outline: none` on focus, but it inverts to
   a solid `--simm-blue-500` background with white text — a clearly visible
   indicator — so it is intentionally left alone.) */

.woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 3px solid var(--simm-blue-500);
	outline-offset: -3px;
	border-radius: var(--simm-r-sm, 6px);
}

/* --- 56 Undersized touch targets in My Account --------------------------

   Measured on build 782e34fb, admin bar excluded, customer view:

     .simm-copy                     58x38 (he) / 56x38 (en)
     .simm-esim__manual > summary   56x28 (he) / 98x28 (en)
     .simm-btn (Refresh data)      103x43 (he) / 117x43 (en)

   All three are wide enough; only the BLOCK axis falls short of 44px.

   The first two are fixed by growing the HIT AREA, not the box. An absolutely
   positioned `::after` inside the control is part of that control for hit
   testing, so the pointer/touch target reaches 44px while the painted button
   keeps its approved height — no card grows, nothing reflows, and the manual-
   install rows keep their density. Growing `min-block-size` instead would have
   added ~6px per copy row and ~16px per disclosure, i.e. roughly 40px to every
   uninstalled card.

   The overlays are sized so they cannot collide: `.simm-copy` rows sit in
   `dd { margin-block-end: .4rem }` = 6.4px apart and each grows 3px per side,
   leaving 0.4px between neighbouring hit areas. Verified at 320-1920 in both
   languages: zero overlapping pairs.

   The refresh button is 1px short, so it simply gets the 44px floor — there is
   nothing to preserve in a single pixel.

   `::after` is used rather than `::before` because `.simm-cfaq__q::after` and
   the summary markers already own `::before` in places; and it is transparent,
   so no focus ring is obscured — the ring is painted on the control's own
   border box, outside this overlay. */

.simm-copy {
	position: relative;
}

.simm-copy::after {
	content: "";
	position: absolute;
	inset-block: -3px;          /* 38 + 3 + 3 = 44 */
	inset-inline: 0;
	/* No background: this exists only to be hit. */
}

.simm-esim__manual > summary {
	position: relative;
}

.simm-esim__manual > summary::after {
	content: "";
	position: absolute;
	inset-block: -8px;          /* 28 + 8 + 8 = 44 */
	inset-inline: 0;
}

/* The disclosure inside an eSIM card is the same control in a second place. */
.simm-esim details > summary {
	position: relative;
}

.simm-esim details > summary::after {
	content: "";
	position: absolute;
	inset-block: -8px;
	inset-inline: 0;
}

/* One pixel short; no density to protect. Scoped to the account cards so no
   other .simm-btn in the catalogue or checkout changes height. */
.simm-esim .simm-btn,
.woocommerce-MyAccount-content .simm-btn {
	min-block-size: 44px;
}

/* --- 57 Status pill: one colour per real state --------------------------

   §818 had two modifiers, `--ready` and `--pending`, because the label came
   from the ORDER state and a delivered eSIM only ever had one thing to say.
   Now the label is derived from the eSIM's own state (§MyEsims::status_label),
   so the pill needs the states that label can actually produce.

   `--ready` keeps its meaning — delivered, not yet installed — and keeps its
   existing green, so nothing about the approved card changes for the state it
   already had. `--active` is the stronger blue of a profile in use; `--expired`
   is neutral grey, deliberately NOT red, because an expired package is an
   ordinary end-of-life, not a fault; `--suspended` and `--problem` are the
   warning and error tones already in the palette. */

.simm-esim__status--active    { background: var(--simm-blue-50); color: var(--simm-blue-600); }
.simm-esim__status--expired   { background: var(--simm-surface-2, #eef1f6); color: var(--simm-muted); }
.simm-esim__status--suspended { background: var(--simm-warn-bg); color: var(--simm-warning); }
.simm-esim__status--problem   { background: var(--simm-danger-bg, #fdecec); color: var(--simm-danger, #c0392b); }

/* The supplier has not told us what state the profile is in.
   Neutral on purpose: it must not read as ready (an invitation to install), as
   active (a claim about the customer's phone) or as expired (a claim the
   package is over). Same grey as expiry, different words. */
.simm-esim__status--unknown   { background: var(--simm-surface-2, #eef1f6); color: var(--simm-muted); }

/* =========================================================================
   58. Country page — the mobile destination card

   The mobile hero used to be text only. The photograph was hidden here and
   rendered again three screens lower, in the country-information block, which
   meant the one thing that says *where you are going* arrived after the whole
   purchase decision. This section puts it back at the top without spending any
   more height on it: `.simm-hero-copy` keeps its place in the flow and the
   photograph moves behind it.

   The rules below deliberately do NOT introduce a second image path. The
   picture is the `<picture>` the `simm-country-photo` widget already renders —
   media-gated at 767px, so a desktop browser resolves the inline transparent
   pixel and issues no request at all — and the desktop hero keeps its container
   background untouched. Everything here is position, scrim and colour.

   Two heroes, told apart by a body class rather than by `:has()`:

     body.simm-has-destination-photo   card over the photograph, white text
     body:not(...)                     the same card as a SIMM surface, ink text

   `:has()` would read the DOM correctly, but its failure mode is white text on
   a white box. `ImageSync::body_class()` decides it in PHP from the same call
   the widget makes, so the two cannot disagree, and the `<body>` tag is outside
   Elementor's cached container markup (docs §19).
   ========================================================================= */

@media (max-width: 767px) {

	/* --- The photograph, lifted out of the flow ------------------------- */

	/* Elementor gives every widget a block of its own; this one is the card's
	   background layer, so it occupies no height and sits under everything.

	   `hero-copy` is a *boxed* container, so its children are inside an
	   `.e-con-inner` wrapper and its padding is on the outer element (docs §3).
	   That is exactly what is wanted here: the wrapper is not positioned, so
	   `inset: 0` resolves against the outer box and the photograph fills the
	   card's padding as well as its content. */
	.simm-hero-copy .simm-hero-photo {
		position: absolute;
		inset: 0;
		z-index: 0;
		margin: 0;
		inline-size: auto;
	}

	.simm-hero-photo .elementor-widget-container { block-size: 100%; }

	/* The widget's own shape controls are for a picture in the flow. Inside the
	   card the box is the card, so the ratio and the radius come off. */
	.simm-hero-photo .simm-cphoto {
		block-size: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		background: none;
	}

	/* --- The card ------------------------------------------------------- */

	.simm-hero-copy {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border-radius: var(--simm-r-lg);
	}

	/* The inner wrapper is the flex host and must fill the card, or the copy
	   would sit at the top of a taller box. Bottom alignment itself is
	   `flex_justify_content_mobile` on the container — an Elementor value, not
	   an override. */
	.simm-hero-copy > .e-con-inner {
		flex: 1 1 auto;
		block-size: 100%;
	}

	/* Everything except the photograph sits above the scrim. */
	.simm-hero-copy .elementor-element:not(.simm-hero-photo) {
		position: relative;
		z-index: 2;
	}

	.simm-hero-copy .simm-chip { margin-block-end: auto; }

	/* --- With a photograph ---------------------------------------------- */

	body.simm-has-destination-photo .simm-hero-copy {
		/* Compact by intent. The bare copy measured 155–162px across the phone
		   range; this asks for 170–220px and the hero section gives ~12px back
		   in tightened gaps, so the plans move by single digits, not by a
		   screenful. */
		min-block-size: clamp(170px, 44vw, 220px);
		/* Painted before the photograph decodes, so the first frame is a dark
		   card with legible text rather than a white flash. */
		background-color: var(--simm-ink);
	}

	/* The scrim.

	   A photograph can be anything from a night skyline to a white-sand beach,
	   so the text cannot rely on the image being dark, and no single stop can
	   be reasoned about — the H1's box spans several of them. The stops were
	   set by measurement instead: hide the text, screenshot its bounding box,
	   and score the text colour against the *worst* pixel in it. Readings over
	   real destination photographs are recorded in docs §27; the weakest is the
	   H1, whose top edge reaches the thinnest part of the gradient.

	   The lighter top is where the chip sits, and the chip is a white pill with
	   a background of its own, so it is not relying on this at all.

	   On the ::after rather than the element: Elementor's container lazy-load
	   strips `background-image` from a third-or-later top-level container and
	   *everything inside it* (docs §15). The hero is the first, so it is out of
	   range either way — but that rule cannot reach a pseudo-element, so this
	   stays correct even if the hero is ever moved down the page. */
	body.simm-has-destination-photo .simm-hero-copy::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to top,
			rgba(0, 16, 64, .92) 0%,
			rgba(0, 16, 64, .88) 26%,
			rgba(0, 16, 64, .82) 50%,
			/* The 74% stop is the one that moves. A single-line H1 never reaches
			   it; a two-line one starts right about here, and a destination
			   whose photograph is bright at that band (Caribbean Netherlands,
			   turquoise water) was the weakest reading on the page. */
			rgba(0, 16, 64, .60) 74%,
			rgba(0, 16, 64, .40) 100%
		);
	}

	/* Hebrew and English take the same treatment: the scrim is what carries the
	   contrast, and it is direction-agnostic. The shadow is insurance against a
	   bright band landing exactly under a line, not the main mechanism. */
	/* `.elementor-element` is in the H1 selector to pay for the specificity,
	   not for the match: Elementor emits its heading colour at
	   `.elementor-{post} .elementor-element.elementor-element-{id}
	   .elementor-heading-title` — four classes — and the obvious three-class
	   selector lost to it silently, leaving a navy H1 on a dark card that
	   measured 1.0:1. Four classes plus `body` beats it without `!important`. */
	body.simm-has-destination-photo .elementor-element.simm-hero-title .elementor-heading-title,
	body.simm-has-destination-photo .simm-hero-copy .elementor-widget-text-editor,
	body.simm-has-destination-photo .simm-hero-copy .elementor-widget-text-editor p {
		color: #fff;
		text-shadow: 0 1px 3px rgba(0, 16, 64, .55);
	}

	/* The lead is the one run that is not a heading, so it needs the extra
	   weight to hold up against a busy photograph. */
	body.simm-has-destination-photo .simm-hero-copy .elementor-widget-text-editor p {
		font-weight: 500;
	}

	/* The "eSIM" run keeps its accent, but not its value. `--simm-blue-500` is
	   picked for white and measured 2.4:1 on the card — the one piece of the
	   title that was unreadable there. `--simm-blue-200` is the same accent
	   read on a dark surface. Measured, not assumed: see docs §27. */
	body.simm-has-destination-photo .simm-hero-title .simm-accent {
		color: var(--simm-blue-200);
	}

	/* --- Photographer credit --------------------------------------------- */

	/* Pinned to the bottom inline-end corner of the card, and the lead reserves
	   that corner so the two can never meet. Absolute rather than in flow
	   because the widget is the background layer: putting the credit in flow
	   would place it above the chip, at the top of the card.

	   Logical properties throughout, so it lands at the reading END in both
	   directions — bottom-left in Hebrew, bottom-right in English — which is
	   the corner the eye reaches last in each. */
	.simm-hero-copy .simm-cphoto__credit {
		position: absolute;
		z-index: 3;
		inset-block-end: 7px;
		/* A line of its own, not a corner beside the lead. "צילום: Ebenezer
		   Idowu ב־Pexels" is ~150px at this size — over half the card's inner
		   width at 320px — so anything that tried to share a line with the lead
		   would either overlap it or squeeze it into a clamped stub. */
		inset-inline: 16px;
		font-size: 10px;
		line-height: 1.3;
		text-align: end;
		/* Latin names inside a Hebrew sentence; without isolation the bidi
		   algorithm reorders the surrounding words. */
		unicode-bidi: isolate;
		color: rgba(255, 255, 255, .72);
		text-shadow: 0 1px 2px rgba(0, 16, 64, .7);
	}

	.simm-hero-copy .simm-cphoto__credit a {
		color: inherit;
		text-decoration: none;
		/* The credit is deliberately quiet, so the link needs to be discoverable
		   some other way than colour. */
		border-block-end: 1px solid rgba(255, 255, 255, .32);
	}

	.simm-hero-copy .simm-cphoto__credit a:hover,
	.simm-hero-copy .simm-cphoto__credit a:focus-visible {
		color: #fff;
		border-block-end-color: #fff;
	}

	/* Reserve the line. The card's own bottom padding grows by the credit's
	   height, so the lead's last line stops above it — "they cannot overlap" is
	   then a property of the box model rather than an observation about one
	   country's name length.

	   Keyed off a body class, not `:has()`, for the same reason the white text
	   is (see the head of this section). `ImageSync::body_class()` sets it from
	   the same `attribution()` call the widget renders from, so the reservation
	   and the credit cannot disagree.

	   On `.e-con-inner`, which is docs §3 in practice: for a boxed container
	   Elementor puts the *inline* padding on the outer element and the *block*
	   padding on the inner wrapper. Written against the outer first, this rule
	   computed to `padding: 0px 16px` — it did not apply at all — and the credit
	   overlapped the lead's last line by 4px. Measure the inner one. */
	body.simm-has-photo-credit .elementor-element.simm-hero-copy > .e-con-inner {
		padding-block-end: 30px;
	}

	/* --- Without one ----------------------------------------------------- */

	/* Not every destination has an approved photograph. The card keeps its
	   shape so the page rhythm does not change, but it is a SIMM surface with
	   ink text — and deliberately has no `min-block-size`, because a reserved
	   empty box is exactly what a missing image should not look like. */
	body:not(.simm-has-destination-photo) .simm-hero-copy {
		background-color: var(--simm-canvas);
		border: 1px solid var(--simm-line);
	}
}

/* Above the breakpoint none of this exists: the hero is the desktop two-column
   split again, the copy column is a plain flex column, and the widget is
   `display: none` (§37) with a `<source>` that no longer matches. */

/* --- Photographer credit on the desktop hero ------------------------------

   Two credits exist in the template because the two heroes draw the image by
   different means: the mobile card renders a `<picture>` and carries its credit
   inside that widget, the desktop half paints a container background and has a
   credit widget of its own. Each is hidden at the other's breakpoint, so
   exactly one is ever in the DOM's accessibility tree — the same arrangement
   the photograph itself already uses (§37).

   Under Pexels neither renders at all; `ImageSync::attribution()` returns null
   and both widgets output nothing. */

@media (max-width: 767px) {
	.simm-hero-credit { display: none; }
}

@media (min-width: 768px) {
	/* Bottom corner of the photo half, on the side away from the copy. The
	   media column is the positioned ancestor (§13 gives it `position:
	   relative`), and the credit sits above the white gradient overlay. */
	.simm-hero-credit {
		position: absolute;
		z-index: 4;
		inset-block-end: 10px;
		inset-inline-end: 16px;
		margin: 0;
	}

	.simm-hero-credit .simm-cphoto__credit {
		font-size: 11px;
		line-height: 1.3;
		unicode-bidi: isolate;
		color: rgba(255, 255, 255, .8);
		text-shadow: 0 1px 3px rgba(0, 16, 64, .8);
	}

	.simm-hero-credit .simm-cphoto__credit a {
		color: inherit;
		text-decoration: none;
		border-block-end: 1px solid rgba(255, 255, 255, .35);
	}

	.simm-hero-credit .simm-cphoto__credit a:hover,
	.simm-hero-credit .simm-cphoto__credit a:focus-visible {
		color: #fff;
		border-block-end-color: #fff;
	}
}
/* =========================================================================
   59. Hero: one boxed, centred unit on desktop

   The hero photograph used to run off the side of the screen: §16 gives it
   `margin-inline-end: calc(50% - 50vw)`, which pushes it out of the boxed row
   to the viewport edge. That is the behaviour being removed. From 1025px the
   whole hero — copy and image together — is now a single centred unit no wider
   than the 1280px measure the rest of the page uses, and the image stops at the
   unit's edge.

   The row is already a boxed 1280px container with a 24px page gutter, so the
   unit itself needs no new geometry: cancelling the negative margin is enough.
   Measured gutters after that, from the viewport to the hero's outer edge:
   24px at 1280, 80px at 1440, 320px at 1920 — equal on both sides.

   ## Where the radius goes, and why not on the wrapper

   The brief asked for the radius plus `overflow: hidden` on the row wrapper.
   That was measured first and rejected: the homepage's destination search sits
   inside this hero and drops an absolutely-positioned suggestion list below the
   field, which already extends **44px past the wrapper's bottom edge with only
   four results** at 1440 and 1920. `overflow: hidden` there would clip the
   homepage's primary control.

   Rounding the *image's outward corners* puts the curve in exactly the same
   place, because the image's outward edge IS the unit's outward edge on that
   side, and the copy is transparent on a white page so its own corners are not
   visible either way. Same result, nothing clipped. (If the copy column is ever
   given a background, its outward corners will need the same radius — that is
   the one thing this approach leaves for later.)

   Outward is the inline END for the image in both directions: it is the last
   child of a `row`, so it lands visually left in RTL and visually right in LTR,
   and `inline-end` follows. The inward corners — the join with the copy — are
   explicitly squared, so there is no notch, gap or rounded cut there. The image
   already carries `overflow: hidden` from §15, so its background follows its own
   corners.

   Radius is `--simm-r-lg` (24px), the design system's large radius and the same
   value §16 was already using on the inward side.

   Desktop only, and scoped by body class to exactly the two heroes that have
   this treatment. `.simm-hero-media` is shared, so a bare override would reach
   any future widget reusing it. `/packages/` carries neither class.

   Untouched here and verified unchanged: the gradient and its stops, the 46/54
   split, equal media/copy height, `min-block-size: 420px`, RTL/LTR mirroring,
   the tablet card at 768–1024 with its four 20px corners, and the approved
   mobile country card at ≤767px (§58).
   ========================================================================= */

@media (min-width: 1025px) {
	body.home .simm-hero-media,
	body.single-simm_country .simm-hero-media {
		/* Stay inside the boxed hero instead of bleeding to the viewport. */
		margin-inline-end: 0;

		/* Outward corners carry the unit's radius; the join stays square. */
		border-start-start-radius: 0;
		border-end-start-radius: 0;
		border-start-end-radius: var(--simm-r-lg);
		border-end-end-radius: var(--simm-r-lg);
	}
}

/* =========================================================================
   60. eSIM device compatibility — the banner and the checker

   One component in three places (homepage hero, package listings, checkout) and
   one dialog for all of them, so everything here is written to survive being
   dropped between an Elementor container's existing flex children rather than
   to own a region of the page.

   ## Nothing may move

   The banner arrives from PHP in its neutral state and JavaScript replaces the
   WORDS of its two lines, never their number. `min-block-size` on the text
   column is the backstop for the one case that could still shift — a
   translation long enough to wrap where the Hebrew did not — and it is set from
   the two lines' own line-heights rather than a round number, so it reserves
   exactly what is already drawn and no empty band.

   ## Status is a shape, not a colour

   Each state has its own glyph (tick, cross, warning triangle, question mark)
   and its own tint, and the sentence beside it states the answer in words. Any
   one of the three is enough on its own; the colour is the last of them, not
   the first. The icon chip's tint is the state's `*-bg` token and its stroke the
   state's foreground token, both of which clear AA against each other.

   ## Why the dialog needs `[hidden]` spelled out

   `.simm-modal` sets `display: flex`, and an author `display` beats the user
   agent's `[hidden] { display: none }`. Without the rules below, `hidden = true`
   would leave the overlay covering the page. The same trap applies to the
   suggestion list and the result panel, and each is closed explicitly — the
   pattern §5 and §29 already use.
   ========================================================================= */

.simm-device {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin-block: 1.1rem;
	padding: .85rem 1.1rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r);
	box-shadow: var(--simm-sh-xs);
	text-align: start;
}

/* Noticeable without competing with the search field or the buy button beside
   it: the state's tint on the icon and a hairline of it on the border. */
.simm-device.is-supported   { border-color: #b6e0c8; }
.simm-device.is-unsupported { border-color: #f3c9c5; }
.simm-device.is-conditional { border-color: #f0dcb4; }

.simm-device__body {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	flex: 1 1 min(100%, 26rem);
	min-inline-size: 0;
}

.simm-device__icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	inline-size: 2.15rem;
	block-size: 2.15rem;
	border-radius: 50%;
	background: var(--simm-blue-50);
	color: var(--simm-blue-600);
}

.simm-device__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }

.simm-device.is-supported   .simm-device__icon { background: var(--simm-success-bg); color: var(--simm-success); }
.simm-device.is-unsupported .simm-device__icon { background: var(--simm-danger-bg);  color: var(--simm-danger); }
.simm-device.is-conditional .simm-device__icon { background: var(--simm-warn-bg);    color: var(--simm-warning); }

.simm-device__lines { min-inline-size: 0; }

/* Two lines reserved for the headline, so replacing its words cannot change the
   banner's height.

   The qualification below it is never replaced (see initDeviceCheck), so its
   height is fixed by its own text at any given width. The headline IS replaced,
   and the replacements are not all the same length: "בדקו אם המכשיר שלכם תומך
   ב־eSIM" is 31 characters where "התמיכה ב־Galaxy S24 תלויה בגרסת הדגם או
   במדינת הרכישה" is 53, and in English the same pair is 33 and 79. Below a wide
   viewport the long ones wrap and the short ones do not, which is a line of
   movement on the homepage hero exactly when detection settles.

   Reserved to 1100px rather than everywhere: above it the text column is wide
   enough (>600px, measured at 1280) for the longest of the four in either
   language to sit on one line, so reserving there would only add an empty band.
   1.35 x 0.97rem = 1.31rem per line. */
@media (max-width: 1099px) {
	.simm-device__headline { min-block-size: 2.62rem; }
}

.simm-device__headline {
	margin: 0;
	font-size: .97rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--simm-ink);
}

.simm-device__note {
	margin: .1rem 0 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--simm-muted);
}

.simm-device__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	margin-inline-start: auto;
}

.simm-device__cta {
	padding: .6rem 1.15rem;
	font-size: .88rem;
	min-block-size: var(--simm-tap);
	white-space: nowrap;
}

.simm-device__cta[hidden] { display: none; }

/* A text control, not a second button: it undoes a choice rather than offering
   an action, and two buttons of equal weight would make the customer read both.
   Still a full tap target, which is what the padding is for. */
.simm-device__change {
	padding: .5rem .2rem;
	min-block-size: var(--simm-tap);
	border: 0;
	background: none;
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	color: var(--simm-blue-600);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.simm-device__change:hover { color: var(--simm-blue-700); }
.simm-device__change:focus-visible { outline: 3px solid var(--simm-blue-300); outline-offset: 2px; border-radius: 4px; }
.simm-device__change[hidden] { display: none; }

/* Without JavaScript the trigger stays hidden, so this is what remains: the
   honest instruction, in the flow rather than as an aside. */
.simm-device__noscript {
	flex: 1 1 100%;
	margin: .2rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--simm-body);
}

/* Inside the checkout's order review the banner sits in a narrow column beside
   the existing pre-payment notice, so it stacks rather than spreads. */
/* Layout variants an editor picks from the widget panel. The default is one
   row with the button pushed to the end edge; these two are the arrangements
   that a narrower column or a centred section actually needs, and they are
   classes rather than panel-generated CSS so the banner keeps behaving the same
   way at every breakpoint. */
.simm-device--stacked .simm-device__actions { margin-inline-start: 0; flex: 1 1 100%; }

.simm-device--center { text-align: center; }
.simm-device--center .simm-device__body { flex: 1 1 100%; justify-content: center; }
.simm-device--center .simm-device__lines { flex: 0 1 auto; }
.simm-device--center .simm-device__actions { margin-inline-start: 0; flex: 1 1 100%; justify-content: center; }

/* -----------------------------------------------------------------------------
   The pill variant: one strip that carries the answer and nothing else.
   -----------------------------------------------------------------------------
   For a hero that is already full — a search field, two store badges — where a
   full-width card would be a third block competing with them. The strip states
   the answer in WORDS ("… תומך ב־eSIM"), so the colour beside it is a second
   channel rather than the only one, which is what lets the four state marks
   collapse into a single dot at this size.

   The wrapper stops being the card and becomes the layout: the body is the
   pill, and the qualification sits under it as its own line — printed in every
   variant, because that sentence is what keeps "supported" from reading as a
   promise.
   -------------------------------------------------------------------------- */

.simm-device--pill {
	justify-content: center;
	gap: .35rem .7rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: center;
}

.simm-device--pill .simm-device__body {
	flex: 0 1 auto;
	align-items: center;
	gap: .45rem;
	padding: .4rem .95rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: 999px;
}

.simm-device--pill .simm-device__lines { display: flex; align-items: center; }

.simm-device--pill .simm-device__icon {
	inline-size: .5rem;
	block-size: .5rem;
	border-radius: 50%;
	background: currentColor;
	color: var(--simm-blue-600);
}

.simm-device--pill .simm-device__icon svg { display: none; }

.simm-device--pill .simm-device__headline {
	margin: 0;
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
}

/* The strip's own height is fixed by its one line, so the headline does not
   need the two-line reservation the card makes for it. */
.simm-device--pill .simm-device__note {
	flex: 1 1 100%;
	margin: 0;
	font-size: .78rem;
}

/* The strip and its trigger share one row; the qualification takes the line
   under both. Visual order only — the note stays directly after the headline in
   the DOM, so a screen reader still hears the caveat in the same breath as the
   answer, and the only focusable things here (the two buttons) sit in one
   group, so nothing is reordered out from under a keyboard. */
.simm-device--pill .simm-device__body    { order: 1; }
.simm-device--pill .simm-device__actions { order: 2; margin-inline-start: 0; }
.simm-device--pill .simm-device__note    { order: 3; }

.simm-device--pill .simm-device__cta {
	padding: .35rem .85rem;
	font-size: .82rem;
	min-block-size: auto;
}

.simm-device--pill.is-supported .simm-device__body,
.simm-device--pill.is-supported .simm-device__headline { color: var(--simm-success); }
.simm-device--pill.is-supported .simm-device__body { background: var(--simm-success-bg); border-color: #b6e0c8; }

.simm-device--pill.is-unsupported .simm-device__body,
.simm-device--pill.is-unsupported .simm-device__headline { color: var(--simm-danger); }
.simm-device--pill.is-unsupported .simm-device__body { background: var(--simm-danger-bg); border-color: #f3c9c5; }

.simm-device--pill.is-conditional .simm-device__body,
.simm-device--pill.is-conditional .simm-device__headline { color: var(--simm-warning); }
.simm-device--pill.is-conditional .simm-device__body { background: var(--simm-warn-bg); border-color: #f0dcb4; }

/* The state tint already lives on the pill; the icon must not paint a second
   circle inside it. */
.simm-device--pill .simm-device__icon,
.simm-device--pill.is-supported .simm-device__icon,
.simm-device--pill.is-unsupported .simm-device__icon,
.simm-device--pill.is-conditional .simm-device__icon { background: currentColor; }

@media ( max-width: 480px ) {
	.simm-device--pill .simm-device__headline { white-space: normal; }
}

/* On the account page the strip opens the install block, so it starts on the
   line rather than centring in it. */
.simm-device--install {
	justify-content: flex-start;
	margin-block: 0 .9rem;
	text-align: start;
}

.simm-device--checkout { margin-block: 0 .9rem; }
.simm-device--checkout .simm-device__actions { margin-inline-start: 0; flex: 1 1 100%; }

@media (max-width: 599px) {
	.simm-device { padding: .8rem .9rem; }
	.simm-device__actions { margin-inline-start: 0; flex: 1 1 100%; }
	.simm-device__cta { flex: 1 1 auto; justify-content: center; }
}

/* ---- the dialog ---------------------------------------------------------- */

.simm-device-dialog[hidden] { display: none; }

.simm-device-dialog .simm-modal__inner { inline-size: min(100%, 30rem); }

.simm-device-dialog__lead {
	margin: 0 0 .9rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--simm-muted);
}

.simm-device-field {
	position: relative;
	margin-block-end: .9rem;
}

.simm-device-field__label {
	display: block;
	margin-block-end: .35rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--simm-ink);
}

.simm-device-field__control {
	inline-size: 100%;
	min-block-size: var(--simm-tap);
	padding: .55rem .75rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	background: var(--simm-surface);
	font: inherit;
	font-size: .95rem;
	color: var(--simm-ink);
	text-align: start;
}

.simm-device-field__control:focus-visible {
	outline: 3px solid var(--simm-blue-300);
	outline-offset: 1px;
	border-color: var(--simm-blue-400);
}

/* The model field before a manufacturer is chosen. Visibly out of play, and
   `disabled` in the markup so it is out of the tab order too — a control that
   cannot answer should not take a turn. */
.simm-device-field__control:disabled {
	background: var(--simm-canvas);
	color: var(--simm-muted);
	cursor: not-allowed;
}

/* ---- suggestions -------------------------------------------------------- */

/* Absolute, so opening the list cannot push the result panel below it down the
   dialog. Bounded and scrollable, because a manufacturer can hold fifty models
   and the matcher caps what is rendered at eight — this is the visual half of
   that same rule. */
.simm-device-list {
	position: absolute;
	inset-inline: 0;
	z-index: 5;
	margin: .25rem 0 0;
	padding: .25rem;
	list-style: none;
	max-block-size: 15rem;
	overflow-y: auto;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-sm);
	box-shadow: var(--simm-sh);
	-webkit-overflow-scrolling: touch;
}

.simm-device-list[hidden] { display: none; }

.simm-device-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	min-block-size: var(--simm-tap);
	padding: .5rem .6rem;
	border-radius: 8px;
	cursor: pointer;
}

.simm-device-list__item.is-active,
.simm-device-list__item:hover { background: var(--simm-blue-50); }

.simm-device-list__name { font-size: .92rem; font-weight: 600; color: var(--simm-ink); }
.simm-device-list__code { font-size: .76rem; color: var(--simm-muted); }

/* ---- the answer --------------------------------------------------------- */

.simm-device-result {
	margin-block-start: 1rem;
	padding: .85rem .95rem;
	border: 1px solid var(--simm-line);
	border-inline-start-width: 4px;
	border-radius: var(--simm-r-sm);
	background: var(--simm-canvas);
}

.simm-device-result[hidden] { display: none; }

.simm-device-result.is-supported   { background: var(--simm-success-bg); border-color: #b6e0c8; }
.simm-device-result.is-unsupported { background: var(--simm-danger-bg);  border-color: #f3c9c5; }
.simm-device-result.is-conditional { background: var(--simm-warn-bg);    border-color: #f0dcb4; }

.simm-device-result__head {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--simm-ink);
}

.simm-device-result__icon { flex: 0 0 auto; display: inline-flex; margin-block-start: .1rem; }
.simm-device-result__icon svg { inline-size: 1.1rem; block-size: 1.1rem; }

.simm-device-result.is-supported   .simm-device-result__icon { color: var(--simm-success); }
.simm-device-result.is-unsupported .simm-device-result__icon { color: var(--simm-danger); }
.simm-device-result.is-conditional .simm-device-result__icon { color: var(--simm-warning); }
.simm-device-result.is-unknown     .simm-device-result__icon { color: var(--simm-blue-600); }

/* `padding-inline-start` and not `padding-left`: the marker sits at the reading
   start in both directions, which is the whole reason this file is written in
   logical properties. */
.simm-device-result__notes {
	margin: .6rem 0 0;
	padding-inline-start: 1.1rem;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--simm-body);
}

.simm-device-result__notes li + li { margin-block-start: .3rem; }

.simm-device-result__codes {
	margin: .55rem 0 0;
	font-size: .78rem;
	color: var(--simm-muted);
}

/* =========================================================================
   61. Visual polish — STAGING ONLY (the "Home 2026 Polish" draft)

   Every rule in this section begins with `.simm-polish`. That class exists on
   exactly one document — the staging page bin/polish-home.php builds — and on
   nothing else, so none of this can reach the live homepage, /packages/, or a
   destination page even though they share the same widgets and the same
   stylesheet. That scoping is the whole contract of this section; if a rule
   here ever needs to lose the prefix, it is being promoted to the real site and
   belongs in the section that owns that component instead.

   Written against markup the existing widgets already emit — `.simm-search`,
   `.simm-destination`, `.simm-steps` — so no widget's PHP changed and every
   price, package count and link is still the live one.

   Delete this section when the staging page is either promoted or discarded.
   ========================================================================= */

/* --- 61.1 Hero ----------------------------------------------------------- */

/* The gradient itself is a native Elementor background on the container. What
   CSS adds is one soft radial bloom behind the copy, which a two-stop linear
   gradient cannot express and which is what stops the section reading flat.
   `::before` on the section, under everything, no extra element. */
.simm-polish-hero { position: relative; isolation: isolate; }

.simm-polish-hero::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(760px, 62%);
	background: radial-gradient(60% 70% at 30% 35%, rgba(0, 80, 248, .07), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* The bloom is anchored to the visual half, which only exists once the hero is
   two columns. Below that it is a 62%-wide box on a single-column hero, and its
   edge showed as a faint vertical seam down the mobile screenshot. */
@media (max-width: 1024px) {
	.simm-polish-hero::before { content: none; }
}

/* The headline carries the page. A touch more size and a tighter measure so it
   reads as a statement rather than as a paragraph heading. */
.simm-polish-hero .simm-home-title .elementor-heading-title {
	font-size: clamp(2.1rem, 3.6vw, 3.05rem);
	line-height: 1.12;
	letter-spacing: -.015em;
}

.simm-polish-hero .simm-hero-row > .e-con-inner > :first-child p,
.simm-polish-hero .elementor-widget-text-editor {
	max-inline-size: 42ch;
	color: var(--simm-body);
}

/* --- 61.2 The search, as the loudest thing on the page ------------------- */

/* It was a plain field on white. Depth, a wider target and a real focus ring
   make it the obvious place to start, which is the one behaviour this hero has
   to get right. */
.simm-polish-hero .simm-search { max-inline-size: 560px; }

.simm-polish-hero .simm-search__field {
	min-block-size: 58px;
	padding-inline: 1.1rem;
	border-radius: 14px;
	border-color: var(--simm-blue-200);
	background: var(--simm-surface);
	box-shadow: 0 1px 2px rgba(0, 16, 64, .04), 0 12px 30px -14px rgba(0, 16, 64, .35);
	transition: box-shadow .2s var(--simm-ease), border-color .2s var(--simm-ease);
}

.simm-polish-hero .simm-search__field:hover { border-color: var(--simm-blue-300); }

.simm-polish-hero .simm-search__field:focus-within {
	border-color: var(--simm-blue-500);
	box-shadow: 0 0 0 4px var(--simm-blue-100), 0 14px 34px -14px rgba(0, 80, 248, .45);
}

.simm-polish-hero .simm-search__field input { font-size: 1rem; }

.simm-polish-hero .simm-search__form .simm-btn {
	min-block-size: 58px;
	padding-inline: 1.9rem;
	border-radius: 14px;
	font-size: 1rem;
}

/* --- 61.3 The hero visual ------------------------------------------------ */

.simm-polish-heromedia { overflow: hidden; }

.simm-polish-visual { inline-size: 100%; display: flex; justify-content: center; }

.simm-polish-svg {
	inline-size: min(100%, 420px);
	block-size: auto;
	/* The SVG is drawn LTR and means the same in both directions — a phone is
	   not mirrored by RTL. Without this it flips inside the RTL document. */
	direction: ltr;
	filter: drop-shadow(0 24px 44px rgba(0, 8, 40, .38));
}

/* Elementor's own `svg { width: 1em }` guard in §2 applies to `.simm svg`; this
   panel is not inside a `.simm` root, but the rule is repeated defensively
   because the hero container's markup is Elementor's, not ours. */
.simm-polish-visual svg { inline-size: min(100%, 420px); block-size: auto; }

/* --- 61.4 Trust strip ---------------------------------------------------- */

.simm-polish-trust { border-color: var(--simm-line) !important; }

/* Each item gets a quiet tinted chip instead of a bare glyph, which is what
   makes four different icons read as one set. */
.simm-polish-trust .elementor-icon-box-icon {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 12px;
	background: var(--simm-blue-50);
	display: inline-grid !important;
	place-items: center;
	flex: none;
}

.simm-polish-trust .elementor-icon-box-icon .elementor-icon { font-size: 19px; line-height: 1; }

.simm-polish-trust .elementor-icon-box-title { letter-spacing: -.01em; }

/* Hairline separators between the four, in the inline direction so they follow
   RTL and LTR without a per-direction override — and only while they are on one
   row. */
@media (min-width: 1000px) {
	.simm-polish-trust > .e-con:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		inset-block: 18%;
		inline-size: 1px;
		background: var(--simm-line-soft);
	}

	.simm-polish-trust > .e-con { position: relative; }
}

/* --- 61.5 Destination cards --------------------------------------------- */

/* Same widget, same data — only the treatment. The card was already clean; what
   it lacked was hierarchy between the price and the package count, and a hover
   that suggests depth rather than motion. */
.simm-polish-cards .simm-destination {
	border-radius: var(--simm-r-lg);
	border-color: var(--simm-line-soft);
	box-shadow: 0 1px 2px rgba(0, 16, 64, .04), 0 8px 20px -14px rgba(0, 16, 64, .3);
	transition: transform .22s var(--simm-ease), box-shadow .22s var(--simm-ease), border-color .22s var(--simm-ease);
}

/* A restrained hover: 2px, not 4, and no image zoom. The card lifts; it does not
   perform. Behind `hover: hover` so a touch device never gets a stuck state. */
@media (hover: hover) {
	.simm-polish-cards .simm-destination:hover {
		transform: translateY(-2px);
		border-color: var(--simm-blue-200);
		box-shadow: 0 2px 4px rgba(0, 16, 64, .05), 0 18px 34px -18px rgba(0, 16, 64, .4);
	}

	/* §3 zooms the photograph on hover. Two moving things is one too many. */
	.simm-polish-cards .simm-destination:hover .simm-destination__media img { transform: none; }
}

/* A hairline under the photo, so the body reads as a separate plane. */
.simm-polish-cards .simm-destination__media { border-block-end: 1px solid var(--simm-line-soft); }

.simm-polish-cards .simm-destination__body { padding: .85rem .95rem .95rem; }

/* Price over count. It was 1.05rem against 0.74rem; now the price is bigger and
   darker-blue while the count steps back to a quiet pill, so the eye reaches the
   number that decides the click first. */
.simm-polish-cards .simm-destination__price {
	font-size: 1.16rem;
	line-height: 1.15;
	color: var(--simm-blue-600);
}

.simm-polish-cards .simm-destination__price small {
	font-size: .64rem;
	font-weight: 600;
	color: var(--simm-muted);
	letter-spacing: .01em;
}

.simm-polish-cards .simm-destination__name { font-size: .98rem; }

/* `block` with `fit-content`, not `inline-block`. Inline-block let the pill sit
   beside the country name whenever the name was short enough to leave room, so
   the strip rendered with the pill under "איטליה" and beside "פולין" in the same
   row — see the first screenshot of this section. A block box on its own line
   is what the original did; `fit-content` is what keeps the tint hugging the
   text instead of running the width of the card. */
.simm-polish-cards .simm-destination__count {
	display: block;
	inline-size: fit-content;
	margin-block-start: .32rem;
	padding: .14rem .5rem;
	border-radius: 999px;
	background: var(--simm-canvas);
	font-size: .7rem;
	color: var(--simm-muted);
}

/* --- 61.6 How it works, as a process ------------------------------------- */

/* Four cards in a row do not say "in this order". A connecting rule behind the
   numbers does, and it costs one pseudo-element.

   The line is drawn behind the badges and stops short of both ends, so it reads
   as a track between steps 1 and 4 rather than as a border across the section.
   `inset-inline` keeps it correct in Hebrew without a mirrored copy. */
@media (min-width: 901px) {
	.simm-polish-steps .simm-steps { position: relative; }

	.simm-polish-steps .simm-steps::before {
		content: "";
		position: absolute;
		inset-inline: 12.5%;
		inset-block-start: 2.55rem;
		block-size: 2px;
		background: linear-gradient(to right, var(--simm-blue-100), var(--simm-blue-200), var(--simm-blue-100));
		z-index: 0;
	}

	.simm-polish-steps .simm-step { position: relative; z-index: 1; background: transparent; border: 0; box-shadow: none; padding: 0 .8rem; }

	/* The badge now sits ON the line, so it needs its own opaque ground. */
	.simm-polish-steps .simm-step__num {
		inline-size: 46px;
		block-size: 46px;
		font-size: 1.1rem;
		background: var(--simm-surface);
		color: var(--simm-blue-600);
		border: 2px solid var(--simm-blue-200);
		box-shadow: 0 0 0 6px var(--simm-canvas);
	}
}

/* Mobile and tablet: a vertical track down the reading edge, same idea. The
   grid is one column below 520px and two below 900px; the track is only drawn
   in the single-column case, where "1 then 2 then 3" is unambiguous. */
@media (max-width: 520px) {
	.simm-polish-steps .simm-steps { position: relative; gap: 0; }

	.simm-polish-steps .simm-step {
		flex-direction: row;
		align-items: flex-start;
		gap: .9rem;
		text-align: start;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: .55rem 0 1.15rem;
	}

	/* The connector is per-step and drawn from the badge downwards, so the last
	   step has none and the run never overshoots the list. */
	.simm-polish-steps .simm-step:not(:last-child)::before {
		content: "";
		position: absolute;
		inset-inline-start: 19px;
		inset-block-start: 2.9rem;
		inline-size: 2px;
		block-size: calc(100% - 2.9rem);
		background: var(--simm-blue-100);
	}

	.simm-polish-steps .simm-step { position: relative; }

	.simm-polish-steps .simm-step__num {
		inline-size: 40px;
		block-size: 40px;
		background: var(--simm-surface);
		border: 2px solid var(--simm-blue-200);
		color: var(--simm-blue-600);
		z-index: 1;
	}
}

/* --- 61.7 Motion preference --------------------------------------------- */

/* §8 already stops animation site-wide under `prefers-reduced-motion`; the hover
   transitions added above are re-stated here because they are new declarations
   and would otherwise slip past it. */
@media (prefers-reduced-motion: reduce) {
	.simm-polish-cards .simm-destination,
	.simm-polish-hero .simm-search__field { transition: none; }

	.simm-polish-cards .simm-destination:hover { transform: none; }
}

/* --- 61.8 The hero panel's geometry -------------------------------------- */

/* §16 bleeds `.simm-hero-media` to the viewport edge above 1025px, and §59
   cancels that for `body.home` and `body.single-simm_country` so the hero stays
   one boxed, centred unit. The staging page is neither of those, so it inherited
   the bleed and the panel ran off the side of the screen — visible in the first
   screenshot of it.

   Rather than give the staging page a `home` body class it has no business
   carrying, §59's treatment is repeated here against the polish class. If this
   is promoted, the right move is to add the new page to §59's selector list
   instead of keeping this. */
@media (min-width: 1025px) {
	.simm-polish-hero .simm-polish-heromedia {
		margin-inline-end: 0;
		border-start-start-radius: 0;
		border-end-start-radius: 0;
		border-start-end-radius: var(--simm-r-lg);
		border-end-end-radius: var(--simm-r-lg);
	}
}

/* §16's white fade exists to dissolve a photograph into the copy column. Over a
   dark gradient panel the same fade at the same strength greys out the artwork,
   so it is pulled back to a narrow blend at the join only — enough to keep the
   site's hero language, not enough to wash the panel out. */
.simm-polish-heromedia::before {
	background: linear-gradient(to right,
		rgba(255, 255, 255, 0) 66%,
		rgba(255, 255, 255, .28) 88%,
		rgba(255, 255, 255, .72) 100%) !important;
}

[dir="ltr"] .simm-polish-heromedia::before {
	background: linear-gradient(to left,
		rgba(255, 255, 255, 0) 66%,
		rgba(255, 255, 255, .28) 88%,
		rgba(255, 255, 255, .72) 100%) !important;
}

/* --- 61.9 The hero visual is desktop-only -------------------------------- */

/* Below 1025px the two hero columns stack, and the panel stops being "the other
   half of the hero" — it becomes a 464px decorative block sitting between the
   copy and the trust strip. Measured before this rule: it made the tablet page
   153px taller and pushed the trust strip to y=1071 for no gain. The copy column
   comes first in the DOM, so hiding it costs a phone or tablet visitor nothing.

   `!important`, reluctantly and for one reason: Elementor writes a per-element
   rule at `.elementor-1214 .elementor-element.elementor-element-33d6464`
   (specificity 0,3,0) that sets `display: flex`. Its own visibility classes are
   0,2,0 and lose to it, which is why the native toggle had no effect here. */
@media (max-width: 1024px) {
	.simm-polish-hero .simm-polish-heromedia { display: none !important; }
}

/* =========================================================================
   62. "Home 2026 Bold" — STAGING ONLY

   The second staging homepage, answering a different complaint from §61's: that
   the site reads dry and colourless. Same scoping contract as §61 — every rule
   begins with `.simm-bold`, a class that exists on one draft document and
   nowhere else, so none of this reaches the live homepage, /packages/ or a
   destination page even though they share these widgets.

   The work is mostly ground and rhythm rather than ornament. A dark hero, a
   white band, a tinted band, a dark closing band — a page that alternates reads
   as chapters, and a page that is white all the way down reads as unfinished
   however good its parts are.

   Delete this section when the page is promoted or discarded.
   ========================================================================= */

/* --- 62.1 The dark hero -------------------------------------------------- */

.simm-bold-hero { position: relative; overflow: hidden; isolation: isolate; }

/* One soft bloom, off-centre, so the flat gradient gains a light source. */
.simm-bold-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -28%;
	inset-inline-end: -12%;
	inline-size: 70%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(61, 123, 255, .5), transparent 62%);
	pointer-events: none;
	z-index: 0;
}

.simm-bold-hero > * { position: relative; z-index: 1; }

.simm-bold-hero .simm-home-title .elementor-heading-title {
	color: #fff;
	font-size: clamp(2.2rem, 3.8vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -.018em;
}

/* The accent word was brand blue on white; on navy it needs to come forward,
   not recede. */
.simm-bold-hero .simm-accent { color: #7FA9FF; }

.simm-bold-hero .elementor-widget-text-editor,
.simm-bold-hero .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, .82);
	max-inline-size: 44ch;
}

/* --- 62.2 The hero visual ------------------------------------------------ */

.simm-bold-heromedia { background: none !important; }

.simm-bold .simm-hero-visual { inline-size: 100%; display: flex; justify-content: center; }

.simm-bold .simm-hero-visual-svg {
	inline-size: min(100%, 430px);
	block-size: auto;
	/* The drawing is LTR and means the same either way — a phone is not mirrored
	   by a right-to-left document. */
	direction: ltr;
	filter: drop-shadow(0 30px 60px rgba(0, 4, 30, .55));
}

/* §16 fades the hero media into the copy with a white gradient, which over a
   navy ground is a grey smear. There is nothing to fade into here: the whole
   hero is one surface. */
.simm-bold-heromedia::before { background: none !important; }

/* Below 1025px the columns stack and the drawing stops being the other half of
   the hero. `!important` because Elementor's per-element rule is 0,3,0 and its
   own visibility classes are 0,2,0 — see the note in §61.9. */
@media (max-width: 1024px) {
	.simm-bold .simm-bold-heromedia { display: none !important; }
}

@media (min-width: 1025px) {
	.simm-bold .simm-bold-heromedia { margin-inline-end: 0; border-radius: 0; }
}

/* --- 62.3 The search, reversed out --------------------------------------- */

/* On the dark ground the white field is the brightest object on the screen,
   which is exactly where a first-time visitor should be looking. */
.simm-bold-hero .simm-search { max-inline-size: 580px; }

.simm-bold-hero .simm-search__field {
	min-block-size: 60px;
	padding-inline: 1.15rem;
	border-radius: 15px;
	border-color: transparent;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(0, 4, 30, .8);
}

.simm-bold-hero .simm-search__field:focus-within {
	box-shadow: 0 0 0 4px rgba(127, 169, 255, .45), 0 18px 40px -18px rgba(0, 4, 30, .8);
}

.simm-bold-hero .simm-search__field input { font-size: 1rem; }

.simm-bold-hero .simm-search__form .simm-btn {
	min-block-size: 60px;
	padding-inline: 2rem;
	border-radius: 15px;
	font-size: 1rem;
}

/* --- 62.4 The two blocks that live inside the hero ----------------------- */

/* The device-compatibility banner and the three mini-benefits both assume a
   white page. Reversed here rather than hidden: they are useful, and dropping
   content to make a background work is the wrong trade. */
.simm-bold-hero .simm-device {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
	backdrop-filter: blur(2px);
}

.simm-bold-hero .simm-device__headline { color: #fff; }
.simm-bold-hero .simm-device__note { color: rgba(255, 255, 255, .72); }
.simm-bold-hero .simm-device__icon { background: rgba(255, 255, 255, .12); color: #BFD3FF; }

.simm-bold-hero .simm-device__cta {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.simm-bold-hero .simm-device__cta:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.simm-bold-hero .simm-device__change { color: #BFD3FF; }

.simm-bold-hero .simm-benefits { border-block-start-color: rgba(255, 255, 255, .14) !important; }
.simm-bold-hero .simm-benefits .elementor-heading-title { color: #fff !important; }
.simm-bold-hero .simm-benefits .elementor-icon { color: #7FA9FF !important; }

/* --- 62.5 The stats band ------------------------------------------------- */

/* The lift onto the hero seam and the tile widths are set natively on the
   containers — Elementor writes a per-element rule for both, and a stylesheet
   `flex` shorthand loses to it. What is left here is treatment. */
.simm-bold-statsband { position: relative; }

.simm-bold-stat {
	padding: 1.15rem 1.2rem;
	background: var(--simm-surface);
	border: 1px solid var(--simm-line);
	text-align: center;
}

/* One card split into three, not three cards: the outer corners are rounded and
   the inner joins are hairlines. */
.simm-bold-statsband > .e-con:first-child .simm-bold-stat,
.simm-bold-stat:first-child {
	border-start-start-radius: var(--simm-r);
	border-end-start-radius: var(--simm-r);
}

.simm-bold-stat:last-child {
	border-start-end-radius: var(--simm-r);
	border-end-end-radius: var(--simm-r);
}

.simm-bold-stat + .simm-bold-stat { border-inline-start: 0; }

.simm-bold-statsband { box-shadow: 0 18px 40px -22px rgba(0, 16, 64, .45); border-radius: var(--simm-r); }

.simm-bold-stat .elementor-widget-container > p { margin: 0; }

.simm-bold-stat__num {
	display: block;
	font-size: clamp(1.85rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--simm-blue-600);
	/* The figure is Latin digits inside a Hebrew page. */
	direction: ltr;
	unicode-bidi: isolate;
}

.simm-bold-stat__label {
	display: block;
	margin-block-start: .3rem;
	font-size: .84rem;
	font-weight: 600;
	color: var(--simm-muted);
}

@media (max-width: 599px) {
	.simm-bold-stat + .simm-bold-stat { border-inline-start: 1px solid var(--simm-line); border-block-start: 0; }
	.simm-bold-stat:first-child { border-radius: var(--simm-r) var(--simm-r) 0 0; }
	.simm-bold-stat:last-child { border-radius: 0 0 var(--simm-r) var(--simm-r); }
}

/* --- 62.6 Trust strip and destination cards ------------------------------ */

.simm-bold-trustwrap { padding-block-start: 26px !important; }
.simm-bold-trust { box-shadow: var(--simm-sh-xs); border-radius: 18px !important; }

.simm-bold-trust .elementor-icon-box-icon {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 12px;
	background: var(--simm-blue-50);
	display: inline-grid !important;
	place-items: center;
	flex: none;
}

.simm-bold-trust .elementor-icon-box-icon .elementor-icon { font-size: 19px; line-height: 1; }

.simm-bold-cards .simm-destination {
	border-radius: var(--simm-r-lg);
	border-color: var(--simm-line-soft);
	box-shadow: 0 1px 2px rgba(0, 16, 64, .04), 0 8px 20px -14px rgba(0, 16, 64, .3);
	transition: transform .22s var(--simm-ease), box-shadow .22s var(--simm-ease), border-color .22s var(--simm-ease);
}

@media (hover: hover) {
	.simm-bold-cards .simm-destination:hover {
		transform: translateY(-3px);
		border-color: var(--simm-blue-200);
		box-shadow: 0 2px 4px rgba(0, 16, 64, .05), 0 20px 38px -18px rgba(0, 16, 64, .42);
	}

	.simm-bold-cards .simm-destination:hover .simm-destination__media img { transform: none; }
}

.simm-bold-cards .simm-destination__media { border-block-end: 1px solid var(--simm-line-soft); }
.simm-bold-cards .simm-destination__body { padding: .85rem .95rem .95rem; }
.simm-bold-cards .simm-destination__name { font-size: .98rem; }

.simm-bold-cards .simm-destination__price {
	font-size: 1.16rem;
	line-height: 1.15;
	color: var(--simm-blue-600);
}

.simm-bold-cards .simm-destination__price small { font-size: .64rem; font-weight: 600; color: var(--simm-muted); }

.simm-bold-cards .simm-destination__count {
	display: block;
	inline-size: fit-content;
	margin-block-start: .32rem;
	padding: .14rem .5rem;
	border-radius: 999px;
	background: var(--simm-canvas);
	font-size: .7rem;
	color: var(--simm-muted);
}

/* --- 62.7 Section headings ----------------------------------------------- */

.simm-bold .simm-bold-h2 .elementor-heading-title {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--simm-ink);
}

.simm-bold .simm-bold-sub .elementor-heading-title {
	font-size: .96rem;
	font-weight: 400;
	color: var(--simm-muted);
	line-height: 1.6;
}

/* --- 62.8 The regional tiles --------------------------------------------- */

/* The widget and its markup are §48's; this is treatment only. A region is a
   bigger commitment than a single country, so the tiles are given more room and
   a clearer price. */
.simm-bold-regions .simm-coverage { gap: clamp(12px, 1.4vw, 18px); }

.simm-bold-regions .simm-coverage__tile {
	padding: 1.05rem 1.1rem;
	border-radius: var(--simm-r);
	border-color: var(--simm-line-soft);
	background: var(--simm-surface);
	box-shadow: 0 1px 2px rgba(0, 16, 64, .04), 0 10px 24px -18px rgba(0, 16, 64, .34);
	transition: transform .22s var(--simm-ease), box-shadow .22s var(--simm-ease), border-color .22s var(--simm-ease);
}

@media (hover: hover) {
	.simm-bold-regions .simm-coverage__tile:hover {
		transform: translateY(-3px);
		border-color: var(--simm-blue-200);
		box-shadow: 0 2px 4px rgba(0, 16, 64, .05), 0 20px 38px -18px rgba(0, 16, 64, .42);
	}
}

.simm-bold-regions .simm-coverage__icon {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 13px;
}

.simm-bold-regions .simm-coverage__name { font-size: 1.02rem; }
.simm-bold-regions .simm-coverage__price { font-size: 1.08rem; font-weight: 800; color: var(--simm-blue-600); }

/* --- 62.9 How it works, as a process ------------------------------------- */

@media (min-width: 901px) {
	.simm-bold-steps .simm-steps { position: relative; }

	.simm-bold-steps .simm-steps::before {
		content: "";
		position: absolute;
		inset-inline: 12.5%;
		inset-block-start: 2.55rem;
		block-size: 2px;
		background: linear-gradient(to right, var(--simm-blue-100), var(--simm-blue-300), var(--simm-blue-100));
		z-index: 0;
	}

	.simm-bold-steps .simm-step { position: relative; z-index: 1; background: transparent; border: 0; box-shadow: none; padding: 0 .8rem; }

	.simm-bold-steps .simm-step__num {
		inline-size: 46px;
		block-size: 46px;
		font-size: 1.1rem;
		background: var(--simm-blue-500);
		color: #fff;
		border: 0;
		box-shadow: 0 0 0 6px #fff, 0 8px 18px -8px rgba(0, 80, 248, .7);
	}
}

@media (max-width: 520px) {
	.simm-bold-steps .simm-steps { position: relative; gap: 0; }

	.simm-bold-steps .simm-step {
		position: relative;
		flex-direction: row;
		align-items: flex-start;
		gap: .9rem;
		text-align: start;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: .55rem 0 1.15rem;
	}

	.simm-bold-steps .simm-step:not(:last-child)::before {
		content: "";
		position: absolute;
		inset-inline-start: 19px;
		inset-block-start: 2.9rem;
		inline-size: 2px;
		block-size: calc(100% - 2.9rem);
		background: var(--simm-blue-100);
	}

	.simm-bold-steps .simm-step__num {
		inline-size: 40px;
		block-size: 40px;
		background: var(--simm-blue-500);
		color: #fff;
		border: 0;
		z-index: 1;
	}
}

/* --- 62.10 The closing band ---------------------------------------------- */

.simm-bold-cta { position: relative; overflow: hidden; }

.simm-bold-cta::before {
	content: "";
	position: absolute;
	inset-block-start: -60%;
	inset-inline-start: -10%;
	inline-size: 60%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(61, 123, 255, .45), transparent 64%);
	pointer-events: none;
}

.simm-bold-cta > * { position: relative; }

.simm-bold-cta .simm-bold-cta__title .elementor-heading-title { color: #fff; }
.simm-bold-cta .simm-bold-cta__sub .elementor-heading-title { color: rgba(255, 255, 255, .8); }

.simm-bold-cta__btn .elementor-button {
	background: #fff;
	color: var(--simm-blue-700);
	border-radius: 14px;
	padding: .95rem 2.2rem;
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 16px 34px -18px rgba(0, 4, 30, .9);
	transition: transform .2s var(--simm-ease), box-shadow .2s var(--simm-ease);
}

@media (hover: hover) {
	.simm-bold-cta__btn .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(0, 4, 30, .95); }
}

/* --- 62.11 Reveal on scroll ---------------------------------------------- */

/* The hidden state is applied only once initReveal() has decided it can run —
   it puts `simm-reveal-on` on <html>. So with JavaScript off, with
   IntersectionObserver missing, or with reduced motion asked for, none of these
   rules match and every section is simply visible. AOS gets this backwards: it
   hides in CSS by default, and a slow or failed script leaves a blank page.
   Only `opacity` and `transform` move, so nothing here can cause layout shift. */
.simm-reveal-on .simm-bold .simm-reveal,
.simm-reveal-on .simm-bold.simm-reveal {
	opacity: 0;
	transform: translateY(18px);
}

.simm-reveal-on .simm-bold .simm-reveal.is-revealed,
.simm-reveal-on .simm-bold.simm-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity .55s var(--simm-ease), transform .55s var(--simm-ease);
}

/* The grids stagger their own children, capped so the last card is never more
   than a beat behind the first. */
.simm-reveal-on .simm-bold .simm-reveal-stagger .simm-destination,
.simm-reveal-on .simm-bold .simm-reveal-stagger .simm-coverage__tile {
	opacity: 0;
	transform: translateY(14px);
}

.simm-reveal-on .simm-bold .simm-reveal-stagger.is-revealed .simm-destination,
.simm-reveal-on .simm-bold .simm-reveal-stagger.is-revealed .simm-coverage__tile {
	opacity: 1;
	transform: none;
	transition: opacity .45s var(--simm-ease), transform .45s var(--simm-ease);
	transition-delay: calc(var(--simm-reveal-i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
	.simm-bold .simm-reveal,
	.simm-bold .simm-reveal .simm-destination,
	.simm-bold .simm-reveal .simm-coverage__tile {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Deal / campaign pages (Frontend\DealPackages, Deals\PostType)
   ========================================================================== */

/* Editor-written campaign ribbon — deliberately distinct from the computed
   badges so "מומלץ לאומן" never masquerades as a data-derived claim. */
.simm-plan__flag--deal { background: linear-gradient(135deg, var(--simm-navy, #001040), var(--simm-blue-500)); }

/* A single featured card should not stretch to the full content width. */
.simm-deal-plans--single { max-inline-size: 360px; margin-inline: auto; }

/* "החל מ־₪X" inline price — inherits the surrounding typography on purpose. */
.simm-deal-from { font-weight: 700; }

/* Mobile sticky CTA. Hidden on desktop, where the hero CTA is always in
   reach; on a phone it keeps the live starting price one tap away. */
.simm-deal-sticky {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 90;
	display: none;
	padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	border-block-start: 1px solid var(--simm-line, #E5EAF3);
}

.simm-deal-sticky__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .45rem;
	inline-size: 100%;
}

.simm-deal-sticky__price { font-weight: 400; opacity: .92; }

@media (max-width: 767px) {
	.simm-deal-sticky { display: block; }

	/* Keep the page's last content clear of the fixed bar. */
	.simm-deal-sticky ~ * { scroll-margin-block-end: 72px; }
	body:has(.simm-deal-sticky) .elementor-location-footer { padding-block-end: 72px; }
}

/* Multi-column rows on deal pages. Same mechanism as .simm-row-band: with
   this Elementor markup mode a nested container's width setting is not
   emitted, so the column behaviour lives here, on a class the template (or
   an editor) puts on the row container. Mobile-first: one column, then the
   count the modifier names. */
.simm-deal-row,
.simm-deal-row > .e-con-inner {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}

.simm-deal-row > .e-con,
.simm-deal-row > .e-con-inner > .e-con {
	flex: 1 1 100%;
	max-inline-size: none !important;
	min-inline-size: 0;
}

@media (min-width: 768px) {
	.simm-deal-row--3 > .e-con,
	.simm-deal-row--3 > .e-con-inner > .e-con { flex: 1 1 30%; }

	.simm-deal-row--4 > .e-con,
	.simm-deal-row--4 > .e-con-inner > .e-con { flex: 1 1 44%; }
}

@media (min-width: 1025px) {
	.simm-deal-row--4 > .e-con,
	.simm-deal-row--4 > .e-con-inner > .e-con { flex: 1 1 21%; }
}

/* The navy campaign bands (hero, closing CTA). Painted here as well as in the
   container settings: on this Elementor markup mode a boxed container's
   gradient did not reliably reach the closing band, and a white band with
   white copy is not a failure mode a campaign page may have. */
.simm-deal-band {
	background: linear-gradient(160deg, #001040 0%, #0A2A7A 100%) !important;
}

/* Deal grids hold a hand-picked handful, not a full catalog row. With the
   shared fraction tracks, 3 cards stretch across the width 5 occupy on a
   destination page (413px each at desktop) and stop reading as the same
   component. Cap the tracks at the reference card width and center the row,
   so a deal card is the destination card, just fewer of them. */
.simm-deal-plans { justify-content: center; }

@media (min-width: 560px) {
	.simm-deal-plans.simm-plans--1 { grid-template-columns: minmax(0, 250px); }
	.simm-deal-plans.simm-plans--2 { grid-template-columns: repeat(2, minmax(0, 250px)); }
}

@media (min-width: 900px) {
	.simm-deal-plans.simm-plans--3 { grid-template-columns: repeat(3, minmax(0, 250px)); }
	.simm-deal-plans.simm-plans--4 { grid-template-columns: repeat(4, minmax(0, 250px)); }
	.simm-deal-plans.simm-plans--5 { grid-template-columns: repeat(5, minmax(0, 250px)); }
}

/* Five-up deal row (route-networks with all five countries on one line).
   Mid widths fall back to threes, so the odd row is 3+2, never 4+1-stretched. */
@media (min-width: 768px) {
	.simm-deal-row--5 > .e-con,
	.simm-deal-row--5 > .e-con-inner > .e-con { flex: 1 1 30%; }
}

@media (min-width: 1025px) {
	.simm-deal-row--5 > .e-con,
	.simm-deal-row--5 > .e-con-inner > .e-con { flex: 1 1 17%; }
}

/* ==========================================================================
   Refund / cancellation request (Account\RefundRequest)
   ========================================================================== */

/* Understated by design. It is a request for a human to read, not a
   self-service refund button, and it should not compete with the eSIM's own
   controls for attention. */
.simm-refund { margin-block-start: .75rem; }

.simm-refund__toggle {
	cursor: pointer;
	font-size: .82rem;
	color: var(--simm-muted);
	list-style: none;
}

.simm-refund__toggle::-webkit-details-marker { display: none; }
.simm-refund__toggle:hover { color: var(--simm-body); }

.simm-refund__form {
	margin-block-start: .6rem;
	padding: .85rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-md, 10px);
	background: var(--simm-canvas, #f5f8fd);
}

.simm-refund__note { margin: 0 0 .6rem; font-size: .8rem; color: var(--simm-muted); line-height: 1.6; }
.simm-refund__label { display: block; font-size: .8rem; margin-block-end: .3rem; }

.simm-refund__reason {
	inline-size: 100%;
	margin-block-end: .6rem;
	padding: .5rem;
	border: 1px solid var(--simm-line);
	border-radius: 8px;
	font: inherit;
	font-size: .85rem;
	resize: vertical;
}

/* The status a customer sees once the request exists. Never green: nothing
   has been approved, and a success colour would say otherwise. */
.simm-refund__status {
	margin-block-start: .75rem;
	padding: .55rem .75rem;
	border-inline-start: 3px solid var(--simm-warning, #b26a00);
	background: var(--simm-warning-bg, #fff6e6);
	border-radius: 6px;
	font-size: .82rem;
	line-height: 1.6;
}

/* ==========================================================================
   Manual eSIM installation — per platform
   ========================================================================== */

/* Two columns on a roomy screen, stacked on a phone. Stacked is the common
   case: the customer is reading this ON the device they are installing to. */
.simm-install {
	display: grid;
	grid-template-columns: 1fr;
	gap: .9rem;
	margin-block: .75rem;
}

@media (min-width: 720px) {
	.simm-install { grid-template-columns: 1fr 1fr; }
}

.simm-install__block {
	padding: .9rem;
	border: 1px solid var(--simm-line);
	border-radius: var(--simm-r-md, 10px);
	background: var(--simm-surface, #fff);
}

.simm-install__title {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--simm-ink, #001040);
}

.simm-install__steps {
	margin: 0 0 .7rem;
	padding-inline-start: 1.15rem;
	font-size: .84rem;
	line-height: 1.75;
	color: var(--simm-body);
}

.simm-install__steps li { margin-block-end: .15rem; }

/* Value + copy button. The value wraps rather than scrolling: an activation
   string is long and a customer needs to see all of it to trust the copy. */
.simm-install__value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-block-end: .45rem;
	padding: .45rem .55rem;
	background: var(--simm-canvas, #f5f8fd);
	border-radius: 8px;
}

.simm-install__label {
	flex: 0 0 100%;
	font-size: .74rem;
	font-weight: 700;
	color: var(--simm-muted);
}

.simm-install__value code {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-size: .8rem;
	word-break: break-all;
	background: none;
	padding: 0;
}

.simm-install__note {
	margin: .5rem 0 0;
	font-size: .78rem;
	line-height: 1.65;
	color: var(--simm-muted);
}

.simm-install__reference { margin-block-start: .5rem; }

/* ==========================================================================
   My eSIMs — accordion
   ========================================================================== */

/* The header is a real button, so every browser default it brings has to be
   removed deliberately rather than left to fight the card's own styling. */
.simm-esim__heading { margin: 0; }

.simm-esim__toggle {
	display: flex;
	align-items: center;
	gap: .75rem;
	inline-size: 100%;
	/* Comfortably past the 44px touch target, with room for two lines of
	   summary on a narrow screen. */
	min-block-size: 56px;
	padding: .85rem 1rem;
	background: none;
	border: 0;
	border-radius: inherit;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}

.simm-esim__toggle:hover { background: var(--simm-blue-50, #eef3ff); }

.simm-esim__toggle:focus-visible {
	outline: 3px solid var(--simm-blue-400, #3d7bff);
	outline-offset: -3px;
}

/* The summary column takes the slack; status and chevron keep their size. */
.simm-esim__summary {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.simm-esim__toggle .simm-esim__title {
	margin: 0;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--simm-ink, #001040);
	/* Long regional and global package names wrap instead of forcing the row
	   wider than the viewport. */
	overflow-wrap: anywhere;
}

.simm-esim__facts {
	font-size: .8rem;
	line-height: 1.5;
	color: var(--simm-muted);
	overflow-wrap: anywhere;
}

/* The utilisation line in the collapsed header.
   Thin enough not to become a second status badge, and only ever drawn for a
   real allowance — see render_summary_meter(). The colour is a second channel:
   the facts line beside it already says how much is left in words. */
.simm-esim__meter {
	display: block;
	block-size: 4px;
	inline-size: 100%;
	max-inline-size: 15rem;
	margin-block-start: .3rem;
	border-radius: 999px;
	background: var(--simm-line-soft);
	overflow: hidden;
}

.simm-esim__meter > span {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--simm-blue-500);
	transition: inline-size .2s ease;
}

.simm-esim__meter.is-low > span { background: var(--simm-warning); }
.simm-esim__meter.is-out > span { background: var(--simm-danger); }

.simm-esim__toggle .simm-esim__status { flex: 0 0 auto; align-self: flex-start; }

/* Logical rotation: the chevron points down when closed and up when open, so
   it means the same thing in both writing directions and needs no mirroring. */
.simm-esim__chevron {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	color: var(--simm-muted);
	transition: transform .18s var(--simm-ease, ease);
}

.simm-esim.is-open > .simm-esim__heading .simm-esim__chevron { transform: rotate(180deg); }

/* A modest distinction for the open card — a tinted header and a slightly
   stronger border, not a colour change that redefines the component. */
.simm-esim.is-open { border-color: var(--simm-blue-200, #b8ceff); }
.simm-esim.is-open > .simm-esim__heading .simm-esim__toggle { background: var(--simm-blue-50, #eef3ff); }

.simm-esim__panel {
	padding: 0 1rem 1rem;
	border-block-start: 1px solid var(--simm-line);
}

/* `hidden` must win over the card's own display rules, or a collapsed panel
   stays visible while its controls are correctly out of the tab order. */
.simm-esim__panel[hidden] { display: none; }

/* Opening is a short fade-and-settle. No height animation: the panels contain
   a QR and a usage bar, and animating their height makes the whole page jump. */
@media (prefers-reduced-motion: no-preference) {
	.simm-esim__panel:not([hidden]) { animation: simm-esim-open .18s var(--simm-ease, ease); }

	@keyframes simm-esim-open {
		from { opacity: 0; transform: translateY(-2px); }
		to   { opacity: 1; transform: none; }
	}
}

@media (max-width: 480px) {
	.simm-esim__toggle { gap: .5rem; padding: .8rem .75rem; }
	.simm-esim__panel { padding-inline: .75rem; }
	/* The status pill drops under the summary rather than squeezing the title
	   into a two-character column. */
	.simm-esim__toggle { flex-wrap: wrap; }
	.simm-esim__summary { flex: 1 1 100%; }
	.simm-esim__toggle .simm-esim__status { order: 3; }
	.simm-esim__chevron { order: 2; margin-inline-start: auto; }
}

/* =========================================================================
   Mobile catalog pass (2026-08-29). His phone screenshot: one plan card
   filled the whole screen, so comparing twelve packages meant scrolling
   blind; the filter row was gone by the second card; and the hero intro
   ended in a clipped "…" mid-sentence. Desktop is untouched — the card
   rules live behind the same 559px line the one-column grid uses.
   ========================================================================= */

@media (max-width: 559px) {
	/* Compact cards: two-and-a-bit per screen instead of one. */
	.simm-plan { padding: .8rem .9rem .9rem; }

	.simm-plan__data { font-size: 1.8rem; }

	/* "סה״כ גלישה" restates what GB already says; on a phone the line is
	   worth more than the words. Kept for screen readers. */
	.simm-plan__data-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.simm-plan__rule { margin-block: .5rem; }
	.simm-plan__tech { font-size: .74rem; }
	.simm-plan__tech span:last-child { font-size: .72rem; }
	.simm-plan__coverage-wrap { margin-block-start: .35rem; }
	.simm-plan__price { padding-block-start: .45rem; }
	.simm-plan__price-value { font-size: 1.35rem; }
	.simm-plan .simm-btn { margin-block-start: .5rem; }
}

@media (max-width: 767px) {
	/* The filter-and-sort row travels with the list it controls — by the
	   eighth card it used to be a long scroll away. */
	/* NO backdrop-filter here, ever: a filter on an ancestor becomes the
	   containing block for position:fixed descendants, and the filter sheet
	   and its backdrop are exactly that — with the blur they rendered
	   trapped inside this strip while the body scroll-lock froze the page
	   (his report, 2026-08-29). A solid background does the same visual job
	   with none of the physics. */
	.simm-plans-actions {
		position: sticky;
		/* Below the floating header (Elementor sticky effect, ~61px) — at 0
		   the bar stuck perfectly and sat entirely BEHIND it. */
		inset-block-start: 64px;
		z-index: 30;
		background: var(--simm-surface);
		box-shadow: 0 6px 14px -12px rgba(0, 16, 64, .35);
		padding-block: .5rem !important;
	}

	/* The hero sentence ends like a sentence. Three lines hold the full
	   intro for almost every destination, and min-block-size keeps the
	   reserved height uniform — which is what the two-line clamp was
	   really protecting. */
	.simm-hero-copy .elementor-widget-text-editor p {
		-webkit-line-clamp: 3;
		line-clamp: 3;
		font-size: 15px;
		min-block-size: calc(3 * 1.7em);
	}

	/* The chat bubble must not sit on the last card. */
	.simm-plans-outer { padding-block-end: 90px !important; }

	/* The theme paints bare <button> magenta; the sheet's close button needs
	   the element-qualified selector to out-rank that (same trap as the plan
	   cards' open button). */
	button.simm-filterbar__close {
		background: transparent !important;
		color: var(--simm-body) !important;
	}

	/* While a sheet is open the chat bubble sat exactly on the sheet's apply
	   and reset buttons — the one moment it must get out of the way. */
	html.simm-sheet-open .woot-widget-bubble,
	html.simm-sheet-open .woot--bubble-holder {
		display: none !important;
	}

	/* Deal pages carry a sticky buy bar along the bottom; the chat bubble sat
	   right on top of it (his screenshot, 29.08). Lift the bubble above. */
	body.single-simm_deal .woot--bubble-holder,
	body.single-simm_deal .woot-widget-bubble {
		bottom: 84px !important;
	}
}

/* Chatwoot's expanded launcher pads its text on one side only — the side that
   is correct in LTR. On the Hebrew pages the far (left) end got zero padding
   and the question mark clipped into the rounded corner (his screenshot,
   29.08). Swap the padding for RTL; English keeps the SDK's own values. */
html[dir="rtl"] #woot-widget--expanded__text {
	padding: 0 8px 0 20px !important;
}

@media (max-width: 767px) {
}

/* The trip heading on /packages/ names every chosen destination; with two or
   three countries the hero-size line wrapped mid-pair — a flag ending one line,
   its country opening the next (his screenshot, 30.08). The tag now wraps each
   flag+name pair in .simm-trip-dest and counts the list on the wrapper, so
   breaks land only between destinations and the size steps down as the trip
   grows. Sizes are em-relative on purpose: they scale with the heading's own
   desktop/tablet/mobile sizes instead of fighting them. */
.simm-trip-dest { white-space: nowrap; }
.simm-pkg-title .simm-trip-title--n2 { font-size: .84em; }
.simm-pkg-title .simm-trip-title--n3plus { font-size: .78em; }

/* Checkout is the only stop in the buy flow (the button skips the cart page),
   so each review line carries its own remove link. */
.woocommerce-checkout-review-order a.simm-cart-remove {
	font-size: 13px;
	font-weight: 400;
	color: #B42318;
	text-decoration: underline;
	white-space: nowrap;
}

/* Region-page editorial content (post_content below the plans): the theme
   paints content links magenta; brand blue, like everywhere else we caught it. */
body.single-simm_region .elementor-widget-theme-post-content a {
	color: #0050F8;
	font-weight: 600;
}

/* Region pages, designed pass (2026-08-30): the editorial below the plans is
   composed of template bands now, not post prose. */
@media (min-width: 768px) {
	.simm-deal-row--2 > .e-con,
	.simm-deal-row--2 > .e-con-inner > .e-con { flex: 1 1 44%; }
}

/* The popular-destination links come from post_content as one paragraph;
   rendered as tappable chips. */
body.single-simm_region .simm-region-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
}

body.single-simm_region .simm-region-links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid #D7E0F0;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0050F8;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 38, 95, .06);
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.single-simm_region .simm-region-links a:hover {
	border-color: #0050F8;
	box-shadow: 0 3px 8px rgba(16, 38, 95, .12);
}

/* The links paragraph swallows the separators the chips replaced. */
body.single-simm_region .simm-region-links { font-size: 0; }
body.single-simm_region .simm-region-links a { font-size: 15px; }

/* Elementor's container CSS out-specifies a bare class, so the row props are
   forced — same lesson the region CTA taught via its data-id fallback. */
.e-con.simm-region-ctarow {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.e-con.simm-region-ctarow .elementor-widget-button { width: auto; }

/* Elementor gives each widget wrapper 100% width, which stacks the CTA pair;
   shrink-wrap them so the row centres. And the band tints are painted here as
   well as in the container settings — same markup-mode trap as the deal bands. */
.simm-region-ctarow .elementor-widget-button { width: auto; }
.e-con[data-id="rgn2why"],
.e-con.simm-region-band-tint { background-color: #EEF3FF !important; }
.e-con[data-id="rgn2tip"],
.e-con.simm-region-band-canvas { background-color: #F5F8FD !important; }

/* Belt and braces for the CTA pair: address the container by data-id too. */
.e-con[data-id="rgn2ctarow"] {
	--flex-direction: row !important;
	flex-direction: row !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.e-con[data-id="rgn2ctarow"] .elementor-widget-button { width: auto; }

/* Home design pass (2026-08-30): color and motion, matching the deal/region
   pages' language. */

/* The hero photo on phones rendered BELOW the search and CTA, cropped, adding
   a screen of scroll for nothing (his call: remove on mobile, keep on desktop). */
@media (max-width: 767px) {
	.simm-hero-media { display: none !important; }
}

/* How-it-works step badges, icon variant: the circle carries the icon and the
   step number shrinks to a corner chip. */
.simm-step__num--icon {
	position: relative;
	inline-size: 52px;
	block-size: 52px;
}

.simm-step__num--icon i,
.simm-step__num--icon svg {
	font-size: 22px;
	inline-size: 22px;
	block-size: 22px;
	color: var(--simm-blue-500);
	fill: var(--simm-blue-500);
}

.simm-step__count {
	position: absolute;
	inset-inline-end: -6px;
	inset-block-start: -6px;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: var(--simm-blue-500);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	display: grid;
	place-items: center;
}

/* Footer links in two columns on desktop — one long column wasted the band. */
@media (min-width: 768px) {
	.elementor-location-footer .elementor-nav-menu--layout-vertical .elementor-nav-menu {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, auto));
		column-gap: 32px;
		row-gap: 2px;
	}
}

/* Country pages (2026-08-30 "יאלה" pass): the mobile sticky buy bar reuses the
   deal bar; the chat bubble climbs above it, as on deal pages. */
@media (max-width: 767px) {
	body.single-simm_country .woot--bubble-holder,
	body.single-simm_country .woot-widget-bubble { bottom: 84px !important; }
	body.single-simm_country .simm-plans-outer { scroll-margin-top: 70px; }
}

/* Guide-link chips — the region pages' pill look, reusable anywhere. */
.simm-chip-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	font-size: 0;
}

.simm-chip-links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid #D7E0F0;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0050F8;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 38, 95, .06);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.simm-chip-links a:hover {
	border-color: #0050F8;
	box-shadow: 0 3px 8px rgba(16, 38, 95, .12);
}

/* Header on a 14-inch laptop (his screenshot, 31.08).
   The header row hands the menu a fixed 400px column while the menu needs
   about 475px, so in RTL its last item ("מדריכים") overflowed leftward and
   printed on top of the logo — at 1280px by 58px, at 1440px just touching.
   The items give back the space instead: tighter side padding under a wide
   desktop, and no wrapping, so the row can never reach the wordmark. */
@media (min-width: 1025px) {
	/* The row splits into three EQUAL 400px columns, so the wordmark is given
	   400px for the 150px it uses while the menu is squeezed into 400px for
	   the ~475px it needs — and in RTL the surplus spills leftward, over the
	   logo. Sizing each column to its own content and spreading them along
	   the row fixes the cause rather than shaving letters. */
	.simm-row-header > .e-con-inner {
		justify-content: space-between;
	}

	.simm-row-header > .e-con-inner > .e-con {
		inline-size: auto;
		flex: 0 1 auto;
	}

	.simm-row-header .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
	}
}

/* The social sign-in buttons under the customer login form.
   Nextend's own WooCommerce placement is a paid feature, so the button comes
   from its free shortcode; this only gives it the separation and the centring
   the paid version would have. Its internal flex layout is left alone — every
   attempt to force it full width pushed the Google mark onto its own line. */
.simm-auth__social {
	margin-block-start: 18px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--simm-line, #E5EAF3);
	text-align: center;
}

.simm-auth__social .nsl-container {
	padding: 0;
	text-align: center;
}

.simm-auth__social .nsl-container .nsl-container-buttons a .nsl-button {
	min-block-size: 44px;
	border-radius: 10px !important;
}