/* AMSAFEX AutoSupply — configurator.css (v0.2.0)
   Reference-matched design: green SaaS palette, gold savings card,
   compact one-screen layout. Scoped under .amsafex-cfg. */

.amsafex-cfg {
	--as-green: #0b7a3b;
	--as-green-dark: #075c2c;
	--as-green-tint: #e8f5ee;
	--as-green-soft: #d4ecdf;
	--as-ink: #101828;
	--as-muted: #667085;
	--as-line: #e7eaee;
	--as-bg: #f6f7f9;
	--as-white: #ffffff;
	--as-gold-border: #ecd390;
	--as-gold-bg: #fffaef; /* exact cream of the bundled piggy image */
	--as-mint: #eef7f2;
	--as-red: #e5484d;
	--as-r-sm: 8px;
	--as-r: 12px;
	--as-r-lg: 16px;
	--as-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);

	font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--as-ink);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	grid-template-areas: "top top" "main side";
	gap: 12px 16px;
	max-width: 1480px;
	margin: 0 auto;
}
.amsafex-cfg, .amsafex-cfg *, .amsafex-cfg *::before, .amsafex-cfg *::after { box-sizing: border-box; }
.amsafex-cfg button { font-family: inherit; }
.amsafex-cfg h2, .amsafex-cfg h3, .amsafex-cfg h4, .amsafex-cfg p { margin: 0; }
body.as-noscroll { overflow: hidden; }

/* ============ empty / error / skeleton ============ */
.as-empty, .as-error {
	background: var(--as-white);
	border: 1px dashed var(--as-line);
	border-radius: var(--as-r);
	padding: 22px 16px;
	text-align: center;
	color: var(--as-muted);
	font-size: 13px;
}
.as-empty strong { display: block; color: var(--as-ink); margin-bottom: 3px; }
.as-error { color: #a13030; border-color: #eccfcf; background: #fbf3f3; }
.as-empty--modal { grid-column: 1 / -1; border: 0; }

.as-skel {
	border-radius: var(--as-r);
	background: linear-gradient(90deg, #eef0f3 25%, #e4e7eb 50%, #eef0f3 75%);
	background-size: 200% 100%;
	animation: as-shimmer 1.1s infinite linear;
}
.as-skel--hero { height: 128px; margin-bottom: 10px; }
.as-skel--row { height: 88px; margin-bottom: 8px; }
.as-skel--panel { height: 520px; }
@keyframes as-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .as-skel { animation: none; } }

/* ============ top: tabs + industry + trust ============ */
.as-top { grid-area: top; display: flex; align-items: center; min-width: 0; }
.as-tabs { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; width: 100%; padding: 2px; }

.as-tab {
	flex: 1 1 0;
	justify-content: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 7px 15px 7px 8px;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
	font-size: 13px;
	font-weight: 600;
	color: var(--as-ink);
	cursor: pointer;
	white-space: nowrap;
	box-shadow: var(--as-shadow);
	transition: all .15s;
}
.as-tab__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.as-tab__iconwrap {
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--as-green-tint);
	border-radius: 50%;
	flex: 0 0 auto;
}
.as-tab__iconwrap--dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--as-green); }
.as-tab__icon { width: 16px; height: 16px; object-fit: contain; }
.as-tab:hover { border-color: var(--as-green); }
.as-tab.is-active { background: var(--as-green); border-color: var(--as-green); color: #fff; }
.as-tab.is-active .as-tab__iconwrap { background: rgba(255,255,255,.22); }
.as-tab:focus-visible { outline: 2px solid var(--as-green); outline-offset: 2px; }

.as-industry { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.as-industry__btn {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	white-space: nowrap;
	padding: 9px 14px;
	background: #fffdf3;
	border: 1.5px solid #e9d477;
	border-radius: var(--as-r);
	color: var(--as-green);
	font-size: 13px; font-weight: 700;
	cursor: pointer;
	box-shadow: var(--as-shadow);
	transition: all .15s;
}
.as-industry__btn:hover { border-color: #d9bd4a; }
.as-industry__chev { transition: transform .18s; }
.as-industry__btn[aria-expanded="true"] .as-industry__chev { transform: rotate(180deg); }
.as-industry__panel {
	position: absolute;
	top: calc(100% + 6px); right: 0;
	min-width: 250px; max-height: 320px;
	overflow-y: auto;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
	padding: 6px;
	z-index: 60;
	animation: as-drop .16s ease-out;
}
@keyframes as-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.as-industry__item {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0; background: transparent;
	border-radius: var(--as-r-sm);
	font-size: 13px; font-weight: 500; color: var(--as-ink);
	cursor: pointer; text-align: left;
}
.as-industry__iconwrap {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--as-green-tint);
	border-radius: 8px;
	flex: 0 0 auto;
}
.as-industry__iconwrap img { width: 17px; height: 17px; object-fit: contain; }
.as-industry__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--as-green); }
.as-industry__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-industry__check { color: var(--as-green); opacity: 0; flex: 0 0 auto; }
.as-industry__item:hover { background: var(--as-green-tint); }
.as-industry__item.is-active { background: var(--as-green-tint); color: var(--as-green); font-weight: 700; }
.as-industry__item.is-active .as-industry__check { opacity: 1; }

.as-trust {
	display: flex; align-items: center; gap: 9px;
	margin-bottom: 12px;
	background: var(--as-mint);
	border: 1px solid #dcefe4;
	border-radius: var(--as-r);
	padding: 9px 14px;
	font-size: 12px; font-weight: 600;
	color: var(--as-ink);
	box-shadow: var(--as-shadow);
}
.as-trust svg { color: var(--as-green); flex: 0 0 auto; }

/* ============ left main ============ */
.as-main { grid-area: main; min-width: 0; }

/* hero */
.as-hero {
	position: relative;
	display: flex; align-items: stretch;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-lg);
	overflow: hidden;
	margin-bottom: 10px;
	min-height: 118px;
	box-shadow: var(--as-shadow);
}
.as-hero__text { flex: 1 1 55%; padding: 16px 18px; z-index: 2; }
.as-hero__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.as-hero__titlerow h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.as-hero__badge {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--as-green-tint); color: var(--as-green);
	font-size: 11px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px;
}
.as-hero__desc { margin-top: 5px; font-size: 13px; color: var(--as-muted); }
.as-hero__rec {
	margin-top: 7px;
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 600; color: var(--as-ink);
}
.as-hero__rec svg { color: var(--as-muted); }
.as-hero__rec-icon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
.as-hero__sep { color: var(--as-muted); margin: 0 7px; font-weight: 700; }
.as-hero__img {
	flex: 1 1 45%;
	background-size: cover;
	background-position: center;
	position: relative;
}
.as-hero__img::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--as-white) 0%, rgba(255,255,255,.35) 28%, rgba(255,255,255,0) 60%);
}

/* configurator card */
.as-config {
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-lg);
	padding: 14px;
	box-shadow: var(--as-shadow);
}
.as-config__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.as-config__title { display: flex; gap: 9px; }
.as-config__title svg { color: var(--as-green); margin-top: 2px; flex: 0 0 auto; }
.as-config__title h3 { font-size: 16px; font-weight: 700; }
.as-config__title p { font-size: 12px; color: var(--as-muted); margin-top: 1px; }
.as-how {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 11px;
	background: var(--as-bg);
	border: 1px solid var(--as-line);
	border-radius: 999px;
	font-size: 12px; font-weight: 600; color: var(--as-ink);
	cursor: pointer; white-space: nowrap;
}
.as-how:hover { border-color: var(--as-green); color: var(--as-green); }
.as-how svg { color: var(--as-green); }

/* product row — compact */
.as-row {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	background: var(--as-bg);
	border: 1px solid transparent;
	border-radius: var(--as-r);
	padding: 9px 12px 9px 9px;
	margin-bottom: 8px;
	transition: border-color .15s;
}
.as-row:hover { border-color: var(--as-line); }
.as-row.is-oos { opacity: .55; }

.as-row__imgwrap { position: relative; width: 74px; height: 66px; }
.as-row__img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--as-r-sm);
	background: var(--as-white);
	border: 1px solid var(--as-line);
}
.as-row__remove {
	position: absolute; top: -6px; left: -6px;
	width: 19px; height: 19px;
	display: flex; align-items: center; justify-content: center;
	background: var(--as-red); color: #fff;
	border: 2px solid var(--as-white);
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
	transition: transform .12s;
	padding: 0;
}
.as-row__remove:hover { transform: scale(1.12); }

.as-row__info { min-width: 0; }
.as-row__name {
	font-size: 14px; font-weight: 700;
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.as-row__badge {
	background: var(--as-green-tint); color: var(--as-green);
	font-size: 10px; font-weight: 700;
	padding: 2px 7px; border-radius: 999px;
	white-space: nowrap;
}
.as-row__oos { color: var(--as-red); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.as-row__desc {
	font-size: 12px; color: var(--as-muted);
	margin-top: 1px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.as-row__variation {
	margin-top: 6px;
	padding: 5px 9px;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	background: var(--as-white);
	font-size: 12px; font-family: inherit;
	max-width: 150px;
}

/* qty column */
.as-row__qty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.as-stepper {
	display: inline-flex; align-items: center;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	overflow: hidden;
}
.as-stepper__btn {
	width: 30px; height: 32px;
	border: 0; background: transparent;
	font-size: 16px; font-weight: 700; color: var(--as-ink);
	cursor: pointer;
}
.as-stepper__btn:hover { background: var(--as-bg); }
.as-stepper__input {
	width: 74px; height: 32px;
	padding: 0 2px;
	border: 0; border-left: 1px solid var(--as-line); border-right: 1px solid var(--as-line);
	text-align: center;
	font-size: 14px; font-weight: 700; font-family: inherit;
	color: var(--as-ink);
}
.as-stepper__input:focus { outline: 2px solid var(--as-green); outline-offset: -2px; }
.as-qty-fixed { font-size: 12px; color: var(--as-muted); font-weight: 600; }

.as-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.as-chip {
	min-width: 34px;
	padding: 3px 8px;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	background: var(--as-white);
	font-size: 11px; font-weight: 700;
	color: var(--as-ink);
	cursor: pointer;
	transition: all .12s;
}
.as-chip:hover { border-color: var(--as-green); color: var(--as-green); }
.as-chip.is-on { background: var(--as-green); border-color: var(--as-green); color: #fff; }

/* price column */
.as-row__price { text-align: right; min-width: 108px; }
.as-row__price s { display: block; color: var(--as-muted); font-size: 12px; }
.as-row__price strong { display: block; font-size: 15px; font-weight: 700; }
.as-row__pct {
	display: inline-block;
	margin-top: 3px;
	background: var(--as-green-tint); color: var(--as-green);
	font-size: 10.5px; font-weight: 700;
	padding: 2px 8px; border-radius: 999px;
}

/* restore bar */
.as-restore__item {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff8f0;
	border: 1px dashed #edd6b8;
	border-radius: var(--as-r-sm);
	padding: 6px 12px;
	margin-bottom: 6px;
	font-size: 12px; color: var(--as-muted);
}
.as-restore__item button {
	border: 0; background: transparent;
	color: var(--as-green); font-size: 12px; font-weight: 700;
	cursor: pointer; text-decoration: underline;
}

/* add more */
.as-addmore {
	width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 12px;
	margin-top: 2px;
	background: var(--as-green-tint);
	border: 1.5px dashed var(--as-green);
	border-radius: var(--as-r);
	cursor: pointer;
	transition: all .15s;
}
.as-addmore:hover { background: var(--as-green-soft); border-color: var(--as-green-dark); box-shadow: 0 2px 10px rgba(11,122,59,.12); }
.as-addmore__icon {
	width: 22px; height: 22px;
	display: flex; align-items: center; justify-content: center;
	background: var(--as-green); color: #fff;
	border-radius: 50%;
	font-size: 15px; font-weight: 700;
	margin-bottom: 3px;
}
.as-addmore__text { font-size: 14px; font-weight: 700; color: var(--as-green); }
.as-addmore__sub { font-size: 11.5px; color: var(--as-muted); }

/* benefits */
.as-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 10px;
}
.as-benefit {
	display: flex; gap: 8px; align-items: flex-start;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
	padding: 10px 11px;
	box-shadow: var(--as-shadow);
}
.as-benefit svg { color: var(--as-green); flex: 0 0 auto; margin-top: 1px; }
.as-benefit strong { display: block; font-size: 12px; font-weight: 700; }
.as-benefit span { font-size: 11px; color: var(--as-muted); line-height: 1.35; }

/* ============ right sidebar ============ */
.as-side { grid-area: side; position: sticky; top: 16px; align-self: start; min-width: 0; }

.as-panel {
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-lg);
	padding: 16px;
	box-shadow: var(--as-shadow);
}
.as-panel__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.as-panel__line {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 6px 0;
	font-size: 13px; color: var(--as-muted);
}
.as-panel__line s { font-weight: 600; }
.as-panel__pay {
	display: flex; justify-content: space-between; align-items: center;
	background: var(--as-green-tint);
	border-radius: var(--as-r-sm);
	padding: 10px 12px;
	margin: 4px 0 10px;
	font-size: 13px; font-weight: 700; color: var(--as-ink);
}
.as-panel__pay em { font-style: normal; color: var(--as-green); font-weight: 700; }
.as-panel__pay strong { font-size: 18px; color: var(--as-green-dark); }

.as-save {
	background: var(--as-gold-bg);
	border: 1.5px solid var(--as-gold-border);
	border-radius: var(--as-r);
	padding: 12px 14px;
	margin-bottom: 10px;
}
.as-save__head { display: flex; justify-content: space-between; align-items: center; }
.as-save__head span:first-child { font-size: 14px; font-weight: 700; }
.as-save__pill {
	background: #f3e3ae; color: #8a6a12;
	font-size: 11px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px;
}
.as-save__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: nowrap; }
.as-save__amt {
	font-size: 34px; font-weight: 700; letter-spacing: -.02em;
	color: var(--as-green-dark);
	line-height: 1.1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	flex: 1 1 auto;
	min-width: 0;
}
.as-piggy { flex: 0 0 auto; width: clamp(78px, 24vw, 122px); height: auto; margin: -10px -4px -6px 0; }

.as-panel__annual { border-top: 1px solid var(--as-line); margin-top: 2px; }
.as-panel__annual strong { color: var(--as-green-dark); font-size: 14px; }

.as-reassure {
	display: flex; gap: 9px; align-items: flex-start;
	background: var(--as-mint);
	border-radius: var(--as-r-sm);
	padding: 10px 12px;
	margin: 8px 0 10px;
}
.as-reassure svg { color: var(--as-green); flex: 0 0 auto; margin-top: 1px; }
.as-reassure p { font-size: 12px; color: var(--as-muted); line-height: 1.45; }

.as-panel__label {
	display: block;
	font-size: 13px; font-weight: 700;
	margin-bottom: 5px;
}
.as-freq-wrap {
	position: relative;
	display: flex; align-items: center;
}
.as-freq-wrap svg { position: absolute; left: 11px; color: var(--as-muted); pointer-events: none; }
.as-freq {
	width: 100%;
	padding: 10px 12px 10px 33px;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	background: var(--as-white);
	font-size: 13px; font-weight: 600; font-family: inherit;
	color: var(--as-ink);
	appearance: auto;
}
.as-freq-custom {
	width: 100%;
	margin-top: 6px;
	padding: 9px 12px;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	font-size: 13px; font-family: inherit;
}

.as-cta {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 12px;
	padding: 13px 16px;
	background: var(--as-green);
	color: #fff;
	border: 0;
	border-radius: var(--as-r);
	font-size: 15px; font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(11, 122, 59, .28);
	transition: background .15s, transform .1s;
}
.as-cta:hover { background: var(--as-green-dark); }
.as-cta:active { transform: scale(.99); }
.as-cta:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; }
.as-cta__sub { margin-top: 8px; text-align: center; font-size: 11px; color: var(--as-muted); font-weight: 600; }
.as-panel__note { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--as-line); font-size: 10.5px; color: var(--as-muted); }
.as-panel__note em { font-style: normal; font-weight: 700; }

/* suggested */
.as-sug {
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-lg);
	padding: 13px 14px;
	margin-top: 12px;
	box-shadow: var(--as-shadow);
}
.as-sug h4 { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.as-sug__scroll {
	display: flex; gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}
.as-sug__card {
	flex: 0 0 106px;
	background: var(--as-bg);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	padding: 8px;
	text-align: center;
}
.as-sug__card img {
	width: 54px; height: 54px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--as-white);
}
.as-sug__name { font-size: 10.5px; font-weight: 600; margin-top: 5px; line-height: 1.3; min-height: 27px; }
.as-sug__price { font-size: 12px; font-weight: 700; margin-top: 2px; }
.as-sug__add {
	width: 100%;
	margin-top: 6px;
	padding: 5px;
	background: var(--as-white);
	border: 1px solid var(--as-green);
	border-radius: 6px;
	color: var(--as-green);
	font-size: 11px; font-weight: 700;
	cursor: pointer;
	transition: all .12s;
}
.as-sug__add:hover { background: var(--as-green); color: #fff; }

/* ============ modal ============ */
.as-modal[hidden] { display: none; }
.as-modal { position: fixed; inset: 0; z-index: 9998; }
.as-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(16, 24, 40, .45);
	backdrop-filter: blur(3px);
}
.as-modal__box {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: min(860px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 48px));
	display: flex; flex-direction: column;
	background: var(--as-white);
	border-radius: var(--as-r-lg);
	box-shadow: 0 24px 64px rgba(16, 24, 40, .3);
	padding: 18px 18px 28px;
	animation: as-pop .18s ease-out;
	font-family: 'IBM Plex Sans Arabic', sans-serif;
}
@keyframes as-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.as-modal__box--how { width: min(460px, calc(100vw - 32px)); }
.as-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.as-modal__head h3 { font-size: 17px; font-weight: 700; }
.as-modal__close {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--as-line);
	border-radius: 50%;
	background: var(--as-white);
	color: var(--as-ink);
	cursor: pointer;
}
.as-modal__close:hover { background: var(--as-bg); }
.as-modal__search {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	font-size: 13px; font-family: inherit;
	margin-bottom: 8px;
}
.as-modal__search:focus { outline: 2px solid var(--as-green); outline-offset: -1px; }
.as-modal__cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.as-modal__cat {
	padding: 5px 12px;
	border: 1px solid var(--as-line);
	border-radius: 999px;
	background: var(--as-white);
	font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.as-modal__cat.is-on { background: var(--as-green); border-color: var(--as-green); color: #fff; }
.as-modal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	overflow-y: auto;
	padding: 2px 2px 8px 2px;
}
.as-modal__card {
	background: var(--as-bg);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
	padding: 10px;
	text-align: center;
	display: flex; flex-direction: column;
}
.as-modal__card.is-oos { opacity: .55; }
.as-modal__card img {
	width: 74px; height: 74px;
	object-fit: cover;
	border-radius: var(--as-r-sm);
	background: var(--as-white);
	margin: 0 auto;
}
.as-modal__name { font-size: 12px; font-weight: 600; margin-top: 7px; line-height: 1.3; flex: 1; }
.as-modal__price { font-size: 13px; font-weight: 700; margin-top: 3px; }
.as-modal__variation {
	margin-top: 6px;
	padding: 5px 8px;
	border: 1px solid var(--as-line);
	border-radius: 6px;
	font-size: 11.5px; font-family: inherit;
	background: var(--as-white);
}
.as-modal__add {
	margin-top: 7px;
	padding: 7px;
	background: var(--as-green);
	border: 0;
	border-radius: var(--as-r-sm);
	color: #fff;
	font-size: 12px; font-weight: 700;
	cursor: pointer;
}
.as-modal__add:hover { background: var(--as-green-dark); }
.as-modal__add.is-done { background: var(--as-green-tint); color: var(--as-green); cursor: default; }
.as-modal__oos { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--as-red); text-transform: uppercase; }

.as-how__step { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }
.as-how__step span {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	background: var(--as-green-tint); color: var(--as-green);
	border-radius: 50%;
	font-size: 12px; font-weight: 700;
}
.as-how__step p { font-size: 13px; color: var(--as-ink); line-height: 1.5; }

/* ============ toast ============ */
.as-toast {
	position: fixed;
	left: 50%; bottom: 84px;
	transform: translateX(-50%) translateY(8px);
	background: var(--as-ink, #101828); color: #fff;
	padding: 11px 17px;
	border-radius: 10px;
	font-size: 13px;
	font-family: 'IBM Plex Sans Arabic', sans-serif;
	opacity: 0;
	transition: opacity .22s, transform .22s;
	z-index: 9999;
	max-width: 90vw; text-align: center;
}
.as-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ mobile sticky CTA ============ */
.as-sticky { display: none; }

/* ============ responsive ============ */
@media (max-width: 1180px) {
	.amsafex-cfg { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 960px) {
	.amsafex-cfg {
		grid-template-columns: 1fr;
		grid-template-areas: "top" "main" "side";
		/* full-bleed breakout: perfectly equal left/right margins regardless of theme container */
		width: 100vw;
		max-width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		padding: 0 14px;
		overflow-x: clip;
	}
	.as-side { position: static; }
	.as-benefits { grid-template-columns: repeat(2, 1fr); }

	/* tab row: dropdown first & full width, then kit tabs 2x2 — no squeeze, no overlap */
	.as-tabs { position: relative; gap: 8px; }
	.as-industry { flex: 1 1 100%; position: static; }
	.as-industry__btn { width: 100%; justify-content: center; }
	.as-industry__panel { left: 0; right: 0; top: calc(100% + 6px); min-width: 0; max-height: 300px; }
	.as-tab { flex: 1 1 calc(50% - 4px); min-width: 0; }
	.as-tab__label { max-width: none; }
}

@media (max-width: 640px) {
	.amsafex-cfg { font-size: 13px; gap: 10px; padding: 0 12px; }
	.as-trust { font-size: 11px; }
	.as-tabs { gap: 7px; }

	/* compact cards + centered content */
	.as-config { padding: 12px; }
	.as-panel { padding: 14px; }
	.as-hero__text { padding: 13px 14px; }
	.as-save__amt { font-size: clamp(21px, 8vw, 30px); }
	.as-benefit { padding: 9px 10px; }

	.as-hero { flex-direction: column-reverse; min-height: 0; }
	.as-hero__img { min-height: 110px; flex-basis: auto; }
	.as-hero__img::before { background: linear-gradient(0deg, var(--as-white) 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 75%); }

	.as-row { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; padding: 9px; }
	.as-row__imgwrap { width: 64px; height: 58px; grid-row: 1 / 3; align-self: start; }
	.as-row__qty { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-top: 7px; }
	.as-row__price { grid-column: 2; text-align: left; margin-top: 6px; min-width: 0; }
	.as-row__price s { display: inline; margin-right: 7px; }
	.as-row__price strong { display: inline; }
	.as-row__pct { margin-left: 7px; }

	.as-benefits { grid-template-columns: 1fr 1fr; }

	.as-sticky {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		background: var(--as-white);
		border-top: 1px solid var(--as-line);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		z-index: 998;
		box-shadow: 0 -6px 20px rgba(16, 24, 40, .1);
		font-family: 'IBM Plex Sans Arabic', sans-serif;
	}
	.as-sticky[hidden] { display: none; }
	.as-sticky__total { font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--as-green-dark); }
	.as-sticky__total s { color: var(--as-muted); font-size: 12px; font-weight: 500; }
	.as-cta--sticky { margin-top: 0; flex: 1; padding: 12px; font-size: 14px; }
}


/* ============ custom dropdown (rows / frequency / popup) ============ */
.as-dd { position: relative; min-width: 0; }
.as-dd--row { max-width: 170px; margin-top: 6px; }
.as-dd--freq { width: 100%; }
.as-dd__btn {
	width: 100%;
	display: flex; align-items: center; gap: 8px;
	padding: 8px 11px;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-sm);
	font-size: 12.5px; font-weight: 600; font-family: inherit;
	color: var(--as-ink);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	text-align: left;
}
.as-dd--freq .as-dd__btn { padding: 10px 12px; font-size: 13px; }
.as-dd__btn:hover { border-color: var(--as-green); }
.as-dd.is-open .as-dd__btn { border-color: var(--as-green); box-shadow: 0 0 0 3px rgba(11,122,59,.09); }
.as-dd__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-dd__chev { flex: 0 0 auto; color: var(--as-muted); transition: transform .18s; }
.as-dd.is-open .as-dd__chev { transform: rotate(180deg); }
.as-dd__panel {
	position: absolute;
	top: calc(100% + 6px); left: 0; right: 0;
	min-width: 100%;
	max-height: 236px;
	overflow-y: auto;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
	padding: 5px;
	z-index: 90;
	animation: as-drop .16s ease-out;
}
.as-dd__item {
	display: flex; align-items: center; gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0; background: transparent;
	border-radius: var(--as-r-sm);
	font-size: 12.5px; font-weight: 500; font-family: inherit;
	color: var(--as-ink);
	cursor: pointer;
	text-align: left;
}
.as-dd__itemlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-dd__check { color: var(--as-green); opacity: 0; flex: 0 0 auto; }
.as-dd__item:hover { background: var(--as-green-tint); }
.as-dd__item.is-active { background: var(--as-green-tint); color: var(--as-green); font-weight: 700; }
.as-dd__item.is-active .as-dd__check { opacity: 1; }
.as-dd__item.is-disabled { opacity: .45; cursor: not-allowed; }
.as-dd-slot--modal .as-dd { max-width: none; margin-top: 6px; }


/* ============ Phase C: coupon notice, CTA states, Cart Check modal ============ */
.as-coupon-note {
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--as-green);
	background: var(--as-mint);
	border-radius: 8px;
	padding: 7px 10px;
}
.as-coupon-note:empty { display: none; }

.as-cta:disabled { opacity: .85; cursor: default; }
.as-cta.is-done { background: var(--as-green-dark); }
.as-spin {
	width: 15px; height: 15px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	margin-right: 9px;
	vertical-align: -3px;
	animation: as-rot .7s linear infinite;
}
@keyframes as-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-spin { animation-duration: 1.6s; } }

/* Cart Check modal — "Old Cart Products Detected" (orange attention system) */
.as-cc {
	--as-orange: #ee7c2b;
	--as-orange-deep: #b45309;
	--as-orange-tint: #fdf2e7;
	--as-orange-line: #f6d9bd;
	width: min(560px, calc(100vw - 32px));
	border-top: 4px solid var(--as-orange);
	padding: 20px 20px 18px;
}
.as-cc__head { display: flex; align-items: flex-start; gap: 13px; }
.as-cc__icon {
	position: relative;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--as-orange-tint); color: var(--as-orange-deep);
	border: 1px solid var(--as-orange-line);
	border-radius: 50%;
	flex: 0 0 auto;
}
.as-cc__count {
	position: absolute; top: -6px; right: -6px;
	min-width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--as-orange); color: #fff;
	border: 2px solid var(--as-white);
	border-radius: 999px;
	font-style: normal; font-size: 11px; font-weight: 700;
	padding: 0 4px;
}
.as-cc__titles { flex: 1; min-width: 0; }
.as-cc__titles strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.as-cc__titles span { display: block; font-size: 12.5px; color: var(--as-muted); margin-top: 3px; line-height: 1.5; }
.as-cc__titles b { color: var(--as-green); font-weight: 700; }

.as-cc__strip {
	display: flex; align-items: center; gap: 10px;
	background: var(--as-orange-tint);
	border: 1px solid var(--as-orange-line);
	border-radius: 10px;
	padding: 10px 13px;
	margin: 14px 0 12px;
	font-size: 12.5px; font-weight: 600;
	color: var(--as-orange-deep);
}
.as-cc__strip svg { flex: 0 0 auto; }

.as-cc__label {
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700;
	color: var(--as-orange);
	padding-bottom: 7px;
	border-bottom: 1px solid var(--as-line);
	margin-bottom: 9px;
}

.as-cc__list { max-height: 228px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 3px 2px; scrollbar-width: thin; }
.as-cc__item {
	display: flex; align-items: center; gap: 11px;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: 12px;
	padding: 9px 12px 9px 9px;
}
.as-cc__imgwrap { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.as-cc__imgwrap img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 8px;
	background: var(--as-bg);
	border: 1px solid var(--as-line);
}
.as-cc__x { width: 17px; height: 17px; top: -5px; left: -5px; }
.as-cc__info { flex: 1; min-width: 0; }
.as-cc__name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-cc__variant { font-size: 11.5px; color: var(--as-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-cc__qty {
	flex: 0 0 auto;
	background: var(--as-bg);
	border: 1px solid var(--as-line);
	border-radius: 7px;
	font-size: 11.5px; font-weight: 700;
	padding: 3px 8px;
	color: var(--as-ink);
}
.as-cc__price { flex: 0 0 auto; font-size: 13.5px; min-width: 76px; text-align: right; }

.as-cc__total {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--as-orange-tint);
	border: 1px solid var(--as-orange-line);
	border-radius: 10px;
	padding: 10px 13px;
	margin: 11px 0 13px;
}
.as-cc__total span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--as-ink); }
.as-cc__total span svg { color: var(--as-orange); }
.as-cc__total strong { font-size: 15px; color: var(--as-orange-deep); }

.as-cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.as-cc__primary, .as-cc__secondary {
	display: flex; align-items: center; gap: 10px;
	text-align: left;
	border-radius: 12px;
	padding: 12px 13px;
	cursor: pointer;
	font-family: inherit;
	transition: filter .12s, background .12s;
}
.as-cc__primary { background: var(--as-green); border: 1px solid var(--as-green); color: #fff; }
.as-cc__primary:hover { filter: brightness(.94); }
.as-cc__secondary { background: var(--as-white); border: 1.5px solid var(--as-green); color: var(--as-green); }
.as-cc__secondary:hover { background: var(--as-green-tint); }
.as-cc__btnicon {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.18);
	border-radius: 50%;
	flex: 0 0 auto;
}
.as-cc__btnicon--o { background: var(--as-green-tint); }
.as-cc__btntext { min-width: 0; }
.as-cc__btntext strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.as-cc__btntext em { display: block; font-style: normal; font-size: 11px; opacity: .85; margin-top: 2px; line-height: 1.35; }
.as-cc__secondary .as-cc__btntext em { color: var(--as-muted); opacity: 1; }

.as-cc__footer {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--as-mint);
	border-radius: 9px;
	padding: 9px 12px;
	margin-top: 11px;
	font-size: 11.5px; font-weight: 600;
	color: var(--as-green-dark);
}
.as-cc__footer svg { color: var(--as-green); flex: 0 0 auto; }

/* mobile: bottom sheet */
@media (max-width: 640px) {
	.as-cc {
		top: auto; bottom: 0; left: 0; right: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		animation: as-sheet .22s ease-out;
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
	@keyframes as-sheet { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
	.as-cc__actions { grid-template-columns: 1fr; }
	.as-cc__list { max-height: 34vh; }
}