.breadcrumbs ul {
    display: flex;
    column-gap: 30px;
    color: var(--grey-2);
}

.breadcrumbs ul li {
    position: relative;
}

.breadcrumbs ul li:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: -20px;
    font-size: 16px;
}

.breadcrumbs ul li:last-child {
    color:var(--black)
}

@media (max-width: 991px){
    .breadcrumbs ul li:not(:last-child)::after {
        content: '\2f';
    }
}

.detailed-info .article-info {
	grid-template-columns: 1fr;
	grid-auto-flow: row;
}

@media (min-width: 540px) {
	.detailed-info .article-info {
		grid-template-columns: 1fr 1fr;
	}
}

.ul-desc {
    list-style: disc;
    max-width: 500px;
}

.ul-desc li {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.detailed-info h3 {
    font-size: clamp(16px, 3vw, 32px);
    max-width: 660px;
}

.price > div:nth-of-type(1){
    font-size: clamp(20px, 2vh, 36px);
    font-weight: 500;
}

.price > div:nth-of-type(2){
    color: var(--grey-2);
    font-size: clamp(16px, 2vh, 24px);
    text-decoration: line-through;
}

.qty-button {
	max-width: 100%;
}

.qty-button button {
	width: 100%;
}

.backToShop-btn {
	color: var(--primary);
	font-weight: 700;
	transition: color .2s ease;
}

.backToShop-btn:hover {
	color: var(--primary-active);
}

.details-info .discount-and-favbox {
	position: absolute;
	top: 10px;
	left: 0;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 100;
}

.details-info .discount span {

    border: 1px solid var(--primary);
    border-radius: 5px;
    padding: 3px 10px;
	font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

@media (min-width: 540px) {
	.qty-button {
		max-width: 500px;
	}
}

.table > :not(caption) > * > *{
    color: var(--grey)
}


.table td[scope="row"] {
    background-color: var(--grey-3);
    width: 40%;
    font-weight: 500;
}

.uses h4 {
    font-size: 26px;
}

.uses-table .uses-box {
    background-color: var(--grey-2);
    width: 37px;
    height: 42px;
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    margin: auto;
}

.use-boxes article p {
    color:var(--grey);
    font-weight: 500;
}



@media (min-width: 992px){
    #imageSliderDetailed {
        height: 500px;
    }
    .carousel-indicators {
        width: 30%;
    }
}


.nav-tabs .nav-link, .nav-tabs .nav-link {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
	outline: none !important;
	color: var(--black);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent;
	outline: none;
	color: var(--black);
}

.item-info-tabs .nav-link {
    color: var(--footer-color);
}


.item-info-tabs .nav-tabs .nav-item.show .nav-link, .item-info-tabs .nav-tabs .nav-link.active {
    border:none;
    border-bottom: 2px solid var(--primary);
}



.nav-link:focus, .nav-link:hover {
    color: var(--bs-nav-link-hover-color);
}


#imageSliderDetailed .carousel-item {
	min-height: 180px;
	margin: 0 auto;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


#imageSliderDetailed .carousel-item img {
    width: 70%;
    object-fit: contain;
    max-height: 350px;
	max-width: 400px;
}


@media (min-width: 992px) {
	#imageSliderDetailed .carousel-item img {
		max-width: 100%;
	}
}

.carousel-indicators {
    display: flex;
    flex-direction: column;
    
    height: 100%;
    justify-content: space-around;
    position: static;
    margin: 0;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--grey-3);
    height: 110px;
    background-position: center;
    background-size: contain;
    width: 100%;
    border: 1px solid var(--line-color);
    background-repeat: no-repeat;
}


.carousel-indicators .active {
    border-color: var(--black);
}


.stock {
	color: var(--green);	
}

.stock i {
	color: var(--green);
}

