/* ============================================================
   Farha — only what Elementor has no control for.
   Layout, typography, colours and spacing of the stock widgets live in
   Elementor (Site Settings + each widget). This file holds what Elementor can't set:
   decoration drawn with pseudo-elements (1, 2, 4, 6, 7), the gift-card artwork (3), the look
   of what the Farha plugins render — the store directory and a store's branches (5) and the
   card builder (8) — and WooCommerce's cart, checkout and order pages (9). Sections are
   numbered below.
   ============================================================ */
:root {
	--bg: #faf7f3;
	--paper: #fffdfa;
	--paper-soft: #f6f0ed;
	--mauve: #b39ca1;
	--mauve-pale: #f2e9eb;
	--plum: #573749;
	--plum-deep: #432838;
	--ink: #2e262a;
	--muted: #786b71;
	--gold: #ba8d59;
	--gold-soft: #ddc3a2;
	--line: rgba(87, 55, 73, .12);
	--line-strong: rgba(87, 55, 73, .22);
	--success: #3f6b55;
	--shadow-sm: 0 12px 30px rgba(67, 40, 55, .065);
	--shadow-md: 0 24px 64px rgba(67, 40, 55, .105);
	--font-ui: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
	--logo-mark: url("farha-logo-mark.png");
}
html { scroll-behavior: smooth; }
body {
	background:
		radial-gradient(circle at 92% 3%, rgba(179, 156, 161, .12), transparent 26rem),
		radial-gradient(circle at 4% 38%, rgba(186, 141, 89, .06), transparent 24rem),
		var(--bg);
}
::selection { background: var(--mauve); color: #fff; }
:focus-visible { outline: 3px solid rgba(186, 141, 89, .6); outline-offset: 3px; }

/* ---------- 1. Header: frosted bar (Elementor has no backdrop-filter control) ---------- */
.farha-header { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.farha-en .elementor-heading-title { direction: ltr; unicode-bidi: isolate; }
.farha-language { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.farha-language:hover { color: var(--plum); }
/* [farha_cart]: the bag, with how many cards once there are any */
.farha-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--plum);
	text-decoration: none;
}
.farha-cart-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.farha-cart:hover { color: var(--plum-deep); }
.farha-cart-count {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--plum);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
/* Arrows point forward: leftwards for Arabic, rightwards on the English pages (TranslatePress
   gives only Arabic pages <html dir="rtl">). Buttons and store cards draw ←; the builder's arrow: section 8. */
html:not([dir="rtl"]) .farha-btn .elementor-button-icon,
html:not([dir="rtl"]) .store-cta::after,
html:not([dir="rtl"]) .farha-choice-cta .elementor-heading-title::after { transform: scaleX(-1); }

/* ---------- 2. Eyebrow: the gold dot before the label ---------- */
.farha-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.farha-eyebrow .elementor-heading-title::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 6px rgba(186, 141, 89, .12);
}
.farha-eyebrow.is-light .elementor-heading-title::before { background: var(--gold-soft); box-shadow: 0 0 0 6px rgba(221, 195, 162, .14); }
.farha-h1 .elementor-heading-title span { color: var(--gold); }

/* Buttons lift on hover, like the design */
.farha-btn .elementor-button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.farha-btn .elementor-button:hover { transform: translateY(-2px); }
.farha-btn .elementor-button-text { white-space: nowrap; }

/* ---------- 3. Gift-card designs (hero, builder, swatches) ---------- */
[data-card-design="classic"] { --card-bg: linear-gradient(145deg, #b59fa6, #c4b1b7); --card-ink: #faf3ee; }
[data-card-design="night"]   { --card-bg: linear-gradient(150deg, #3f2533, #634253); --card-ink: #e3c9a6; }
[data-card-design="ivory"]   { --card-bg: linear-gradient(150deg, #f8f2eb, #eadfd6); --card-ink: #573749; }
[data-card-design="gold"]    { --card-bg: linear-gradient(150deg, #cda676, #a97f4d); --card-ink: #fffaf2; }
.gift-card,
.card-swatch {
	position: relative;
	aspect-ratio: 1.59;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--card-bg);
	transition: background .3s ease;
}
.gift-card {
	width: 100%;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: 0 30px 64px rgba(70, 43, 56, .2);
}
.gift-card::before,
.gift-card::after {
	content: "";
	position: absolute;
	width: 42%;
	aspect-ratio: 1;
	border: 1px solid var(--card-ink);
	border-radius: 50%;
	opacity: .16;
}
.gift-card::before { inset-block-start: -22%; inset-inline-end: -14%; }
.gift-card::after { inset-block-end: -24%; inset-inline-start: -16%; }
.card-swatch { width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(87, 55, 73, .08); }
/* The logo is a transparent mark used as a mask, so each design colours it with its own ink. */
.card-logo {
	width: 52%;
	aspect-ratio: 635 / 510;
	background: var(--card-ink);
	-webkit-mask: var(--logo-mark) center / contain no-repeat;
	mask: var(--logo-mark) center / contain no-repeat;
	transition: background .3s ease;
}
.gift-card .card-logo { width: 48%; margin-bottom: 7%; }

/* ---------- 4. Hero ---------- */
/* the two cards: whole boxes that lift like the store cards, a forward arrow after the action */
.farha-choice { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.farha-choice:hover { transform: translateY(-3px); border-color: var(--line-strong) !important; box-shadow: var(--shadow-sm); }
.farha-choice-cta .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.farha-choice-cta .elementor-heading-title::after { content: "←"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mauve-pale); }
.farha-choice:hover .farha-choice-cta .elementor-heading-title::after { background: var(--plum); color: #fff; }

/* how it works: numbered steps (English digits on every page) */
.farha-steps { counter-reset: step; }
.farha-step { position: relative; padding: 24px 24px 22px !important; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-sm); counter-increment: step; }
/* the number sits on the step's heading: Elementor keeps a container's own ::before for overlays */
.farha-step .elementor-heading-title::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; }

.farha-hero-panel {
	background:
		radial-gradient(circle at 9% 20%, rgba(179, 156, 161, .3), transparent 31%),
		radial-gradient(circle at 85% 89%, rgba(186, 141, 89, .12), transparent 30%),
		linear-gradient(135deg, #eee4e3 0%, #fbf7f3 51%, #eadde0 100%);
}
.farha-hero-panel::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	inset-inline-end: -190px;
	inset-block-end: -190px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	pointer-events: none;
}
/* A flex column sizes the card stack's widget before the card's percentage width resolves, which
   collapsed it to its padding (82px on phones) and clipped the card. Block layout doesn't. */
.farha-visual { display: block !important; }
.hero-visual { position: relative; display: grid; place-items: center; padding: 150px 0 88px; isolation: isolate; }
.hero-visual::before {
	content: "";
	position: absolute;
	width: 80%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
	z-index: -1;
}
/* the card stack: all cards in one grid cell, the Farha card (last in the markup) in front and
   the store cards raised behind it, far enough that each store's name shows above it */
.hero-card { grid-area: 1 / 1; width: min(92%, 500px); }
.hero-card--front { transform: rotate(-4deg) translateY(10%); }
.hero-card--behind-1 { transform: rotate(-10deg) translate(24%, -46%) scale(.8); box-shadow: 0 18px 40px rgba(70, 43, 56, .16); }
.hero-card--behind-2 { transform: rotate(9deg) translate(-24%, -40%) scale(.8); box-shadow: 0 18px 40px rgba(70, 43, 56, .16); }
.hero-note {
	position: absolute;
	z-index: 3;
	inset-inline-start: 6%;
	inset-block-end: 16px;
	width: 230px;
	padding: 16px 18px;
	border: 1px solid rgba(87, 55, 73, .08);
	border-radius: 18px;
	background: rgba(255, 253, 250, .94);
	box-shadow: var(--shadow-sm);
	transform: rotate(3deg);
}
.hero-note strong { display: block; color: var(--plum); font-size: 16px; font-weight: 800; line-height: 1.5; }
.hero-note small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* ---------- 5. Stores: category chips, store cards, a store card's artwork, a store's branches ---------- */
.farha-stores { display: grid; gap: 24px; }
.store-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.store-cat {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--plum);
	font-size: 14px;
	font-weight: 700;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.store-cat:hover { background: var(--mauve-pale); border-color: var(--line-strong); color: var(--plum); }
.store-cat[aria-current="page"] { background: var(--plum); border-color: var(--plum); color: #fff; }
/* a store's tile in the directory and a branch's box on its store's page are the same box */
.store-grid, .group-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.store-card a, .group-store {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	color: inherit;
}
.store-card a { height: 100%; transition: transform .2s ease, box-shadow .2s ease; }   /* the link fills its grid cell */
.store-card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
.store-banner, .group-store-photo { display: block; aspect-ratio: 16 / 9; background: var(--mauve-pale); }
.store-banner img, .group-store-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; }
.store-category { color: var(--gold); font-size: 12px; font-weight: 800; }
.store-name { color: var(--plum); font-size: 18px; font-weight: 800; line-height: 1.5; }
.store-excerpt { color: var(--muted); font-size: 14px; line-height: 1.8; }
.store-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: var(--plum); font-size: 14px; font-weight: 800; }
.store-cta::after { content: "←"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mauve-pale); transition: background .2s ease, color .2s ease; }
.store-card a:hover .store-cta::after { background: var(--plum); color: #fff; }
/* choosing a category on /stores/ swaps the results in place (Farha Stores' directory.js) */
.store-results { transition: opacity .2s ease; }
.farha-stores.is-loading .store-results { opacity: .45; pointer-events: none; }
.farha-empty { padding: 28px; border: 1px dashed var(--line-strong); border-radius: 20px; color: var(--muted); text-align: center; }

/* a store card is printed with the store's own artwork, not a Farha design */
.gift-card.has-art { background: var(--mauve-pale); }
.gift-card.has-art::before, .gift-card.has-art::after { display: none; }
.gift-card.has-art .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* …and until it has one: Farha's design with the store's name, the mark small in the corner
   (Farha Gift Card's templates/group-card.php) */
.gift-card.is-named { container-type: inline-size; }
.gift-card.is-named .card-logo { position: absolute; inset-block-start: 8%; inset-inline-start: 6%; width: 17%; margin: 0; }
.gift-card.is-named .card-name { padding-inline: 10%; color: var(--card-ink); font-family: "Aref Ruqaa", serif; font-size: 11cqi; font-weight: 700; line-height: 1.3; text-align: center; }

/* a card's page (the Farha card, a store's): «تُستخدم في:» under its name */
.farha-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.farha-where-label { color: var(--gold); font-weight: 800; }
/* the kit's link colour (.elementor-kit-6 a) outranks a single class */
.farha-where .farha-where-item { color: var(--plum); font-weight: 700; }
.farha-where a.farha-where-item { text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 5px; }
.farha-where a.farha-where-item:hover { color: var(--plum-deep); text-decoration-color: var(--gold); }
/* the dot ends the item before it, so a wrapped line never starts with one */
.farha-where-item:not(:last-child)::after { content: "·"; margin-inline-start: 10px; color: var(--gold); display: inline-block; text-decoration: none; }
.group-stores { margin-top: 72px; }
.group-stores-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--plum); font-size: 12px; font-weight: 800; line-height: 1.6; }
.group-stores-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(186, 141, 89, .12); }
.group-stores-title { margin: 0 0 28px; color: var(--plum); font-size: 32px; font-weight: 800; line-height: 1.4; }
.group-store-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.group-store-name { color: var(--plum); font-size: 17px; font-weight: 800; line-height: 1.5; }
.group-store-address { display: flex; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.group-store-address > span > span + span::before { content: "، "; }
.group-store-map { align-self: flex-start; color: var(--plum); font-size: 13px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 5px; }
.group-stores-city { margin: 28px 0 14px; color: var(--plum); font-size: 18px; font-weight: 800; }
.group-stores-title + .group-stores-city { margin-top: 0; }
.group-stores.is-compact .group-store-body { padding: 16px 18px; }
/* links from the head (#store-1 …, #group-stores) stop below the sticky header */
.group-stores, .group-store { scroll-margin-top: 96px; }
/* a map pin before the address, in the gold of the eyebrows */
.group-store-address::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: .3em;
	background: var(--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%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='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 6. FAQ (Toggle widget): gold +/− drawn at the far edge ---------- */
.farha-faq .elementor-toggle-item {
	margin-bottom: 10px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--paper);
	box-shadow: 0 8px 22px rgba(67, 40, 55, .04);
}
.farha-faq .elementor-toggle-item:has(.elementor-active) { border-color: var(--line-strong); }
.farha-faq .elementor-tab-title { position: relative; border: 0 !important; padding: 20px 24px !important; padding-inline-end: 58px !important; }
.farha-faq .elementor-tab-title .elementor-toggle-icon { display: none !important; }
.farha-faq .elementor-tab-title::before,
.farha-faq .elementor-tab-title::after {
	content: "";
	position: absolute;
	inset-inline-end: 26px;
	top: 50%;
	width: 14px;
	height: 1.5px;
	border-radius: 999px;
	background: var(--gold);
}
.farha-faq .elementor-tab-title::after { transform: rotate(90deg); transition: transform .2s ease; }
.farha-faq .elementor-tab-title.elementor-active::after { transform: rotate(0); }
.farha-faq .elementor-tab-content { border: 0 !important; padding: 0 24px 20px !important; }
.farha-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

/* ---------- 7. Footer card: the soft ring ---------- */
.farha-footer-card::after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	inset-inline-start: -140px;
	inset-block-start: -180px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .08);
	pointer-events: none;
}
.farha-footer-card > .e-con-inner > *, .farha-footer-card > * { position: relative; z-index: 1; }

/* ---------- 8. Card builder (Farha Gift Card's [farha_card_builder]) ----------
   Scoped under #farha-app: Hello Elementor's reset styles every <button> pink with an
   attribute selector plus :hover (0,2,0), which would beat plain class rules. */
#farha-app { color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.85; }
#farha-app button,
#farha-app input { font: inherit; color: inherit; margin: 0; }
#farha-app button {
	background: none;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 0;
	white-space: normal;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}
#farha-app fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#farha-app legend { padding: 0; }
#farha-app [hidden] { display: none !important; }
#farha-app .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; display: block; }
#farha-app .icon-arrow { transform: rotate(180deg); }   /* the symbol points right: turned for Arabic */
html:not([dir="rtl"]) #farha-app .icon-arrow { transform: none; }
#farha-app .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the form sits in its page's purchase panel (gen.py product), which draws the box */
#farha-app .builder-form { display: grid; gap: 24px; }
#farha-app .field { display: grid; gap: 8px; }
#farha-app .field > span,
#farha-app .field > legend { color: var(--plum); font-size: 14px; font-weight: 700; line-height: 1.85; }
#farha-app .field > legend { margin-bottom: 10px; }
#farha-app .field small { color: var(--muted); font-weight: 400; font-size: 12px; }
#farha-app .field input {
	width: 100%;
	min-height: 54px;
	padding: 0 15px;
	border: 1px solid var(--line);
	border-radius: 14px;
	outline: 0;
	background: var(--paper-soft);
	color: var(--ink);
	font-size: 16px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#farha-app .field input:focus { background: var(--paper); border-color: rgba(87, 55, 73, .4); box-shadow: 0 0 0 4px rgba(87, 55, 73, .06); }

#farha-app .design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#farha-app .design-btn {
	display: grid;
	gap: 8px;
	padding: 8px 8px 6px;
	border-radius: 18px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#farha-app .design-btn .card-swatch { transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 8px 18px rgba(67, 40, 55, .1); }
#farha-app .design-btn:hover { color: var(--plum); }
#farha-app .design-btn:hover .card-swatch { transform: translateY(-3px); }
#farha-app .design-btn[aria-pressed="true"] { background: var(--mauve-pale); border-color: rgba(87, 55, 73, .18); color: var(--plum); font-weight: 800; }
#farha-app .amount-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#farha-app .choice-custom { font-size: 14px; }
/* Typed amount: the unit sits inside the field at its far edge */
#farha-app .custom-amount { margin-top: 14px; }
#farha-app .amount-input { position: relative; display: block; }
#farha-app .field .amount-input input { padding-inline-end: 56px; font-weight: 700; color: var(--plum); }
#farha-app .amount-unit {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 16px;
	display: flex;
	align-items: center;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	pointer-events: none;
}
#farha-app .field-error { min-height: 0; color: #a4343a !important; font-size: 12px; font-weight: 600 !important; }
#farha-app .field-error:empty { display: none; }
#farha-app .custom-amount.is-invalid input { border-color: rgba(164, 52, 58, .55); box-shadow: 0 0 0 4px rgba(164, 52, 58, .08); }
#farha-app .choice {
	min-height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-color: var(--line);
	border-radius: 16px;
	background: var(--paper-soft);
	color: var(--plum);
	font-weight: 700;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
#farha-app .choice:hover { border-color: var(--line-strong); background: var(--mauve-pale); }
#farha-app .choice[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; box-shadow: 0 10px 28px rgba(87, 55, 73, .18); }

#farha-app .woocommerce-error,
#farha-app .woocommerce-info,
#farha-app .woocommerce-message { margin: 0; }
#farha-app .woocommerce-message .button,
#farha-app .woocommerce-error .button,
#farha-app .woocommerce-info .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 12px;
	background: var(--plum);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

#farha-app .checkout-bar { display: grid; gap: 12px; justify-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
#farha-app .pay-btn {
	width: 100%;
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 22px;
	border-radius: 16px;
	background: var(--plum);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 14px 34px rgba(87, 55, 73, .18);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#farha-app .pay-btn:hover { background: var(--plum-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(87, 55, 73, .24); }
#farha-app .checkout-bar small { color: var(--muted); font-size: 12px; text-align: center; }

/* the preview is the card's stage, as tall as the purchase panel beside it (gen.py product) */
.farha-product-look > .elementor-widget-shortcode { flex-grow: 1; }
.farha-product-look .elementor-widget-container,
.farha-product-look .elementor-shortcode { height: 100%; }
.live-preview {
	height: 100%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: 40px;
	border-radius: 28px;
	background:
		radial-gradient(circle at 13% 14%, rgba(255, 255, 255, .09), transparent 28%),
		linear-gradient(150deg, #513242 0%, #6e4d5d 100%);
	color: #fff;
	box-shadow: var(--shadow-md);
}
.live-preview::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	inset-inline-end: -130px;
	inset-block-end: -140px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .09);
	pointer-events: none;
}
.live-preview .gift-card { width: min(100%, 460px); box-shadow: 0 26px 56px rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .18); }
/* a store's card over the store itself: its banner, dimmed so the card stands out */
.live-preview .live-preview-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }   /* over .elementor img's height: auto */
.live-preview.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgba(81, 50, 66, .5), rgba(52, 30, 42, .82)); }

/* ---------- 9. WooCommerce pages (checkout, cart, order received): the builder's look ---------- */
/* the header's width (body: over Hello's body:not([class*="elementor-page-"]) .site-main, 800px up to 1199px) */
body.woocommerce-page .site-main { width: min(calc(100% - 40px), 1220px); max-width: none; margin-inline: auto; padding: 48px 0 40px; }
.woocommerce-page .page-header .entry-title { max-width: none; color: var(--plum); font-size: clamp(30px, 4vw, 42px); font-weight: 800; margin: 0 0 24px; }
.woocommerce-page h3 { color: var(--plum); font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label { color: var(--plum); font-size: 14px; font-weight: 700; line-height: 1.85; margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--gold); text-decoration: none; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	min-height: 54px;
	padding: 0 15px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper-soft);
	color: var(--ink);
	font-size: 16px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container--open .select2-selection--single { background: var(--paper); border-color: rgba(87, 55, 73, .4); box-shadow: 0 0 0 4px rgba(87, 55, 73, .06); outline: 0; }
/* the governorate: a list, dressed like the other fields, with the design's chevron at the end */
.woocommerce form .form-row select {
	width: 100%;
	appearance: none;
	padding-inline-end: 44px;
	background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23573749' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
	background-size: 18px;
	background-position: left 16px center;
}
html:not([dir="rtl"]) .woocommerce form .form-row select { background-position: right 16px center; }
.woocommerce form .form-row .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce form .form-row .select2-container .select2-selection__rendered { padding: 0; color: var(--ink); line-height: 52px; }
.woocommerce form .form-row .select2-container .select2-selection__arrow { height: 52px; inset-inline-end: 12px; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: rgba(164, 52, 58, .55); }
.woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--line); }

/* Iraq is the only country the store sells to, so the row is noise (the value is still sent).
   !important: WooCommerce's checkout script sets display:block on the row itself. */
.woocommerce-checkout #billing_country_field { display: none !important; }
/* details beside the order on wide screens */
/* the order's heading and table are one card in two rows: the heading row stays as tall as the
   heading, and the details' extra height goes to the table's row (no gap opens between them) */
.woocommerce form.checkout { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto 1fr; grid-template-areas: "details heading" "details review"; gap: 0 24px; align-items: start; }
.woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce form.checkout #customer_details { grid-area: details; }
.woocommerce form.checkout #order_review_heading { grid-area: heading; position: relative; z-index: 1; margin: 0; padding: 32px 32px 0; background: var(--paper); border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; }   /* over the table card's shadow, so the two read as one card */
.woocommerce form.checkout #order_review { grid-area: review; }
.woocommerce form.checkout #customer_details,
.woocommerce form.checkout #order_review,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-order { padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); }
.woocommerce form.checkout #order_review { padding-top: 16px; border-top: 0; border-radius: 0 0 28px 28px; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; max-width: none; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 7px); }

.woocommerce table.shop_table { border: 0; border-radius: 0; margin: 0 0 20px; border-collapse: collapse; }
/* Hello Elementor's reset draws a box around every table cell; rows only here */
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 0; border-top: 1px solid var(--line); padding: 14px 0; background: none !important; color: var(--ink); }
.woocommerce table.shop_table thead tr:first-child th { border-top: 0; color: var(--muted); font-size: 13px; font-weight: 600; }   /* over Hello's line above a table's first row */
.woocommerce table.shop_table .product-name { color: var(--plum); font-weight: 700; }
.woocommerce table.shop_table .product-total, .woocommerce table.shop_table tfoot td { text-align: end; white-space: nowrap; }
.woocommerce table.shop_table tfoot .order-total th, .woocommerce table.shop_table tfoot .order-total td { color: var(--plum); font-size: 18px; font-weight: 800; }
.woocommerce td.product-name dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.woocommerce td.product-name dl.variation dt, .woocommerce td.product-name dl.variation dd { float: none; margin: 0; padding: 0; }
.woocommerce td.product-name dl.variation dd p { margin: 0; }

.woocommerce-checkout #payment { background: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods li { line-height: 1.85; }
.woocommerce-checkout #payment ul.payment_methods li label { color: var(--plum); font-weight: 700; }
.woocommerce-checkout #payment input[type="radio"] { accent-color: var(--plum); }
.woocommerce-checkout #payment div.payment_box { background: var(--paper-soft); color: var(--muted); border-radius: 14px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--paper-soft); }
.woocommerce-checkout #payment div.form-row { padding: 16px 0 0; }
.woocommerce-privacy-policy-text p { color: var(--muted); font-size: 12px; }
.woocommerce #payment #place_order,
.woocommerce a.button.wc-backward,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	border: 0;
	border-radius: 16px;
	background: var(--plum);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 14px 34px rgba(87, 55, 73, .18);
	transition: transform .2s ease, background .2s ease;
}
/* each line's card picture (Product::image), and the cart's quantity */
.woocommerce img.farha-card-picture,
.woocommerce-cart table.cart img.farha-card-picture { display: block; width: 96px; height: auto; border-radius: 10px; }
.woocommerce .quantity .qty {
	width: 72px;
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper-soft);
	color: var(--plum);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.woocommerce-cart .actions .button {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--mauve-pale);
	color: var(--plum);
	font-weight: 700;
}
.woocommerce-cart .woocommerce-shipping-destination { display: none; }   /* delivery is the same anywhere in Iraq */

/* the cart: its cards beside the totals from 1100px, the totals kept in view under the fixed header (78px) */
.woocommerce-cart .page-content > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart .woocommerce-notices-wrapper > :last-child,
.woocommerce-cart .wc-empty-cart-message > :last-child { margin-bottom: 0; }   /* the grid's gap spaces them */
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: auto; }
@media (min-width: 1100px) {
	.woocommerce-cart .page-content > .woocommerce { grid-template-columns: minmax(0, 1fr) 360px; }
	.woocommerce-cart .page-content > .woocommerce > * { grid-column: 1 / -1; }   /* notices, the empty cart */
	.woocommerce-cart .page-content > .woocommerce > .woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .page-content > .woocommerce > .cart-collaterals { grid-column: 2; position: sticky; top: 102px; }
}
/* a card's line: a table row while the list is wide enough; narrower (by the list's width, not
   the screen's), its picture beside its name, with quantity, total and remove beside or under it */
.woocommerce-cart .woocommerce-cart-form { container-type: inline-size; }
.woocommerce-cart table.cart { margin: 0; }
.woocommerce-cart table.cart th, .woocommerce-cart table.cart td { padding: 20px 8px; vertical-align: middle; }
.woocommerce-cart table.cart thead th { padding-top: 0; padding-bottom: 14px; }
.woocommerce-cart table.cart tr > :first-child { padding-inline-start: 0; }
.woocommerce-cart table.cart tr > :last-child { padding-inline-end: 0; }
.woocommerce-cart table.cart .product-remove { width: 32px; }
.woocommerce-cart table.cart .product-thumbnail { width: 112px; }
.woocommerce-cart table.cart .product-name { font-size: 16px; }
.woocommerce-cart table.cart .product-price, .woocommerce-cart table.cart .product-subtotal { white-space: nowrap; }
.woocommerce-cart table.cart .product-quantity { width: 88px; text-align: center; }
.woocommerce-cart table.cart .product-subtotal { text-align: end; color: var(--plum); font-weight: 700; }
.woocommerce-cart td.product-name dl.variation { grid-template-columns: max-content minmax(0, 1fr); margin-top: 6px; }
.woocommerce-cart td.product-name dl.variation dd { color: var(--ink); }
/* !important: WooCommerce colours a.remove red with !important */
.woocommerce-cart table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--paper-soft);
	color: var(--muted) !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	transition: background .2s ease, color .2s ease;
}
.woocommerce-cart table.cart a.remove:hover { background: #f6e3e4; color: #a4343a !important; }
/* «تحديث السلة» shows once a quantity has changed (WooCommerce enables it then) */
.woocommerce-cart table.cart tr:has(> td.actions > .button[name="update_cart"]:disabled) { display: none; }
.woocommerce-cart table.cart td.actions { padding-bottom: 0; text-align: end; }
@container (max-width: 739px) {
	.woocommerce-cart table.cart, .woocommerce-cart table.cart tbody, .woocommerce-cart table.cart tr { display: block; }
	.woocommerce-cart table.cart thead { display: none; }
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr) auto;
		grid-template-areas: "thumb name subtotal" "thumb quantity remove";
		gap: 12px 16px;
		align-items: center;
		padding: 20px 0;
		border-top: 1px solid var(--line);
	}
	.woocommerce-cart table.cart tr.cart_item:first-child { padding-top: 0; border-top: 0; }
	.woocommerce-cart table.cart tr.cart_item td { display: block; width: auto; padding: 0; border: 0; text-align: start !important; }   /* over WooCommerce's !important under 768px */
	.woocommerce-cart table.cart tr.cart_item td::before { display: none; }   /* WooCommerce's labels under 768px */
	.woocommerce-cart table.cart tr.cart_item td.product-price { display: none; }   /* the line's total says it */
	.woocommerce-cart table.cart td.product-thumbnail { display: block !important; grid-area: thumb; align-self: start; }   /* over WooCommerce's #content … .product-thumbnail { display: none } under 768px */
	.woocommerce-cart table.cart img.farha-card-picture { width: 88px; }
	.woocommerce-cart table.cart td.product-name { grid-area: name; }
	.woocommerce-cart table.cart td.product-subtotal { grid-area: subtotal; align-self: start; justify-self: end; }
	.woocommerce-cart table.cart td.product-quantity { grid-area: quantity; justify-self: start; }
	.woocommerce-cart table.cart td.product-remove { grid-area: remove; justify-self: end; }
	.woocommerce-cart table.cart td.actions { display: block; padding: 20px 0 0; }
}
@container (max-width: 479px) {
	.woocommerce-cart table.cart tr.cart_item { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name name" "quantity subtotal remove"; gap: 14px; }
	.woocommerce-cart table.cart img.farha-card-picture { width: 72px; }
	.woocommerce-cart table.cart td.product-subtotal { align-self: center; }
}
/* the totals: each label and amount on one line, phones too (WooCommerce stacks them under 768px) */
.woocommerce-cart .cart_totals h2 { color: var(--plum); font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.woocommerce-cart .cart_totals table.shop_table { margin: 0 0 24px; }
.woocommerce-cart .cart_totals table.shop_table_responsive tr { display: table-row; }
.woocommerce-cart .cart_totals table.shop_table_responsive th { display: table-cell; width: auto; color: var(--muted); font-weight: 600; }
.woocommerce-cart .cart_totals table.shop_table_responsive td { display: table-cell; text-align: end !important; }   /* over WooCommerce's !important */
.woocommerce-cart .cart_totals table.shop_table_responsive td::before { display: none; }
.woocommerce-cart .cart_totals table tr:first-child > * { border-top: 0; }
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td { color: var(--plum); font-size: 18px; font-weight: 800; }
.woocommerce-cart .cart_totals ul#shipping_method { margin: 0; padding: 0; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0; text-align: end; }
.woocommerce-cart .cart_totals ul#shipping_method label,
.woocommerce-cart .cart_totals ul#shipping_method .amount { font-weight: inherit; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce #payment #place_order:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--plum-deep); transform: translateY(-2px); }
.woocommerce a.button.wc-backward { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 52px; }

.woocommerce-error, .woocommerce-info, .woocommerce-message {
	border: 1px solid var(--line);
	border-inline-start: 4px solid var(--gold);
	border-top-width: 1px;
	border-radius: 16px;
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
}
.woocommerce-error { border-inline-start-color: #a4343a; }
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { color: var(--gold); }
.woocommerce-error::before { color: #a4343a; }
.woocommerce-checkout #payment .woocommerce-info { box-shadow: none; }

/* order received */
.woocommerce-order { display: grid; gap: 20px; }
.woocommerce-order .woocommerce-thankyou-order-received { color: var(--plum); font-size: 20px; font-weight: 800; }
.woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 0; }
.woocommerce ul.order_details li { float: none; margin: 0; padding: 0; border: 0; color: var(--muted); font-size: 13px; }
.woocommerce ul.order_details li strong { color: var(--plum); font-size: 15px; }

@media (max-width: 1024px) {
	.store-grid, .group-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.live-preview { min-height: 0; }
	.live-preview .gift-card { width: min(100%, 400px); }
	.hero-visual { padding: 120px 0 72px; }
	.woocommerce form.checkout { grid-template-columns: 1fr; grid-template-areas: "details" "heading" "review"; }
	.woocommerce form.checkout #order_review_heading { margin-top: 24px; }
	.hero-card { width: min(88%, 460px); }
	.hero-card--front { transform: rotate(-3deg) translateY(10%); }
	.hero-note { width: 190px; inset-inline-start: 4%; inset-block-end: 8px; }
}
@media (max-width: 767px) {
	.hero-note { width: 176px; padding: 10px 12px; }
	.hero-note strong { font-size: 14px; }
	.hero-note small { font-size: 11px; }
	.live-preview { padding: 20px; border-radius: 24px; }
	#farha-app .design-grid { gap: 6px; }
	#farha-app .design-btn { padding: 5px 5px 4px; font-size: 12px; border-radius: 14px; }
	#farha-app .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#farha-app .choice-custom { grid-column: 1 / -1; min-height: 52px; }
	.store-grid, .group-store-grid { grid-template-columns: 1fr; gap: 16px; }
	.group-stores { margin-top: 56px; }
	.group-stores-title { margin-bottom: 20px; font-size: 24px; }
	.store-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: -12px; padding-inline: 12px; scrollbar-width: none; }
	.store-cat { flex: 0 0 auto; }
	body.woocommerce-page .site-main { width: calc(100% - 24px); padding-top: 32px; }
	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout #order_review,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-order { padding: 20px; border-radius: 24px; }
	.woocommerce img.farha-card-picture { width: 72px; }
	.woocommerce form.checkout #order_review_heading { padding: 20px 20px 0; border-radius: 24px 24px 0 0; }
	.woocommerce form.checkout #order_review { padding-top: 12px; border-radius: 0 0 24px 24px; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; }
}
/* small phones: the header button drops its arrow (as in the design), up to 420px the header's
   pieces sit closer, and below 390px the wordmark gives way to the logo alone, so logo, cart,
   language and button fit down to 320px */
@media (max-width: 560px) {
	.farha-header .farha-btn .elementor-button-icon { display: none; }
}
@media (max-width: 420px) {
	.farha-header .e-con-full:has(> .farha-wordmark) { column-gap: 8px; }
	.farha-header .e-con-full:has(> .elementor-widget-shortcode .farha-cart) { column-gap: 6px; }
	.farha-cart { width: 28px; }
}
@media (max-width: 389px) {
	.farha-header .farha-wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}