/* ==========================================================================
   SoloClass fixes
   One stylesheet for the whole fix engagement, grouped by task number.
   Enqueued from wp-content/mu-plugins/soloclass-fixes/loader.php with a
   filemtime version.
   ========================================================================== */

.solofix-hidden { display: none !important; }


/* ==========================================================================
   SPRINT 1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1  The two headings above the checkout form.
        "במידה ואתם נתקלים בבעיה בהזמנה באתר..." plants doubt before the
        shopper has tried to pay, and carried the wrong phone number.
        Hidden rather than deleted, so the widgets stay in the page.
   -------------------------------------------------------------------------- */
.elementor-element-ebed9b0,
.elementor-element-5da1969 {
	display: none !important;
}

/* The green WhatsApp fallback banner, in case a cached fragment still holds it. */
.solo-wa-fallback {
	display: none !important;
}

/* The quiet replacement: one grey line, under the pay button only. */
.solofix-help-line {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5f5f5f;
	text-align: center;
	direction: rtl;
}
.solofix-help-line a {
	color: #5f5f5f;
	text-decoration: underline;
	unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   1.2  Nothing floats over the cart or the checkout.
   -------------------------------------------------------------------------- */
.woocommerce-cart #solo-sales-toast,
.woocommerce-checkout #solo-sales-toast,
.woocommerce-cart .e-contact-buttons,
.woocommerce-checkout .e-contact-buttons,
.woocommerce-cart #solo-wl-fab,
.woocommerce-checkout #solo-wl-fab,
.woocommerce-cart #solo-wl-panel,
.woocommerce-checkout #solo-wl-panel,
.woocommerce-cart #soloWcPopup,
.woocommerce-checkout #soloWcPopup,
.woocommerce-cart .eapps-instagram-feed-popup-wrapper,
.woocommerce-checkout .eapps-instagram-feed-popup-wrapper {
	display: none !important;
}

/* --------------------------------------------------------------------------
   1.3  The cookie banner is a strip along the bottom edge, not a box.

        This block must stay in this file. It is the only stylesheet on the
        page that loads AFTER <style id="solo-consent-css"> (Code Snippet
        114), and several of these rules win on document order rather than on
        specificity. The plugin's own rules are written as
        #ds-consent-popup.show (1,1,0) !important, so a rule on the bare id
        is silently dead - which is what the earlier version of this block
        was.

        Measured on a first visit at 1440x900: the close button is absolutely
        positioned at right:12px and the title was text-align:right, so the
        two shared the same corner and the button painted on top of the first
        two letters of "מדיניות" - the heading read "יניות עוגיות (Cookies)".
        The strip now reserves 68px of padding on that side (12 offset + 44
        button + 12 gap) and the title, which only repeated the sentence
        below it, is gone.
   -------------------------------------------------------------------------- */

/* No backdrop for the banner. The preferences dialog keeps one, because it
   has controls to operate. */
#ds-consent-overlay.show { display: none !important; }
body:has(#ds-manage-panel.show) #ds-consent-overlay.show {
	display: block !important;
	background: rgb(0 0 0 / .72) !important;
	pointer-events: auto !important;
}

#ds-consent-popup.show {
	position: fixed !important;
	top: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
	animation: none !important;
	margin: 0 !important;
	padding: 10px 68px 10px 20px !important;
	box-sizing: border-box !important;
	border-width: 1px 0 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 -6px 24px rgb(0 0 0 / .28) !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	column-gap: 20px !important;
	row-gap: 8px !important;
	text-align: right !important;
	overflow: hidden !important;
}

/* One line of prose is the whole banner; the title only repeated it. */
#ds-consent-popup .ds-consent-title { display: none !important; }

#ds-consent-popup .ds-consent-text {
	flex: 1 1 320px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	text-align: right !important;
	display: block !important;
	overflow: visible !important;
}

#ds-consent-popup .ds-consent-buttons {
	flex: 0 0 auto !important;
	margin: 0 !important;
	gap: 10px !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

#ds-consent-popup .ds-consent-buttons button,
#ds-consent-popup .ds-consent-buttons a,
#ds-consent-popup .ds-consent-btn {
	min-height: 44px !important;
	padding-block: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 44x44, centred with auto block margins rather than a transform: the
   plugin's .ds-close-btn:hover rule is (1,2,0) and sets transform:
   scale(1.02), so a translate here would be dropped on hover. */
#ds-consent-popup .ds-close-btn {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	right: 12px !important;
	left: auto !important;
	width: 44px !important;
	height: 44px !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 24px !important;
	line-height: 1 !important;
}

/* The strip covers the bottom of the window and the accessibility button sits
   13px from that edge under a lower z-index. Lift it while the strip is up. */
body:has(#ds-consent-popup.show) .userway_buttons_wrapper {
	bottom: 92px !important;
	top: auto !important;
}

@media (max-width: 640px) {
	#ds-consent-popup.show {
		padding: 10px 64px 10px 12px !important;
		column-gap: 12px !important;
		row-gap: 8px !important;
	}
	#ds-consent-popup .ds-consent-text {
		flex: 1 1 100% !important;
		font-size: 12.5px !important;
		line-height: 1.35 !important;
		padding: 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden !important;
	}
	#ds-consent-popup .ds-consent-buttons { flex: 1 1 100% !important; }
	#ds-consent-popup .ds-consent-buttons .ds-consent-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}
	#ds-consent-popup .ds-close-btn { right: 10px !important; }
	body:has(#ds-consent-popup.show) .userway_buttons_wrapper { bottom: 130px !important; }
}

/* --------------------------------------------------------------------------
   1.4  The welcome popup's close button.
        It was a 34px light grey square on a light photo. 44px, dark, with a
        white cross, so it can be seen and hit.
   -------------------------------------------------------------------------- */
.solo-wc-close {
	box-sizing: border-box !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	background: rgba(10, 10, 10, .82) !important;
	color: #fff !important;
	font-size: 28px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 0 !important;
}
.solo-wc-close:hover,
.solo-wc-close:focus {
	background: #0a0a0a !important;
	color: #fff !important;
}
/* 4.3 The small print inside the popup measured 3.47:1. */
.solo-wc-note { color: #5c5c58 !important; }


/* ==========================================================================
   SPRINT 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1  The free shipping threshold on the product page.
   -------------------------------------------------------------------------- */
.solofix-ship-note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 2px;
	font-size: 13.5px;
	line-height: 1.4;
	color: #2b2926;
	direction: rtl;
}
.solofix-ship-note svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   2.2  Product cards.

        Every listing now carries an action. The card itself is one big link,
        so the button is a sibling of that link and sits above it in the
        stacking order.
   -------------------------------------------------------------------------- */
/*
 * The room for the button is reserved on every card in the listing before the
 * button exists, and the button is placed into that reserved strip rather than
 * added to the flow. Appending it to the flow instead moved every row below it
 * down at about 2.5 seconds, which measured 0.111 of layout shift on the shop
 * page: the exact fault sprint 3 is meant to remove, not add.
 */
.e-loop-item {
	position: relative;
	padding-bottom: 66px !important;
	box-sizing: border-box;
}
.solofix-card { position: relative; }

.solofix-atc {
	position: absolute;
	inset-inline: 10px;
	bottom: 11px;
	display: block;
	margin: 0;
	padding: 11px 12px;
	min-height: 44px;
	box-sizing: border-box;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: #0a0a0a;
	background: #fff;
	border: 1px solid #0a0a0a;
	border-radius: 0;
	cursor: pointer;
	z-index: 3;
	transition: background-color .18s ease, color .18s ease;
}
.solofix-atc:hover,
.solofix-atc:focus {
	background: #0a0a0a;
	color: #fff;
}
.solofix-atc.loading { opacity: .65; }
.solofix-atc.added::after { content: none; }
/* WooCommerce prints its own "view cart" link after an ajax add; the drawer
   already opens, so the extra link only adds noise to the grid. */
.solofix-card .added_to_cart { display: none !important; }

/* 2.2 A discount that can be read at a glance, in the corner of the image. */
.solofix-sale-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 4;
	padding: 4px 9px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: #CA041D;
	pointer-events: none;
}

/* 4.2 Stars under the title, for products that have a real rating. */
.solofix-stars {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	margin: 2px 0 0;
	direction: ltr;
}
.solofix-stars::before,
.solofix-stars-fill {
	content: "★★★★★";
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
	color: #d9d6d0;
}
.solofix-stars { position: relative; }
.solofix-stars-fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #0a0a0a;
}
.solofix-stars-count { font-size: 12px; color: #5f5f5f; margin-inline-start: 62px; }

/* 2.2 The empty strips above the picture in the carousels. Only the top: the
   foot of the card is the strip the action button sits in, and zeroing it here
   was why the button landed on the title and the price inside a carousel. */
.elementor-widget-loop-carousel .swiper-slide,
.elementor-widget-loop-carousel .e-loop-item {
	padding-top: 0 !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button,
.elementor-widget-loop-carousel .swiper-button-next,
.elementor-widget-loop-carousel .swiper-button-prev,
.elementor-widget-nested-carousel .elementor-swiper-button {
	top: auto !important;
	bottom: -6px !important;
	transform: none !important;
	background: #fff !important;
	border: 1px solid #d9d6d0 !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	color: #0a0a0a !important;
	box-shadow: 0 2px 8px rgb(0 0 0 / .08);
}
@media (max-width: 767px) {
	.elementor-widget-loop-carousel .elementor-swiper-button,
	.elementor-widget-loop-carousel .swiper-button-next,
	.elementor-widget-loop-carousel .swiper-button-prev {
		display: none !important;
	}
	.elementor-widget-loop-carousel .swiper { padding-bottom: 4px !important; }
}

/* 2.2 The size chooser sheet. */
.solofix-sheet {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: none;
	direction: rtl;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.solofix-sheet.is-open { display: block; }
.solofix-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .55);
}
.solofix-sheet-panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	max-height: 78vh;
	overflow-y: auto;
	background: #fff;
	padding: 20px 18px 26px;
	box-shadow: 0 -12px 40px rgb(0 0 0 / .28);
}
@media (min-width: 768px) {
	.solofix-sheet-panel {
		inset: 50% auto auto 50%;
		transform: translate(50%, -50%);
		width: 420px;
		max-width: calc(100% - 32px);
		bottom: auto;
	}
}
.solofix-sheet-close {
	position: absolute;
	top: 8px;
	inset-inline-start: 10px;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
	background: none;
	border: 0;
	color: #0a0a0a;
	cursor: pointer;
}
.solofix-sheet-title {
	margin: 0 0 14px;
	padding-inline-end: 44px;
	font-size: 17px;
	font-weight: 700;
	color: #0a0a0a;
}
.solofix-sheet-options { display: grid; gap: 8px; }
.solofix-variation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 14.5px;
	color: #0a0a0a;
	background: #fff;
	border: 1px solid #d9d6d0;
	cursor: pointer;
	text-align: start;
}
.solofix-variation:hover:not(:disabled) { border-color: #0a0a0a; }
.solofix-variation.is-out { opacity: .45; cursor: default; }
.solofix-variation-price { font-weight: 700; unicode-bidi: isolate; }
.solofix-sheet-loading { margin: 12px 0; font-size: 14px; color: #5f5f5f; }
.solofix-sheet-more {
	display: block;
	margin-top: 14px;
	font-size: 13.5px;
	color: #5f5f5f;
	text-decoration: underline;
	text-align: center;
}

/* --------------------------------------------------------------------------
   2.3  The first screen on mobile.

        844 pixels of strip, logo, category row and photo with no headline,
        no promise and no button. The overlay puts one of each on the image.
   -------------------------------------------------------------------------- */
.solofix-hero-host { position: relative; }
.solofix-hero {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 5;
	padding: 22px 20px 26px;
	text-align: center;
	direction: rtl;
	color: #fff;
	background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .38) 55%, transparent);
	pointer-events: none;
}
.solofix-hero h2 {
	margin: 0 0 6px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #fff;
}
.solofix-hero p {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.45;
	color: #f1f1f1;
}
.solofix-hero a {
	display: inline-block;
	min-height: 44px;
	padding: 13px 30px;
	font-size: 15px;
	font-weight: 700;
	color: #0a0a0a;
	background: #fff;
	text-decoration: none;
	pointer-events: auto;
}
@media (min-width: 768px) {
	.solofix-hero { padding: 40px 40px 46px; }
	.solofix-hero h2 { font-size: 40px; }
	.solofix-hero p { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   2.4  The checkout.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .solofix-hidden,
#billing_country_field.solofix-hidden {
	display: none !important;
}
.solofix-login-link {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: #5f5f5f;
	direction: rtl;
}
.solofix-login-link a { color: #0a0a0a; text-decoration: underline; }

/* The terms document used to be printed in full inside the page. What is
   left is the checkbox and its link, which is what has to be agreed to. */
.woocommerce-terms-and-conditions {
	display: none !important;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text { font-size: 12.5px; color: #5f5f5f; }

/* --------------------------------------------------------------------------
   2.5  Payment marks.
   -------------------------------------------------------------------------- */
.solofix-pay-marks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	margin: 14px 0 4px;
	direction: rtl;
}
.solofix-pay-lock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #5f5f5f;
}
.solofix-pay-cards { display: flex; align-items: center; gap: 7px; }

.solofix-pay-cards .solofix-paycard { width: 42px; height: 26px; }

/* --------------------------------------------------------------------------
   2.6  The cart drawer.
   -------------------------------------------------------------------------- */
/* "מעבר לסל הקניות" was light grey on white and read as disabled. */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	color: #0a0a0a !important;
	background: #fff !important;
	border: 1px solid #0a0a0a !important;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	color: #fff !important;
	background: #0a0a0a !important;
	border: 1px solid #0a0a0a !important;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.solofix-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin-top: 6px;
	border: 1px solid #d9d6d0;
	direction: ltr;
}
.solofix-qty.is-busy { opacity: .5; pointer-events: none; }
.solofix-qty button {
	width: 32px;
	height: 32px;
	font-size: 16px;
	line-height: 1;
	background: #fff;
	border: 0;
	color: #0a0a0a;
	cursor: pointer;
}
.solofix-qty-value {
	min-width: 30px;
	text-align: center;
	font-size: 14px;
	color: #0a0a0a;
}

.mini-cart-upsell { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6e4e0; direction: rtl; }
.mini-cart-upsell .upsell-title-main { font-size: 14px; font-weight: 700; color: #0a0a0a; margin-bottom: 10px; }
.mini-cart-upsell .upsell-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-cart-upsell .upsell-item { text-align: center; font-size: 12.5px; }
.mini-cart-upsell .upsell-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.mini-cart-upsell .upsell-title { margin: 5px 0 2px; color: #0a0a0a; line-height: 1.3; }
.mini-cart-upsell .upsell-price { color: #2b2926; margin-bottom: 6px; }
.mini-cart-upsell .upsell-price .amount { unicode-bidi: isolate; }
.mini-cart-upsell .upsell-add {
	display: block;
	width: 100%;
	min-height: 36px;
	padding: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: #0a0a0a;
	background: #fff;
	border: 1px solid #0a0a0a;
	text-decoration: none;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   2.7  Direction of the price.

        "279.00₪ -החל מ" instead of "החל מ 279.00 ₪": Hebrew, a currency sign
        and a hyphen in one run with no isolation, so the browser reorders it.
   -------------------------------------------------------------------------- */
.price,
.price .from,
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.solofix-sheet-panel .price,
.mini-cart-upsell .upsell-price {
	unicode-bidi: isolate;
}
.price del, .price ins { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   2.8  Stock and description.
   -------------------------------------------------------------------------- */
/* One stock message, not two. Code Snippet 41 prints the second one. */
.solo-stock-badge { display: none !important; }

/* 4.3 "40 במלאי" measured 2.97:1 against the page. */
.stock,
p.stock,
.solofix-stock,
.woocommerce div.product .stock {
	color: #1d6b2b !important;
	font-size: 13.5px;
	font-weight: 600;
}
.stock.out-of-stock, p.stock.out-of-stock { color: #8a1c1c !important; }

.solofix-excerpt {
	margin: 10px 0 4px;
	font-size: 14px;
	line-height: 1.55;
	color: #2b2926;
	direction: rtl;
}


/* ==========================================================================
   SPRINT 3
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1  CLS on the product page was 0.389, and a single shift at 2.5 seconds
        accounted for 0.284 of it. Reserving the space stops the page moving
        under a thumb that is already on its way to the button.
   -------------------------------------------------------------------------- */
.single-product .woocommerce-product-gallery,
.single-product .elementor-widget-woocommerce-product-images {
	min-height: 360px;
}
.single-product .elementor-widget-woocommerce-product-images img {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
	object-fit: cover;
}
.single-product .elementor-widget-woocommerce-product-price { min-height: 34px; }
.single-product .elementor-widget-woocommerce-product-add-to-cart { min-height: 132px; }
.single-product .elementor-widget-woocommerce-product-title { min-height: 34px; }

@media (min-width: 768px) {
	.single-product .woocommerce-product-gallery,
	.single-product .elementor-widget-woocommerce-product-images {
		min-height: 520px;
	}
}

/* 3.2 The gallery thumbnails were not aligned to the edge of the main image. */
.single-product .flex-control-thumbs,
.single-product .woocommerce-product-gallery__wrapper + ol {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* 3.1 The loop cards reserve their own height, so a grid that fills in late
   does not push the page around either. */
.e-loop-item .product-bg {
	background-size: cover !important;
	background-position: center center !important;
}

/* --------------------------------------------------------------------------
   3.5  Floating layers.

        The measured set was: a 351x408 contact button container, a 340x844
        wishlist panel, a 46x46 wishlist button, a 235x109 bubble, a full
        screen Instagram popup and the accessibility button. Two of them stay.
   -------------------------------------------------------------------------- */
.eapps-instagram-feed-popup-wrapper,
.eapps-instagram-feed-popup {
	display: none !important;
}

/* --------------------------------------------------------------------------
   The floating WhatsApp button (Elementor floating-buttons template 175,
   widget 611f0aff).

   Its root was a 351x408 box - 90vw wide on a phone - that swallowed taps
   meant for the content behind it. The 408 is the giveaway: Elementor closes
   the chat panel with visibility:hidden, not display:none, so the closed panel
   keeps 333px of layout and pushes the launcher down out of the corner. The
   panel is taken out of the flow while it is closed, and the widget becomes
   the size of the 55px button it shows.

   Written against the classes Elementor re-prints on every render, so a
   re-save or an upgrade cannot bring the old box back.
   -------------------------------------------------------------------------- */
.elementor-location-floating_buttons .e-contact-buttons,
.e-contact-buttons {
	--e-contact-buttons-dot: transparent !important;
	position: fixed !important;
	inset-inline-start: 16px !important;
	inset-inline-end: auto !important;
	top: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	pointer-events: none !important;
	gap: 12px !important;
}

/* Bottom corner, 16px. Out-specifies Code Snippet 25, which pins it to 190px. */
.elementor-location-floating_buttons .e-contact-buttons.has-v-alignment-bottom,
body .e-contact-buttons.has-v-alignment-bottom {
	bottom: 16px !important;
}

/* The root cause: the closed panel keeps its box. animated-wrapper is the
   class Elementor swaps in when the close animation ends. */
.e-contact-buttons .e-contact-buttons__content-wrapper.hidden,
.e-contact-buttons.has-animations .e-contact-buttons__content-wrapper.hidden,
.e-contact-buttons .e-contact-buttons__content-wrapper.animated-wrapper {
	display: none !important;
}

/* The button is the only thing that takes a tap. Elementor's 20px of
   padding beside it was a dead 20x55 catcher. */
.e-contact-buttons .e-contact-buttons__chat-button-container {
	position: relative !important;
	inset: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: max-content !important;
	align-self: flex-start !important;
	pointer-events: auto !important;
}
.e-contact-buttons .e-contact-buttons__chat-button,
.e-contact-buttons > * { pointer-events: auto; }

/* Opened on purpose, the panel gets its width back. */
.e-contact-buttons:has(.e-contact-buttons__content-wrapper:not(.hidden):not(.animated-wrapper)) {
	width: min(360px, calc(100vw - 32px)) !important;
}

/* No unread badge, because there is no unread message. content:none removes
   the pseudo-element itself, so a different display cannot bring it back. */
.e-contact-buttons .has-dot::after,
.e-contact-buttons__chat-button.has-dot::after,
.e-contact-buttons__chat-button[type="button"].has-dot::after,
.e-contact-buttons__profile-image.has-dot::after {
	content: none !important;
	display: none !important;
}

/* The wishlist heart stacks directly above the launcher: 16 + 55 + 13. */
body #solo-wl-fab {
	bottom: 84px !important;
	inset-inline-start: 16px !important;
	width: 44px !important;
	height: 44px !important;
}

/* While the cookie strip is up it covers that corner, so both move above it. */
body:has(#ds-consent-popup.show) .e-contact-buttons.has-v-alignment-bottom {
	bottom: 115px !important;
}
body:has(#ds-consent-popup.show) #solo-wl-fab {
	bottom: 183px !important;
}


/* ==========================================================================
   SPRINT 4
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.3  Contrast and tap targets.
   -------------------------------------------------------------------------- */
/* "נרכש לאחרונה" measured 2.85:1. */
#solo-sales-toast .solo-st-label { color: #5f5f5f !important; }
#solo-sales-toast .solo-st-product { color: #3d3b38 !important; }
#solo-sales-toast .solo-st-close {
	color: #5f5f5f !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/*
 * The menu button measured 33x33.
 *
 * Size only. An earlier version of this rule also set display:inline-flex,
 * which overrode the display:none Elementor puts on the toggle above the
 * mobile breakpoint and produced a hamburger under the desktop menu.
 */
.elementor-menu-toggle,
button.elementor-menu-toggle,
.eae-hamburger,
.elementor-widget-nav-menu .elementor-menu-toggle {
	min-width: 44px !important;
	min-height: 44px !important;
}

/* A visible focus ring, which the theme removes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid #0a0a0a !important;
	outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   4.6.1  Breadcrumbs, visible on the product and category pages, matching the
          BreadcrumbList that was already in the markup.
   -------------------------------------------------------------------------- */
.solofix-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5f5f5f;
	direction: rtl;
}
.solofix-breadcrumb a { color: #5f5f5f; text-decoration: none; }
.solofix-breadcrumb a:hover { text-decoration: underline; color: #0a0a0a; }
.solofix-breadcrumb [aria-current="page"] { color: #0a0a0a; }
.solofix-crumb-sep { color: #b9b6b0; }

/* --------------------------------------------------------------------------
   4.6.2  The 404 page had one sentence on it and no way forward.
   -------------------------------------------------------------------------- */
.solofix-404 {
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 0 20px;
	direction: rtl;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.solofix-404-search { display: flex; gap: 8px; margin-bottom: 18px; }
.solofix-404-search label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.solofix-404-search input[type="search"] {
	flex: 1;
	min-height: 46px;
	padding: 10px 14px;
	font-size: 15px;
	border: 1px solid #d9d6d0;
	background: #fff;
}
.solofix-404-search button {
	min-height: 46px;
	padding: 10px 24px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: #0a0a0a;
	border: 1px solid #0a0a0a;
	cursor: pointer;
}
.solofix-404-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.solofix-404-cats a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	font-size: 14px;
	color: #0a0a0a;
	background: #fff;
	border: 1px solid #d9d6d0;
	text-decoration: none;
}
.solofix-404-cats a:hover { border-color: #0a0a0a; }
.solofix-404-title { margin: 0 0 14px; font-size: 18px; font-weight: 400; color: #0a0a0a; }
.solofix-404-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) { .solofix-404-products { grid-template-columns: 1fr; } }
.solofix-404-product { display: block; text-decoration: none; color: #0a0a0a; text-align: center; }
.solofix-404-product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.solofix-404-name { display: block; margin-top: 8px; font-size: 14px; }
.solofix-404-price { display: block; margin-top: 2px; font-size: 14px; color: #3d3b38; unicode-bidi: isolate; }


/* --------------------------------------------------------------------------
   2.3  The announcement strip.

        Three slides stacked before the carousel script ran and then collapsed
        to one, which moved the whole page down at about 800ms. A fixed height
        on the strip means the collapse costs nothing.
   -------------------------------------------------------------------------- */
.elementor-element-9b72ac5 {
	min-height: 38px;
	overflow: hidden;
}
.elementor-element-3d8e61b .swiper,
.elementor-element-3d8e61b .swiper-wrapper {
	max-height: 28px;
}
/* One line in a box whose height never changes, so the collapse when the
   carousel starts costs nothing and no sentence is cut in half. */
.elementor-element-3d8e61b .elementor-heading-title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12.5px;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.elementor-element-3d8e61b .elementor-heading-title { font-size: 13px; }
}


/* --------------------------------------------------------------------------
   3.1  The listing grid holds its shape.

        The largest single shift on the shop and category pages, 0.111, came
        from the product name in a card: it settles at one line and then wraps
        to two, and every row below it moves. It is present with this package
        switched off, so it is not something the fixes introduced, but it is
        exactly the fault sprint 3 is about. The name now occupies two lines
        whether it needs them or not, and the picture and the price each hold a
        fixed box, so nothing in the grid can move after first paint.
   -------------------------------------------------------------------------- */
.e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title,
.elementor-114 .elementor-element-fd49ea7 .elementor-heading-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3 !important;
	height: 2.6em !important;
	min-height: 2.6em !important;
}
.e-loop-item .elementor-widget-woocommerce-product-price,
.e-loop-item .elementor-widget-woocommerce-product-price .price {
	min-height: 21px;
	margin-block: 0;
}
/*
 * The card picture is square, and that is the whole of it: no floor under its
 * height. Elementor's loop template gives .product-bg a min-height (360px on a
 * desktop, 180 on a phone) and the aspect ratio turns that floor into a floor
 * under its WIDTH, which the grid then has to honour. Measured: the document
 * came out 1,643px wide in a 1,440 viewport, and 379 in a 360 - and because
 * the body clips horizontal overflow rather than scrolling it, a phone answers
 * by zooming out and dropping the edges off the screen. That is the "pages
 * stretch wider than the display" the client saw.
 */
.e-loop-item .product-bg {
	aspect-ratio: 1 / 1;
	min-height: 0 !important;
	background-size: cover !important;
	background-position: center center !important;
}

/* The same thing from the other side: a grid item's automatic minimum size is
   its content, so one wide child can widen the whole track. */
.elementor-loop-container.elementor-grid > .e-loop-item {
	min-width: 0 !important;
}

/*
 * One discount per card. The loop template also runs a [discount_percentage]
 * shortcode, which prints a second percentage in the opposite corner of the
 * same photograph - in the old green, inside the card's link, so a screen
 * reader read "25%" as part of the product name. The package's own badge is
 * the one that stays. The shortcode is untouched; only its output inside a
 * card is hidden, so any other template that uses it still works.
 */
.e-loop-item .sale-title,
.elementor-loop-container .sale-title {
	display: none !important;
}


/* --------------------------------------------------------------------------
   3.1  The filter and sort toolbar on the listing pages.

        Code Snippet 37 prints an empty #solo-filters-root in the footer, moves
        it above the grid 900ms after DOMContentLoaded and then fills it from an
        ajax call. The toolbar is 169px tall on a phone and 108px from tablet
        up, so every product in the grid dropped by that much a few seconds in:
        0.111 of layout shift, the single largest on the shop and category
        pages. The space is reserved here, and the script places the toolbar
        into it at parse time, so the fill costs nothing.
   -------------------------------------------------------------------------- */
#solo-filters-root.solofix-reserved {
	min-height: 108px;
}
@media (max-width: 767px) {
	#solo-filters-root.solofix-reserved {
		min-height: 169px;
	}
}


/*
 * 4.3 The link inside the cookie strip measured 86x14, and its colour was set
 * for a light background. The strip is black, so a dark link on it measured
 * 1.45:1. White, underlined, and big enough to hit.
 */
#ds-consent-popup .ds-consent-link,
#ds-consent-popup a {
	display: inline-block;
	min-height: 24px;
	padding-block: 5px;
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
#ds-consent-popup .ds-consent-text,
#ds-consent-popup .ds-consent-title {
	color: #f2f2f2 !important;
}


/* --------------------------------------------------------------------------
   2.4 / 2.6  The checkout and the drawer, finishing touches.
   -------------------------------------------------------------------------- */

/* 4.3 The drawer's close button measured 20x19. The :not() keeps the second,
   hidden close button hidden. */
.elementor-menu-cart__close-button:not(.solofix-hidden),
.elementor-menu-cart__close-button-custom:not(.solofix-hidden) {
	min-width: 44px !important;
	min-height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-size: 20px 20px !important;
}

/*
 * 2.4 The postcode is optional now, and almost nobody in Israel types it, so
 * it is out of the way. The field is still submitted, empty, and nothing
 * validates against it.
 */
#billing_postcode_field {
	display: none !important;
}

/* 2.4 A tighter rhythm on the form, on a page that was 2,561 pixels tall. */
.woocommerce-checkout .form-row {
	margin-bottom: 12px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	margin: 14px 0 10px;
	font-size: 18px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	padding-block: 8px;
}


/* ==========================================================================
   ROUND 3 - what a measured pass over the live site still found.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R3.1  Desktop CLS 0.137, on every page except the home page.
   --------------------------------------------------------------------------
   The shifting node was the header's site logo. Smush Pro lazy loads it: the
   markup ships as <img data-src=... class="lazyload"> with no src at all, so
   the browser has no intrinsic width to apply the width/height aspect ratio
   to, the box collapses to the 24px alt-text line, and when the real source
   arrives at ~1.1s the header grows from 24px to 71px and pushes the whole
   document down 32 pixels.

   The logo is excluded from lazy loading in PHP. This rule is the belt to
   that braces: while an image in the logo widget has no src, it still fills
   the widget, so the user-agent aspect ratio from the width and height
   attributes reserves the right height. It stops applying the moment the
   src lands. */
.elementor-widget-theme-site-logo img:not([src]) {
	width: 100%;
	height: auto;
}
/* "Unsized image element", third report, still on the logo. The tag carries
   width="1167" height="193", but the theme's img { height: auto } rule is what
   the audit reads, and it counts that as unsized. An explicit aspect ratio in
   CSS is the form the audit accepts, and it is the same ratio the attributes
   already declare, so nothing on screen changes. */
.elementor-widget-theme-site-logo img {
	aspect-ratio: 1167 / 193;
}

/* --------------------------------------------------------------------------
   R3.2  Tap targets under 24px, from a pass that counts only the ones a real
         user can hit: visible, and not pointer-events:none.
   -------------------------------------------------------------------------- */

/* Breadcrumb links measured 42x19, 76x19 and 81x19. */
.solofix-breadcrumb a,
.solofix-breadcrumb span[aria-current="page"] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* The header's search link measured 30x20. */
.elementor-location-header .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* The category tile captions on the home page measured 60x17. */
figure.wp-caption > a,
.elementor-widget-image .widget-image-caption a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* The privacy link inside the acceptance row measured 104x17, and the
   checkbox itself 13x13. */
.elementor-field-type-acceptance a,
a.privacy-link {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}
.elementor-field-type-acceptance input[type="checkbox"],
input.elementor-acceptance-field {
	inline-size: 24px !important;
	block-size: 24px !important;
	/* The row is a flex container, so without this the box was squeezed back
	   to 16px wide however the size was written. */
	flex: 0 0 24px !important;
	accent-color: #0a0a0a;
}
.elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The set builder on the product page: checkbox 20x20, name 217x20,
   swap button 67x20. */
#solo-set .solo-set-check {
	inline-size: 24px !important;
	block-size: 24px !important;
}
#solo-set .solo-set-name {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}
#solo-set .solo-set-swap {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

/* The floating contact widget's close button measured 16x24. */
.e-contact-buttons__close-button {
	min-inline-size: 24px !important;
	min-block-size: 24px !important;
}

/* R3.3  The filter panel's heading became an H2, so it no longer jumps from
   the page's H1 straight to an H3. Snippet 38 already sizes it by class
   (margin 0, 20px, weight 500), so the change is invisible and nothing is
   restated here. */

/* The Google-reviews widget's own links measured 79x18 and 144x18. Its class
   names carry a build hash, so they are matched on the stable part. */
/* The Google-reviews widget's own links measured 79x18. Its class names carry
   a build hash, so they are matched on the stable part, and !important because
   the widget ships its own line-height. */
a[class*="ReviewLinkContainer__Link"],
a[class*="ReviewLink"],
[class*="es-review"] a,
.es-header-info a {
	display: inline-block !important;
	min-height: 24px !important;
	line-height: 24px !important;
}

/* --------------------------------------------------------------------------
   R3.4  The FAQ accordion's +/- icons formed a ragged column at desktop.
   --------------------------------------------------------------------------
   Each title row is a centred flex pair of [icon][text], so the icon's x
   position depends on how long the question is: measured, a 41.81px staircase
   down the column at 1440. Letting the header absorb the free space parks the
   icon on the RTL start edge, and re-centring inside it keeps every question's
   text rect exactly where it is today. Below 768px Elementor already lays the
   row out flush, and mobile is correct as it stands, so the rule stops there. */
@media (min-width: 768px) {
	.elementor-widget-n-accordion .e-n-accordion-item-title-header {
		flex-grow: 1;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   R3.5  Remaining contrast failures found by axe on the live pages.
   --------------------------------------------------------------------------
   The set builder's helper line ("החליפו תכשיט", "הפריט שנבחר בעמוד") was
   #9d9d97 on white at 12.5px, which measures about 2.4:1 against a 4.5
   requirement. The same grey the rest of the fix package uses for secondary
   text measures 5.9:1 and is visually the same weight of grey. */
#solo-set .solo-set-note,
#solo-set .solo-set-swap {
	color: #5f5f5f !important;
}

/* --------------------------------------------------------------------------
   R5  The two product loop carousels, sized before Swiper runs.
   --------------------------------------------------------------------------
   Un-initialised, a loop carousel is far taller than it ends up: Swiper
   writes the slide widths at init, so until then every slide is full width
   and stacked. Measured at 390x844 the widget was 500px before init and
   382px after; at 1440x900, 1,371px before and 587px after. Initialising a
   carousel late without this would trade blocking time for a large layout
   shift. With it, the pre-init geometry matches the post-init geometry to
   the pixel (measured: 382/587px tall, slide 144/284px wide), so a deferred
   carousel arrives without anything moving. The 10px is the widgets' own
   space_between. */
.elementor-element-abaa9a5 .elementor-loop-container,
.elementor-element-6ac84ce .elementor-loop-container {
	display: block;
	overflow: hidden;
}
.elementor-element-abaa9a5 .elementor-loop-container > .swiper-wrapper,
.elementor-element-6ac84ce .elementor-loop-container > .swiper-wrapper {
	display: flex;
	flex-direction: row;
}
.elementor-element-abaa9a5 .swiper-slide,
.elementor-element-6ac84ce .swiper-slide {
	flex-shrink: 0;
	width: calc((100% - 10px) / 2);
	margin-inline-start: 10px;
}
@media (min-width: 1025px) {
	.elementor-element-abaa9a5 .swiper-slide,
	.elementor-element-6ac84ce .swiper-slide {
		width: calc((100% - 30px) / 4);
	}
}


/* ==========================================================================
   SoloClass — design corrections
   Appended to soloclass-fixes.css at deploy time. Kept as its own file so the
   design pass can be read on its own.

   The brand is black, white and grey. Nothing here introduces another hue,
   and everything here that carried one before takes it out.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The palette
   -------------------------------------------------------------------------- */
:root {
	--solofix-ink: #0a0a0a;
	--solofix-paper: #ffffff;
	--solofix-line: #d9d6d0;
	--solofix-muted: #5f5f5f;
	--solofix-soft: #f6f6f4;
}


/* --------------------------------------------------------------------------
   Product card action button.

   WooCommerce's own .button rules are more specific than a single class, so
   the card button was rendering in WooCommerce's default lilac, in the normal
   flow, and sitting on top of the price. Every visual property is stated
   here, and the button is taken out of the flow into the strip the card
   reserves for it.
   -------------------------------------------------------------------------- */
.e-loop-item .solofix-atc,
.woocommerce .e-loop-item .solofix-atc,
a.solofix-atc,
button.solofix-atc {
	position: absolute !important;
	inset-inline: 12px !important;
	bottom: 12px !important;
	inset-block-start: auto !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;

	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: .01em !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;

	color: var(--solofix-ink) !important;
	background: var(--solofix-paper) !important;
	border: 1px solid var(--solofix-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer;
	z-index: 4;
	transition: background-color .18s ease, color .18s ease;
}
.e-loop-item .solofix-atc:hover,
.e-loop-item .solofix-atc:focus-visible,
a.solofix-atc:hover,
button.solofix-atc:hover {
	color: var(--solofix-paper) !important;
	background: var(--solofix-ink) !important;
	border-color: var(--solofix-ink) !important;
}
.e-loop-item .solofix-atc.loading,
.e-loop-item .solofix-atc.added {
	opacity: .7 !important;
}
/* WooCommerce prints its own "view cart" link after an ajax add. The drawer
   already opens; the extra link only breaks the grid. */
.e-loop-item .added_to_cart,
.e-loop-item .add_to_cart_button.added + .added_to_cart {
	display: none !important;
}

/* The strip the button sits in, reserved before the button exists — in the
   grid and inside a carousel alike. */
.e-loop-item,
.elementor-widget-loop-carousel .e-loop-item,
.swiper-slide .e-loop-item {
	position: relative;
	padding-bottom: 68px !important;
	box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   The discount badge: black on the picture, white type. No second colour.
   -------------------------------------------------------------------------- */
.solofix-sale-badge {
	background: var(--solofix-ink) !important;
	color: var(--solofix-paper) !important;
	border-radius: 0 !important;
	padding: 5px 9px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	line-height: 1 !important;
}


/* --------------------------------------------------------------------------
   Carousel arrows.

   They were sitting on top of the product photographs. They now sit under the
   carousel, centred, as a matched pair, in the space the carousel reserves
   for them, so they never cover a picture at any width.
   -------------------------------------------------------------------------- */
.elementor-widget-loop-carousel .swiper,
.elementor-widget-nested-carousel .swiper {
	padding-bottom: 56px !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button,
.elementor-widget-loop-carousel .swiper-button-next,
.elementor-widget-loop-carousel .swiper-button-prev,
.elementor-widget-nested-carousel .elementor-swiper-button,
.elementor-widget-media-carousel .elementor-swiper-button {
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	transform: none !important;
	margin: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;

	color: var(--solofix-ink) !important;
	background: var(--solofix-paper) !important;
	border: 1px solid var(--solofix-ink) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	opacity: 1 !important;
	font-size: 15px !important;
	z-index: 5;
	transition: background-color .18s ease, color .18s ease;
}
.elementor-widget-loop-carousel .elementor-swiper-button:hover,
.elementor-widget-nested-carousel .elementor-swiper-button:hover {
	background: var(--solofix-ink) !important;
	color: var(--solofix-paper) !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button svg,
.elementor-widget-nested-carousel .elementor-swiper-button svg {
	fill: currentColor !important;
	width: 14px !important;
	height: 14px !important;
}
/* The pair sits either side of the centre line. */
.elementor-widget-loop-carousel .elementor-swiper-button-prev,
.elementor-widget-loop-carousel .swiper-button-prev,
.elementor-widget-nested-carousel .elementor-swiper-button-prev {
	inset-inline-start: calc(50% + 8px) !important;
	inset-inline-end: auto !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button-next,
.elementor-widget-loop-carousel .swiper-button-next,
.elementor-widget-nested-carousel .elementor-swiper-button-next {
	inset-inline-start: auto !important;
	inset-inline-end: calc(50% + 8px) !important;
}
/* The announcement strip in the header is a carousel too, and must keep its
   own tight geometry. */
.elementor-element-3d8e61b .swiper {
	padding-bottom: 0 !important;
}
.elementor-element-3d8e61b .elementor-swiper-button {
	display: none !important;
}


/* --------------------------------------------------------------------------
   The size chooser sheet: the same button language as the rest of the site.
   -------------------------------------------------------------------------- */
.solofix-variation {
	border-radius: 0 !important;
	border-color: var(--solofix-line) !important;
	color: var(--solofix-ink) !important;
	background: var(--solofix-paper) !important;
}
.solofix-variation:hover:not(:disabled),
.solofix-variation:focus-visible {
	border-color: var(--solofix-ink) !important;
	background: var(--solofix-soft) !important;
}
.solofix-sheet-panel { border-radius: 0 !important; }
.solofix-sheet-title {
	font-weight: 400 !important;
	letter-spacing: .01em;
}


/* --------------------------------------------------------------------------
   The overlay on the opening picture.

   The button now speaks the site's button language: a solid white block, no
   rounding, wide letter spacing, and a real hover.
   -------------------------------------------------------------------------- */
.solofix-hero {
	padding: 26px 20px 30px;
	/* Deep enough behind the words that the text is legible whatever the
	   photograph is doing there, and clear again by the top of the frame.

	   The mid stops were raised when the hero became a real photograph: the
	   old picture faded to black exactly where the sub-line sits, the new one
	   has a lit shoulder there, and white 13.5px text on it measured 4.35:1 -
	   just under the 4.5:1 that size needs. The strength is spent on the band
	   the words occupy and released again above it, so the jewellery further
	   up the frame is untouched. */
	background: linear-gradient(to top, rgb(0 0 0 / .90), rgb(0 0 0 / .74) 46%,
		rgb(0 0 0 / .40) 82%, transparent);
}
.solofix-hero h2 {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgb(0 0 0 / .45);
}
.solofix-hero p {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: .01em;
	color: #f2f2f2;
	text-shadow: 0 1px 10px rgb(0 0 0 / .45);
}
.solofix-hero a {
	min-height: 48px;
	padding: 15px 42px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--solofix-ink);
	background: var(--solofix-paper);
	border: 1px solid var(--solofix-paper);
	border-radius: 0;
	transition: background-color .2s ease, color .2s ease;
}
.solofix-hero a:hover,
.solofix-hero a:focus-visible {
	background: transparent;
	color: var(--solofix-paper);
}
@media (min-width: 768px) {
	/* Lifted off the bottom edge: the hero fills the viewport on a desktop,
	   and at 900 pixels tall the button was landing on the fold. */
	.solofix-hero {
		padding: 20px 40px 34px;
		bottom: 4%;
	}
	.solofix-hero h2 { font-size: 46px; }
	.solofix-hero p { font-size: 15.5px; margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   How far up the picture the darkening reaches.

   The overlay is bottom-anchored and its height comes from its own content,
   so it is a fixed ~245px. The hero is min(772px, 100vh - 290px), which is
   772px on a tall desktop and 430px on a 720px-high window. The share of the
   photograph the scrim covered therefore depended on the reader's window,
   and nobody had measured it:

       1920x1080   hero 772px   scrim covered 32%   headline at 67% down
       1440x900    hero 610px   scrim covered 40%   headline at 60%
       1440x800    hero 510px   scrim covered 48%   headline at 54%
       1280x720    hero 430px   scrim covered 57%   headline at 47%  <- centre

   On a short window the black began barely a third of the way down and the
   headline sat in the middle of the models' faces. Two changes, together:

   1. The gradient now clears completely by 72% of the box instead of 82%,
      and gives up most of its strength in the lower half, so the visible
      darkening starts lower even where the box itself is unchanged.
   2. On a short viewport the type steps down, which shortens the box - the
      only thing that actually moves its top edge down the picture.

   The text still has to stay readable; every change here was measured
   against the brightest pixel behind the words, not judged by eye.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	/*
	   The darkening moves off the text block and onto the picture.

	   It used to be the text block's own background, and that is why it could
	   not be fixed by changing the gradient: the words fill the block, so the
	   top of the block is where the headline is. Lightening the top to keep
	   the black off the models' faces put the headline on a bright backdrop -
	   measured at 1.21:1 against the 3:1 it needs.

	   As a layer on the hero itself it is sized as a share of the PICTURE,
	   which is the thing the client is comparing it against, and it is free
	   to be taller than the text so the fade happens above the words instead
	   of across them. z-index 1 puts it over the photograph and under the
	   text block, which sits at 5.
	*/
	.solofix-hero { background: none; }

	.soloclass-banner::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 52%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to top,
			rgb(0 0 0 / .92) 0%,
			rgb(0 0 0 / .86) 45%,
			rgb(0 0 0 / .66) 70%,
			rgb(0 0 0 / .26) 86%,
			transparent 100%);
	}
}

/* A short desktop window: shrink the block so it keeps its share of the
   picture rather than swallowing it. */
@media (min-width: 768px) and (max-height: 860px) {
	.solofix-hero {
		padding: 14px 40px 26px;
		bottom: 3%;
	}
	.solofix-hero h2 { font-size: 38px; margin-bottom: 6px; }
	.solofix-hero p { font-size: 14.5px; margin-bottom: 16px; }
	.solofix-hero a { min-height: 44px; padding: 12px 34px; }
}

@media (min-width: 768px) and (max-height: 760px) {
	.solofix-hero {
		padding: 10px 40px 20px;
		bottom: 2%;
	}
	.solofix-hero h2 { font-size: 32px; margin-bottom: 4px; }
	.solofix-hero p { font-size: 13.5px; margin-bottom: 12px; }
	.solofix-hero a { min-height: 42px; padding: 11px 30px; font-size: 13px; }
}


/* --------------------------------------------------------------------------
   Black and white only.

   Every green on the storefront, and the colours this engagement itself
   introduced, come back to the palette. The greens were: the stock line, the
   WhatsApp mark in the reassurance row, and the success messages printed by
   the notify-me, wishlist-watch and complete-the-set features.
   -------------------------------------------------------------------------- */
.stock,
p.stock,
.solofix-stock,
.woocommerce div.product .stock,
.woocommerce div.product p.stock {
	color: var(--solofix-ink) !important;
	font-size: 13.5px;
	font-weight: 700;
}
.stock.out-of-stock,
p.stock.out-of-stock {
	color: var(--solofix-muted) !important;
}

/* The WhatsApp mark in the reassurance row and anywhere else it appears. */
.solo-trust-wa svg path,
.solo-trust-wa svg,
.e-contact-buttons svg[fill="#25D366"],
svg[fill="#25D366"] path,
svg[fill="#25d366"] path {
	fill: var(--solofix-ink) !important;
}

/* Success and error messages printed inline by the site's own features. */
#solo-wl-watch-msg,
#solo-notify-msg,
.solo-set-msg,
.solo-notify-msg {
	color: var(--solofix-ink) !important;
}

/* The badge counters were red. */
.solo-wl-count,
.elementor-button-icon-qty,
.elementor-menu-cart__toggle .elementor-button-icon-qty {
	background: var(--solofix-ink) !important;
	color: var(--solofix-paper) !important;
}

/* The sale price and the "clear all" control. */
.price ins,
.price ins .amount,
.price ins .woocommerce-Price-amount,
.price ins .woocommerce-Price-currencySymbol,
.woocommerce .price ins,
.woocommerce div.product .price ins {
	color: var(--solofix-ink) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.price del,
.price del .amount,
.woocommerce .price del {
	color: var(--solofix-muted) !important;
}
#solo-filters-root .solo-filters-clear,
.solo-filters-clear {
	color: var(--solofix-ink) !important;
}

/* Hello Elementor's default link colour is a magenta that shows on anything
   the theme has not styled, starting with the skip link. */
a.skip-link,
.elementor a:not([class]),
.woocommerce-info a,
.woocommerce-message a {
	color: var(--solofix-ink);
}

/* 4.3 A link that is only told apart by its colour is not told apart at all. */
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.elementor-field-type-acceptance a,
form .elementor-field-label a,
.elementor-widget-form a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}


/* --------------------------------------------------------------------------
   4.4  The Instagram widget, from this side of the fence.

        The counters said 798 followers directly under a page that says
        "over 2,465 satisfied customers", and the blue Follow button is the
        only blue on the site. The pictures stay; the chrome goes.
   -------------------------------------------------------------------------- */
.eapps-instagram-feed-header-stats,
.eapps-instagram-feed-header-stats-item,
.eapps-instagram-feed-header-follow-button-wrapper,
.eapps-instagram-feed-header-follow-button,
.eapps-instagram-feed-header-info,
.eapps-instagram-feed-title-container {
	display: none !important;
}
.eapps-instagram-feed-popup-wrapper,
.eapps-instagram-feed-popup {
	display: none !important;
}


/* --------------------------------------------------------------------------
   4.5  The two Elfsight widgets keep their own colours.

        These were desaturated for a round, to hold the black-and-white brief.
        The client asked for the colour back: a Google rating that is not gold
        does not read as a Google rating, and the Instagram feed is the brand's
        own photography. The filter is gone, and so is the ink value that only
        existed to rescue the stars from it.

        What stays below is the part that was never about colour: the review
        text and the relative date failed contrast at Elfsight's own values,
        and the date comes back from their server in English, which an RTL
        paragraph re-orders unless the run is isolated.
   -------------------------------------------------------------------------- */

/* The review text failed contrast at its own colour; ink is the house value.
   Measured with axe: the relative date ("8 days ago") was #848485 on #f6f6f8,
   which is 3.46:1 against a 4.5 requirement at 12px. The es-* hooks are
   Elfsight's documented custom-CSS API; the sibling hashed styled-component
   classes change on every release and are deliberately not used. */
.es-review-content,
.es-review-content *,
[class*="ReviewContent"],
[class*="ReviewContent"] * {
	color: #3d3b38 !important;
}
.es-review-info-date,
.es-review-info-date-container,
.es-review-info-date-container * {
	color: #5a5a5a !important;
}

/* The widget's relative dates come back from Elfsight in English ("19 days
   ago"). Dropped into an RTL paragraph they were re-ordered to "days ago 19".
   Isolating the run as left-to-right puts the words back in their own order.
   Getting them into Hebrew is a language setting in the Elfsight dashboard
   and cannot be done from here. */
.es-review-info-date,
.es-review-info-date-container {
	direction: ltr !important;
	unicode-bidi: isolate !important;
	display: inline-block !important;
}

/*
 * The carousel arrows carry a 1px pink ring. That pink is this site's own
 * leak - the theme paints every button #c36 - not Elfsight's, so the filter
 * would only disguise it.
 */
.eapps-instagram-feed-posts-slider-nav {
	border-color: transparent !important;
	color: inherit !important;
}


/* --------------------------------------------------------------------------
   PageSpeed: the consent button was animating padding and margin, which the
   browser cannot hand to the compositor.
   -------------------------------------------------------------------------- */
#ds-consent-popup .ds-consent-btn,
#ds-consent-popup .ds-close-btn,
#ds-manage-panel .ds-consent-btn {
	transition-property: background-color, color, opacity, transform !important;
	transition-duration: .18s !important;
}


/* --------------------------------------------------------------------------
   4.3  The wishlist heart on a product card measured 2.85:1 in grey on white,
        and turned red when it was on. Black and white, and readable.
   -------------------------------------------------------------------------- */
.solo-wl-heart[data-active="0"],
.solo-wl-heart {
	color: #5f5f5f !important;
}
.solo-wl-heart[data-active="1"] {
	color: #0a0a0a !important;
}

/* --------------------------------------------------------------------------
   4.6  The hero's call to action, on the windows people actually have.

        Measured on the live home page, first visit:
          1440x900   button at 823-876, consent strip starts at 833 -> 43px of
                     the button covered
          1440x780   96px of the button below the fold, 163px under the strip
          1366x700   170px below the fold
        1366x768 is the commonest laptop screen there is, and after the browser
        chrome that is about 700px of page - so on the most ordinary desktop
        setup the one button the hero exists for was never on screen.

        The cause is arithmetic, not styling: the hero's Elementor min-height
        is a fixed 772px and it starts about 195px down, under the announcement
        bar and the header, so it needs 967px of window before its last row is
        visible. The cap makes the hero fit the window it is in, leaving room
        for the header above and the consent strip below; the background is
        cover, so the photograph crops rather than distorts. min() means the
        hero is never taller than the 772px the design asks for, only shorter
        when the window is short.

        Mobile is already correct - measured 519-572 against a strip at 735 -
        so the rule starts at the desktop breakpoint.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.soloclass-banner {
		--min-height: min(772px, calc(100vh - 290px)) !important;
		min-height: min(772px, calc(100vh - 290px)) !important;
	}
}


/* --------------------------------------------------------------------------
   4.7  The product page's decision area, styled before the footer arrives.

        The material chip, the delivery estimate, the reassurance row and the
        buttons bar are now rendered by the server (parts/product-blocks.php),
        so they exist at first paint instead of being inserted by four Code
        Snippets afterwards - which was the desktop layout shift of 0.093.
        Their styles, though, still live in <style> blocks the snippets print
        at the foot of the page. Repeated here, so the blocks are dressed at
        the moment they are painted rather than a moment later. The rules are
        the snippets' own, verbatim, so nothing changes when the footer's copy
        applies on top.
   -------------------------------------------------------------------------- */
.solo-material {
	display: inline-block;
	align-self: flex-start;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	direction: rtl;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #0a0a0a;
	background: #fff;
	border: 1px solid #0a0a0a;
	padding: 5px 11px;
	margin: 9px 0 2px;
}
.solo-eta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0;
	padding: 12px 16px;
	border: 1px solid #d8d8d3;
	background: #faf8f5;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	direction: rtl;
	text-align: right;
}
.solo-eta svg { flex-shrink: 0; margin-top: 2px; }
.solo-eta-main { font-size: 14.5px; color: #0a0a0a; font-weight: 600; line-height: 1.5; }
.solo-eta-main strong { font-weight: 700; }
.solo-eta-sub { font-size: 12.5px; color: #6b6b66; margin-top: 3px; line-height: 1.5; }
.solo-trust {
	direction: rtl;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	margin: 14px 0 4px;
	border: 1px solid #e2e2df;
	background: #faf8f5;
	padding: 13px 15px;
}
.solo-trust ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 16px;
}
.solo-trust li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: #2b2926;
}
.solo-trust li svg { flex: 0 0 auto; margin-top: 2px; }
.solo-trust li b { font-weight: 700; color: #0a0a0a; }
.solo-trust-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid #e6e4e0;
	font-size: 13.5px;
	color: #2b2926;
	text-decoration: none;
}
.solo-trust-wa strong { color: #0a0a0a; text-decoration: underline; }
.solo-pm-bar { display: flex; flex-wrap: nowrap; gap: 8px; margin: 14px 0 4px; direction: rtl; }
.solo-pm-bar > .solo-pm-btn,
.solo-pm-bar > .solo-sizebtn {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	white-space: nowrap;
	padding: 12px 14px !important;
	gap: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	height: auto;
	box-sizing: border-box;
}
.solo-pm-btn {
	display: inline-flex; align-items: center; gap: 8px;
	flex: 1 1 0; justify-content: center;
	padding: 12px 18px;
	border: 1px solid #0a0a0a; background: #fff; color: #0a0a0a;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; font-weight: 600;
	cursor: pointer; border-radius: 0;
	transition: background-color .18s ease, color .18s ease;
}
.solo-pm-btn:hover { background: #0a0a0a; color: #fff; }
.solo-pm-btn:hover svg { stroke: #fff; }
body.solo-has-pm .elementor-widget-woocommerce-product-content { display: none !important; }

/* The quantity control's static twin (parts/product-blocks.php): the same
   geometry snippet 83 builds - measured wrapper 77px plus a 12px margin - and
   gone the instant the real control is in the form. */
.solofix-qty-skeleton {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	flex: 0 0 auto;
	order: 0;
	direction: rtl;
	text-align: right;
}
.solofix-qty-skeleton .solofix-qty-label {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: #0a0a0a;
	margin: 0 0 7px;
	font-family: Arial, Helvetica, sans-serif;
}
.solofix-qty-skeleton .solofix-qty-box {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 160px;
	max-width: 100%;
	height: 50px;
	min-height: 50px;
	border: 1px solid #0a0a0a;
	background: #fff;
	box-sizing: border-box;
	direction: ltr;
}
.solofix-qty-skeleton .solofix-qty-box b {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 22px/1 Arial, sans-serif;
	font-weight: 400;
	color: #0a0a0a;
}
.solofix-qty-skeleton .solofix-qty-box i {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 16px/1 Arial, sans-serif;
	font-style: normal;
	color: #0a0a0a;
}
form.cart:has(.solo-qtybox) .solofix-qty-skeleton,
.solofix-qty-skeleton.is-replaced {
	display: none !important;
}
@media (max-width: 480px) {
	.solo-trust ul { grid-template-columns: 1fr; gap: 8px; }
	.solo-trust { padding: 12px 13px; }
}
@media (max-width: 600px) {
	.solo-pm-bar { gap: 6px; }
	.solo-pm-bar > .solo-pm-btn,
	.solo-pm-bar > .solo-sizebtn { font-size: 12.5px; padding-inline: 8px; gap: 5px; }
	.solo-pm-bar > .solo-pm-btn svg,
	.solo-pm-bar > .solo-sizebtn svg { display: none; }
}


/* --------------------------------------------------------------------------
   4.8  The header, inverted.

        Black becomes white and white becomes black, as asked. Every value
        below is the exact per-channel inverse (255 - c) of what was measured
        on the live header, so nothing is invented: the three rows were
        #000000, the announcement rule #EFEFEF, the menu items #EFEFEF, the
        dropdown panel #FFFFFF with #33373D text.

        Two deliberate departures from a strict inversion, both because a
        strict one is worse to look at:

          - The cart counter keeps its dark bubble with white digits. Inverted
            it would be #F5F5F5 on a white bar, which is a counter nobody can
            read. Dark on light is also the pairing the rest of the site uses.
          - The side cart drawer is left alone. It is not the header, it opens
            over the page as its own surface, and inverting it would leave the
            shop with two different ideas of what a panel looks like.

        Everything carries !important because this stylesheet reaches the
        browser inside the package's used-CSS blob, which is read BEFORE
        Elementor's own per-element CSS - so a tie would go to Elementor.
   -------------------------------------------------------------------------- */

/* The three rows of the header. */
.elementor-22 .elementor-element.elementor-element-9b72ac5:not(.elementor-motion-effects-element-type-background),
.elementor-22 .elementor-element.elementor-element-3f34224:not(.elementor-motion-effects-element-type-background),
.elementor-22 .elementor-element.elementor-element-eae1d14:not(.elementor-motion-effects-element-type-background) {
	background-color: #ffffff !important;
}

/* The rule under the announcement bar. */
.elementor-22 .elementor-element.elementor-element-9b72ac5 {
	border-color: #101010 !important;
	--border-color: #101010;
}

/* The three announcement slides. */
.elementor-22 .elementor-element.elementor-element-0d25ca2 .elementor-heading-title,
.elementor-22 .elementor-element.elementor-element-d1cfe7c .elementor-heading-title,
.elementor-22 .elementor-element.elementor-element-e30d381 .elementor-heading-title {
	color: #000000 !important;
}

/*
 * The logo. Its pixels are baked into a PNG - a black plate with white type -
 * so CSS can only invert the whole picture. That is safe here and only here:
 * the file was checked and is pure greyscale, with no pixel carrying any
 * channel spread, so inverting turns the plate white and the type black with
 * no hue shift at all. It is still a stopgap. The real fix is a second logo
 * file, white plate and black type, uploaded and set as the site logo; the day
 * anyone uploads a coloured one, this rule would show a negative.
 */
.elementor-22 .elementor-element.elementor-element-70c6d97 img {
	filter: invert(1) !important;
}

/* The three uploaded SVGs - search, account, cart. Their fill lives on the
   <path> as a presentation attribute, so the path has to be named. */
.elementor-22 .elementor-element.elementor-element-6a623eb .elementor-icon-list-icon svg,
.elementor-22 .elementor-element.elementor-element-6a623eb .elementor-icon-list-icon svg path,
.elementor-22 .elementor-element.elementor-element-ad10d10 .elementor-menu-cart__toggle svg,
.elementor-22 .elementor-element.elementor-element-ad10d10 .elementor-menu-cart__toggle svg path {
	fill: #000000 !important;
}
.elementor-22 .elementor-element.elementor-element-ad10d10 {
	--toggle-button-icon-color: #000000;
}

/* The main navigation. */
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--main .elementor-item,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--main .elementor-item {
	color: #101010 !important;
	fill: #101010 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--main .elementor-item:hover,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--main .elementor-item:focus,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--main .elementor-item:hover,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--main .elementor-item:focus {
	color: #131413 !important;
	fill: #131413 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f,
.elementor-22 .elementor-element.elementor-element-1f5e860 {
	--e-nav-menu-divider-color: #101010;
}

/* The dropdown, which is both the desktop sub-menu and the mobile panel.
   The carets had no fill of their own and would have vanished on black. */
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown {
	background-color: #000000 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a {
	color: #ccc8c2 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown .sub-arrow svg,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown .sub-arrow svg path,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown .sub-arrow svg,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown .sub-arrow svg path {
	fill: #ccc8c2 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a:hover,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a:focus,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a.highlighted,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a:hover,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a:focus,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a.highlighted {
	background-color: #131413 !important;
	color: #ffffff !important;
}

/* The burger, and the close button it turns into. */
.elementor-22 .elementor-element.elementor-element-6ff9b7f div.elementor-menu-toggle,
.elementor-22 .elementor-element.elementor-element-1f5e860 div.elementor-menu-toggle {
	color: #000000 !important;
	background-color: rgba(255, 255, 255, .05) !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f div.elementor-menu-toggle svg,
.elementor-22 .elementor-element.elementor-element-6ff9b7f div.elementor-menu-toggle svg path,
.elementor-22 .elementor-element.elementor-element-1f5e860 div.elementor-menu-toggle svg,
.elementor-22 .elementor-element.elementor-element-1f5e860 div.elementor-menu-toggle svg path {
	fill: #000000 !important;
}


/* ==========================================================================
   4.9  The last of the green.

   The kit (post 18) defines two of its six global colours as #52594F, a muted
   olive that Elementor then hands to forty separate rules: every heading, the
   archive titles, the product titles and prices, the cart totals, the swiper
   arrows, the icon-list icons, the checkout button and every button widget.
   On the contact page it is at its most obvious, because there it paints the
   three button faces as well as the page title - which is why it was noticed
   there - but the same green is on every page of the site.

   Changing the two variables settles all forty rules at once, in one place,
   without touching the kit itself: the site keeps its own definition, and
   this simply outranks it. Both variables become black, which is what every
   one of those forty uses wants in a black and white brand - the buttons all
   carry white text, and the headings all sit on white.

   Two neighbours go with it, so nothing is left tinted:
     #69727D  Elementor's stock field border, a blue-grey, on the contact
              form's inputs and textarea. It becomes a neutral #767676, which
              still clears the 3:1 that WCAG 1.4.11 asks of a control border.
     #ccc8c2  the warm off-white this project used for the dropdown links
              when the header was inverted. Neutral grey now.
   ========================================================================== */

html body.elementor-kit-18 {
	--e-global-color-primary: #000000 !important;
	--e-global-color-accent: #000000 !important;
}

/* Elementor's own default palette, used where the kit has nothing to say:
   the contact form's field borders are the only place it shows. */
body .elementor-widget-form .elementor-field-group .elementor-field,
body .elementor-widget-form .elementor-field-group .elementor-field-textual,
body .elementor-field-textual {
	border-color: #767676;
}

/* The dropdown links, from the header inversion, made neutral. */
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown a,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown a {
	color: #c9c9c9 !important;
}
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown .sub-arrow svg,
.elementor-22 .elementor-element.elementor-element-6ff9b7f .elementor-nav-menu--dropdown .sub-arrow svg path,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown .sub-arrow svg,
.elementor-22 .elementor-element.elementor-element-1f5e860 .elementor-nav-menu--dropdown .sub-arrow svg path {
	fill: #c9c9c9 !important;
}

/* The cart toggle in the header still inherited Elementor's stock #69727D.
   The icon itself is painted from --toggle-button-icon-color, so nothing was
   visibly blue-grey, but the element carried the colour and any text inside
   it would have picked it up. */
.elementor-22 a#elementor-menu-cart__toggle_button,
.elementor-22 a#elementor-menu-cart__toggle_button .elementor-button-text {
	color: #000000 !important;
}


/* ==========================================================================
   4.10  The category banner, actually shown.

   Template 256 draws the category hero from two dynamic tags - WooCommerce's
   category image for the desktop and an ACF field for the phone - and
   Elementor writes those out at runtime as a bare background-image rule. The
   background_size: cover and background_position: top center that the
   template carries never reach the browser with them: post 256's generated
   _elementor_css holds no background declaration at all.

   So the banner was being painted at the file's natural size, from the top
   left, and tiled. Measured on every one of the eleven categories:

       desktop 1440x512 box, 1600x640 file  ->  left 90%, top 80% shown
       phone     390x160 box, 1000x400 file ->  left 39%, top 40% shown

   On a phone that is 61% of the picture thrown away, and always the same
   corner - which is why the phone banners never showed the piece even when
   the file did. Cover and centre put the whole frame back.
   ========================================================================== */

.elementor-256 .elementor-element.elementor-element-1b03c61,
.elementor-256 .elementor-element.elementor-element-1b03c61:not(.elementor-motion-effects-element-type-background),
.elementor-256 .elementor-element.elementor-element-1b03c61 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}


/* ==========================================================================
   4.11  The contact hero, on a phone.

   The picture beside the contact form is a child container fixed at 50% of
   the row. On a phone the row stacks, the child has nothing in it and no
   height of its own, and the element measures 390x0 - the hero is simply not
   there. Giving it the shape of its own file brings it back above the form,
   which is where the desktop layout puts it too.
   ========================================================================== */

@media (max-width: 767px) {
	.elementor-37 .elementor-element.elementor-element-585522d {
		--width: 100% !important;
		width: 100% !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1;
		background-size: cover !important;
		background-position: center center !important;
		margin-bottom: 18px;
	}
}

/* On a phone the hero is the whole 1080 square and the headline lands across
   two lit shoulders, where 0.1% of the backdrop still measured 2.78:1 against
   the 3:1 that 30px white text needs. A little more scrim over the band the
   headline occupies closes it; the desktop stops are left alone, where the
   same measurement already passes at 3.59:1 on its brightest pixel. */
@media (max-width: 767px) {
	.solofix-hero {
		background: linear-gradient(to top, rgb(0 0 0 / .92), rgb(0 0 0 / .76) 46%,
			rgb(0 0 0 / .42) 82%, transparent);
	}
}