/**
 * Fitness Secrets — Cart redesign.
 *
 * Styles the WooCommerce core cart markup (no template overrides) using the
 * approved `--fs-*` design tokens. Mirrors the checkout redesign
 * (fs-checkout.css) so the cart → checkout journey is visually continuous:
 *   - Compact branded header with Cart → Checkout → Confirm progress (Cart = current)
 *   - Two-column layout: cart form + sticky order summary
 *   - Card-based cart rows, navy/cyan palette, Cairo typography
 *   - Coupon + update-cart actions, prominent proceed-to-checkout CTA
 *   - Trust strip, restyled cross-sells, empty-cart state
 *   - Mobile single column + sticky total/CTA bar
 *
 * WooCommerce still owns products, prices, quantities, coupons, totals,
 * shipping, and the checkout redirect. Theme hooks only wrap the native
 * fragments into the branded chrome; no cart template is overridden.
 *
 * @package Fitness_Secrets_Child
 */

:root{
	/* Local aliases keep the file readable; tokens already exist globally. */
	--fscart-bg:        var(--fs-color-background);
	--fscart-surface:   var(--fs-color-surface);
	--fscart-ink:       var(--fs-color-primary-dark);
	--fscart-primary:   var(--fs-color-primary);
	--fscart-accent:    var(--fs-color-accent);
	--fscart-muted:     var(--fs-color-muted);
	--fscart-border:    var(--fs-color-border);
	--fscart-light:     var(--fs-color-primary-light);
	--fscart-success:   var(--fs-color-success);
	--fscart-error:     var(--fs-color-error);
	--fscart-radius:    var(--fs-radius-md);
	--fscart-radius-lg: var(--fs-radius-lg);
	--fscart-shadow:    var(--fs-shadow-soft);
	--fscart-shadow-card: var(--fs-shadow-card);
	--fscart-ease:      var(--fs-ease-out, cubic-bezier(.22,.61,.36,1));
}

/* ==========================================================================
   Cart-only header / footer chrome
   ========================================================================== */
body.woocommerce-cart .fs-header,
body.woocommerce-cart .fs-drawer,
body.woocommerce-cart .fs-drawer-backdrop,
body.woocommerce-cart .fs-search-overlay,
body.woocommerce-cart .fs-footer,
body.woocommerce-cart .fs-bottom-nav{
	display: none !important;
}

.fs-cart-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--fscart-border);
}
.admin-bar .fs-cart-header{ top: 32px; }
.fs-cart-header__inner{
	max-width: var(--fs-container, 1240px);
	min-height: 70px;
	margin: 0 auto;
	padding: 10px clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
	align-items: center;
	gap: 24px;
}
.fs-cart-header__brand{
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--fscart-ink);
	font-weight: 800;
	text-decoration: none;
}
.fs-cart-header__brand img{
	display: block;
	width: auto;
	height: 48px;
	object-fit: contain;
}
.fs-cart-progress ol{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 700;
}
.fs-cart-progress li{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--fscart-muted);
	white-space: nowrap;
}
.fs-cart-progress li:not(:last-child)::after{
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fscart-border);
}
.fs-cart-progress li.is-complete::after{ background: var(--fscart-success); }
.fs-cart-progress li.is-current{
	color: var(--fscart-ink);
}
.fs-cart-progress li.is-current::after{
	background: var(--fscart-accent);
	box-shadow: 0 0 0 4px rgba(10, 174, 230, .16);
}
.fs-cart-progress a{
	color: inherit;
	text-decoration: none;
}
.fs-cart-progress a:hover{ color: var(--fscart-primary); }
.fs-cart-header__secure{
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fscart-success);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.fs-cart-header__secure svg{ flex: 0 0 auto; }

.fs-cart-footer{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 64px;
	padding: 18px clamp(16px, 4vw, 32px);
	background: var(--fscart-ink);
	color: rgba(255, 255, 255, .72);
	font-size: 12.5px;
	text-align: center;
}
.fs-cart-footer__brand{
	color: #fff;
	font-weight: 800;
}
.fs-cart-header a:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .34);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ==========================================================================
   Page wrapper / title
   ========================================================================== */
/* Hide the default "Cart" entry title and Kadence's page-hero; the approved
   titlebar (.fs-cart-titlebar) renders the localised heading. */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .kadence-page-title,
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title-section{
	display: none !important;
}

/* Reset Kadence/WooCommerce content shell so the cart owns its width.
   A single background colour flows from body → content → cards so the page
   reads as one surface instead of three nested colour bands. */
body.woocommerce-cart{
	background: var(--fscart-bg);
}
.woocommerce-cart .site,
.woocommerce-cart .site-content,
.woocommerce-cart .content-area,
.woocommerce-cart .entry-content,
.woocommerce-cart .entry{
	background: transparent;
}
/* Prices read number-first, Riyal-after even inside RTL (matches the rest of
   the site — see .fs-site rule in fs-design-system.css). Without this the
   Arabic-Indic digits' bidi flips the symbol to read BEFORE the number. */
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-cart .woocommerce-Price-amount bdi{
	direction: rtl;
	unicode-bidi: isolate;
	display: inline-block;
}
.woocommerce-cart .entry-content{
	max-width: var(--fs-container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
/* WooCommerce wraps the page content; neutralise its inner padding/margins. */
.woocommerce-cart .woocommerce,
.woocommerce-cart .woocommerce-cart-form{
	max-width: none;
}

/* Drop Kadence's default content top padding on cart so the entry title sits
   the same distance below the slim header as on checkout (not behind a large
   empty band). */
body.woocommerce-cart #primary.content-area,
body.woocommerce-cart .content-area .entry-content-wrap,
body.woocommerce-cart .site-content .content-container{
	padding-top: 0;
	margin-top: 0;
}

/* Approved bilingual titlebar. Top space matches checkout's titlebar. */
.woocommerce-cart .fs-cart-titlebar{
	margin: clamp(24px, 3vw, 36px) 0 clamp(18px, 3vw, 26px);
}
/* Hide Kadence's injected "Cart Summary" heading above the cart table; the
   branded "Cart Items" heading (.fs-cart-items-title) replaces it. */
.woocommerce-cart .cart-summary,
.woocommerce-cart .cart-summary h2{
	display: none !important;
}
.woocommerce-cart .fs-cart-items-title{
	font-family: var(--fs-font-ar);
	font-size: 18px;
	font-weight: 800;
	color: var(--fscart-ink);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fscart-border);
	line-height: 1.35;
}
.woocommerce-cart .fs-cart-title{
	font-family: var(--fs-font-ar);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	color: var(--fscart-ink);
	line-height: 1.2;
	margin: 0 0 6px;
}
.woocommerce-cart .fs-cart-subtitle{
	margin: 0;
	color: var(--fscart-muted);
	font-size: 15px;
	line-height: 1.55;
}

/* ==========================================================================
   Two-column grid: cart form + sticky summary
   ========================================================================== */
/* Full-width two-column layout: the cart items card takes the wider column,
   the cart summary card is narrower beside it (not stacked). */
.woocommerce-cart .fs-cart-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	grid-template-areas: "main summary";
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}
.woocommerce-cart .fs-cart-grid__main{ grid-area: main; min-width: 0; }

/* ==========================================================================
   Cart form card (wraps the native table)
   ========================================================================== */
.woocommerce-cart .woocommerce-cart-form{
	background: var(--fscart-surface);
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius-lg);
	box-shadow: var(--fscart-shadow);
	padding: clamp(14px, 2vw, 22px);
}
.woocommerce-cart .woocommerce-cart-form .shop_table,
.woocommerce-cart table.shop_table{
	border: none;
	border-collapse: collapse;
	width: 100%;
	margin: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Column header row (desktop) */
.woocommerce-cart table.cart thead{
	display: none; /* cart rows are self-labelling; keep the layout compact */
}

/* Cart item rows */
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name remove"
		"thumb price price"
		"thumb qty subtotal";
	gap: 6px 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--fscart-border);
}
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item:first-child{
	padding-top: 4px;
}
.woocommerce-cart table.cart tbody td{
	padding: 0;
	border: none;
	background: transparent;
	text-align: start;
	font-size: 14.5px;
}
.woocommerce-cart table.cart .product-thumbnail{ grid-area: thumb; }
.woocommerce-cart table.cart .product-name{ grid-area: name; }
.woocommerce-cart table.cart .product-remove{ grid-area: remove; }
.woocommerce-cart table.cart .product-price{ grid-area: price; }
.woocommerce-cart table.cart .product-quantity{ grid-area: qty; }
.woocommerce-cart table.cart .product-subtotal{ grid-area: subtotal; }

/* Product thumbnail */
.woocommerce-cart table.cart .product-thumbnail{
	width: 92px;
	min-width: 0;
}
.woocommerce-cart table.cart .product-thumbnail a,
.woocommerce-cart table.cart .product-thumbnail img{
	display: block;
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: var(--fscart-radius);
	border: 1px solid var(--fscart-border);
	background: var(--fscart-bg);
}

/* Product name */
.woocommerce-cart table.cart .product-name{
	min-width: 0;
}
.woocommerce-cart table.cart .product-name a{
	font-family: var(--fs-font-ar);
	font-weight: 700;
	color: var(--fscart-ink);
	font-size: 15.5px;
	line-height: 1.4;
	text-decoration: none;
}
.woocommerce-cart table.cart .product-name a:hover{ color: var(--fscart-primary); }
.woocommerce-cart table.cart .product-name .variation{
	margin-top: 4px;
	font-size: 13px;
	color: var(--fscart-muted);
}
.woocommerce-cart table.cart .product-name .variation dt,
.woocommerce-cart table.cart .product-name .variation p{
	display: inline;
	margin: 0;
}

/* Price column */
.woocommerce-cart table.cart .product-price{
	color: var(--fscart-muted);
	font-size: 13.5px;
	justify-self: start;
}
.woocommerce-cart table.cart .product-price .amount{
	color: var(--fscart-muted);
}

/* Subtotal column */
.woocommerce-cart table.cart .product-subtotal{
	font-weight: 800;
	color: var(--fscart-ink);
	font-size: 16px;
	white-space: nowrap;
	justify-self: end;
	text-align: end;
}
.woocommerce-cart table.cart .product-subtotal .amount{ color: var(--fscart-ink); }

/* Remove button */
.woocommerce-cart table.cart .product-remove{
	justify-self: end;
}
.woocommerce-cart table.cart .product-remove .remove{
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--fscart-light);
	color: var(--fscart-error) !important;
	font-size: 0;
	line-height: 0;
	border: 1px solid var(--fscart-border);
	text-decoration: none;
	transition: background .2s var(--fscart-ease), color .2s var(--fscart-ease), transform .15s var(--fscart-ease);
}
.woocommerce-cart table.cart .product-remove .remove::before{
	content: "×";
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}
.woocommerce-cart table.cart .product-remove .remove:hover{
	background: var(--fscart-error);
	color: #fff !important;
	transform: rotate(90deg);
}
.woocommerce-cart table.cart .product-remove .remove:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .34);
	outline-offset: 2px;
}

/* Quantity stepper: −/+ buttons flanking the native qty input. */
.woocommerce-cart table.cart .product-quantity .quantity,
.woocommerce-cart table.cart .product-quantity .fs-qty,
.woocommerce-cart table.cart .product-quantity .fs-cart-qty{
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--fscart-border);
	border-radius: 999px;
	background: var(--fscart-bg);
	overflow: hidden;
}
.woocommerce-cart table.cart .product-quantity .fs-cart-qty__btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 40px;
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--fscart-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s var(--fscart-ease), color .15s var(--fscart-ease);
	-webkit-user-select: none;
	user-select: none;
}
.woocommerce-cart table.cart .product-quantity .fs-cart-qty__btn:hover{
	background: var(--fscart-light);
	color: var(--fscart-primary);
}
.woocommerce-cart table.cart .product-quantity .fs-cart-qty__btn:disabled{
	opacity: .4;
	cursor: not-allowed;
}
.woocommerce-cart table.cart .product-quantity .fs-cart-qty__btn:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .34);
	outline-offset: -3px;
}
.woocommerce-cart table.cart .product-quantity input[type="number"],
.woocommerce-cart table.cart .product-quantity input.qty{
	width: 44px;
	min-width: 0;
	height: 40px;
	border: none;
	border-inline: 1px solid var(--fscart-border);
	background: var(--fscart-surface);
	text-align: center;
	font-family: var(--fs-font-ar);
	font-weight: 700;
	font-size: 15px;
	color: var(--fscart-ink);
	-moz-appearance: textfield;
}
.woocommerce-cart table.cart .product-quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce-cart table.cart .product-quantity input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

/* Hide the manual "Update cart" button; quantity changes auto-submit. The
   native WooCommerce cart still needs its nonce + coupon input, so the coupon
   apply button stays. */
.woocommerce-cart.fs-cart-js button[name="update_cart"]{
	display: none !important;
}

/* ==========================================================================
   Cart actions row (coupon + update cart)
   ========================================================================== */
.woocommerce-cart table.cart .actions{
	padding-top: 18px;
	border-bottom: none;
}
.woocommerce-cart table.cart .actions > td{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
	padding: 0;
}
.woocommerce-cart table.cart .coupon{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 280px;
}
.woocommerce-cart table.cart .coupon label{ display: none; }
.woocommerce-cart table.cart .coupon .input-text,
.woocommerce-cart table.cart #coupon_code{
	width: 100%;
	height: 48px;
	padding-inline: 16px;
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius);
	background: var(--fscart-surface);
	font-family: var(--fs-font-ar);
	font-size: 14px;
	color: var(--fscart-ink);
	transition: border-color .2s var(--fscart-ease), box-shadow .2s var(--fscart-ease);
}
.woocommerce-cart table.cart .coupon .input-text:focus,
.woocommerce-cart table.cart #coupon_code:focus{
	outline: none;
	border-color: var(--fscart-accent);
	box-shadow: 0 0 0 4px rgba(10, 174, 230, .14);
}
/* Apply-coupon sits on its own full-width row, under the code field. */
.woocommerce-cart table.cart .coupon .input-text,
.woocommerce-cart table.cart .coupon #coupon_code{
	flex: 1 1 100%;
}
.woocommerce-cart table.cart .coupon button[name="apply_coupon"]{
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	white-space: nowrap;
}

/* Buttons */
.woocommerce-cart .button,
.woocommerce-cart .checkout-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding-inline: 22px;
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius);
	background: var(--fscart-surface);
	color: var(--fscart-ink);
	font-family: var(--fs-font-ar);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--fscart-ease), color .2s var(--fscart-ease), border-color .2s var(--fscart-ease), transform .15s var(--fscart-ease);
}
.woocommerce-cart .button:hover,
.woocommerce-cart .checkout-button:hover{
	background: var(--fscart-light);
	border-color: var(--fscart-accent);
	color: var(--fscart-primary);
}
.woocommerce-cart .button:active,
.woocommerce-cart .checkout-button:active{ transform: translateY(1px); }
.woocommerce-cart .button:focus-visible,
.woocommerce-cart .checkout-button:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .34);
	outline-offset: 2px;
}

/* Update cart is the secondary action — give it restrained styling. */
.woocommerce-cart button[name="update_cart"]{
	background: transparent;
	color: var(--fscart-muted);
}
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled]{
	opacity: .55;
	cursor: not-allowed;
}
.woocommerce-cart button[name="apply_coupon"]{
	background: var(--fscart-ink);
	color: #fff;
	border-color: var(--fscart-ink);
}
.woocommerce-cart button[name="apply_coupon"]:hover{
	background: var(--fscart-primary);
	color: #fff;
	border-color: var(--fscart-primary);
}

/* ==========================================================================
   Order summary sidebar — sticky card (wraps native cart-collaterals/totals)
   ========================================================================== */
.woocommerce-cart .fs-cart-summary{
	grid-area: summary;
	align-self: start;
	position: sticky;
	top: 94px;
	min-width: 0;
	width: 100%;
	background: var(--fscart-surface);
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius-lg);
	box-shadow: var(--fscart-shadow-card);
	padding: clamp(18px, 2.5vw, 26px);
}
.woocommerce-cart .fs-cart-summary-title{
	font-family: var(--fs-font-ar);
	font-size: 18px;
	font-weight: 800;
	color: var(--fscart-ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fscart-border);
	line-height: 1.35;
}

/* Native cart-collaterals container becomes transparent inside the summary.
   Override Kadence's .kadence-woo-cart-form-wrap .cart-collaterals { float; width:30% }
   which would otherwise collapse the summary column inside our grid. */
.woocommerce-cart .fs-cart-summary .cart-collaterals,
.woocommerce-cart .fs-cart-grid .cart-collaterals,
.woocommerce-cart .kadence-woo-cart-form-wrap .cart-collaterals{
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
	float: none;
	clear: none;
}

/* Cart totals card (native .cart_totals). */
.woocommerce-cart .cart_totals{
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	width: 100% !important;
	max-width: none;
	float: none;
}
.woocommerce-cart .cart_totals h2{
	display: none; /* the summary aside already owns the visible heading */
}
.woocommerce-cart .cart_totals .shop_table{
	border: none;
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 18px;
	background: transparent;
	border-radius: 0;
}
.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td{
	padding: 12px 0;
	border-bottom: 1px solid var(--fscart-border);
	text-align: start;
	font-size: 14.5px;
	background: transparent;
}
.woocommerce-cart .cart_totals .shop_table th{
	color: var(--fscart-muted);
	font-weight: 600;
	width: 45%;
}
.woocommerce-cart .cart_totals .shop_table td{
	color: var(--fscart-ink);
	font-weight: 700;
	text-align: end;
}
.woocommerce-cart .cart_totals .shop_table td .amount{ color: var(--fscart-ink); }
.woocommerce-cart .cart_totals .order-total th{
	font-size: 16px;
	color: var(--fscart-ink);
	font-weight: 800;
}
.woocommerce-cart .cart_totals .order-total td{
	font-size: 22px;
	font-weight: 800;
	color: var(--fscart-primary);
}
.woocommerce-cart .cart_totals .order-total td .amount{ color: var(--fscart-primary); }

/* Shipping row keep readable. */
.woocommerce-cart .cart_totals .shipping th,
.woocommerce-cart .cart_totals .shipping td{
	vertical-align: top;
}
.woocommerce-cart .cart_totals ul#shipping_method{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.woocommerce-cart .cart_totals ul#shipping_method li{
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	margin: 0;
	font-weight: 600;
	color: var(--fscart-ink);
}
.woocommerce-cart .cart_totals .shipping-calculator-form{
	padding-top: 8px;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
.woocommerce-cart .cart_totals select{
	width: 100%;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius);
	background: var(--fscart-surface);
	font-family: var(--fs-font-ar);
	font-size: 14px;
	color: var(--fscart-ink);
}

/* ==========================================================================
   Proceed to checkout CTA
   ========================================================================== */
.woocommerce-cart .fs-cart-proceed{
	margin-top: 4px;
}
.woocommerce-cart .fs-cart-proceed__btn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding-inline: 24px;
	border: none;
	border-radius: var(--fscart-radius);
	background: linear-gradient(135deg, var(--fscart-primary), var(--fscart-accent));
	color: #fff;
	font-family: var(--fs-font-ar);
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	box-shadow: 0 14px 32px rgba(21, 48, 99, .26);
	transition: transform .2s var(--fscart-ease), box-shadow .2s var(--fscart-ease);
}
.woocommerce-cart .fs-cart-proceed__btn svg{ flex: 0 0 auto; }
.woocommerce-cart .fs-cart-proceed__btn:hover{
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(21, 48, 99, .32);
}
.woocommerce-cart .fs-cart-proceed__btn:active{ transform: translateY(0); }
.woocommerce-cart .fs-cart-proceed__btn:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .5);
	outline-offset: 3px;
}
/* Safety net: if a future WooCommerce version re-registers the native proceed
   button, keep only the branded CTA visible. The native button is unhooked at
   fs_child_setup_cart_layout(); this rule guards against that reappearing. */
.woocommerce-cart .cart_totals > a.checkout-button:not(.fs-cart-proceed__btn){
	display: none;
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
/* Polished pill badges on a single centered row, matching the summary card's
   surface so the strip reads as an intentional part of the cart, not loose
   plain text. */
.woocommerce-cart .fs-cart-trust{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: clamp(20px, 3vw, 28px) 0 0;
	padding: 0;
	max-width: var(--fs-container, 1240px);
	margin-inline: auto;
}
.woocommerce-cart .fs-cart-trust__item{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 1px solid var(--fscart-border);
	border-radius: 999px;
	background: var(--fscart-surface);
	color: var(--fscart-ink);
	font-family: var(--fs-font-ar);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(7, 26, 60, .05);
}
.woocommerce-cart .fs-cart-trust__item svg{
	color: var(--fscart-success);
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}
.woocommerce-cart .fs-cart-trust__item span{ min-width: 0; }
@media (max-width: 560px){
	.woocommerce-cart .fs-cart-trust{
		gap: 8px;
	}
	.woocommerce-cart .fs-cart-trust__item{
		flex: 1 1 auto;
		justify-content: center;
		padding: 9px 12px;
		font-size: 12.5px;
	}
}

/* ==========================================================================
   Cross-sells (full-width row beneath the grid)
   ========================================================================== */
.woocommerce-cart .cross-sells{
	max-width: var(--fs-container, 1240px);
	margin: clamp(36px, 5vw, 56px) auto 0;
	padding-inline: clamp(16px, 4vw, 32px);
}
.woocommerce-cart .cross-sells > h2{
	font-family: var(--fs-font-ar);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	color: var(--fscart-ink);
	margin: 0 0 18px;
	text-align: start;
}
.woocommerce-cart .cross-sells ul.products{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Empty cart state
   ========================================================================== */
/* The titlebar owns the localized empty-cart heading; the native
   "Your cart is currently empty." notice becomes a supporting line inside the
   centered empty-state card. */
.woocommerce-cart .cart-empty,
.woocommerce-cart p.cart-empty,
.woocommerce-cart .wc-empty-cart-message{
	background: var(--fscart-surface);
	border: 1px solid var(--fscart-border);
	border-radius: var(--fscart-radius-lg);
	box-shadow: var(--fscart-shadow);
	max-width: 560px;
	margin: clamp(20px, 3vw, 32px) auto;
	padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 40px);
	text-align: center;
	color: var(--fscart-muted);
	font-size: 16px;
	line-height: 1.6;
	/* Reset WooCommerce's notice styling so it reads as an empty-state card. */
	border-top: none;
	border-inline-start: none;
	list-style: none;
}
.woocommerce-cart .cart-empty::before,
.woocommerce-cart .wc-empty-cart-message::before{
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--fscart-light) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23153063' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.woocommerce-cart .return-to-shop{
	max-width: 560px;
	margin: -16px auto clamp(40px, 6vw, 72px);
	text-align: center;
}
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .return-to-shop .wc-backward{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding-inline: 32px;
	border: none;
	border-radius: var(--fscart-radius);
	background: linear-gradient(135deg, var(--fscart-primary), var(--fscart-accent));
	color: #fff;
	font-family: var(--fs-font-ar);
	font-weight: 800;
	font-size: 15px;
	box-shadow: 0 12px 28px rgba(21, 48, 99, .22);
	transition: transform .2s var(--fscart-ease);
}
.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .return-to-shop .wc-backward:hover{
	transform: translateY(-2px);
	color: #fff;
}

/* ==========================================================================
   Mobile sticky total + CTA bar
   ========================================================================== */
.fs-cart-sticky{
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--fscart-border);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 30px rgba(7, 26, 60, .08);
}
.fs-cart-sticky__row{
	display: flex;
	align-items: center;
	gap: 12px;
}
.fs-cart-sticky__total{
	flex: 1;
	min-width: 0;
}
.fs-cart-sticky__total .lbl{
	font-size: 11.5px;
	color: var(--fscart-muted);
	font-weight: 600;
	display: block;
	line-height: 1.2;
}
.fs-cart-sticky__total .val{
	font-size: 18px;
	font-weight: 800;
	color: var(--fscart-ink);
	line-height: 1.3;
	/* JS injects the amount's innerHTML (digits + symbol) here without the
	   .woocommerce-Price-amount wrapper, so force the symbol-before-number
	   ("⃁ ٤٤٩٫٠٠") RTL order to match the rest of the prices. */
	direction: rtl;
	unicode-bidi: isolate;
}
.fs-cart-sticky__btn{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: none;
	border-radius: var(--fscart-radius);
	background: var(--fscart-primary);
	color: #fff;
	font-family: var(--fs-font-ar);
	font-weight: 700;
	font-size: 1rem;
	min-height: 52px;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(21, 48, 99, .28);
	transition: transform .2s var(--fscart-ease);
	text-decoration: none;
}
.fs-cart-sticky__btn:active{ transform: translateY(1px); }
.fs-cart-sticky__btn:focus-visible{
	outline: 3px solid rgba(10, 174, 230, .4);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
	.woocommerce-cart .fs-cart-grid{
		grid-template-columns: 1fr;
		grid-template-areas:
			"main"
			"summary";
	}
	.woocommerce-cart .fs-cart-summary{
		position: static;
		top: auto;
	}
	/* Progressive enhancement: without JS the in-summary CTA stays visible. */
	.woocommerce-cart.fs-cart-js .fs-cart-sticky{
		display: block;
	}
	body.woocommerce-cart .site-content{
		padding-bottom: 96px;
	}
}

@media (max-width: 560px){
	.fs-cart-header__inner{
		grid-template-columns: 1fr auto;
		gap: 12px;
		min-height: 62px;
	}
	.fs-cart-header__brand img{ height: 40px; }
	.fs-cart-progress{ display: none; }
	.fs-cart-header__secure{ font-size: 12px; }
	.woocommerce-cart .woocommerce-cart-form{
		padding: 12px;
	}
	/* Collapsed cart row: thumbnail + name + remove on top, qty + subtotal below. */
	.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name remove"
			"thumb qty qty"
			"subtotal subtotal subtotal";
		gap: 8px 14px;
		padding: 16px 0;
	}
	.woocommerce-cart table.cart .product-thumbnail,
	.woocommerce-cart table.cart .product-thumbnail a,
	.woocommerce-cart table.cart .product-thumbnail img{
		width: 72px;
		height: 72px;
	}
	.woocommerce-cart table.cart .product-price{ display: none; }
	.woocommerce-cart table.cart .product-subtotal{
		justify-self: stretch;
		text-align: start;
		padding-top: 8px;
		border-top: 1px dashed var(--fscart-border);
		font-size: 15px;
	}
	.woocommerce-cart table.cart .actions > td{
		flex-direction: column;
		align-items: stretch;
	}
	/* Code field and Apply button each get their own full-width row — side by
	   side they squeeze both below a usable width on a phone. */
	.woocommerce-cart table.cart .coupon{
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.woocommerce-cart table.cart .coupon .input-text,
	.woocommerce-cart table.cart #coupon_code{
		max-width: none;
		width: 100%;
		flex: 0 0 auto;
	}
	.woocommerce-cart table.cart .coupon button[name="apply_coupon"]{
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		flex: 1 1 100% !important;
	}
	.woocommerce-cart .button,
	.woocommerce-cart button[name="update_cart"]{
		width: 100%;
	}
	.woocommerce-cart .cross-sells ul.products{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 380px){
	.woocommerce-cart .cross-sells ul.products{
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
	.woocommerce-cart .fs-cart-titlebar,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .fs-cart-summary{
		animation: fs-cart-fade-up .5s var(--fscart-ease) both;
	}
	.woocommerce-cart .fs-cart-summary{ animation-delay: .08s; }
}

@keyframes fs-cart-fade-up{
	from{ opacity: 0; transform: translateY(10px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RTL fix — responsive table labels (mobile)
   ==========================================================================
   Kadence's woocommerce.min.css pins the stacked-table label with
   `float: left` and the value with `text-align: right !important`. That is the
   LTR arrangement, and Kadence's rtl.min.css loads *before* it and never
   corrects it — so on Arabic every responsive cell renders backwards: label on
   the left, number on the right. Affects the cart item rows (المنتج / الكمية /
   المجموع) and the totals rows (المجموع / الشحن / الإجمالي).

   Scoped to [dir="rtl"] so the English (LTR) side keeps Kadence's behaviour,
   which is already correct there. */
@media (max-width: 768px) {
	[dir="rtl"] .woocommerce-cart table.shop_table_responsive tr td::before,
	[dir="rtl"] .woocommerce-cart .cart_totals table.shop_table_responsive tr td::before {
		float: right !important;
		text-align: right !important;
	}

	[dir="rtl"] .woocommerce-cart table.shop_table_responsive tr td,
	[dir="rtl"] .woocommerce-cart .cart_totals table.shop_table_responsive tr td {
		text-align: left !important;
	}

	/* The actions cell has no label and must stay full-width. */
	[dir="rtl"] .woocommerce-cart table.shop_table_responsive tr td.actions {
		text-align: start !important;
	}
}

/* ---------------------------------------------------------------------------
 * Free gift rows (Discount Rules plugin — "buy X get Y free")
 * ---------------------------------------------------------------------------
 * The plugin marks the auto-added line with `.ewd-auto-added-free-product` and
 * tints its cells with a flat rgba(0,0,0,.024) grey, which reads as a muddy
 * disabled row against the clean cart card. A gift is a reward, so it gets the
 * brand's light accent instead, plus a proper edge so it reads as one block.
 */
/* The tint goes on the ROW, not the cells. The responsive cart row is a grid
 * with named areas, so tinting each cell painted disconnected patches with
 * gaps between them instead of one block. Cells are forced transparent to
 * override the plugin's inline grey. */
.woocommerce-cart table.cart tbody tr.ewd-auto-added-free-product {
	background: var(--fscart-light);
	border-radius: var(--fs-radius-md, 14px);
	padding-block: 4px 16px;
	padding-inline: 12px;
}

.woocommerce-cart table.cart tbody tr.ewd-auto-added-free-product > td {
	background: transparent !important;
	border-block-color: transparent;
}

/* The gift quantity is locked by the plugin, so no stepper markup is injected
 * and our pill rendered as an empty capsule with a bare number floating in it.
 * Present it as a static count chip instead of a broken control. */
.woocommerce-cart table.cart tr.ewd-auto-added-free-product .product-quantity .quantity {
	inline-size: auto;
	min-inline-size: 0;
	block-size: 30px;
	padding-inline: 12px;
	border-color: transparent;
	background: var(--fscart-surface);
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--fscart-ink);
}

/* The zero price should read as "free", not as a missing value. */
.woocommerce-cart table.cart tr.ewd-auto-added-free-product .product-subtotal,
.woocommerce-cart table.cart tr.ewd-auto-added-free-product .product-price ins {
	color: var(--fscart-primary);
	font-weight: 800;
}

/* Mini-cart drawer: the plugin resets any quantity change on the gift server
 * side, so an interactive stepper there is a control that silently does
 * nothing. Show the count, hide the buttons. */
.widget_shopping_cart_content .ewd-auto-added-free-product .fs-cart-qty__btn,
.widget_shopping_cart_content .ewd-auto-added-free-product .quantity .fs-cart-qty__btn {
	display: none !important;
}