/*
Theme Name:  Yas Farms
Theme URI:   https://wp.yasfarms.com
Description: Child theme of Hello Elementor carrying the Yas Farms design: header
             and footer chrome, the collection and product templates, and the
             English/Arabic typography pairing. Page layouts live in Elementor;
             this holds only what Elementor cannot express.
Author:      Yas Farms
Template:    hello-elementor
Version:     1.0.0
Text Domain: hello-elementor-yas
*/

/* -------------------------------------------------------------------------
 * Typography
 *
 * Two pairings, swapped by the language class TranslatePress drives. Change a
 * typeface here and in the Google Fonts list in functions.php; the English
 * pairing can also be overridden from Elementor → Site Settings → Global Fonts.
 * ---------------------------------------------------------------------- */

:root {
	/* Type scale, measured off the Shopify reference so the two read the same.
	   Display and headings are the serif at 1.1–1.25; everything else is the
	   sans at 14px body / 12px UI, line-height 1.5. The reference sets no
	   letter-spacing and no weight above 400 anywhere — tracking on the small
	   uppercase labels is what made our bar look different from theirs. */
	--yas-fs-display: 48px;   /* hero + statement headings, lh 1.1  */
	--yas-fs-h2:      26px;   /* section headings,           lh 1.25 */
	--yas-fs-h3:      22px;   /* sub-headings, footer heads, lh 1.25 */
	--yas-fs-lead:    16px;   /* icon strip, product price,  lh 1.25 */
	--yas-fs-body:    14px;   /* body copy, card titles,     lh 1.5  */
	--yas-fs-ui:      12px;   /* nav, buttons, filter bar,   lh 1.5  */

	--yas-serif:    'Instrument Serif', Georgia, serif;          /* English display */
	--yas-sans:     'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--yas-serif-ar: 'Amiri', 'Instrument Serif', Georgia, serif; /* Arabic display  */
	--yas-sans-ar:  'IBM Plex Sans Arabic', 'Instrument Sans', sans-serif;
}

/* ===================================================== Language layer === */

/* --- Arabic typography --------------------------------------------------- */

/* English is the default pairing: Instrument Serif display face + Instrument Sans
   text face, matching the Shopify reference. */
body.yas-lang-en {
	font-family: var(--yas-sans);
}

body.yas-lang-en h1,
body.yas-lang-en h2,
body.yas-lang-en h3,
body.yas-lang-en h4,
body.yas-lang-en .elementor-heading-title {
	font-family: var(--yas-serif);
}

/* Arabic swaps both faces: Amiri for display, IBM Plex Sans Arabic for text.
   Latin fallbacks stay in the stack so mixed runs (brand names, prices) still
   render in the English faces rather than dropping to a system default. */
body.yas-lang-ar {
	font-family: var(--yas-sans-ar);
}

body.yas-lang-ar h1,
body.yas-lang-ar h2,
body.yas-lang-ar h3,
body.yas-lang-ar h4,
body.yas-lang-ar .elementor-heading-title {
	font-family: var(--yas-serif-ar);
	letter-spacing: 0;
}

/* Elementor emits a per-element rule for every widget that sets typography
   (`.elementor-<page> .elementor-element.elementor-element-<id> …`), which
   out-specifies anything reasonable here. Since the Arabic pairing must win on
   every such widget, this is one of the few places `!important` is the right
   tool — the alternative is duplicating Elementor's generated selectors. */
body.yas-lang-ar .elementor-element .elementor-heading-title,
body.yas-lang-ar h1,
body.yas-lang-ar h2,
body.yas-lang-ar h3,
body.yas-lang-ar h4 {
	font-family: var(--yas-serif-ar) !important;
}

body.yas-lang-ar .elementor-element .elementor-widget-container p,
body.yas-lang-ar .elementor-element .elementor-button,
body.yas-lang-ar .elementor-widget-text-editor {
	font-family: var(--yas-sans-ar) !important;
}

/* English keeps its own pairing explicitly, so neither language inherits the
   other's faces when Elementor's kit changes. */
body.yas-lang-en .elementor-element .elementor-heading-title,
body.yas-lang-en h1,
body.yas-lang-en h2,
body.yas-lang-en h3,
body.yas-lang-en h4 {
	font-family: var(--yas-serif);
}

/* Arabic script sits lower and needs more leading than the Latin defaults. */
body.yas-lang-ar h1,
body.yas-lang-ar h2,
body.yas-lang-ar h3 {
	line-height: 1.45;
}

body.yas-lang-ar p,
body.yas-lang-ar li {
	line-height: 1.9;
}

/* Letter-spacing is meaningless in a connected script — it breaks the joins. */
body.yas-lang-ar [style*="letter-spacing"],
body.yas-lang-ar .elementor-button-text,
body.yas-lang-ar .yas-pill {
	letter-spacing: 0 !important;
}

/* --- RTL layout corrections --------------------------------------------- */

.yas-rtl {
	direction: rtl;
}

.yas-rtl .elementor-container,
.yas-rtl .e-con-inner {
	direction: rtl;
}

/* Keep media and decorative rows in their designed visual order. */
.yas-rtl .yas-keep-ltr {
	direction: ltr;
}

.yas-rtl input[type="text"],
.yas-rtl input[type="email"],
.yas-rtl input[type="tel"],
.yas-rtl textarea {
	text-align: right;
	direction: rtl;
}

/* Footer columns: keep every widget aligned with its own column in Arabic.
   Elementor stores these widgets as text-align:start — already direction-aware,
   so it needs no flipping — but the RTL page ships an inline override that
   rewrites it to `end`. That is a double flip: `start` resolves to the right
   edge in RTL on its own, while `end` resolves to the left, so the headings
   and paragraphs detached from the links beneath them and drifted to the far
   side of their columns. Restating `start` puts them back; it stays correct in
   both directions, unlike a physical left/right value would. */
body.yas-rtl .yas-footer .elementor-widget-heading,
body.yas-rtl .yas-footer .elementor-widget-text-editor {
	text-align: start;
}

/* Numerals, prices and Latin brand names stay LTR inside Arabic text. */
.yas-rtl .woocommerce-Price-amount,
.yas-rtl .yas-ltr-run {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* ======================================================== Site design === */

:root {
	--yas-ink: #3E2018;
	--yas-bg: #E9E4E1;
	--yas-sand: #F4E4D4;
	--yas-clay: #DFCDC3;
	--yas-dark: #26150D;
	--yas-gold: #B39A8E;
	--yas-hdr-h: 88px;

	/* The frosted ground shared by the header bar and the mega panel — they sit
	   edge to edge and must read as one surface, so both draw from these. Raise
	   the alpha for a heavier bar, lower it for a clearer one; the blur is what
	   keeps the nav legible over video, so keep it if the alpha drops further.
	   The -solid value is the fallback where backdrop-filter is unsupported and
	   opacity alone has to carry legibility. */
	--yas-glass: rgba(233, 228, 225, 0.42);
	--yas-glass-solid: rgba(233, 228, 225, 0.94);
	--yas-glass-blur: saturate(180%) blur(18px);
}

body {
	background: var(--yas-bg);
	color: var(--yas-ink);
}

/* -------------------------------------------------------------- Header --- */

/* UAE puts `ehf-header` on <body>, not on a wrapper — the actual element is
   header#masthead. Fixing the body would take the whole page out of flow. */
/* UAE ships `.ehf-header #masthead { position: relative }`; this needs to
   out-specify it, hence the body class in the selector. */
.ehf-header header#masthead {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 90;
}

/* The fixed header no longer occupies flow, so interior pages need the offset. */
body:not(.home) #content,
body:not(.home) .site-content {
	padding-top: var(--yas-hdr-h);
}

.yas-header {
	position: relative;
	flex-wrap: nowrap;
	padding-inline: 20px !important;
	min-height: var(--yas-hdr-h);
	background: transparent;
	color: #fff;
	border-bottom: 1px solid transparent;
	transition: color 0.35s ease, border-color 0.35s ease;
}

/* The glass lives on a pseudo-element. `backdrop-filter` on the bar itself
   would make it the containing block for the fixed mega panel, which then
   positioned against the header instead of the viewport. */
/* The bar's frosted ground. It sits on a pseudo-element rather than on
   .yas-header itself because backdrop-filter would otherwise make the bar a
   containing block, which pulled the fixed mega panel inside it.

   The glass is always declared and switched with visibility alone.

   Chrome does not repaint this region when a backdrop-filter is added or
   removed from a pseudo-element at a negative z-index — the computed style
   went back to transparent while the frost stayed on screen — and it keeps
   rendering the filter even at opacity 0, so neither of those is a usable
   switch. It also will not run a transition on this pseudo at all, so the
   change is instant by necessity rather than choice. */
.yas-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	visibility: hidden;
	background: var(--yas-glass);
	-webkit-backdrop-filter: var(--yas-glass-blur);
	backdrop-filter: var(--yas-glass-blur);
	box-shadow: 0 1px 0 rgba(62, 32, 24, 0.10), 0 8px 28px rgba(62, 32, 24, 0.06);
}

@supports not (backdrop-filter: blur(1px)) {
	.yas-header::before {
		background: var(--yas-glass-solid);
	}
}

/* Solid once the page scrolls past the hero, and on every non-hero page. */
body.yas-scrolled .yas-header,
body:not(.home) .yas-header {
	color: var(--yas-ink);
	border-bottom-color: rgba(62, 32, 24, 0.14);
}

.yas-header a,
.yas-header .hfe-nav-menu a,
.yas-header .yas-lang-link,
.yas-header .hfe-cart-menu-wrap-custom a {
	color: inherit !important;
}

/* The logo ships dark; invert it while the bar is transparent over the video. */
/* Size by height only; `width:auto` keeps the calligraphy's own proportions.
   Elementor would otherwise impose a box width and squash the artwork. */
.yas-logo img,
.yas-logo .elementor-widget-container img {
	height: 46px !important;
	width: auto !important;
	max-width: none;
	filter: brightness(0) invert(1);
	transition: filter 0.35s ease;
}

body.yas-scrolled .yas-logo img,
body:not(.home) .yas-logo img {
	filter: none;
}

.yas-hdr-centre {
	position: absolute;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: auto;
	pointer-events: none;
	/* The icon column is a later sibling and overlapped the logo's right half,
	   so only the left half was clickable. */
	z-index: 3;
}

.yas-hdr-centre a {
	pointer-events: auto;
}

/* RTL: the centring transform has to flip with the writing direction. */
[dir="rtl"] .yas-hdr-centre {
	transform: translateX(50%);
}

.yas-header .hfe-nav-menu a {
	font-size: var(--yas-fs-ui);
	letter-spacing: normal;
	text-transform: uppercase;
}

.yas-hdr-right {
	gap: 18px;
}

.yas-hdr-right .hfe-cart-count,
.yas-hdr-right .hfe-cart-menu-wrap-custom {
	color: inherit;
}

/* On the homepage the hero deliberately runs under the transparent bar; because
   the header is out of flow it already starts at the top, so no offset here. */

/* ---------------------------------------------------------------- Hero --- */

.yas-hero {
	position: relative;
	overflow: hidden;
}

.yas-hero .elementor-background-video-container video {
	object-fit: cover;
}

.yas-hero .elementor-heading-title {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.2;
	letter-spacing: normal;
	text-wrap: balance;
}

/* -------------------------------------------------------- Product grid --- */

/* The design's card is image + name only — no price, rating or cart button. */
.yas-product-grid .woocommerce ul.products {
	display: grid;
	/* Three per row on desktop, matching the reference store. Fixed counts,
	   because auto-fill made the row count swing with the viewport. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) {
	.yas-product-grid .woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.yas-product-grid .woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

.yas-product-grid .woocommerce ul.products::before,
.yas-product-grid .woocommerce ul.products::after {
	content: none;
}

.yas-product-grid ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: start;
}

.yas-product-grid ul.products li.product .price,
.yas-product-grid ul.products li.product .star-rating,
.yas-product-grid ul.products li.product .button,
.yas-product-grid ul.products li.product .added_to_cart,
.yas-product-grid ul.products li.product .woocommerce-loop-category__title ~ .price {
	display: none !important;
}

.yas-product-grid ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--yas-sand);
	margin: 0;
	transition: transform 0.6s ease;
}

.yas-product-grid ul.products li.product a:hover img {
	transform: scale(1.04);
}

.yas-product-grid ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: var(--yas-fs-body);
	line-height: 1.25;
	font-weight: 400;
	padding: 0;
	margin: 14px 0 0;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-product-grid ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* The featured section shows a single card, centred and width-capped. */
.yas-featured-product .woocommerce ul.products {
	grid-template-columns: minmax(0, 300px);
	justify-content: center;
}

.yas-featured-product ul.products li.product {
	text-align: center;
}

/* ------------------------------------------------------- Section layout --- */

.yas-two-col {
	display: flex;
	flex-wrap: wrap;
}

.yas-two-col > .yas-col {
	flex: 1 1 420px;
	min-width: 0;
}

.yas-produce-grid {
	display: grid !important;
	/* Three per row, as on the reference store. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 900px) {
	.yas-produce-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.yas-produce-grid {
		grid-template-columns: 1fr;
	}
}

.yas-produce-grid .elementor-widget-image,
.yas-produce-grid figure,
.yas-produce-grid img {
	width: 100%;
	margin: 0;
}

.yas-produce-grid img {
	aspect-ratio: 1121 / 1391;
	object-fit: cover;
	display: block;
}

.yas-fill img {
	width: 100%;
	display: block;
	object-fit: cover;
}

.yas-two-col .yas-fill img {
	aspect-ratio: 1697 / 2027;
}

.yas-featured .yas-fill img {
	aspect-ratio: auto;
	height: 100%;
	min-height: 420px;
	background: #F1DFD1;
}

.yas-measure p {
	max-width: 760px;
	margin-inline: auto;
	text-wrap: pretty;
}

/* -------------------------------------------------------------- Buttons --- */

/* Measured off the reference store: 140x50, 40px radius, 12px, no tracking. */
.yas-pill .elementor-button {
	min-width: 140px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 40px;
	padding: 0 20px;
	font-size: 12px;
	letter-spacing: normal;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.yas-underline-link .elementor-button {
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	padding: 0 0 2px;
	font-size: 11px;
	letter-spacing: normal;
	height: auto;
}

.yas-underline-link .elementor-button:hover {
	opacity: 0.65;
}

/* Connected Arabic script must not be letter-spaced — it breaks the joins. */
body.yas-lang-ar .yas-pill .elementor-button,
body.yas-lang-ar .yas-underline-link .elementor-button,
body.yas-lang-ar .yas-header .hfe-nav-menu a {
	letter-spacing: 0 !important;
}

/* --------------------------------------------------------------- Footer --- */

.yas-promise-bar {
	display: grid !important;
	/* Exactly the four promises — auto-fit would add empty tracks on wide screens. */
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

@media (max-width: 900px) {
	.yas-promise-bar {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.yas-promise-bar {
		grid-template-columns: 1fr;
	}
}

.yas-promise {
	padding: 14px 8px;
	border-inline-end: 1px solid rgba(62, 32, 24, 0.25);
}

.yas-promise:last-child {
	border-inline-end: 0;
}

.yas-promise .elementor-icon-box-title {
	margin: 10px 0 0;
}

.yas-footer-cols {
	display: flex;
	flex-wrap: wrap;
}

.yas-footer-cols > .yas-col {
	flex: 1 1 280px;
	min-width: 0;
}

.yas-footer-cols > .yas-col:first-child {
	max-width: 560px;
}

.yas-footer-nav .hfe-nav-menu a {
	color: #fff !important;
	font-size: var(--yas-fs-ui);
	line-height: 1.5;
	padding: 7px 0;
}

.yas-footer-nav .hfe-nav-menu a:hover {
	opacity: 0.7;
}

.yas-subscribe-form {
	display: flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.7);
	height: 60px;
	padding: 0 20px;
}

.yas-subscribe-form input {
	flex: 1;
	background: none;
	border: 0;
	outline: none;
	color: #fff;
	font-size: 16px;
	min-width: 0;
}

.yas-subscribe-form input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.yas-subscribe-form button {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px;
}

/* The arrow glyph points along the reading direction. */
[dir="rtl"] .yas-subscribe-form button {
	transform: scaleX(-1);
}

.yas-foot-bottom {
	font-size: var(--yas-fs-ui);
	line-height: 1.5;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.yas-foot-bottom,
.yas-foot-bottom a {
	color: #fff;
}

.yas-foot-bottom a:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------- Responsive --- */

@media (max-width: 1024px) {
	.yas-header .yas-hdr-left {
		order: 2;
	}
	.yas-hdr-centre {
		position: static;
		transform: none;
	}
	[dir="rtl"] .yas-hdr-centre {
		transform: none;
	}
}

@media (max-width: 767px) {
	.yas-header {
		padding-inline: 20px;
	}
	.yas-product-grid .woocommerce ul.products {
		gap: 28px 16px;
	}
	.yas-promise {
		border-inline-end: 0;
		border-bottom: 1px solid rgba(62, 32, 24, 0.18);
	}
}

/* --------------------------------------------- Language switcher (TP) --- */

/* TranslatePress ships a boxed flag dropdown; the design wants plain text. */
.yas-hdr-lang .trp-language-switcher,
.yas-foot-lang .trp-language-switcher {
	width: auto;
	min-width: 0;
}

.yas-hdr-lang .trp-language-switcher > div,
.yas-foot-lang .trp-language-switcher > div {
	background: none;
	border: 0;
	padding: 0 14px 0 0;
	box-shadow: none;
}

.yas-hdr-lang .trp-language-switcher img,
.yas-foot-lang .trp-language-switcher img {
	display: none;
}

.yas-hdr-lang .trp-language-switcher a,
.yas-foot-lang .trp-language-switcher a {
	font-size: 12px;
	letter-spacing: normal;
	color: inherit;
}

.yas-hdr-lang .trp-ls-shortcode-language {
	border: 0;
	background: rgba(233, 228, 225, 0.97);
}

/* The nav gets the room it needs; logo and controls stay put. */
.yas-hdr-left {
	flex: 1 1 auto;
	min-width: 0;
}

.yas-hdr-left .hfe-nav-menu {
	flex-wrap: nowrap;
}

.yas-hdr-left .hfe-nav-menu li {
	white-space: nowrap;
}

/* Top-level items run the full height of the bar.

   UAE sizes the anchor to its own text, so only a short box around the label
   was the link — the space above and below it belonged to the bar. Stretching
   the whole chain from the container down to the anchor makes the entire
   column under a label clickable, and gives the SHOP trigger a hover target
   that reaches the panel below it. */
.yas-hdr-left {
	align-self: stretch;
}

/* Elementor gives this container 10px of block padding of its own, which is
   what kept the anchors 20px short of the bar. The bar's height comes from
   .yas-header's min-height, so dropping it changes nothing but the reach of
   the links. Forced because the padding is set per-element by Elementor. */
.yas-header .yas-hdr-left {
	padding-block: 0 !important;
}

.yas-hdr-left > .elementor-element,
.yas-hdr-left .elementor-widget-container,
.yas-hdr-left .hfe-nav-menu-layout,
.yas-hdr-left nav.hfe-nav-menu__layout-horizontal,
.yas-hdr-left ul.hfe-nav-menu {
	height: 100%;
}

.yas-hdr-left ul.hfe-nav-menu {
	align-items: stretch;
}

.yas-hdr-left ul.hfe-nav-menu > li {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.yas-hdr-left ul.hfe-nav-menu > li > a.hfe-menu-item,
.yas-hdr-left ul.hfe-nav-menu > li > .hfe-has-submenu-container,
.yas-hdr-left ul.hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item {
	display: flex;
	align-items: center;
	height: 100%;
	padding-block: 0;
}

.yas-hdr-right {
	flex: 0 0 auto;
}

/* ============================================================ Header UI === */

/* Liquid-glass treatment once the page scrolls off the hero, on every page
   that has no hero behind the bar, and while the mega panel is open — the
   three states that want the same surface. */
body.yas-scrolled .yas-header::before,
body:not(.home) .yas-header::before,
body.yas-mega-open .yas-header::before {
	visibility: visible;
}

/* ------------------------------------------------------------- actions --- */

.yas-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.yas-act {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	line-height: 0;
}

/* Search and cart are real <button type="button"> elements, so the global
   [type="button"], [type="submit"], button rule (further down this file, kept
   ink-coloured everywhere else on purpose) matches them with the exact same
   specificity as a single class — an attribute selector counts the same as a
   class. Whichever is declared later in the file then wins the tie, which
   made these two icons ink on the transparent hero while the plain <a> account
   link beside them (never touched by a button-type selector) correctly
   inherited white. Scoping the icon row's own colour to two classes settles
   the tie for good, regardless of where either rule sits in the file. */
.yas-actions .yas-act {
	color: inherit;
}

/* Scoped for the same reason as .yas-actions .yas-act above: the shorthand
   `border` here sets border-color via currentColor, which is its own
   cascade competition separate from the `color` property, and ties against
   the same global [type="button"] rule's `border-color: var(--yas-ink)`.
   Left at a single class it lost that tie exactly like color did, so the
   cart badge kept an ink ring while the icon inside it had already gone
   white. */
.yas-actions .yas-act-cart {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	line-height: 1;
}

.yas-act:hover {
	opacity: 0.7;
}

/* TranslatePress renders flags-only natively (Settings → TranslatePress →
   Language Switcher); only the surrounding chrome needs neutralising here. */
.yas-hdr-lang .trp-language-switcher {
	--bg: transparent;
	--border: 0;
	--switcher-padding: 0;
}

/* --------------------------------------------------------------- scrim --- */

.yas-scrim {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(38, 21, 13, 0.4);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.yas-scrim.is-open {
	opacity: 1;
}

/* Pinned by yas-header.js at the current offset (it also sets `top`), so the
   page behind the panel neither scrolls nor jumps back to the top. */
body.yas-panel-open {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}

/* -------------------------------------------------------------- search --- */

/* Full-width bar sliding down from the top edge, matching the store reference. */
.yas-search {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 97;
	background: #fff;
	color: var(--yas-ink);
	border-bottom: 1px solid rgba(62, 32, 24, 0.14);
	transform: translateY(-110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	max-height: 100vh;
	display: flex;
	flex-direction: column;
}

.yas-search.is-open {
	transform: translateY(0);
}

/* The close control sits on its own row above the field, as in the reference,
   so the field can run the full width of the panel. */
.yas-search__close {
	display: block;
	margin: 0 0 0 auto;
	padding: 18px 34px 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.yas-search__form {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 0 20px;
	margin: 0 40px;
	border-bottom: 1px solid rgba(62, 32, 24, 0.16);
}

.yas-search__form > svg {
	flex: 0 0 auto;
	opacity: 0.55;
}

.yas-search__form input[type="search"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: none;
	font-size: 17px;
	color: inherit;
	padding: 0;
}

.yas-search__form input[type="search"]::placeholder {
	color: rgba(62, 32, 24, 0.45);
}

/* Strip Chrome's own clear affordance — the panel has its own close. */
.yas-search__form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* --- results ------------------------------------------------------------ */

/* The panel grows with its content and scrolls internally rather than pushing
   past the viewport. */
.yas-search__results {
	padding: 26px 40px 40px;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}

.yas-search__results[hidden] {
	display: none;
}

.yas-search__group {
	margin-bottom: 30px;
}

.yas-search__group:last-of-type {
	margin-bottom: 34px;
}

.yas-search__label {
	margin: 0 0 14px;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 15px;
	color: rgba(62, 32, 24, 0.55);
}

body.yas-lang-ar .yas-search__label {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-search__suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.yas-search__suggestions a {
	color: var(--yas-ink);
	text-decoration: none;
	font-size: 15px;
}

.yas-search__suggestions a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yas-search__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
}

.yas-search-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--yas-ink);
	text-decoration: none;
}

.yas-search-card__media {
	display: block;
	background: var(--yas-sand);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.yas-search-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.yas-search-card:hover .yas-search-card__media img {
	transform: scale(1.04);
}

.yas-search-card__name {
	font-size: 14px;
	line-height: 1.35;
}

.yas-search-card__price {
	font-size: 14px;
	color: rgba(62, 32, 24, 0.7);
}

.yas-search__empty {
	margin: 0;
	font-size: 15px;
	color: rgba(62, 32, 24, 0.7);
}

/* Full results page, styled as the design's pill. */
.yas-search__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	height: 54px;
	padding: 0 34px;
	background: #000;
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.yas-search__all:hover {
	background: var(--yas-ink);
	color: #fff;
}

body.yas-lang-ar .yas-search__all {
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------------------------------------- cart drawer --- */

.yas-cart {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: 480px;
	max-width: 92vw;
	z-index: 96;
	background: #fff;
	color: var(--yas-ink);
	display: flex;
	flex-direction: column;
	/* Only `.yas-cart` ever declares `transform`; the offset travels through a
	   variable instead. That keeps the open/closed state and the RTL flip from
	   competing on specificity, which is what broke the drawer in Arabic. */
	--yas-drawer-x: 102%;
	transform: translateX(var(--yas-drawer-x));
	transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The drawer enters from the inline-end edge, which is the left under RTL. */
[dir="rtl"] .yas-cart {
	--yas-drawer-x: -102%;
}

.yas-cart.is-open {
	--yas-drawer-x: 0%;
}

.yas-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 28px;
	border-bottom: 1px solid rgba(62, 32, 24, 0.14);
}

.yas-cart__title {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 22px;
}

body.yas-lang-ar .yas-cart__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-cart__close {
	background: none;
	border: 0;
	padding: 4px;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.yas-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 28px;
	display: flex;
	flex-direction: column;
}

/* Items take the free space so the totals stay pinned to the bottom. */
.yas-cart__lines {
	flex: 1 0 auto;
}

.yas-cart__foot {
	margin-top: auto;
}

/* While a quantity change is in flight the drawer only stops accepting input.
   It used to fade the whole body to 0.5 for the length of the request, which
   read as the item's name, size and price disappearing and coming back —
   especially in Arabic, where the lighter strokes lose legibility far sooner
   than Latin does at the same opacity. Only the control being operated dims
   now, so the line itself never looks like it went away. */
.yas-cart.is-busy .yas-cart__body {
	pointer-events: none;
}

.yas-cart.is-busy .yas-qty {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* --- Empty state --------------------------------------------------------- */

.yas-cart__empty {
	padding: 26px 0;
}

.yas-cart__empty-message {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 20px;
	margin: 0 0 18px;
}

body.yas-lang-ar .yas-cart__empty-message {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-cart__continue {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 26px;
	border: 1px solid var(--yas-ink);
	border-radius: 30px;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--yas-ink);
}

.yas-cart__continue:hover {
	background: var(--yas-ink);
	color: #fff;
}

/* --- Line ---------------------------------------------------------------- */

.yas-cart-line {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 0 20px;
	padding: 26px 0;
	border-bottom: 1px solid rgba(62, 32, 24, 0.14);
}

.yas-cart-line__media img {
	width: 140px;
	height: 140px;
	object-fit: cover;
	background: var(--yas-sand);
	display: block;
	margin: 0;
}

.yas-cart-line__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.yas-cart-line__name {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 16px;
	color: var(--yas-ink);
	line-height: 1.2;
}

body.yas-lang-ar .yas-cart-line__name {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-cart-line__price,
.yas-cart-line__meta {
	font-size: 13px;
	margin: 0;
}

.yas-cart-line__meta p {
	margin: 0;
}

/* WooCommerce prints the variation label and value in separate nodes. */
.yas-cart-line__meta dl,
.yas-cart-line__meta dt,
.yas-cart-line__meta dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.yas-cart-line__meta dt::after {
	content: " ";
}

.yas-cart-line__total {
	font-size: 13px;
	white-space: nowrap;
	text-align: end;
}

.yas-qty--cart {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid rgba(62, 32, 24, 0.35);
	margin: 4px 0 2px;
}

/* The number sits flush inside the single outer rectangle; it was drawing its
   own box, which read as a border within a border. */
.yas-qty--cart .yas-qty__input,
.yas-cart .yas-qty__input {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
	min-width: 48px;
}

.yas-qty--cart .yas-qty__input:focus {
	border: 0 !important;
	box-shadow: none !important;
}

.yas-qty--cart .yas-qty-btn {
	width: 38px;
	height: 100%;
}

.yas-qty__input {
	width: 40px;
	height: 100%;
	border: 0;
	background: none;
	text-align: center;
	font-size: 13px;
	color: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}

.yas-qty__input::-webkit-outer-spin-button,
.yas-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.yas-cart-line__remove {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: var(--yas-ink);
	opacity: 0.7;
	cursor: pointer;
}

.yas-cart-line__remove:hover {
	opacity: 1;
}

/* --- Footer -------------------------------------------------------------- */

.yas-cart__foot {
	padding: 22px 0 28px;
	border-top: 1px solid rgba(62, 32, 24, 0.14);
}

.yas-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 18px;
}

.yas-cart__note {
	margin: 10px 0 18px;
	font-size: 13px;
	opacity: 0.65;
}

.yas-cart__view,
.yas-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 30px;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin-top: 10px;
}

.yas-cart__view {
	border: 1px solid var(--yas-ink);
	color: var(--yas-ink);
}

.yas-cart__view:hover {
	background: var(--yas-ink);
	color: #fff;
}

.yas-cart__checkout {
	background: #000;
	color: #fff;
	border: 1px solid #000;
}

.yas-cart__checkout:hover {
	background: var(--yas-ink);
	border-color: var(--yas-ink);
}

body.yas-lang-ar .yas-cart__view,
body.yas-lang-ar .yas-cart__checkout,
body.yas-lang-ar .yas-cart__continue {
	letter-spacing: 0 !important;
	text-transform: none;
}

.single_add_to_cart_button.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

@media (max-width: 1100px) {
	.yas-search__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.yas-search__close {
		padding: 14px 18px 0;
	}
	.yas-search__form {
		margin: 0 20px;
		padding: 10px 0 16px;
		gap: 12px;
	}
	.yas-search__form input[type="search"] {
		font-size: 16px;
	}
	.yas-search__results {
		padding: 20px 20px 30px;
		max-height: calc(100vh - 120px);
	}
	.yas-search__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.yas-search__all {
		width: 100%;
		min-width: 0;
	}
}

/* ====================================================== SHOP mega menu === */

/* UAE's own dropdown-arrow rule (frontend.css) is `.sub-arrow { margin-left: 10px }`
   — a physical property, not a logical one, and the plugin ships no RTL
   counterpart for it. In LTR the label sits to the arrow's left, so that
   margin correctly opens a gap between them. In RTL the label sits to the
   arrow's RIGHT instead (the label is first in the DOM, and RTL runs the
   inline direction the other way), so the same physical margin lands on the
   arrow's outer edge instead — the side already facing empty space — and the
   label and arrow end up touching. Restating it as a logical start-margin
   fixes both directions from one rule and needs no direction check: the
   browser flips which physical side "start" resolves to on its own. */
.yas-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow {
	margin-left: 0;
	margin-inline-start: 10px;
}

/* The SHOP dropdown is a two-column panel: "Shop by Produce" and "Shop by
   Occasion" become column headings, their children the links beneath. */
.yas-header .hfe-nav-menu li.yas-mega {
	position: static;
}

/* Matches the reference: a full-width translucent panel pinned to the top of
   the viewport, with the content padded down clear of the header bar. */
.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu {
	display: none;
	/* Forced: UAE positions every `.sub-menu` absolutely and the panel must
	   escape the header to span the viewport identically on every template. */
	position: fixed !important;
	/* Starts below the bar rather than behind it. Sitting at top:0 required
	   z-index:-1 to keep the nav readable, which dropped the panel behind the
	   page for hit-testing — so crossing its empty area closed the menu. */
	top: var(--yas-hdr-h) !important;
	inset-inline: 0 !important;
	width: 100vw !important;
	max-width: none;
	min-width: 0;
	gap: 110px;
	padding: 32px 20px 36px;
	background: var(--yas-glass);
	-webkit-backdrop-filter: var(--yas-glass-blur);
	backdrop-filter: var(--yas-glass-blur);
	color: var(--yas-ink);
	border: 0;
	border-bottom: 1px solid rgba(62, 32, 24, 0.10);
	box-shadow: 0 18px 44px rgba(62, 32, 24, 0.10);
	z-index: 1;
	white-space: nowrap;
}


.yas-header .hfe-nav-menu li.yas-mega.is-mega-open > ul.sub-menu {
	display: flex;
}

/* Each heading owns a column. */
.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu > li {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: auto;
	border: 0;
	text-align: start;
}

/* Headings label the column; they are not destinations.
   UAE wraps every parent link in `.hfe-has-submenu-container`, so the anchor
   is not a direct child of the <li>. */
.yas-header .hfe-nav-menu li.yas-mega-heading > .hfe-has-submenu-container {
	pointer-events: none;
}

/* Scoped to the direct child only: UAE gives the category links underneath the
   same `hfe-sub-menu-item` class, and an unscoped rule dimmed them to 45% too. */
.yas-header .hfe-nav-menu li.yas-mega-heading > .hfe-has-submenu-container > a.hfe-sub-menu-item {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.45;
	padding: 0;
	cursor: default;
}

/* The category links sit at full strength. */
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a.hfe-sub-menu-item,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a {
	opacity: 1;
}

/* Arabic has no letter case, so uppercase is meaningless and the tracking
   would break the joins — show the heading at readable size instead. */
body.yas-lang-ar .yas-header .hfe-nav-menu li.yas-mega-heading > .hfe-has-submenu-container > a.hfe-sub-menu-item {
	text-transform: none;
	letter-spacing: 0 !important;
	font-size: 15px;
}

/* No disclosure caret on a heading that never collapses. */
.yas-header .hfe-nav-menu li.yas-mega-heading .hfe-menu-toggle,
.yas-header .hfe-nav-menu li.yas-mega-heading .sub-arrow {
	display: none !important;
}

/* Third level sits inside the column rather than flying out again. */
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu {
	display: flex !important;
	/* UAE's frontend.css sets `.hfe-nav-menu .menu-item-has-children .sub-menu`
	   to absolute; on WooCommerce templates that wins and the links pile onto
	   their heading. Force the in-column flow. */
	position: static !important;
	inset: auto !important;
	transform: none !important;
	flex-direction: column;
	gap: 22px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
	width: auto;
	min-width: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	padding: 0;
	line-height: 1;
	color: var(--yas-ink) !important;
}

body.yas-lang-ar .yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a {
	line-height: 1.4;
}

.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a:hover {
	opacity: 0.6;
}

/* The panel is always on the light ground, so it keeps dark text even while
   the bar itself is transparent over the hero. */
.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu a {
	color: var(--yas-ink) !important;
}

@media (max-width: 1024px) {
	.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu {
		position: static !important;
		width: auto !important;
		flex-direction: column;
		gap: 18px;
		border: 0;
		box-shadow: none;
		padding: 12px 0;
	}
}

/* UAE draws a divider under every sub-menu item; the design's panel is clean. */
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu li,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu a,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu .menu-item {
	border: 0 !important;
	box-shadow: none !important;
}


/* While the mega panel is open the bar reads against the light panel behind it,
   so it takes its solid treatment and the logo drops the white inversion.

   The open state is read from the body class the menu script sets rather than
   from :has() on the header, so it travels through the same plain descendant
   selectors body.yas-scrolled already uses for this surface — including the
   frosted ground, which is revealed with the scrolled state further up. */
body.yas-mega-open .yas-header {
	color: var(--yas-ink);
}

body.yas-mega-open .yas-header .yas-logo img {
	filter: none !important;
}

/* UAE paints its own submenu chrome on every level; the mega panel supplies
   the only surface, so the columns and their items must be transparent and
   share one inline-start edge. */
.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu > li,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu li {
	background: transparent !important;
	box-shadow: none !important;
}

.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu a,
.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu .hfe-has-submenu-container,
.yas-header .hfe-nav-menu li.yas-mega-heading a.hfe-sub-menu-item {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
	background: transparent !important;
}

/* Heading sits directly above its own links, sharing the column's edge. */
.yas-header .hfe-nav-menu li.yas-mega > ul.sub-menu > li > .hfe-has-submenu-container {
	display: block;
	margin-bottom: 6px !important;
}


/* Video band: a wide letterbox strip, as on the reference store. */
.yas-band-video .elementor-wrapper,
.yas-band-video .elementor-fit-aspect-ratio {
	aspect-ratio: 3 / 1;
	min-height: 240px;
	height: auto;
	padding-bottom: 0 !important;
}

.yas-band-video video,
.yas-band-video iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #2A1A10;
}

@media (max-width: 767px) {
	.yas-band-video .elementor-wrapper,
	.yas-band-video .elementor-fit-aspect-ratio {
		aspect-ratio: 16 / 9;
	}
}

/* ================================================= Our Produce tiles === */

.yas-produce-tile figure.wp-caption,
.yas-produce-tile figure,
.yas-produce-tile .elementor-widget-container {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	line-height: 0;
}

.yas-produce-tile a {
	display: block;
	position: relative;
}

.yas-produce-tile img {
	width: 100%;
	aspect-ratio: 1121 / 1391;
	object-fit: cover;
	display: block;
}

/* The name sits over the image and appears on hover, with a soft scrim so it
   stays legible against whatever the photograph is doing underneath. */
/* Elementor styles the caption as `.elementor-widget-image .widget-image-caption`
   and pulls its font from the global kit, so this has to out-specify that. */
.elementor-widget-image.yas-produce-tile .widget-image-caption,
.yas-produce-tile figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px;
	text-align: center;
	color: #fff;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	/* No scrim behind the label and no zoom on the photograph: the name simply
	   fades up over the picture. A text shadow does the legibility work the
	   overlay used to, without dimming the image. */
	text-shadow: 0 1px 14px rgba(38, 21, 13, 0.55), 0 1px 3px rgba(38, 21, 13, 0.4);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.elementor-widget-image.yas-produce-tile:hover .widget-image-caption,
.elementor-widget-image.yas-produce-tile:focus-within .widget-image-caption,
.yas-produce-tile:hover figcaption,
.yas-produce-tile:focus-within figcaption {
	opacity: 1;
}

/* The caption is a heading now; it takes the figcaption's own type rather than
   the browser's h3 defaults. */
.yas-produce-tile__label {
	margin: 0;
	font: inherit;
	color: inherit;
	text-shadow: inherit;
}

body.yas-lang-ar .elementor-widget-image.yas-produce-tile .widget-image-caption,
body.yas-lang-ar .yas-produce-tile figcaption {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* ======================================================= Pill buttons === */

/* Colour is set here rather than through Elementor's controls, which the
   global kit repaints with its own accent. */
.yas-pill .elementor-button,
.yas-pill .elementor-button:visited {
	background-color: transparent !important;
	border-radius: 40px !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.yas-pill--outline .elementor-button {
	border: 1px solid var(--yas-ink) !important;
	color: var(--yas-ink) !important;
}

.yas-pill--outline .elementor-button:hover {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

.yas-pill--white .elementor-button {
	border: 1px solid #fff !important;
	color: #fff !important;
}

.yas-pill--white .elementor-button:hover {
	background-color: #fff !important;
	color: var(--yas-ink) !important;
}

/* ==================================================== Explore section === */

/* A hairline rule between the two columns, as on the reference. */
.yas-two-col.yas-explore {
	position: relative;
}

.yas-two-col.yas-explore > .yas-col + .yas-col {
	border-inline-start: 1px solid rgba(62, 32, 24, 0.20);
}

.yas-two-col.yas-explore > .yas-col {
	padding-inline: 60px;
}

@media (max-width: 900px) {
	.yas-two-col.yas-explore > .yas-col + .yas-col {
		border-inline-start: 0;
		border-top: 1px solid rgba(62, 32, 24, 0.20);
		padding-top: 40px;
	}
}


/* ============================================== Sustainability band === */

/* Reference: 48px heading on a 60px line, 30px above the button. */
.yas-hero.yas-statement .elementor-heading-title {
	font-size: 48px;
	line-height: 60px;
	max-width: 22ch;
}

@media (max-width: 900px) {
	.yas-hero.yas-statement .elementor-heading-title {
		font-size: 34px;
		line-height: 44px;
	}
}

/* Arabic needs more leading and no width clamp — the line breaks differently. */
body.yas-lang-ar .yas-hero.yas-statement .elementor-heading-title {
	line-height: 1.55;
	max-width: 26ch;
}

/* ==================================================== Cursor affordance === */

/* Anything clickable gets the pointer; UAE and Elementor leave several of these
   as the default arrow. */
.yas-header a,
.yas-header .hfe-nav-menu a,
.yas-produce-tile a,
.yas-product-grid a,
.yas-pill .elementor-button,
.yas-underline-link .elementor-button,
.yas-act,
.yas-footer a,
.trp-language-switcher a,
.yas-cart__body a {
	cursor: pointer;
}

/* Only the column label itself is inert. UAE gives the category links beneath it
   the same `hfe-sub-menu-item` class, so this must be scoped to the direct child. */
.yas-header .hfe-nav-menu li.yas-mega-heading > .hfe-has-submenu-container > a.hfe-sub-menu-item {
	cursor: default;
}

.yas-header .hfe-nav-menu li.yas-mega ul.sub-menu ul.sub-menu a {
	cursor: pointer;
}

/* Elementor writes letter-spacing per element from the widget's typography;
   the reference uses none on its pills. */
.yas-pill .elementor-button {
	letter-spacing: normal !important;
}

/* ============================================ Collection / shop pages === */

.woocommerce.archive .site-main,
.woocommerce-page .site-main,
.woocommerce.archive #content,
.woocommerce-page #content {
	background: var(--yas-bg);
	color: var(--yas-ink);
	padding: 0;
	max-width: none;
	width: 100%;
}

/* The fixed header overlays; the page starts beneath it. */
.woocommerce.archive #page,
.woocommerce-page #page {
	padding-top: var(--yas-hdr-h);
}

/* --- Arabic statement ---------------------------------------------------- */

.yas-collection-quote {
	padding: 96px 40px 110px;
	display: flex;
	justify-content: center;
}

.yas-collection-quote p {
	margin: 0;
	max-width: 900px;
	text-align: center;
	font-family: "Amiri", serif;
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 62px);
	line-height: 1.75;
	color: var(--yas-ink);
}

.yas-collection-title {
	margin: 0 40px 24px;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	font-size: var(--yas-fs-h2);
	line-height: 1.25;
	text-align: center;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-collection-title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* --- Filter bar ---------------------------------------------------------- */

.yas-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	margin: 0 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(62, 32, 24, 0.28);
	font-size: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-filterbar {
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

.yas-filterbar__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.yas-filter {
	position: relative;
}

.yas-filter__toggle,
.yas-sort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.yas-caret {
	width: 9px;
	height: 6px;
	flex: 0 0 auto;
	background: currentColor;
	opacity: 0.85;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.yas-filter__panel {
	position: absolute;
	top: 28px;
	inset-inline-start: 0;
	z-index: 5;
	min-width: 220px;
	background: var(--yas-bg);
	border: 1px solid rgba(62, 32, 24, 0.2);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
}

/* Closed. Kept in the layout but out of the accessibility tree and off the
   tab order, so it has something to animate from — display:none cannot be
   transitioned. The visibility change is delayed by the length of the fade so
   the panel is still painted while it leaves. */
.yas-filter__panel {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.99);
	transform-origin: top center;
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 0.22s;
}

.yas-filter__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 0s;
}

/* Before the script takes over, the attribute is the only thing holding the
   panel closed, so it still has to win. */
.yas-filter__panel[hidden]:not(.is-open) {
	display: none;
}

/* The caret turns to point at the open panel. */
.yas-filter .yas-caret,
.yas-sort .yas-caret {
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.yas-filter.is-open .yas-caret,
.yas-sort.is-open .yas-caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.yas-filter__panel,
	.yas-filter__panel.is-open,
	.yas-filter .yas-caret,
	.yas-sort .yas-caret {
		transition-duration: 0s;
	}
}

/* --- sort listbox ------------------------------------------------------- */

.yas-sort__toggle[hidden] {
	display: none;
}

.yas-sort__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	min-width: 230px;
	padding: 8px;
	gap: 0;
}

.yas-sort__option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
    padding: 9px 12px;
	background: none;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: start;
	color: var(--yas-ink);
	cursor: pointer;
	transition: background-color 0.16s ease;
}

body.yas-lang-ar .yas-sort__option {
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

.yas-sort__option:hover,
.yas-sort__option:focus-visible {
	background: rgba(62, 32, 24, 0.07);
	outline: none;
}

/* The tick keeps its space at all times so the labels never shift when the
   selection moves. */
.yas-sort__tick {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	opacity: 0;
	background: currentColor;
	-webkit-mask: var(--yas-tick) center / 12px 12px no-repeat;
	mask: var(--yas-tick) center / 12px 12px no-repeat;
	--yas-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8.5l3.5 3.5 7.5-8'/></svg>");
}

.yas-sort__option[aria-selected="true"] .yas-sort__tick {
	opacity: 1;
}

.yas-sort__option[aria-selected="true"] {
	font-weight: 500;
}

.yas-filter__panel label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.yas-filter__panel label.is-disabled {
	opacity: 0.5;
	cursor: default;
}

.yas-filter__panel input[type="checkbox"] {
	accent-color: var(--yas-ink);
}

/* --- price range, two handles ------------------------------------------ */

.yas-filter__panel--price {
	min-width: 268px;
}

.yas-range {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.yas-range__values {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	white-space: nowrap;
}

.yas-range__dash {
	opacity: 0.5;
}

/* The rail and the selected span are drawn here; the inputs above it are
   transparent and contribute only their thumbs. */
.yas-range__track {
	position: relative;
	height: 26px;
}

.yas-range__track::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: rgba(62, 32, 24, 0.22);
	border-radius: 2px;
}

.yas-range__fill {
	position: absolute;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--yas-ink);
	border-radius: 2px;
}

/* Both inputs sit on the same track. They ignore the pointer so a click lands
   on whichever thumb is under it rather than on the topmost input's rail. */
.yas-range__input {
	position: absolute;
	inset-inline: 0;
	top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.yas-range__input:focus {
	outline: none;
}

.yas-range__input[data-yas-range-input="min"] {
	z-index: 3;
}

.yas-range__input[data-yas-range-input="max"] {
	z-index: 4;
}

.yas-range__input::-webkit-slider-runnable-track {
	height: 26px;
	background: none;
	border: 0;
}

.yas-range__input::-moz-range-track {
	height: 26px;
	background: none;
	border: 0;
}

.yas-range__input::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-top: 5.5px;
	border: 0;
	border-radius: 50%;
	background: var(--yas-ink);
	box-shadow: 0 0 0 2px var(--yas-bg);
	cursor: grab;
}

.yas-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border: 0;
	border-radius: 50%;
	background: var(--yas-ink);
	box-shadow: 0 0 0 2px var(--yas-bg);
	cursor: grab;
}

.yas-range__input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.yas-range__input:active::-moz-range-thumb {
	cursor: grabbing;
}

.yas-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 2px var(--yas-bg), 0 0 0 4px rgba(62, 32, 24, 0.45);
}

.yas-range__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 2px var(--yas-bg), 0 0 0 4px rgba(62, 32, 24, 0.45);
}

.yas-filter__apply {
	align-self: flex-start;
	background: none;
	border: 1px solid var(--yas-ink);
	border-radius: 30px;
	padding: 6px 18px;
	font-size: 11px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--yas-ink);
	cursor: pointer;
}

.yas-filter__apply:hover {
	background: var(--yas-ink);
	color: #fff;
}

/* The native select still renders when JS has not run; the styled toggle takes
   the same treatment so the bar looks identical either way. */
.yas-sort select,
.yas-sort__toggle {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	padding-inline-end: 6px;
	outline: none;
}

body.yas-lang-ar .yas-sort select,
body.yas-lang-ar .yas-sort__toggle {
	text-transform: none;
}

.yas-sort__toggle:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The rule above sets display:flex, which outranks the hidden attribute's own
   display:none — so once the script hid the native select it kept rendering
   and the label appeared twice. Hidden has to win explicitly. */
.yas-sort select[hidden],
.yas-sort__toggle[hidden] {
	display: none;
}

/* --- Product grid -------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px 30px;
	margin: 0;
	padding: 40px 40px 100px;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: start;
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--yas-sand);
	margin: 0;
	transition: transform 0.6s ease;
}

.woocommerce ul.products li.product a:hover img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: var(--yas-fs-body);
	line-height: 1.25;
	font-weight: 400;
	padding: 0;
	margin: 14px 0 0;
	color: var(--yas-ink);
}

body.yas-lang-ar .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: none !important;
}

.woocommerce nav.woocommerce-pagination {
	padding: 0 40px 80px;
}

@media (max-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-inline: 20px;
	}
	.yas-filterbar,
	.yas-collection-quote {
		margin-inline: 20px;
		padding-inline: 0;
	}
}

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

/* ============================================== Single product page === */

.single-product #page {
	padding-top: var(--yas-hdr-h);
}

/* The design runs edge to edge. Hello Elementor sizes its container from
   --content-width, and Elementor's kit re-asserts the cap at a higher
   specificity, so both are neutralised here. */
body.single-product,
body.woocommerce-page.archive,
body.post-type-archive-product {
	--content-width: 100%;
}

body.single-product .site-main,
body.single-product #content,
body.woocommerce-page.archive .site-main,
body.post-type-archive-product .site-main {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.single-product div.product {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap-reverse;
	padding: 0 40px;
	margin: 0;
	border-bottom: 1px solid rgba(62, 32, 24, 0.28);
	background: var(--yas-bg);
	color: var(--yas-ink);
}

/* The column rule is drawn on the row itself. Hanging it off the summary's
   border left it short whenever the image column was the taller of the two. */
.single-product div.product::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 50%;
	width: 1px;
	background: rgba(62, 32, 24, 0.28);
	pointer-events: none;
}

/* Summary column */
.single-product div.product .summary {
	flex: 1 1 440px;
	min-width: min(100%, 440px);
	padding: 60px clamp(0px, 6vw, 104px) 80px;
	margin: 0;
	float: none;
	width: auto;
}

/* Image column */
.single-product div.product .yas-product__media {
	flex: 1 1 440px;
	min-width: min(100%, 440px);
	padding-inline-start: clamp(0px, 4vw, 60px);
}

.yas-product__frame {
	aspect-ratio: 1 / 1.08;
	background: var(--yas-sand);
	overflow: hidden;
	cursor: zoom-in;
}

.yas-product__frame:focus-visible {
	outline: 2px solid var(--yas-ink);
	outline-offset: 2px;
}

.yas-product__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Lightbox ------------------------------------------------------------ */

.yas-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(38, 21, 13, 0.88);
	opacity: 0;
	transition: opacity 0.25s ease;
	cursor: zoom-out;
}

.yas-lightbox.is-open {
	opacity: 1;
}

.yas-lightbox[hidden] {
	display: none;
}

.yas-lightbox img {
	max-width: min(100%, 1100px);
	max-height: 100%;
	object-fit: contain;
	display: block;
	cursor: default;
	background: var(--yas-sand);
}

.yas-lightbox__close {
	position: absolute;
	top: 24px;
	inset-inline-end: 28px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--yas-ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yas-lightbox__close:hover {
	background: #fff;
}

@media (max-width: 767px) {
	.yas-lightbox {
		padding: 16px;
	}
	.yas-lightbox__close {
		top: 12px;
		inset-inline-end: 12px;
	}
}

.yas-product__title {
	margin: 0 0 22px;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	font-size: var(--yas-fs-h2);
	line-height: 1.25;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-product__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-product__price,
.yas-product__price .price {
	font-size: var(--yas-fs-lead);
	line-height: 1.2;
	margin: 0 0 28px;
	color: var(--yas-ink);
}

.yas-product__price del {
	opacity: 0.5;
	margin-inline-end: 8px;
}

/* --- Size swatches ------------------------------------------------------- */

/* WooCommerce's selects stay in the DOM (they carry the state) but are hidden
   once the swatches are built from them. */
.variations_form.yas-has-swatches .variations {
	display: none;
}

.yas-swatch-group__label {
	font-size: 13px;
	margin-bottom: 12px;
}

.yas-swatch-group__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.yas-swatch {
	height: 56px;
	min-width: 56px;
	padding: 0 16px;
	background: none;
	color: inherit;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid rgba(62, 32, 24, 0.28);
	transition: border-color 0.2s ease;
}

.yas-swatch:hover {
	border-color: rgba(62, 32, 24, 0.6);
}

.yas-swatch.is-active {
	border: 1px solid var(--yas-ink);
}

/* --- Quantity ------------------------------------------------------------ */

.single-product div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	height: 56px;
	border: 1px solid rgba(62, 32, 24, 0.5);
	margin: 0 0 26px;
	float: none;
}

.single-product div.product form.cart .quantity input.qty {
	width: 56px;
	height: 100%;
	border: 0;
	background: none;
	text-align: center;
	font-size: 13px;
	color: inherit;
	-moz-appearance: textfield;
}

.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	opacity: 1;
	height: 34px;
}

.single-product div.product form.cart .quantity label {
	display: none;
}

.yas-qty-label {
	font-size: 13px;
	margin-bottom: 12px;
}

/* --- Add to bag / Buy it now --------------------------------------------- */

.single-product div.product form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

.single-product div.product form.cart button.single_add_to_cart_button,
.yas-buynow {
	height: 56px;
	width: 100%;
	border-radius: 30px;
	font-size: var(--yas-fs-ui);
	/* WooCommerce's own button rule sets 700; the reference is 400 everywhere. */
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
	float: none;
}

.single-product div.product form.cart button.single_add_to_cart_button {
	background: #000 !important;
	color: #fff !important;
	border: 0 !important;
	/* The wrapper supplies the 12px gap between the two buttons. */
	margin: 0;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--yas-ink) !important;
}

.yas-buynow {
	background: none;
	color: var(--yas-ink);
	border: 1px solid var(--yas-ink);
}

.yas-buynow:hover {
	background: var(--yas-ink);
	color: #fff;
}

body.yas-lang-ar .single-product div.product form.cart button.single_add_to_cart_button,
body.yas-lang-ar .yas-buynow {
	letter-spacing: 0 !important;
	text-transform: none;
}

/* --- Accordions ---------------------------------------------------------- */

.yas-accordions {
	margin-top: 34px;
	border-top: 1px solid rgba(62, 32, 24, 0.28);
}

.yas-accordion {
	border-bottom: 1px solid rgba(62, 32, 24, 0.28);
}

.yas-accordion__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: var(--yas-fs-body);
	text-align: start;
	cursor: pointer;
}

.yas-accordion__icon {
	font-size: 20px;
	line-height: 1;
	font-weight: 300;
}

.yas-accordion__body p {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
	text-wrap: pretty;
}

.yas-accordion__body[hidden] {
	display: none;
}

/* --- You May Also Like --------------------------------------------------- */

.yas-alsolike {
	padding: 70px 40px 90px;
	background: var(--yas-bg);
}

.yas-alsolike__title {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	font-size: 24px;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-alsolike__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-rail {
	position: relative;
}

.yas-rail__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.yas-rail__track::-webkit-scrollbar {
	display: none;
}

.yas-rail__item {
	flex: 0 0 clamp(240px, 23.5%, 420px);
	scroll-snap-align: start;
	display: block;
	color: inherit;
}

.yas-rail__frame {
	aspect-ratio: 1 / 1;
	background: var(--yas-sand);
	overflow: hidden;
}

.yas-rail__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.yas-rail__item:hover .yas-rail__frame img {
	transform: scale(1.04);
}

.yas-rail__name {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 13px;
	margin-top: 14px;
}

body.yas-lang-ar .yas-rail__name {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-rail__nav {
	position: absolute;
	top: 45%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yas-ink);
	font-size: 22px;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: opacity 0.2s ease;
}

.yas-rail__nav--prev {
	inset-inline-start: 20px;
}

.yas-rail__nav--next {
	inset-inline-end: 20px;
}

.yas-rail__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

/* The chevrons point along the reading direction. */
[dir="rtl"] .yas-rail__nav {
	transform: scaleX(-1);
}

@media (max-width: 900px) {
	.single-product div.product {
		padding-inline: 20px;
	}
	.single-product div.product::before {
		display: none;
	}
	.single-product div.product .summary {
		padding: 40px 0 60px;
	}
	.single-product div.product .yas-product__media {
		padding-inline-start: 0;
	}
	.yas-alsolike {
		padding-inline: 20px;
	}
}

/* --- Quantity stepper ---------------------------------------------------- */

.single-product div.product form.cart .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	width: 40px;
}

.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.yas-qty-btn {
	width: 44px;
	height: 100%;
	background: none;
	border: 0;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.yas-qty-btn--minus {
	opacity: 0.55;
}

.yas-qty-btn:hover {
	opacity: 1;
}

/* WooCommerce's own price/stock echo under the swatches is redundant — the
   heading price mirrors the selected variation instead. */
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability {
	display: none;
}


/* ------------------------------------------------- Interaction polish === */

/* These are controls, not copy: dragging across them highlighted the row. */
.yas-accordion__toggle,
.yas-swatch,
.yas-qty-btn,
.yas-cart__close,
.yas-lightbox__close,
.yas-cart-line__remove,
.yas-filter__toggle,
.yas-act {
	-webkit-user-select: none;
	user-select: none;
}

.yas-accordion__toggle:hover,
.yas-accordion__toggle:focus,
.yas-accordion__toggle:focus-visible {
	background: none;
	outline: none;
}

.yas-accordion__toggle:focus-visible span:first-child {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Close buttons: a plain thin glyph, no circle or fill ---------------- */

.yas-cart__close,
.yas-lightbox__close {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}

.yas-cart__close {
	color: var(--yas-ink);
}

.yas-cart__close svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.2;
}

.yas-lightbox__close {
	position: absolute;
	top: 24px;
	inset-inline-end: 28px;
	font-size: 30px;
	font-weight: 300;
	color: #fff;
}

.yas-cart__close:hover,
.yas-lightbox__close:hover {
	opacity: 0.6;
	background: none;
}

/* ============================================ WooCommerce brand colours === */

/* WooCommerce and Elementor both ship an accent (a magenta, #cc3366) that
   surfaced on links, focus rings and the size swatches. Retheme the variables
   they read, then cover the places that hard-code it. */
:root {
	--wc-primary: var(--yas-ink);
	--wc-primary-text: #ffffff;
	--wc-secondary: var(--yas-sand);
	--wc-secondary-text: var(--yas-ink);
	--wc-highlight: var(--yas-ink);
	--wc-content-bg: var(--yas-bg);
	--woocommerce: var(--yas-ink);
}

/* Scoped to WooCommerce's own content: the header and footer are chrome and
   must keep their own link treatment. */
.woocommerce-account .woocommerce a:not(.button):not(.yas-pill):not(.elementor-button):not(.woocommerce-MyAccount-navigation a),
.woocommerce-cart .woocommerce a:not(.button):not(.yas-pill),
.woocommerce-checkout .woocommerce a:not(.button):not(.yas-pill),
.woocommerce-privacy-policy-text a,
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: var(--yas-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce a:not(.button):not(.woocommerce-MyAccount-navigation a):hover,
.woocommerce-cart .woocommerce a:not(.button):hover,
.woocommerce-checkout .woocommerce a:not(.button):hover {
	opacity: 0.65;
}

/* Swatches keep the brand outline on hover and focus — no accent fill. */
.yas-swatch:hover,
.yas-swatch:focus,
.yas-swatch:focus-visible,
.yas-swatch.is-active {
	background: none !important;
	color: var(--yas-ink) !important;
	outline: none;
}

/* The chosen size keeps the solid outline the design uses to mark it. */
.yas-swatch.is-active {
	border-color: var(--yas-ink) !important;
}

.yas-swatch:hover {
	border-color: rgba(62, 32, 24, 0.6) !important;
}

.yas-swatch:focus-visible {
	border-color: var(--yas-ink) !important;
	box-shadow: 0 0 0 1px var(--yas-ink);
}

/* Woo's notice bars carry the same accent on their top rule. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--yas-ink);
	background: var(--yas-sand);
	color: var(--yas-ink);
}

/* ================================================= My account / forms === */

/* The account area is built from two surfaces on the page ground: a card for
   the navigation rail and a card for whatever the endpoint renders. Fields,
   notices and buttons all draw from the four tokens below, so retheming the
   whole area is a matter of changing them here. */
.woocommerce-account {
	--yas-card: #ffffff;
	--yas-field: #faf7f5;
	--yas-hair: rgba(62, 32, 24, 0.12);
	--yas-edge: rgba(62, 32, 24, 0.20);
}

.woocommerce-account .site-main,
.woocommerce-account #content {
	background: var(--yas-bg);
}

/* .woocommerce-page #page already offsets the fixed header on these pages.
   #content picks up a second offset from the interior-page rule, which is
   where the account pages' extra top space came from — drop it here. */
body.woocommerce-account #content {
	padding-top: 0;
}

/* ------------------------------------------------------------- measure --- */

/* The title lives in the theme's own header block and the panels in a sibling
   below it, so both take the same measure and gutters to line up. */
.woocommerce-account .page-header,
.woocommerce-account header.entry-header,
.woocommerce-account .woocommerce {
	max-width: 1100px;
	width: 100%;
	margin-inline: auto;
	padding-inline: 40px;
}

.woocommerce-account .page-header,
.woocommerce-account header.entry-header {
	padding-top: 44px;
	padding-bottom: 0;
	margin-block: 0;
}

.woocommerce-account .page-content {
	padding: 0;
	margin: 0;
}

.woocommerce-account .woocommerce {
	padding-top: 0;
	padding-bottom: 84px;
	margin: 0 auto;
}

/* --------------------------------------------------------------- type --- */

.woocommerce-account h1.entry-title,
.woocommerce-account .woocommerce > h2,
.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account fieldset legend {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	color: var(--yas-ink);
}

.woocommerce-account h1.entry-title {
	font-size: 38px;
	line-height: 1.15;
	text-align: center;
	width: 100%;
	margin: 0 0 26px;
}

.woocommerce-account #customer_login h2 {
	font-size: 24px;
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 20px;
	margin: 0 0 12px;
}

body.yas-lang-ar .woocommerce-account h1.entry-title,
body.yas-lang-ar .woocommerce-account #customer_login h2,
body.yas-lang-ar .woocommerce-account .woocommerce-MyAccount-content h2,
body.yas-lang-ar .woocommerce-account .woocommerce-MyAccount-content h3,
body.yas-lang-ar .woocommerce-account fieldset legend {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* ------------------------------------------------------ dashboard grid --- */

/* Woo's clearfix pseudo-elements on the container become grid items and take
   the first cell, which pushed the rail into the panel's track. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

/* Only the logged-in endpoints have a rail; the login page keeps one column. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

/* Woo prints an empty notices wrapper as the container's first child. Left to
   auto-placement it takes the rail's cell and shunts the two panels one track
   along, so it spans the full row instead — and collapses when it is empty. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Woo floats the rail and the panel at percentage widths; as grid items they
   fill their own track. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--yas-hdr-h) + 20px);
	background: var(--yas-card);
	border: 1px solid var(--yas-hair);
	border-radius: 16px;
	padding: 10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--yas-ink);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(62, 32, 24, 0.06);
	opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--yas-ink);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--yas-card);
	border: 1px solid var(--yas-hair);
	border-radius: 16px;
	padding: 34px 36px;
	font-size: 15px;
	line-height: 1.65;
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ login/register --- */

.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

/* WooCommerce's clearfix pseudo-elements become grid items and take the first
   cells, which pushed Login and Register onto separate rows. */
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after {
	content: none;
	display: none;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
	width: auto !important;
	float: none !important;
	margin: 0;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	background: var(--yas-card);
	border: 1px solid var(--yas-hair);
	border-radius: 16px;
	padding: 32px;
	margin: 0;
}

/* --------------------------------------------------------------- fields --- */

.woocommerce-account .woocommerce form .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce-EditAccountForm label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(62, 32, 24, 0.78);
	margin: 0 0 8px;
}

.woocommerce-account .woocommerce form .form-row .required {
	color: var(--yas-ink);
	opacity: 0.45;
	text-decoration: none;
	border: 0;
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	background: var(--yas-field);
	border: 1px solid var(--yas-hair);
	border-radius: 10px;
	color: var(--yas-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 50px;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.woocommerce-account textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	line-height: 1.6;
}

.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder {
	color: rgba(62, 32, 24, 0.40);
}

.woocommerce-account .woocommerce form .form-row input.input-text:hover,
.woocommerce-account input:hover,
.woocommerce-account textarea:hover,
.woocommerce-account select:hover {
	border-color: var(--yas-edge);
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
	background: var(--yas-card);
	border-color: var(--yas-ink);
	box-shadow: 0 0 0 3px rgba(62, 32, 24, 0.10);
	outline: none;
}

/* Hints under a field read as secondary. */
.woocommerce-account .woocommerce form .form-row span.description,
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account fieldset + p em {
	display: block;
	font-size: 13px;
	font-style: normal;
	color: rgba(62, 32, 24, 0.60);
	margin-top: 8px;
}

/* -------------------------------------------------------- password eye --- */

.woocommerce-account .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce-account .password-input input.input-text {
	padding-inline-end: 50px;
}

/* WooCommerce draws this with an icon font that is not loaded here, so it fell
   back to an emoji glyph. Replaced with a masked SVG that inherits colour. */
.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 15px;
	inset-inline-start: auto;
	transform: translateY(-50%);
	width: 21px;
	height: 21px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: rgba(62, 32, 24, 0.55);
	-webkit-mask: var(--yas-eye) center / 21px 21px no-repeat;
	mask: var(--yas-eye) center / 21px 21px no-repeat;
	transition: background-color 0.18s ease;
	--yas-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1.6 12S5.2 5.6 12 5.6 22.4 12 22.4 12 18.8 18.4 12 18.4 1.6 12 1.6 12Z'/><circle cx='12' cy='12' r='3.1'/></svg>");
}

.woocommerce-account .show-password-input::after,
.woocommerce-account .show-password-input::before {
	content: none !important;
	display: none !important;
}

.woocommerce-account .show-password-input:hover {
	background-color: var(--yas-ink);
}

.woocommerce-account .show-password-input.display-password {
	background-color: var(--yas-ink);
	--yas-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1.6 12S5.2 5.6 12 5.6 22.4 12 22.4 12 18.8 18.4 12 18.4 1.6 12 1.6 12Z'/><circle cx='12' cy='12' r='3.1'/><path d='M3 3l18 18'/></svg>");
}

/* ------------------------------------------------------------ fieldset --- */

.woocommerce-account fieldset {
	margin: 6px 0 20px;
	padding: 24px;
	background: var(--yas-field);
	border: 1px solid var(--yas-hair);
	border-radius: 14px;
}

.woocommerce-account fieldset legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 16px;
	font-size: 19px;
}

.woocommerce-account fieldset .form-row:last-child {
	margin-bottom: 0;
}

.woocommerce-account fieldset input.input-text {
	background: var(--yas-card);
}

/* ------------------------------------------------- account details grid --- */

.woocommerce-account form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.woocommerce-account form.woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last),
.woocommerce-account form.woocommerce-EditAccountForm > fieldset,
.woocommerce-account form.woocommerce-EditAccountForm > .clear {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last,
.woocommerce-account .woocommerce form .form-row-wide {
	width: auto !important;
	float: none !important;
	margin-inline: 0;
}

/* ----------------------------------------------------------- addresses --- */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.woocommerce-account .woocommerce-Address {
	width: auto !important;
	float: none !important;
	background: var(--yas-field);
	border: 1px solid var(--yas-hair);
	border-radius: 14px;
	padding: 24px;
}

/* Two address cards sit side by side inside the panel, so the heading and its
   edit link stack rather than fighting for one narrow row. */
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 18px;
}

.woocommerce-account .woocommerce-Address-title a {
	font-size: 13px;
}

.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	margin: 0;
}

/* ------------------------------------------------------------- notices --- */

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 18px;
	margin: 0 0 18px;
	padding: 16px 20px;
	background: var(--yas-field);
	border: 1px solid var(--yas-hair);
	border-radius: 12px;
	color: var(--yas-ink);
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
}

/* Woo positions an icon-font glyph here; without that font it rendered as a
   stray emoji, so the notices carry their message alone. */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-error::after {
	content: none !important;
	display: none !important;
}

.woocommerce-account .woocommerce-error {
	background: rgba(179, 38, 30, 0.06);
	border-color: rgba(179, 38, 30, 0.28);
}

/* ------------------------------------------------------------- buttons --- */

.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account button.woocommerce-button,
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 170px;
	height: 52px;
	padding: 0 30px;
	background: #000 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.woocommerce-account .woocommerce button[type="submit"]:hover,
.woocommerce-account button.woocommerce-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce input.button:hover {
	background: var(--yas-ink) !important;
	color: #fff !important;
	opacity: 1;
}

/* A button sitting inside a notice is a secondary action: same shape, smaller,
   and pushed to the end of the row. Woo prints it ahead of the message text
   and floats it right, so it is ordered last here to sit beside the copy
   rather than wrapping onto its own line above it. */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .woocommerce-Button,
.woocommerce-account .woocommerce-message .woocommerce-Button {
	order: 2;
	flex: 0 0 auto;
	min-width: 0;
	height: 42px;
	padding: 0 22px;
	font-size: 11px;
	margin-inline-start: auto;
	float: none !important;
}

body.yas-lang-ar .woocommerce-account .woocommerce button[type="submit"],
body.yas-lang-ar .woocommerce-account button.woocommerce-button,
body.yas-lang-ar .woocommerce-account .woocommerce-Button,
body.yas-lang-ar .woocommerce-account .woocommerce a.button {
	letter-spacing: 0 !important;
	text-transform: none;
}

/* -------------------------------------------------------- login layout --- */

/* WooCommerce puts "Remember me" and the submit button in one row. Stack them
   so the checkbox sits under the password and above the button. It carries
   `form-row` alone, without `woocommerce-form-row`. */
.woocommerce-account form.login .form-row:not(.woocommerce-form-row) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 4px 0 8px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	cursor: pointer;
}

.woocommerce-account form.login button.woocommerce-form-login__submit {
	order: 2;
	margin: 0;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--yas-ink);
	cursor: pointer;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 14px;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
	.woocommerce-account .page-header,
	.woocommerce-account header.entry-header,
	.woocommerce-account .woocommerce {
		padding-inline: 20px;
	}

	.woocommerce-account .page-header,
	.woocommerce-account header.entry-header {
		padding-top: 32px;
	}

	.woocommerce-account h1.entry-title {
		font-size: 30px;
		margin-bottom: 20px;
	}

	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 26px 22px;
	}

	.woocommerce-account .col2-set,
	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account form.woocommerce-EditAccountForm {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce-account form.woocommerce-EditAccountForm {
		gap: 0;
	}

	.woocommerce-account .woocommerce-info,
	.woocommerce-account .woocommerce-message,
	.woocommerce-account .woocommerce-error {
		flex-wrap: wrap;
	}

	.woocommerce-account .woocommerce-info .button,
	.woocommerce-account .woocommerce-message .button {
		margin-inline-start: 0;
	}
}

/* While a filter request is in flight the grid dims rather than disappearing,
   so the page keeps its height and nothing jumps under the pointer. */
ul.products.is-loading,
.yas-empty.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
	pointer-events: none;
}


/* ============================================== Empty collection === */

/* Sits between the filter bar and the footer, holding enough height that the
   page still reads as a collection rather than a mistake. */
.yas-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 96px 20px 120px;
	max-width: 520px;
	margin-inline: auto;
}

.yas-empty__title {
	margin: 0;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;
	color: var(--yas-ink);
}

body.yas-lang-ar .yas-empty__title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

.yas-empty__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(62, 32, 24, 0.7);
}

.yas-empty__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 52px;
	margin-top: 12px;
	padding: 0 32px;
	background: #000;
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.yas-empty__action:hover {
	background: var(--yas-ink);
	color: #fff;
}

body.yas-lang-ar .yas-empty__action {
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 767px) {
	.yas-empty {
		padding: 64px 20px 80px;
	}
	.yas-empty__title {
		font-size: 24px;
	}
	.yas-empty__action {
		width: 100%;
		min-width: 0;
	}
}


/* ======================================= Control states, brand-locked === */

/* The magenta only appeared on :active (mouse-down), which no stylesheet
   declared and JS cannot force — so rather than chase its origin, every
   interaction state on our own controls is declared here. */
.yas-qty-btn,
.yas-cart__close,
.yas-lightbox__close,
.yas-cart-line__remove,
.yas-accordion__toggle,
.yas-filter__toggle,
.yas-act,
.yas-swatch,
.yas-filter__apply {
	background-color: transparent !important;
	transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.yas-qty-btn:hover,
.yas-qty-btn:focus,
.yas-qty-btn:focus-visible,
.yas-qty-btn:active,
.yas-cart__close:hover,
.yas-cart__close:focus,
.yas-cart__close:focus-visible,
.yas-cart__close:active,
.yas-cart-line__remove:hover,
.yas-cart-line__remove:focus,
.yas-cart-line__remove:active,
.yas-accordion__toggle:hover,
.yas-accordion__toggle:focus,
.yas-accordion__toggle:focus-visible,
.yas-accordion__toggle:active,
.yas-filter__toggle:hover,
.yas-filter__toggle:focus,
.yas-filter__toggle:active,
.yas-swatch:active {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--yas-ink) !important;
	box-shadow: none !important;
}

/* .yas-act (search/account/cart) is deliberately left out of the block above.
   Those three sit in the header, where colour is contextual — white over the
   hero, ink on every other page — via plain inheritance. Forcing ink here on
   :hover the same way the other controls need it fought that inheritance: on
   the transparent hero, resting the pointer over an icon flipped it dark for
   as long as the pointer stayed there, reading as the icon changing colour
   rather than a hover state. Only opacity signals the hover here, which
   reads correctly against either background. */
.yas-act:hover,
.yas-act:focus,
.yas-act:focus-visible,
.yas-act:active {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* The lightbox sits on a dark scrim, so its glyph stays white throughout. */
.yas-lightbox__close:hover,
.yas-lightbox__close:focus,
.yas-lightbox__close:focus-visible,
.yas-lightbox__close:active {
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* The accordion's label was turning white on hover; only the opacity moves. */
.yas-accordion__toggle:hover span,
.yas-accordion__toggle:active span,
.yas-accordion__toggle:focus span {
	color: var(--yas-ink) !important;
}

.yas-accordion__toggle:hover {
	opacity: 0.7;
}

.yas-qty-btn:hover,
.yas-cart__close:hover,
.yas-lightbox__close:hover,
.yas-cart-line__remove:hover {
	opacity: 0.6;
}

/* Opening a panel should not leave a control looking pressed. */
.yas-cart:focus,
.yas-search:focus,
.yas-lightbox:focus {
	outline: none;
}

/* --- Breathing room between the quantity stepper and the buttons -------- */

/* WooCommerce zeroes the stepper's own margin, so the gap is set on the
   wrapper that holds the quantity and the two buttons. */
.single-product .woocommerce-variation-add-to-cart,
.single-product div.product form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.single-product .woocommerce-variation-add-to-cart .quantity {
	margin: 0 0 16px !important;
	align-self: flex-start;
}

/* Simple products post straight from form.cart with no variation wrapper. */
.single-product div.product form.cart:not(.variations_form) .quantity {
	margin: 0 0 16px !important;
	align-self: flex-start;
}


/* ------------------------------------------- Footer subscribe field === */

/* The footer is dark, so the field's text and placeholder must be light; the
   surrounding form already draws the only border. */
.yas-footer .yas-subscribe-form input,
.yas-subscribe-form input[type="email"],
.yas-subscribe-form input {
	color: #fff !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.yas-footer .yas-subscribe-form input::placeholder,
.yas-subscribe-form input::placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

.yas-subscribe-form input:focus {
	border: 0 !important;
	box-shadow: none !important;
}

/* -------------------------------------- Language switcher affordance === */

/* Only the anchor carried the pointer; the flag and caret sit in wrappers
   around it, so hovering those showed the default arrow. */
.yas-hdr-lang,
.yas-hdr-lang *,
.trp-shortcode-switcher__wrapper,
.trp-shortcode-switcher__wrapper *,
.trp-current-language-item__wrapper,
.trp-current-language-item__wrapper *,
.trp-language-item,
.trp-language-item * {
	cursor: pointer;
}


/* The drawer sits on white; keep its dividers and text tuned to that ground. */
.yas-cart__head,
.yas-cart__foot {
	border-color: rgba(62, 32, 24, 0.16);
}

.yas-cart-line {
	border-bottom-color: rgba(62, 32, 24, 0.12);
}


/* ---------------------------------- Product buttons, brand-locked === */

/* BUY IT NOW and ADD TO BAG were missing from the locked control list, so the
   stray magenta :active state still reached them. */
.yas-buynow,
.yas-buynow:hover,
.yas-buynow:focus,
.yas-buynow:focus-visible,
.yas-buynow:active {
	background-image: none !important;
	box-shadow: none !important;
}

.yas-buynow {
	background-color: transparent !important;
	color: var(--yas-ink) !important;
	border: 1px solid var(--yas-ink) !important;
}

.yas-buynow:hover,
.yas-buynow:focus-visible,
.yas-buynow:active {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart button.single_add_to_cart_button:focus,
.single-product div.product form.cart button.single_add_to_cart_button:focus-visible,
.single-product div.product form.cart button.single_add_to_cart_button:active {
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart button.single_add_to_cart_button:active {
	background-color: var(--yas-ink) !important;
}

/* The drawer's two buttons and the collection's apply control, same treatment. */
.yas-cart__view:hover, .yas-cart__view:focus, .yas-cart__view:active,
.yas-cart__checkout:hover, .yas-cart__checkout:focus, .yas-cart__checkout:active,
.yas-cart__continue:hover, .yas-cart__continue:focus, .yas-cart__continue:active,
.yas-filter__apply:hover, .yas-filter__apply:focus, .yas-filter__apply:active {
	background-image: none !important;
	box-shadow: none !important;
}

.yas-cart__view:hover, .yas-cart__view:active,
.yas-cart__continue:hover, .yas-cart__continue:active,
.yas-filter__apply:hover, .yas-filter__apply:active {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

.yas-cart__checkout:hover, .yas-cart__checkout:active {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

/* Elementor pill buttons: cover the pressed state too. */
.yas-pill .elementor-button:active,
.yas-pill .elementor-button:focus {
	background-image: none !important;
	box-shadow: none !important;
}

.yas-pill--outline .elementor-button:active {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

.yas-pill--white .elementor-button:active {
	background-color: #fff !important;
	color: var(--yas-ink) !important;
}


/* --------------------------------- Nav hit area & switcher legibility === */

/* The trigger only occupied 42px of the 88px bar, leaving a dead strip above
   the panel. Filling the bar removes that gap. */
.yas-header .hfe-nav-menu,
.yas-header .hfe-nav-menu > li,
.yas-header nav.hfe-nav-menu__layout-horizontal {
	height: 100%;
}

.yas-header .hfe-nav-menu > li {
	display: flex;
	align-items: center;
}

.yas-header .hfe-nav-menu > li > a,
.yas-header .hfe-nav-menu > li > .hfe-has-submenu-container {
	display: flex;
	align-items: center;
	height: 100%;
}



/* ================================ Parent theme reset: accent override === */

/*
 * Hello Elementor's reset.css paints every button and link with its own
 * accent, written as the shorthand `#c36` (= #cc3366):
 *
 *   [type=button],[type=submit],button { border:1px solid #c36; color:#c36 }
 *   [type=submit]:hover, button:hover  { background-color:#c36; color:#fff }
 *   a                                  { color:#c36 }
 *
 * That is the single source of the magenta that kept resurfacing. Overriding
 * it here at the same specificity (this sheet loads after the parent's)
 * removes it everywhere at once, including checkout.
 */
[type="button"],
[type="submit"],
button {
	border-color: var(--yas-ink);
	color: var(--yas-ink);
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
	background-color: var(--yas-ink);
	color: #fff;
}

a {
	color: var(--yas-ink);
}

a:active,
a:hover {
	color: var(--yas-ink);
}

/* ================================================== Cart line items === */

/* The rules between the cart rows are border-tops on the cells. WooCommerce's
   own grey was left on the header row while every row beneath it had been
   themed to ink, so the two met mid-table at different weights and colours and
   read as a broken, stepped line. One colour across the whole table settles
   it — and being set on the row, the segments cannot drift apart per cell. */
/* The header cells were still grey because the parent theme's `table td,
   table th` reset paints every cell, and WooCommerce's own `border: 0`
   shorthand for this table sits between the two — so a plain colour override
   here never reached them while the rows below resolved to ink from Woo's own
   variables. The border is restated outright rather than recoloured, and
   forced, because it is competing with a shorthand. */
.wc-block-cart-items th,
.wc-block-cart-items td,
.wc-block-cart-items__header th {
	border-top: 1px solid rgba(62, 32, 24, 0.2) !important;
	border-inline: 0 !important;
	border-bottom: 0 !important;
}

.wc-block-cart-items {
	border-bottom-color: rgba(62, 32, 24, 0.2);
}

/* The header sits above the first product, so it takes the same measure as the
   cells below rather than WooCommerce's tighter default. */
.wc-block-cart-items__header th {
	font-size: var(--yas-fs-ui);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	color: rgba(62, 32, 24, 0.7);
}


/* ============================================================ Checkout === */

.woocommerce-checkout #page,
.woocommerce-cart #page {
	padding-top: var(--yas-hdr-h);
}

.woocommerce-checkout .site-main,
.woocommerce-cart .site-main {
	background: var(--yas-bg);
}

.woocommerce-checkout h1.entry-title,
.woocommerce-cart h1.entry-title {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-weight: 400;
	font-size: 34px;
	text-align: center;
	color: var(--yas-ink);
	margin: 48px 0 40px;
}

body.yas-lang-ar .woocommerce-checkout h1.entry-title,
body.yas-lang-ar .woocommerce-cart h1.entry-title {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* Block checkout: headings, fields and the order panel on the brand. */
.wc-block-checkout__form .wc-block-components-title,
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif) !important;
	font-weight: 400 !important;
	color: var(--yas-ink) !important;
}

body.yas-lang-ar .wc-block-components-title {
	font-family: var(--yas-serif-ar, "Amiri", serif) !important;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border-radius: 0 !important;
	border-color: rgba(62, 32, 24, 0.35) !important;
	color: var(--yas-ink) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select select:focus {
	border-color: var(--yas-ink) !important;
	box-shadow: none !important;
	outline: none !important;
}

.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control input[type="radio"] {
	accent-color: var(--yas-ink);
}

/* Place Order and the summary panel. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
	background-color: #000 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 30px !important;
	height: 56px;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--yas-ink) !important;
	color: #fff !important;
}

body.yas-lang-ar .wc-block-components-checkout-place-order-button,
body.yas-lang-ar .wc-block-cart__submit-button {
	letter-spacing: 0 !important;
	text-transform: none;
}

.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid rgba(62, 32, 24, 0.18) !important;
	border-radius: 0 !important;
	background: #fff;
}

.wc-block-components-order-summary-item__image img {
	background: var(--yas-sand);
}

/* Woo's own accent shows on links inside the blocks too. */
.wc-block-components-button.is-link,
.wc-block-components-checkout-step__description a,
.wc-block-components-totals-coupon-link {
	color: var(--yas-ink) !important;
	text-decoration: underline;
}

/* ------------------------------------ Produce tile: video variant === */

/* Matches the image tiles exactly — same frame, hover caption and link. */
.yas-produce-tile--video .elementor-widget-container {
	line-height: 0;
}

.yas-produce-tile__video {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}

.yas-produce-tile__video video {
	width: 100%;
	aspect-ratio: 1121 / 1391;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

/* The video tile matches the image tiles: no zoom on hover. */
.yas-produce-tile__video video {
	transition: none;
}

.yas-produce-tile__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	color: #fff;
	font-family: var(--yas-serif, "Instrument Serif", Georgia, serif);
	font-size: 20px;
	line-height: 1.3;
	background: rgba(38, 21, 13, 0.28);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.yas-produce-tile__video:hover .yas-produce-tile__caption,
.yas-produce-tile__video:focus-visible .yas-produce-tile__caption {
	opacity: 1;
}

body.yas-lang-ar .yas-produce-tile__caption {
	font-family: var(--yas-serif-ar, "Amiri", serif);
}

/* -------------------------------------- Checkout & cart: container === */

/* The blocks render `alignwide` at full viewport width with no horizontal
   padding, so every field ran to the screen edge. Give them the page gutter. */
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart {
	max-width: 1280px !important;
	margin-inline: auto !important;
	padding: 8px 40px 80px !important;
}

/* Breathing room between the form and the order panel. */
.wc-block-checkout__main {
	padding-inline-end: 48px;
}

.wc-block-checkout__sidebar {
	padding-inline-start: 0;
}

/* Fields match the account page: no fill, ink hairline, square corners. */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-combobox input,
.woocommerce-checkout .wc-block-components-select select,
.woocommerce-checkout .wc-block-components-textarea,
.woocommerce-cart .wc-block-components-text-input input {
	background: transparent !important;
	border: 1px solid rgba(62, 32, 24, 0.35) !important;
	border-radius: 0 !important;
	min-height: 52px;
	color: var(--yas-ink) !important;
}

.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-combobox label {
	color: rgba(62, 32, 24, 0.7) !important;
}

.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-combobox input:focus,
.woocommerce-checkout .wc-block-components-select select:focus {
	border-color: var(--yas-ink) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Section headings on the brand serif, sized down from the block default. */
.woocommerce-checkout .wc-block-components-title,
.woocommerce-cart .wc-block-components-title {
	font-size: 22px !important;
	margin-block-end: 18px !important;
}

/* Order summary panel. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid rgba(62, 32, 24, 0.18) !important;
	border-radius: 0 !important;
	padding: 8px 24px !important;
}

.wc-block-components-order-summary-item__quantity {
	background: var(--yas-ink) !important;
	color: #fff !important;
	border-color: var(--yas-ink) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name {
	color: var(--yas-ink) !important;
}

/* Shipping option rows and the notes/terms area. */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
	border-radius: 0 !important;
	border-color: rgba(62, 32, 24, 0.2) !important;
}

@media (max-width: 900px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout,
	.woocommerce-cart .wp-block-woocommerce-cart {
		padding-inline: 20px !important;
	}
	.wc-block-checkout__main {
		padding-inline-end: 0;
	}
}


/* ------------------------------------------ Language switcher panel === */

/*
 * TranslatePress v2 renders two stacked copies: an in-flow `.trp-shortcode-anchor`
 * that holds the closed state, and an absolutely positioned
 * `.trp-shortcode-overlay` that expands on hover. Earlier attempts styled
 * guessed class names that do not exist in this markup, which is why the panel
 * stayed see-through. The overlay is the panel.
 */
/* The panel is absolutely positioned inside a wrapper sized to the closed
   switcher, so shrink-to-fit caps it at that footprint. Open, the current
   language's row carries a chevron the list rows below it don't, leaving its
   label less room than theirs — and because the label is a flex item with
   overflow:hidden, flexbox is free to shrink it under its own content rather
   than honouring a minimum, so "EN" truncated to "E…" while "AR" underneath
   sat comfortably. Sizing the panel to its content lets the row keep the
   width it actually needs, and keeps any longer language name safe too. */
.yas-hdr-lang .trp-shortcode-overlay {
	min-width: max-content;
	border-radius: 3px;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Closed: nothing but the flag and code, no box. */
.yas-hdr-lang .trp-shortcode-anchor {
	background: transparent !important;
}

/* The label and the chevron both opt out of `color` inheritance on their own:
   the label is painted by the plugin with `color: var(--text)` directly on
   .trp-language-item-name, and the chevron's <path> carries a presentation
   attribute `stroke="var(--text)"`. --text is a custom property TranslatePress
   writes inline on the switcher wrapper from its admin colour setting — a
   fixed ink hex that no amount of overriding `color` further up can reach.
   Both have to be pointed back at the inherited colour explicitly.

   Note the chevron rule targets the <path>, not the <svg>: the attribute sits
   on the path, so styling the svg alone leaves the drawn stroke untouched.

   And both copies are covered. TranslatePress stacks two switchers — an
   in-flow .trp-shortcode-anchor and an absolutely positioned
   .trp-shortcode-overlay on top of it — and it is the overlay that is
   actually visible; the anchor is visibility:hidden and only holds the
   layout. Styling the anchor alone changes nothing you can see. */
.yas-hdr-lang .trp-shortcode-anchor .trp-language-item-name,
.yas-hdr-lang .trp-shortcode-overlay .trp-language-item-name {
	color: inherit;
}

.yas-hdr-lang .trp-shortcode-arrow path {
	stroke: currentColor;
}

/* Open, the overlay gains the cream glass panel, so the current language and
   its chevron sit on that instead of the hero and go back to ink with the
   list below them. Keyed off the same hover/focus the glass itself uses, plus
   the plugin's own is-open class, so the colour never lags the background. */
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay .trp-language-item-name,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay .trp-language-item-name,
.yas-hdr-lang .trp-shortcode-overlay.is-open .trp-language-item-name {
	color: var(--yas-ink);
}

.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay .trp-shortcode-arrow path,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay .trp-shortcode-arrow path,
.yas-hdr-lang .trp-shortcode-overlay.is-open .trp-shortcode-arrow path {
	stroke: var(--yas-ink);
}

/* Open: the same frosted treatment as the header bar, so the options stay
   readable over photography or video. */
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay {
	--bg: rgba(233, 228, 225, 0.82);
	background: rgba(233, 228, 225, 0.82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border: 1px solid rgba(62, 32, 24, 0.12) !important;
	box-shadow: 0 14px 30px rgba(62, 32, 24, 0.16);
}

@supports not (backdrop-filter: blur(1px)) {
	.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay {
		background: rgba(233, 228, 225, 0.97) !important;
	}
}

/* Open panel: one even inset on every side.
   TranslatePress pads the panel vertically only and then insets the rows with
   a single padding-inline-end, so the chevron and the language rows ran hard
   into one border while the other side kept a 14px gap. The panel supplies the
   inset now and the rows sit inside it, which also lets the hover band be a
   contained, rounded row rather than one that bleeds to the edge.

   Scoped to the open state on purpose: this same element is what you see when
   the switcher is closed, so padding it unconditionally would resize the
   control in the header. */
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay,
.yas-hdr-lang .trp-shortcode-overlay.is-open {
	padding: 8px !important;
}

/* Every open-state rule below names .trp-shortcode-overlay explicitly.

   TranslatePress stacks two copies of the switcher inside the wrapper: the
   absolutely positioned overlay you actually see, and an in-flow anchor that
   is visibility:hidden and exists only to reserve the control's width. A
   selector like `wrapper:hover .trp-current-language-item__wrapper` matches
   the copy in BOTH — so re-padding on hover was quietly resizing the anchor,
   the row of icons beside it lost 4px, and the whole header jumped as the
   panel opened. Naming the overlay keeps the layout copy untouched. */
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay .trp-current-language-item__wrapper,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay .trp-current-language-item__wrapper,
.yas-hdr-lang .trp-shortcode-overlay.is-open .trp-current-language-item__wrapper,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay .trp-switcher-dropdown-list,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay .trp-switcher-dropdown-list,
.yas-hdr-lang .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list {
	padding: 0 !important;
}

/* The chevron lines up with the row text rather than hugging the panel edge. */
.yas-hdr-lang .trp-shortcode-switcher__wrapper:hover .trp-shortcode-overlay .trp-shortcode-arrow,
.yas-hdr-lang .trp-shortcode-switcher__wrapper:focus-within .trp-shortcode-overlay .trp-shortcode-arrow,
.yas-hdr-lang .trp-shortcode-overlay.is-open .trp-shortcode-arrow {
	margin-inline-end: 10px;
}

.yas-hdr-lang .trp-switcher-dropdown-list {
	padding-block-end: 4px;
}

/* Scoped to the open dropdown list, not the bare .trp-language-item class:
   that same class also sits on the CLOSED anchor's current-language item
   (…trp-language-item__current, in .trp-shortcode-anchor), and painting it
   ink here forced the "EN" label dark even on the transparent hero, breaking
   from the search/account/cart icons beside it, which correctly go white
   there. The dropdown's own items always need the dark, readable-on-cream
   treatment; the closed label should keep following the header's colour like
   everything else in the row. */
.yas-hdr-lang .trp-switcher-dropdown-list .trp-language-item {
	padding: 7px 10px !important;
	border-radius: 6px;
	color: var(--yas-ink) !important;
}

.yas-hdr-lang .trp-switcher-dropdown-list .trp-language-item:hover {
	background: rgba(62, 32, 24, 0.07) !important;
}

/* The current row matches the ones below it, so the two read as one list. */
.yas-hdr-lang .trp-shortcode-overlay .trp-current-language-item__wrapper .trp-language-item {
	padding: 7px 10px !important;
	border-radius: 6px;
}