/* ============================================================
 * Stelabela — Sumilux-style overrides (WooCommerce product cards,
 * category tabs, pill buttons, testimonials polish).
 * ============================================================ */

/* ---------- Product loop cards (shop + home [products]) ---------- */
/* Tight CSS grid — 10px gap between products on both axes. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	gap: 10px !important;
	margin: 0 0 10px !important;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products.columns-1,.woocommerce-page ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2,.woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2,1fr); }
.woocommerce ul.products.columns-3,.woocommerce-page ul.products.columns-3 { grid-template-columns: repeat(3,1fr); }
.woocommerce ul.products.columns-4,.woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4,1fr); }
.woocommerce ul.products.columns-5,.woocommerce-page ul.products.columns-5 { grid-template-columns: repeat(5,1fr); }
.woocommerce ul.products.columns-6,.woocommerce-page ul.products.columns-6 { grid-template-columns: repeat(6,1fr); }
@media (max-width: 768px){
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] { grid-template-columns: repeat(2,1fr); }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
	position: relative;
}
.woocommerce ul.products li.product a img {
	width: 100%;
	height: 450px;
	object-fit: cover;
	display: block;
	box-shadow: none;
	margin: 0 0 16px;
	transition: transform .6s ease;
	background: #fff;
}
.woocommerce ul.products li.product .stl-media {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.05);
}

/* category label above the title */
.woocommerce ul.products li.product .stl-cat {
	display: block;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a8a8a8;
	margin-bottom: 6px;
	font-weight: 600;
}

/* title */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "DM Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #222 !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
}

/* rating always visible, centered */
.woocommerce ul.products li.product .star-rating {
	margin: 0 auto 8px;
	font-size: 13px;
	color: #D96D8F;
}

/* price */
.woocommerce ul.products li.product .price {
	color: #222 !important;
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
}
.woocommerce ul.products li.product .price del {
	color: #a8a8a8 !important;
	font-weight: 400;
	margin-inline-end: 6px;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: #D96D8F !important;
}

/* sale flash → circular badge */
.woocommerce span.onsale {
	min-height: 44px;
	min-width: 44px;
	line-height: 44px;
	border-radius: 50%;
	background: #D96D8F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 0;
	top: 12px;
	inset-inline-start: 12px;
	margin: 0;
	position: absolute;
	z-index: 3;
}

/* add-to-cart as a hover overlay pill on the image */
.woocommerce ul.products li.product .stl-media .button,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_simple {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 12px);
	opacity: 0;
	visibility: hidden;
	transition: all .35s ease;
	background: #fff !important;
	color: #111 !important;
	border-radius: 40px !important;
	padding: 12px 26px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .5px;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 4;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product:hover .button {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.woocommerce ul.products li.product .button:hover {
	background: #C2557A !important;
	color: #fff !important;
}

/* floating action icons (visual only) top-right on hover */
.stl-actions {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateX(10px);
	transition: all .35s ease;
	z-index: 4;
}
.woocommerce ul.products li.product:hover .stl-actions { opacity: 1; transform: translateX(0); }
.stl-actions a {
	width: 38px; height: 38px; border-radius: 50%;
	background: #fff; color: #222;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	font-size: 14px;
}
.stl-actions a:hover { background: #C2557A; color: #fff; }

/* ---------- Pure-CSS category tabs (no JS dependency) ---------- */
.stl-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.stl-tabs .stl-tab-nav {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 28px;
	border-bottom: 1px solid #ececec;
	padding-bottom: 14px;
}
.stl-tabs .stl-tab-nav label {
	cursor: pointer;
	font-family: "Cardo", serif;
	font-size: 22px;
	font-weight: 700;
	color: #bdbdbd;
	transition: color .25s ease;
}
.stl-tabs .stl-tab-nav label:hover { color: #666; }
.stl-tabs .stl-panel { display: none; }
#stab-men:checked   ~ .stl-tab-panels .panel-men,
#stab-women:checked ~ .stl-tab-panels .panel-women,
#stab-kid:checked   ~ .stl-tab-panels .panel-kid { display: block; }
#stab-men:checked   ~ .stl-tab-nav label[for="stab-men"],
#stab-women:checked ~ .stl-tab-nav label[for="stab-women"],
#stab-kid:checked   ~ .stl-tab-nav label[for="stab-kid"] { color: #111; }

/* ---------- Category cards ---------- */
.stl-cat-tabs .cat-cards,
.cat-cards {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.cat-card {
	flex: 1;
	min-width: 220px;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}
.cat-card img {
	width: 100%;
	display: block;
	transition: transform .6s ease;
}
.cat-card:hover img { transform: scale(1.06); }
.cat-card .cat-pill {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	background: #f6cbdd;
	color: #111;
	padding: 9px 15px;
	border-radius: 40px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cat-card .cat-pill:hover { background:#C2557A; color:#fff; }

/* make Elementor Tabs titles look like Sumilux (centered, minimal) */
.stl-cat-tabs .elementor-tabs-wrapper {
	justify-content: center;
	border: none;
}
.stl-cat-tabs .elementor-tab-title {
	border: none !important;
	font-family: "Cardo", serif;
	font-size: 22px;
	font-weight: 700;
	color: #bbb;
	padding: 6px 22px !important;
}
.stl-cat-tabs .elementor-tab-title.elementor-active { color: #111 !important; }
.stl-cat-tabs .elementor-tab-content { border: none !important; padding: 26px 0 0 !important; }
.stl-cat-tabs .elementor-tabs-content-wrapper { border: none !important; }
/* Fallback: show the first tab's content until Elementor's JS marks an active tab. */
.stl-cat-tabs .elementor-tabs:not(:has(.elementor-tab-content.elementor-active)) .elementor-tab-content[data-tab="1"] {
	display: block !important;
}

/* ---------- Header actions (circular icons + login/register) ---------- */
/* lay the header actions column out as one inline row (target the wrap that holds the cart) */
.elementor-location-header .elementor-widget-wrap:has(.elementor-menu-cart) {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 12px;
}
.elementor-location-header .elementor-widget-wrap:has(.elementor-menu-cart) > .elementor-widget {
	width: auto !important;
	margin: 0 !important;
}
.stl-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
}
.stl-header-actions .stl-hicon {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #111;
	font-size: 17px;
	transition: all .25s ease;
}
.stl-header-actions .stl-hicon:hover { background: #C2557A; color: #fff; }
.stl-header-actions .stl-badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	border-radius: 50%;
	background: #D96D8F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}
.stl-header-actions .stl-auth {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f4f4f4;
	border-radius: 40px;
	padding: 11px 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.stl-header-actions .stl-auth a { color: #111; }
.stl-header-actions .stl-auth a:hover { color: #D96D8F; }
.stl-header-actions .stl-auth span { color: #ccc; }

/* style Elementor's menu-cart toggle into a matching circle (hide the price) */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text,
.elementor-location-header .elementor-menu-cart__toggle .amount { display: none !important; }
.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	width: 44px; height: 44px; border-radius: 50% !important;
	background: #fff !important; box-shadow: 0 6px 18px rgba(0,0,0,.08);
	padding: 0 !important; min-width: 0 !important; border: none !important;
	display: inline-flex !important; align-items: center; justify-content: center;
}
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon { font-size: 17px; color: #111; margin: 0; }
.elementor-location-header .elementor-menu-cart { line-height: 1; }
.elementor-location-header .elementor-menu-cart__toggle { margin: 0; }

/* nav-menu dropdown carets already handled by Elementor; give menu spacing */
.elementor-nav-menu .elementor-item { font-weight: 600; }

/* ---------- Testimonials ---------- */
.stl-testi-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 34px;
	flex-wrap: wrap;
	gap: 16px;
}
.stl-testi-head .eyebrow {
	color: #D96D8F; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.stl-testi-head h2 {
	font-family: "Cardo", serif; font-size: 34px; font-weight: 700; color: #222; margin: 6px 0 0;
}
.stl-viewall {
	display: inline-flex; align-items: center; gap: 8px;
	background: #C2557A; color: #fff; border-radius: 40px; padding: 13px 26px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.stl-viewall:hover { background: #D96D8F; color: #fff; }
.stl-testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.stl-tcard {
	background: #fff; border-radius: 8px; padding: 34px 32px;
	box-shadow: 0 12px 40px rgba(0,0,0,.05); position: relative;
}
.stl-tcard-top { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 18px; }
.stl-tcard-top img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.stl-tcard-top h5 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 700; color: #222; }
.stl-tcard-top span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #a8a8a8; }
.stl-tcard .stl-quote { margin-inline-start: auto; font-family: Georgia, serif; font-size: 60px; line-height: 1; color: #ececec; }
.stl-tcard .stl-stars { color: #111; letter-spacing: 3px; margin-bottom: 12px; }
.stl-tcard h4 { font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 700; color: #222; margin: 0 0 10px; }
.stl-tcard p { color: #666; font-size: 14px; line-height: 1.7; margin: 0; }
@media (max-width: 767px){ .stl-testi-grid { grid-template-columns: 1fr; } }

/* ---------- Pill buttons (Shop all product etc.) ---------- */
.stl-pill .elementor-button {
	border-radius: 40px !important;
	padding: 14px 32px !important;
	font-size: 12px !important;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* ============================================================
   Custom header built with NATIVE Elementor widgets.
   Only the pixel styling (circles, shadows, badges, auth pill,
   promo overlay, marquee animation) lives here; structure/text
   stay editable as real widgets in the Elementor editor.
   ============================================================ */
.elementor-location-header { --c-red:#D96D8F; --c-yellow:#E9C46A; --c-black:#141414; --c-gray:#5b5b5b; }

/* Header follows the site's RTL direction (logo right, menu centre, icons/auth left). */
.elementor-location-header { direction: rtl; }
/* Section/column _css_classes don't render here, so target the nav-bar row by
   the widget it contains (:has). Logo & icon columns hug their side; the menu
   column grows and centres its items. */
.elementor-location-header .elementor-top-section:has(> .elementor-container > .elementor-column .elementor-widget-nav-menu) > .elementor-container > .elementor-column {
	width: auto !important; flex: 0 0 auto !important;
}
.elementor-location-header .elementor-top-section:has(> .elementor-container > .elementor-column .elementor-widget-nav-menu) > .elementor-container > .elementor-column:has(.elementor-widget-nav-menu) {
	flex: 1 1 auto !important;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu { justify-content: center; }

/* promo band (:has the promo button): text left, button right, arrow after text */
.elementor-location-header .elementor-top-section:has(.stl-promo-btn) > .elementor-container { justify-content: space-between; }
.elementor-location-header .elementor-top-section:has(.stl-promo-btn) > .elementor-container > .elementor-column { width: auto !important; flex: 0 0 auto !important; }
.elementor-location-header .stl-promo-btn .elementor-button-content-wrapper { display: inline-flex; flex-direction: row; align-items: center; }
.elementor-location-header .stl-promo-btn .elementor-button-text { order: 1; }
.elementor-location-header .stl-promo-btn .elementor-button-icon { order: 2; margin: 0 9px 0 0 !important; }

/* nav-menu: active item bold + dark, others dark-gray */
.elementor-location-header .elementor-nav-menu .elementor-item { text-transform: uppercase; font-weight: 600; letter-spacing: .4px; }
.elementor-location-header .elementor-nav-menu .elementor-item-active { font-weight: 700 !important; }
/* menu carets removed (flat menu, no submenus — user request 2026-07-23) */
.elementor-location-header nav.elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item::after {
	content: none !important;
}
/* hide Elementor's own submenu indicators too */
.elementor-location-header .elementor-nav-menu .sub-arrow,
.elementor-location-header nav.elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item > .sub-arrow { display: none !important; }

/* circular icon widgets (search / wishlist / cart) */
.elementor-location-header .stl-hicon .elementor-icon {
	width: 46px; height: 46px; border-radius: 50%; background: #FFF9FA;
	box-shadow: 0px 0px 6px 1px #00000024;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px; color: var(--c-black); transition: transform .2s;
}
.elementor-location-header .stl-hicon .elementor-icon:hover { transform: translateY(-2px); }
.elementor-location-header .stl-hicon .elementor-icon-wrapper { position: relative; display: inline-block; line-height: 0; }
/* red "0" badge on wishlist (static) — the CART badge is a real span kept live below */
.elementor-location-header .stl-badge .elementor-icon-wrapper::after {
	content: "0"; position: absolute; top: -3px; right: -3px;
	min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
	background: var(--c-red); color: #fff; font-size: 11px; font-weight: 700;
	line-height: 18px; text-align: center;
}
/* cart: real live count (WooCommerce fragments update span.stl-cart-count) */
.elementor-location-header .elementor-column:has(.elementor-icon[href*="/cart"]) .stl-badge .elementor-icon-wrapper::after { content: none; }
.elementor-location-header .stl-badge .elementor-icon-wrapper .stl-cart-count {
	position: absolute; top: -3px; right: -3px;
	min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
	background: var(--c-red); color: #fff; font-size: 11px; font-weight: 700;
	line-height: 18px; text-align: center; display: inline-block;
}

/* auth pill (inner-section wrapping Login + Register buttons) */
.elementor-location-header .stl-authpill > .elementor-container {
	background: #f1f1f1; border-radius: 40px; padding: 5px;
}
.elementor-location-header .stl-login .elementor-button {
	background: #fff; color: var(--c-black); border-radius: 34px;
	box-shadow: 0 2px 8px rgba(0,0,0,.10); font-weight: 700; font-size: 13px;
	letter-spacing: .5px; padding: 11px 24px;
}
.elementor-location-header .stl-reg .elementor-button {
	background: transparent; color: #7a7a7a; font-weight: 700; font-size: 13px;
	letter-spacing: .5px; padding: 11px 22px; box-shadow: none;
}
.elementor-location-header .stl-reg .elementor-button:hover { color: var(--c-black); }

/* black promo banner */
.elementor-location-header .stl-promo .txt-yellow,
.elementor-location-header .stl-promo b { color: var(--c-yellow); }
.elementor-location-header .stl-promo-btn .elementor-button {
	background: transparent; border: 1px solid rgba(255,255,255,.55);
	border-radius: 40px; color: #fff; font-weight: 600; padding: 13px 28px;
}
.elementor-location-header .stl-promo-btn .elementor-button:hover { background: #fff; color: #111; }
.elementor-location-header .stl-promo-btn .elementor-button .elementor-button-icon i,
.elementor-location-header .stl-promo-btn .elementor-button .elementor-button-icon svg {
	color: var(--c-red); fill: var(--c-red); transform: rotate(-45deg);
}

/* auto-scrolling marquee */
/* Track direction stays LTR so the translateX animation is stable, but each
   text unit is RTL so the Arabic sentence (incl. the $ sign) reads correctly. */
.stl-marquee { direction: ltr; }
.stl-marquee .elementor-widget-container { overflow: hidden; direction: ltr; }
.stl-mq-track {
	direction: ltr;
	display: inline-flex; align-items: center; white-space: nowrap;
	will-change: transform; animation: stlMq 32s linear infinite;
	animation-direction: reverse; /* scroll left → right */
}
/* pink marquee band (so the white text below reads clearly) */
.elementor-top-section:has(.stl-marquee) { background: #F6CBDD !important; }
.elementor-top-section:has(.stl-marquee) > .elementor-container { background: transparent !important; }
.stl-mq-track .t { direction: rtl; unicode-bidi: isolate; }
.stl-mq-track .t {
	color: #8E3A59; font-size: 12px; font-weight: 600; letter-spacing: 2px;
	text-transform: uppercase; padding: 0 22px;
}
.stl-mq-track .dot { width: 5px; height: 5px; border-radius: 50%; background: #8E3A59; display: inline-block; }
.stl-mq-track .fa-bolt { color: #8E3A59; font-size: 12px; padding: 0 22px; }
@keyframes stlMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* responsive: keep the nav-bar row inline (logo | menu-hamburger | icons | auth),
   let the nav-menu widget use its own hamburger instead of stacking columns */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu { justify-content: flex-start; }
	.elementor-location-header .stl-hicon .elementor-icon { width: 42px; height: 42px; font-size: 15px; }
	.elementor-location-header .elementor-column:has(.stl-login) { display: none; } /* hide auth pill */
	.elementor-location-header .elementor-top-section:has(.stl-promo-btn) > .elementor-container { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
	.elementor-location-header .elementor-column:has(.stl-search) { display: none; }
}

/* ---------- Mobile header (match Sumilux mobile) ---------- */
@media (max-width: 767px) {
	/* promo band: text (small, centered) with the Learn More pill below it.
	   Desktop rule pins the columns to flex:0 0 auto/max-content → the heading
	   overflowed the viewport; stack + shrink them here. */
	.elementor-location-header .elementor-top-section:has(.stl-promo-btn) > .elementor-container {
		flex-direction: column; align-items: center; gap: 14px;
	}
	.elementor-location-header .elementor-top-section:has(.stl-promo-btn) > .elementor-container > .elementor-column {
		width: 100% !important; flex: 0 1 auto !important; max-width: 100%;
	}
	.elementor-location-header .elementor-top-section:has(.stl-promo-btn) .elementor-widget-heading .elementor-heading-title {
		font-size: 13px !important; line-height: 1.5; text-align: center;
	}
	.elementor-location-header .elementor-top-section:has(.stl-promo-btn) .elementor-widget-heading .elementor-widget-container { text-align: center; }
	.elementor-location-header .stl-promo-btn .elementor-button-wrapper { text-align: center; }
	.elementor-location-header .stl-promo-btn .elementor-button { padding: 12px 26px; font-size: 13px; }

	/* nav row: logo centered; hamburger pinned right (RTL mirror of Sumilux),
	   search circle beside it; wishlist/cart circles move to the bottom bar */
	.elementor-location-header .elementor-top-section:has(.elementor-widget-nav-menu) > .elementor-container { position: relative; justify-content: center; min-height: 60px; }
	/* keep the CART circle (badge) — pinned to the far (left) side like the reference; wishlist stays in the bottom bar */
	.elementor-location-header .elementor-column:has(.stl-hicon):not(:has(.stl-search)):not(:has(.elementor-icon[href*="/cart"])) { display: none !important; }
	.elementor-location-header .elementor-column:has(.stl-hicon .elementor-icon[href*="/cart"]) { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: auto !important; }
	.elementor-location-header .elementor-top-section:has(.elementor-widget-nav-menu) .elementor-widget-image img { max-width: 140px; }
	/* long selector on purpose: must out-rank the desktop `width:auto !important` nav-row rule */
	.elementor-location-header .elementor-top-section:has(> .elementor-container > .elementor-column .elementor-widget-nav-menu) > .elementor-container > .elementor-column:has(.elementor-widget-nav-menu) {
		position: absolute; top: 50%; transform: translateY(-50%); right: 8px; width: 44px !important; flex: 0 0 44px !important;
	}
	/* mobile header icons inside a light-grey circle */
	.elementor-location-header .elementor-menu-toggle {
		background: #FFF9FA !important; border-radius: 50%; width: 42px; height: 42px;
		box-shadow: 0px 0px 6px 1px #00000024;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.elementor-location-header .elementor-column:has(.stl-search) { display: flex !important; position: absolute; top: 50%; transform: translateY(-50%); right: 56px; }
	.elementor-location-header .stl-hicon .elementor-icon {
		box-shadow: 0px 0px 6px 1px #00000024; background: #FFF9FA; border-radius: 50%; width: 42px; height: 42px;
		display: inline-flex; align-items: center; justify-content: center;
	}
	/* Elementor's own dropdown is replaced by the .stl-mmenu off-canvas panel
	   (its UL is cloned from this hidden container, so items stay editor-managed) */
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown { display: none !important; }

	/* press: keep the 3 brand logos on one row like the reference
	   (direct-child :has so the outer column that merely CONTAINS the inner
	   section is not squeezed too) */
	.elementor-inner-section:has(img[src*="brand-"]) > .elementor-container { display: flex; flex-wrap: nowrap; }
	.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image img[src*="brand-"]),
	.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget-image img[src*="brand-"]) { width: 33.33% !important; }
	.elementor-column:has(> .elementor-widget-wrap > .elementor-element img[src*="brand-"]) img { max-width: 100px; }

	/* benefits: media-object rows (icon on the inline-start = right in RTL, text beside it).
	   Each benefit is ONE image-box widget, so flex its wrapper. */
	.elementor-element-89e9fcf .elementor-image-box-wrapper { display: flex; align-items: flex-start; gap: 16px; text-align: right; }
	.elementor-element-89e9fcf .elementor-image-box-img { flex: 0 0 44px; width: 44px !important; margin: 0 !important; }
	.elementor-element-89e9fcf .elementor-image-box-img img { width: 44px; height: auto; }
	.elementor-element-89e9fcf .elementor-image-box-title { font-size: 17px; margin: 0 0 6px; text-align: right; }
	.elementor-element-89e9fcf .elementor-image-box-description { font-size: 13px; text-align: right; }
	.elementor-element-89e9fcf .elementor-column { margin-bottom: 10px; }

	/* category tabs: one card per view, horizontal swipe with next-card peek */
	.stl-tabs .cat-cards { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
	.stl-tabs .cat-cards > * { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; }

	/* curated outfits: horizontal list cards (image on the right in RTL) like the reference */
	.elementor-element-c66ddf1 ul.products { display: block !important; }
	.elementor-element-c66ddf1 ul.products > li.product {
		display: grid !important; grid-template-columns: 40% 1fr; column-gap: 16px;
		width: 100% !important; margin: 0 0 14px !important; background: #fff;
		align-content: center; padding: 0 !important;
	}
	.elementor-element-c66ddf1 ul.products > li.product > .stl-media { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
	.elementor-element-c66ddf1 ul.products > li.product > *:not(.stl-media) { grid-column: 2; text-align: right; margin-right: 0; }
	.elementor-element-c66ddf1 ul.products > li.product > *:first-child { margin-top: 10px; }

	/* weekly trending: keep the 2x2 image grid; tighten summary padding */
	.elementor-column:has(.wk-summary-name) { padding: 0 15px !important; }

	/* room for the fixed bottom bar */
	body { padding-bottom: 62px; }
}

/* ---------- Mobile fixed bottom nav (Sumilux 'rbb-mobile-navigation' equivalent) ---------- */
.stl-mbar { display: none; }
@media (max-width: 767px) {
	.stl-mbar {
		position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
		display: grid; grid-template-columns: repeat(3, 1fr);
		background: #fff; border-top: 1px solid #e8e8e8;
		padding: 9px 0 max(9px, env(safe-area-inset-bottom));
	}
	.stl-mbar a {
		display: flex; flex-direction: column; align-items: center; gap: 5px;
		color: #555; font-size: 11px; line-height: 1; text-decoration: none;
	}
	.stl-mbar a + a { border-inline-start: 1px solid #efefef; }
	.stl-mbar a i { font-size: 17px; color: #222; }
	.stl-mbar a.act, .stl-mbar a.act i { color: #000; font-weight: 700; }
}

/* Hide YITH's own auto-added loop buttons — we render our own icons inside .stl-actions.
   Only target buttons placed directly in the product <li> (YITH's), not ours (deeper). */
.woocommerce ul.products li.product > .yith-wcqv-button,
.woocommerce ul.products li.product > .yith-wcwl-add-to-wishlist,
.woocommerce ul.products li.product > .yith-wcwl-wishlistexistsbrowse,
.woocommerce ul.products li.product > .yith-wcwl-wishlistaddedbrowse,
.woocommerce ul.products li.product > .yith-wcqv-size { display: none !important; }
/* Remove the compare button/icon from product cards entirely (user request). */
.woocommerce ul.products li.product .compare.button,
.woocommerce ul.products li.product .stl-compare,
.woocommerce ul.products li.product .yith-compare,
.woocommerce ul.products li.product a.compare { display: none !important; }
/* keep our action icons circular even with YITH classes/added markup */
.stl-actions a i { pointer-events: none; }
.stl-actions .yith-wcwl-add-to-wishlist { margin: 0; }

/* ---------- Hero: native Elementor "Slides" widget polish (.stl-hero-slides) ----------
   Real Slides DOM: .swiper-slide-inner > .swiper-slide-contents > heading/description/button.
   Constrain content to a 1320 box and push it to the RIGHT (RTL cross-start = flex-start),
   put the eyebrow(description) above the title(heading), CTA = solid black pill. */
.stl-hero-slides .swiper-slide-inner { align-items: center; }
/* Elementor's slides JS can leave contents inline display:none — force visible on ALL sizes */
.stl-hero-slides .swiper-slide-contents { display: flex !important; }
.stl-hero-slides .swiper-slide-contents {
	width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px;
	display: flex; flex-direction: column; align-items: flex-start; text-align: right;
}
.stl-hero-slides .elementor-slide-heading { max-width: 470px; margin: 0 0 28px; }
.stl-hero-slides .elementor-slide-description { order: -1; max-width: 470px; margin: 0 0 14px; }
.stl-hero-slides .elementor-slide-button {
	align-self: flex-start;
	background: #C2557A !important; color: #fff !important; border: 0 !important;
	border-radius: 40px; padding: 15px 34px; font-family: "DM Sans", sans-serif;
	font-weight: 600; font-size: 15px; transition: background .3s;
}
.stl-hero-slides .elementor-slide-button:hover { background: #D96D8F !important; }
/* arrows / dots polish */
.stl-hero-slides .elementor-swiper-button {
	color: #111; background: rgba(255,255,255,.9); width: 46px; height: 46px; border-radius: 50%;
	display: flex !important; align-items: center; justify-content: center; /* centre the chevron in the circle */
}
.stl-hero-slides .elementor-swiper-button i,
.stl-hero-slides .elementor-swiper-button svg { margin: 0 !important; font-size: 15px; line-height: 1; }
.stl-hero-slides .elementor-swiper-button:hover { background: #fff; color: #D96D8F; }
.stl-hero-slides .swiper-pagination-bullet-active { background: #C2557A; }
@media (max-width: 767px) {
	/* Elementor's slides JS leaves the contents inline display:none on mobile — force them visible.
	   Reference mobile hero is start-aligned (mirrored: right in RTL), not centered. */
	.stl-hero-slides .swiper-slide-contents { display: flex !important; align-items: flex-start !important; text-align: right !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px 0 12px !important; }
	.stl-hero-slides .elementor-slide-heading,
	.stl-hero-slides .elementor-slide-description { max-width: 100% !important; width: 100% !important; overflow-wrap: break-word; word-break: break-word; }
	.stl-hero-slides .elementor-slide-heading { font-size: 34px !important; }
	.stl-hero-slides .elementor-slide-button { align-self: flex-start !important; }
	/* hide the hero prev/next arrows on phones */
	.stl-hero-slides .elementor-swiper-button { display: none !important; }
}

/* ---------- Testimonials (Reviews widget): bleed the carousel to the screen edge ----------
   The widget sits in a boxed 1380 container, so the 3rd (peeking) card was clipped at the
   container edge leaving a blank strip beside it. Let slides overflow toward the inline-end
   (left, since the site is RTL) up to the viewport edge, while still clipping at the
   container's start edge so loop-duplicate slides never show on the other side. */
@media (min-width: 1024px) { /* only where slides_per_view is 2.3 (the peeking card) */
	.stl-reviews .swiper,
	.stl-reviews .swiper-container {
		overflow: visible !important;
		clip-path: inset(-180px 0px -80px -100vw); /* top(-180 keeps the -116px arrows visible) / start / bottom / end(-100vw = left bleed) */
	}
	/* keep the bleeding slides from creating a horizontal page scrollbar */
	.elementor-section:has(.stl-reviews) { overflow: hidden; }
}

/* ---------- Mobile off-canvas menu (Sumilux style, mirrored for RTL) ---------- */
.stl-mmenu { display: none; }
@media (max-width: 767px) {
	.stl-mmenu { display: block; position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
	.stl-mmenu-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
	.stl-mmenu-panel {
		position: absolute; top: 0; bottom: 0; right: 0; width: 86%; max-width: 360px;
		background: #fff; transform: translateX(100%); transition: transform .35s ease;
		display: flex; flex-direction: column; overflow-y: auto; padding: 0 22px 26px;
	}
	body.stl-mmenu-open .stl-mmenu { pointer-events: auto; }
	body.stl-mmenu-open .stl-mmenu-overlay { opacity: 1; }
	body.stl-mmenu-open .stl-mmenu-panel { transform: none; }
	body.stl-mmenu-open { overflow: hidden; }

	/* header row: X + search icon (right in RTL), logo centre, cart left */
	.stl-mmenu-head { display: flex; align-items: center; gap: 16px; padding: 18px 0 14px; }
	.stl-mmenu-close, .stl-mmenu-head .stl-mmenu-cart { background: none; border: 0; padding: 4px; color: #111; font-size: 19px; line-height: 1; cursor: pointer; }
	.stl-mmenu-logo { margin: 0 auto; }
	.stl-mmenu-logo img { max-width: 128px; display: block; }
	.stl-mmenu-cart { position: relative; }
	.stl-mmenu-cart .stl-cart-count {
		position: absolute; top: -7px; left: -8px; background: #D96D8F; color: #fff;
		font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center; padding: 0 3px;
	}

	/* search pill */
	.stl-mmenu-search { position: relative; margin: 10px 0 20px; }
	.stl-mmenu-search input[type=search] {
		width: 100%; background: #f3f3f3; border: 0; border-radius: 28px;
		padding: 15px 44px 15px 44px; font-size: 12px; letter-spacing: 1px; color: #333;
	}
	.stl-mmenu-search input[type=search]::placeholder { color: #a9a9a9; text-transform: uppercase; }
	.stl-mmenu-search .stl-ms-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 17px; color: #a9a9a9; font-size: 14px; pointer-events: none; }
	.stl-mmenu-search button { position: absolute; top: 50%; transform: translateY(-50%); left: 8px; background: none; border: 0; color: #444; font-size: 15px; padding: 8px; cursor: pointer; }

	/* menu list (cloned from the Elementor nav-menu widget) */
	.stl-mmenu-nav ul { list-style: none; margin: 0; padding: 0; }
	.stl-mmenu-nav > ul > li { position: relative; }
	.stl-mmenu-nav > ul > li > a {
		display: block; padding: 15px 0; color: #111; font-weight: 700; font-size: 14px;
		letter-spacing: .5px; text-transform: uppercase; text-align: right;
	}
	.stl-mmenu-nav a:hover { color: #D96D8F; }
	.stl-mmenu-nav .sub-arrow { display: none; } /* Elementor's own caret */
	/* decorative chevron on the far (left) side, like the reference's ">" */
	.stl-mmenu-nav > ul > li > a::after {
		content: "\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900;
		font-size: 11px; color: #b9b9b9; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
	}
	.stl-mmenu-nav li.has-sub > .stl-subtoggle {
		position: absolute; left: 0; top: 7px; width: 34px; height: 34px;
		background: none; border: 0; color: #b9b9b9; font-size: 11px; cursor: pointer; z-index: 2;
	}
	.stl-mmenu-nav li.has-sub > a::after { content: none; } /* toggle replaces the decorative chevron */
	.stl-mmenu-nav li.has-sub.sub-open > .stl-subtoggle i { transform: rotate(-90deg); }
	.stl-mmenu-nav li.has-sub > .stl-subtoggle i { transition: transform .25s; }
	.stl-mmenu-nav li ul { display: none; padding: 0 14px 8px 0; }
	.stl-mmenu-nav li.sub-open > ul { display: block; }
	.stl-mmenu-nav li ul a { display: block; padding: 9px 0; color: #555; font-size: 13px; font-weight: 400; text-align: right; }

	/* contact + social footer */
	.stl-mmenu-foot { margin-top: auto; padding-top: 30px; }
	.stl-mmenu-foot p { margin: 0 0 10px; font-size: 14px; color: #333; text-align: right; }
	.stl-mmenu-foot p b { color: #111; }
	.stl-mmenu-social { display: flex; gap: 10px; margin-top: 16px; }
	.stl-mmenu-social a {
		width: 38px; height: 38px; border-radius: 50%; background: #C2557A; color: #fff;
		display: flex; align-items: center; justify-content: center; font-size: 14px;
	}
	.stl-mmenu-social a:hover { background: #D96D8F; color: #fff; }
}

/* ---------- Logged-in header: "HI, USER | LOGOUT" pill replaces Register/Login ---------- */
body.logged-in .elementor-location-header .elementor-column:has(.stl-login) > .elementor-widget-wrap > *:not(.stl-account-pill) { display: none !important; }
.stl-account-pill {
	display: inline-flex; align-items: center;
	background: #f1f1f1; border-radius: 40px; padding: 5px;
	white-space: nowrap;
}
.stl-account-pill .stl-acc-name {
	background: #fff; color: #141414; border-radius: 34px;
	box-shadow: 0 2px 8px rgba(0,0,0,.10); font-weight: 700; font-size: 13px;
	letter-spacing: .5px; padding: 11px 24px; text-transform: uppercase;
	transition: .25s ease;
}
.stl-account-pill .stl-acc-name:hover { background: #C2557A; color: #fff; }
.stl-account-pill .stl-acc-logout {
	color: #7a7a7a; font-weight: 700; font-size: 13px;
	letter-spacing: .5px; padding: 11px 22px; text-transform: uppercase;
	transition: color .25s ease;
}
.stl-account-pill .stl-acc-logout:hover { color: #D96D8F; }

/* ---------- Thmanyah (Arabic site font) ---------- */
@font-face {
	font-family: 'Thmanyah';
	src: url('fonts/thmanyahsans-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Thmanyah';
	src: url('fonts/thmanyahsans-Medium.otf') format('opentype');
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Thmanyah';
	src: url('fonts/thmanyahseriftext-Bold.otf') format('opentype');
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}
/* apply everywhere (replaces DM Sans / Cardo / Lama Sans) */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-button,
.elementor-slide-heading, .elementor-slide-description, .elementor-slide-button,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.elementor-testimonial__name, .stl-rev-headline,
.product-main-title .elementor-heading-title,
.product-main-price .price,
.elementor-accordion .elementor-accordion-title,
.elementor-toggle .elementor-toggle-title,
.elementor-tab-title, .elementor-tab-content,
.elementor-nav-menu, .elementor-nav-menu a {
	font-family: 'Thmanyah', 'DM Sans', sans-serif !important;
}

/* ---------- Arabic typography fixes ----------
   letter-spacing breaks connected Arabic glyphs — zero it everywhere. */
body *, .elementor-heading-title, .elementor-button, .stl-mq-track .t {
	letter-spacing: 0 !important;
}

/* ---------- Stella Bella logo sizing (square-ish logo in the header/footer bars) ---------- */
.elementor-location-header .elementor-top-section:has(.elementor-widget-nav-menu) .elementor-widget-image img {
	max-height: 84px; width: auto; object-fit: contain;
}
.elementor-location-footer .elementor-widget-image img { max-height: 110px; width: auto; }
.stl-mmenu-logo img { max-height: 64px; width: auto; }
@media (max-width: 767px) {
	.elementor-location-header .elementor-top-section:has(.elementor-widget-nav-menu) .elementor-widget-image img { max-height: 62px; max-width: 150px; }
	.woocommerce ul.products li.product a img { height: 280px; }
}

/* ---------- Dynamic category tabs [stl_cat_tabs] (generic radio hack) ---------- */
.stl-tabs2 > input { position: absolute; opacity: 0; pointer-events: none; }
.stl-tabs2 .stl-tab-nav {
	display: flex; justify-content: center;
	margin-bottom: 18px; padding-bottom: 0;
}
.stl-tabs2 .stl-tab-nav label {
	cursor: pointer; font-size: 22px; font-weight: 700; color: #bdbdbd; transition: color .25s ease;
	padding: 0 6px 3px; background-repeat: no-repeat; line-height: 1.5;
}
.stl-tabs2 .stl-tab-nav label:hover { color: #666; }
.stl-tabs2 .stl-panel { display: none; }
.stl-tabs2 > input:nth-of-type(1):checked ~ .stl-tab-panels .stl-panel:nth-of-type(1),
.stl-tabs2 > input:nth-of-type(2):checked ~ .stl-tab-panels .stl-panel:nth-of-type(2),
.stl-tabs2 > input:nth-of-type(3):checked ~ .stl-tab-panels .stl-panel:nth-of-type(3),
.stl-tabs2 > input:nth-of-type(4):checked ~ .stl-tab-panels .stl-panel:nth-of-type(4) { display: block; }
.stl-tabs2 > input:nth-of-type(1):checked ~ .stl-tab-nav label:nth-of-type(1),
.stl-tabs2 > input:nth-of-type(2):checked ~ .stl-tab-nav label:nth-of-type(2),
.stl-tabs2 > input:nth-of-type(3):checked ~ .stl-tab-nav label:nth-of-type(3),
.stl-tabs2 > input:nth-of-type(4):checked ~ .stl-tab-nav label:nth-of-type(4) { color: #111; background-image: linear-gradient(transparent 58%, #F6CBDD 58%); }
/* product image inside the big cards */
.stl-tabs2 .cat-card img { width: 100%; height: 420px; object-fit: cover; object-position: center top; display: block; }
.stl-tabs2 .stl-tab-empty { text-align: center; color: #999; padding: 30px 0; }
@media (max-width: 767px) {
	.stl-tabs2 .cat-cards { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; }
	.stl-tabs2 .cat-cards > * { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; }
	.stl-tabs2 .cat-card img { height: 380px; }
	.stl-tabs2 .stl-tab-nav { gap: 18px; }
	.stl-tabs2 .stl-tab-nav label { font-size: 14px; }
}

/* ============================================================
   Homepage mobile refinements (Stella Bella, 2026-07-23)
   ============================================================ */
@media (max-width: 767px) {
	/* (5) New Arrivals: 2 products side-by-side, 4 total on mobile */
	.elementor-element-4f91b9b .woocommerce ul.products,
	.elementor-element-4f91b9b .woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.elementor-element-4f91b9b ul.products li.product:nth-child(n+5) { display: none !important; }
	/* tighter vertical rhythm on the small 3-col cards */
	.elementor-element-4f91b9b ul.products li.product a img { margin-bottom: 8px !important; }
	.elementor-element-4f91b9b ul.products li.product .stl-cat { font-size: 8px; margin-bottom: 2px !important; line-height: 1.3; }
	.elementor-element-4f91b9b ul.products li.product .woocommerce-loop-product__title { font-size: 11px !important; margin: 0 0 2px !important; min-height: 0 !important; line-height: 1.3 !important; }
	.elementor-element-4f91b9b ul.products li.product .star-rating { font-size: 10px; margin: 0 auto 2px !important; }
	.elementor-element-4f91b9b ul.products li.product .price { font-size: 12px; margin: 0 !important; line-height: 1.2; }
	/* hide the hover add-to-cart pill on the tiny 3-col cards (too cramped) */
	.elementor-element-4f91b9b ul.products li.product .button { display: none !important; }

	/* (6) Benefits: icon ON TOP of a title only, 2 per row, centered, no description */
	.elementor-element-89e9fcf { padding-left: 10px !important; padding-right: 10px !important; overflow: hidden; }
	.elementor-element-89e9fcf > .elementor-container { display: flex !important; flex-wrap: wrap; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
	.elementor-element-89e9fcf > .elementor-container > .elementor-column { width: 50% !important; max-width: 50% !important; margin: 0 0 26px !important; box-sizing: border-box; padding: 0 6px !important; }
	.elementor-element-89e9fcf > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
	.elementor-element-89e9fcf .elementor-widget-wrap { justify-content: center; align-content: flex-start; }
	.elementor-element-89e9fcf .elementor-image-box-wrapper { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
	.elementor-element-89e9fcf .elementor-image-box-img { flex: none; width: 44px !important; margin: 0 auto !important; }
	.elementor-element-89e9fcf .elementor-image-box-img img { width: 40px !important; }
	.elementor-element-89e9fcf .elementor-image-box-content { text-align: center !important; }
	.elementor-element-89e9fcf .elementor-image-box-title { text-align: center !important; font-size: 13px; margin: 0; }
	.elementor-element-89e9fcf .elementor-image-box-description { display: none !important; } /* remove details on mobile */
}

/* ---------- Home collections banner — custom widget [.stl-cb] ---------- */
#stl-collections > .elementor-container { align-items: stretch; }
#stl-collections .elementor-column > .elementor-element-populated { padding: 0 !important; }
.stl-cb { position: relative; display: block; min-height: 520px; overflow: hidden; border-radius: 6px; text-decoration: none; }
.stl-cb .stl-cb-media, .stl-cb .stl-cb-video, .stl-cb .stl-cb-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stl-cb .stl-cb-video, .stl-cb .stl-cb-img { object-fit: cover; display: block; }
.stl-cb .stl-cb-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,0) 65%); }
.stl-cb .stl-cb-content { position: absolute; right: 40px; bottom: 40px; left: 40px; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; text-align: right; }
.stl-cb .stl-cb-title { font-size: 42px; font-weight: 700; color: #ffffff; line-height: 1.15; margin-bottom: 16px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.stl-cb .stl-cb-btn { position: relative; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 15px; color: #ffffff;
	display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.stl-cb .stl-cb-btn-t { position: relative; z-index: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.stl-cb .stl-cb-btn i { position: relative; z-index: 1; transition: transform .3s; }
.stl-cb:hover .stl-cb-btn i { transform: translateX(-6px); }
.stl-cb .stl-cb-btn::before { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; background: #E9A9BE; z-index: 0; }
@media (max-width: 767px) {
	#stl-collections > .elementor-container { display: flex; flex-direction: column; gap: 16px; }
	.stl-cb { min-height: 380px; }
	.stl-cb .stl-cb-title { font-size: 32px; }
}

/* ---------- Selected-product details widget [.stl-pd] (global .wk-* buybox) ---------- */
.stl-pd { padding-right: 6px; }
.stl-pd .wk-summary-name .elementor-heading-title { font-size: 20px; font-weight: 700; color: #222; line-height: 1.35; margin: 0 0 8px; }
.stl-pd .wk-price { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 10px; }
.stl-pd .wk-price del { color: #999; font-weight: 400; margin-right: 8px; }
.stl-pd .wk-price ins { text-decoration: none; color: #C2557A; }
.stl-pd .wk-desc { font-size: 13px; color: #666; line-height: 1.65; margin-bottom: 6px; }
.stl-pd .wk-desc p { margin: 0; }
.stl-pd .wk-buybox .wk-size-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #222; margin: 16px 0 12px; }
.stl-pd .wk-buybox .wk-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.stl-pd .wk-buybox .wk-size { min-width: 48px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #E4E4E4; border-radius: 2px; font-size: 11px; font-weight: 500; color: #222; cursor: pointer; transition: .25s ease; }
.stl-pd .wk-buybox .wk-size:hover { border-color: #111; background: #F8F8F8; }
.stl-pd .wk-buybox .wk-size.selected { background: #C2557A; border-color: #C2557A; color: #fff; }
.stl-pd .wk-buybox .wk-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.stl-pd .wk-buybox .wk-color { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; transition: .2s; }
.stl-pd .wk-buybox .wk-color.selected { box-shadow: 0 0 0 2px #C2557A; }
.stl-pd .wk-buybox .wk-buy-row { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.stl-pd .wk-buybox .wk-qty { width: 105px; height: 48px; border: 1px solid #E5E5E5; border-radius: 25px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; flex-shrink: 0; }
.stl-pd .wk-buybox .wk-qty button { width: 34px; height: 100%; background: transparent; border: 0; font-size: 17px; color: #444; cursor: pointer; line-height: 1; }
.stl-pd .wk-buybox .wk-qty span { font-size: 12px; font-weight: 500; min-width: 20px; text-align: center; }
.stl-pd .wk-buybox a.wk-atc { flex-grow: 1; height: 48px; display: flex; align-items: center; justify-content: center; background: #C2557A; color: #fff !important; border-radius: 25px; font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: .3s ease; }
.stl-pd .wk-buybox a.wk-atc:hover { background: #A63E63; }
.stl-pd .wk-buybox a.wk-buynow { width: 100%; height: 47px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #222 !important; border: 1px solid #E2E2E2; border-radius: 25px; box-shadow: 0 3px 9px rgba(0,0,0,.08); font-size: 10px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: .3s ease; }
.stl-pd .wk-buybox a.wk-buynow i { color: #D96D8F; }
.stl-pd .wk-buybox a.wk-buynow:hover { background: #C2557A; border-color: #C2557A; color: #fff !important; }
.stl-pd .wk-buybox a.wk-buynow:hover i { color: #fff; }

/* trim the cart hero band top/bottom padding */
.elementor-element-29ebe13 { padding-top: 18px !important; padding-bottom: 16px !important; }

/* ---------- Checkout: phone field RTL (placeholder on the right) ---------- */
.woocommerce form .form-row input#billing_phone,
input#billing_phone, input[name="billing_phone"] { direction: rtl !important; text-align: right !important; }

/* ---------- Empty-cart "Return to shop" button — brand pink ---------- */
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop .button,
.woocommerce .cart-empty ~ .return-to-shop .button {
	background: #C2557A !important; color: #fff !important; border: 0 !important;
	border-radius: 40px !important; padding: 13px 34px !important; font-weight: 700; transition: background .3s;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce .return-to-shop .button:hover { background: #A63E63 !important; color: #fff !important; }

/* ---------- Shop mobile filter button ---------- */
.shop-toolbar .shop-mobile-filter-btn {
	display: inline-flex !important; height: 38px; padding: 0 16px; background: #C2557A !important;
	color: #fff !important; border: none !important; font-size: 10px; font-weight: 700;
	text-transform: uppercase; cursor: pointer; align-items: center; gap: 13px;
}

/* ---------- Shop toolbar dropdowns (category + sort — consistent style) ---------- */
.shop-toolbar .shop-cat-dropdown,
.shop-toolbar .shop-place-dropdown,
.shop-toolbar .shop-ordering {
	border: 1px solid #E5E5E5 !important; border-radius: 25px !important; padding: 9px 34px 9px 16px !important;
	font-size: 13px !important; font-weight: 600 !important; color: #333 !important; height: auto !important; line-height: 1.4 !important;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23C2557A' d='M6 8L0 0h12z'/></svg>") no-repeat left 14px center !important;
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer; min-width: 180px; max-width: 180px;
}
.shop-toolbar .shop-cat-dropdown:focus,
.shop-toolbar .shop-place-dropdown:focus,
.shop-toolbar .shop-ordering:focus { outline: none; border-color: #C2557A !important; }

/* product-position control: a select on desktop, tappable chips on phones */
.shop-place-chips { display: none; }
@media (max-width: 767px) {
	.shop-toolbar .shop-place-dropdown { display: none !important; }
	.shop-place-chips { display: flex; width: 100%; gap: 8px; }
	.shop-place-chip {
		flex: 1 1 0; padding: 9px 6px; cursor: pointer;
		border: 1px solid #E5E5E5; border-radius: 25px; background: #fff;
		font-size: 13px; font-weight: 600; color: #333; line-height: 1.4;
		transition: background .2s, color .2s, border-color .2s;
	}
	.shop-place-chip.is-active { background: #C2557A; border-color: #C2557A; color: #fff; }
}

/* toolbar on phones: the three dropdowns + filter button as an even 2-col grid
   (the inline template CSS only sets flex-wrap, which left them ragged) */
@media (max-width: 767px) {
	.shop-toolbar { padding: 10px !important; gap: 8px !important; justify-content: center !important; }
	.shop-toolbar .shop-toolbar-start,
	.shop-toolbar .shop-toolbar-end { width: 100%; flex-wrap: wrap; gap: 8px; justify-content: center; }
	.shop-toolbar .shop-cat-dropdown,
	.shop-toolbar .shop-place-dropdown,
	.shop-toolbar .shop-ordering,
	.shop-toolbar .shop-mobile-filter-btn {
		min-width: 0 !important; max-width: none !important;
		flex: 1 1 calc(50% - 4px); width: calc(50% - 4px) !important;
		justify-content: center;
	}
	.shop-toolbar .shop-view-switcher { display: none !important; }
}

/* attributes set to "רשימה נפתחת" keep the native select — give it the same
   pill styling as the shop toolbar dropdowns */
.woocommerce div.product form.cart .variations select:not(.stl-swatched) {
	border: 1px solid #E5E5E5; border-radius: 25px; padding: 9px 34px 9px 16px;
	font-size: 13px; font-weight: 600; color: #333; line-height: 1.4; min-width: 180px;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23C2557A' d='M6 8L0 0h12z'/></svg>") no-repeat left 14px center;
	-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
}
.woocommerce div.product form.cart .variations select:not(.stl-swatched):focus { outline: none; border-color: #C2557A; }

/* ---------- Color variation swatches as circles ---------- */
.variation-swatches.is-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.variation-swatch-button.is-color { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; border-radius: 50% !important; background: var(--sw, #DDDDDD) !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px #DDD; font-size: 0 !important; position: relative; cursor: pointer; transition: box-shadow .2s; }
.variation-swatch-button.is-color:hover { box-shadow: 0 0 0 1px #C2557A; }
.variation-swatch-button.is-color.is-selected { box-shadow: 0 0 0 2px #C2557A !important; }
.variation-swatch-button.is-color.is-unavailable { opacity: .5; cursor: not-allowed; }
.variation-swatch-button.is-color.is-unavailable::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to top left, transparent calc(50% - 1px), #999, transparent calc(50% + 1px)); }

/* ---------- Shop category carousel: clearer shadow ---------- */
.shop-category-carousel .shop-category-image { box-shadow: 0 12px 28px rgba(0,0,0,.20) !important; }
.shop-category-carousel .shop-category-item:hover .shop-category-image { box-shadow: 0 16px 34px rgba(0,0,0,.26) !important; }

/* ---------- Floating widgets: WhatsApp + accessibility ---------- */
.stl-floats { position: fixed; left: 22px; bottom: 26px; z-index: 9998; display: flex; flex-direction: column; gap: 14px; }
.stl-float { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .25s, box-shadow .25s; text-decoration: none; }
.stl-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.stl-a11y-toggle { background: #2f6bff; }
.stl-wa { background: #25D366; }
.stl-wa i { font-size: 30px; }
.stl-a11y-panel { position: fixed; left: 22px; bottom: 92px; z-index: 9999; width: 250px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 14px; }
.stl-a11y-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #222; margin-bottom: 12px; }
.stl-a11y-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #777; }
.stl-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stl-a11y-grid button { border: 1px solid #EAD9E0; background: #FBF3F6; color: #333; border-radius: 10px; padding: 12px 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: .2s; }
.stl-a11y-grid button i { font-size: 16px; color: #C2557A; }
.stl-a11y-grid button:hover { background: #C2557A; color: #fff; }
.stl-a11y-grid button:hover i { color: #fff; }
.stl-a11y-grid button[data-a11y="reset"] { grid-column: 1 / -1; background: #f4f4f4; }
/* accessibility modes (applied to <html>) */
html { font-size: calc(16px * var(--stl-a11y-font, 1)); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-readable body, html.a11y-readable body * { font-family: "DM Sans", Tahoma, Arial, sans-serif !important; letter-spacing: .3px !important; line-height: 1.9 !important; }
html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast body, html.a11y-contrast body :not(.stl-float):not(.stl-float i):not(.stl-a11y-panel):not(.stl-a11y-panel *) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; }
html.a11y-contrast a, html.a11y-contrast .price, html.a11y-contrast .woocommerce-Price-amount { color: #ffe600 !important; }
html.a11y-contrast img { filter: none; }
@media (max-width: 767px) {
	.stl-floats { left: 14px; bottom: 84px; }
	.stl-float { width: 48px; height: 48px; font-size: 22px; }
	.stl-wa i { font-size: 26px; }
	.stl-a11y-panel { left: 14px; bottom: 140px; width: min(250px, calc(100vw - 28px)); }
}

/* ---------- Language switcher in header menu ---------- */
[class*="trp-floater"], #trp-floater-ls, .trp-floating-switcher { display: none !important; }
/* home hero video: fixed 520px band on mobile, cropped rather than letting the
   9:16 video run to full height. Widget c3577cd is the mobile-only video inside
   the .slider_top section. (Replaces the rules for the old 9716f31 section,
   which was removed from the home page.)
   --video-aspect-ratio is deliberately NOT redeclared here — Elementor already
   sets it on this wrapper, and the explicit height is what governs. */
@media (max-width: 767px) {
	.elementor-97 .elementor-element.elementor-element-c3577cd .elementor-wrapper {
		height: 520px;
		overflow: hidden;
		width: 100%;
	}
	.slider_top video {
		max-height: 520px !important;
		overflow: hidden;
	}
}


/* ============================================================================
   HERO OVERLAY on the .slider_top video (mobile) / image (desktop).
   Built from NATIVE Elementor widgets so every text is editable in the editor:
     heading .stl-hero-eyebrow  → the discount label (sits ON the top rule)
     heading .stl-hero-l1/l2/l3 → the three headline lines
     button  .stl-hero-btn      → the CTA
   The frame is drawn with background gradients, so the backdrop stays fully
   transparent over the video. Colours / sizes are the variables below.

   Geometry trick that keeps the corners closed without magic numbers:
     · the eyebrow row is pulled up by half its height, so its rule sits exactly
       on the wrap's TOP edge — where the two vertical rules start (0);
     · the last line is given margin-bottom:-0.575em (half its own line box), so
       the wrap's BOTTOM edge lands exactly on that word's middle — which is
       where the bottom rule is drawn;
     · the button is taken out of flow, so it can't push those edges around.
   ========================================================================== */

/* position the overlay against the SECTION, not an inner wrapper */
.slider_top { position: relative; --stl-hero-veil: rgba(221, 180, 188, .30); }

/* soft pink veil over the media — sits above the video/image (z-index 5) but
   below the hero block (z-index 20), and never swallows clicks */
.slider_top::after {
	content: ""; position: absolute; inset: 0; z-index: 5;
	background: var(--stl-hero-veil);
	pointer-events: none;
}
.slider_top > .elementor-container,
.slider_top > .elementor-container > .elementor-column,
.slider_top > .elementor-container > .elementor-column > .elementor-widget-wrap { position: static; }

/* ---- the inner-section holding the hero widgets ---- */
.slider_top .elementor-inner-section:has(.stl-hero-l2) {
	/* COLOURS */
	--stl-hero-pink: #DDB4BC;   /* frame + button block */
	--stl-hero-text: #FFFFFF;   /* all headline text    */
	--stl-hero-btn-text: #111111;
	/* GEOMETRY */
	--stl-hero-w:   2px;                       /* frame line thickness     */
	--stl-hero-pad: clamp(12px, 2.5vw, 26px);  /* inner horizontal padding */
	--stl-hero-eb:  clamp(18px, 2.6vw, 28px);  /* eyebrow row height       */
	--stl-hero-l3-size: clamp(22px, 4.4vw, 56px);
	--stl-hero-btn-h: 44px;
	--stl-hero-btn-gap: 16px;
	/* decorative font for line 1 (swap if you load a handwritten face) */
	--stl-hero-script: "Amiri", "Noto Naskh Arabic", "David Libre", serif;

	position: absolute; z-index: 20;
	top: 50%; transform: translateY(-50%);       /* vertically centred */
	right: clamp(12px, 6%, 70px);                /* pinned right       */
	width: min(46%, 46vw, 520px); max-width: 90vw;
	pointer-events: none;                        /* clicks fall through … */
}
.slider_top .elementor-inner-section:has(.stl-hero-l2) .stl-hero-btn { pointer-events: auto; } /* … except the CTA */

/* flatten Elementor's own spacing so the frame edges are predictable */
.slider_top .elementor-inner-section:has(.stl-hero-l2) > .elementor-container { padding: 0; }
/* :not(.stl-hero-l3) — that one keeps its negative margin (see below) */
.slider_top .elementor-inner-section:has(.stl-hero-l2) .elementor-widget:not(:last-child):not(.stl-hero-l3) { margin-bottom: 0; }
/* keeps the block optically centred now that the button is out of flow */
.slider_top .elementor-inner-section:has(.stl-hero-l2) > .elementor-container > .elementor-column {
	padding-bottom: calc(var(--stl-hero-l3-size) * 0.575 + var(--stl-hero-btn-gap) + var(--stl-hero-btn-h));
}

/* ---- the frame: left + right rules top-to-bottom, bottom rule with a gap ---- */
.slider_top .elementor-inner-section:has(.stl-hero-l2) .elementor-widget-wrap {
	position: relative;
	padding: 0 var(--stl-hero-pad);
	background:
		/* left rule — full height of the wrap, so it meets both corners */
		linear-gradient(var(--stl-hero-pink), var(--stl-hero-pink)) left top / var(--stl-hero-w) 100% no-repeat,
		/* right rule */
		linear-gradient(var(--stl-hero-pink), var(--stl-hero-pink)) right top / var(--stl-hero-w) 100% no-repeat,
		/* bottom rule — lands on the last word, with a small gap near the left */
		linear-gradient(to right,
			var(--stl-hero-pink) 0 20%,
			transparent 18% 77%,
			var(--stl-hero-pink) 92% 88%) left bottom / 100% var(--stl-hero-w) no-repeat;
}

/* ---- eyebrow: text centred on the top rule, rules either side (auto gap) ---- */
/* long prefix + explicit left/right: the margin-inline shorthand was being
   overridden on one side, which left a gap at that top corner */
.slider_top .elementor-inner-section:has(.stl-hero-l2) .stl-hero-eyebrow {
	margin-top: calc(var(--stl-hero-eb) / -2);          /* rule lands on the wrap's top edge */
	margin-left: calc(var(--stl-hero-pad) * -1);        /* rules reach both frame corners    */
	margin-right: calc(var(--stl-hero-pad) * -1);
	/* Elementor pins widgets to width:100% of the content box; without this the
	   negative margins just shift the row instead of widening it to the corners */
	width: calc(100% + var(--stl-hero-pad) * 2);
	max-width: none;
}
.slider_top .stl-hero-eyebrow .elementor-widget-container {
	display: flex; align-items: center; gap: clamp(8px, 2vw, 16px);
	height: var(--stl-hero-eb);
}
.slider_top .stl-hero-eyebrow .elementor-widget-container::before,
.slider_top .stl-hero-eyebrow .elementor-widget-container::after {
	content: ""; flex: 1 1 auto; height: var(--stl-hero-w); background: var(--stl-hero-pink);
}
.slider_top .stl-hero-eyebrow .elementor-heading-title {
	flex: 0 0 auto; white-space: nowrap; margin: 0;
	font-size: clamp(11px, 1.5vw, 16px); font-weight: 800;
	color: var(--stl-hero-text); text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ---- the three headline lines (FONT SIZES: edit these clamp() values) ---- */
.slider_top .stl-hero-l1 .elementor-heading-title,
.slider_top .stl-hero-l2 .elementor-heading-title,
.slider_top .stl-hero-l3 .elementor-heading-title {
	margin: 0; overflow-wrap: anywhere;
	color: var(--stl-hero-text);
	text-shadow: 0 2px 6px rgba(0,0,0,.45);   /* soft dark halo keeps white legible */
}
.slider_top .stl-hero-l1 { margin-top: clamp(10px, 2vw, 22px); }
.slider_top .stl-hero-l1 .elementor-heading-title {
	/* !important: the theme's global font rule is itself !important */
	font-family: var(--stl-hero-script) !important; font-weight: 400;
	font-size: clamp(26px, 5.2vw, 64px); line-height: 1.15;
}
.slider_top .stl-hero-l2 .elementor-heading-title {
	font-weight: 900; font-size: clamp(30px, 6vw, 74px); line-height: 1.1;
}
/* long prefix on purpose: it has to out-rank the flatten rule above, which sets
   margin-bottom:0 on every widget that isn't the last child */
.slider_top .elementor-inner-section:has(.stl-hero-l2) .stl-hero-l3 {
	font-size: var(--stl-hero-l3-size);
	margin-bottom: -0.575em;   /* half of the 1.15 line box → wrap ends mid-word */
}
.slider_top .stl-hero-l3 .elementor-heading-title {
	font-weight: 800; font-size: var(--stl-hero-l3-size); line-height: 1.15;
}

/* ---- CTA: out of flow, hanging under the frame ---- */
.slider_top .stl-hero-btn {
	position: absolute; left: 50%; top: 100%;
	transform: translateX(-50%);
	margin-top: calc(var(--stl-hero-l3-size) * 0.575 + var(--stl-hero-btn-gap));
	width: auto;
}
.slider_top .stl-hero-btn .elementor-button {
	position: relative; height: var(--stl-hero-btn-h); padding: 0 18px;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--stl-hero-pink); border: 0; border-radius: 0;
	color: var(--stl-hero-btn-text); font-size: clamp(12px, 1.6vw, 17px); font-weight: 700;
	box-shadow: none; transition: background .2s, color .2s;
}
.slider_top .stl-hero-btn .elementor-button:hover { background: #C2557A; color: #fff; }
.slider_top .stl-hero-btn .elementor-button-text { border-bottom: 1px solid currentColor; line-height: 1.2; }
.slider_top .stl-hero-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
/* arrow after the label (points left — RTL reading direction) */
.slider_top .stl-hero-btn .elementor-button-content-wrapper::after {
	content: ""; width: clamp(18px, 2.4vw, 26px); height: 12px; flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 12H4M4 12l6-6M4 12l6 6'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 12H4M4 12l6-6M4 12l6 6'/%3E%3C/svg%3E");
}

/* ---- phone: smaller frame, never wider than 90% of the screen ---- */
@media (max-width: 767px) {
	.slider_top .elementor-inner-section:has(.stl-hero-l2) {
		width: min(50%, 84vw, 430px); max-width: 50vw;
		right: clamp(10px, 6%, 34px);
		--stl-hero-l3-size: clamp(19px, 10vw, 30px);
		--stl-hero-btn-h: 38px;
		--stl-hero-btn-gap: 15px;
	}
	.slider_top .stl-hero-l1 .elementor-heading-title { font-size: clamp(22px, 8vw, 34px); }
	.slider_top .stl-hero-l2 .elementor-heading-title { font-size: clamp(26px, 9.5vw, 40px); }
	.slider_top .stl-hero-eyebrow .elementor-heading-title { font-size: clamp(10px, 3.2vw, 13px); }
	.slider_top .stl-hero-btn .elementor-button { padding: 0 14px; }
}

/* Home: the marquee band is relocated under the hero by functions.php.
   Hide it in the header until then — once moved it is no longer inside
   .elementor-location-header, so this rule stops matching it. */
body.home .elementor-location-header .elementor-element-ca49955 { display: none; }

/* decorative script line between the product row and the collections banner.
   !important on the family: the theme sets a global font with !important. */
.stl-script-line .elementor-heading-title {
	font-family: "Great Vibes", "Brush Script MT", cursive !important;
	color: #C2557A !important;   /* Elementor prints its heading colour inline, after this sheet */
	font-size: clamp(30px, 5vw, 58px);
	line-height: 1.4;
	font-weight: 400;
	direction: ltr; letter-spacing: 0 !important;
}

/* Elementor default column gap: kill the vertical part, keep the 10px sides.
   Prefixed with body for specificity so per-column padding set in Elementor
   still wins (no !important). */
body .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0px 10px; }

/* ---------- Clients logo carousel (Elementor Image Carousel) ---------- */
/* the logos are transparent PNGs now (white knocked out at the pixel level) */
.stl-clients .elementor-image-carousel.swiper-wrapper { align-items: center; }
.stl-clients .elementor-image-carousel-wrapper { padding: 0 52px; }   /* keep logos clear of the arrows */
.stl-clients .swiper-slide { display: flex; align-items: center; justify-content: center; height: 130px; }
.stl-clients .swiper-slide-inner { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.stl-clients .swiper-slide-image, .stl-clients img {
	max-height: 100px; max-width: 100%; width: auto !important; height: auto !important;
	margin: 0; object-fit: contain;
}
/* square pink arrows, as in the reference */
.stl-clients .elementor-swiper-button {
	width: 34px; height: 34px; border-radius: 0;
	background: #DDB4BC; color: #111;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; transition: background .2s, color .2s;
}
.stl-clients .elementor-swiper-button:hover { background: #C2557A; color: #fff; }
.stl-clients .elementor-swiper-button-prev { left: 0; }
.stl-clients .elementor-swiper-button-next { right: 0; }
@media (max-width: 767px) {
	.stl-clients .swiper-slide-image, .stl-clients img { max-height: 62px; }
	.stl-clients .swiper-slide { height: 96px; }
	.stl-clients .elementor-swiper-button { display: none !important; }   /* arrows off on phones */
	.stl-clients .elementor-image-carousel-wrapper { padding: 0; }
}

/* Inside the Elementor editor the hero block cannot be selected: it is set to
   pointer-events:none (so clicks reach the video) and it overflows the section,
   so the next section paints over it. Both are relaxed for the editor only —
   the live page keeps the click-through overlay. */
body.elementor-editor-active .slider_top { position: relative; z-index: 50; }
body.elementor-editor-active .slider_top .elementor-inner-section:has(.stl-hero-l2),
body.elementor-editor-active .slider_top .elementor-inner-section:has(.stl-hero-l2) * {
	pointer-events: auto !important;
	z-index: 2147483647;   /* max valid CSS integer — a longer number overflows and the rule is dropped */
}

/* ---------- Shop menu item: categories dropdown on hover ---------- */
@media (min-width: 1025px) {
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent { position: relative; }
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent > ul.sub-menu {
		display: block !important; visibility: hidden; opacity: 0;
		position: absolute !important; top: 100%; right: 50%; transform: translateX(50%) translateY(6px);
		min-width: 220px; margin: 0; padding: 10px 0;
		list-style: none; background: #fff;
		border: 1px solid #EFE2E8; border-radius: 14px;
		box-shadow: 0 16px 34px rgba(0,0,0,.14);
		transition: opacity .2s ease, transform .2s ease;
		z-index: 500;
	}
	/* bridge the gap so the pointer can travel from the item down into the panel */
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent::after {
		content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
	}
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent:hover > ul.sub-menu,
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent:focus-within > ul.sub-menu {
		visibility: visible; opacity: 1; transform: translateX(50%) translateY(0);
	}
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent > ul.sub-menu li { width: 100%; }
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent > ul.sub-menu a {
		display: block; padding: 9px 20px; font-size: 14px; font-weight: 500;
		color: #333; white-space: nowrap; text-align: right; transition: background .2s, color .2s;
	}
	.elementor-location-header .elementor-nav-menu--main li.stl-shop-parent > ul.sub-menu a:hover {
		background: #FCEFF4; color: #C2557A;
	}
}

/* language switcher: a round flag button sitting with the header icons */
/* the switcher is injected into the search widget's column, which stacks its
   children — lay that column out as a row so flag and search sit side by side */
.elementor-location-header .elementor-widget-wrap:has(> .stl-lang-item) {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	align-items: center; justify-content: flex-start; gap: 10px; width: auto !important;
}
/* the dropdown drops below the nav row, so lift that row above the marquee band
   that follows it. Only the SECTION is raised — putting position:relative on the
   column would override the mobile rule that absolutely pins the icon columns. */
.elementor-location-header { position: relative; z-index: 300; }
.elementor-location-header .elementor-top-section:has(.stl-lang-item) {
	position: relative; z-index: 300;
}
.elementor-location-header .elementor-widget-wrap:has(> .stl-lang-item) > .elementor-widget {
	width: auto !important; margin: 0 !important; flex: 0 0 auto;
}
/* The injected element IS TranslatePress's wrapper — make it the round button.
   Structure: wrapper > (.trp-shortcode-anchor  = inert sizing copy)
                      + (.trp-shortcode-overlay = the interactive one,
                          which itself holds the trigger + .trp-switcher-dropdown-list) */
.elementor-location-header .stl-lang-item {
	list-style: none; position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; margin: 0; padding: 0 !important;
	width: 46px; height: 46px; border-radius: 50% !important;
	background: #FFF9FA !important; border: 0 !important;
	box-shadow: 0px 0px 6px 1px #00000024 !important;
	transition: transform .2s;
}
.elementor-location-header .stl-lang-item:hover { transform: translateY(-2px); }
.stl-lang-item .trp-language-item-name,
.stl-lang-item .trp-shortcode-arrow,
.stl-lang-item .trp-ls-shortcode-language { display: none !important; }

/* The overlay is TranslatePress's interactive layer and the dropdown's containing
   block. By default it shrinks to its content (~24x41), which threw the dropdown
   off-centre — stretch it to the circle. Do NOT set display on it: forcing flex
   here is what made the dropdown render as a row beside the flag. */
.stl-lang-item > .trp-shortcode-overlay {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: transparent !important; box-shadow: none !important;
	overflow: visible !important; /* TP clips to this box, which would hide the card */
}
/* Only the CURRENT-language trigger is restyled to fill the circle. */
.stl-lang-item > .trp-shortcode-anchor,
.stl-lang-item > .trp-shortcode-anchor > .trp-current-language-item__wrapper,
.stl-lang-item > .trp-shortcode-overlay > .trp-current-language-item__wrapper {
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: transparent !important; box-shadow: none !important; min-width: 0 !important;
	width: 100% !important; height: 100% !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
.stl-lang-item .trp-current-language-item__wrapper > .trp-language-item {
	width: 100%; height: 100%; border-radius: 50%; background: transparent;
	box-shadow: none; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 !important; margin: 0 !important; border: 0 !important; cursor: pointer;
}
/* language code text replaces the flag ("ع" / "he") */
.stl-lang-item .trp-flag-image { display: none !important; }
.stl-lang-item .stl-lang-code {
	font-size: 14px; font-weight: 700; line-height: 1; color: #333;
	letter-spacing: 0 !important; text-transform: lowercase; unicode-bidi: isolate;
}
.stl-lang-item .trp-language-item:hover .stl-lang-code { color: #C2557A; }

/* dropdown card: floats under the button (TP leaves it static, which squeezed it
   inside the 46px circle). Only shown once TP removes [hidden] on open. */
.stl-lang-item .trp-switcher-dropdown-list {
	position: absolute !important; top: calc(100% + 10px) !important; left: 50% !important;
	right: auto !important; bottom: auto !important; transform: translateX(-50%) !important;
	flex-direction: column !important; align-items: center !important; gap: 4px !important;
	width: auto !important; min-width: 0 !important; height: auto !important; max-height: none !important;
	overflow: visible !important; z-index: 999 !important;
	margin: 0 !important; padding: 6px !important;
	background: #fff; border: 1px solid #EAD9E0; border-radius: 16px;
	box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
/* Show/hide is driven by real hover/focus, not by [hidden]: TranslatePress does not
   always restore that attribute on mouse-out, which left the card stuck open. */
.stl-lang-item .trp-switcher-dropdown-list { display: none !important; }
.stl-lang-item:hover .trp-switcher-dropdown-list,
.stl-lang-item:focus-within .trp-switcher-dropdown-list { display: flex !important; }
/* invisible bridge across the 10px gap so moving down to the card keeps :hover.
   It hangs off the button (not the card) so the gap counts as part of the switcher. */
.stl-lang-item::after {
	content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 14px;
}
.stl-lang-item .trp-switcher-dropdown-list .trp-language-item {
	width: 38px; height: 38px; border-radius: 50%; justify-content: center;
	padding: 0 !important; margin: 0 auto !important; border: 0 !important; transition: background .2s;
}
.stl-lang-item .trp-switcher-dropdown-list .trp-language-item:hover { background: #F6CBDD; }
/* mobile: the switcher is re-anchored next to the CART (see functions.php), and
   matches the other mobile icons — 42px, flat grey */
@media (max-width: 767px) {
	.elementor-location-header .stl-lang-item {
		width: 42px !important; height: 42px !important;
		background: #FFF9FA !important; box-shadow: 0px 0px 6px 1px #00000024 !important;
	}
	.elementor-location-header .stl-lang-item .stl-lang-code { font-size: 13px; }
	/* the cart column is absolutely pinned and sized to content — let it grow for two icons */
	.elementor-location-header .elementor-column:has(.stl-hicon .elementor-icon[href*="/cart"]) .elementor-widget-wrap:has(> .stl-lang-item) {
		gap: 8px;
	}
}
.stl-mmenu-head .stl-lang-mobile {
	margin-top: 10px; width: 42px; height: 42px; border-radius: 50% !important;
	background: #FFF9FA !important; border: 1px solid #EAD9E0 !important; box-shadow: 0px 0px 6px 1px #00000024 !important;
	display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important;
}

/* ---------- Header search overlay + results page ---------- */
.stl-search-overlay {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.98); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.stl-search-overlay.open { opacity: 1; visibility: visible; }
.stl-search-close { position: absolute; top: 22px; left: 30px; width: 46px; height: 46px; border: 0; background: transparent; font-size: 40px; line-height: 1; color: #333; cursor: pointer; }
.stl-search-close:hover { color: #C2557A; }
.stl-search-form { display: flex; align-items: center; gap: 8px; width: min(720px, 88%); border-bottom: 2px solid #C2557A; padding-bottom: 8px; }
.stl-search-form input[type="search"] { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: clamp(20px, 4vw, 30px); padding: 10px 4px; text-align: right; color: #222; }
.stl-search-form button[type="submit"] { border: 0; background: transparent; color: #C2557A; font-size: 24px; cursor: pointer; padding: 6px 10px; }
.stl-search .elementor-icon, .stl-col-search { cursor: pointer; }

.stl-search-page .stl-search-hero { background: #FBF3F6; text-align: center; padding: 54px 20px; }
.stl-search-page .stl-search-hero h1 { font-size: 32px; font-weight: 700; color: #222; margin: 0; }
.stl-search-page .stl-search-hero p { color: #C2557A; margin: 10px 0 0; font-size: 17px; unicode-bidi: isolate; }
.stl-search-body { max-width: 1320px; margin: 0 auto; padding: 40px 20px 72px; }
.stl-search-count { text-align: center; color: #888; margin: 0 0 28px; }
.stl-search-other { text-align: center; }
.stl-search-other img { border-radius: 8px; margin-bottom: 10px; }
.stl-search-pagination { margin-top: 30px; }
.stl-search-pagination .page-numbers { display: inline-flex; gap: 8px; justify-content: center; list-style: none; padding: 0; flex-wrap: wrap; }
.stl-search-pagination .page-numbers li a, .stl-search-pagination .page-numbers li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border: 1px solid #EAD9E0; border-radius: 50%; color: #C2557A; text-decoration: none; }
.stl-search-pagination .page-numbers li span.current { background: #C2557A; color: #fff; border-color: #C2557A; }
.stl-search-empty { text-align: center; padding: 40px 20px 60px; }
.stl-search-empty i { font-size: 48px; color: #E9A9BE; }
.stl-search-empty h3 { font-size: 22px; color: #222; margin: 18px 0 6px; }
.stl-search-empty p { color: #888; margin: 0 0 20px; }
.stl-search-shopbtn { display: inline-block; background: #C2557A; color: #fff; padding: 13px 34px; border-radius: 40px; font-weight: 700; text-decoration: none; transition: background .3s; }
.stl-search-shopbtn:hover { background: #D96D8F; }
@media (max-width: 767px) {
	.stl-search-page .stl-search-grid.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Section-heading highlighter [.stl-hl] ---------- */
/* strip any pill/box background so only the highlighter marker shows */
.stl-hl, .stl-hl > .elementor-widget-container {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.stl-hl .elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-woocommerce-archive-title h1,
.stl-search-page .stl-search-hero h1 {
	display: inline !important;
	line-height: 1.75 !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(transparent 56%, #F6CBDD 56%);
	background-repeat: no-repeat;
	padding: 0 8px 3px;
}
/* drop the extra pill padding now that the box is gone */
.stl-hl > .elementor-widget-container { padding: 6px 0 !important; }

/* ---------- Home categories slider [stl_home_categories] ---------- */
.home-cats { position: relative; padding: 0 46px; }
.home-cats .swiper { overflow: hidden; padding: 16px 8px; }
.home-cats .swiper-slide { overflow: visible !important; }
.home-cats .swiper-slide a.home-cat-item { display: flex; flex-direction: column; align-items: stretch; text-align: center; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 4px rgb(0 0 0 / 20%) !important; border: 1px solid #f6cbdd; transition: box-shadow .35s ease, transform .35s ease; }
.home-cats .swiper-slide a.home-cat-item:hover { box-shadow: 0 8px 16px rgba(0,0,0,.18) !important; transform: translateY(-3px); }
.home-cat-img { display: block; width: 100%; height: 470px; overflow: hidden; background: #F6EEF1; }
.home-cat-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block; max-width: none !important; transition: transform .35s ease; }
.home-cat-item:hover .home-cat-img img { transform: scale(1.04); }
.home-cat-name { font-size: 14px; font-weight: 700; color: #222; margin: 0; padding: 13px 8px 15px; }
.home-cat-count { display: none; } /* name only under the image */
.home-cat-prev, .home-cat-next { position: absolute; top: 176px; transform: translateY(-50%); z-index: 8; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #EAD9E0; box-shadow: 0 4px 12px rgba(0,0,0,.08); color: #C2557A; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.home-cat-prev { right: 0; }
.home-cat-next { left: 0; }
.home-cat-prev:hover, .home-cat-next:hover { background: #C2557A; color: #fff; border-color: #C2557A; }
/* header row: "التصنيفات" pinned RIGHT, nav arrows on the LEFT at the same line (desktop) */
@media (min-width: 768px) {
	.elementor-element-34e6153 { align-self: flex-start !important; text-align: right !important; width: 100% !important; max-width: 100% !important; padding-right: 46px !important; }
	.home-cat-prev, .home-cat-next { top: -80px !important; transform: none !important; }
	.home-cat-next { left: 46px !important; right: auto !important; }
	.home-cat-prev { left: 96px !important; right: auto !important; }
}
@media (max-width: 767px) {
	.home-cats { padding: 0 12px; }
	.home-cat-img { height: 350px; }
	.home-cat-name { font-size: 12px; }
	.home-cat-prev, .home-cat-next { display: none; } /* no arrows on phones */
}

/* ---------- Tab rows as horizontal scroll strips ([stl_cat_tabs]) ---------- */
.stl-tabs2 .cat-cards.stl-scroll-row {
	display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 20px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	padding-bottom: 12px; scrollbar-width: thin;
}
.stl-tabs2 .cat-cards.stl-scroll-row > .cat-card {
	scroll-snap-align: start;
	box-shadow: 0px 0px 9px 2px #0000001c; border: 1px solid #f6cbdd;
}
.stl-tabs2 .cat-cards.stl-scroll-row::-webkit-scrollbar { height: 6px; }
.stl-tabs2 .cat-cards.stl-scroll-row::-webkit-scrollbar-thumb { background: #E3C7D2; border-radius: 3px; }
@media (max-width: 767px) {
	.stl-tabs2 .cat-cards.stl-scroll-row > .cat-card { flex: 0 0 72%; min-width: 0; }
	.stl-tabs2 .cat-card img { height: 380px; }
}

/* ============================================================
   Contact page polish (page-id-99) — Stella Bella
   ============================================================ */
body.page-id-99 .elementor-form { margin-top: 6px; }
body.page-id-99 .elementor-form .elementor-field-group > label,
body.page-id-99 .elementor-form .elementor-field-label {
	font-weight: 600; font-size: 13px; color: #333; margin-bottom: 8px; display: block;
}
body.page-id-99 .elementor-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
body.page-id-99 .elementor-form textarea,
body.page-id-99 .elementor-form select {
	width: 100%; border: 1px solid #EAD7DF !important; border-radius: 12px !important;
	background: #FCF7F9 !important; padding: 14px 16px !important; font-size: 14px !important;
	color: #333 !important; transition: border-color .2s, box-shadow .2s, background .2s; box-shadow: none !important;
}
body.page-id-99 .elementor-form input:not([type=submit]):focus,
body.page-id-99 .elementor-form textarea:focus,
body.page-id-99 .elementor-form select:focus {
	border-color: #C2557A !important; background: #fff !important;
	box-shadow: 0 0 0 3px rgba(194,85,122,.12) !important; outline: none;
}
body.page-id-99 .elementor-form textarea { min-height: 140px; resize: vertical; }
body.page-id-99 .elementor-form input::placeholder,
body.page-id-99 .elementor-form textarea::placeholder { color: #B9A7AE; }
/* submit button = pink pill */
body.page-id-99 .elementor-form .elementor-button,
body.page-id-99 .elementor-form button[type=submit] {
	background: #C2557A !important; color: #fff !important; border: 0 !important;
	border-radius: 30px !important; padding: 15px 34px !important; font-weight: 700 !important;
	font-size: 14px !important; letter-spacing: .3px; box-shadow: 0 10px 22px rgba(194,85,122,.25);
	transition: transform .2s, background .2s;
}
body.page-id-99 .elementor-form .elementor-button:hover { background: #A8436A !important; transform: translateY(-2px); }

/* eyebrow + heading spacing */
body.page-id-99 .elementor-widget-heading + .elementor-widget-heading { margin-top: -4px; }

/* contact-info side → soft pink card */
body.page-id-99 .elementor-column:has(.elementor-icon-list-items) > .elementor-widget-wrap {
	background: #FBF3F6; border: 1px solid #F0E0E7; border-radius: 16px;
	padding: 30px 26px !important;
}
body.page-id-99 .elementor-icon-list-item { align-items: center; margin-bottom: 6px; }
body.page-id-99 .elementor-icon-list-item a,
body.page-id-99 .elementor-icon-list-text { color: #555 !important; font-size: 14px; }
body.page-id-99 .elementor-icon-list-icon i { color: #C2557A !important; }
body.page-id-99 .elementor-social-icons-wrapper { margin-top: 18px; }

/* form section = subtle card on desktop */
@media (min-width: 768px) {
	body.page-id-99 .elementor-column:has(.elementor-form) > .elementor-widget-wrap {
		background: #fff; border: 1px solid #F0E7EB; border-radius: 16px;
		padding: 34px 34px !important; box-shadow: 0 12px 40px rgba(0,0,0,.04);
	}
}
@media (max-width: 767px) {
	body.page-id-99 .elementor-column:has(.elementor-icon-list-items) > .elementor-widget-wrap { padding: 24px 18px !important; }
}

/* ---------- Policy / help pages content ---------- */
.stl-policy { color: #555; font-size: 15px; line-height: 1.9; text-align: right; }
.stl-policy h3 { font-size: 22px; font-weight: 700; color: #222; margin: 30px 0 12px; }
.stl-policy h3:first-child { margin-top: 0; }
.stl-policy h4 { font-size: 17px; font-weight: 700; color: #C2557A; margin: 24px 0 8px; }
.stl-policy p { margin: 0 0 14px; }
.stl-policy ul { margin: 0 14px 18px 0; padding-right: 20px; }
.stl-policy ul li { margin-bottom: 8px; position: relative; }
.stl-policy ul { list-style: none; }
.stl-policy ul li::before { content: "•"; color: #C2557A; position: absolute; right: -18px; font-weight: 700; }
.stl-policy a { color: #C2557A; font-weight: 600; }
.stl-policy a:hover { text-decoration: underline; }

/* ---------- Blog archive (Elementor Posts grid) ---------- */
.stl-blog-grid .elementor-post { background: #fff; border: 1px solid #F0E7EB; border-radius: 14px; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.stl-blog-grid .elementor-post:hover { box-shadow: 0 16px 40px rgba(194,85,122,.12); transform: translateY(-3px); }
.stl-blog-grid .elementor-post__thumbnail { height: 260px !important; padding-bottom: 0 !important; position: relative; overflow: hidden; }
/* cancel Elementor's item-ratio centering which conflicts with object-fit cover fill */
.stl-blog-grid .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img,
.stl-blog-grid .elementor-post__thumbnail img {
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	transform: none !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover !important; object-position: center top;
	transition: transform .5s;
}
.stl-blog-grid .elementor-post__thumbnail:hover img { transform: scale(1.05) !important; }
.stl-blog-grid .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.05); }
.stl-blog-grid .elementor-post__text { padding: 20px 20px 24px; text-align: right; }
.stl-blog-grid .elementor-post__title { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; }
.stl-blog-grid .elementor-post__title a { color: #222; }
.stl-blog-grid .elementor-post__title a:hover { color: #C2557A; }
.stl-blog-grid .elementor-post__meta-data { font-size: 12px; color: #B9A7AE; margin-bottom: 8px; }
.stl-blog-grid .elementor-post__excerpt p { font-size: 13px; color: #777; line-height: 1.7; margin: 0 0 14px; }
.stl-blog-grid .elementor-post__read-more { color: #C2557A; font-weight: 700; font-size: 13px; border: 0; }
.stl-blog-grid .elementor-post__read-more:hover { color: #A8436A; }
.stl-blog-grid .elementor-posts-container { gap: 26px; }
/* single post readability */
body.single-post .stl-policy, body.single-post .entry-content { text-align: right; }

/* ---------- Single blog post (image right, text left) ---------- */
body.single-post .stl-post-hero .stl-post-meta { text-align: center; color: #C2557A; font-size: 13px; margin-bottom: 6px; }
body.single-post .stl-post-title .elementor-heading-title { font-size: 34px; font-weight: 700; color: #222; text-align: center; }
/* two-column body */
body.single-post .stl-post-body > .elementor-container { display: flex; align-items: flex-start; gap: 40px; }
body.single-post .stl-post-body > .elementor-container > .elementor-column:has(.stl-post-img) { width: 42% !important; position: sticky; top: 100px; }
body.single-post .stl-post-body > .elementor-container > .elementor-column:has(.stl-post-content) { width: 58% !important; }
body.single-post .stl-post-img img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 16px 40px rgba(0,0,0,.08); }
/* article text */
body.single-post .stl-post-content { text-align: right; color: #555; font-size: 15px; line-height: 1.95; }
body.single-post .stl-post-content h3 { font-size: 20px; font-weight: 700; color: #222; margin: 26px 0 10px; }
body.single-post .stl-post-content h3:first-child { margin-top: 0; }
body.single-post .stl-post-content p { margin: 0 0 15px; }
body.single-post .stl-post-content a { color: #C2557A; font-weight: 600; }
@media (max-width: 767px) {
	body.single-post .stl-post-body > .elementor-container { flex-direction: column; gap: 24px; }
	body.single-post .stl-post-body > .elementor-container > .elementor-column:has(.stl-post-img),
	body.single-post .stl-post-body > .elementor-container > .elementor-column:has(.stl-post-content) { width: 100% !important; position: static; }
	body.single-post .stl-post-title .elementor-heading-title { font-size: 26px; }
}