/**
 * Products Carousel — "Minimal" variant.
 *
 * Opt in by adding CSS class `is-minimal-carousel` to the Elementor widget.
 * All rules are scoped to that class so unopted widgets stay on the theme's
 * default product card design.
 *
 * Target look (per design ref):
 * - no card border/shadow/background, products sit flat on the page
 * - thin vertical dividers between cards
 * - category line above the title
 * - rating stars below the login/register line
 * - "New"/sale badges hidden
 * - circular white arrow buttons with grey chevron (hover: grey fill, white chevron)
 *
 * Some !important declarations are unavoidable: Elementor's per-widget cached
 * CSS (uploads/elementor/css/post-<id>.css) uses .elementor-element-<hash>
 * selectors at specificity 0,4,0 that outrank normal scoped overrides.
 */

/* ===================================================================
 * 1. CARD CHROME — remove border, shadow, background, rounded corners.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .product-inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 12px !important;
}

.is-minimal-carousel ul.products li.product .product-inner:hover {
	box-shadow: none !important;
	transform: none !important;
}

/* Motta applies its own border variant via body class `product-card-layout-N`;
   neutralize for this widget. */
.is-minimal-carousel ul.products li.product {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* ===================================================================
 * 2. VERTICAL DIVIDERS — thin line between cards (but not before first).
 * =================================================================== */

.is-minimal-carousel ul.products li.product {
	position: relative;
}

.is-minimal-carousel ul.products li.product::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 1px;
	background: #e5e5e5;
}

/* Swiper flips slide order visually; suppress the divider on the first visible
   slide so the leftmost card doesn't get a phantom line. */
.is-minimal-carousel ul.products li.product.swiper-slide-active::before,
.is-minimal-carousel ul.products li.product:first-child::before {
	display: none;
}

/* ===================================================================
 * 3. BADGES — hide "New"/sale pills.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .woocommerce-badges {
	display: none !important;
}

/* ===================================================================
 * 4. CATEGORY LINE — show, restyle to uppercase grey.
 *    The Hide Category widget control sets `display: none` on .meta-wrapper.
 *    Also handle cases where the widget's own control has forced it hidden.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .meta-wrapper,
.is-minimal-carousel ul.products li.product .meta-cat {
	display: block !important;
	margin-bottom: 6px;
}

.is-minimal-carousel ul.products li.product .meta-cat {
	font-size: 13px;
	color: #999;
	letter-spacing: 0;
}

/* Drop the "in" prefix (the theme wraps it in a <span>) since the target
   just shows the category name plainly. */
.is-minimal-carousel ul.products li.product .meta-cat > span {
	display: none;
}

.is-minimal-carousel ul.products li.product .meta-cat a {
	color: #999;
	text-decoration: none;
}

.is-minimal-carousel ul.products li.product .meta-cat a:hover {
	color: #555;
}

/* ===================================================================
 * 4b. LOGIN / REGISTER CALL-TO-ACTION — keep on one line.
 *     The GrowUp_Login_Required_Pricing feature emits
 *     "<Login> or <Register> to buy" as a single span; the default card
 *     width often wraps "to buy" onto its own line. Enforce nowrap.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .login-to-buy-message {
	white-space: nowrap;
	display: inline-block;
}

/* ===================================================================
 * 5. RATING — show stars below login/register line.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .motta-rating {
	display: block !important;
	margin-top: 12px;
}

/* ===================================================================
 * 6. IMAGE — more breathing room, no card padding.
 * =================================================================== */

.is-minimal-carousel ul.products li.product .product-thumbnail {
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.is-minimal-carousel ul.products li.product .product-thumbnail img {
	max-width: 100%;
	height: auto;
}

/* ===================================================================
 * 7. ARROWS — white fill with grey chevron, grey fill on hover.
 *    Mirrors the look we built for the logos-carousel widget.
 * =================================================================== */

.is-minimal-carousel .motta-swiper-button {
	background-color: #ffffff !important;
	color: #888888 !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	font-size: 14px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.is-minimal-carousel .motta-swiper-button:hover {
	background-color: #bbbbbb !important;
	color: #ffffff !important;
	border-color: #bbbbbb !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.is-minimal-carousel .motta-swiper-button.swiper-button-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}