/* ==========================================================================
   Mawzona — WooCommerce theming (gold + green)
   ========================================================================== */

.woocommerce, .woocommerce-page { color: var(--ink); }
.woo-main { padding-block: clamp(32px, 5vw, 64px); }

/* page title */
.woocommerce-products-header__title,
.woocommerce .page-title { font-family: var(--font-display); color: var(--green-800); text-align: center; margin-bottom: 28px; }

/* result count + ordering */
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select {
	-webkit-appearance: none;
	appearance: none;
	min-height: 38px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 12px 8px 38px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232d5b4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: left 14px center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
	font: inherit;
}

/* ---------- product grid ---------- */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0 !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid #ecebe7; border-radius: 0;
	box-shadow: none; overflow: visible; padding: 0 0 22px;
	transition: transform .2s, box-shadow .25s, border-color .25s; text-align: center;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: #e3d7b8; }
.woocommerce ul.products li.product a img { margin: 0 0 16px; border-radius: 0; aspect-ratio: 1/1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); color: var(--green-800); font-size: 1.1rem; padding: 0 18px; }
.woocommerce ul.products li.product .price { color: var(--gold-dk) !important; font-weight: 700; font-family: var(--font-display); font-size: 1.2rem; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: .9rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce span.onsale {
	display: grid; place-items: center;
	background: #a5a400; color: #fff; border-radius: 50%;
	min-height: 54px; min-width: 54px; width: 54px; max-width: 54px;
	padding: 0; font-size: .78rem; font-weight: 700; line-height: 1.15; top: -8px;
	inset-inline-start: -8px; inset-inline-end: auto; margin: 0;
}

@media (max-width: 760px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}
	.woocommerce ul.products li.product { padding-bottom: 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		min-height: 3.8em;
		padding-inline: 8px;
		font-size: .78rem;
		line-height: 1.55;
	}
	.woocommerce ul.products li.product .price { font-size: .9rem; }
	.woocommerce ul.products li.product .button {
		padding: .55em .8em;
		font-size: .72rem;
	}
	.woocommerce span.onsale {
		min-width: 44px;
		width: 44px;
		max-width: 44px;
		min-height: 44px;
		font-size: .68rem;
	}
}

/* ---------- buttons ---------- */
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .button.alt,
.woocommerce ul.products li.product .button {
	background: var(--grad-gold); color: #fff; border-radius: var(--pill);
	font-family: var(--font-display); font-weight: 600; padding: .7em 1.6em; border: 0;
	transition: transform .18s, box-shadow .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover {
	background: var(--green-800); color: #fff; transform: translateY(-2px);
}
.woocommerce .button.added::after { color: #fff; }

/* ---------- single product ---------- */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .product_title { font-family: var(--font-display); color: var(--green-800); }
.single-product div.product p.price, .single-product div.product span.price { color: var(--gold-dk); font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; }
.single-product .woocommerce-tabs ul.tabs { padding: 0; }
.single-product .woocommerce-tabs ul.tabs li { background: var(--paper-2); border-radius: 10px 10px 0 0; border-color: var(--line); }
.single-product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.quantity input.qty { border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
@media (max-width: 820px){ .single-product div.product { grid-template-columns: 1fr; } }

/* ---------- hair mineral analysis service ---------- */
.hair-service {
	direction: rtl;
	background: #fff;
}
.hair-service__intro {
	padding: 58px 0 42px;
	text-align: center;
}
.hair-service__intro-inner {
	width: min(100% - 40px, 760px);
	display: grid;
	justify-items: center;
}
.hair-service__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
	color: var(--green-800);
	font-size: 1.35rem;
	line-height: 1.05;
}
.hair-service__label svg {
	width: 50px;
	height: 50px;
	color: var(--gold-dk);
}
.hair-service__label strong {
	font-size: 1.75rem;
}
.hair-service__label .hair-service__clipboard {
	width: 53px;
	height: 69px;
	fill: none;
	stroke: var(--gold-dk);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hair-service__hero {
	width: min(100%, 430px);
	height: auto;
	border-radius: 54px 0 54px 0;
}
.hair-service__lead {
	margin-top: 28px;
}
.hair-service__lead h1,
.hair-service__lead h2,
.hair-service__minerals h2,
.hair-service__packages-head h2 {
	font-family: var(--font-display);
}
.hair-service__lead h1 {
	margin: 0 0 8px;
	color: var(--gold-dk);
	font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.hair-service__lead h2 {
	max-width: 690px;
	margin: 0;
	color: var(--green-800);
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	line-height: 1.6;
}
.hair-service__minerals {
	padding: 38px 0 62px;
	text-align: center;
}
.hair-service__narrow {
	width: min(100% - 44px, 850px);
}
.hair-service__minerals h2 {
	margin-bottom: 24px;
	color: var(--gold-dk);
	font-size: clamp(1.3rem, 3vw, 2rem);
}
.hair-service__minerals p {
	margin: 0;
	color: var(--green-800);
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	line-height: 2.15;
}
.hair-service__packages {
	padding: 50px 0 90px;
	background: #eee;
}

.food-analysis-section {
	padding: 54px 0 78px;
	background: #fff;
}
.food-analysis-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 130px;
}
.food-analysis-card {
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}
.food-analysis-card img {
	display: block;
	width: 100%;
	aspect-ratio: 495 / 319;
	object-fit: cover;
	margin-bottom: 18px;
	border-radius: 44px;
}
.food-analysis-card h3 {
	color: var(--green-800);
	font-size: 1.45rem;
	line-height: 1.5;
	margin-bottom: 12px;
}
.food-analysis-card p {
	color: #111;
	font-size: 1rem;
	line-height: 2;
}

.food-sensitivity-service .hair-service__intro-inner {
	max-width: 1100px;
	grid-template-columns: minmax(0, 650px) 350px;
	grid-template-areas: "label label" "lead art";
	align-items: center;
	gap: 42px 80px;
}
.food-sensitivity-service .hair-service__label {
	grid-area: label;
	margin-bottom: 0;
	font-size: 2rem;
}
.food-sensitivity-service .hair-service__label strong { font-size: 2.2rem; }
.food-sensitivity-service__dna {
	color: var(--gold-dk);
	width: 65px;
	height: 65px;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.food-sensitivity-service__hero-art {
	grid-area: art;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 54px;
}
.food-sensitivity-service .hair-service__hero {
	width: 100%;
	border-radius: 0;
}
.food-sensitivity-service .hair-service__lead {
	grid-area: lead;
	margin-top: 0;
}
.food-sensitivity-service .hair-service__lead h2 {
	max-width: 650px;
	font-size: clamp(2.5rem, 4.2vw, 3.4rem);
	line-height: 1.45;
}
.food-sensitivity-service__intro { padding-top: 20px; }
.food-sensitivity-service .hair-service__packages { background: #fff; }
.food-sensitivity-service .hair-service__packages-panel {
	width: min(100% - 48px, 1180px);
	padding: 70px 38px;
	border-radius: 70px;
	background: #eee;
}
.food-sensitivity-service .hair-package-card__icon {
	width: 110px;
	height: 110px;
	background: transparent;
	border-radius: 0;
}
.food-sensitivity-service .hair-package-card__icon img,
.food-sensitivity-service .hair-package-card__icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hair-package-grid--single {
	grid-template-columns: minmax(280px, 430px);
	justify-content: center;
}
.hair-service__packages-head {
	margin-bottom: 48px;
	text-align: center;
}
.hair-service__packages-head h2 {
	margin: 0;
	color: var(--green-800);
	font-size: clamp(1.65rem, 4vw, 2.7rem);
	line-height: 1.45;
}
.hair-package-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.hair-package-card {
	position: relative;
	min-height: 540px;
	display: flex;
	flex-direction: column;
	padding: 42px 30px 28px;
	/* one card treatment sitewide: Figma stroke 4 #B59650, r39.275, and the
	   #0C524C alpha ramp (.74 -> .83 @28% -> 1 @84.8%) rather than a 2-colour gradient */
	border: 4px solid #B59650;
	border-radius: 39.275px;
	background: linear-gradient(180deg,
		rgba(12, 82, 76, .74) 0%,
		rgba(12, 82, 76, .83) 28%,
		rgba(12, 82, 76, 1) 84.8%);
	box-shadow: 0 12px 22px rgba(23, 59, 49, .2);
	color: #fff;
	text-align: center;
}
.hair-package-card__front {
	display: flex;
	flex: 1;
	flex-direction: column;
	transition: opacity .32s ease, transform .32s ease;
}
/* «تحقق من النموذج» — same treatment as الخدمات: the pill lives inside the card and
   fades in on hover/tap; the card never swaps face, so its copy, price and «إضافة»
   button stay visible the whole time. */
.hair-package-card__sample-link {
	display: inline-flex;
	align-self: center;
	align-items: center;
	justify-content: center;
	margin: 8px auto 0;
	min-height: 34px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #b59650;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.hair-package-card--has-sample:hover .hair-package-card__sample-link,
.hair-package-card--has-sample:focus-within .hair-package-card__sample-link,
.hair-package-card--has-sample.is-flipped .hair-package-card__sample-link {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.hair-package-card__icon {
	width: 92px;
	height: 92px;
	display: grid;
	place-items: center;
	margin: 0 auto 26px;
	border-radius: 0;
	background: transparent;   /* Figma: no white circle behind the icon */
	color: #0876ae;
}
.hair-package-card__icon svg {
	width: 62px;
	height: 62px;
}
.hair-package-card h3 {
	margin: 0 0 18px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.55rem;
}
.hair-package-card p,
.hair-package-card ul {
	margin: 0 0 26px;
	color: #fff;
	line-height: 1.9;
}
.hair-package-card ul {
	padding: 0;
	list-style: none;
	text-align: right;
}
.hair-package-card li::before {
	content: "✓";
	margin-left: 8px;
	font-weight: 800;
}
.hair-package-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	direction: ltr;
}
.hair-package-card__price,
.hair-package-card__price .amount,
.hair-package-card__price bdi {
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 800;
	direction: rtl;
}
.hair-package-card__price del {
	position: relative;
	display: inline-block;
	opacity: .55;
	font-size: .82em;
	text-decoration: none;
}
/* The strike is drawn, not inherited: on phones the amount inside is inline-flex
   (number before «ر.س»), and text-decoration never reaches inside an inline-flex
   box, so a plain line-through vanished on mobile while showing on desktop. */
.hair-package-card__price del::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 52%;
	border-top: 1.5px solid currentColor;
	pointer-events: none;
}
.hair-package-card__price ins {
	text-decoration: none;
}

@media (max-width: 820px) {
	.hair-service__intro { padding-top: 42px; }
	.hair-service__intro-inner { width: min(100% - 56px, 430px); }
	/* Figma mobile (440): hero label 18.5/300, lead h2 22.5/800 */
	.hair-service__label {
		font-size: 18.5px;
		font-weight: 300;
		margin-bottom: 18px;
	}
	.hair-service__label strong { font-size: 18.5px; }
	.hair-service__label svg { width: 42px; height: 42px; }
	/* Figma: hero 236×236 r50 */
	.hair-service__hero {
		width: calc(236 / 440 * 100vw);
		max-width: 236px;
		height: auto;
		border-radius: calc(50 / 440 * 100vw);
	}
	.hair-service__lead { margin-top: 22px; }
	/* eyebrow «صحتك تبدأ من شعرك» / «احمِ صحتك» / «غذاء صحي…» 22.5/700 gold */
	.hair-service__lead h1 { font-size: 22.5px; font-weight: 700; color: #d19d4e; }
	.hair-minerals-service .hair-service__lead h1 { color: #b59650; }   /* hair page uses the darker gold */
	/* «اكتشف توازن المعادن…» 22.5/800 #2d4f41 */
	.hair-service__lead h2 { font-size: 22.5px; font-weight: 800; line-height: 1.25; }
	.hair-service__minerals { padding: 20px 0 46px; }
	/* «المعادن التي يتم اختبارها» 18.5/700 #d19d4e · list 15/400 #2d4f41 */
	.hair-service__minerals h2 { font-size: 18.5px; font-weight: 700; line-height: 25px; color: #d19d4e; }
	.hair-service__minerals p { font-size: 15px; font-weight: 400; line-height: 1.7; color: #2d4f41; text-align: justify; }
	/* Figma: gray band is inset with rounded corners, not edge-to-edge */
	.hair-service__packages {
		padding: 0;
		background: transparent;
	}
	.hair-service__packages .container {
		width: calc(383 / 440 * 100vw);
		max-width: 383px;
		padding: 0;
		background: transparent;
	}
	/* Figma: gray band 383 wide, r50, #e9e9e9 — heading sits above it */
	.hair-package-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		justify-items: center;
		padding: calc(28 / 440 * 100vw) 0 calc(32 / 440 * 100vw);
		background: #e9e9e9;
		border-radius: calc(50 / 440 * 100vw);
	}
	/* Figma: green card 291×366 r39.3 */
	.hair-package-card {
		width: calc(291 / 440 * 100vw);
		max-width: 291px;
		min-height: calc(366 / 440 * 100vw);
		padding: calc(26 / 440 * 100vw) calc(21 / 440 * 100vw) calc(20 / 440 * 100vw);
		border-radius: calc(39.3 / 440 * 100vw);
	}
	.hair-package-card__icon { width: 82px; height: 82px; margin-bottom: 20px; }
	.hair-package-card__icon svg { width: 56px; height: 56px; }
	/* Figma «إضافة» button: 97×34 r9.43 #b59650, label 15.71/800 */
	.hair-package-card .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: calc(6 / 440 * 100vw);
		min-width: calc(97 / 440 * 100vw);
		min-height: calc(34 / 440 * 100vw);
		padding: 0 calc(12 / 440 * 100vw);
		border-radius: calc(9.43 / 440 * 100vw);
		font-size: calc(15.71 / 440 * 100vw);
		font-weight: 800;
		line-height: 1;
	}
	.hair-package-card .btn .product-add-icon {
		display: block;
		width: calc(13 / 440 * 100vw);
		height: calc(13 / 440 * 100vw);
		fill: currentColor;
		flex: 0 0 auto;
	}
	/* price reads «749.00 ر.س» (number first, symbol after) */
	.hair-package-card__price bdi,
	.hair-package-card__price .woocommerce-Price-amount {
		display: inline-flex;
		flex-direction: row-reverse;
		align-items: baseline;
		gap: 2px;
	}
	/* Figma mobile card type: title 18.38/800, body 12.57/400, price 18.85/800 */
	.hair-service__packages-head h2 { font-size: 18.5px; font-weight: 700; }
	.hair-minerals-service .hair-service__packages-head h2 { font-size: 22.5px; }  /* Figma: hair page uses 22.5 */
	.hair-package-card h3 { font-size: 18.38px; font-weight: 800; }
	.hair-package-card p,
	.hair-package-card ul { font-size: 12.57px; font-weight: 400; }
	.hair-package-card__price,
	.hair-package-card__price .amount,
	.hair-package-card__price bdi { font-size: 18.85px; }
	.food-sensitivity-service .hair-service__intro-inner {
		width: min(100% - 40px, 510px);
		grid-template-columns: 1fr;
		grid-template-areas: "label" "art" "lead";
		gap: 12px;                       /* client note: tighten label -> image -> lead */
	}
	.food-sensitivity-service .hair-service__lead { margin-top: 6px; }
	/* and the gap between the lead and «قسم تحليل حساسية تحمل الطعام»: it is the intro's
	   own bottom padding (42) plus the section's top padding (20), so both come down */
	.food-sensitivity-service .hair-service__intro { padding-bottom: 16px; }
	.food-sensitivity-service .hair-service__minerals { padding-top: 12px; }
	.food-sensitivity-service .hair-service__label {
		font-size: 1rem;
		text-align: right;
	}
	.food-sensitivity-service .hair-service__label strong { font-size: 1.2rem; }
	.food-sensitivity-service__dna {
		width: 48px;
		height: 48px;
	}
	.food-sensitivity-service__hero-art {
		max-width: 370px;
		border-radius: 38px;
	}
	/* same Figma treatment as the hair-minerals page */
	.food-sensitivity-service .hair-service__lead h2 { font-size: 22.5px; font-weight: 800; }
	.food-sensitivity-service .hair-service__label strong { font-size: 18.5px; }
	.food-sensitivity-service .hair-service__packages-head { margin-bottom: 32px; }
	.food-sensitivity-service .hair-service__packages-head h2 { font-size: 18.5px; font-weight: 700; }
	.food-sensitivity-service .hair-service__packages-panel {
		width: calc(392 / 440 * 100vw);
		max-width: 392px;
		padding: calc(28 / 440 * 100vw) 0 calc(32 / 440 * 100vw);
		border-radius: calc(50 / 440 * 100vw);
		background: #eee;
	}
	.food-sensitivity-service .hair-package-card__icon {
		width: 82px;
		height: 82px;
		background: transparent;
		border-radius: 0;
	}
}

/* ---------- cart ---------- */
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--green-900); color: #fff; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-family: var(--font-display); color: var(--green-800); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--grad-gold); }

.mawzona-live-cart {
	min-height: 650px;
	padding-block: 160px 110px;
	direction: rtl;
}
.mawzona-live-cart__inner {
	width: min(100% - 40px, 570px);
}
.mawzona-live-cart h1 {
	margin: 0 0 56px;
	color: var(--green-800);
	font-family: var(--font-display);
	font-size: clamp(2rem, 3vw, 2.45rem);
	text-align: center;
}
.mawzona-live-cart__items {
	display: grid;
	gap: 12px;
}
.mawzona-live-cart__item {
	position: relative;
	min-height: 94px;
	display: flex;
	align-items: center;
	padding: 20px 44px 20px 26px;
	border-radius: 28px 0 28px 0;
	background: #b99a4c;
	color: #fff;
}
.mawzona-live-cart__remove {
	position: absolute;
	inset-inline-start: 18px;
	top: 19px;
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
}
.mawzona-live-cart__product {
	display: grid;
	gap: 4px;
	width: 100%;
}
.mawzona-live-cart__name {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
}
.mawzona-live-cart__price,
.mawzona-live-cart__price .amount,
.mawzona-live-cart__price bdi {
	display: flex;
	direction: ltr;
	justify-content: flex-start;
	gap: 4px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.55rem;
	font-weight: 800;
}
.mawzona-live-cart__continue {
	width: 182px;
	min-height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	margin-right: auto;
	margin-left: 0;
	border-radius: 24px;
	background: var(--green-800);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
}
.mawzona-live-cart__continue:hover {
	background: var(--gold-dk);
	color: #fff;
}
.mawzona-live-cart__empty {
	display: grid;
	justify-items: center;
	text-align: center;
}
.mawzona-live-cart__empty .mawzona-live-cart__continue { margin-top: 28px; }

@media (max-width: 760px) {
	.food-analysis-section { padding: 26px 0 52px; }
	.food-analysis-section .container { width: min(100% - 36px, 510px); }
	.food-analysis-grid { grid-template-columns: 1fr; gap: 34px; }
	.food-analysis-card { padding: 0; }
	.food-analysis-card img { border-radius: 28px; }
	.mawzona-live-cart {
		min-height: 925px;
		padding-block: 350px 124px;
	}
	.mawzona-live-cart__inner { width: min(100% - 40px, 540px); }
	.mawzona-live-cart h1 {
		margin-bottom: 96px;
		font-size: 2rem;
	}
	.mawzona-live-cart__item {
		min-height: 116px;
		padding: 23px 44px 23px 24px;
	}
	.mawzona-live-cart__name { font-size: 1rem; }
	.mawzona-live-cart__price,
	.mawzona-live-cart__price .amount,
	.mawzona-live-cart__price bdi { font-size: 1.65rem; }
	.mawzona-live-cart__continue {
		width: 224px;
		min-height: 69px;
		margin-top: 118px;
	}
}

/* ---------- checkout (name + WhatsApp only) ---------- */
.mawzona-live-checkout {
	padding-block: 120px 100px;
	direction: rtl;
}
.mawzona-live-checkout__inner { width: min(100% - 48px, 1300px); }
.mawzona-live-checkout .woocommerce-form-coupon-toggle,
.mawzona-live-checkout .checkout_coupon,
.mawzona-live-checkout #order_review_heading { display: none !important; }
.mawzona-live-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr);
	grid-template-areas: "review customer";
	gap: 68px;
	align-items: start;
	direction: ltr;
}
.mawzona-live-checkout #customer_details {
	grid-area: customer;
	width: 100%;
	max-width: none;
	min-height: 480px;
	margin: 0;
	padding: 42px 58px;
	border: 4px solid #b99a4c;
	border-radius: 28px;
	background: #2D4F41;
	color: #fff;
	direction: rtl;
}
.mawzona-live-checkout #customer_details::before {
	content: "تفاصيل الفاتورة";
	display: block;
	margin-bottom: 36px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
}
.mawzona-live-checkout #customer_details .col-1,
.mawzona-live-checkout #customer_details .woocommerce-billing-fields,
.mawzona-live-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
	width: 100%;
	float: none;
}
.mawzona-live-checkout #customer_details h3 { display: none; }
.mawzona-live-checkout #order_review {
	grid-area: review;
	width: 100%;
	background: #2D4F41;
	color: #fff;
	direction: rtl;
}
.mawzona-live-checkout #order_review table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
}
.mawzona-live-checkout #order_review table.shop_table th,
.mawzona-live-checkout #order_review table.shop_table td {
	padding: 14px 20px;
	border-color: rgba(185, 154, 76, .72);
	background: transparent;
	color: #fff;
}
.mawzona-live-checkout #order_review .amount,
.mawzona-live-checkout #order_review bdi { color: #fff; }
.mawzona-live-checkout #payment {
	margin: 0;
	border-radius: 0;
	background: #2D4F41;
	color: #fff;
}
.mawzona-live-checkout #payment ul.payment_methods {
	padding: 24px 32px 16px;
	border-color: rgba(185, 154, 76, .72);
}
.mawzona-live-checkout #payment div.payment_box {
	border: 1px solid rgba(185, 154, 76, .45);
	background: rgba(255,255,255,.08);
	color: #fff;
}
.mawzona-live-checkout #payment div.payment_box::before { border-bottom-color: rgba(255,255,255,.08); }
.mawzona-live-checkout #payment .place-order {
	padding: 24px 32px 34px;
	color: #fff;
}
.mawzona-live-checkout #payment .woocommerce-privacy-policy-text,
.mawzona-live-checkout #payment .woocommerce-privacy-policy-text p,
.mawzona-live-checkout #payment .woocommerce-privacy-policy-link { color: #fff; }
.mawzona-live-checkout #payment #place_order {
	width: 150px;
	float: none;
	margin-top: 18px;
	border-radius: 8px;
	background: #c59d43;
}
.mawzona-live-checkout #payment #place_order:hover { background: #fff; color: var(--green-800); }
.woocommerce form .form-row label { font-weight: 700; color: var(--green-800); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
	border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit;
}
.mawzona-live-checkout form .form-row { margin-bottom: 24px; }
.mawzona-live-checkout form .form-row label { margin-bottom: 8px; color: #fff; }
.mawzona-live-checkout form .form-row input.input-text,
.mawzona-live-checkout form .form-row textarea {
	min-height: 48px;
	border: 0;
	border-radius: 8px;
	background: #fff;
}
#place_order { width: 100%; font-size: 1.05rem !important; padding: 14px !important; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--gold); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--gold); }

@media (max-width: 820px) {
	.mawzona-live-checkout { padding-block: 62px 96px; }
	.mawzona-live-checkout__inner { width: min(100% - 30px, 580px); }
	.mawzona-live-checkout form.checkout {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.mawzona-live-checkout #customer_details {
		order: 1;
		min-height: 0;
		padding: 30px 18px;
		border-width: 3px;
		border-radius: 24px;
	}
	.mawzona-live-checkout #customer_details::before {
		margin-bottom: 28px;
		font-size: 1.2rem;
	}
	.mawzona-live-checkout #order_review { order: 2; }
	.mawzona-live-checkout #order_review table.shop_table th,
	.mawzona-live-checkout #order_review table.shop_table td { padding: 12px 10px; }
	.mawzona-live-checkout #payment ul.payment_methods,
	.mawzona-live-checkout #payment .place-order { padding-inline: 20px; }
	.mawzona-live-checkout #payment #place_order { width: 100%; }
}

/* my-account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--green-900); color: #fff; }

/* Feature rows on the department cards: the same check / ⚠ markup as the home
   carousel, replacing the old text-only «✓» bullets. */
.hair-package-card .feat { margin: 0 0 26px; padding: 0; list-style: none; text-align: right; color: #fff; line-height: 1.9; }
.hair-package-card .feat li::before { content: none; }
.hair-package-card .feature-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; }
.hair-package-card .feature-row__icon { width: 14px; height: 14px; margin-top: .45em; color: #fff; }
.hair-package-card .feature-row__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hair-package-card .feature-row__icon svg.feature-row__warn { fill: currentColor; stroke: none; }
.hair-package-card .feature-row--warning { font-weight: 700; }

/* The 115 foods. One panel per category so the list can be scanned rather than read:
   the category name in gold with its count in a circle, the foods as pills. Everything
   stays visible, no tapping, per the client's earlier instruction. */
.food-list { margin-top: 18px; text-align: right; display: grid; gap: 14px; }
.food-group {
	padding: 16px 18px;
	border-radius: 22px;
	background: #F0F0F1;
}
.food-group__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: #B59650;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
}
.food-group__count {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 999px;
	background: #B59650;
	color: #fff;
	font-size: .82rem;
	font-weight: 800;
}
.food-group__items {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.food-group__items li {
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--green-800);
	font-size: .88rem;
	line-height: 1.6;
}
/* a handful of the fruit entries are explanatory sentences rather than names, so they
   are allowed to run full width instead of being squeezed into a pill */
.food-group__items li:not(:only-child) { max-width: 100%; }

@media (max-width: 760px) {
	.hair-package-card .feat { font-size: 12.57px; }
	.food-group { padding: 14px 14px; border-radius: 18px; }
	.food-group__head { font-size: .95rem; }
	.food-group__items li { font-size: 12.5px; padding: 5px 10px; }
}

/* ------------------------------------------------------------------
   حمية غذائية بدون تحليل (Figma 1:2228) and حمية معادن الشعر (Figma 1:7498)
   page tops, measured on the 440 frame. The client asked for these two pages
   to follow Figma in layout and copy. Positions below are the frame's gaps:
   label, 20, hero, 28, h1, 5, h2, 89, intro heading, 14, body, 125, packages
   heading, 29, cards panel.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
	.health-diet-service .hair-service__intro,
	.mineral-diet-service .hair-service__intro { padding: 18px 0 0; }
	.health-diet-service .hair-service__label,
	.mineral-diet-service .hair-service__label {
		gap: 5px;
		margin-bottom: 20px;
		font-size: 18.5px;
		line-height: 25px;
		color: #2D4F41;
	}
	.health-diet-service .hair-service__label img { width: calc(44 / 440 * 100vw); height: auto; }
	.mineral-diet-service .hair-service__label img { width: calc(37 / 440 * 100vw); height: auto; }
	/* Figma: the apple sits on a light rounded square, 235x236 r30; the basket image stands alone */
	.health-diet-service .hair-service__hero-box {
		width: calc(235 / 440 * 100vw);
		height: calc(236 / 440 * 100vw);
		display: grid;
		place-items: center;
		padding: 0;
		border-radius: calc(30 / 440 * 100vw);
		background: #F1F1F1;
	}
	.health-diet-service .hair-service__hero { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
	.mineral-diet-service .hair-service__hero { width: calc(232 / 440 * 100vw); max-width: 232px; height: auto; border-radius: 0; }
	.health-diet-service .hair-service__lead,
	.mineral-diet-service .hair-service__lead { margin-top: 28px; }
	.health-diet-service .hair-service__lead h1,
	.mineral-diet-service .hair-service__lead h1 { margin-bottom: 5px; font-size: 22.5px; font-weight: 700; color: #D19D4E; }
	/* Figma h2: three lines, 24/34 800 #2D4F41, in a ~230 wide centred box */
	.health-diet-service .hair-service__lead h2,
	.mineral-diet-service .hair-service__lead h2 { max-width: calc(275 / 440 * 100vw); margin-inline: auto; font-size: 24px; font-weight: 800; line-height: 34px; color: #2D4F41; }
	/* intro: gold heading and dark-green body, both right-aligned, 89 below the lead */
	/* client note: tighter than Figma's 89, and tighter than live */
	.health-diet-service .hair-service__minerals,
	.mineral-diet-service .hair-service__minerals { padding: 40px 0 0; text-align: right; }
	.health-diet-service .hair-service__narrow,
	.mineral-diet-service .hair-service__narrow { width: calc(322 / 440 * 100vw); }
	/* client note: the section headings are CENTRED, overriding the Figma frame */
	.health-diet-service .hair-service__minerals h2,
	.mineral-diet-service .hair-service__minerals h2 { margin-bottom: 14px; font-size: 18.5px; font-weight: 700; line-height: 25px; color: #D19D4E; text-align: center; }
	.health-diet-service .hair-service__minerals p,
	.mineral-diet-service .hair-service__minerals p { font-size: 15px; line-height: 31px; color: #2D4F41; text-align: justify; text-align-last: right; }
	/* packages heading: two dark-green lines, right-aligned in a 303 wide centred block */
	.health-diet-service .hair-service__packages-head,
	.mineral-diet-service .hair-service__packages-head { width: calc(322 / 440 * 100vw); margin: 52px auto 24px; text-align: center; }
	.health-diet-service .hair-service__packages-head h2,
	.mineral-diet-service .hair-service__packages-head h2 { font-size: 18px; font-weight: 800; line-height: 28px; color: #2D4F41; }
	/* Chromium sets this face a touch wider than Figma: the basket page's h2 needs 300 to keep Figma's three lines */
	.mineral-diet-service .hair-service__lead h2 { max-width: calc(300 / 440 * 100vw); }
	.health-diet-service .hair-service__packages-head h2 .head-l2,
	.mineral-diet-service .hair-service__packages-head h2 .head-l2 { color: #2D4F41; }
}

/* The «وفّر …» badge on the department cards, same treatment as الخدمات: Figma 111x34
   r9.43, gold, centred over the card's top edge. The card is the positioning context. */
.hair-package-card { position: relative; }
.hair-package-card .save-badge {
	position: absolute;
	z-index: 3;
	inset-block-start: calc(-17 / 440 * 100vw);
	inset-inline-start: calc(18 / 440 * 100vw);
	inset-inline-end: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(111 / 440 * 100vw);
	min-height: calc(34 / 440 * 100vw);
	padding: 0 calc(10 / 440 * 100vw);
	border-radius: calc(9.43 / 440 * 100vw);
	background: #B59650;
	color: #fff;
	font-size: calc(15.71 / 440 * 100vw);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
/* the badge overhangs the top edge, so the grid around the cards must not clip it */
.hair-package-grid { overflow: visible; }
/* the feature rows were running together with no separation */
.hair-package-card .feat { display: grid; gap: calc(10 / 440 * 100vw); }

/* The food list is its own block under the four analysis cards. */
.food-list-section { margin-top: 34px; }
.food-list-section__head {
	margin: 0 0 16px;
	color: var(--green-800);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	text-align: center;
}
@media (max-width: 760px) {
	.food-list-section { margin-top: 26px; }
	.food-list-section__head { font-size: 18.5px; }
}