/*
 * MONÉCO UX – Tier 1 (safe fixes). Loaded after Avada's compiled CSS.
 * Palette: warm ink / cream / sage / clay. All text pairs meet WCAG AA (≥ 4.5:1).
 *   ink   #2b2621 on cream  13.5:1     muted #6b645c on white  5.8:1
 *   white on sage #55644b    6.3:1     white on clay #94563f   5.7:1
 */

:root,
body {
	--mn-ink: #2b2621;
	--mn-text: #3f3a34;
	--mn-muted: #6b645c;
	--mn-cream: #f7f3ec;
	--mn-sand: #ece5d9;
	--mn-line: #e3dacd;
	--mn-sage: #55644b;
	--mn-sage-dark: #424e3a;
	--mn-clay: #94563f;
	--mn-cta: #4f7a2a;       /* the shop's green CTA, darkened from #5a8f2d (3.9:1) to pass AA: 5.1:1 */
	--mn-cta-hover: #3f6421;
	--mn-radius: 3px;
	--mn-focus: 0 0 0 3px rgba(85, 100, 75, .35);

	/* Brand type: Jost – the open-source Futura the MONÉCO wordmark is drawn in (pointed M,
	   round O/C). Avada self-hosts it (Options › Typography, weights 300/400/500/600). */
	--mn-sans: Jost, "Helvetica Neue", Arial, sans-serif;
	--mn-track: .14em;  /* the wordmark's wide tracking, for uppercase UI labels */

	/* One type scale across the site (Avada reads these variables). */
	--body_typography-font-size: 16px;
	--body_typography-line-height: 1.65;
	--body_typography-color: var(--mn-text);
	--link_color: var(--mn-ink);
	--h1_typography-font-size: clamp(28px, 2.2vw + 18px, 44px);
	--h1_typography-line-height: 1.15;
	--h1_typography-letter-spacing: 0;
	--h1_typography-color: var(--mn-ink);
	--h2_typography-font-size: clamp(24px, 1.4vw + 17px, 34px);
	--h2_typography-line-height: 1.2;
	--h2_typography-letter-spacing: 0;
	--h2_typography-color: var(--mn-ink);
	--h3_typography-font-size: clamp(19px, .6vw + 16px, 23px);
	--h3_typography-letter-spacing: 0;
	--h3_typography-color: var(--mn-ink);
	--h4_typography-font-size: 18px;
	--h4_typography-letter-spacing: 0;
	--h4_typography-color: var(--mn-ink);
	--h5_typography-color: var(--mn-ink);
	--awb-color4: #6b645c;  /* was #747474 – fails AA on light backgrounds */
	--awb-color5: #5c564f;
	--awb-color6: var(--mn-ink);
	--awb-color7: var(--mn-text);
}

body {
	color: var(--mn-text);
	-webkit-font-smoothing: antialiased;
}
strong, b { font-weight: 600; }

/* Navigation and buttons: uppercase, tracked like the logo. */
.fusion-main-menu > ul > li > a,
.fusion-flyout-menu .fusion-menu > li > a,
.fusion-mobile-nav-holder li > a {
	font-family: var(--mn-sans) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: var(--mn-track) !important;
}

/* ---------- Headings: builder titles follow the scale, not per-element sizes ---------- */
.fusion-title h1.fusion-title-heading { font-size: var(--h1_typography-font-size) !important; line-height: 1.15 !important; }
.fusion-title h2.fusion-title-heading { font-size: var(--h2_typography-font-size) !important; line-height: 1.2 !important; }
.fusion-title h3.fusion-title-heading { font-size: var(--h3_typography-font-size) !important; line-height: 1.3 !important; }
.fusion-title .fusion-title-heading { letter-spacing: .01em !important; font-weight: 300; color: var(--mn-ink); }
.fusion-title .fusion-title-heading strong { font-weight: 400; }

/* ---------- Buttons ----------
 * Additional CSS (Customizer) prints after this file and sets #5a8f2d with
 * !important, hence the html body prefix to win on specificity.
 */
html body .fusion-button.button-default,
html body .woocommerce .button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body.single-product .summary .cart .single_add_to_cart_button.button.alt,
html body .single_add_to_cart_button,
html body .checkout-button,
html body #place_order {
	background: var(--mn-cta) !important;
	border: 1px solid var(--mn-cta) !important;
	color: #fff !important;
	border-radius: var(--mn-radius) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase;
	min-height: 46px;
	padding: 12px 22px !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	transition: background-color .15s ease;
}
html body .fusion-button.button-default:hover,
html body .woocommerce .button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body.single-product .summary .cart .single_add_to_cart_button.button.alt:hover,
html body.single-product .summary .cart .single_add_to_cart_button.button.alt:focus,
html body .single_add_to_cart_button:hover,
html body .checkout-button:hover,
html body #place_order:hover {
	background: var(--mn-cta-hover) !important;
	border-color: var(--mn-cta-hover) !important;
}
.fusion-button .fusion-button-text { color: inherit !important; }

/* ---------- Product cards ---------- */
ul.products li.product .fusion-product-wrapper {
	background: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
}
ul.products li.product .fusion-image-wrapper img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	background: var(--mn-sand);
}
/* Classic box design (Tier 3): one image ratio for every card, the hover photo crossfades on top. */
ul.products li.product .product-images .featured-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mn-sand);
}
ul.products li.product .product-images .featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
ul.products li.product .product-images .featured-image img.hover-image { position: absolute; inset: 0; }
ul.products li.product .fusion-product-content { flex: 1; display: flex; flex-direction: column; padding: 14px 0 0 !important; }
ul.products li.product .product-buttons .fusion-content-sep { display: none !important; }
ul.products li.product .product-title,
ul.products li.product .product-title a {
	font-family: var(--mn-sans) !important;
	font-style: normal !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
	color: var(--mn-ink) !important;
	text-align: left;
}
ul.products li.product .product-details-container { text-align: left !important; }
ul.products li.product .price { color: var(--mn-ink) !important; font-weight: 600; font-size: 15px; }
ul.products li.product .price del,
ul.products li.product .price del .amount { color: var(--mn-muted) !important; font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; color: var(--mn-clay) !important; }
ul.products li.product .product-buttons { margin-top: auto; padding-top: 12px; }
ul.products li.product .product-buttons-container { display: block !important; }
ul.products li.product .product-buttons .button,
ul.products li.product .product-buttons .add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none !important; /* Avada's classic box caps it at 49% (two buttons); "Детайли" is gone */
	min-height: 44px;
	padding: 10px 12px !important;
	float: none !important;
	text-align: center;
	white-space: normal;
}
ul.products li.product .product-buttons .button::before,
ul.products li.product .product-buttons .button i { display: none !important; } /* Avada's cart glyph */
@media (max-width: 600px) {
	/* Two narrow columns: sentence case so "Добавяне в количката" fits on one line. */
	ul.products li.product .product-buttons .button {
		font-size: 12px !important;
		letter-spacing: .02em !important;
		text-transform: none !important;
		padding: 10px 6px !important;
	}
	ul.products li.product .product-title,
	ul.products li.product .product-title a { font-size: 14px !important; }
}
/* "Детайли" is removed in PHP; hide any template copy that slips through. */
ul.products li.product .show_details_button { display: none !important; }

/* Out-of-stock badge: ink, same shape as the sale badge (was Avada's red pill). */
ul.products li.product .fusion-out-of-stock .fusion-position-text,
ul.products li.product .fusion-out-of-stock { background: var(--mn-ink) !important; color: #fff !important; }
ul.products li.product .fusion-out-of-stock { background: transparent !important; }
ul.products li.product .fusion-out-of-stock .fusion-position-text { border-radius: var(--mn-radius) !important; font: 500 11px/18px var(--mn-sans) !important; letter-spacing: .06em; }

/* Sale badge: brand clay instead of red pill */
.onsale,
.fusion-woo-badges-wrapper .onsale {
	background: var(--mn-clay) !important;
	color: #fff !important;
	border-radius: var(--mn-radius) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 8px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

/* ---------- Header ---------- */
.fusion-header-wrapper .fusion-header {
	background: #fff !important;
	border-bottom: 1px solid var(--mn-line);
}
.fusion-header-v6 .fusion-flyout-menu-icons { display: flex; align-items: center; gap: 6px; }
.mn-header-icons { display: flex !important; align-items: center; gap: 4px; }
.mn-hicon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--mn-ink) !important;
}
.mn-hicon:hover { color: var(--mn-sage) !important; }
.mn-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--mn-sage);
	color: #fff;
	font: 500 11px/18px var(--mn-sans);
	text-align: center;
}
.fusion-flyout-menu-icons .fusion-flyout-search-toggle,
.fusion-flyout-menu-icons .fusion-flyout-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.fusion-flyout-menu .fusion-menu > li > a .menu-text { letter-spacing: .08em; }
/* Sticky header (enabled for mobile/tablet in theme options) */
.fusion-is-sticky .fusion-header { box-shadow: 0 1px 0 var(--mn-line); }

/* ---------- Language switcher: keep it off the content on mobile ---------- */
@media (max-width: 800px) {
	#trp-floater-ls,
	.trp-floating-switcher {
		top: auto !important;
		bottom: 16px !important;
		left: 12px !important;
		right: auto !important;
		transform: scale(.9);
		transform-origin: bottom left;
	}
}

/* ---------- Cookie banner (Cookie Notice) ----------
 * A compact cream card in the brand type. "Приемам" and "Отказвам" are equal-size buttons
 * (refusing must be as easy as accepting). Selectors start with "html body" to beat the 2021
 * CSS Hero sheet (uploads/2021/04/csshero-static-style-avada.css: white box, black text and
 * buttons), which made "Отказвам" and "Научете повече" white on white.
 * After a choice nothing floats on screen: revoke mode is "manual" and the footer link
 * "Настройки за бисквитки" (.cn-revoke-cookie) reopens the banner.
 */
html body #cookie-notice {
	background: transparent !important;
	pointer-events: none;
	left: 0; right: 0; bottom: 0;
	min-width: 0 !important;
	font-family: var(--mn-sans);
	z-index: 100000;
}
html body #cookie-notice .cookie-notice-container {
	pointer-events: auto;
	position: relative;
	box-sizing: border-box;
	width: auto;
	max-width: 460px;
	margin: 0 0 24px 24px;
	padding: 22px 24px 20px !important;
	text-align: left;
	background: var(--mn-cream) !important;
	color: var(--mn-text) !important;
	border: 1px solid var(--mn-line);
	border-radius: 4px;
	box-shadow: 0 12px 40px rgba(43, 38, 33, .16);
}
html body #cookie-notice .cn-text-container {
	display: block;
	margin: 0 28px 16px 0 !important;
	font: 400 14px/1.6 var(--mn-sans);
	color: var(--mn-text) !important;
}
html body #cookie-notice .cn-buttons-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: center;
}
html body #cookie-notice .cn-button {
	margin: 0 !important;
	min-height: 44px;
	padding: 10px 14px !important;
	border-radius: 2px !important;
	font: 500 12px/1.2 var(--mn-sans) !important;
	letter-spacing: var(--mn-track) !important;
	text-transform: uppercase;
	box-shadow: none !important;
	cursor: pointer;
}
html body #cookie-notice #cn-accept-cookie,
html body #cookie-notice #cn-refuse-cookie { width: 100%; border: 1px solid var(--mn-ink) !important; }
html body #cookie-notice #cn-accept-cookie { background: var(--mn-ink) !important; color: #fff !important; }
html body #cookie-notice #cn-accept-cookie:hover { background: #000 !important; color: #fff !important; }
html body #cookie-notice #cn-refuse-cookie { background: transparent !important; color: var(--mn-ink) !important; }
html body #cookie-notice #cn-refuse-cookie:hover { background: var(--mn-ink) !important; color: #fff !important; }
html body #cookie-notice #cn-more-info {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 32px;
	padding: 4px 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--mn-ink) !important;
	text-transform: none;
	letter-spacing: .02em !important;
	font-size: 13px !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
html body #cookie-notice .cn-close-icon { top: 18px; right: 14px; margin: 0; width: 28px; height: 28px; opacity: .7; }
html body #cookie-notice .cn-close-icon::before,
html body #cookie-notice .cn-close-icon::after { background-color: var(--mn-ink) !important; height: 14px; top: 7px; left: 13px; }
html body #cookie-notice .cn-close-icon:hover { opacity: 1; }
html body #cookie-notice .cookie-revoke-container { display: none !important; }
@media (max-width: 600px) {
	html body #cookie-notice .cookie-notice-container { max-width: none; margin: 0 10px 10px; padding: 18px 16px 14px !important; }
	html body #cookie-notice .cn-text-container { font-size: 13px; line-height: 1.55; margin-bottom: 14px !important; }
}

/* Footer link that reopens the cookie banner (looks like the other footer links). */
.fusion-tb-footer a.cn-revoke-cookie { cursor: pointer; }

/* ---------- Footer ---------- */
.fusion-tb-footer { background: var(--mn-cream); color: var(--mn-text); }
.fusion-tb-footer a { color: var(--mn-ink) !important; }
.fusion-tb-footer a:hover { color: var(--mn-sage) !important; }
.fusion-tb-footer .fusion-text a,
.fusion-tb-footer .menu a { display: inline-block; padding: 6px 0; }
.fusion-tb-footer .fusion-social-network-icon,
.fusion-tb-footer .awb-icon-instagram,
.fusion-tb-footer .awb-icon-facebook { min-width: 44px; min-height: 44px; }

/* ---------- Forms ---------- */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-checkout input.input-text,
input[type="email"],
input[type="text"],
input[type="tel"] {
	min-height: 44px;
	border-color: #cfc5b6 !important;
	border-radius: var(--mn-radius);
}
.quantity .qty,
.quantity .minus,
.quantity .plus { min-height: 44px; min-width: 44px; }

/* ---------- Focus visibility (keyboard users) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--mn-sage) !important;
	outline-offset: 2px;
	box-shadow: var(--mn-focus);
}

/* ---------- Video hero: visible without waiting for JS (no "Зареждане..." spinner) ---------- */
.fusion-slider-loading { display: none !important; }
.tfs-slider .slides > li:first-child { display: block; }
.tfs-slider .slide-content-container .slide-content { opacity: 1 !important; }
.tfs-slider .slide-content-container .heading h2 { text-shadow: 0 1px 18px rgba(0, 0, 0, .25); }
@media (max-width: 800px) {
	/* 650px tall hero on a phone pushed every product below the fold */
	#sliders-container .fusion-slider-container,
	#sliders-container .tfs-slider .background,
	#sliders-container .tfs-slider .slides > li { height: min(56vh, 440px) !important; }
	.tfs-slider .slide-content-container h2 { font-size: 34px !important; line-height: 1.2 !important; }
}

/* ---------- Page heading added for pages that had no H1 ---------- */
.mn-page-head {
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 6% 8px;
}
.mn-page-title {
	margin: 0 !important;
	font-family: var(--mn-sans);
	font-weight: 300 !important;
	letter-spacing: .01em;
	font-size: clamp(26px, 1.6vw + 18px, 38px) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: var(--mn-ink) !important;
}

/* Builder titles: one case style (some were Title Case, some ALL CAPS) */
.fusion-title .fusion-title-heading { text-transform: none !important; }

/* Mobile header: logo stays centred, icons never overlap it */
@media (max-width: 800px) {
	.fusion-header-v6 .fusion-flyout-menu-icons { gap: 0; }
	.mn-hicon { width: 40px; height: 40px; }
	.fusion-flyout-menu-icons .fusion-flyout-search-toggle { min-width: 40px; }
}
@media (max-width: 600px) {
	.mn-hicon--account { display: none !important; }  /* "Моят профил" stays in the menu */
	.fusion-header-v6 .fusion-logo img { max-width: 140px; height: auto; }
}
.fusion-flyout-menu-icons .mn-header-icons { padding: 0 !important; margin: 0 !important; width: auto !important; }
.fusion-flyout-menu-icons .fusion-flyout-search-toggle { width: 44px; padding: 0 !important; margin: 0 !important; }
.fusion-flyout-search-toggle:not(.fusion-active) .fusion-toggle-icon { display: none !important; }
.fusion-flyout-search-toggle a.awb-icon-search { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; }
ul.products li.product .product-title a { display: block; padding: 4px 0; }
ul.products li.product .fusion-product-wrapper > a,
ul.products li.product .product-images a { display: block; }

/* ---------- Product gallery: no layout jump while the slider initialises (CLS was 0.42–0.51) ----------
 * Before flexslider runs, every gallery image is stacked (900–2000px), then it
 * collapses to one slide and the summary jumps up. Show only the first image
 * and reserve the thumbnail row until the slider exists.
 */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2):not([style*="float"]) { display: none; }
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) { padding-bottom: 17%; }

/* Checkout order table overflowed on phones (already on production: totals cut off).
 * Keep each amount on one line, put the converted лв amount (.eur-price) on its own line. */
@media (max-width: 600px) {
	.woocommerce-checkout-review-order-table { font-size: 14px; }
	.woocommerce-checkout-review-order-table .awb-cart-totals-table { width: 100% !important; }
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td { white-space: normal !important; padding-left: 4px !important; padding-right: 4px !important; }
	.woocommerce-checkout-review-order-table .woocommerce-Price-amount { white-space: nowrap; }
	.woocommerce-checkout-review-order-table .eur-price { display: block; white-space: nowrap; font-size: 12px; color: var(--mn-muted); }
	.woocommerce-checkout-review-order-table img { max-width: 56px; height: auto; }
}

/* Links inside running text must be distinguishable without colour */
.post-content .fusion-text p a:not(.fusion-button):not(.button),
.post-content .woocommerce-product-details__short-description a { text-decoration: underline; text-underline-offset: 2px; }
/* Instagram feed "Follow" button: plugin blue #408bd1 is 3.6:1 with white */
#sbi_load .sbi_follow_btn a { background: var(--mn-ink) !important; color: #fff !important; }
#sbi_load .sbi_load_btn { background: var(--mn-text) !important; color: #fff !important; }

/* ---------- Breadcrumbs (product pages, Rank Math) ---------- */
.mn-breadcrumbs { margin: 0 0 18px; font-size: 13px; letter-spacing: .04em; color: var(--mn-muted); }
.mn-breadcrumbs a { color: var(--mn-muted) !important; text-decoration: none; }
.mn-breadcrumbs a:hover { color: var(--mn-ink) !important; text-decoration: underline; }
.mn-breadcrumbs .separator { margin: 0 6px; }
.mn-breadcrumbs .last { color: var(--mn-ink); }