@charset "UTF-8";

/* Simplified cart page: WooCommerce's own classic [woocommerce_cart] shortcode
   restyled as compact item cards, behind a location banner and a sticky
   total/CTA bar. */

.yef-cart-page { padding: 0 16px 16px; max-width: 640px; margin: 0 auto; }

/* The site header is itself sticky at top:0, so this title bar must not be —
   two sticky bars at the same offset overlap instead of stacking. */
.yef-cart-page .yef-topbar {
	display: flex; align-items: center; gap: 10px;
	margin: 0 -16px 16px; padding: 10px 16px 14px; position: static;
	border-bottom: 1px solid var(--yef-line, #EAEAEA); background: #fff;
}
.yef-cart-page .yef-topbar__title {
	flex: 1; margin: 0; font-size: 1.125rem; font-weight: 800; text-align: center;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.yef-cart-count {
	font-size: .75rem; font-weight: 700; line-height: 1;
	padding: 5px 9px; border-radius: 999px;
	background: var(--yef-sand, #FAFAF9); color: var(--yef-muted, #6E6E6E);
}
.yef-cart-count:empty { display: none; }
.yef-cart-page .yef-topbar__back,
.yef-cart-page .yef-topbar__spacer {
	width: 44px; height: 44px; flex: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--yef-ink, #111); border-radius: 50%;
}
.yef-cart-page .yef-topbar__back { visibility: hidden; } /* kept for spacing symmetry only */

/* ---- location banner ----
   Neutral, not tinted: the turquoise now belongs to the one primary action at
   the bottom of the screen, and a second turquoise surface up here would
   compete with it instead of pointing at it. */
.yef-cart-location {
	display: flex; align-items: center; gap: 12px;
	background: var(--yef-sand, #FAFAF9);
	border: 1px solid var(--yef-line, #EAEAEA);
	border-radius: var(--yef-radius, 16px); padding: 12px 14px; margin: 0 0 16px;
	min-height: 72px; box-sizing: border-box;
}
.yef-cart-location__pin { flex: none; color: var(--yef-accent, #66c7cc); display: flex; }
.yef-cart-location__text {
	flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yef-cart-location.is-set .yef-cart-location__text { font-weight: 700; }
.yef-cart-location__change {
	flex: none; font-size: .8125rem; font-weight: 700; color: var(--yef-ink, #111);
	text-decoration: none; background: #fff; border: 1px solid var(--yef-line, #EAEAEA);
	border-radius: 999px; font-family: inherit; cursor: pointer;
	padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center;
}
.yef-cart-location__add { flex: none; }

/* ---- WooCommerce notices ---- */
body.yef-cart-body .woocommerce-notices-wrapper:empty { display: none; }
body.yef-cart-body .wc-block-components-notice-banner,
body.yef-cart-body .woocommerce-message,
body.yef-cart-body .woocommerce-info,
body.yef-cart-body .woocommerce-error {
	display: flex; align-items: center; gap: 10px;
	max-width: 640px; margin: 0 auto 12px; padding: 12px 14px;
	border: 0; border-radius: var(--yef-radius, 16px);
	background: var(--yef-sand, #FAFAF9); color: var(--yef-ink, #111);
	font-size: .8125rem; font-weight: 600; line-height: 1.5; list-style: none;
}
body.yef-cart-body .wc-block-components-notice-banner.is-success { background: color-mix(in srgb, var(--yef-success, #12805c) 8%, #fff); }
body.yef-cart-body .wc-block-components-notice-banner.is-error,
body.yef-cart-body .woocommerce-error { background: #fdf3f2; color: var(--yef-danger, #d92d20); }
body.yef-cart-body .wc-block-components-notice-banner > svg {
	width: 20px; height: 20px; flex: none; background: none; border-radius: 0; padding: 0;
	fill: var(--yef-muted, #6E6E6E);
}
body.yef-cart-body .wc-block-components-notice-banner.is-success > svg { fill: var(--yef-success, #12805c); }
body.yef-cart-body .woocommerce-message::before,
body.yef-cart-body .woocommerce-info::before,
body.yef-cart-body .woocommerce-error::before { display: none; }
body.yef-cart-body .wc-block-components-notice-banner .wc-forward,
body.yef-cart-body .woocommerce-message .button { display: none; } /* the sticky CTA is the way forward */

/* ---- classic cart shortcode, restyled ----
   WooCommerce's woocommerce-smallscreen.css turns this table into stacked
   rows with `data-title` pseudo-labels and zebra striping. That is the layout
   being replaced by item cards, so the selectors below are weighted to beat
   it (`table.shop_table tr td…`), and its one !important is answered in kind.
   Nothing about the markup or the form itself changes. */
.yef-cart-shortcode-wrap { transition: opacity .15s ease; }
.yef-cart-shortcode-wrap.is-loading { opacity: .55; pointer-events: none; }

.yef-cart-shortcode-wrap table.shop_table { border: 0; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0 12px; }
.yef-cart-shortcode-wrap table.shop_table thead { display: none; }

/* One card per line, laid out as a fixed 3-column grid so the pieces never
   reflow into a different reading order at a different width:

     [ image ] [ product name .......... ] [ remove ]
     [ image ] [ unit price ........................ ]
     [ image ] [ quantity ] [ ......... line total ]  */
.yef-cart-shortcode-wrap table.shop_table tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	column-gap: 12px; row-gap: 6px; align-items: center;
	border: 1px solid var(--yef-line, #EAEAEA); border-radius: var(--yef-radius, 16px); padding: 12px;
}
/* The stacked-row treatment, undone: no pseudo-labels, no zebra stripe, no
   forced left alignment. */
.yef-cart-shortcode-wrap table.shop_table tr td::before { content: none; display: none; }
.yef-cart-shortcode-wrap table.shop_table tr td,
.yef-cart-shortcode-wrap table.shop_table tr:nth-child(2n) td {
	border: 0; padding: 0; background: transparent; text-align: start !important;
}

/* The product image is the fastest way to recognise a line — WooCommerce's
   small-screen sheet hides it, this brings it back. */
.yef-cart-shortcode-wrap table.shop_table tr td.product-thumbnail {
	display: block; grid-area: 1 / 1 / 4 / 2; align-self: start;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-thumbnail img {
	width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block;
	background: var(--yef-sand, #FAFAF9);
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-name {
	grid-area: 1 / 2 / 2 / 3; font-size: .9375rem; font-weight: 700; line-height: 1.45; min-width: 0;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-name a { color: inherit; text-decoration: none; }
.yef-cart-shortcode-wrap table.shop_table tr td.product-name .variation {
	font-size: .75rem; font-weight: 400; color: var(--yef-muted, #6E6E6E); margin-top: 4px;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-name .variation p { margin: 0; }

.yef-cart-shortcode-wrap table.shop_table tr td.product-remove { grid-area: 1 / 3 / 2 / 4; align-self: start; }
.yef-cart-shortcode-wrap table.shop_table tr td.product-remove a {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	margin-inline-end: -8px; margin-block-start: -6px;
	/* WooCommerce paints a.remove red with !important, which turns a secondary
	   action into the loudest thing on the card. */
	color: var(--yef-muted, #6E6E6E) !important; font-size: 0; text-decoration: none; border-radius: 12px;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-remove a:hover,
.yef-cart-shortcode-wrap table.shop_table tr td.product-remove a:focus-visible {
	background: #fdf3f2; color: var(--yef-danger, #d92d20) !important;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-remove a::before {
	content: ""; display: block; width: 18px; height: 18px;
	background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m-8 0 1 13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1l1-13' fill='none' stroke='black' stroke-width='1.6'/%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'%3E%3Cpath d='M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m-8 0 1 13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1l1-13' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Unit price and line total are the same number whenever the quantity is 1,
   which reads as a duplicate unless the unit one says what it is. */
.yef-cart-shortcode-wrap table.shop_table tr td.product-price {
	grid-area: 2 / 2 / 3 / 4; font-size: .8125rem; color: var(--yef-muted, #6E6E6E); white-space: nowrap;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-price::after { content: " للقطعة"; }
.yef-cart-shortcode-wrap table.shop_table tr td.product-price del { font-weight: 400; margin-inline-end: 4px; }
.yef-cart-shortcode-wrap table.shop_table tr td.product-subtotal {
	grid-area: 3 / 3 / 4 / 4; font-size: 1rem; font-weight: 800; white-space: nowrap;
}
.yef-cart-shortcode-wrap table.shop_table tr td.product-quantity { grid-area: 3 / 2 / 4 / 3; justify-self: start; }

.yef-cart-shortcode-wrap .quantity { display: flex; align-items: center; border: 1px solid var(--yef-line, #EAEAEA); border-radius: 12px; overflow: hidden; }
.yef-cart-shortcode-wrap .quantity input.qty {
	width: 40px; text-align: center; border: 0; padding: 0; height: 40px; box-sizing: border-box;
	font: inherit; font-size: 1rem; font-weight: 700; -moz-appearance: textfield; background: #fff;
}
.yef-cart-shortcode-wrap .quantity input.qty::-webkit-inner-spin-button,
.yef-cart-shortcode-wrap .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.yef-qty-btn {
	width: 40px; height: 40px; border: 0; background: var(--yef-sand, #FAFAF9);
	font-size: 1.25rem; font-weight: 700; cursor: pointer; color: var(--yef-ink, #111); line-height: 1;
}
.yef-qty-btn:active { background: var(--yef-line, #EAEAEA); }
.yef-qty-btn:disabled { opacity: .4; cursor: default; }

.yef-cart-shortcode-wrap table.shop_table tr td.actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 4px 0 0; background: transparent; border: 0;
}
.yef-cart-shortcode-wrap .coupon { display: flex; gap: 8px; flex: 1; min-width: 0; }
.yef-cart-shortcode-wrap .coupon input#coupon_code {
	flex: 1; min-width: 0; box-sizing: border-box; height: 48px;
	border: 1px solid var(--yef-line, #EAEAEA); border-radius: 14px;
	padding: 0 14px; font: inherit; font-size: 1rem; /* 16px: anything smaller makes iOS zoom on focus */
}
.yef-cart-shortcode-wrap .coupon input#coupon_code:focus {
	outline: none; border-color: var(--yef-accent, #66c7cc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yef-accent, #66c7cc) 22%, transparent);
}
.yef-cart-shortcode-wrap table.shop_table tr td.actions .coupon button {
	flex: none; width: auto; border: 0; background: var(--yef-sand, #FAFAF9); color: var(--yef-ink, #111);
	border-radius: 14px; padding: 0 18px; height: 48px; white-space: nowrap;
	font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
}
/* qty +/- already resubmits the form, so the manual "update cart" is dead weight */
.yef-cart-shortcode-wrap table.shop_table tr td.actions button[name="update_cart"] { display: none; }

/* The discount field is a minority need — it opens on request instead of
   taking a permanent block of the screen above the total. */
.yef-coupon-toggle {
	background: none; border: 0; padding: 12px 0; min-height: 44px;
	font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
	color: var(--yef-ink, #111); text-decoration: underline; text-underline-offset: 3px;
}
.yef-cart-shortcode-wrap .coupon[hidden] { display: none; }

/* ---- totals breakdown ----
   Answers "why is the total more than the item?" without dragging in
   WooCommerce's own totals block (an English courier blurb and a full
   country selector). Every figure comes from WC()->cart itself. */
.yef-cart-summary {
	border: 1px solid var(--yef-line, #EAEAEA); border-radius: var(--yef-radius, 16px);
	padding: 14px 16px; margin: 16px 0 0; display: grid; gap: 10px;
}
.yef-cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .875rem; }
.yef-cart-summary__row dt { color: var(--yef-muted, #6E6E6E); margin: 0; }
.yef-cart-summary__row dd { margin: 0; font-weight: 700; }
.yef-cart-summary__row--muted dd { font-weight: 600; color: var(--yef-muted, #6E6E6E); font-size: .8125rem; }
.yef-cart-summary__row--save dd { color: var(--yef-success, #12805c); }
.yef-cart-summary__row del { color: var(--yef-muted, #6E6E6E); font-weight: 400; }

.yef-cart-shortcode-wrap .cart_totals,
.yef-cart-shortcode-wrap .wc-proceed-to-checkout,
.yef-cart-shortcode-wrap .cross-sells { display: none; } /* totals+CTA live in the sticky bar instead */

.yef-cart-shortcode-wrap .cart-empty { text-align: center; color: var(--yef-muted, #6E6E6E); padding: 56px 20px 20px; font-size: .9375rem; }
.yef-cart-shortcode-wrap .return-to-shop { text-align: center; display: block; margin-top: 12px; }
.yef-cart-shortcode-wrap .return-to-shop .button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; box-sizing: border-box;
	background: var(--yef-cta-bg, #66c7cc); color: var(--yef-cta-fg, #111); border-radius: var(--yef-radius, 16px);
	padding: 0 24px; text-decoration: none; font-weight: 700;
}

/* ---- sticky total + CTA ----
   Stacked rather than side by side: at 320px a price and a 56px button in one
   row squeeze each other, and the CTA has to stay full width. */
.yef-cart-sticky { flex-direction: column; align-items: stretch; gap: 10px; }
.yef-cart-sticky .yef-total { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.yef-cart-sticky .yef-total__label { font-size: .8125rem; }
.yef-cart-sticky .yef-total__value { font-size: 1.25rem; }

/* The footer is back on this page, so its last line has to clear the fixed
   total/CTA bar instead of sitting behind it. */
body.yef-has-sticky.yef-cart-body { padding-bottom: 150px; }

/* ---- saved-address picker (logged-in returning customers) ----
   Same bottom-sheet visual language as the location sheet, restated here
   since login-sheet.css never loads for logged-in shoppers. */
.yef-address-sheet { position: fixed; inset: 0; z-index: 300; }
.yef-address-sheet[hidden] { display: none; }
.yef-address-sheet__scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .38); }
.yef-address-sheet__panel {
	position: absolute; inset-inline: 0; bottom: 0; background: #fff;
	border-radius: 28px 28px 0 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
	max-width: 520px; margin-inline: auto; max-height: 80vh; overflow-y: auto;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, .16);
}
.yef-address-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.yef-address-sheet__head h2 { margin: 0; font-size: 1.125rem; font-weight: 800; }
.yef-address-sheet__close {
	background: none; border: 0; width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--yef-ink, #111); cursor: pointer; border-radius: 50%;
}

.yef-address-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.yef-address-item {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--yef-line, #EAEAEA); border-radius: var(--yef-radius, 16px); padding: 12px 14px;
}
.yef-address-item__pin { flex: none; color: var(--yef-accent, #66c7cc); display: flex; }
.yef-address-item__text { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.5; }
.yef-address-item__pick {
	flex: none; border: 0; background: var(--yef-cta-bg, #66c7cc); color: var(--yef-cta-fg, #111);
	border-radius: 12px; padding: 0 16px; min-height: 44px; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.yef-address-item.is-loading .yef-address-item__pick { opacity: .5; pointer-events: none; }

@media (min-width: 782px) {
	.yef-cart-sticky { flex-direction: row; align-items: center; }
	.yef-cart-sticky .yef-total { flex-direction: column; }
	.yef-cart-sticky .yef-btn--block { width: auto; min-width: 260px; }
	body.yef-has-sticky.yef-cart-body { padding-bottom: 0; }
}