/* Ecommax Listing Tweaks */

/* ---------------------------------------------------------------
 * "Always visible" card buttons.
 * Ecommax cards (fragments item / item-4 / item-7 / item-9) keep the
 * button in .product__bottom, absolutely positioned below the card with
 * height:0 and revealed by main.js on mouseenter. Mobile has no hover,
 * so the button is unreachable there. We put it back in normal flow.
 * .rbbx-visible-always = Elementor widget root, .rbbx-cards-always = <body>
 * (shop / category pages, related products); a widget set to hover wins.
 * ------------------------------------------------------------- */
.rbbx-visible-always .item-product .product__bottom,
.rbbx-cards-always .item-product:not(.rbbx-visible-hover .item-product) .product__bottom {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	padding-top: 0 !important;
	border-top: 0 !important;
	margin-top: auto;
}
.rbbx-visible-always .item-product .product__bottom-fade,
.rbbx-cards-always .item-product:not(.rbbx-visible-hover .item-product) .product__bottom-fade {
	height: auto !important; /* main.js sets an inline height meant for the hover drop-down */
}
.rbbx-visible-always .item-product > .relative,
.rbbx-cards-always .item-product:not(.rbbx-visible-hover .item-product) > .relative {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Tooltip-style icons were built for hover; keep label, hide the fly-in icon. */
.rbbx-visible-always .item-product .product__bottom .add-to-cart-icon .rbb-icon,
.rbbx-cards-always .item-product:not(.rbbx-visible-hover .item-product) .product__bottom .add-to-cart-icon .rbb-icon {
	display: none;
}

/* ---------------------------------------------------------------
 * Buy Now + Add to Cart ("both" mode)
 * ------------------------------------------------------------- */
.rbbx-loop-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.rbbx-loop-buttons > a {
	width: 100%;
}
/* Secondary look for Add to Cart when shown next to Buy Now. */
.rbbx-loop-buttons > a:not(.rbbx-buy-now) .add-to-cart-icon {
	background-color: transparent !important;
	color: var(--rbb-general-primary-color) !important;
	box-shadow: inset 0 0 0 1px var(--rbb-general-primary-color);
}

/* Buy Now without the theme's inner markup (plain text fallback). */
a.rbbx-buy-now:not(:has(.add-to-cart-icon)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 5px;
	background-color: var(--rbb-general-primary-color);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
}
a.rbbx-buy-now:not(:has(.add-to-cart-icon)):hover {
	filter: brightness(0.9);
	color: #fff;
}

/* Shop list view keeps its own side button — don't show the bottom block there. */
.rbbx-cards-always .grid_1 .item-product .product__bottom {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Single product: Order Now
 * ------------------------------------------------------------- */
form.cart .rbbx-order-now.single_add_to_cart_button {
	background: var(--rbb-general-primary-color);
	border: 1px solid var(--rbb-general-primary-color);
	color: #fff;
	cursor: pointer;
}
form.cart .rbbx-order-now.single_add_to_cart_button:hover:not(.disabled) {
	background: color-mix(in srgb, var(--rbb-general-primary-color) 85%, #000);
	border-color: color-mix(in srgb, var(--rbb-general-primary-color) 85%, #000);
	color: #fff;
}
/* "Both" layout: full-width Order Now under Add to Cart (theme .buy-now box). */
form.cart .rbbx-buy-now-wrap .rbbx-order-now {
	width: 100% !important;
	margin-left: 0 !important;
	height: 50px;
}

/* ---------------------------------------------------------------
 * Mobile header logo (Ecommax header layouts 1/2/6/10/11)
 * When no separate Sticky Logo is uploaded, the header prints ONE
 * <img class="sticky-logo">, and the theme hides .sticky-logo inside
 * #_mobile_logo → blank mobile header. Show it.
 * ------------------------------------------------------------- */
#_mobile_logo img.sticky-logo {
	display: inline-block !important;
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
 * Shop / category page: full-width category bar (desktop only)
 * ------------------------------------------------------------- */
@media (min-width: 1024px) {
	.content-categories-top.rbbx-cats-wide {
		padding-left: 0;
		padding-right: 0;
		margin-left: -10px;   /* card gutter = 10px, so card edges line up with the listing */
		margin-right: -10px;
	}
	.content-categories-top.rbbx-cats-wide.rbbx-cats-slider {
		padding-left: 48px;   /* room for slider arrows only when there are more cards than fit */
		padding-right: 48px;
	}
	.rbbx-cats-wide .content-categories.slick-slider .slick-track {
		align-items: stretch;
	}
	.rbbx-cats-wide .content-categories .slick-slide,
	.rbbx-cats-wide .content-categories .slick-slide > div,
	.rbbx-cats-wide .content-categories .items {
		height: auto;
	}
	.rbbx-cats-wide .item-product-cat-content {
		height: 100%;
		padding: clamp(24px, 2.2vw, 44px) 12px;
	}
	.rbbx-cats-wide .item-product-cat-content .img-cate img {
		max-height: clamp(80px, 7.5vw, 150px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
	.rbbx-cats-wide .item-product-cat-content .item-title,
	.rbbx-cats-wide .item-product-cat-content .item-title a {
		font-size: clamp(14px, 1.05vw, 19px);
	}
	.rbbx-cats-wide .item-product-cat-content .content > div {
		font-size: clamp(13px, 0.9vw, 16px);
	}
}

/* ---------------------------------------------------------------
 * Category banner: hide title + breadcrumb (includes/banner-text.php)
 * Text keeps its space so the banner height / image crop don't change.
 * The <h1> stays readable for search engines & screen readers (opacity, not display:none);
 * breadcrumb links are removed from tab order (visibility:hidden).
 * ------------------------------------------------------------- */
.rbbx-banner-text-off #rbb-page-title .heading {
	opacity: 0;
	pointer-events: none;
	user-select: none;
}
.rbbx-banner-text-off #rbb-page-title .rbb-breadcrumb {
	visibility: hidden;
}