/* Breadcrumb separators */
.breadcrums .sb-breadcrumbs li:not(:first-child)::before {
    content: "/";
    margin: 0 8px;
    color: rgb(194, 193, 193);
}

.ctm-meta-product-link-container {
    margin-top: 30px;
}

.ctm-product-partner {
    margin-top: 30px;
}

.ctm-product-partner h4 {
    margin-bottom: 12px;
}

/* Remove gallery border */
.product-single .sb-product-lt > .images {
    border: none;
}

/* Flickity product gallery */
.ctm-flickity-gallery-wrap {
    opacity: 1 !important;
}

.ctm-flickity-main {
    width: 100%;
}

.ctm-flickity-main .carousel-cell {
    width: 100%;
}

.ctm-flickity-main .carousel-cell img {
    display: block;
    width: 100%;
    height: auto;
}

.ctm-flickity-main .ctm-gallery-link {
    display: block;
    cursor: zoom-in;
}

.ctm-flickity-main .flickity-page-dots {
    bottom: 12px;
}

.ctm-flickity-main .flickity-page-dots .dot {
    background: #000;
    opacity: 0.4;
    width: 8px;
    height: 8px;
}

.ctm-flickity-main .flickity-page-dots .dot.is-selected {
    background: #ffee02;
    opacity: 1;
}

@media (max-width: 992px) {
    /* Gap between page banner and product gallery */
    .single-product .product-single {
        padding-top: 30px;
    }

    /* Breadcrumbs: hide the current product name (too long on mobile) */
    .breadcrums .sb-breadcrumbs li:last-child {
        display: none;
    }
}

/* ===== Products Showcase — 3-column layout ===== */
.products-showcase {
	display: flex;
	align-items: flex-start;
	min-height: 500px;
}

/* Mobile select — hidden on desktop */
.showcase-select {
	display: none;
}

/* Left: product name list */
.products-showcase__list {
	flex: 0 0 220px;
	border-right: 1px solid #e0e0e0;
}

.showcase-item {
	display: block;
	width: 100%;
	background: #f5f5f5;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	border-right: 3px solid transparent;
	padding: 14px 20px;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.showcase-item:hover {
	background: #ebebeb;
}

.showcase-item.active {
	background: #fff;
	color: #000;
	font-weight: 600;
	border-right-color: #ffee02;
}

/* Right: panels container */
.products-showcase__panels {
	flex: 1;
	min-width: 0;
}

.showcase-panel {
	display: none;
	flex-direction: row;
	gap: 40px;
	padding: 30px;
}

.showcase-panel.active {
	display: flex;
}

.showcase-panel__gallery {
	flex: 0 0 45%;
	min-width: 0;
}

.showcase-panel__details {
	flex: 1;
	min-width: 0;
}

.showcase-panel__details .product_title {
	margin-bottom: 20px;
}

.showcase-panel__details .product_meta {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed #ddd;
	font-size: 14px;
}

.showcase-panel__details .product_meta span {
	display: block;
	margin-bottom: 4px;
}

@media (max-width: 991px) {
	.products-showcase {
		flex-direction: column;
	}

	/* Hide the desktop button list, show the select instead */
	.products-showcase__list {
		display: none;
	}

	.showcase-select {
		display: block;
		width: 100%;
		margin-bottom: 20px;
		padding: 10px 14px;
		font-size: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: #fff;
		color: #333;
		appearance: auto;
		cursor: pointer;
	}

	.showcase-panel {
		flex-direction: column;
		padding: 20px 0;
		gap: 24px;
	}

	.showcase-panel__gallery {
		flex: none;
		width: 100%;
	}
}

/* CTA Section One Video — fix video-play-btn inside renovation .bbtn.
   .renovation .bbtn a (0,2,1) would override .video-play-btn (0,1,0),
   removing the skew and breaking absolute positioning on a collapsed parent.
   This rule (0,3,0) restores correct behaviour. */
.renovation .bbtn .video-play-btn {
    position: relative;
    top: auto;
    left: auto;
    transform: skew(-20deg, 0deg);
    margin: 0 auto;
}