@import "../abstract/_all.scss";
@import "../abstract/_categoryGrid.scss";

$badges: 42px;

$header: 50px;
$header-md: 80px;

$gridview-selector-xs: 0;
$gridview-selector-sm: 0;

$categories-md: 70px;
$categories-sm: 70px;
$categories-special-sm: 95px;
$categories-xs: 70px;
$categories-special-xs: 50px;

$sub-categories-xs: 90px;
$sub-categories-sm: 127px;

$sibling-categories-xs: 52px;
$sibling-categories-sm: 52px;

$grid-wrap: 8px;
$grid-wrap-md: 32px;


.product-view-details wishlist-icon {
	display: flex;
}
.product-view-details .wishlist-position {
	top: 16px;
	z-index: 9;
	right: -2px;
	position: absolute;
	display: block;
}
.product-view-details .name-width-product {
	width: 100%;
}
.product-view-details .product-view-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.product-view-details .grid-product-list .tag-wrapper {
	width: 100%;flex-direction: row;
}
.product-view-details .grid-product-list .tag-wrapper .tag-wrapper {
	width: 100%;
}
.product-view-details .bundle-select {
	height: 76px;
}    

.grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2 {
    display: grid;
    column-gap: 1px;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background-color: transparent;
}
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.grid-product-list-search.grid-product-list-search-2.related-product, .grid-product-list.grid-product-list-2.related-product {
        grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-2.related-product, .grid-product-list.grid-product-list-2.related-product{
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}
/* Segundo Elemento ESPAÑA */
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not(.is-rtl) {
	padding-left: 0px;
	padding-right: $separacion-details-mobile;

}
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not .product-title, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not(.is-rtl) .product-title {
	padding-right: $separacion-details-mobile;
}
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not .product-title, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details:not(.is-rtl) .product-title{
		padding-right: 0;
	}
}
/* Segundo Elemento ARABIA */
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl {
	padding-right: 0px;
	padding-left: $separacion-details-mobile;
}
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl .product-title, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl .product-title {
	padding-left: $separacion-details-mobile;
}
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl .product-title, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9-wrap-details.is-rtl .product-title{
		padding-left: 0;
	}
}
/* Primer elemento ESPAÑA */
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(odd) .card9-wrap-details:not(.is-rtl), .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(odd) .card9-wrap-details:not(.is-rtl) {
	padding-right: $separacion-details-mobile;
	padding-left: $separacion-details-mobile;
}
/*	Primer elemento ARABIA	*/
.grid-product-list-search.grid-product-list-search-2 .grid-product-view2:nth-child(odd) .card9-wrap-details.is-rtl, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(odd) .card9-wrap-details.is-rtl {
	padding-left: $separacion-details-mobile;
	padding-right: $separacion-details-mobile;
}
/*	.product-with-colors	*/
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9 .card9-wrap-details.is-rtl, .grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(odd) .card9 .card9-wrap-details.is-rtl, .grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(even) .card9 .card9-wrap-details:not(.is-rtl), .grid-product-list-search.grid-product-list-search-2, .grid-product-list.grid-product-list-2 .grid-product-view2:nth-child(odd) .card9 .card9-wrap-details:not(.is-rtl) {
		padding-left: $separacion-details-mobile;
		padding-right: $separacion-details-mobile;
	}
}
.grid-product-list-search.grid-product-list-search-2 .color-wrap .product-color-tile, .grid-product-list.grid-product-list-2 .color-wrap .product-color-tile{
	margin-left: 0;
	margin-right: 0;
}
	
		
.grid-product-list-search.grid-product-list-search-3 {
    display: grid;
    column-gap: 1px;
    grid-template-rows: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background-color: transparent;
}
@media (min-width: $break-sm) {
	.grid-product-list-search.grid-product-list-search-3 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

.category-grid-container {
    min-height: 100vh;
    
    &.no-results {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &.grid-wrap-custom {
        margin: 0 -8px;
    }

    &.with-sibling {
        padding-top: 92px;

        @media (min-width: $break-sm) {
            padding-top: 140px;
        }

        @media (min-width: $break-md) {
            padding-top: 140px;
        }
    }

    &.js-with-special-collection {
        padding-top: 24px;
    }
}

.full-size {
    width: 100%;
}

.grid-product-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    list-style: none;
    background-color: transparent;
}

.grid-product__section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.grid-component-wrap {
    display: flex;
    width: 100%;
}

.grid-product {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    vertical-align: bottom;
}

.grid-product-view {
    flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    width: 100%;

    .grid-product-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.grid-product-wrap--1A {
    .grid-product-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

///////////CONFIGURADOR PARRILLA SOLO DOS
@media (max-width: #{$break-sm - 1}) {
    .grid-product-view1 {
        width: calc((100% + (#{$grid-view1-gutter})) / #{$grid-view1-cols} - #{$grid-view1-gutter});
        margin-right: $grid-view1-gutter;
        margin-bottom: $grid-view1-mbottom;
    }

    .grid-product-view1:nth-child(#{$grid-view1-cols}n) {
        margin-right: 0;
    }
}

@media (min-width: $break-sm) {
    .grid-product-view1 {
        width: calc((100% + (#{$sm-grid-view1-gutter})) / #{$sm-grid-view1-cols} - #{$sm-grid-view1-gutter});
        margin-right: $sm-grid-view1-gutter;
        margin-bottom: $sm-grid-view1-mbottom;
    }

    .grid-product-view1:nth-child(#{$sm-grid-view1-cols}n) {
        margin-right: 0;
    }
}

.productAbsolute {
    position: absolute;
    top: 0;
    left: 0;
}

:host ::ng-deep {
    .product-percentage-bullet {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 90;
        background: $c-white;
        padding: 3px 5px;
    }

    .grid-product-view3 {
        .product-percentage-bullet {
            &.view-on-grid {
                bottom: 8px;
                top: auto;
                right: 4px;
                font-size: 10px;

                @media (min-width: $break-lg) {
                    bottom: auto;
                    top: 4px;
                }
            }
        }
    }
}

//vista a dos
.grid-product-list-1 {
    overflow: hidden;

    &.grid-product-list .grid-product-view1:nth-child(even) .card9 .card9-wrap-details:not(.is-rtl) {
        padding-left: 0px;
        padding-right: $separacion-details-mobile;
    }

    &.grid-product-list .grid-product-view1:nth-child(odd) .card9 .card9-wrap-details:not(.is-rtl) {
        padding-right: 0px;
        padding-left: $separacion-details-mobile;
    }

    &.grid-product-list .grid-product-view1:nth-child(even) .card9 .card9-wrap-details .is-rtl {
        padding-right: 0px;
        padding-left: $separacion-details-mobile;
    }

    &.grid-product-list .grid-product-view1:nth-child(odd) .card9 .card9-wrap-details .is-rtl {
        padding-left: 0px;
        padding-right: $separacion-details-mobile;
    }

    @media (min-width: $break-sm) {
        &.grid-product-list .grid-product-view1:nth-child(even) .card9 .card9-wrap-details:not(.is-rtl) {
            padding-left: 0px;
            padding-right: $separacion-details-desktop;
        }

        &.grid-product-list .grid-product-view1:nth-child(odd) .card9 .card9-wrap-details:not(.is-rtl) {
            padding-right: 0px;
            padding-left: $separacion-details-desktop;
        }

        &.grid-product-list .grid-product-view1:nth-child(even) .card9 .card9-wrap-details .is-rtl {
            padding-right: 0px;
            padding-left: $separacion-details-desktop;
        }

        &.grid-product-list .grid-product-view1:nth-child(odd) .card9 .card9-wrap-details .is-rtl {
            padding-left: 0px;
            padding-right: $separacion-details-desktop;
        }
    }
}

//vista a 12
.grid-product-list-3 {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    background-color: transparent;

    @media (min-width: $break-lg) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 4px;
        row-gap: 24px;
    }

}

///////////CONFIGURADOR PARRILLA SOLO DOS
@media (max-width: #{$break-sm - 1}) {
    .grid-product-view1 {
        width: calc((100% + (#{$grid-view1-gutter})) / #{$grid-view1-cols} - #{$grid-view1-gutter});
        margin-right: $grid-view1-gutter;
        margin-bottom: $grid-view1-mbottom;
    }

    .grid-product-view1:nth-child(#{$grid-view1-cols}n) {
        margin-right: 0;
    }
}

@media (min-width: $break-sm) {
    .grid-product-view1 {
        width: calc((100% + (#{$sm-grid-view1-gutter})) / #{$sm-grid-view1-cols} - #{$sm-grid-view1-gutter});
        margin-right: $sm-grid-view1-gutter;
        margin-bottom: $sm-grid-view1-mbottom;
    }

    .grid-product-view1:nth-child(#{$sm-grid-view1-cols}n) {
        margin-right: 0;
    }
}

//vista a cuatro
.grid-product-list-2 {
    overflow: hidden;
}


.category-filter {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    span {
        margin: 0;
        padding-top: 1px;
    }

    .filter-badge {
        display: flex;
        margin: 0 8px;
        vertical-align: middle;
        padding: 5px 10px;
        margin-left: 2px;
        white-space: nowrap;

        &:first-of-type {
            @media (max-width: #{$break-sm - 1}) {
                margin: 0;
                padding: 0;
            }
        }
    }

    .category-filter-result {
        margin-right: 16px;
        display: inline-flex;

        div {
            margin-right: 8px;
        }
    }

    .category-filter-badgets {
        width: 100%;
        display: inline-flex;
        align-items: baseline;
        white-space: nowrap;
    }
}

.category-filter::-webkit-scrollbar {
    display: none;
}

.swiper.swiper-filter {
    .swiper-wrapper {
        align-items: baseline;
    }

    .swiper-wrapper,
    .swiper-slide {
        width: auto;
    }
}

.filter-order-item {
    &.selected,
    &:hover {
        font-weight: 600;
    }
}

.sidebar-filter {
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    flex-direction: column;
    left: 0;
    padding: 0px 20px;

    @media (min-width: $break-sm) {
        left: initial;
        padding: 0px;
    }
}

.sidebar-filter .clean-button {
    border: none;
    background-color: transparent;
    justify-content: left;
    display: flex;

    &.disabled {
        color: inherit;
    }


    @media (max-width: #{$break-sm - 1}) {
        justify-content: center;
        padding: 0;
    }
}

.sidebar-filter .result-button {
    border: 1px solid $c-black;
    height: 32px;
}

.header-tool-bar_fix_ssr{
    width: 100%;
    height: 215px;
    @media (min-width: $break-md) {
        height: 360px;
    }
}

.category-layout .content-apollo-height {
    min-height: 100vh;
}


.rangedouble {
    position: relative;
    .rangedouble-slider[type='range'] {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        height: 1px;
        width: 100%;
        border: none;
        pointer-events: none;

        &.first-slider {
            background-color: $c-primary;
        }

        &.second-slider {
            background-color: transparent;
        }
    }

    .rangedouble-slider[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 10px;
        height: 10px;
        background-color: $c-primary;
        cursor: pointer;
    }

    .rangedouble-slider[type='range']::-moz-range-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 10px;
        height: 10px;
        background-color: $c-primary;
        cursor: pointer;
    }

    .rangedouble-slider[type='range']::-webkit-slider-thumb:hover {
        background: $c-primary;
    }
}