/* fatnah design layer: design_review/00_plan_raw.md section 5 and Developer list Step 6.
   Enqueued as handle "ftn-design" after "ftn-funnel" at priority 1001, so it prints after Elessi's dynamic CSS
   (nasa-dynamic/dynamic.css and its inline colour rules). A selector of equal specificity therefore wins here
   without !important; !important is used only where Elessi, the child style.css or ftn-funnel.css already use it.
   Colours, radii and fonts come from the tokens in style.css :root (--bg, --surface, --ink, --muted, --line, --peach,
   --peach-2, --acc, --acc-ink, --acc-hover, --r, --r-s, --h, --b).
   Rules kept everywhere: RTL through logical properties; iPhone inputs at 16px and tap targets of 44px or more;
   nothing covers the top inline-start corner of a product image (the baked image label), and product images are
   never cropped (no object-fit: cover). */

:root {
	/* Elessi fades the "read more" of the short description into this colour (#fafafa / white by default) */
	--shadow-read-more-btn-color: var(--bg);
	/* line icons used as CSS masks (colour comes from background-color) */
	--ftn-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ftn-ico-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   1. Clean mode (Step 1.2): internal tags and pending lines are hidden from customers.
      The integrator adds body.ftn-review only for admins opening a page with ?review=1, and wraps inline
      placeholders in span.ftn-ph. Safety net only: each tag still leaves the content once its item is approved.
   ========================================================================== */
body:not(.ftn-review) :is(.ftn-tag, .ftn-legal-flag, .ftn-owner-flag, .ftn-scent-ph, .ftn-ph-line, .ftn-ph) {
	display: none !important;
}
/* the pending scent block sits alone in its Elementor section: hide the section so no empty band is left */
body:not(.ftn-review) .elementor-section:has(section.ftn-scent.ftn-ph-line) {
	display: none !important;
}
/* while the scent block is pending, any link to it (the hero's second button until the copy moves it to #ritual) */
body:not(.ftn-review):has(section.ftn-scent.ftn-ph-line) a[href$="#scent"] {
	display: none !important;
}
/* review mode: outline what customers will not see */
body.ftn-review :is(.ftn-ph-line, .ftn-ph, .ftn-scent-ph) {
	outline: 1px dashed var(--acc-ink);
	outline-offset: 2px;
}


/* ==========================================================================
   2. Buttons: one brand colour (apricot, ink text) in every state.
      Elessi's dynamic CSS paints these selectors rust (color_primary) with white text, and its style.css paints
      some coral (#f76b6a). Same selectors and specificity, loaded later, so no !important (Elessi's own icon
      buttons keep their more specific styles). color_button stays empty in the theme options on purpose.
   ========================================================================== */
body button, body .button, body #submit, body a.button, body p a.button, body input#submit,
body .add_to_cart:not(.repeated), body .checkout-button, body input#place_order, body form.cart .button,
body form.cart .button:focus, body .form-submit input, body input[type="submit"], body #payment .place-order input,
body .nasa-static-sidebar .nasa-sidebar-return-shop, body .btn-mini-cart .button {
	background-color: var(--acc);
	border-color: var(--acc);
	color: var(--ink);
}
body button:hover, body .button:hover, body a.button:hover, body * button:hover, body * .button:hover, body * #submit:hover,
body p a.button:hover, body input#submit:hover, body .add_to_cart:hover, body .checkout-button:hover, body input#place_order:hover,
body form.cart .button:hover, body .form-submit input:hover, body * input[type="submit"]:hover, body #payment .place-order input:hover,
body .nasa-static-sidebar .nasa-sidebar-return-shop:hover, body #cart-sidebar.style-1 a.nasa-sidebar-return-shop:hover,
body .btn-mini-cart .button:hover,
body button:focus-visible, body .button:focus-visible, body input[type="submit"]:focus-visible {
	background-color: var(--acc-hover);
	border-color: var(--acc-hover);
	color: var(--ink);
}
/* disabled buttons keep the brand colour on hover (Elessi switches them to coral) */
body button.disabled:hover, body button[disabled]:hover, body .button.disabled:hover, body .button[disabled]:hover {
	background-color: var(--acc);
	border-color: var(--acc);
	color: var(--ink);
}
/* checkout «+ إضافة رقم الشقة…» (ftn-checkout.js) is a <button> styled as a text link: the hover/focus rules above would
   fill it apricot; it stays a rust underlined link (the global :focus-visible outline still shows) */
body button.ftn-add-line:hover, body button.ftn-add-line:focus-visible {
	background-color: transparent;
	border-color: transparent;
	color: var(--acc-ink);
}

/* ghost (secondary) button: transparent with an ink outline; style.css forces .woocommerce a.button apricot with !important */
.button.ftn-btn-ghost, .woocommerce a.button.ftn-btn-ghost {
	background: transparent !important;
	border: 1.5px solid var(--ink) !important;
	color: var(--ink) !important;
}
.ftn-btn-ghost:hover, .button.ftn-btn-ghost:hover, .woocommerce a.button.ftn-btn-ghost:hover,
.ftn-btn-ghost:focus-visible, .button.ftn-btn-ghost:focus-visible {
	background: var(--peach-2) !important;
	border-color: var(--ink) !important;
	color: var(--ink) !important;
}

/* bundle upgrade button in the side cart and the cart (plan section 3 #14 and section 5): a secondary ink-outline
   button, so «إتمام الطلب» stays the one apricot action on the screen (QA4 2#1; the same upgrade box on the
   product page already uses a ghost button). One line once its label is the short «بدّلي إلى … · السعر».
   style.css paints a.button apricot with !important, hence the weight here. */
html body .ftn-r2 a.button.ftn-r2-go.ftn-btn-ghost, html body .ftn-r2 a.ftn-r2-go {
	background: transparent !important;
	border: 1.5px solid var(--ink) !important;
	color: var(--ink) !important;
	width: 100%;
	min-height: 48px;
	padding-inline: 16px;
	font-size: 15px;
	line-height: 1.3;
}
/* white on hover: the generic ghost hover (--peach-2) is the colour of the .ftn-r2 card itself and would show nothing */
html body .ftn-r2 a.button.ftn-r2-go.ftn-btn-ghost:hover, html body .ftn-r2 a.button.ftn-r2-go.ftn-btn-ghost:focus-visible,
html body .ftn-r2 a.ftn-r2-go:hover, html body .ftn-r2 a.ftn-r2-go:focus-visible {
	background: var(--surface) !important;
	border-color: var(--ink) !important;
	color: var(--ink) !important;
}


/* ==========================================================================
   3. Cart count, amounts and required marks (Step 6).
   ========================================================================== */
/* header cart badge: apricot with an ink digit (Elessi: rust or coral with white) */
html body .nasa-cart-count.nasa-mini-number {
	background: var(--acc) !important;
	color: var(--ink) !important;
	font-weight: 700;
}
/* prices in cart, side cart, checkout summary and order details stay ink (Elessi colours several of them rust/coral,
   some through ID selectors, hence !important) */
html body :is(.cart_totals, .shop_table, .woocommerce-checkout-review-order-table, #order_review, .mini-cart-item,
	.widget_shopping_cart_content, .woocommerce-table--order-details, .nasa-total-condition-desc) .amount,
html body :is(.mini-cart-item .cart_list_product_price, .shop_table tbody .product-subtotal, .nasa-after-add-to-cart-subtotal-price) {
	color: var(--ink) !important;
}
/* required-field star in rust, never red, never underlined */
.required, abbr.required {
	color: var(--acc-ink) !important;
	text-decoration: none;
	border: 0;
}


/* ==========================================================================
   4. Grey and coral leftovers become cream or white (Step 6 "grey wrappers").
   ========================================================================== */
/* checkout and cart title band (Elessi .order-steps: #fafafa band with grey rules); steps stay, subtitles go */
.order-steps {
	background-color: transparent;
	border-top: 0;
	border-bottom: 1px solid var(--line);
}
.checkout-breadcrumb .ct-3th {
	display: none;
}
.checkout-breadcrumb .ct-1st {
	font-size: 26px;
	font-weight: 600;
	color: var(--muted);
}
.checkout-breadcrumb .ct-2nd {
	font-family: var(--h);
	font-size: 18px;
	font-weight: 600;
	text-transform: none;
}
/* checkout boxes: one white card with a hairline instead of an 8px grey frame */
.woocommerce .checkout-group {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 16px;
}
.checkout-group h3 {
	border-bottom-color: var(--line);
	text-transform: none;
	font-weight: 700;
}
/* order summary «طلبك»: the same white hairline card as the delivery box (Elessi: a #F8F8F8 panel with an 8px #F8F8F8
   frame, a centred uppercase heading and a white shadowed table inside). The table stays flat: border-radius does not
   apply to Elessi's border-collapse table, so the card carries the corners. */
.woocommerce .order-review {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 16px;
}
.order_review-heading {
	text-align: start;
	font-weight: 700;
	text-transform: none;
	padding: 5px 0 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--line);
}
.woocommerce-checkout-review-order table {
	background: transparent;
	box-shadow: none;
}
.woocommerce-checkout-review-order table thead tr:last-child th::after,
.woocommerce-checkout-review-order tfoot tr :is(td, th)::before {
	border-color: var(--line);
}
/* the column header «المنتج | مجموع المنتجات» repeats the subtotal row's label below it (both are Elessi's 'Subtotal') */
html body .woocommerce-checkout-review-order-table thead {
	display: none;
}
/* without its own white box the table drops Elessi's 20px outer cell inset (style-rtl.css #order_review rules), so rows,
   heading, payment note and button share the card's 16px edge; a 12px gap stays between label and amount */
body #order_review .woocommerce-checkout-review-order-table.shop_table tr > th {
	padding-inline: 0 12px;
}
body #order_review .woocommerce-checkout-review-order-table.shop_table tr > td {
	padding-inline: 12px 0;
}
body #order_review .woocommerce-checkout-review-order-table.shop_table tr > td.product-name {
	padding-inline: 0;
}
body #order_review .woocommerce-checkout-review-order-table.shop_table tfoot tr > :is(th, td)::before {
	left: 0;
	right: 0;
}
/* quantity: the «1» badge on the image already shows it, so the review's own stepper goes (Elessi option
   mini_checkout_qty; the theme option is the real fix, this is the fallback). Only where the badge is printed. */
body .woocommerce-checkout-review-order-table .co-wrap-item:has(.quantity-review-item) .co-wrap-info .quantity {
	display: none;
}
/* cart totals: white card with a hairline instead of a 3px grey outline */
.cart_totals {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
}
.cart_totals tr {
	border-bottom-color: var(--line);
}
/* cart: coupons are off and the update button is hidden (qty-auto-update), so the actions row only added about 85px of
   empty height on phones (Elessi's !important mobile margins on its two empty columns). The columns go, not the td:
   the nonce field and woocommerce_cart_actions print straight into the td. The coupon column comes back by itself if
   coupons are switched on (:has(.coupon)). */
.woocommerce-cart-form .shop_table td.nasa-actions {
	padding: 0;
	border: 0;
}
.woocommerce-cart-form .nasa-actions .columns.nasa-min-height:not(:has(.coupon)),
.woocommerce-cart-form.qty-auto-update .nasa-actions .large-5.columns {
	display: none;
}
@media (max-width: 767px) {
	.woocommerce-cart .row > .large-8.columns.mobile-margin-bottom-30 {
		margin-bottom: 16px !important;
	}
	/* the phone cart keeps only product and quantity columns: the desktop-style header row adds nothing */
	.woocommerce-cart-form .shop_table thead {
		display: none;
	}
}
/* product page, desktop (modern layouts): ivory instead of the #f8f8f8 band behind gallery and buy area */
.nasa-layout-modern-2 .focus-info, .nasa-layout-modern-3 .focus-info, .nasa-layout-modern-4 .focus-info {
	background-color: var(--bg);
}
/* product page, desktop: a product with one image gets no thumbnail rail and no lone slider dot (the 60px thumb sat
   inside the peach panel). The image then takes the rail's 10% too (Elessi: .nasa-main-wrap 90%, or 87% in large-6).
   Rail and dots come back by themselves once a product has a second image. Phones print no rail. */
.nasa-product-details-page .product-gallery .woocommerce-product-gallery:not(:has(.nasa-wrap-item-thumb + .nasa-wrap-item-thumb)) .nasa-thumb-wrap {
	display: none;
}
.nasa-product-details-page .product-gallery .woocommerce-product-gallery:not(:has(.nasa-wrap-item-thumb + .nasa-wrap-item-thumb)) .nasa-main-wrap {
	width: 100%;
	float: none;
}
.nasa-single-product-main-image.nasa-no-slide .slick-dots,
.nasa-single-product-main-image .slick-dots:has(> li:only-child) {
	display: none;
}
/* product page, Elessi app layout on phones: the 8px #f2f2f2 separators between blocks become ivory */
body.nasa-in-mobile.nasa-mobile-app #wrapper :is(.ns-begin-wrap, .nasa-last-sold, .nasa-in-cart, .check-incart-sold-wrap,
	.nasa-single-product-brands, .product-info .woocommerce-product-details__short-description, .product-info .nasa-dsc-wrap,
	.nasa-single-product-stock, .product-info > .dsc-flex-row, .nasa-wrap-popup-nodes, .nasa-est-delivery, .nasa-promote-sales,
	.nasa-single-share, .safe-checkout, .nasa-product-details-page .product_meta, form.cart, .woocommerce-tabs, .related-product)::after {
	border-bottom-color: var(--bg);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-gallery .main-images {
	border-bottom: 0;
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .woocommerce-tabs .ns-tab-item .ns-read-more {
	background-color: var(--bg);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-single-product-in-mobile .nasa-accordions-content.nasa-no-border .nasa-panel {
	background: var(--surface);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .woocommerce-tabs .nasa-small-accodion .nasa-accordion-title a {
	border-top-color: var(--line);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .woocommerce-tabs .nasa-small-accodion .nasa-accordion-title a.active,
body.nasa-in-mobile.nasa-mobile-app.nasa-rtl #wrapper .woocommerce-tabs .nasa-small-accodion .nasa-accordion-title a.active {
	background: var(--peach-2);
}
/* WooCommerce error lists: Elessi fills them coral (#f76b6a) with white text, or grey on cart/checkout */
.woocommerce-error {
	background: var(--surface);
	border: 1px solid var(--line);
	border-inline-start: 4px solid var(--acc-ink);
	border-radius: var(--r-s);
}
.woocommerce-error li, .woocommerce-error li a {
	color: var(--ink);
}
body:is(.woocommerce-account, .woocommerce-cart, .woocommerce-checkout) .woocommerce-notices-wrapper .woocommerce-error {
	background-color: var(--surface);
}
body.nasa-rtl #main-content .woocommerce-notices-wrapper .woocommerce-error {
	border-inline-start-color: var(--acc-ink);
}
.woocommerce-checkout .woocommerce-error :is(.nasa-showlogin, .showcoupon) {
	color: var(--acc-ink);
}
/* added-to-cart toast: apricot accent bar instead of WordPress green (Elessi sets it per direction) */
body .woocommerce-notices-wrapper .woocommerce-message,
body.nasa-rtl .woocommerce-notices-wrapper .woocommerce-message,
body.nasa-rtl #main-content .woocommerce-notices-wrapper .woocommerce-message {
	border-inline-start-color: var(--acc);
}
.woocommerce-notices-wrapper .woocommerce-info:not(.cart-empty) svg {
	color: var(--acc-ink);
}
.woocommerce-notices-wrapper .woocommerce-info:not(.cart-empty) a.restore-item {
	color: var(--acc-ink);
}
/* invalid fields: rust outline on white instead of a coral wash */
.woocommerce-invalid input, input.woocommerce-invalid, .woocommerce-invalid textarea, textarea.woocommerce-invalid, .woocommerce-invalid select {
	border-color: var(--acc-ink);
	background-color: var(--surface);
}
.woocommerce-invalid label, label.woocommerce-invalid {
	color: var(--acc-ink);
}


/* ==========================================================================
   5. Top bar and desktop navigation (section 5 "الرأس والشريط").
   ========================================================================== */
.ftn-shipbar {
	font: 500 13px/1.4 var(--h);
	color: var(--bg);
	padding: 8px 16px;
}
/* checkout and thank-you are enclosed (ftn-funnel.css hides menu, search and footer there): no top bar either
   (reviewed design-mobile «صفحة الدفع»: «ويُخفى الشريط العلوي في الدفع») */
body.woocommerce-checkout .ftn-shipbar {
	display: none;
}
@media (min-width: 768px) {
	/* no underline; Elessi's coral hover and rust current colour become ink */
	.nav-wrapper .root-item > a,
	.nav-wrapper .root-item a:hover,
	.nav-wrapper .root-item:hover > a,
	html body #site-navigation .current-menu-item > a,
	html body #site-navigation .current-menu-ancestor > a {
		color: var(--ink);
		text-decoration: none;
	}
	.nav-wrapper .root-item > a {
		font-weight: 500;
	}
	/* the underline pseudo-element becomes a small apricot dot under the current item only */
	.nav-wrapper .root-item > a::after,
	.nav-wrapper .root-item:hover > a::after,
	.nav-wrapper .root-item.current-menu-ancestor > a::after,
	.nav-wrapper .root-item.current-menu-item > a::after,
	body.nasa-rtl .nav-wrapper .root-item > a::after {
		inset-inline: 0;
		bottom: 6px;
		width: 6px;
		height: 6px;
		margin-inline: auto;
		border: 0;
		border-radius: 50%;
		background: var(--acc);
		visibility: hidden;
		opacity: 0;
	}
	/* anchor items (/#bundles, /#singles) are marked current by WordPress on the home page: no dot for them */
	.nav-wrapper .root-item.current-menu-item > a:not([href*="#"]) {
		font-weight: 600;
	}
	.nav-wrapper .root-item.current-menu-item > a:not([href*="#"])::after {
		visibility: visible;
		opacity: 1;
	}
	.nav-wrapper .root-item:not(.current-menu-item) > a:hover::after {
		visibility: visible;
		opacity: .45;
	}
}


/* ==========================================================================
   6. Home page (section 5 "الرئيسية").
      Hero markup today: an Elementor section with two columns (HTML widget holding section.ftn-sec.ftn-hero, then an
      image widget). The integrator will add class ftn-hero to that section and ftn-hero-img to the image widget;
      the :has() selectors below match the current markup as well.
   ========================================================================== */
.elementor-section:is(.ftn-hero, :has(section.ftn-hero)) > .elementor-container {
	align-items: center;
}
/* hero image: whole image (never cropped: the label is baked into its top corner) on a peach panel */
:is(.ftn-hero-img, .elementor-section:is(.ftn-hero, :has(section.ftn-hero)) .elementor-widget-image) img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--peach);
	border-radius: 24px;
}
/* wherever the hero title wraps (desktop text column), split it into two even lines instead of leaving the last word
   alone; on phones it already fits one line (Safari 17.5+, older browsers keep the normal wrap) */
.ftn-hero h1 {
	text-wrap: balance;
}
/* desktop home: the text sections drop .ftn-sec's 1140px cap and 16px inset, so headings, steps, trust and FAQ share
   one edge with the product grids, hero image and footer (the boxed Elementor column, 1180px). The hero text keeps its
   inline-end gap towards the image. The 680px text pages (.ftn-page-body) and phones are unchanged. */
@media (min-width: 768px) {
	.home .elementor-widget-html .ftn-sec:not(.ftn-page-body) {
		max-width: none;
		padding-inline: 0;
	}
	.home .elementor-widget-html .ftn-sec.ftn-hero {
		padding-inline: 0 16px;
	}
}
@media (max-width: 767px) {
	/* image first on phones (works with or without Elementor's "Reverse Columns (Mobile)") */
	.elementor-section:is(.ftn-hero, :has(section.ftn-hero)) > .elementor-container > .elementor-column:has(.elementor-widget-image) {
		order: -1;
	}
	:is(.ftn-hero-img, .elementor-section:is(.ftn-hero, :has(section.ftn-hero)) .elementor-widget-image) img {
		max-height: 44vh;
		max-height: 44svh;
		border-radius: 20px;
	}
	.ftn-sec.ftn-hero {
		padding-block: 12px 8px;
	}
	.ftn-hero h1 {
		font-size: 30px;
		line-height: 1.25;
		margin: 0 0 8px;
	}
	.ftn-hero .ftn-lead {
		font-size: 16px;
		margin: 0 0 12px;
	}
	.ftn-hero .ftn-steps-inline {
		margin: 8px 0 12px;
	}
	.ftn-hero .ftn-ctas {
		display: grid;
		gap: 4px;
		margin: 0;
	}
	.ftn-hero .ftn-btn-primary {
		width: 100%;
		min-height: 52px;
	}
	/* second action becomes a text link («طريقة الاستخدام» → #ritual after the copy change) */
	.ftn-hero .ftn-btn-ghost {
		justify-self: center;
		border: 0;
		background: none;
		min-height: 44px;
		padding-inline: 12px;
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	/* no peach pill from the ghost hover rule (iPhone keeps :hover after a tap on this same-page link) */
	.ftn-hero .ftn-btn-ghost:hover, .ftn-hero .ftn-btn-ghost:focus-visible {
		background: none !important;
	}
}

/* alternating section backgrounds: steps and trust on full-width cream bands (the Elementor section is full width,
   the inner .ftn-sec is capped at 1140px). .ftn-band-peach is an optional hook for any other Elementor section. */
.elementor-section:is(.ftn-band-peach, :has(section.ftn-ritual), :has(section.ftn-trust)) {
	background-color: var(--peach-2);
}

/* numbered steps: compact rows (40px apricot number, then name, when, how) instead of tall empty boxes */
.ftn-steps {
	gap: 20px 24px;
	margin: 16px 0 0;
}
.ftn-step {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 14px;
	align-content: start;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.ftn-step > .ftn-stepn {
	grid-row: 1 / span 3;
	width: 40px;
	height: 40px;
	margin: 0;
	font-size: 20px;
}
.ftn-step > :not(.ftn-stepn) {
	grid-column: 2;
	margin: 0 0 4px;
}
.ftn-step > h3 {
	margin: 6px 0 2px;
}
@media (max-width: 767px) {
	.ftn-steps {
		gap: 16px;
	}
}

/* trust: small white cells with a rust line icon, no heavy borders. One column on phones (a 2-column grid left the
   third card alone and cramped the wraps); from 768px one equal row of however many cards are visible: 3 now, 4 once
   «تواصلي معنا» is filled in (hidden .ftn-ph-line items are display:none, so they take no column). */
.ftn-trust-list {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
@media (min-width: 768px) {
	.ftn-trust-list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}
.ftn-trust-item {
	background: var(--surface);
	border: 0;
	border-radius: var(--r);
	padding: 16px;
}
.ftn-trust-item::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 0 8px;
	background-color: var(--acc-ink);
	-webkit-mask: var(--ftn-ico-check-circle) center / contain no-repeat;
	mask: var(--ftn-ico-check-circle) center / contain no-repeat;
}
.ftn-trust-item h3 {
	font-size: 16px;
	margin: 0 0 4px;
}
.ftn-trust-item p {
	font-size: 14px;
	margin: 0;
}
/* phones: icon beside the text so the full-width list stays compact */
@media (max-width: 767px) {
	.ftn-trust-item {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}
	.ftn-trust-item::before {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 2px 0 0;
	}
	.ftn-trust-item > * {
		grid-column: 2;
	}
}
/* keeps a number or a short phrase on one line (content adds it, e.g. the commercial registration number) */
.ftn-nowrap {
	white-space: nowrap;
}

/* FAQ accordions everywhere (home, /faq/, product pages): hairline dividers instead of boxes, 56px rows and a rust
   plus that turns into a cross when open. ftn-funnel.css keeps the whole row as the target. */
.ftn-faq-item {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	margin: 0;
}
:not(.ftn-faq-item) + .ftn-faq-item {
	border-top: 1px solid var(--line);
}
.ftn-faq-item > summary {
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 8px 0;
}
.ftn-faq-item > summary::after {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	margin-inline-start: auto;
	color: var(--acc-ink);
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: transform .2s ease;
}
.ftn-faq-item[open] > summary::after {
	transform: rotate(45deg);
}
.ftn-faq-item > .ftn-faq-answer {
	padding: 0 0 14px;
	color: var(--muted);
}
/* the link line under the last FAQ divider («كل الأسئلة» on home, «ما لقيتِ جوابك؟ تواصلي معنا» on /faq/): no rule gave it
   a top margin, so it hung about 4px under the divider, and its link was a ~20px tap target. /faq/ adds more in section 13. */
.ftn-sec .ftn-more {
	margin: 8px 0 0;
}
.ftn-sec .ftn-more a {
	display: inline-block;
	padding-block: 10px;
}
@media (prefers-reduced-motion: reduce) {
	.ftn-faq-item > summary::after {
		transition: none;
	}
}


/* ==========================================================================
   7. Product cards (home, shop, related): image radius 16px, no badge over the image, a white «أضيفي للسلة» pill
      44px tall with ink text in every state (Elessi: a 36px coral/rust circle that only shows text on hover).
   ========================================================================== */
/* the «شحن مجاني» badge sat on the image label: hidden on cards and on the product page, where the shipping line under
   the price already says it (cards get it as .ftn-card-ship) */
.product-item .nasa-badges-wrap .hot-label,
.single-product .product-gallery .nasa-badges-wrap .hot-label {
	display: none;
}
.product-item .product-img-wrap, .product-item .product-img {
	border-radius: var(--r);
}
.product-item .product-img {
	overflow: hidden;
}
/* the button group spans the image (Elessi: a 1px column at the edge) but lets taps through to the image link */
body .product-item .nasa-product-grid, body.nasa-rtl .product-item .nasa-product-grid {
	inset-inline: 0;
	width: auto;
	padding-top: 0;
	pointer-events: none;
}
body .product-item .nasa-product-grid > :not(.add-to-cart-grid):not(.screen-reader-text) {
	display: none;
}
/* style.css forces a.add_to_cart_button apricot with !important: the pill overrides it the same way */
body .product-item .nasa-product-grid .add-to-cart-grid, body.nasa-rtl .product-item .nasa-product-grid .add-to-cart-grid {
	position: absolute;
	inset-inline: 10px;
	top: auto;
	bottom: 10px;
	width: auto;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94) !important;
	border: 0 !important;
	color: var(--ink) !important;
	box-shadow: 0 2px 8px rgba(46, 36, 32, .08);
	transform: none;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
/* the pill sits on a peach strip under the photo, not over the product (it hid the jar and tube bases). Elessi's
   .nasa-product-grid (absolute; top:0; bottom:0) stretches over the wrapper's padding, so bottom:10px lands in the strip;
   --peach is the image background (#F6DCC6) and the wrapper's colour (style.css), so the strip reads as part of the photo.
   Loop grids only (not the side cart's cross-sells); phone single rows are left alone (section 8 makes them static). */
@media (min-width: 768px) {
	ul.products > li.product-warp-item > .product-item .product-img-wrap {
		padding-bottom: 64px;
	}
}
@media (max-width: 767px) {
	ul.products > li.product-warp-item > .product-item.product_cat-bundles .product-img-wrap,
	.ftn-grid-bundles ul.products > li.product-warp-item > .product-item .product-img-wrap {
		padding-bottom: 64px;
	}
}
body .product-item .nasa-product-grid .add-to-cart-grid:hover, body .product-item .nasa-product-grid .add-to-cart-grid:focus-visible,
body.nasa-rtl .product-item .nasa-product-grid .add-to-cart-grid:hover {
	background: var(--surface) !important;
	color: var(--ink) !important;
}
/* label always shown and ink (Elessi hides it on phones and turns it white on hover). Elessi's style.css also gives it
   overflow:hidden and a 36px radius: inside the flex pill the span becomes a block one line tall, which clipped the
   hamza of «أ» and the dots of the final «ي» (it read «اضيفى»). overflow:visible is the fix; the taller line box and the
   zero radius keep the marks clear if overflow is ever reset. One line, no ellipsis: the 44px pill has the room. */
html body .product-item .nasa-product-grid .add-to-cart-grid .add_to_cart_text,
html body .product-item .nasa-product-grid .add-to-cart-grid:hover .add_to_cart_text,
html body.nasa-rtl .product-item .nasa-product-grid .add-to-cart-grid:hover .add_to_cart_text {
	display: inline;
	position: static;
	width: auto;
	padding: 0;
	visibility: visible;
	background: transparent;
	color: var(--ink);
	font: 600 14px/1.5 var(--h);
	text-transform: none;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
	border-radius: 0;
}
html body .product-item .nasa-product-grid .add-to-cart-grid .cart-icon,
html body.nasa-rtl .product-item .nasa-product-grid .add-to-cart-grid .cart-icon {
	position: static;
	width: auto;
	height: auto;
	line-height: 1;
	background: transparent;
	color: var(--ink);
}
html body .product-item .nasa-product-grid .add-to-cart-grid.loading .add_to_cart_text {
	opacity: .4;
}
/* name, meta line, price (brand_spec: 24px on cards) */
.product-item .product-info-wrap {
	padding-top: 10px;
}
.product-item .info .name {
	font-family: var(--h);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}
body .product-item .info .price {
	font: 700 24px/1.3 var(--h);
	color: var(--ink);
}
/* lines printed by the integrator under the title / price (bundle contents or step, and «الشحن مجاني») */
.ftn-card-meta {
	margin: 2px 0 4px;
	font-size: 14px;
	color: var(--muted);
}
.ftn-card-ship {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--acc-ink);
}
/* sold out: a text line under the price instead of Elessi's badge, which style.css hides with every badge over the image */
.ftn-card-out {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}


/* ==========================================================================
   8. Grids. Phones: one column; bundles stay full cards, singles become compact rows (112px image, name and
      price, then the button), so no product is left alone in a row. Keyed on WooCommerce's product_cat-* classes so
      the home shortcodes, the shop and any loop agree; .ftn-grid-bundles / .ftn-grid-singles (classes on the two
      home shortcode widgets) work too. Shop on desktop: 6-column grid, bundles span 3, singles span 2.
   ========================================================================== */
@media (max-width: 767px) {
	ul.products {
		margin-inline: 0;
	}
	ul.products > li.product-warp-item,
	body.nasa-rtl ul.products > li.product-warp-item:nth-of-type(n) {
		display: block;
		width: 100%;
		float: none;
		padding: 0 0 16px;
	}
	/* compact row */
	ul.products > li.product-warp-item > .product-item.product_cat-singles,
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		position: relative;
		margin: 0;
		padding: 10px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r);
	}
	ul.products > li.product-warp-item > .product-item.product_cat-singles > :not(.product-img-wrap):not(.product-info-wrap),
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item > :not(.product-img-wrap):not(.product-info-wrap) {
		grid-column: 1 / -1;
	}
	/* the image wrapper and button group stop being positioning boxes, so the button sits under name and price */
	ul.products > li.product-warp-item > .product-item.product_cat-singles .product-img-wrap,
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item .product-img-wrap {
		position: static;
		border-radius: 12px;
	}
	ul.products > li.product-warp-item > .product-item.product_cat-singles .product-img,
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item .product-img {
		border-radius: 12px;
	}
	body ul.products > li.product-warp-item > .product-item.product_cat-singles .nasa-product-grid,
	body .ftn-grid-singles ul.products > li.product-warp-item > .product-item .nasa-product-grid {
		position: static;
	}
	body.nasa-rtl ul.products > li.product-warp-item > .product-item.product_cat-singles .nasa-product-grid .add-to-cart-grid,
	body ul.products > li.product-warp-item > .product-item.product_cat-singles .nasa-product-grid .add-to-cart-grid,
	body .ftn-grid-singles ul.products > li.product-warp-item > .product-item .nasa-product-grid .add-to-cart-grid {
		inset-inline-start: calc(10px + 112px + 12px);
		inset-inline-end: 10px;
		bottom: 10px;
		background: var(--surface) !important;
		border: 1px solid var(--ink) !important;
		box-shadow: none;
	}
	ul.products > li.product-warp-item > .product-item.product_cat-singles .product-info-wrap,
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item .product-info-wrap {
		padding: 0 0 54px;
	}
	ul.products > li.product-warp-item > .product-item.product_cat-singles .info .price,
	.ftn-grid-singles ul.products > li.product-warp-item > .product-item .info .price {
		font-size: 20px;
	}
}
@media (min-width: 768px) {
	:is(.post-type-archive-product, .tax-product_cat) ul.products {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-flow: dense;
		column-gap: 24px;
		margin-inline: 0;
	}
	:is(.post-type-archive-product, .tax-product_cat) ul.products::before,
	:is(.post-type-archive-product, .tax-product_cat) ul.products::after {
		display: none;
	}
	:is(.post-type-archive-product, .tax-product_cat) ul.products > li.product-warp-item {
		grid-column: span 2;
		display: block;
		width: auto;
		float: none;
		padding: 0 0 24px;
	}
	:is(.post-type-archive-product, .tax-product_cat) ul.products > li.product-warp-item:has(> .product_cat-bundles) {
		grid-column: span 3;
	}
}


/* ==========================================================================
   9. Shop toolbar: no filters, sort, view switch or result count for five products (recorded decision
      «Shop filters… reject»). The theme options remain the real fix; this is the fallback.
   ========================================================================== */
:is(.post-type-archive-product, .tax-product_cat) :is(.filters-container, .nasa-top-bar-content, .nasa-push-cat-filter,
	.showing_info_top, .woocommerce-result-count, .woocommerce-ordering) {
	display: none !important;
}
/* the header's 9-dot «فئات المنتجات» icon (shop and category pages only) opened a panel repeating the two menu items.
   Real fix: theme mod show_icon_cat_top = not-show; this is the fallback. The bottom bar's categories link is another class. */
li.nasa-icon-filter-cat {
	display: none !important;
}
/* shop title «كل المنتجات»: Elessi's app CSS hides it on phones (the page opened straight on a product image) and its
   archive CSS centres it with no gap above the cards (the hidden toolbar used to give that gap). Same size and alignment
   as the other page titles (.ftn-sec h1 in style.css); selectors outweigh both Elessi rules. */
body.nasa-in-mobile.nasa-mobile-app .woocommerce-products-header .woocommerce-products-header__title,
body .woocommerce-products-header .woocommerce-products-header__title {
	display: block;
	text-align: start;
	margin: 20px 0 24px;
	font: 700 clamp(30px, 5vw, 44px)/1.35 var(--h);
	color: var(--ink);
}
/* the title sits in .nasa_shop_description-wrap, outside the .row > .columns box: start-aligned it ran to the screen edge.
   Same 1200px row and 10px column padding as ul.products, so it lines up with the cards. */
.nasa_shop_description-wrap .woocommerce-products-header {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 10px;
	box-sizing: border-box;
}
/* phones: Elessi's cold-grey rule under the product grid (style-mobile-app.css) is the only off-palette line on the page */
body.nasa-in-mobile.nasa-mobile-app .nasa-products-page-wrap {
	border-bottom: 0;
}


/* ==========================================================================
   10. Product page (section 5 "صفحة المنتج").
   ========================================================================== */
/* SKU and category line, the in-stock text and the next-product arrow go (the out-of-stock text stays: it is true) */
.single-product .product_meta,
.single-product .products-arrow {
	display: none !important;
}
.single-product .product-info .stock.in-stock {
	display: none;
}
.single-product .product-info .stock {
	color: var(--acc-ink);
}
/* price 30px (brand_spec price_product_page) */
.single-product .summary .price {
	font: 700 30px/1.3 var(--h);
	color: var(--ink);
}
/* ✓ glyphs become a small rust line icon */
.ftn-trust-strip li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.ftn-trust-strip li::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	margin: 4px 0 0;
	background-color: var(--acc-ink);
	-webkit-mask: var(--ftn-ico-check) center / contain no-repeat;
	mask: var(--ftn-ico-check) center / contain no-repeat;
}
/* share: one quiet 44px row, WhatsApp and X only (Facebook off per conversion/decisions.json) */
.product-info .nasa-single-share {
	gap: 4px 8px;
	min-height: 44px;
	margin: 8px 0;
	font-size: 14px;
}
.product-info .nasa-single-share .nasa-share-label {
	font-weight: 500;
	color: var(--muted);
}
.product-info .nasa-single-share .nasa-share-label svg {
	display: none;
}
.product-info .nasa-single-share .social-icons {
	display: flex;
	align-items: center;
}
.product-info .nasa-single-share a.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ink);
}
.product-info .nasa-single-share a.icon:not([href*="whatsapp"]):not([href*="x.com/"]):not([href*="twitter.com/"]) {
	display: none;
}
/* Elessi app layout on phones (while mobile_layout stays "app"): a normal solid header above the image instead of
   white icons floating over it (they covered the image label); bottom of the image rounded */
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-header {
	position: relative;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-header .logo {
	visibility: visible;
	opacity: 1;
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-header :is(.ns-back-history, .mini-cart, .mobile-search, .ns-icon) {
	background-color: transparent;
	color: var(--ink);
}
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-header :is(.ns-back-history, .mini-cart, .mobile-search, .ns-icon) svg {
	fill: var(--ink);
}
body.nasa-mobile-app.single-product .nasa-main-image-default-wrap {
	border-radius: 0 0 20px 20px;
	overflow: hidden;
}
/* sticky add-to-cart bars: white bar with a hairline and soft shadow, a 50px apricot pill, iPhone safe area.
   .ns_btn-fixed is the app-layout bar (mobile_fixed_add_to_cart "btn"), .nasa-add-to-cart-fixed the classic one. */
body .ns_btn-fixed, body .nasa-add-to-cart-fixed {
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 18px rgba(46, 36, 32, .06);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
body .ns_btn-fixed {
	gap: 10px;
}
html body .ns_btn-fixed .button, html body .nasa-add-to-cart-fixed .single_add_to_cart_button {
	height: auto;
	min-height: 50px;
	border-radius: 999px !important;
}
/* the app bar's label stays one line if the price is added to it («أضيفي للسلة · 182 ر.س» fits the 358px pill) */
html body .ns_btn-fixed .button {
	white-space: nowrap;
}
/* phones (app layout): Elessi pads every summary block by 20px (.product-info > *), on top of our blocks' own margins,
   which left loose bands around the shipping line, trust list and share row. Those blocks keep only their margins.
   Elessi's 8px separator (::after, absolute at bottom:0, ivory since section 4) sat inside that padding: without the
   padding it would cover the block's last line, so it goes for these blocks. .ftn-ritual-up keeps its padding (inside
   the peach card). */
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-info > :is(.ns-begin-wrap, .ftn-pdp-ship, .woocommerce-product-details__short-description, form.cart, .ftn-trust-strip, .nasa-single-share) {
	padding-bottom: 0;
}
/* .ns-begin-wrap holds the title, price and shipping line: its separator would cover the shipping line once unpadded */
body.nasa-in-mobile.nasa-mobile-app #wrapper .product-info > :is(.ns-begin-wrap, .woocommerce-product-details__short-description, form.cart, .nasa-single-share)::after {
	display: none;
}
/* «قد يعجبك أيضًا» lines up with the cards: Elessi's app CSS forces text-align:left on phones, and on desktop the
   heading carries .text-center (text-align:center !important), hence !important here */
body.nasa-rtl #wrapper .related-product .nasa-title-relate,
body.nasa-in-mobile.nasa-mobile-app.nasa-rtl #wrapper .related-product .nasa-title-relate {
	text-align: start !important;
}
@media (min-width: 768px) {
	/* Elessi pads the heading 20px; at 1440px the cards, «الوصف» and the FAQ end flush with the row, so no inset */
	body.nasa-rtl #wrapper .related-product .nasa-title-relate {
		padding-inline: 0;
	}
}
/* related cards get the same peach strip under the photo as shop and home, so the pill does not cover the product */
.related-product .product-item .product-img-wrap {
	padding-bottom: 64px;
}
/* FAQ «قبل ما تطلبين»: the same edge as gallery, «الوصف» and related products (Elessi .row 1200px + 10px column).
   Desktop (modern-3): its parent .nasa-single-product-slide is full width, so it gets the row width itself.
   Phones (Elessi's mobile markup, body.nasa-in-mobile): its parent .large-9.columns already adds 10px, so .ftn-sec's
   16px came on top (26px). Top padding tightened on phones only (desktop keeps .ftn-sec's 40px). */
.single-product .ftn-sec.ftn-pdp-faq {
	max-width: 1200px;
	padding-inline: 10px;
}
body.nasa-in-mobile.single-product .ftn-sec.ftn-pdp-faq {
	padding-inline: 0;
}
@media (max-width: 767px) {
	.single-product .ftn-sec.ftn-pdp-faq {
		padding-top: 12px;
	}
}
/* desktop reading column: FAQ rows and the description body end at 760px from the start edge (in RTL a narrower block
   stays on the right), instead of the '+' sitting ~1100px from its label and the body starting 150px in
   (Elessi: .nasa-vertical-notabs .nasa-content-panel padding-right 150px) */
@media (min-width: 1024px) {
	.single-product .ftn-pdp-faq > :is(h2, details) {
		max-width: 760px;
	}
	body.nasa-rtl.single-product .nasa-vertical-notabs .nasa-content > .nasa-content-panel {
		padding-right: 0;
		max-width: 760px;
	}
}
.single-product .woocommerce-tabs .nasa-content-panel {
	font-size: 16px;
	line-height: 1.8;
}
/* quantity stepper (summary + desktop sticky bar): one 44px pill instead of Elessi's stacked 21px squares, matching
   the side cart and the cart page: − on the right, + on the left in RTL (DOM order is plus, field, minus).
   Not on .hidden-tag: Elessi's wrapper when the quantity cannot change (min = max, e.g. one left in stock), which its
   own display:none hides; a display here would bring it back as an empty pill. */
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity:not(.hidden-tag) {
	width: auto;
	float: none;
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	overflow: hidden;
}
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity :is(.plus, .minus) {
	position: static;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--ink);
}
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity .minus {
	order: 1;
}
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity .input-text.qty {
	order: 2;
	width: 40px;
	height: 44px;
	line-height: 44px;
	border-block: 0;
	border-inline: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
}
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity .plus {
	order: 3;
}
/* soft peach hover inside the pill (Elessi: a grey #efefef square) */
.single-product :is(form.cart, .nasa-add-to-cart-fixed) .quantity :is(.plus, .minus):hover,
.woocommerce-cart-form .shop_table .product-quantity .quantity :is(.plus, .minus):hover {
	background: var(--peach-2);
	color: var(--ink);
}


/* ==========================================================================
   11. Side cart (#cart-sidebar inside .nasa-static-sidebar).
   ========================================================================== */
/* title «سلتك» on one line at 20px (Elessi: 220% / 800, and 25px/50px in the app layout through a :not(#id) selector) */
#cart-sidebar .nasa-sidebar-close .nasa-sidebar-tit,
body.nasa-in-mobile.nasa-mobile-app #cart-sidebar.nasa-static-sidebar:not(#nasa-quickview-sidebar) .nasa-sidebar-close .nasa-sidebar-tit {
	font-family: var(--h);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* app layout: Elessi centres the title only through line-height 50px; at line-height 1.4 it sat ~11px above the
   close × in the 50px flex header (the × is absolutely placed, so only the title moves) */
body.nasa-in-mobile.nasa-mobile-app #cart-sidebar.nasa-static-sidebar:not(#nasa-quickview-sidebar) .nasa-sidebar-close .nasa-sidebar-tit {
	align-self: center;
}
/* a little wider on phones so the upgrade line and the totals breathe (Elessi: max-width 80%) */
.nasa-static-sidebar#cart-sidebar {
	max-width: 92%;
}
#cart-sidebar .nasa-image-cart-item img {
	width: 72px;
	height: auto;
	border-radius: 12px;
}
/* quantity stepper: 44px targets, 16px digits (no iPhone zoom). Elessi clips the stepper to a 60px box
   (.mini-cart-item .quantity {width:60px; overflow:hidden}), which hid the plus and the digit: the box grows with them. */
#cart-sidebar .mini-cart-item .quantity {
	width: auto;
	border-radius: 999px;
	border-color: var(--line);
}
#cart-sidebar .quantity :is(.plus, .minus) {
	min-width: 44px;
	min-height: 44px;
}
#cart-sidebar .mini-cart-item .quantity :is(.plus, .minus) {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
#cart-sidebar .quantity .qty {
	min-width: 40px;
	min-height: 44px;
	font-size: 16px;
}
#cart-sidebar .mini-cart-item .quantity .input-text.qty {
	height: 44px;
	line-height: 44px;
	border-color: var(--line);
}
/* one price per line: «× 182 ر.س» next to the stepper repeated the bold line total and, on desktop, wrapped onto a third
   row. Only inside .quantity-wrap, i.e. when the stepper is shown (without it Elessi prints «qty × price» there, the only
   quantity shown). The line total then sits level with the digit instead of top-aligned. */
#cart-sidebar .mini-cart-item .quantity-wrap > .cart_list_product_quantity {
	display: none;
}
#cart-sidebar .mini-cart-item .mini-cart-item-price {
	align-items: center;
}
/* cart page stepper: the same 44px pill as the side cart (Elessi: a 45x42 field with stacked 21px squares). Elessi
   reorders the buttons only for the side cart and checkout, so the order is set here: − right, + left in RTL.
   .hidden-tag (quantity fixed, min = max) stays hidden, as on the product page. */
.woocommerce-cart-form .shop_table .product-quantity .quantity:not(.hidden-tag) {
	display: inline-flex;
	align-items: stretch;
	width: auto;
	float: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	overflow: hidden;
}
.woocommerce-cart-form .shop_table .product-quantity .quantity :is(.plus, .minus) {
	position: static;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--ink);
}
.woocommerce-cart-form .shop_table .product-quantity .quantity .minus {
	order: 1;
}
.woocommerce-cart-form .shop_table .product-quantity .quantity .input-text.qty {
	order: 2;
	width: 40px;
	height: 44px;
	line-height: 44px;
	border-block: 0;
	border-inline: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
}
.woocommerce-cart-form .shop_table .product-quantity .quantity .plus {
	order: 3;
}
/* «إتمام الطلب»: apricot with ink text (Elessi: rust with white, !important through the same selector) */
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout,
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout:hover,
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout:focus-visible {
	background-color: var(--acc) !important;
	border-color: var(--acc) !important;
	color: var(--ink) !important;
	min-height: 52px;
}
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout:hover {
	background-color: var(--acc-hover) !important;
	border-color: var(--acc-hover) !important;
}
/* owner round 3: «إتمام الطلب» is the main action, so it comes first; «عرض السلة» is a secondary text link under it
   (Elessi prints «عرض السلة» first in the markup) */
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
}
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout) {
	background-color: transparent !important;
	border: 0 !important;
	color: var(--ink) !important;
	min-height: 44px;
	margin: 0 !important;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	box-shadow: none !important;
}
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout):hover,
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout):focus-visible {
	background-color: transparent !important;
	color: var(--acc-ink) !important;
}
html body .nasa-static-sidebar .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout {
	margin: 0 !important;
}


/* ==========================================================================
   12. Checkout extras.
   ========================================================================== */
/* consent box lighter: the checkout card already frames it (no double frame); no bottom margin, the card's padding ends it */
.woocommerce-checkout .ftn-consent {
	border: 0;
	padding: 0;
	margin-bottom: 0;
}
/* consent label in ink like the text around it (Elessi greys every checkout label #747474, lighter than its own
   footnote); wording untouched (versioned text) */
.woocommerce .checkout-group .ftn-consent label {
	color: var(--ink);
}
/* Elessi's 15px row margin (#main-content form .form-row) beat ftn-funnel.css's margin:0 and left ~50px empty under it */
#main-content .ftn-consent .form-row {
	margin-bottom: 0;
}
/* help text under a field (the National Address hint): a little air under the input, and an underline that clears the
   dots under ب and ي (em offset, so it follows the font size) */
.woocommerce-checkout .form-row .description {
	display: block;
	margin-top: 6px;
	line-height: 1.7;
}
.woocommerce-checkout .form-row .description a {
	text-underline-offset: .35em;
	text-decoration-thickness: 1px;
}
/* no payment method enabled (all gateways are off until the owner turns one on): «تأكيد الطلب» would only return an
   error, so it hides while the methods list is printed but holds no gateway (each real one is li.wc_payment_method;
   a free order that needs no payment prints no list and keeps the button). The notice becomes a soft peach note. */
body.woocommerce-checkout #payment:has(ul.wc_payment_methods):not(:has(li.wc_payment_method)) #place_order {
	display: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li > .woocommerce-info {
	flex: 1 1 auto; /* Elessi makes the li a flex row: the note fills it instead of hugging its text */
	background: var(--peach-2);
	border: 0;
	border-radius: var(--r-s);
	padding: 12px 14px;
	margin: 0;
	color: var(--ink);
	font-size: 15px;
}
/* login form (my-account and the checkout returning-customer box) and the coupon box: a white hairline card like the
   checkout boxes instead of Elessi's 2px dashed grey frame */
#main-content form.woocommerce-form-login,
#main-content form.checkout_coupon {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	padding: 24px 20px 16px;
}
/* «تذكّرني» stays (Safari would otherwise keep a session-only login): an 18px brand checkbox */
#main-content .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	accent-color: var(--acc-ink);
	margin-inline-start: 0;
	margin-inline-end: 6px;
}
/* style.css's old [class*="-ph"] placeholder rule also matched WooCommerce's .validate-phone row (grey italic phone field).
   style.css now names .ftn-scent-ph/.ftn-ph/.ftn-ph-line only; this stays as a guard if an older style.css is still cached. */
.woocommerce form .form-row.validate-phone,
.woocommerce form .form-row.validate-phone :is(label, input) {
	font-style: normal;
	color: var(--ink);
}


/* ==========================================================================
   13. Text pages (about, FAQ, contact, policies, offers, order status): a 680px reading column.
   ========================================================================== */
body.page:not(.home):not(.elementor-page):not(.woocommerce-page):not(.ftn-min) :is(.entry-content, .entry-header),
.ftn-sec.ftn-page-body {
	max-width: 680px;
	margin-inline: auto;
}
.ftn-page-body h2 {
	margin: 28px 0 8px;
}
.ftn-policy h2 {
	font-size: clamp(20px, 2vw, 22px);
}
.ftn-page-body :is(p, li) {
	margin-block: 0 12px;
}
/* /faq/ closing line «ما لقيتِ جوابك؟ تواصلي معنا»: set apart from the list as the page's next step, at body size */
.ftn-faq > .ftn-more {
	margin: 24px 0 0;
	font-size: 16px;
}
/* policy pages: if a closing «… تواصلي معنا» line uses .ftn-more (instead of a heading over a lone link), a hairline
   sets it apart from the last section */
.ftn-policy > .ftn-more {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
/* order status: the path «حسابي ← الطلبات» is one link and must not break at its arrow. The content now shows the guest
   lookup instead (pages.json ORDER-CD01); this stays for when the account line returns with registration. */
.ftn-order-status li a {
	white-space: nowrap;
}
/* order status, guest lookup ([woocommerce_order_tracking]): Elessi centres its intro and caps the rows at 500px in the
   middle of the 680px column; here they follow the page's start edge like the paragraphs around them */
.ftn-order-status .woocommerce-form-track-order p,
.ftn-order-status .woocommerce-form-track-order p.form-row {
	max-width: none;
	margin-inline: 0;
	text-align: start;
}
.ftn-order-status .woocommerce-form-track-order p:first-child {
	margin-bottom: 16px;
	font-weight: 400; /* Elessi's style-font-weight-600.css made this intro line read like a sub-heading */
}
/* about: if the three steps are written as chips (.ftn-steps-inline.ftn-steps-about), long labels stack one per line
   instead of squeezing in the home page's no-wrap row */
.ftn-page-body .ftn-steps-about {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 8px 0 12px;
}
.ftn-page-body .ftn-steps-about li {
	margin: 0;
}


/* ==========================================================================
   14. Footer (Elementor template 56): the two link columns side by side on phones, 44px link rows.
   ========================================================================== */
@media (max-width: 767px) {
	.elementor-section.ftn-footer-top > .elementor-container > .elementor-column:has(.ftn-footer-links) {
		width: 50%;
	}
	.ftn-footer-links li {
		margin: 0;
	}
	.ftn-footer-links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}
.ftn-footer-bottom {
	font-size: 13px;
	color: var(--muted);
}
/* phones: the © line sat under Elessi's fixed bottom bar (61px) at full scroll (Elessi's footer margin for it never
   applied). Padding, so the footer colour fills the space under the bar. Not on product pages (the sticky add-to-cart
   bar replaces the bottom bar and Elessi pads the body), checkout (own slim footer) or ftn-min pages (no footer). */
@media (max-width: 767px) {
	body:not(.single-product):not(.woocommerce-checkout):not(.ftn-min) .ftn-footer-bottom {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}
}
/* desktop: short pages (cart with one item, order status) ended the footer above the window bottom, leaving an ivory
   band under it. The content area gets the window height minus the measured top bar + header (~134px) and footer
   (~292px); if either changes, the result is a small band or a slight scroll, nothing breaks. */
@media (min-width: 768px) {
	body:not(.woocommerce-checkout):not(.ftn-min) #main-content {
		min-height: calc(100vh - 430px);
	}
}
/* footer logo: the SVG artwork (viewBox 100x44, word centred) has ~20% empty space on each side, so the word sat ~20px
   inside the edge the tagline and link columns share. Showing only the middle 62 units (object-fit crops equally on
   both sides) puts its right edge ~2px from that edge, and the box stays inside the column. */
.ftn-footer-brand-col img {
	width: 62px;
	height: 44px;
	object-fit: cover;
}


/* ==========================================================================
   15. iPhone input size: quantity fields at 16px everywhere (Elessi's base is 14.5px, which makes Safari zoom).
   ========================================================================== */
body .quantity .input-text.qty, body .quantity input.qty {
	font-size: 16px;
}


/* ==========================================================================
   16. Phones: no floating back-to-top disc. Elessi's 45px white circle (fixed, bottom-left in RTL) sat over card
       buttons, FAQ «+» toggles and RTL line ends; the bottom bar and iOS's tap-the-status-bar already cover it.
       Only the anchor is hidden, so any other button Elessi puts in .nasa-static-group-btn keeps working. Desktop keeps
       it (conversion/decisions.json «Back-to-top button»); checkout and thank-you hide it in ftn-funnel.css.
   ========================================================================== */
@media (max-width: 767px) {
	body .nasa-static-group-btn #nasa-back-to-top {
		display: none !important;
	}
}


/* ==========================================================================
   17. Last polish from the re-shot QA (design_review qa5): links that broke mid-phrase, orphan words, cold-grey
       hairlines left from Elessi on the cart path, and a cart summary card glued to the footer.
   ========================================================================== */
/* a link is one unit: it moves to the next line whole instead of splitting its words and underline */
.ftn-trust-item a,
.ftn-policy p a,
body.woocommerce-checkout #payment ul.payment_methods > li > .woocommerce-info a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
	white-space: nowrap;
}
/* the underline sat on the hamza under إ and the descenders of «الإرجاع» */
.ftn-trust-item a {
	text-underline-offset: .35em;
	text-decoration-thickness: 1px;
}
/* desktop step 1 left «بالماء.» alone on a second line; no effect where the line already fits */
.ftn-steps .ftn-step > p {
	text-wrap: balance;
}
/* warm --line instead of Elessi's #ececec / #efefef next to the redesigned cards */
#cart-sidebar :is(.minicart_total_checkout, .mini-cart-item) {
	border-top-color: var(--line);
}
.woocommerce-cart-form .shop_table :is(th, td, tr) {
	border-color: var(--line);
}
/* the «ملخص الطلب» card touched the footer */
body.woocommerce-cart #main-content {
	padding-bottom: 32px;
}

/* ==========================================================================
   19. Owner round 3 (2026-10-31): message, bundle contents, product page order, side cart, checkout labels, lighter bold.
   ========================================================================== */
/* desktop home: blocks that carry live prices or shipping amounts sit in Elementor shortcode widgets (make_build_input.py
   text_w), so they get the same full-width edge as the HTML widgets */
@media (min-width: 768px) {
	.home .elementor-widget-shortcode .ftn-sec:not(.ftn-page-body) {
		max-width: none;
		padding-inline: 0;
	}
}
/* phones: a shorter hero image, so the line, the description and «اختاري باقتك» are in the first screen */
@media (max-width: 767px) {
	:is(.ftn-hero-img, .elementor-section:is(.ftn-hero, :has(section.ftn-hero)) .elementor-widget-image) img {
		max-height: 30vh;
		max-height: 30svh;
	}
	.ftn-hero h1 {
		font-size: 28px;
	}
}
/* «ليش فاتنة؟» uses the trust cells; four short facts in two columns on desktop */
@media (min-width: 768px) {
	.ftn-why .ftn-trust-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* product cards: the bundle contents with sizes are readable text under the name */
.product-item .ftn-card-meta {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2, var(--ink));
	font-weight: 400;
}

/* product page summary: contents with sizes, the approved promise, then how to use, before the button and the upgrade */
.ftn-pdp-contents {
	list-style: none;
	margin: 4px 0 10px;
	padding: 0;
	display: grid;
	gap: 6px;
}
.ftn-pdp-contents li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 1.5;
}
.ftn-pdp-contents b {
	font-weight: 600;
}
.ftn-stepn-s,
.ftn-pdp-step b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--acc);
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.ftn-pdp-step {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 8px;
	font-size: 15px;
}
.ftn-pdp-benefit {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
.ftn-pdp-how {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
}
/* upgrade box: what is added and the difference, then the button with the new price */
.ftn-bundle-up .ftn-ru-what {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.6;
}
.ftn-bundle-up .ftn-ru-parts {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--muted);
}
.ftn-up-go, .ftn-r2-go {
	width: 100%;
	min-height: 48px;
	white-space: normal;
}
.ftn-up-go.loading, .ftn-r2-go.loading {
	opacity: .6;
	pointer-events: none;
}
.ftn-r2 .ftn-r2-line {
	margin: 0 0 10px;
	line-height: 1.6;
}

/* side cart and cart: free shipping is one quiet line with a tick, no box and no full bar */
.ftn-shipprog.is-free {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 10px;
}
.ftn-shipprog.is-free p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
	font-weight: 500;
}
.ftn-shipprog.is-free p::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background: currentColor;
	color: var(--acc-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ftn-shipprog-total {
	font-weight: 600;
}

/* checkout: a fixed label above every field (Elessi floats it inside the field at opacity 0 until typing), with «*» for
   required and «(اختياري)» for optional fields; placeholders are only examples */
body.woocommerce-checkout .woocommerce-billing-fields .form-row > label,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row > label {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto;
	margin: 0 0 6px !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	background: none !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	text-align: start;
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row > label .optional {
	font-weight: 400;
	color: var(--muted);
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row .description {
	font-size: 13px;
	color: var(--muted);
	margin-top: 6px;
}
/* «وين ألقى عنواني المختصر؟»: a text button under the short address that opens one line of help */
.ftn-na-help-btn {
	display: inline-block;
	margin: 0 4px 0 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--acc-ink);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	min-height: 0;
}
.ftn-na-help-btn:hover, .ftn-na-help-btn:focus-visible {
	background: none;
	color: var(--ink);
}
.ftn-na-help-text {
	display: none;
	margin-top: 2px;
	font-size: 13px;
	color: var(--muted);
}
.ftn-na-help-text.is-open {
	display: block;
}
.ftn-na-help-text a {
	color: var(--acc-ink);
	text-decoration: underline;
}

/* lighter bold: questions, step texts and details read in regular or medium weight; headings, prices and buttons stay bold */
.ftn-faq-item > summary {
	font-weight: 500;
}
.ftn-faq-item .ftn-faq-answer :is(strong, b) {
	font-weight: 600;
}
.ftn-steps .ftn-step > p:not(.ftn-step-when),
.ftn-trust-item p {
	font-weight: 400;
}
.ftn-trust-item h3,
.ftn-steps .ftn-step h3 {
	font-weight: 600;
}
/* phones: the two bundle cards on home keep their photo but at a shorter, whole-image height (they were ~360px each) */
@media (max-width: 767px) {
	.elementor-section:has(#bundles) ul.products .product-img-wrap .main-img img {
		height: 230px;
		width: 100%;
		object-fit: contain;
	}
}
/* hero description: no single word left alone on its last line */
.ftn-hero .ftn-lead {
	text-wrap: balance;
}

/* ==========================================================================
   20. Identity round 4 (2026-10-31, design_review/round4/01_concept_copy_ar.md): the world of fatnah first.
       Same palette and fonts (style.css tokens): ivory page, cream (--peach-2) bands and cards, peach (--peach) lines,
       apricot (--acc) only for numbers and small accents, dark apricot (--acc-ink) for small text and links, coffee ink.
       No new images, no icons or ornaments: the order and the space carry the feeling.
   ========================================================================== */
/* first screen: a warm cream band; on phones the message, the descriptor and «اختاري باقتك» come first and the
   illustration («تصور مقترح») follows, smaller, so no large image delays the message */
.elementor-section:is(.ftn-hero, :has(section.ftn-hero)) {
	background-color: var(--peach-2);
}
.ftn-hero .ftn-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--peach);
	color: var(--acc-ink);
	font-size: 13px;
	line-height: 1.6;
}
.ftn-hero .ftn-lead {
	color: var(--ink);
	max-width: 34em;
}
@media (min-width: 768px) {
	.elementor-section:is(.ftn-hero, :has(section.ftn-hero)) {
		padding-block: 24px;
	}
	:is(.ftn-hero-img, .elementor-section:is(.ftn-hero, :has(section.ftn-hero)) .elementor-widget-image) img {
		max-height: 420px;
	}
}
@media (max-width: 767px) {
	.elementor-section:is(.ftn-hero, :has(section.ftn-hero)) > .elementor-container > .elementor-column:has(.elementor-widget-image) {
		order: 1;
	}
	:is(.ftn-hero-img, .elementor-section:is(.ftn-hero, :has(section.ftn-hero)) .elementor-widget-image) img {
		max-height: 28vh;
		max-height: 28svh;
		margin: 4px 0 16px;
	}
	.ftn-sec.ftn-hero {
		padding-block: 20px 4px;
	}
	.ftn-hero h1 {
		font-size: 32px;
	}
}

/* «عالم فاتنة»: the idea in one lead line, then three short values; white cells with a small apricot dash, no icons */
.ftn-world .ftn-lead {
	max-width: 40em;
	margin: 0 0 18px;
	text-wrap: pretty;
}
.ftn-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
.ftn-values li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 18px 20px 16px;
}
.ftn-values li::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin: 0 0 12px;
	border-radius: 2px;
	background: var(--acc);
}
.ftn-values h3 {
	margin: 0 0 4px;
	font-size: 17px;
}
.ftn-values p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
}
@media (min-width: 768px) {
	.ftn-values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

/* steps: the one-line invitation under the heading */
.ftn-ritual > .ftn-sec-meta {
	margin: 0 0 4px;
}

/* «بكل وضوح»: three facts in one row from 768px (round 3 set two columns for four facts) */
@media (min-width: 768px) {
	.ftn-why .ftn-trust-list {
		grid-template-columns: none;
	}
}

/* «كوني قريبة من فاتنة»: one cream card; the pending sharing lines are hidden by clean mode until a channel exists */
.ftn-sec.ftn-join {
	max-width: 760px;
	margin-block: 24px;
	padding: 24px 20px;
	background: var(--peach-2);
	border: 1px solid var(--peach);
	border-radius: 20px;
}
.home .elementor-widget-html .ftn-sec.ftn-join:not(.ftn-page-body) {
	max-width: 760px;
	padding: 28px 32px;
}
.ftn-join h2 {
	margin: 0 0 8px;
}
.ftn-join > p {
	margin: 0 0 10px;
	line-height: 1.7;
}
.ftn-join > p:last-child {
	margin-bottom: 0;
}
.ftn-join-item b {
	color: var(--acc-ink);
	font-weight: 600;
}
@media (max-width: 767px) {
	.ftn-sec.ftn-join {
		margin-inline: 16px;
	}
}

/* thank-you page: the welcome line under «حيّاك في عالم فاتنة» */
.ftn-ritual-card .ftn-ty-welcome {
	margin: -4px 0 12px;
	color: var(--muted);
	font-size: 15px;
}

/* ==========================================================================
   21. Round 4 fixes (2026-10-31, after the round-4 test): visible checkout errors, the short-address help shown without
       focus, bundle contents under cart lines, the in-cart note of the product-page upgrade, small layout touches.
   ========================================================================== */
/* invalid fields: style.css paints every field with `.woocommerce form .form-row input.input-text` (0,3,2), which beat the
   section-4 rust rule; same selector plus the row state, and a 2px rust edge so the change shows without colour alone */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--acc-ink);
	box-shadow: inset 0 0 0 1px var(--acc-ink);
	background-color: var(--surface);
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid > label {
	color: var(--acc-ink) !important;
}
/* the mobile and short-code checks (a .ftn-hint without data-ftn-kind) mark their field the same way; the street hint
   (data-ftn-kind) is advice, not an error, so its field keeps the normal edge */
.woocommerce form .form-row:has(.ftn-hint:not([data-ftn-kind])) input.input-text {
	border-color: var(--acc-ink);
	box-shadow: inset 0 0 0 1px var(--acc-ink);
}
/* field help (the short-address line and «وين ألقى عنواني المختصر؟») stays in view: WooCommerce hides descriptions until
   the field has focus and slides them away on blur (inline styles), so on a phone the help appeared only with the keyboard */
body.woocommerce-checkout .woocommerce-billing-fields .form-row .woocommerce-input-wrapper .description {
	display: block !important;
	height: auto !important;
	opacity: 1 !important;
	overflow: visible !important;
	position: static;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	background: none;
	border-radius: 0;
	color: var(--muted);
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row .woocommerce-input-wrapper .description::before {
	display: none;
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row .ftn-hint {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.6;
}
/* bundle contents under the line's name in the side cart, the cart page and the order review; the «المحتويات» label is
   read by screen readers only */
:is(#cart-sidebar, .woocommerce-cart-form, .woocommerce-checkout-review-order-table) dl.variation {
	display: block;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}
:is(#cart-sidebar, .woocommerce-cart-form, .woocommerce-checkout-review-order-table) dl.variation dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
:is(#cart-sidebar, .woocommerce-cart-form, .woocommerce-checkout-review-order-table) dl.variation :is(dd, dd p) {
	display: block;
	margin: 0;
	padding: 0;
	float: none;
	font-weight: 400;
}
/* contents lines break in balanced halves, so «مل» or «غ» never sits alone on a line */
:is(#cart-sidebar, .woocommerce-cart-form, .woocommerce-checkout-review-order-table) dl.variation dd,
.ftn-ru-parts {
	text-wrap: balance;
}
/* side-cart upgrade: the new bundle's contents, as in the product-page box */
.ftn-r2 .ftn-ru-parts {
	margin: -2px 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}
/* product page: the bigger bundle is already in the cart, so a short note replaces the upgrade button */
.ftn-bundle-up.is-in-cart .ftn-ru-cart {
	color: var(--acc-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .35em;
}
/* steps: no single word left on the invitation's last line */
.ftn-ritual > .ftn-sec-meta {
	text-wrap: pretty;
}
/* phones: the three values of «عالم فاتنة» a little tighter (the round-4 home grew by about 900px) */
@media (max-width: 767px) {
	.ftn-world .ftn-lead {
		margin-bottom: 12px;
	}
	.ftn-values {
		gap: 8px;
	}
	.ftn-values li {
		padding: 12px 16px;
	}
	.ftn-values li::before {
		width: 24px;
		margin-bottom: 8px;
	}
	.ftn-values p {
		font-size: 14px;
	}
}

/* ==========================================================================
   22. Round 5 (offers spec, design_review/round5/02_implementation_spec.md): gift line at the end of the bundle short
   description, «لحظتك معها» list on bundle pages. The cart's gift suggestion reuses .ftn-r2 (no new style).
   Dots use --acc like the .ftn-values markers: --peach (#F6DCC6) on the ivory page is 1.2:1 and reads as no bullet.
   ========================================================================== */
.ftn-pdp-gift {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--muted);
	text-wrap: pretty;
}
.ftn-moments {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.ftn-moments li {
	position: relative;
	margin-bottom: 6px;
	padding-inline-start: 16px;
}
.ftn-moments li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acc);
}