/*======== open cart ========*/
.shopping-cart{
    width: fit-content;
	 height: fit-content;
	 overflow: visible;
}

.icon_component .icon_text {
	margin-top: 5px;
}


.icon_component{
    display: flex;
	 flex-direction: column;
    align-items: center;
	 position: relative;
}

/* Tile matches header avatar (36×37). Inline img otherwise adds a line-box gap
   and stretches .medium_radius.prime — Bootstrap reboot used to hide that. */
.icon_component .medium_radius.prime {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 37px;
	box-sizing: border-box;
	line-height: 0;
	flex-shrink: 0;
}

.icon_component .icon{
	display: block;
	padding: 6px;
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-sizing: border-box;
}


.icon_component .count_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #fff;
    color: var(--vm-navy, #0e1a32);
    border: 1px solid var(--color-border, #c3c3c3);
    border-radius: 50%;
    position: absolute;
    /* Pin to the 36px tile, not the wider label */
    top: -6px;
    right: auto;
    left: calc(50% + 8px);
}

.icon_component .count_icon.stage {
    background-color: #fff !important;
    color: var(--vm-navy, #0e1a32) !important;
}

.icon_component .count_icon[hidden] {
    display: none !important;
}

.icon_component .count_icon span{
    font-size: 8px;
    line-height: 1;
    position: relative;
    color: inherit;
}