/* WebMall Enhancer – front.css (v1.0.0)
 * Every block is scoped to a body class, so switching a feature off in Settings removes its styling.
 * Brand: yellow #fdb81c, near-black #151515.
 */
body.wme {
	--wme-yellow: #fdb81c;
	--wme-yellow-dark: #e5a200;
	--wme-ink: #151515;
	--wme-muted: #5f6368;
	--wme-line: #e7e7e7;
	--wme-teal: #17807b;           /* "View more" – the old #5BBBB7 had 2.3:1 contrast */
	--wme-radius: 12px;
	--wme-shadow: 0 6px 22px rgba(0, 0, 0, .08);
	--wme-nav-h: 0px;              /* bottom bar height on phones (set by the script) */
}

/* ── Sections that waited for every delayed script before showing ── */
/* Opacity only: any transform on these wrappers would trap the fixed bottom bar inside them. */
@keyframes wme-fade { from { opacity: 0; } to { opacity: 1; } }
body.wme-fade:not(.et-fb) .fade-in-on-load { opacity: 1 !important; animation: wme-fade .45s ease-out; }
@media (prefers-reduced-motion: reduce) { body.wme-fade .fade-in-on-load { animation: none; } }

/* ── Product cards ───────────────────────────────────────────── */
/* The title box was 52px tall with 19.5px lines plus padding, so half of a third line peeked out
   under every title. Two clean lines, no vertical padding. */
html body.wme-cards ul.products li.product .woocommerce-loop-product__title,
html body.wme-cards .ags_woo_shop_plus .woocommerce-loop-product__title,
html body.wme-cards .dwe_single_woo_product .dwe_single_woo_product_title,
html body.wme-cards .dwe_single_woo_product_title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2;
	overflow: hidden !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 10px 0 6px !important;
	line-height: 1.45 !important;
	height: auto !important;
	min-height: 2.9em !important;
	max-height: 2.9em !important;
	word-break: break-word;
}

body.wme-cards ul.products { display: flex !important; flex-wrap: wrap; }
body.wme-cards ul.products::before, body.wme-cards ul.products::after { display: none !important; }
body.wme-cards ul.products li.product,
body.wme-cards .dwe_single_woo_product {
	display: flex !important;
	flex-direction: column;
	border-radius: var(--wme-radius);
	transition: box-shadow .2s ease, transform .2s ease;
}
body.wme-cards ul.products li.product:hover,
body.wme-cards .dwe_single_woo_product:hover { box-shadow: var(--wme-shadow); transform: translateY(-2px); }
body.wme-cards ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; }
body.wme-cards ul.products li.product .price,
body.wme-cards .dwe_single_woo_product_price { margin-top: auto !important; }
body.wme-cards ul.products li.product .button,
body.wme-cards .dwe_single_woo_product .button { margin-top: 10px !important; }
body.wme-cards ul.products li.product img,
body.wme-cards .dwe_single_woo_product img { aspect-ratio: 6 / 5; object-fit: contain; width: 100%; height: auto; background: #fff; }
body.wme-cards .title-wrapper .view-more-link { color: var(--wme-teal) !important; }
body.wme-cards .title-wrapper .view-more-link:hover { color: var(--wme-ink) !important; text-decoration: underline !important; }
body.wme-cards ul.products li.product .woocommerce-loop-product__title a { color: inherit; }

/* ── Shop filters ────────────────────────────────────────────── */
/* The price bubbles hung outside the sidebar ("R58" box). */
body.wme-filters .ags-wc-filters-number-range-slider { padding: 34px 6px 10px !important; box-sizing: border-box; overflow: visible; }
body.wme-filters .ags-wc-filters-number-range-slider .rs-container { margin: 0 22px !important; width: auto !important; }
body.wme-filters .ags-wc-filters-number-range-slider .rs-tooltip {
	font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
	background: var(--wme-ink) !important; color: #fff !important; border: 0 !important;
}
body.wme-filters .ags-wc-filters-section-title h4 { font-weight: 600; letter-spacing: .01em; }

/* ── Product page ────────────────────────────────────────────── */
/* Divi WooCommerce Extended printed a second, unstyled H1 above the layout. */
body.wme-dup-title.single-product #main-content > .clearfix > h1.product_title { display: none !important; }
body.wme-dup-title.single-product #main-content > .clearfix:has(> h1.product_title:only-child) { display: none !important; }

body.wme-product.single-product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
body.wme-product.single-product form.cart .quantity { margin: 0 !important; }
html body.wme-product.single-product #page-container form.cart .quantity .qty,
body.wme-product.single-product form.cart .quantity .qty {
	height: 50px; width: 74px; border: 1px solid #cfcfcf !important; border-radius: 10px !important;
	background: #fff !important; font-size: 16px; font-weight: 600; text-align: center; color: var(--wme-ink) !important;
}
/* #page-container: Divi's own add-to-cart rule carries an ID + !important, so ours needs one too. */
html body.wme-product.single-product #page-container .single_add_to_cart_button.button,
html body.wme-product.single-product #page-container .single_add_to_cart_button,
body.wme-product.single-product .single_add_to_cart_button {
	flex: 1 1 200px; min-height: 50px;
	background: var(--wme-yellow) !important; color: var(--wme-ink) !important;
	border: 0 !important; border-radius: 10px !important;
	font-size: 16px !important; font-weight: 700 !important; letter-spacing: .02em;
	padding: 12px 24px !important; cursor: pointer; transition: background .15s ease, transform .1s ease;
}
html body.wme-product.single-product #page-container .single_add_to_cart_button:hover,
body.wme-product.single-product .single_add_to_cart_button:hover { background: var(--wme-ink) !important; color: var(--wme-yellow) !important; }
body.wme-product.single-product .single_add_to_cart_button:active { transform: scale(.98); }
html body.wme-product.single-product #page-container .single_add_to_cart_button::after,
body.wme-product.single-product .single_add_to_cart_button::after { display: none !important; }
body.wme-product.single-product .stock.in-stock { color: #157a3c; font-weight: 600; }
body.wme-product.single-product .stock.out-of-stock { color: #b3261e; font-weight: 600; }
body.wme-product.single-product .price { font-weight: 700; }
@media (max-width: 767px) {
	body.wme-product.single-product .et_pb_button_module_wrapper .et_pb_button { font-size: 14px !important; padding: 8px 16px !important; }
}

/* ── Accessibility ──────────────────────────────────────────── */
body.wme-a11y a:focus-visible, body.wme-a11y button:focus-visible, body.wme-a11y input:focus-visible,
body.wme-a11y select:focus-visible, body.wme-a11y textarea:focus-visible, body.wme-a11y [tabindex]:focus-visible {
	outline: 3px solid var(--wme-yellow) !important; outline-offset: 2px !important; border-radius: 4px;
}
.wme-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Footer ──────────────────────────────────────────────────── */
body.wme-footer:not(.logged-in) .et-l--footer a[href*="customer-logout"],
body.wme-footer:not(.logged-in) .et-l--footer li:has(> a[href*="customer-logout"]) { display: none !important; }

/* ── Mobile headings that overflowed ("FEATURED PRODUCTS") ───── */
@media (max-width: 767px) {
	body.wme .et_pb_text h2, body.wme .et_pb_text_inner h2 { font-size: clamp(20px, 6.6vw, 30px) !important; overflow-wrap: anywhere; }
}

/* ── Mobile header (logo, search, account, cart) ─────────────── */
.wme-mh { display: none; }
@media (max-width: 767px) {
	body.wme-mhead .wme-mh {
		display: block; position: sticky; top: 0;
		z-index: 310; /* just under Divi's header sections (315), so the slide-out menu opens over it */
		background: #fff; border-bottom: 1px solid var(--wme-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
		padding: 8px 14px 10px;
	}
	body.wme-mhead.admin-bar .wme-mh { top: 46px; }
	/* Divi traps the slide-out menu in a z-index:2 layer – step the header behind it while it is open. */
	body.wme-mhead.wme-menu-open .wme-mh, body.wme-mhead:has(#sm-panel.open) .wme-mh { z-index: 1; }
	/* The Divi section that only holds the fixed bottom bar left an empty 30px strip under the header. */
	body.wme-mhead .et-l--header .et_pb_section:has(.bottom-navbar),
	body.wme-mhead .et-l--header .et_pb_section:has(.bottom-navbar) .et_pb_row,
	body.wme-mhead .et-l--header .et_pb_section:has(.bottom-navbar) .et_pb_column { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
	body.wme-mhead .et-l--header .et_pb_section:has(.bottom-navbar) .et_pb_module { margin: 0 !important; }
	.wme-mh__bar { display: flex; align-items: center; gap: 8px; }
	.wme-mh__logo { margin-right: auto; display: flex; align-items: center; min-height: 40px; }
	.wme-mh__logo img { height: 40px; width: auto; max-width: 170px; object-fit: contain; display: block; }
	.wme-mh__name { font-weight: 800; font-size: 20px; color: var(--wme-ink); letter-spacing: .04em; }
	.wme-mh__icon {
		position: relative; display: inline-flex; align-items: center; justify-content: center;
		width: 42px; height: 42px; border-radius: 50%; background: var(--wme-yellow); color: var(--wme-ink);
	}
	.wme-mh__icon svg { width: 20px; height: 20px; fill: currentColor; }
	.wme-mh__search { margin-top: 8px; }
	.wme-mh__search .dgwt-wcas-search-wrapp { max-width: none !important; }
	.wme-mh__search input[type="search"], .wme-mh__search .dgwt-wcas-search-input { border-radius: 24px !important; height: 42px !important; background: #f2f2f2 !important; border: 0 !important; }
	.wme-mh__search form.woocommerce-product-search { display: flex; gap: 6px; }
	.wme-mh__search form.woocommerce-product-search input[type="search"] { flex: 1; padding: 0 16px; }
}
.wme-count {
	position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	border-radius: 9px; background: var(--wme-ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.wme-count[data-count="0"] { display: none; }

/* ── Bottom bar: Cart item ───────────────────────────────────── */
.bottom-navbar .wme-nav-cart { position: relative; }
.bottom-navbar .wme-nav-cart .wme-count { top: 2px; right: calc(50% - 22px); background: var(--wme-yellow); color: var(--wme-ink); }
.bottom-navbar .wme-nav-cart svg { fill: currentColor; }
.wme-menu-extra { border-top: 1px solid var(--wme-line); margin-top: 8px; padding-top: 8px; }
.wme-menu-extra a { display: flex !important; align-items: center; gap: 10px; }

/* ── Floating Facebook button ───────────────────────────────── */
@media (max-width: 767px) {
	body.wme-float .floating-menu {
		top: auto !important; bottom: calc(var(--wme-nav-h) + 14px) !important;
		z-index: 9990 !important; transform: scale(.82); transform-origin: right bottom;
	}
	body.wme-float.wme-menu-open .floating-menu, body.wme-float.wme-satc-on .floating-menu { opacity: 0; pointer-events: none; }
}
body.wme .sm-panel, body.wme #sm-panel { z-index: 10001 !important; }
body.wme .sm-overlay, body.wme #sm-overlay { z-index: 10000 !important; }
body.wme-menu-open { overflow: hidden; }

/* ── Sticky add to cart (phones) ────────────────────────────── */
.wme-satc { display: none; }
@media (max-width: 767px) {
	body.wme-has-satc .wme-satc:not([hidden]) {
		display: flex; align-items: center; gap: 12px;
		position: fixed; left: 0; right: 0; bottom: var(--wme-nav-h); z-index: 9980;
		background: #fff; border-top: 1px solid var(--wme-line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		/* Hidden = invisible, not just moved down – it must never cover the bottom bar. */
		opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	body.wme-has-satc.wme-satc-on .wme-satc:not([hidden]) {
		opacity: 1; visibility: visible; pointer-events: auto; transform: none;
		transition: opacity .2s ease, transform .2s ease, visibility 0s;
	}
	.wme-satc__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
	.wme-satc__name { font-size: 12px; color: var(--wme-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.wme-satc__price { font-size: 17px; font-weight: 700; color: var(--wme-ink); }
	.wme-satc__price del { font-size: 12px; font-weight: 400; color: var(--wme-muted); }
	.wme-satc__btn {
		flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--wme-yellow); color: var(--wme-ink);
		font-weight: 700; font-size: 15px; padding: 13px 20px; cursor: pointer;
	}
	.wme-satc__btn:active { transform: scale(.97); }
}

/* ── Hero animation (canvas) ────────────────────────────────── */
.wme-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; }
.node-background.wme-hero > .et_pb_row, .node-background.wme-hero > .et_pb_row_inner { position: relative; z-index: 1; }