/* Child Categories Carousel Styles */

/* .wd-sidebar.wd-side-hidden.wd-left {
	display: none;
} */

/* Rules to hide currently selected filter and clear filter */
/* .wd-active-filters {
	display: none !important;	
} */

.slick-track {
	display: flex !important;
	flex-basis: auto !important;
	margin-left: unset !important;
	margin-right: unset !important;
	gap: 8px;
}

.slick-list {
	width: 100% !important;
}

.slick-track:before, .slick-track:after {
	display: none !important;
}

.slide-message {
	color: #302F3D;
	font-family: "Instrument Sans";
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.24px;
	text-transform: uppercase;
}

.child-categories-container {
    position: relative;
    padding: 8px 0;
	overflow: hidden;
	box-shadow: 0 0 0 1px #E2E2E6;
}

.page-id-12897 .child-categories-container {
	box-shadow: 1px 0 0 0 #302F3D, -1px 0 0 0 #302F3D, 0 -1px 0 0 #302F3D;
}

.page-id-12897 .slide-text {
	color: #FFF;
}

.child-categories-carousel {
    display: flex;
    flex-wrap: wrap;
	max-height: 339px;
	gap: 8px;
    justify-content: center; /* Center categories and stretch to fill space */
	overflow: hidden;
	box-shadow: 0 0 0 1px #E2E2E6;
}

.page-id-12897 .child-categories-carousel {
	box-shadow: 0 0 0 1px #302F3D;
}

/* Each child category takes an equal portion */
.child-categories-carousel .child-category {
    flex: 1 1 calc(100% / 6 - 20px); /* Default width for 6 categories */
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* Allow categories to grow and fill space when there are fewer than 6 */
.child-category {
    flex-grow: 1;
    flex-basis: 0; /* Ensures it grows evenly with others */
}

/* Image wrapper */
.category-image-wrapper {
    position: relative;
    width: 100%;
    height: 339px; /* Fixed height for consistency */
    background-color: #000; /* Default black background */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-image-wrapper img {
	width: 100%;
}

/* Ensure images scale to fill the container */
.child-categories-carousel .child-category img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image will cover the container and scale as needed */
    display: block;
}

.category-image-wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://dev.decoflux.com/wp-content/uploads/2024/09/Container.png');
    background-size: cover;
    mix-blend-mode: difference; /* Choose a blend mode (e.g., multiply, overlay) */
    opacity: 0.5; /* Adjust as needed */
	z-index: 3;
}

/* Handle categories without images */
.child-categories-carousel .child-category .no-image {
    background-color: #000; /* Black background for missing images */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure full height */
}

/* Remove overlay for no-image categories */
.child-categories-carousel .child-category .no-image .category-overlay {
    background: none;
    padding: 0;
}

/* White text for categories without images */
.child-categories-carousel .child-category .no-image .category-name {
    color: #fff; /* White text for visibility */
    font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.54px;
	text-transform: uppercase;
}

/* Category overlay styling */
.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    box-sizing: border-box;
	text-align: left;
	
	z-index: 5;
}

/* Category name styling */
.category-name {
    color: #fff; /* White text for visibility */
    font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.54px;
	text-transform: uppercase;
	margin: 0;
}

/* Hover effect for links */
.child-categories-carousel .child-category a {
    text-decoration: none;
    color: inherit;
}

/* Responsive adjustments for tablet (max 3 categories per row) */
@media (max-width: 1024px) {
    .child-categories-carousel .child-category {
        flex: 1 1 calc(100% / 3 - 20px); /* 3 categories per row */
    }

    .category-overlay {
        padding: 24px;
    }
}

/* Responsive adjustments for mobile (max 2 categories per row) */
@media (max-width: 768.98px) {
    .child-categories-carousel .child-category {
        flex: 1 1 calc(100% / 2 - 10px); /* 2 categories per row */
    }

    .category-overlay {
        padding: 16px;
    }
}

/* Carousel Navigation */
.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
	box-shadow: -1px 0 0 0 #E2E2E6, 1px 0 0 0 #E2E2E6, 0 1px 0 0 #E2E2E6;
}

.page-id-12897 .carousel-navigation {
	box-shadow: -1px 0 0 0 #302F3D, 1px 0 0 0 #302F3D, 0 1px 0 0 #302F3D;
}

.page-id-12897 :is(.wd-entry-content,.entry-content,.is-layout-flow,.is-layout-constrained,.is-layout-constrained>.wp-block-group__inner-container)>* {
	margin-block: unset;
}

.page-id-12897 .dashicons-arrow-left-alt:before,
.page-id-12897 .dashicons-arrow-right-alt:before {
	color: #FFF;
}

/* Custom Arrows Styling */
.carousel-navigation .slick-prev, 
.carousel-navigation .slick-next {
	display: block;
    background-color: transparent;
    border: none;
    font-size: 0;
    cursor: pointer;
    padding: 10px;
    position: relative; /* To allow pseudo-element positioning */
}

.carousel-navigation .slick-prev:hover, 
.carousel-navigation .slick-next:hover {
	background-color: unset !important;
}

/* Slide to see more message */
.carousel-navigation .slide-message {
    font-size: 0.9em;
    color: #333;
}

.page-id-12897 .carousel-navigation .slide-message {
	color: #FFF;
}

/* Category page CSS (will be moved to seperate file) */
.shop-loop-head {
	flex-direction: row !important;
	flex-wrap: unset !important;
	gap: 8px !important;
	margin-bottom: unset !important;
	box-shadow: 1px 0 0 0 #E2E2E6, -1px 0 0 0 #E2E2E6, 0 -1px 0 0 #E2E2E6, inset 0 -1px 0 0 #E2E2E6;
}
.wd-content-area.site-content {
	padding-top: 8px;
	box-shadow: 0 0 0 1px #E2E2E6;
}

.page-id-12897 .wd-content-area.site-content {
	box-shadow: 0 0 0 1px #302F3D;
}

.shop-loop-head .custom-category-left-side {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	justify-content: center;
	padding: 32px;
	width: 50%;
	box-shadow: 1px 0 0 0 #E2E2E6, inset 0 -1px 0 0 #E2E2E6;
}

.shop-loop-head .custom-category-left-side .wd-active-filters {
	margin-top: unset;
	margin-bottom: unset;
}

.wd-sidebar .widget-area .widget-title {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.28px;
	color: #302F3D;
}

.wd-sidebar .widget-area .wd-filter-lable.layer-term-lable {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.28px;
	color: #302F3D;
}

.wd-sidebar .widget-area .wd-pf-title {
	background-color: #1110170D;
	border: unset;
}

/* Filter checkboxes */
.wd-sidebar .widget-area .wd-swatches-filter.wd-checkboxes-on li>a:before {
	width: 20px;
	height: 20px;
	border: 1px solid #5E5C75;
}

.wd-sidebar .widget-area .wd-swatches-filter.wd-checkboxes-on li>a:after {
	inset-inline-start: 5px;
}

/* Filter swatch */
.wd-sidebar .widget-area .wd-swatch.wd-bg {
	width: 20px;
	height: 20px;
}

.wd-sidebar .widget-area [class*="wd-swatches"].wd-bg-style-1 .wd-swatch.wd-bg::after {
	content: none;
}

.wd-sidebar .widget-area .wd-swatches-filter .wd-swatch.wd-bg:before {
	content: none;
}

.shop-loop-head .custom-category-right-side {
	display: flex;
	flex-basis: auto;
	width: 50%;
	box-shadow: -1px 0 0 0 #E2E2E6, inset 0 -1px 0 0 #E2E2E6;
	padding: 32px;
	gap: 24px;
	align-items: center;
	justify-content: flex-end;
}

.custom-category-left-side .current-category-name {
	color: #111017;
	font-family: "Instrument Sans";
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: -1.12px;
	text-transform: uppercase;
	margin-bottom: unset;
}

.custom-category-left-side .woocommerce-result-count {
	display: flex;
	color: #77758C;
	font-family: "Instrument Sans";
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.24px;
	text-transform: uppercase;
}

.wd-show-sidebar-btn {
	margin-inline-end: unset !important;
	flex-direction: row-reverse;
}

.woocommerce-ordering.wd-style-underline select {
	border-bottom-style: none;	
}

/* Rewriting default image for filters */
.woocommerce-ordering.wd-style-underline select {
	background-image: url(https://dev.decoflux.com/wp-content/uploads/2024/10/Caret-Down.svg) !important;	
	color: #111017;

	/* Body/Body XS/Medium (500) */
	font-family: "Instrument Sans";
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 16px !important;
	letter-spacing: -0.24px;
	text-transform: uppercase;
}

.wd-products-element {
	box-shadow: 1px 0 0 0 #E2E2E6, -1px 0 0 0 #E2E2E6, 0 1px 0 0 #E2E2E6;
}

.page-id-12897 .wd-products-element {
	box-shadow: 1px 0 0 0 #302F3D, -1px 0 0 0 #302F3D, 0 1px 0 0 #302F3D;
}

/* Remove the hamburger icon */
.custom-sidebar-btn.wd-burger-icon::before {
    content: none;
}

/* Add the black circle instead */
.custom-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-sidebar-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: black;
    border-radius: 50%;
    margin-left: 8px; /* Space between the circle and text */
}

.wd-show-sidebar-btn.wd-action-btn.wd-style-text>a {
	color: #302F3D;

	/* Body/Body XS/Medium (500) */
	font-family: "Instrument Sans";
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.24px;
	text-transform: uppercase;	
}

.wd-grid-g {
	column-gap: 8px !important;
	row-gap: 0 !important;
}
.category-banner {
	display: flex;
	align-items: stretch;
    position: relative;
    max-height: 320px;
	height: 320px;
    width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	box-shadow: 1px 0 0 0 #E2E2E6, -1px 0 0 0 #E2E2E6, 0 -1px 0 0 #E2E2E6;
}

.category-banner img {
    max-height: 304px;
    width: 100%;
    object-fit: cover;
}

/* Text container to hold both upper and lower text */
.banner-text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
}

/* Upper text */
.banner-upper-text {
    position: relative; /* Use relative here to stack correctly within container */
    margin-bottom: 8px; /* Add margin to create space between upper and lower text */
	color: #FFF;
	font-family: "Instrument Sans";
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: -1.12px;
	text-transform: uppercase;
}

/* Lower text */
.banner-lower-text p{
    position: relative;
	margin-bottom: unset !important;
	color: #E2E2E6;
	font-family: "Instrument Sans";
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.28px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


@media (max-width: 1024px) {
	.shop-loop-head {
		flex-direction: column !important;
		gap: unset !important;
	}
	.shop-loop-head .custom-category-left-side,
	.shop-loop-head .custom-category-right-side {
		width: unset;
		padding: 24px
	}
	.custom-category-left-side .current-category-name {
		font-size: 26px;	
	}
	.banner-upper-text {
		font-size: 26px;
		line-height: 32px;
		letter-spacing: -0.78px;
	}
}

/* Woocommerce mobile specific breakpoint */
@media (max-width: 768.98px) {
	.woocommerce-ordering.wd-ordering-mb-icon {
		width: unset !important;
		height: unset !important;
	}
	.woocommerce-ordering.wd-ordering-mb-icon select.orderby {
		position: relative;
		color: #111017 !important;
		background-position: right 0 top 50%;
		background-repeat: no-repeat;
		background-size: auto 18px;
	}
	.woocommerce-ordering.wd-ordering-mb-icon:after {
		content: none !important;
	}
	.shop-loop-head .custom-category-left-side,
	.shop-loop-head .custom-category-right-side {
		padding: 16px;
	}
	.shop-loop-head .custom-category-left-side {
		flex-direction: column;
		gap: unset;
	}
	.shop-loop-head .custom-category-right-side {
		justify-content: space-between;
	}
	.custom-category-left-side .current-category-name {
		font-size: 24px;	
	}
	.banner-upper-text {
		font-size: 24px;
		letter-spacing: -0.72px;
	}
	.category-banner {
		max-height: 256px;
		height: 256px;
	}
	.wd-sidebar-hidden-sm .wd-shop-tools {
		width: 100%;
	}
}