/*
* @author  Agence Dn'D <contact@dnd.fr>
* @license https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
* @link    https://www.dnd.fr/
*/

.template-collection,
.template-search {
	.yotpo-sr-bottom-line-summary {
		flex-direction: row !important;
	}

	.filter-group__applied-item__icon {
		padding-right: 12px;

		svg {
			height: 8px;
			width: 8px;
		}
	}

	.pagetitle {
		font-size: 36px;
	}
	
	.lightish-spaced-row-above {
		margin-top: 0;
        margin-right: -16px;
	}
	
	.related-collection-links {
		display: flex;
		flex-wrap: nowrap;
		column-gap: 16px;
        overflow-x: auto;
        margin-bottom: 10px;
		
		.btn.btn--tertiary {
            display: inline-block !important;
            width: auto;
            flex: none;
			background: var(--secondary);
			color: var(--primary);
			border: 1px solid var(--primary);
			
			&:hover {
                background: var(--primary);
                color: var(--secondary);
			}

			&.related-collection-links__expander {
				display: none !important;
			}
		}
	}

	.utility-bar__right .utility-bar__item {
		margin-inline-start: 0;
		margin-block-start: 10px;
	}
	
	.utility-bar {
		flex-direction: column;
        margin-bottom: 30px;
        padding-bottom: 20px;
	}
	
	.utility-bar__centre {
		order: -1;
	}
	
	.utility-bar__left {
        display: flex;
        justify-content: center;
		width: 100%;
		background: var(--true-gray-100);
        padding: var(--input-btn-padding-top) var(--input-btn-padding-right) var(--input-btn-padding-bottom) var(--input-btn-padding-left);
        border-radius: var(--btn-border-radius);
		
		.toggle-btn {
			display: block;
            width: 100%;
            height: auto;
            text-align: center;
		}
		
		.toggle-btn__chevron {
			display: none;
		}
	}
	
	.filters__heading {
        border-bottom: 1px solid var(--true-gray-100);
        margin: 0 -20px 20px;
        padding: 0 15px 25px 20px;
	}
	
	.filters__close {
        margin-top: 5px;
	}
	
	.filter-group__heading__text {
		color: var(--black);
		font-size: var(--base-text-size-medium);
		font-weight: var(--font-weight-500);
	}
	
	.filter-group__item__text {
        color: var(--true-gray-500);
	}

    .filter-group__item {
	    .filter-group__item__text {
		    &::before {
			    border: 2px solid var(--true-gray-500);
		    }
        }
    }

    .filter-container--side {
	    .filter-group__item {
		    margin-bottom: 10px;
	    }
    }
	
	.filter-group {
        padding-top: 10px;
		border-bottom: 1px solid var(--true-gray-300);
	}
	
	.cc-price-range__input-container {
        border-radius: 6px;
	}
}

@media (max-width: 767.98px) {
    .filter-container .filters {
		width: 100%;
	}
}

@media (min-width: 1000px) and (min-width: 1300px) {
    .filter-container--side .filters .filters__inner {
        padding-inline-end: 40px;
    }
}

@media (min-width: 767.98px) {
    .template-collection,
    .template-search {
	    .page-header {
		    .reading-width {
			    max-width: 662px;
		    }

			+ .container.lightish-spaced-row-above {
				display: flex;
				justify-content: center;
				margin-right: auto;
				margin-left: auto;
			}
	    }
	    
	    .utility-bar__centre {
            margin-left: 180px;
	    }
	    
	    .utility-bar__left {
		    display: none;
	    }
	    
	    .utility-bar__right {
		    display: block;
		    flex: 0;
	    }
	    
	    .utility-bar {
            align-items: center;
		    flex-direction: row;
		    padding-bottom: 0;
            margin-bottom: 30px;
	    }
	    
	    .link-dropdown {
		    display: inline-block;
		    
		    .link-dropdown__button {
			    width: auto !important;
                padding-inline-end: 25px;
			    background-color: var(--fourth);
			    color: var(--primary);
                padding: var(--input-btn-padding-top) var(--input-btn-padding-right) var(--input-btn-padding-bottom) var(--input-btn-padding-left);
                border-radius: var(--btn-border-radius);
		    }
		    
		    .link-dropdown__button-text {
			    margin-right: 20px;
		    }
		    
		    .link-dropdown__button-icon {
                right: 20px;
			    margin: 0;
                transform: translateY(-50%);
		    }
		    
		    .link-dropdown__options {
			    top: 55px;
			    padding-top: 10px;
		    }
	    }
    }
}